:root,
[data-theme="light"] {
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --text-color: #0f172a;
    --text-secondary: #334155;
    --border-color: #e2e8f0;
    --accent-color: #4f46e5;
    --accent-hover: #4338ca;
}
        [data-theme="dark"] {
            --bg-color: #0b0f19;
            --card-bg: #131b2e;
            --text-color: #f8fafc;
            --text-secondary: #cbd5e1;
            --border-color: #1e293b;
            --accent-color: #fb923c;
            --accent-hover: #f97316;
        }
        [data-theme="classic"] {
            --bg-color: #1d2125;
            --card-bg: #2c333a;
            --text-color: #f4f5f7;
            --text-secondary: #98a2b3;
            --border-color: #454f59;
            --accent-color: #579dff;
            --accent-hover: #3b82f6;
        }
        [data-theme="girlypop"] {
            --bg-color: #fff0f5;
            --card-bg: #ffffff;
            --text-color: #881337;
            --text-secondary: #9f1239;
            --border-color: #fbcfe8;
            --accent-color: #ec4899;
            --accent-hover: #db2777;
        }
        [data-theme="stratosphere"] {
            --bg-color: #0c192c;
            --card-bg: #15263f;
            --text-color: #f8fafc;
            --text-secondary: #93c5fd;
            --border-color: #1e3a8a;
            --accent-color: #38bdf8;
            --accent-hover: #60a5fa;
        }
        [data-theme="stratosphere"] body {
            background-color: #0c192c;
            background-image: 
                radial-gradient(circle at 15% 18%, rgba(224, 242, 254, 0.12) 0%, rgba(56, 189, 248, 0.08) 25%, transparent 55%),
                radial-gradient(circle at 80% 12%, rgba(186, 230, 253, 0.14) 0%, rgba(147, 197, 253, 0.06) 30%, transparent 60%),
                radial-gradient(ellipse at 50% 45%, rgba(56, 189, 248, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 25% 75%, rgba(147, 197, 253, 0.1) 0%, rgba(56, 189, 248, 0.04) 35%, transparent 55%),
                radial-gradient(circle at 85% 82%, rgba(224, 242, 254, 0.11) 0%, rgba(56, 189, 248, 0.05) 30%, transparent 50%);
            background-attachment: fixed;
        }
        [data-theme="girlypop"] body, [data-theme="girlypop"] *,
        [data-theme="stratosphere"] body, [data-theme="stratosphere"] * {
            font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        }
        [data-theme="girlypop"] h1, [data-theme="girlypop"] h2, [data-theme="girlypop"] h3,
        [data-theme="stratosphere"] h1, [data-theme="stratosphere"] h2, [data-theme="stratosphere"] h3 {
            font-family: 'Fredoka', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        }
        [data-theme="geek"] {
            --bg-color: #0c1708;
            --card-bg: #14250d;
            --text-color: #18e699;
            --text-secondary: #1bbc68;
            --border-color: #148526;
            --accent-color: #18e699;
            --accent-hover: #1bbc68;
        }
        [data-theme="geek"] body, [data-theme="geek"] * {
            font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace !important;
        }
        [data-theme="cosmic"] {
            --bg-color: #0B0516;
            --card-bg: #160C28;
            --text-color: #F3EFFB;
            --text-secondary: #B37DEA;
            --border-color: #231745;
            --accent-color: #FF44A0;
            --accent-hover: #ff66b2;
        }
        [data-theme="cosmic"] body {
            background-color: #0B0516;
            background-image: 
                radial-gradient(ellipse at 15% 15%, rgba(104, 25, 147, 0.25) 0%, transparent 50%),
                radial-gradient(ellipse at 85% 25%, rgba(255, 68, 160, 0.16) 0%, transparent 45%),
                radial-gradient(ellipse at 50% 85%, rgba(111, 0, 255, 0.18) 0%, transparent 55%);
            background-attachment: fixed;
        }
        [data-theme="cosmic"] .card {
            background-color: rgba(22, 12, 40, 0.85);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid #231745;
        }
        [data-theme="nightcall"] {
            --bg-color: #08060f;
            --card-bg: rgba(20, 13, 34, 0.90);
            --text-color: #fdf2f8;
            --text-secondary: #f472b6;
            --border-color: rgba(255, 20, 147, 0.65);
            --accent-color: #ff1493;
            --accent-hover: #ff4da6;
        }
        [data-theme="nightcall"] body {
            background-color: #08060f;
            background-image: 
                radial-gradient(ellipse at 50% 20%, rgba(10, 6, 22, 0.35) 0%, rgba(8, 6, 15, 0.88) 85%),
                radial-gradient(ellipse at 50% 100%, rgba(255, 20, 147, 0.24) 0%, transparent 60%),
                url('/img/nightcall_retrowave_storm.webp');
            background-size: 100% 100%, 100% 100%, cover;
            background-position: center center, center bottom, center top;
            background-attachment: fixed, fixed, fixed;
            background-repeat: no-repeat, no-repeat, no-repeat;
        }
        [data-theme="nightcall"] .card {
            background-color: rgba(20, 13, 34, 0.90);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1.5px solid rgba(255, 20, 147, 0.65);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 20, 147, 0.38);
        }
        [data-theme="high-contrast"] {
            --bg-color: #030712;
            --card-bg: #0f172a;
            --text-color: #ffffff;
            --text-secondary: #cbd5e1;
            --border-color: #475569;
            --accent-color: #facc15;
            --accent-hover: #fde047;
        }
        [data-theme="high-contrast"] body {
            background-color: #030712 !important;
            color: #ffffff !important;
        }
        [data-theme="high-contrast"] .card {
            background-color: #0f172a !important;
            border: 1.5px solid #475569 !important;
            box-shadow: none !important;
        }
        [data-theme="high-contrast"] .btn {
            background-color: #facc15 !important;
            color: #030712 !important;
            border: 1.5px solid #facc15 !important;
            font-weight: 800 !important;
        }
        [data-theme="high-contrast"] .btn:hover {
            background-color: #fde047 !important;
            color: #030712 !important;
            border-color: #fde047 !important;
        }
        [data-theme="high-contrast"] .google-btn {
            background-color: #0f172a !important;
            color: #ffffff !important;
            border: 1.5px solid #64748b !important;
        }
        [data-theme="high-contrast"] .google-btn:hover {
            border-color: #facc15 !important;
            color: #facc15 !important;
            outline: 2px solid #facc15 !important;
        }
        [data-theme="high-contrast"] .btn-secondary {
            background-color: #0f172a !important;
            color: #38bdf8 !important;
            border: 1.5px solid #38bdf8 !important;
        }
        [data-theme="high-contrast"] .btn-secondary:hover {
            border-color: #7dd3fc !important;
            color: #7dd3fc !important;
            background-color: rgba(56, 189, 248, 0.1) !important;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 60px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 80vh;
        }
        .card {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 40px;
            max-width: 480px;
            width: 100%;
            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
            text-align: center;
        }
        h2 { font-family: 'Plus Jakarta Sans', sans-serif; margin-top: 0; margin-bottom: 12px; }
        p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; margin-bottom: 24px; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: var(--accent-color);
            color: #ffffff;
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14.5px;
            transition: all 0.15s ease;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid transparent;
        }
        .btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
        .google-btn {
            background: #ffffff;
            color: #1f2937;
            border: 1px solid #d1d5db;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
            font-weight: 600;
        }
        .google-btn:hover {
            background: #f9fafb;
            border-color: #9ca3af;
            color: #111827;
        }
        .btn-secondary {
            background: transparent;
            color: var(--text-color);
            border: 1px solid var(--border-color);
            margin-top: 12px;
        }
        .btn-secondary:hover {
            background: var(--bg-color);
            border-color: var(--text-secondary);
        }
        .error-box {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
            padding: 14px;
            border-radius: 8px;
            font-size: 13.5px;
            margin-bottom: 20px;
            text-align: left;
        }
        .setup-notice {
            background: rgba(59, 130, 246, 0.08);
            border: 1px solid rgba(59, 130, 246, 0.25);
            color: var(--text-color);
            padding: 16px;
            border-radius: 10px;
            font-size: 13px;
            margin-bottom: 24px;
            text-align: left;
            line-height: 1.5;
        }