/* ── TOKENS & RESET ─────────────────────────────────────────────────────── */
:root {
  --bg:         #000000;
  --s0:         #000000;
  --s1:         #09090b;
  --s2:         #18181b;
  --s3:         #27272a;
  --s4:         #3f3f46;
  --border:     #27272a;
  --border-h:   #3f3f46;
  --tp:         #ffffff;
  --ts:         #d4d4d8;
  --t3:         #a1a1aa;
  --t4:         #71717a;
  --t5:         #52525b;

  /* Tier accent colors */
  --t0: #ef4444; --t0-bg: rgba(239,68,68,.08); --t0-bd: rgba(239,68,68,.2);
  --t1: #f97316; --t1-bg: rgba(249,115,22,.08); --t1-bd: rgba(249,115,22,.2);
  --t2: #eab308; --t2-bg: rgba(234,179,8,.08);  --t2-bd: rgba(234,179,8,.2);
  --t3c:#22c55e; --t3-bg: rgba(34,197,94,.08);  --t3-bd: rgba(34,197,94,.2);
  --t4c:#3b82f6; --t4-bg: rgba(59,130,246,.08); --t4-bd: rgba(59,130,246,.2);

  /* Score gradient */
  --score-low:  #ef4444;
  --score-mid:  #f97316;
  --score-ok:   #eab308;
  --score-good: #22c55e;

  --glass-bg:   rgba(24,24,27,.45);
  --glass-bd:   rgba(39,39,42,.5);
  --blur:       12px;
  --r-sm: .375rem;
  --r-md: .75rem;
  --r-lg: 1rem;
  --r-xl: 1rem;
  --r-2xl:1.5rem;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ts);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── SCROLL BAR ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--s1); }
::-webkit-scrollbar-thumb { background: var(--s3); border-radius: 3px; }