/* ============================================
   Codemy++ Login — Cinematic Immersive Experience
   Surpassing Byju's 2026 animations, Unacademy energy,
   PW depth, Vedantu intimacy, Embibe AI adaptability.
   ============================================ */

/* ── Hide navbar, footer, assistant dock for full immersion ── */
/* Applied via JS: body gets .login-page-active class */
body.login-page-active .codemy-navbar,
body.login-page-active .footer,
body.login-page-active .assistant-dock,
body.login-page-active .chatbot-overlay,
body.login-page-active .assistant-dock-restore {
    display: none !important;
}

body.login-page-active .codemy-main {
    padding: 0 !important;
    margin: 0 !important;
}

body.login-page-active {
    background: #0f0f1a !important;
}

/* ── Full-page takeover ── */
.login-universe {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #0f0f1a;
}

/* ── LEFT PANEL — Animated brand storytelling ── */
.login-brand-panel {
    position: relative;
    flex: 0 0 52%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    overflow: hidden;
    background: linear-gradient(135deg, #0f0f2e 0%, #1a1040 40%, #0d1b3e 100%);
}

    /* Animated mesh gradient overlay */
    .login-brand-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 600px 400px at 20% 30%, rgba(139, 92, 246, 0.18) 0%, transparent 70%), radial-gradient(ellipse 500px 350px at 75% 70%, rgba(249, 115, 22, 0.14) 0%, transparent 70%), radial-gradient(ellipse 400px 300px at 50% 50%, rgba(59, 130, 246, 0.10) 0%, transparent 70%);
        animation: loginMeshDrift 12s ease-in-out infinite alternate;
        z-index: 1;
    }

@keyframes loginMeshDrift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-20px, 15px) scale(1.05);
    }

    100% {
        transform: translate(10px, -10px) scale(1.02);
    }
}

/* Grid lines pattern */
.login-brand-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 1;
}

.login-brand-content {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 480px;
}

/* Floating orbs */
.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    z-index: 2;
    pointer-events: none;
}

.login-orb-1 {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
    top: 10%;
    left: 8%;
    animation: loginOrbFloat1 8s ease-in-out infinite;
}

.login-orb-2 {
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.25) 0%, transparent 70%);
    top: 60%;
    right: 12%;
    animation: loginOrbFloat2 10s ease-in-out infinite;
}

.login-orb-3 {
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%);
    bottom: 15%;
    left: 20%;
    animation: loginOrbFloat3 7s ease-in-out infinite;
}

.login-orb-4 {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.2) 0%, transparent 70%);
    top: 25%;
    right: 25%;
    animation: loginOrbFloat1 9s ease-in-out infinite reverse;
}

@keyframes loginOrbFloat1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(25px, -30px) scale(1.15);
    }

    66% {
        transform: translate(-15px, 20px) scale(0.9);
    }
}

@keyframes loginOrbFloat2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-20px, 25px) scale(1.1);
    }

    66% {
        transform: translate(30px, -15px) scale(0.95);
    }
}

@keyframes loginOrbFloat3 {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(20px, -25px);
    }
}

/* Floating geometric shapes */
.login-shape {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0.12;
}

.login-shape-hex {
    width: 40px;
    height: 46px;
    background: var(--primary-purple);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    top: 18%;
    right: 18%;
    animation: loginShapeRotate 20s linear infinite;
}

.login-shape-triangle {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid var(--primary-orange);
    bottom: 22%;
    right: 30%;
    animation: loginShapeRotate 15s linear infinite reverse;
}

.login-shape-diamond {
    width: 30px;
    height: 30px;
    background: var(--primary-blue);
    transform: rotate(45deg);
    top: 45%;
    left: 10%;
    animation: loginShapePulse 4s ease-in-out infinite;
}

.login-shape-circle {
    width: 24px;
    height: 24px;
    border: 2px solid var(--primary-green);
    border-radius: 50%;
    bottom: 35%;
    left: 25%;
    animation: loginShapePulse 3s ease-in-out infinite 1s;
}

@keyframes loginShapeRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes loginShapePulse {
    0%, 100% {
        opacity: 0.1;
        transform: scale(1) rotate(45deg);
    }

    50% {
        opacity: 0.25;
        transform: scale(1.3) rotate(45deg);
    }
}

