/* =============================================================
   Theme: Dark (default)
   CSS custom properties and global reset for the dark theme
   ============================================================= */

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

        :root {
            /* ── Brand Colors ── */
            --blue: #0088ff;
            --blue-dim: #0055aa;
            --blue-bright: #00aaff;
            --cyan: #00ffff;
            --green: #00ff66;
            --yellow: #ffdd00;
            --orange: #ff6600;
            --red: #ff2244;

            /* ── Neutrals ── */
            --neutral-50: #e8e8f0;
            --neutral-100: #cdd9e5;
            --neutral-200: #c9d1d9;
            --neutral-300: #8b949e;
            --neutral-400: #6e7681;
            --neutral-500: #555570;
            --neutral-600: #4d5260;
            --neutral-700: #3d3d3d;
            --neutral-800: #2a2a30;
            --neutral-900: #1a1a2e;

            /* ── Surfaces ── */
            --bg-deep: #0d0f1a;
            --bg-panel: #151729;
            --bg-surface: #1a1d30;
            --bg-elevated: #222540;
            --bg-hover: #2a2e4a;

            /* Backward-compat aliases */
            --dark-bg: var(--bg-deep);
            --panel-bg: var(--bg-panel);

            /* ── Text ── */
            --text-primary: var(--neutral-50);
            --text-secondary: var(--neutral-200);
            --text-muted: var(--neutral-300);
            --text-dim: var(--neutral-400);
            --text-disabled: var(--neutral-600);

            /* ── Borders ── */
            --border-subtle: rgba(0, 136, 255, 0.08);
            --border-default: rgba(0, 136, 255, 0.15);
            --border-strong: rgba(0, 136, 255, 0.25);
            --border-accent: rgba(0, 136, 255, 0.4);

            /* ── Spacing ── */
            --sp-1: 4px;
            --sp-2: 8px;
            --sp-3: 12px;
            --sp-4: 16px;
            --sp-6: 24px;
            --sp-8: 32px;
            --sp-12: 48px;
            --sp-16: 64px;

            /* ── Border Radius ── */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-full: 50%;

            /* ── Typography ── */
            --font-display: 'Space Grotesk', -apple-system, sans-serif;
            --font-body: 'Inter', -apple-system, sans-serif;
            --font-mono: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

            /* ── Font Sizes ── */
            --text-xs: 10px;
            --text-sm: 12px;
            --text-md: 13px;
            --text-lg: 14px;
            --text-xl: 16px;
            --text-2xl: 18px;
            --text-3xl: 24px;
        }

        /* Global scrollbar theme - dark charcoal/blue matching app palette */
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--neutral-900) var(--bg-panel);
        }
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-panel);
        }
        ::-webkit-scrollbar-thumb {
            background: var(--neutral-900);
            border-radius: var(--radius-sm);
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--neutral-600);
        }
        ::-webkit-scrollbar-corner {
            background: var(--bg-panel);
        }

        body {
            background: var(--bg-deep);
            font-family: var(--font-mono);
            color: var(--blue);
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* Animated background grid */
        body::before {
            content: '';
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-image:
                linear-gradient(rgba(0, 136, 255, 0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 136, 255, 0.06) 1px, transparent 1px);
            background-size: 50px 50px;
            pointer-events: none;
            z-index: -1;
        }

        /* ── Mobile responsive base ── */
        @media (max-width: 768px) {
            body {
                font-size: 14px;
            }
        }