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

        html, body {
            height: 100%;
            overflow-x: hidden;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #0b1326;
            display: flex;
            flex-direction: column;
        }

        .login-split {
            flex: 1;
            display: flex;
            width: 100%;
        }

        /* ── LEFT PANEL — Hero / Brand ── */
        .login-left {
            flex: 1 1 55%;
            position: relative;
            background: linear-gradient(135deg, #060e20 0%, #0b1326 40%, #0f1e40 100%);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 3rem 3.5rem;
            overflow: hidden;
        }

        /* Ambient glow orbs */
        .login-left::before {
            content: '';
            position: absolute;
            width: 600px; height: 600px;
            border-radius: 50%;
            background: radial-gradient(ellipse, rgba(47,217,244,0.12) 0%, transparent 70%);
            top: -150px; left: -150px;
            pointer-events: none;
        }
        .login-left::after {
            content: '';
            position: absolute;
            width: 500px; height: 500px;
            border-radius: 50%;
            background: radial-gradient(ellipse, rgba(180,197,255,0.08) 0%, transparent 70%);
            bottom: -100px; right: -100px;
            pointer-events: none;
        }

        /* Animated grid dots */
        .grid-pattern {
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(circle, rgba(47,217,244,0.12) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
        }

        /* Pulse / live lines */
        .hero-lines {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 300px;
            pointer-events: none;
            overflow: hidden;
        }
        .hero-line {
            position: absolute;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(47,217,244,0.5), transparent);
            animation: lineSlide 4s ease-in-out infinite;
            width: 60%;
        }
        .hero-line:nth-child(1) { bottom: 80px; left: -10%; animation-delay: 0s; }
        .hero-line:nth-child(2) { bottom: 140px; left: 20%; width: 40%; animation-delay: 1.5s; opacity: 0.6; }
        .hero-line:nth-child(3) { bottom: 200px; left: 5%; animation-delay: 3s; opacity: 0.35; }
        @keyframes lineSlide {
            0%   { transform: translateX(-20px); opacity: 0; }
            20%  { opacity: 1; }
            80%  { opacity: 1; }
            100% { transform: translateX(40px); opacity: 0; }
        }

        /* Brand top‑left */
        .brand-mark {
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
            z-index: 2;
        }
        .brand-mark img {
            width: 40px; height: 40px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(47,217,244,0.45);
        }
        .brand-name {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: #dae2fd;
        }
        .brand-name span { color: #2fd9f4; }
        .brand-tag {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: rgba(198,198,205,0.5);
            margin-top: 2px;
        }

        /* Hero copy */
        .hero-copy {
            position: relative;
            z-index: 2;
        }
        .hero-kicker {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: #2fd9f4;
            margin-bottom: 1.25rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .hero-kicker::before {
            content: '';
            display: block;
            width: 24px; height: 1.5px;
            background: #2fd9f4;
        }
        .hero-headline {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(2rem, 3.5vw, 3.2rem);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.04em;
            color: #dae2fd;
            margin-bottom: 1.25rem;
        }
        .hero-headline em {
            font-style: normal;
            background: linear-gradient(135deg, #b4c5ff, #2fd9f4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero-sub {
            font-size: 1rem;
            line-height: 1.65;
            color: rgba(198,198,205,0.75);
            max-width: 420px;
        }

        /* Stats row */
        .hero-stats {
            display: flex;
            gap: 2.5rem;
            position: relative;
            z-index: 2;
            padding-top: 2rem;
            border-top: 1px solid rgba(69,70,77,0.4);
        }
        .stat-item { display: flex; flex-direction: column; gap: 4px; }
        .stat-num {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.6rem;
            font-weight: 700;
            color: #b4c5ff;
            letter-spacing: -0.03em;
            line-height: 1;
        }
        .stat-label {
            font-size: 0.72rem;
            color: rgba(198,198,205,0.5);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-top: 4px;
        }

        /* ── RIGHT PANEL — Form ── */
        .login-right {
            flex: 0 0 420px;
            background: #060e20;
            border-left: 1px solid rgba(69,70,77,0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem 2.75rem;
            position: relative;
        }

        /* Top shimmer line */
        .login-right::before {
            content: '';
            position: absolute;
            top: 0; left: 15%; right: 15%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(47,217,244,0.5), transparent);
        }

        .login-card {
            width: 100%;
            max-width: 340px;
        }

        .login-heading {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: #dae2fd;
            letter-spacing: -0.03em;
            margin-bottom: 0.4rem;
        }
        .login-subheading {
            font-size: 0.85rem;
            color: rgba(198,198,205,0.6);
            margin-bottom: 2.25rem;
            line-height: 1.5;
        }

        /* ── FORM FIELDS ── */
        .field-group { margin-bottom: 1rem; }

        .field-group label {
            display: block;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(198,198,205,0.55);
            margin-bottom: 0.4rem;
        }

        .field-input-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }

        .field-input-wrap input {
            width: 100%;
            background: rgba(255,255,255,0.035);
            border: 1px solid rgba(69,70,77,0.6);
            border-radius: 10px;
            padding: 0.72rem 1rem;
            color: #dae2fd;
            font-size: 0.88rem;
            font-family: 'Inter', sans-serif;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
        }
        .field-input-wrap input::placeholder { color: rgba(198,198,205,0.25); }
        .field-input-wrap input:focus {
            border-color: rgba(47,217,244,0.55);
            background: rgba(47,217,244,0.04);
            box-shadow: 0 0 0 3px rgba(47,217,244,0.08);
        }
        .field-input-wrap input[type="password"],
        .field-input-wrap input[type="text"] { padding-right: 2.75rem; }

        /* Eye toggle */
        .eye-btn {
            position: absolute;
            right: 1rem;
            top: 50%;
            margin-top: -8px;
            height: 16px;
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0;
            cursor: pointer;
            color: rgba(198,198,205,0.3);
            transition: color 0.2s;
            z-index: 10;
        }
        .eye-btn:focus { outline: none; }
    /* FOOTER */
    .footer { flex-shrink: 0; border-top: 1px solid rgba(69,70,77,0.3); padding: 1rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #060e20; }
    .footer-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
    .footer-brand img { width: 22px; height: 22px; border-radius: 4px; box-shadow: 0 0 10px rgba(0,245,212,0.3); }
    .footer-tagline { font-size: 0.78rem; color: var(--muted); font-style: italic; }
    .footer-links { display: flex; gap: 1.5rem; }
    .footer-links a { font-size: 0.78rem; color: var(--muted); text-decoration: none; transition: color 0.2s; }
    .footer-links a:hover { color: var(--cyan); }
    .footer-copy { font-size: 0.75rem; color: rgba(107,122,144,0.6); font-family: var(--font-mono); }

        .eye-btn:hover { color: #2fd9f4; }

        /* ── CTA ── */
        .cta-btn {
            width: 100%;
            margin-top: 1.5rem;
            padding: 0.8rem;
            border: none;
            border-radius: 10px;
            background: linear-gradient(135deg, #b4c5ff 0%, #2fd9f4 100%);
            color: #00174b;
            font-size: 0.88rem;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: opacity 0.2s, box-shadow 0.2s, transform 0.15s;
            box-shadow: 0 4px 20px rgba(47,217,244,0.25);
        }
        
        .cta-btn:hover {
            opacity: 0.95;
            transform: translateY(-1px);
        }

        .cta-btn:active {
            transform: translateY(0);
        }
.oauth-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 1.5rem 0 1rem;
            color: rgba(198,198,205,0.35);
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .oauth-divider::before, .oauth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(69,70,77,0.4);
        }
        .oauth-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .oauth-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0.65rem 1rem;
            border-radius: 10px;
            border: 1px solid rgba(69,70,77,0.6);
            background: rgba(255,255,255,0.035);
            color: #dae2fd;
            font-size: 0.82rem;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s;
        }
        .oauth-btn:hover {
            background: rgba(255,255,255,0.07);
            border-color: rgba(69,70,77,0.9);
            transform: translateY(-1px);
        }
        .oauth-google:hover { border-color: rgba(66,133,244,0.5); }
        .oauth-github:hover { border-color: rgba(255,255,255,0.4); }

        /* ── FORGOT PASSWORD ── */
        .forgot-password {
            margin-top: 1.25rem;
            text-align: center;
        }
        .forgot-password a {
            color: rgba(198,198,205,0.4);
            font-size: 0.75rem;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s;
        }
        .forgot-password a:hover {
            color: var(--primary);
        }
        .cta-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
            pointer-events: none;
        }
        .cta-btn:hover:not(:disabled) {
            box-shadow: 0 6px 30px rgba(47,217,244,0.45);
            transform: translateY(-1px);
        }
        .cta-btn:active:not(:disabled) { transform: translateY(0); }
        .cta-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

        /* ── ERROR ── */
        .error-msg {
            color: #ffb4ab;
            font-size: 0.78rem;
            margin-top: 0.75rem;
            text-align: center;
            min-height: 16px;
            font-weight: 500;
        }

        /* ── FOOTER NOTE ── */
        .invite-note {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(69,70,77,0.35);
            font-size: 0.68rem;
            color: rgba(198,198,205,0.3);
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        /* ── PULSE DOT ── */
        .pulse-dot {
            display: inline-block;
            width: 7px; height: 7px;
            border-radius: 50%;
            background: #2fd9f4;
            box-shadow: 0 0 0 0 rgba(47,217,244,0.5);
            animation: pulse 2.5s ease-in-out infinite;
            flex-shrink: 0;
        }
        @keyframes pulse {
            0%   { box-shadow: 0 0 0 0 rgba(47,217,244,0.5); }
            50%  { box-shadow: 0 0 0 6px rgba(47,217,244,0); }
            100% { box-shadow: 0 0 0 0 rgba(47,217,244,0); }
        }

        /* ── VERSION BADGE ── */
        .version-badge {
            position: absolute;
            bottom: 1.25rem;
            left: 0; right: 0;
            text-align: center;
            font-size: 0.65rem;
            color: rgba(198,198,205,0.2);
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: 0.08em;
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 900px) {
            .login-left { display: none; }
            .login-right { flex: 1; border-left: none; }
        }
        @media (max-width: 480px) {
            .login-right { padding: 2rem 1.5rem; }
        }

        @media (prefers-reduced-motion: reduce) {
            .hero-line, .pulse-dot { animation: none; }
        }