/* =============================
   Design Tokens (2025 palette)
   ============================= */
:root {
    --brand-1: #4f46e5; /* indigo 600 */
    --brand-2: #06b6d4; /* cyan 500  */
    --ink-1: #0b1020;
    --ink-2: #111827; /* main text on light */
    --ink-3: #e7e9ee; /* text on dark */
    --glass: 0.16;
    --rad: 1.1rem;
    --shadow: 0 12px 50px rgba(0,0,0,.18);
    --ease: .25s cubic-bezier(.4,0,.2,1);
    --ok: #10b981; /* green */
    --warn: #f59e0b; /* amber */
    --err: #ef4444; /* red */

    font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, "Helvetica Neue", Inter, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --glass: 0.28;
    }
}

/* =============================
   Page & Background
   ============================= */
.login-root {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    overflow: clip;
}

.bg-canvas, .bg-video, .bg-tint {
    position: fixed;
    inset: 0;
}

.bg-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    filter: brightness(1.0) saturate(1);
}

.bg-tint {
    background: linear-gradient( 120deg, color-mix(in srgb, var(--brand-1) 5%, transparent), color-mix(in srgb, var(--brand-2) 5%, transparent) );
}

@media (prefers-reduced-motion: reduce) {
    .bg-video {
        display: none;
    }
}

/* Accent blobs */
.accent {
    position: fixed;
    filter: blur(65px);
    opacity: .12;
    pointer-events: none;
}

.accent--tl {
    width: 50vmax;
    height: 50vmax;
    left: -10vmax;
    top: -10vmax;
    background: radial-gradient(40% 40% at 50% 50%, var(--brand-1), transparent 60%);
}

.accent--br {
    width: 45vmax;
    height: 45vmax;
    right: -12vmax;
    bottom: -12vmax;
    background: radial-gradient(40% 40% at 50% 50%, var(--brand-2), transparent 60%);
}

/* =============================
   App Shell & Stacked Cards
   ============================= */
/* The shell centers the card stack; the stack overlaps cards in the same grid cell */
.shell {
    inline-size: min(96vw, 880px);
    padding: clamp(12px, 3vw, 24px);
    display: grid;
    place-items: center; /* centers whatever card is active */
    box-sizing: border-box;
}

/* Stack all cards in one grid cell so swaps don’t shift layout */
.stack {
    display: grid;
}

    .stack > .card {
        grid-area: 1 / 1;
    }

