:root {
            --bg-primary: #050508;
            --bg-secondary: #0a0a12;
            --bg-tertiary: #0f0f1a;
            --surface-primary: #0f0f1a;
            --surface-secondary: #0a0a12;
            --accent-primary: #06b6d4;
            --accent-secondary: #3b82f6;
            --accent-tertiary: #8b5cf6;
            --accent-glow: rgba(6, 182, 212, 0.3);
            --text-primary: #e2e8f0;
            --text-secondary: #94a3b8;
            --text-muted: #475569;
            --border-color: rgba(6, 182, 212, 0.12);
            --success: #10b981;
            --error: #ef4444;
            --warning: #f59e0b;
            --premium-gold: #fbbf24;
        }

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

        body {
            font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
            line-height: 1.6;
            transition: background 0.3s ease, color 0.3s ease;
        }

        /* Light Mode */
        body.light-mode {
            --bg-primary: #f8fafc;
            --bg-secondary: #ffffff;
            --bg-tertiary: #f1f5f9;
            --surface-primary: #f1f5f9;
            --surface-secondary: #ffffff;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-muted: #94a3b8;
            --border-color: rgba(15, 23, 42, 0.1);
        }

        body.light-mode::before {
            background: radial-gradient(circle at 20% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
        }

        /* Animated background gradient */
        body::before {
            content: '';
            position: fixed;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 20% 50%, rgba(6, 182, 212, 0.07) 0%, transparent 50%),
                        radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.07) 0%, transparent 50%),
                        radial-gradient(circle at 50% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
            animation: gradientShift 20s ease infinite;
            pointer-events: none;
            z-index: 0;
        }

        @keyframes gradientShift {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            50% { transform: translate(-5%, -5%) rotate(5deg); }
        }

        .container {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1.5rem;
        }