/* ════════════════════════════════════════════════════════════
   BASE — CSS variables, reset, typography, scrollbar
   ════════════════════════════════════════════════════════════ */

:root {
  --bg:        #0a0c0f;
  --surface:   #111318;
  --surface2:  #171b22;
  --border:    #1f2530;
  --border2:   #2a3040;
  --accent:    #00e5a0;
  --accent2:   #00b87a;
  --warn:      #f59e0b;
  --danger:    #ef4444;
  --info:      #3b82f6;
  --muted:     #4a5568;
  --text:      #e2e8f0;
  --text2:     #8892a4;
  --text3:     #4a5568;
  --sidebar-w: 240px;
  --header-h:  56px;
  --radius:    6px;
  --mono:      'IBM Plex Mono', monospace;
  --sans:      'Syne', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── ANIMATIONS ── */
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes fadeIn  { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
@keyframes slideIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
@keyframes modalIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:none} }