/* Brand logo area */
.login-logo-cluster {
    margin-bottom: 2.5rem;
}

.login-logo-icon {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    background: linear-gradient(135deg, #f97316 0%, #8b5cf6 50%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 2.2rem;
    color: #fff;
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.3), 0 0 80px rgba(249, 115, 22, 0.15);
    animation: loginLogoGlow 4s ease-in-out infinite alternate;
    position: relative;
}

    .login-logo-icon::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 26px;
        background: linear-gradient(135deg, #f97316, #8b5cf6, #3b82f6, #f97316);
        background-size: 300% 300%;
        animation: loginLogoBorder 6s linear infinite;
        z-index: -1;
        opacity: 0.5;
    }

@keyframes loginLogoGlow {
    0% {
        box-shadow: 0 0 40px rgba(139, 92, 246, 0.3), 0 0 80px rgba(249, 115, 22, 0.15);
    }

    100% {
        box-shadow: 0 0 50px rgba(249, 115, 22, 0.35), 0 0 100px rgba(139, 92, 246, 0.2);
    }
}

@keyframes loginLogoBorder {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.login-brand-name {
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

    .login-brand-name span {
        background: linear-gradient(135deg, #f97316, #fb923c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.login-brand-tagline {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin-top: 0.35rem;
    letter-spacing: 0.5px;
}

/* Rotating motivational quotes */
.login-motiv-carousel {
    margin-top: 2.5rem;
    min-height: 90px;
    position: relative;
}

.login-motiv-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

    .login-motiv-slide.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

.login-motiv-quote {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.82);
    font-style: italic;
    line-height: 1.6;
    max-width: 380px;
}

    .login-motiv-quote::before {
        content: '\201C';
        font-size: 2rem;
        color: var(--primary-orange);
        line-height: 0;
        vertical-align: -0.35em;
        margin-right: 2px;
    }

.login-motiv-author {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Animated stats bar */
.login-stats-bar {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.login-stat-item {
    text-align: center;
}

.login-stat-number {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f97316, #fb923c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-stat-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 0.15rem;
}

/* Dots indicator for carousel */
.login-motiv-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 1rem;
}

.login-motiv-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .login-motiv-dot.active {
        background: var(--primary-orange);
        width: 20px;
        border-radius: 3px;
    }


/* ── RIGHT PANEL — Login form ── */
.login-form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 2.5rem;
    background: linear-gradient(180deg, #fafbfe 0%, #f3f4f8 100%);
    position: relative;
    overflow: hidden;
}

    /* Subtle background decoration */
    .login-form-panel::before {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(249, 115, 22, 0.04) 0%, transparent 70%);
        top: -150px;
        right: -150px;
        pointer-events: none;
    }

    .login-form-panel::after {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.04) 0%, transparent 70%);
        bottom: -100px;
        left: -100px;
        pointer-events: none;
    }

.login-form-wrapper {
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 2;
}

/* Path context badge */
.login-path-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    animation: loginBadgeIn 0.6s ease-out;
}

.login-path-badge-exam {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.login-path-badge-prog {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.15);
}

@keyframes loginBadgeIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Welcome heading */
.login-heading {
    font-family: 'Inter', sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 0.4rem;
}

.login-subheading {
    color: var(--text-gray);
    font-size: 0.92rem;
    margin-bottom: 2rem;
    line-height: 1.5;
}

/* ── Glass card ── */
.login-glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.3s ease;
}

    .login-glass-card:hover {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
    }

