:root { color-scheme: light; --ink:#17251f; --muted:#627069; --paper:#f5f7f4; --card:#fff; --line:#dce4df; --brand:#256b4a; --accent:#d8f0e4; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); min-height:100vh; }
button,input { font:inherit; }
button { border:0; border-radius:.65rem; background:var(--brand); color:white; padding:.7rem 1rem; cursor:pointer; }
button:focus-visible,input:focus-visible { outline:3px solid #83bda0; outline-offset:2px; }
.topbar { min-height:4.5rem; padding:.9rem clamp(1rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; background:var(--card); border-bottom:1px solid var(--line); }
.topbar strong { display:block; font-size:1.2rem; }
.eyebrow { color:var(--brand); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
main { width:min(1120px,calc(100% - 2rem)); margin:2rem auto 4rem; }
.auth-card { width:min(440px,100%); margin:8vh auto; padding:2rem; background:var(--card); border:1px solid var(--line); border-radius:1rem; box-shadow:0 16px 40px rgba(24,52,39,.08); }
form { display:grid; gap:1rem; }
label { display:grid; gap:.4rem; color:var(--muted); font-size:.9rem; font-weight:650; }
input { width:100%; padding:.72rem; border:1px solid #bbc9c0; border-radius:.55rem; background:white; color:var(--ink); }
.qr { display:block; width:min(240px,100%); min-height:180px; margin:1rem auto; }
.dashboard-heading,.status-row { display:flex; gap:1rem; justify-content:space-between; align-items:end; }
.dashboard-heading h1 { margin:.25rem 0; font-size:clamp(1.7rem,4vw,2.7rem); max-width:720px; }
.range-form { grid-template-columns:repeat(3,auto); align-items:end; }
.status { min-height:1.5rem; color:var(--muted); }
[data-kind="error"] { color:#9d2f2f; }
.metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.metric { background:var(--card); border:1px solid var(--line); border-radius:1rem; padding:1.35rem; }
.metric.hero { background:var(--accent); border-color:#b8dec9; }
.metric.wide { grid-column:1/-1; }
.metric h2 { margin:0 0 1rem; font-size:1.05rem; }
.metric-value { margin:.2rem 0; font-size:3rem; line-height:1; font-weight:800; }
.metric-value.small { font-size:2.2rem; }
dl { margin:0; display:grid; gap:.7rem; }
dl div { display:flex; justify-content:space-between; gap:1rem; padding-top:.65rem; border-top:1px solid var(--line); }
dt { color:var(--muted); } dd { margin:0; font-weight:750; }
.chart { display:block; width:100%; max-height:220px; overflow:visible; margin:1rem 0; }
.chart rect { fill:var(--brand); }
table { width:100%; border-collapse:collapse; }
th,td { padding:.65rem; border-top:1px solid var(--line); text-align:left; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none !important; }
@media(max-width:760px){ .dashboard-heading,.status-row { align-items:stretch; flex-direction:column; } .range-form { grid-template-columns:1fr 1fr; } .range-form button { grid-column:1/-1; } .metric-grid { grid-template-columns:1fr; } .metric.wide { grid-column:auto; } }