/* ── CSS Variables, Reset, Typography ─────────────────────────────────────── */
:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface2: #334155;
  --border: #334155;
  --accent: #ef4444;
  --accent2: #4f46e5;
  --accent3: #f59e0b;
  --text: #f8fafc;
  --muted: #94a3b8;
  --safe: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
  --font-display: 'Inter', sans-serif;
  --mono: 'ui-monospace', 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
  --cyber: #00e5ff;
}

/* Light Mode Overrides */
body.light-mode {
  --bg: #f0f4f8;
  --surface: #ffffff;
  --surface2: #e1e8f0;
  --border: #ccd6e0;
  --accent: #0084ff;
  --accent2: #d60045;
  --accent3: #b39600;
  --text: #1a2d45;
  --muted: #5a7a9a;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Animated grid background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(239,68,68,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,68,68,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

body.light-mode::before {
  background-image:
    linear-gradient(rgba(0,132,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,132,255,0.03) 1px, transparent 1px);
}

/* Glow orbs */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.orb-1 { width: 500px; height: 500px; background: rgba(239,68,68,0.04); top: -100px; left: -100px; }
.orb-2 { width: 400px; height: 400px; background: rgba(79,70,229,0.04); bottom: 0; right: -100px; }

body.light-mode .orb-1 { background: rgba(0,132,255,0.04); }
body.light-mode .orb-2 { background: rgba(214,0,69,0.03); }

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes terminalFadeIn {
  to { opacity: 1; transform: translateX(0); }
  from { opacity: 0; transform: translateX(-4px); }
}

@keyframes draw-ring { from { stroke-dashoffset: 289; } to { stroke-dashoffset: var(--target-offset); } }