/* ── Form fields with floating labels ── */
.login-field {
    position: relative;
    margin-bottom: 1.25rem;
}

    .login-field label {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 0.4rem;
        transition: color 0.2s ease;
    }

    .login-field .login-input-wrap {
        position: relative;
    }

    .login-field .login-input-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-light);
        font-size: 0.9rem;
        transition: color 0.2s ease;
        pointer-events: none;
        z-index: 2;
    }

    .login-field input[type="text"],
    .login-field input[type="email"],
    .login-field input[type="password"] {
        width: 100%;
        padding: 0.72rem 0.85rem 0.72rem 2.6rem;
        border: 1.5px solid var(--border-color);
        border-radius: var(--radius-md);
        font-size: 0.92rem;
        color: var(--text-dark);
        background: rgba(255, 255, 255, 0.7);
        transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
        outline: none;
        font-family: 'Inter', 'Poppins', sans-serif;
    }

    .login-field input:focus {
        border-color: var(--primary-orange);
        box-shadow: 0 0 0 3.5px rgba(249, 115, 22, 0.1);
        background: #fff;
    }

        .login-field input:focus ~ .login-input-icon,
        .login-field input:focus + .login-input-icon {
            color: var(--primary-orange);
        }

    /* When input has focus, highlight label too */
    .login-field:focus-within label {
        color: var(--primary-orange);
    }

/* Password toggle */
.login-pw-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 4px;
    transition: color 0.2s ease;
    z-index: 2;
}

    .login-pw-toggle:hover {
        color: var(--primary-orange);
    }

/* Forgot password link */
.login-forgot-link {
    font-size: 0.82rem;
    color: var(--primary-orange);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .login-forgot-link:hover {
        color: #ea580c;
        text-decoration: underline;
    }

/* ── Primary submit button — Cinematic ── */
.login-btn-submit {
    position: relative;
    width: 100%;
    padding: 0.78rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: 'Inter', 'Poppins', sans-serif;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 0.5rem;
}

    .login-btn-submit::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
        transition: left 0.5s ease;
    }

    .login-btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
    }

        .login-btn-submit:hover::before {
            left: 100%;
        }

    .login-btn-submit:active {
        transform: translateY(0);
    }

    /* Button loading state */
    .login-btn-submit.is-loading {
        pointer-events: none;
        opacity: 0.85;
    }

        .login-btn-submit.is-loading .login-btn-text {
            opacity: 0;
        }

    .login-btn-submit .login-btn-spinner {
        display: none;
        position: absolute;
        inset: 0;
        align-items: center;
        justify-content: center;
    }

    .login-btn-submit.is-loading .login-btn-spinner {
        display: flex;
    }

.login-btn-spinner::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: loginSpin 0.6s linear infinite;
}

@keyframes loginSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Divider ── */
.login-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--text-light);
    font-size: 0.82rem;
    font-weight: 500;
}

    .login-divider::before,
    .login-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border-color);
    }

/* ── Google button ── */
.login-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.72rem 1.5rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Inter', 'Poppins', sans-serif;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

    .login-btn-google:hover {
        border-color: #d1d5db;
        background: #f9fafb;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .login-btn-google .fab {
        font-size: 1.1rem;
    }

/* Google multi-color icon */
.login-google-icon {
    width: 20px;
    height: 20px;
}

/* Admin link */
.login-admin-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.78rem;
    color: var(--text-light);
}

    .login-admin-link a {
        color: var(--primary-purple);
        font-weight: 600;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .login-admin-link a:hover {
            color: #7c3aed;
            text-decoration: underline;
        }

/* ── Register prompt ── */
.login-register-prompt {
    text-align: center;
    margin-top: 1.75rem;
    font-size: 0.9rem;
    color: var(--text-gray);
}

    .login-register-prompt a {
        color: var(--primary-orange);
        font-weight: 700;
        text-decoration: none;
        position: relative;
        transition: color 0.2s ease;
    }

        .login-register-prompt a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-orange);
            transition: width 0.3s ease;
        }

        .login-register-prompt a:hover::after {
            width: 100%;
        }

/* ── Explore bar ── */
.login-explore-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.login-explore-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-gray);
    background: var(--bg-gray);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

    .login-explore-chip:hover {
        color: var(--primary-orange);
        background: rgba(249, 115, 22, 0.06);
        border-color: rgba(249, 115, 22, 0.15);
        transform: translateY(-1px);
    }

    .login-explore-chip i {
        font-size: 0.72rem;
    }

/* ── Validation errors ── */
.login-glass-card .text-danger {
    font-size: 0.8rem;
    margin-top: 0.3rem;
    display: block;
}

.login-glass-card .validation-summary-errors ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.login-glass-card .validation-summary-errors li {
    background: rgba(239, 68, 68, 0.06);
    color: #dc2626;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    border-left: 3px solid #ef4444;
    margin-bottom: 0.35rem;
}

