:root { --ink:#17343d; --muted:#607177; --line:#d6e0e2; --paper:#f5f8f7; --card:#fff; --blue:#1a657c; --orange:#d77942; --red:#ae3e3e; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif; }
main { max-width:1240px; margin:auto; padding:34px 22px 60px; }
header { max-width:820px; margin-bottom:22px; }
.eyebrow { color:var(--orange); font-size:12px; font-weight:800; letter-spacing:.16em; margin:0 0 8px; }
h1 { font-size:clamp(2rem,5vw,4rem); line-height:1; letter-spacing:-.05em; margin:0 0 14px; }
h2 { font-size:1.2rem; margin:0 0 8px; }
.lede,.caption { color:var(--muted); }
.lede { font-size:1.05rem; max-width:720px; }
.tabs { display:flex; gap:7px; border-bottom:1px solid var(--line); margin-bottom:15px; }
.tab { border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:var(--muted); padding:10px 14px; font-weight:800; cursor:pointer; }
.tab.active { color:var(--ink); border-bottom-color:var(--orange); }
.controls { display:flex; flex-wrap:wrap; gap:12px; align-items:end; padding:15px; background:#e7eff0; border:1px solid var(--line); border-radius:12px; margin-bottom:16px; }
.city-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; margin-bottom:12px; }
label { display:grid; gap:5px; color:var(--muted); font-size:.8rem; font-weight:800; }
select,button { min-height:38px; border:1px solid #b9cace; border-radius:7px; padding:7px 10px; background:#fff; color:var(--ink); font:inherit; }
select { min-width:190px; } button { cursor:pointer; font-weight:800; } #reset { background:var(--ink); color:#fff; }
.status { min-height:22px; color:var(--muted); }
.page { display:none; } .page.active { display:block; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:17px; margin:17px 0; overflow:hidden; }
.caption { margin:0 0 12px; font-size:.92rem; }
.chart { min-height:350px; overflow-x:auto; } .chart.short { min-height:230px; }
svg { display:block; width:100%; min-width:760px; height:360px; }
.grid { stroke:#e3eaeb; stroke-dasharray:4 5; } .axis { stroke:#8da2a7; } .x-tick { stroke:#8da2a7; stroke-width:1; } .zero-line { stroke:var(--ink); stroke-width:2.5; opacity:.65; }
.axis-label,.legend { fill:var(--muted); font-size:12px; } .chart-title { fill:var(--ink); font-size:17px; font-weight:800; }
.legend-line { stroke-width:3; } .dot { cursor:pointer; stroke:#fff; stroke-width:1; }
.tooltip { position:fixed; z-index:20; pointer-events:none; background:var(--ink); color:#fff; padding:7px 9px; border-radius:6px; font-size:12px; display:none; }
.all-city-chart { min-height:370px; }
.city-curve { fill:none; stroke:#aab4b6; stroke-width:1.15; stroke-opacity:.28; pointer-events:stroke; transition:stroke .08s,stroke-width .08s,stroke-opacity .08s; }
.has-highlight .city-curve:not(.highlighted) { stroke-opacity:.07; }
.city-curve.highlighted { stroke:var(--orange); stroke-width:3.5; stroke-opacity:1; }
.global-curve { fill:none; stroke:var(--blue); stroke-width:3; pointer-events:none; }
.quantile-band { fill:#c8dadd; fill-opacity:.58; stroke:none; pointer-events:none; }
.city-key { stroke:#aab4b6; stroke-width:2; stroke-opacity:.7; }
.global-key { stroke:var(--blue); stroke-width:3; }
.band-key { fill:#c8dadd; fill-opacity:.75; }
.interval-band { fill:var(--orange); fill-opacity:.24; stroke:none; }
.interval-boundary { fill:none; stroke:var(--orange); stroke-width:1.35; stroke-dasharray:5 4; stroke-opacity:.9; }
.interval-key { fill:var(--orange); fill-opacity:.24; stroke:var(--orange); stroke-width:1; }
.table-wrap { max-height:620px; overflow:auto; border:1px solid var(--line); border-radius:8px; }
.data-table { width:100%; min-width:790px; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.data-table th,.data-table td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.data-table th:first-child,.data-table td:first-child { text-align:left; }
.data-table thead th { position:sticky; top:0; z-index:1; background:#e7eff0; color:var(--ink); font-size:.78rem; letter-spacing:.02em; }
.data-table tbody tr:nth-child(even) { background:#f8faf9; }
.data-table tbody tr.residual-alert { background:#fde8e5; color:#7c2424; font-weight:700; }
.data-table tbody tr.residual-alert:nth-child(even) { background:#f9ddd9; }
.table-note { margin:0; padding:16px; color:var(--muted); }