:root{--bg:#0a0b0d;--card:#14171b;--line:#252a31;--txt:#eef0f2;--muted:#8b929b;--accent:#3e6ae1;--ok:#2fbf71;--warn:#f5a524;--bad:#ff5a5f}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#1a1f27 0,var(--bg) 60%);color:var(--txt);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
.top,main,footer,.banner{max-width:1100px;margin:0 auto;padding:0 20px}
.top{display:flex;justify-content:space-between;align-items:flex-end;padding-top:32px;padding-bottom:20px;gap:16px;flex-wrap:wrap}
.brand{letter-spacing:.35em;font-size:.75rem;color:var(--muted)}
h1{margin:.2rem 0 0;font-weight:500;font-size:1.8rem}
.muted{color:var(--muted);font-size:.9rem}
.updated{color:var(--muted);font-size:.85rem;text-align:right}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px}
.label{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--muted);margin-bottom:8px}
.hero .odo{font-size:clamp(3rem,10vw,6rem);font-weight:200;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.unit{font-size:.3em;color:var(--muted);margin-left:.4em}
.progress{position:relative;height:12px;background:#0d0f12;border-radius:99px;margin:22px 0 8px;overflow:visible;border:1px solid var(--line)}
.bar{height:100%;border-radius:99px;background:linear-gradient(90deg,#3e6ae1,#6d8ff0);width:0;transition:width 1s ease}
.bar.over{background:linear-gradient(90deg,var(--warn),var(--bad))}
.budget-mark{position:absolute;top:-6px;width:2px;height:22px;background:#fff;border-radius:2px;left:0;box-shadow:0 0 6px #fff8}
.progress-legend{display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:18px}
.grid .card{margin:0}
.stat .value{font-size:2rem;font-weight:300;font-variant-numeric:tabular-nums}
.ok .value{color:var(--ok)} .warn .value{color:var(--warn)} .bad .value{color:var(--bad)}
.bad{border-color:#5a2326} .warn{border-color:#5a4520}
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-size:11px}
.legend{color:var(--muted);font-size:.82rem;margin-top:8px}
.sw{display:inline-block;width:14px;height:3px;vertical-align:middle;margin:0 6px 0 14px}.sw-a{background:#6d8ff0}.sw-b{background:#8b929b}
.empty{text-align:center;padding:60px 24px}.big-icon{font-size:3rem;opacity:.8}
.banner{margin-bottom:16px}.banner>div{background:#15301f;border:1px solid #275c3a;color:#bdf0cf;padding:12px 16px;border-radius:12px}
.hidden{display:none!important}
footer{padding-bottom:40px;text-align:center}