/* ══════════════════════════════════════════════════════════════
   Base — variables, reset, body, scrollbar, animations.
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }

:root {
  --purple: #7C6FE0;
  --purple-light: #9B91E8;
  --purple-dim: #7C6FE033;
  --surface: #0F0E17;
  --surface-raised: #1A1929;
  --surface-hover: #1C1A27;
  --border: #2A2740;
  --border-subtle: rgba(124, 111, 224, 0.08);
  --text: #FFFFFE;
  --text-dim: #94939E;
  --text-muted: #5D5978;
  --green: #4ADE80;
  --green-bg: #4ADE8015;
  --yellow: #FACC15;
  --yellow-bg: #FACC1512;
  --red: #F87171;
  --red-bg: #F8717112;
  --radius: 8px;
  --radius-lg: 14px;
  --mono: 'JetBrains Mono', monospace;
  --brand: 'Plus Jakarta Sans', sans-serif;
}

body {
  font-family: var(--brand);
  background: var(--surface);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(16px); } }
@keyframes fadeIn   { from { opacity: 0; } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(20px) scale(.98); } }
@keyframes fadeOut  { to   { opacity: 0; transform: translateY(8px); } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.row-enter { animation: fadeUp .35s cubic-bezier(.16,1,.3,1) both; }