:root {
  color-scheme: light;
  --bg: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --card: rgba(255,255,255,.76);
  --border: rgba(148,163,184,.22);
  --shadow: 0 16px 45px -28px rgba(15,23,42,.35);
  --positive: #059669;
  --negative: #dc2626;
  --accent: #2563eb;
  --grid: #e2e8f0;
}

body.dark {
  color-scheme: dark;
  --bg: #0b1120;
  --text: #f8fafc;
  --muted: #94a3b8;
  --card: rgba(30,41,59,.72);
  --border: rgba(148,163,184,.14);
  --shadow: 0 18px 50px -25px rgba(0,0,0,.7);
  --positive: #34d399;
  --negative: #f87171;
  --accent: #60a5fa;
  --grid: #334155;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%,rgba(59,130,246,.11),transparent 34rem),
    radial-gradient(circle at 100% 30%,rgba(16,185,129,.08),transparent 30rem),var(--bg);
  transition: background-color .3s,color .3s;
}

#performance-app { width: min(1180px,calc(100% - 32px)); margin: 0 auto; padding: 52px 0 34px; }
.header-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:30px; }
.eyebrow { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
#status-dot { width:9px; height:9px; border-radius:50%; background:#f59e0b; box-shadow:0 0 0 5px rgba(245,158,11,.13); }
#status-dot.live { background:#10b981; box-shadow:0 0 0 5px rgba(16,185,129,.13); }
#status-dot.stale { background:#ef4444; box-shadow:0 0 0 5px rgba(239,68,68,.13); }
h1 { margin:10px 0 6px; font-size:clamp(2rem,5vw,3.25rem); letter-spacing:-.045em; line-height:1.05; }
.subtitle { margin:0; color:var(--muted); }
.theme-toggle { width:44px; height:44px; border:1px solid var(--border); border-radius:50%; color:var(--text); background:var(--card); box-shadow:var(--shadow); cursor:pointer; font-size:1.2rem; }
.glass-card { border:1px solid var(--border); background:var(--card); box-shadow:var(--shadow); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.stats-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.stats-grid article { border-radius:16px; padding:20px; min-width:0; }
.stat-title { color:var(--muted); font-size:.78rem; font-weight:600; min-height:34px; }
.stat-value { margin-top:7px; font-size:clamp(1.35rem,2vw,1.75rem); font-weight:700; white-space:nowrap; }
.positive { color:var(--positive); }
.negative { color:var(--negative); }
.chart-card { position:relative; border-radius:20px; padding:24px; min-height:570px; }
.chart-header { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.chart-header h2 { margin:0 0 4px; font-size:1.18rem; }
.chart-header p { margin:0; color:var(--muted); font-size:.82rem; }
.range-controls { display:flex; gap:6px; padding:4px; border:1px solid var(--border); border-radius:10px; }
.range-controls button { border:0; border-radius:7px; padding:7px 10px; color:var(--muted); background:transparent; cursor:pointer; font-weight:700; font-size:.75rem; }
.range-controls button.active { color:white; background:var(--accent); }
#main-chart { width:100%; height:475px; }
.chart-error { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); color:var(--negative); }
footer { display:flex; flex-wrap:wrap; gap:10px 24px; color:var(--muted); font-size:.78rem; padding:18px 4px 0; }
footer p { width:100%; margin:0; }
footer strong { color:var(--text); font-weight:600; }

@media (max-width:900px) {
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-grid article:first-child { grid-column:span 2; }
}
@media (max-width:560px) {
  #performance-app { width:min(100% - 20px,1180px); padding-top:28px; }
  .subtitle { font-size:.85rem; }
  .chart-card { padding:17px 12px; min-height:520px; }
  .chart-header { align-items:flex-start; flex-direction:column; }
  #main-chart { height:405px; }
  .stat-title { min-height:auto; }
}