:root { color-scheme: light; --bg:#f4f7f5; --surface:#fff; --surface-muted:#e9efeb; --text:#15231b; --muted:#5e6e64; --line:#d8e2dc; --brand:#126a46; --brand-strong:#084b31; --accent:#e5a72f; --radius:18px; --shadow:0 18px 55px rgb(27 65 44 / 10%); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 8% 0%,#dcebe2 0,transparent 32rem),var(--bg); }
a { color:inherit; }
.skip-link { position:fixed; top:-5rem; left:1rem; z-index:100; padding:.75rem 1rem; background:var(--text); color:white; }
.skip-link:focus { top:1rem; }
.app-header { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:.85rem max(1rem,calc((100vw - 1280px)/2)); border-bottom:1px solid rgb(216 226 220 / 80%); background:rgb(244 247 245 / 88%); backdrop-filter:blur(18px); }
.brand { display:inline-flex; align-items:center; gap:.65rem; font-weight:800; text-decoration:none; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:2.15rem; height:2.15rem; border-radius:11px; color:white; background:var(--brand); }
nav { display:flex; gap:.35rem; }
nav a,.user-menu>a { padding:.6rem .75rem; border-radius:10px; color:var(--muted); text-decoration:none; font-weight:600; font-size:.92rem; }
nav a:hover,nav a:focus-visible,.user-menu>a:hover { color:var(--text); background:var(--surface-muted); }
.user-menu { display:flex; align-items:center; gap:.35rem; }.user-menu form { margin:0; }
.container { width:min(1280px,calc(100% - 2rem)); margin:0 auto; padding:2.5rem 0 4rem; }
.page-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.5rem; }
h1,h2 { letter-spacing:-.035em; } h1 { margin:.15rem 0 0; font-size:clamp(2rem,4vw,3.25rem); line-height:1; } h2 { margin-top:0; }
.eyebrow { color:var(--brand); font-size:.77rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }
.panel,.metric-card { border:1px solid var(--line); border-radius:var(--radius); background:rgb(255 255 255 / 88%); box-shadow:var(--shadow); }.panel { padding:clamp(1.25rem,3vw,2rem); }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1rem; }.metric-card { display:grid; gap:.35rem; padding:1.4rem; }.metric-card span,.metric-card small { color:var(--muted); }.metric-card strong { font-size:2.4rem; }
.empty-state { min-height:20rem; display:grid; place-content:center; justify-items:center; text-align:center; }.empty-icon { display:grid; place-items:center; width:3rem; height:3rem; border-radius:1rem; background:#dcefe4; color:var(--brand); font-size:1.5rem; }
.status-pill { display:inline-flex; align-items:center; padding:.45rem .7rem; border-radius:999px; background:var(--surface-muted); font-size:.8rem; font-weight:700; }.status-ok { color:var(--brand-strong); background:#dcefe4; }
.auth-shell { min-height:calc(100vh - 9rem); display:grid; grid-template-columns:1.1fr minmax(20rem,27rem); align-items:center; gap:clamp(2rem,7vw,7rem); }.auth-intro h1 { max-width:12ch; font-size:clamp(3rem,7vw,6.5rem); }.auth-intro p { max-width:35rem; color:var(--muted); font-size:1.15rem; }.auth-card { display:grid; gap:1rem; }
label { display:grid; gap:.45rem; color:var(--muted); font-size:.88rem; font-weight:700; } input,select,textarea { width:100%; padding:.82rem .9rem; border:1px solid #bdcbc2; border-radius:11px; color:var(--text); background:white; font:inherit; }
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid rgb(229 167 47 / 45%); outline-offset:2px; }
.button { display:inline-flex; justify-content:center; border:0; border-radius:11px; padding:.8rem 1rem; font:inherit; font-weight:750; cursor:pointer; }.button-primary { color:white; background:var(--brand); }.button-primary:hover { background:var(--brand-strong); }.button-quiet { color:var(--muted); background:transparent; }
.form-note { margin:0; color:var(--muted); font-size:.82rem; }.alert { padding:.8rem 1rem; border-radius:10px; }.alert-error { color:#792525; background:#f8dddd; }
.content-grid { display:grid; gap:1rem; }.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }.details-list { display:grid; grid-template-columns:auto 1fr; gap:.7rem 1rem; }.details-list dt { color:var(--muted); }
.app-footer { padding:1rem; color:var(--muted); text-align:center; font-size:.72rem; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.section-heading h2 { margin:0; }.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; text-align:left; } th,td { padding:.85rem .7rem; border-bottom:1px solid var(--line); white-space:nowrap; } th { color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; } td a { color:var(--brand); font-weight:700; text-decoration:none; }.level-list { display:grid; gap:.25rem; }.level-list>div { display:flex; justify-content:space-between; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--line); }.filter-bar { display:flex; align-items:end; gap:.75rem; margin-bottom:1rem; }.filter-bar label { flex:1; }.pagination { display:flex; align-items:center; justify-content:center; gap:1rem; padding:1.25rem; }.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.station-card { display:block; color:inherit; text-decoration:none; }.station-card:hover { border-color:#91ae9c; transform:translateY(-2px); }.severity-critical { color:#7d2222; background:#f8dddd; }.severity-warning { color:#77510a; background:#fff0c8; }.severity-info { color:#174c75; background:#dcecf8; }.lead { font-size:1.15rem; line-height:1.65; }
@media (max-width:860px) { .app-header { grid-template-columns:1fr auto; } nav { grid-column:1/-1; overflow-x:auto; } .metric-grid,.two-columns,.auth-shell,.card-grid { grid-template-columns:1fr; } .auth-shell { padding-top:2rem; } .auth-intro h1 { font-size:clamp(2.8rem,14vw,5rem); } }
@media (max-width:540px) { .container { width:min(100% - 1.25rem,1280px); padding-top:1.5rem; } .app-header { gap:.5rem; } .brand>span:last-child,.user-menu>a { display:none; } .page-heading { align-items:start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }
.level-chart { width:100%; min-height:22rem; margin-bottom:.75rem; }
.actions { display:flex; flex-wrap:wrap; gap:.35rem; }.actions form { margin:0; }
.form-wide { grid-column:1/-1; }.checkboxes { display:flex; gap:1rem; align-items:center; }.checkboxes label { display:flex; grid-template-columns:auto 1fr; align-items:center; }.checkboxes input { width:auto; }.metric-text { font-size:1.25rem!important; }.status-success { color:var(--brand-strong); background:#dcefe4; }.status-partial,.status-waiting_for_data { color:#77510a; background:#fff0c8; }.status-failed { color:#7d2222; background:#f8dddd; }