:root {
      --bg-base: #0a0a0f;
      --bg-surface: #111118;
      --bg-header: #0f0f14;
      --bg-nav: #0c0c12;
      --bg-input: #18181f;
      --bg-hover: #1a1a22;
      --bg-overlay: rgba(0,0,0,0.55);
      --border: rgba(255,255,255,0.07);
      --border-hover: rgba(255,255,255,0.12);
      --text: #f2f2f7;
      --text-heading: #ffffff;
      --text-muted: #a0a0b0;
      --text-subtle: #6e6e80;
      --text-faint: #4a4a5a;
      --accent: #3b82f6;
      --accent-hover: #61aafd;
      --accent-secondary: #3b82f6;
      --accent-bg: rgba(97, 170, 253, 0.12);
      --accent-bg-soft: rgba(97, 170, 253, 0.08);
      --accent-border: rgba(97, 170, 253, 0.28);
      --accent-glow: rgba(97, 170, 253, 0.22);
      --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #61aafd 100%);
      --green: #34d399;
      --red: #fb7185;
      --blue: #60a5fa;
      --font: "Outfit", system-ui, -apple-system, sans-serif;
      --max-width: 1440px;
      --side-pad: 44px;
    }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg-base); color: var(--text); font-size: 14px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }
[data-lucide] { width: 16px; height: 16px; stroke-width: 2; vertical-align: middle; flex-shrink: 0; }
@media (max-width: 1280px) {
  :root { --side-pad: 28px; }
}
@media (max-width: 768px) {
  :root { --side-pad: 16px; }
}