/* The cards share a consistent, responsive width so their position doesn’t jump */
.card {
    width: clamp(320px, 92vw, 520px); /* responsive width (not fixed) */
    box-sizing: border-box;
    background: color-mix(in srgb, #fff 22%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, #ffffff88 60%, #0000 40%);
    border-radius: var(--rad);
    box-shadow: var(--shadow);
    padding: clamp(18px, 3.2vw, 28px);
    display: grid;
    gap: 14px;
    container-type: inline-size;
    opacity: 1;
    transform: scale(1);
    transition: opacity .35s var(--ease), transform .35s var(--ease), background .6s ease;
    animation: glassPulse 6s ease-in-out infinite;
}

@keyframes glassPulse {
    0%,100% {
        background: color-mix(in srgb, #fff 18%, transparent);
    }

    50% {
        background: color-mix(in srgb, #fff 28%, transparent);
    }
}

/* Cross-fade: while hiding, keep in flow visually with absolute positioning stacked */
.card.is-hiding {
    position: absolute;
    opacity: 0;
    transform: scale(.97);
    pointer-events: none;
}

/* Fully hidden after transition */
.card.is-hidden {
    display: none !important;
}

.card__hdr {
    text-align: center;
    margin-block-end: 6px;
}

.brand {
    font-size: clamp(1.6rem, 5cqi, 2.2rem);
    font-weight: 800;
    letter-spacing: .3px;
    background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 2px 2px rgba(255,255,255,.02);
    animation: brandGlow 4s ease-in-out infinite;
}

@keyframes brandGlow {
    0%,100% {
        filter: brightness(1);
        text-shadow: 0 2px 2px rgba(255,255,255,.02);
    }

    50% {
        filter: brightness(1.1);
        text-shadow: 0 2px 4px rgba(255,255,255,.04);
    }
}

.brand--sm {
    font-size: clamp(1.2rem, 4cqi, 1.5rem);
}

.sub {
    color: #111;
    font-size: .95rem;
}

/* =============================
   Fields (mobile text & autofill safe)
   ============================= */
.field {
    display: grid;
    gap: 6px;
    box-sizing: border-box;
}

    .field label {
        font-size: .9rem;
        font-weight: 600;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--ink-2);
    }

    .field input {
        width: 100%;
        box-sizing: border-box;
        padding: .75rem 1rem;
        border: 1px solid #00000022;
        border-radius: .8rem;
        font-size: 1rem;
        background: color-mix(in srgb, #ffffff 92%, transparent);
        color: #111;
        caret-color: #111;
        outline: none;
        transition: border-color var(--ease), box-shadow var(--ease), background-color var(--ease);
    }

        .field input::placeholder {
            color: rgba(16,18,21,.55);
        }

        /* iOS/Android autofill fix */
        .field input:-webkit-autofill,
        .field input:-webkit-autofill:hover,
        .field input:-webkit-autofill:focus {
            -webkit-text-fill-color: #111;
            transition: background-color 9999s ease-out 0s;
            box-shadow: 0 0 0px 1000px rgba(255,255,255,0.9) inset !important;
        }

        /* Focus ring */
        .field input:focus {
            border-color: var(--brand-1);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-1) 25%, transparent);
        }

        /* Blur-only invalid feedback (triggered via JS) */
        .field input.invalid {
            border-color: var(--err);
        }

        .field input.shake {
            animation: shake .33s both;
            border-color: var(--err);
        }

@keyframes shake {
    10%,90% {
        transform: translateX(-2px);
    }

    20%,80% {
        transform: translateX(3px);
    }

    30%,50%,70% {
        transform: translateX(-6px);
    }

    40%,60% {
        transform: translateX(6px);
    }
}

.hint {
    color: #0008;
    font-size: .85rem;
}

.cluster {
    display: grid;
    gap: 12px;
}

@container (min-width: 600px) {
    .cluster {
        grid-template-columns: 1fr 1fr;
    }
}

/* Buttons */
.btn {
    --bg: linear-gradient(120deg, var(--brand-1), var(--brand-2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1rem;
    border: none;
    border-radius: .85rem;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--ease), box-shadow var(--ease);
    background: var(--bg);
}

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0,0,0,.18);
    }

    .btn:active {
        transform: none;
    }

    .btn .icon {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: #fff;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.link {
    appearance: none;
    background: none;
    border: none;
    color: var(--brand-2);
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

.meta {
    text-align: center;
    margin-block-start: 2px;
}

/* Validation area */
.validate {
    min-height: 1.1rem;
    color: var(--err);
    text-align: center;
    font-size: .9rem;
}

/* Toast notification */
.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    translate: -50% 0;
    min-inline-size: min(92vw,520px);
    padding: .9rem 1.1rem;
    border-radius: .9rem;
    color: #fff;
    background: linear-gradient(120deg, var(--ok), color-mix(in srgb, var(--brand-2) 40%, var(--ok)));
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ease), transform var(--ease);
}

    .toast.show {
        opacity: 1;
        transform: translateY(-6px);
    }

    .toast.error {
        background: linear-gradient(120deg, var(--err), color-mix(in srgb, var(--brand-1) 35%, var(--err)));
    }

/* Fancy hover focus using :has() */
.card:has(input:focus) {
    outline: 2px solid color-mix(in srgb, var(--brand-2) 55%, transparent);
    outline-offset: 2px;
}