/* ── VARIABLES & RESET ──────────────────────────────────────────── */
:root {
  --green:      #1ed760;
  --green-glow: rgba(30,215,96,.12);
  --black:      #050505;
  --bg:         #0a0a0a;
  --s1:         #111;
  --s2:         #181818;
  --s3:         #222;
  --s4:         #2a2a2a;
  --b1:         rgba(255,255,255,.06);
  --b2:         rgba(255,255,255,.1);
  --t1:         #f0f0f0;
  --t2:         #999;
  --t3:         #555;
  --ph:         88px;
  --sw:         240px;
  --nh:         64px;
  --r:          12px;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--t1);
  display: grid;
  grid-template-rows: 1fr var(--ph);
  grid-template-columns: var(--sw) 1fr;
  grid-template-areas: "sb main" "pl pl";
}

::-webkit-scrollbar            { width: 5px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: var(--s3); border-radius: 10px; }