* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; color: #1f2933; background: #f3f5f7; }
main { padding: 16px; }

.top-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: #fff; border-bottom: 1px solid #d9dee3; }
.top-bar .brand { font-weight: 600; font-size: 16px; }
.top-bar .spacer { flex: 1; }
.top-bar .user { color: #52606d; }
.top-bar form { margin: 0; display: flex; align-items: center; gap: 8px; }

.btn { padding: 7px 14px; border: 1px solid #1f6feb; border-radius: 4px; background: #1f6feb; color: #fff; font-size: 14px; cursor: pointer; }
.btn.secondary { background: #fff; color: #1f2933; border-color: #c5ccd3; }

input { padding: 7px 9px; border: 1px solid #c5ccd3; border-radius: 4px; font-size: 14px; }

.card { background: #fff; border: 1px solid #d9dee3; border-radius: 6px; padding: 16px; }
.card h2 { font-size: 16px; }
.muted { color: #7b8794; }
.error { color: #b42318; margin: 0; }

.login-box { max-width: 340px; margin: 12vh auto 0; background: #fff; border: 1px solid #d9dee3; border-radius: 6px; padding: 24px; }
.login-box h1 { margin: 0 0 16px; font-size: 18px; text-align: center; }
.login-box form { display: flex; flex-direction: column; gap: 8px; }
.login-box label { color: #52606d; }
.login-box .btn { margin-top: 8px; }

.top-bar .range label { color: #52606d; }

.table-wrap { overflow-x: auto; }
table.report { width: 100%; border-collapse: collapse; white-space: nowrap; }
table.report th, table.report td { padding: 7px 12px; border-bottom: 1px solid #e4e8ec; text-align: right; font-variant-numeric: tabular-nums; }
table.report th:first-child, table.report td:first-child { text-align: left; }
table.report thead th { background: #eef1f4; font-weight: 600; }
table.report tbody tr:hover { background: #f7f9fb; }
table.report tfoot td { font-weight: 600; border-top: 2px solid #c5ccd3; border-bottom: none; }

.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h2 { margin: 0; flex: 1; }
.card-head h2 .muted { font-weight: 400; margin-left: 8px; }
.card-head form.inline { margin: 0; }
a.btn { text-decoration: none; display: inline-block; }
table.report a { color: #1f6feb; }
table.report.detail th, table.report.detail td { text-align: left; }
table.report td.text { white-space: normal; min-width: 320px; }
p.muted { margin: 12px 0 0; }