/* ── Particle canvas ── */
.login-particles-canvas {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* ── Stagger entrance animations ── */
@keyframes loginFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-animate-in {
    opacity: 0;
    animation: loginFadeUp 0.7s ease-out forwards;
}

    .login-animate-in:nth-child(1) {
        animation-delay: 0.1s;
    }

    .login-animate-in:nth-child(2) {
        animation-delay: 0.2s;
    }

    .login-animate-in:nth-child(3) {
        animation-delay: 0.3s;
    }

    .login-animate-in:nth-child(4) {
        animation-delay: 0.4s;
    }

    .login-animate-in:nth-child(5) {
        animation-delay: 0.5s;
    }

    .login-animate-in:nth-child(6) {
        animation-delay: 0.6s;
    }

    .login-animate-in:nth-child(7) {
        animation-delay: 0.7s;
    }

/* ── Responsive ── */

/* Tablet */
@media (max-width: 991.98px) {
    .login-universe {
        flex-direction: column;
    }

    .login-brand-panel {
        flex: none;
        padding: 2.5rem 1.5rem 2rem;
        min-height: auto;
    }

    .login-stats-bar {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .login-motiv-carousel {
        margin-top: 1.75rem;
        min-height: 80px;
    }

    .login-form-panel {
        padding: 2rem 1.5rem 3rem;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .login-brand-panel {
        padding: 2rem 1.25rem 1.5rem;
    }

    .login-logo-icon {
        width: 60px;
        height: 60px;
        font-size: 1.7rem;
        border-radius: 16px;
    }

    .login-brand-name {
        font-size: 1.5rem;
    }

    .login-stats-bar {
        gap: 1.25rem;
    }

    .login-stat-number {
        font-size: 1.2rem;
    }

    .login-form-panel {
        padding: 1.5rem 1.25rem 2.5rem;
    }

    .login-heading {
        font-size: 1.5rem;
    }

    .login-glass-card {
        padding: 1.5rem;
    }

    .login-explore-bar {
        gap: 0.4rem;
    }

    .login-motiv-carousel {
        display: none;
    }

    .login-motiv-dots {
        display: none;
    }

    /* Hide some orbs/shapes on mobile for perf */
    .login-orb-3,
    .login-orb-4,
    .login-shape-diamond,
    .login-shape-circle {
        display: none;
    }
}

/* ── Dark theme overrides ── */
html[data-theme="dark"] .login-form-panel {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

html[data-theme="dark"] .login-glass-card {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(51, 65, 85, 0.5);
}

html[data-theme="dark"] .login-field input[type="text"],
html[data-theme="dark"] .login-field input[type="email"],
html[data-theme="dark"] .login-field input[type="password"] {
    background: rgba(15, 23, 42, 0.5);
    border-color: #334155;
    color: #e2e8f0;
}

html[data-theme="dark"] .login-field input:focus {
    background: rgba(15, 23, 42, 0.8);
}

html[data-theme="dark"] .login-heading {
    color: #f1f5f9;
}

html[data-theme="dark"] .login-btn-google {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

    html[data-theme="dark"] .login-btn-google:hover {
        background: #334155;
    }

html[data-theme="dark"] .login-explore-chip {
    background: #1e293b;
    color: #94a3b8;
}

    html[data-theme="dark"] .login-explore-chip:hover {
        background: rgba(249, 115, 22, 0.1);
    }

html[data-theme="dark"] .login-divider::before,
html[data-theme="dark"] .login-divider::after {
    background: #334155;
}

/* ════════════════════════════════════════════════════════════
   GALAXY UPGRADE — full deep-space login
   Appended overrides: the form side joins the universe; the
   brand panel gains twinkling stars and falling meteors.
   ════════════════════════════════════════════════════════════ */

/* ── Brand panel: starfields over the existing grid ── */
.login-brand-panel::after {
    background-image:
        radial-gradient(1px 1px at 25px 35px, rgba(255,255,255,0.9) 50%, transparent 55%),
        radial-gradient(1px 1px at 110px 120px, rgba(255,255,255,0.65) 50%, transparent 55%),
        radial-gradient(1.5px 1.5px at 180px 60px, rgba(196,181,253,0.8) 50%, transparent 55%),
        radial-gradient(1px 1px at 60px 170px, rgba(255,255,255,0.55) 50%, transparent 55%),
        radial-gradient(1px 1px at 200px 200px, rgba(147,197,253,0.7) 50%, transparent 55%),
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px, 60px 60px, 60px 60px;
    animation: login-star-twinkle 5s ease-in-out infinite alternate;
}
@keyframes login-star-twinkle { 0% { opacity: 0.55; } 100% { opacity: 1; } }

/* Meteors */
.login-meteors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.login-meteors span {
    position: absolute; top: -12%; width: 2px; height: 90px; opacity: 0; border-radius: 999px;
    background: linear-gradient(180deg, #fff 0%, rgba(147,197,253,0.6) 40%, transparent 100%);
    filter: drop-shadow(0 0 6px rgba(147,197,253,0.9));
    transform: rotate(215deg);
    animation: login-meteor-fall 12s linear infinite;
}
.login-meteors span:nth-child(1) { left: 62%; animation-delay: 2s; }
.login-meteors span:nth-child(2) { left: 85%; animation-delay: 6.5s; height: 68px; }
.login-meteors span:nth-child(3) { left: 30%; animation-delay: 9.8s; height: 112px; }
@keyframes login-meteor-fall {
    0%   { opacity: 0; transform: rotate(215deg) translateY(0); }
    2%   { opacity: 1; }
    9%   { opacity: 0; transform: rotate(215deg) translateY(-75vh); }
    100% { opacity: 0; transform: rotate(215deg) translateY(-75vh); }
}

/* ── Form panel: deep space with its own faint stars ── */
.login-form-panel {
    background:
        radial-gradient(ellipse 60% 45% at 85% 8%, rgba(99,102,241,0.16) 0%, transparent 60%),
        radial-gradient(ellipse 45% 40% at 8% 92%, rgba(14,165,233,0.12) 0%, transparent 65%),
        linear-gradient(170deg, #0b1026 0%, #131238 55%, #0d1b3e 100%) !important;
}
.login-form-panel::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 40px 60px, rgba(255,255,255,0.6) 50%, transparent 55%),
        radial-gradient(1px 1px at 160px 180px, rgba(196,181,253,0.5) 50%, transparent 55%),
        radial-gradient(1.5px 1.5px at 230px 90px, rgba(255,255,255,0.45) 50%, transparent 55%);
    background-size: 280px 260px;
    animation: login-star-twinkle 6s ease-in-out infinite alternate;
}
.login-form-wrapper { position: relative; z-index: 1; }

.login-heading { color: #f8fafc; text-shadow: 0 2px 20px rgba(99,102,241,0.35); }
.login-subheading { color: #b7c3da; }

/* Glass card goes dark-cosmic with a glowing edge */
.login-glass-card {
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.55), 0 0 40px rgba(99, 102, 241, 0.14), inset 0 1px 0 rgba(255,255,255,0.06);
}
.login-glass-card:hover { box-shadow: 0 24px 70px rgba(2, 6, 23, 0.6), 0 0 52px rgba(99, 102, 241, 0.22), inset 0 1px 0 rgba(255,255,255,0.06); }

.login-field label { color: #cbd5e1; }
.login-form-panel .form-control {
    background: rgba(2, 6, 23, 0.55) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: #f1f5f9 !important;
}
.login-form-panel .form-control::placeholder { color: #64748b; }
.login-form-panel .form-control:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22) !important;
    background: rgba(2, 6, 23, 0.75) !important;
}
.login-input-icon { color: #64748b; }
.login-pw-toggle { color: #64748b; }
.login-pw-toggle:hover { color: #a5b4fc; }
.login-forgot-link { color: #a5b4fc; }
.login-forgot-link:hover { color: #c7d2fe; }
.login-form-panel .text-danger { color: #fca5a5 !important; }

/* Submit keeps its energy; give it a cosmic glow */
.login-btn-submit { box-shadow: 0 6px 26px rgba(249, 115, 22, 0.45); }
.login-btn-submit:hover { box-shadow: 0 10px 36px rgba(249, 115, 22, 0.6); }

.login-divider { color: #64748b; }
.login-divider::before, .login-divider::after { background: rgba(148, 163, 184, 0.25) !important; }

.login-btn-google {
    background: rgba(15, 23, 42, 0.55) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: #e2e8f0 !important;
}
.login-btn-google:hover {
    background: rgba(30, 41, 59, 0.75) !important;
    border-color: rgba(165, 180, 252, 0.55) !important;
}

.login-admin-link { color: #94a3b8; }
.login-admin-link a { color: #a5b4fc; }
.login-register-prompt { color: #b7c3da; }
.login-register-prompt a { color: #a5b4fc; font-weight: 700; }
.login-register-prompt a:hover { color: #c7d2fe; }

.login-explore-chip {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    color: #b7c3da !important;
}
.login-explore-chip:hover {
    border-color: rgba(165, 180, 252, 0.55) !important;
    color: #e0e7ff !important;
    background: rgba(30, 41, 59, 0.7) !important;
}

.login-path-badge {
    background: rgba(99, 102, 241, 0.16) !important;
    border: 1px solid rgba(147, 197, 253, 0.4) !important;
    color: #93c5fd !important;
}

@media (prefers-reduced-motion: reduce) {
    .login-brand-panel::after, .login-form-panel::before, .login-meteors span { animation: none !important; }
}

/* ── Orbs: bigger, brighter, glimmering like stars ── */
.login-orb-1 {
    width: 165px; height: 165px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.45) 0%, rgba(139, 92, 246, 0.12) 45%, transparent 70%);
    animation: loginOrbFloat1 8s ease-in-out infinite, login-orb-glimmer 3.6s ease-in-out infinite;
}
.login-orb-2 {
    width: 125px; height: 125px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, rgba(249, 115, 22, 0.1) 45%, transparent 70%);
    animation: loginOrbFloat2 10s ease-in-out infinite, login-orb-glimmer 4.4s ease-in-out 0.8s infinite;
}
.login-orb-3 {
    width: 98px; height: 98px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.42) 0%, rgba(59, 130, 246, 0.1) 45%, transparent 70%);
    animation: loginOrbFloat3 7s ease-in-out infinite, login-orb-glimmer 3s ease-in-out 1.4s infinite;
}
.login-orb-4 {
    width: 74px; height: 74px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.38) 0%, rgba(34, 197, 94, 0.1) 45%, transparent 70%);
    animation: loginOrbFloat1 9s ease-in-out infinite reverse, login-orb-glimmer 5s ease-in-out 2.1s infinite;
}
@keyframes login-orb-glimmer {
    0%, 100% { opacity: 0.6; filter: blur(1px) brightness(1); }
    50% { opacity: 1; filter: blur(1px) brightness(1.55); }
}

/* ── Star glints: 4-point sparkles that bloom and fade ── */
.login-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.login-sparkles span {
    position: absolute; width: 16px; height: 16px; opacity: 0;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, transparent 26%),
        linear-gradient(0deg, transparent 45%, rgba(255, 255, 255, 0.95) 50%, transparent 55%),
        linear-gradient(90deg, transparent 45%, rgba(255, 255, 255, 0.95) 50%, transparent 55%);
    filter: drop-shadow(0 0 6px rgba(196, 181, 253, 0.95));
    animation: login-sparkle 4.8s ease-in-out infinite;
}
.login-sparkles span:nth-child(1) { top: 14%; left: 16%; }
.login-sparkles span:nth-child(2) { top: 32%; right: 12%; width: 11px; height: 11px; animation-delay: 0.9s; }
.login-sparkles span:nth-child(3) { top: 58%; left: 9%; width: 13px; height: 13px; animation-delay: 1.8s; }
.login-sparkles span:nth-child(4) { bottom: 20%; right: 20%; animation-delay: 2.6s; }
.login-sparkles span:nth-child(5) { top: 8%; left: 55%; width: 10px; height: 10px; animation-delay: 3.4s; }
.login-sparkles span:nth-child(6) { bottom: 9%; left: 34%; width: 12px; height: 12px; animation-delay: 4.1s; }
@keyframes login-sparkle {
    0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
    .login-orb-1, .login-orb-2, .login-orb-3, .login-orb-4, .login-sparkles span { animation: none !important; opacity: 0.7; }
}