:root {
  color-scheme: light dark;
  --bg: #f4f5ef;
  --surface: #ffffff;
  --ink: #17211c;
  --muted: #65716a;
  --line: #dce2dc;
  --green: #13795b;
  --orange: #e45b30;
  --soft-green: rgba(19, 121, 91, .1);
  --shadow: 0 18px 50px rgba(23, 33, 28, .08);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#101512; --surface:#18201b; --ink:#eef4ef; --muted:#9baa9f; --line:#303b34; --green:#54c99f; --orange:#ff805b; --soft-green:rgba(84,201,159,.1); --shadow:none; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
button, select { font:inherit; }
.shell { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:48px 0 80px; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; }
.eyebrow { margin:0 0 7px; color:var(--green); font:700 11px/1.3 ui-monospace,monospace; letter-spacing:.14em; }
h1 { margin:0; font-size:clamp(36px,6vw,68px); letter-spacing:-.055em; }
h2 { margin:0; font-size:24px; letter-spacing:-.02em; }
.subtle { margin:10px 0 0; color:var(--muted); }
button { padding:11px 18px; border:1px solid var(--ink); border-radius:999px; color:var(--surface); background:var(--ink); cursor:pointer; }
button:focus-visible, select:focus-visible { outline:3px solid var(--soft-green); outline-offset:2px; }
.controls { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.controls label { display:grid; gap:6px; color:var(--muted); font-size:12px; }
select { min-width:170px; padding:10px 34px 10px 12px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--surface); }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px; }
.kpis article,.panel { border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
.kpis article { padding:20px; }
.kpis span,.kpis small { display:block; color:var(--muted); font-size:12px; }
.kpis strong { display:inline-block; margin:9px 5px 3px 0; font-size:32px; letter-spacing:-.04em; }
.kpis small { display:inline; }
.panel { margin-top:14px; padding:24px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.legend { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.legend span { width:9px; height:9px; margin-left:10px; border-radius:50%; }
.avg-dot { background:var(--green); }.p95-dot { background:var(--orange); }
#trend { display:block; width:100%; height:auto; min-height:240px; overflow:visible; }
.grid-line { stroke:var(--line); stroke-width:1; }.axis-label { fill:var(--muted); font-size:11px; }
.avg-line,.p95-line { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:3; }
.avg-line { stroke:var(--green); }.p95-line { stroke:var(--orange); }
.point-avg { fill:var(--green); }.point-p95 { fill:var(--orange); }
.empty { padding:60px 0; color:var(--muted); text-align:center; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { padding:14px 10px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
th:first-child,td:first-child { text-align:left; }
th { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
tbody tr:last-child td { border-bottom:0; }
@media (max-width:760px) { .kpis{grid-template-columns:repeat(2,1fr)} .topbar{align-items:flex-start;flex-direction:column} .panel{padding:18px} }
@media (max-width:420px) { .kpis{grid-template-columns:1fr 1fr}.kpis article{padding:15px}.kpis strong{font-size:26px}.controls label,select{width:100%} }