:root {
            --bg-void: #020617;
            --bg-card: rgba(10, 17, 32, 0.7);
            --border-subtle: rgba(255,255,255,0.035);
            --border-glow: rgba(99,102,241,0.15);
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --text-muted: #475569;
            --accent: #818cf8;
            --accent-2: #6366f1;
            --accent-cyan: #22d3ee;
            --accent-rose: #fb7185;
            --accent-emerald: #34d399;
            --accent-gold: #fbbf24;
            --radius-3xl: 26px;
            --radius-2xl: 18px;
            --radius-xl: 14px;
            --ease-smooth: cubic-bezier(0.22,0.61,0.36,1);
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        html, body {
            height:100%; font-family:'Inter',sans-serif;
            background: var(--bg-void); color:var(--text-primary);
            overflow:hidden;
        }
        body {
            background-image:
                radial-gradient(ellipse 85% 55% at 25% -5%, rgba(99,102,241,0.07) 0%, transparent 55%),
                radial-gradient(ellipse 65% 45% at 80% 108%, rgba(34,211,238,0.05) 0%, transparent 55%);
            background-attachment:fixed;
            display:flex; align-items:center; justify-content:center;
            min-height:100vh;
        }
        .auth-container {
            width:100%; max-width:420px; padding:0 16px;
        }
        .auth-card {
            background:rgba(8,14,28,0.85); backdrop-filter:blur(24px);
            border:1px solid var(--border-subtle); border-radius:var(--radius-3xl);
            padding:2.5rem 2rem; box-shadow:0 30px 80px rgba(0,0,0,0.6);
        }
        .auth-card .logo {
            text-align:center; margin-bottom:2rem;
        }
        .auth-card .logo h2 {
            font-size:1.8rem; font-weight:800;
            background:linear-gradient(135deg, var(--accent-cyan), var(--accent));
            -webkit-background-clip:text; background-clip:text; color:transparent;
            font-family:'Space Grotesk',sans-serif;
        }
        .auth-card .logo p { color:var(--text-secondary); font-size:0.9rem; }
        .form-group { margin-bottom:1.2rem; }
        .form-group label { display:block; font-weight:600; font-size:0.85rem; color:var(--text-primary); margin-bottom:6px; }
        .form-group input {
            width:100%; padding:12px 16px; background:rgba(0,0,0,0.3);
            border:1px solid var(--border-subtle); border-radius:var(--radius-xl);
            color:#fff; font-size:1rem; outline:none; transition:border 0.3s;
        }
        .form-group input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(129,140,248,0.1); }
        .form-group input::placeholder { color:var(--text-muted); }
        .btn-auth {
            width:100%; padding:14px; border:none; border-radius:var(--radius-xl);
            font-weight:700; font-size:1rem; cursor:pointer; transition:all 0.3s;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            color:#fff; box-shadow:0 4px 20px rgba(99,102,241,0.2);
        }
        .btn-auth:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(99,102,241,0.35); }
        .btn-auth:active { transform:scale(0.96); }
        .auth-divider {
            display:flex; align-items:center; gap:1rem; margin:1.5rem 0;
            color:var(--text-muted); font-size:0.8rem;
        }
        .auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border-subtle); }
        .auth-toggle { text-align:center; font-size:0.9rem; color:var(--text-secondary); }
        .auth-toggle a { color:var(--accent); text-decoration:none; font-weight:600; cursor:pointer; }
        .auth-toggle a:hover { text-decoration:underline; }
        .alert {
            padding:12px 16px; border-radius:var(--radius-xl); margin-bottom:1.2rem;
            font-size:0.9rem; display:flex; align-items:center; gap:8px;
        }
        .alert-danger { background:rgba(251,113,133,0.1); color:var(--accent-rose); border:1px solid rgba(251,113,133,0.2); }
        .alert-success { background:rgba(52,211,153,0.1); color:var(--accent-emerald); border:1px solid rgba(52,211,153,0.2); }
        .hidden { display:none; }
        @media (max-width:480px) { .auth-card { padding:1.5rem; } }