:root{color-scheme:light;--bg:#f5f7fb;--surface:#fff;--ink:#182234;--muted:#65758a;--border:#e4e9f1;--accent:#315bd5;--accent-dark:#2649ab;--shadow:0 9px 30px rgba(27,45,83,.045)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
.site-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);height:76px;padding:0 max(22px,calc((100vw - 1152px)/2));display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:750;letter-spacing:-.02em;font-size:16px}
.brand-mark{display:grid;place-items:center;background:#eaf0ff;color:var(--accent);border-radius:11px;width:38px;height:38px;font-weight:800;font-size:13px}
.logout-form{display:flex;align-items:center;gap:16px}
.logged-in{color:var(--muted);font-size:13px}
.logout{background:white;border:1px solid var(--border);padding:10px 16px;border-radius:9px;color:var(--ink);font-weight:600}
.logout:hover{background:var(--bg)}
.page-content{max-width:1200px;width:100%;margin:0 auto;padding:45px 24px 65px;flex:1}
.page-heading{margin:0 0 26px}
.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:800;color:var(--accent);margin-bottom:13px}
h1{font-size:34px;line-height:1.2;letter-spacing:-.04em;margin:0 0 10px}
h2{font-size:18px;letter-spacing:-.02em;margin:0}
.muted{color:var(--muted);margin:0;line-height:1.6;font-size:14px}
.period-panel,.login-card,.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.period-panel{padding:24px 26px;margin-bottom:38px}
.panel-title{font-size:15px;font-weight:750;margin-bottom:18px}
.period-form{display:flex;align-items:flex-end;flex-wrap:wrap;gap:14px}
.field{flex:1;min-width:190px}
.field label,.login-form label{font-size:12px;font-weight:700;color:#48556a;display:block;margin:0 0 8px}
input{border:1px solid #d9e0ea;background:white;border-radius:9px;padding:12px 13px;min-height:46px;color:var(--ink);width:100%;outline:none}
input:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(49,91,213,.12)}
.primary-button{background:var(--accent);color:white;border:0;border-radius:9px;padding:12px 24px;min-height:46px;font-weight:750}
.primary-button:hover{background:var(--accent-dark)}
.primary-button:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #91afff;outline-offset:3px}
.quick-periods{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px}
.quick-periods span{color:var(--muted)}
.quick-periods a{font-weight:700;color:var(--accent)}
.quick-periods a:hover{text-decoration:underline}
.results-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.date-range{font-size:12px;color:var(--muted);font-weight:650}
.metrics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.metric-card{min-height:165px;padding:25px 26px}
.metric-card.featured{grid-column:span 2;background:#f0f4ff;border-color:#d9e4ff}
.metric-label{color:#56677d;font-size:13px;font-weight:700}
.metric-value{font-size:36px;letter-spacing:-.055em;font-weight:800;margin:14px 0 11px;line-height:1.15;overflow-wrap:anywhere}
.metric-value span{font-size:24px;color:#687793;font-weight:650}
.metric-caption{color:#7a899b;font-size:12px}
.alert{border-radius:11px;padding:16px 19px;font-size:13px;line-height:1.65;margin:20px 0}
.alert-error{color:#87351b;background:#fff1eb;border:1px solid #ffd3c1}
.alert-note{color:#71511d;background:#fff9ec;border:1px solid #f3e0b4}
.footnote{color:var(--muted);font-size:12px;line-height:1.7;margin-top:22px}
.login-wrap{min-height:60vh;display:grid;place-items:center}
.login-card{width:100%;max-width:445px;padding:37px}
.login-card h1{font-size:29px}
.login-form{display:flex;flex-direction:column;margin-top:25px}
.login-form input{margin-bottom:19px}
.login-form .full{width:100%;margin-top:2px}
footer{padding:21px 24px;text-align:center;color:#8b97a8;font-size:11px}
@media(max-width:780px){.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-card.featured{grid-column:span 2}.page-content{padding:30px 18px 48px}.topbar{padding:0 18px}}
@media(max-width:520px){.topbar{height:66px}.brand-name{font-size:13px}.logged-in{display:none}.period-panel{padding:20px}.metrics-grid{grid-template-columns:1fr}.metric-card.featured{grid-column:span 1}.metric-card{min-height:140px;padding:21px}.metric-value{font-size:31px}.login-card{padding:26px}.page-heading h1{font-size:30px}.period-form .primary-button{width:100%}}