/* ═══════════════════════════════════════════════════════════════════════
   ZENTI AUTH — premium dark sign-in / password pages.
   Self-contained, scoped under .z-auth / .z-bg. Shared by Login,
   ForgotPassword and ResetPassword. Fonts (Inter + Space Grotesk) load
   globally from App.razor.
   ═══════════════════════════════════════════════════════════════════════ */

    .z-auth {
        --graphite: #1A1A1B;
        --zenti-blue: #2D5BFF;
        --blue-bright: #5B82FF;
        --velocity: #00E676;
        --cloud: #F4F7FA;
        --muted: rgba(244, 247, 250, .56);
        --faint: rgba(244, 247, 250, .38);
        --hairline: rgba(244, 247, 250, .10);

        position: relative;
        z-index: 1;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1.25rem;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    .z-bg {
        position: fixed;
        inset: 0;
        z-index: 0;
        background: #1A1A1B;
        overflow: hidden;
    }
    .z-bg::before,
    .z-bg::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(20px);
        will-change: transform;
    }
    .z-bg::before {
        width: 70vmax; height: 70vmax;
        top: -32vmax; left: 50%;
        transform: translateX(-50%);
        background: radial-gradient(closest-side, rgba(45, 91, 255, .22), rgba(45, 91, 255, 0) 70%);
        animation: z-drift-a 24s ease-in-out infinite;
    }
    .z-bg::after {
        width: 52vmax; height: 52vmax;
        bottom: -26vmax; right: -10vmax;
        background: radial-gradient(closest-side, rgba(0, 230, 118, .10), rgba(0, 230, 118, 0) 70%);
        animation: z-drift-b 30s ease-in-out infinite;
    }

    .z-card {
        position: relative;
        width: 100%;
        max-width: 408px;
        padding: 2.75rem 2.5rem 2.25rem;
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(36, 36, 39, .92), rgba(24, 24, 26, .94));
        border: 1px solid var(--hairline);
        box-shadow:
            0 1px 0 rgba(244, 247, 250, .05) inset,
            0 30px 80px -24px rgba(0, 0, 0, .75),
            0 0 60px -28px rgba(45, 91, 255, .45);
        backdrop-filter: blur(14px);
        overflow: hidden;
    }
    /* signature: a thin "flow" current across the top edge, blue into velocity green */
    .z-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(45, 91, 255, 0) 12%,
            var(--zenti-blue) 42%,
            var(--velocity) 64%,
            rgba(0, 230, 118, 0) 88%,
            transparent 100%);
        background-size: 220% 100%;
        animation: z-flow 7s linear infinite;
        opacity: .9;
    }

    .z-brand {
        text-align: center;
        margin-bottom: 2rem;
    }
    .z-mark {
        height: 72px;
        width: auto;
        display: inline-block;
        filter: drop-shadow(0 6px 22px rgba(45, 91, 255, .45));
    }
    .z-wordmark {
        margin-top: 1.1rem;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 500;
        font-size: 1.18rem;
        letter-spacing: .46em;
        text-indent: .46em;
        color: var(--cloud);
    }
    .z-eyebrow {
        margin-top: .55rem;
        font-size: .68rem;
        font-weight: 500;
        letter-spacing: .34em;
        text-indent: .34em;
        text-transform: uppercase;
        color: var(--faint);
    }

    .z-form { margin-top: .25rem; }

    .z-field { margin-bottom: 1.15rem; }
    .z-label {
        display: block;
        margin-bottom: .5rem;
        font-size: .76rem;
        font-weight: 500;
        letter-spacing: .02em;
        color: var(--muted);
    }
    .z-input {
        width: 100%;
        box-sizing: border-box;
        padding: .9rem 1rem;
        font-family: inherit;
        font-size: .95rem;
        color: var(--cloud);
        background: rgba(244, 247, 250, .04);
        border: 1px solid var(--hairline);
        border-radius: 12px;
        caret-color: var(--velocity);
        transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .z-input::placeholder { color: var(--faint); }
    .z-input:hover { border-color: rgba(244, 247, 250, .2); }
    .z-input:focus {
        outline: none;
        border-color: var(--zenti-blue);
        background: rgba(45, 91, 255, .07);
        box-shadow: 0 0 0 3px rgba(45, 91, 255, .18);
    }

    .z-btn {
        position: relative;
        width: 100%;
        margin-top: .65rem;
        padding: .95rem 1rem;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 600;
        font-size: .98rem;
        letter-spacing: .02em;
        color: #fff;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        overflow: hidden;
        background: linear-gradient(135deg, var(--zenti-blue), var(--blue-bright));
        box-shadow:
            0 1px 0 rgba(255, 255, 255, .28) inset,
            0 10px 26px -8px rgba(45, 91, 255, .6);
        transition: transform .16s ease, box-shadow .16s ease;
    }
    .z-btn > span { position: relative; z-index: 1; }
    /* sheen sweep on hover */
    .z-btn::after {
        content: "";
        position: absolute;
        top: 0; bottom: 0;
        left: -60%;
        width: 45%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
        transform: skewX(-18deg);
        transition: left .55s ease;
    }
    .z-btn:hover {
        transform: translateY(-1px);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, .3) inset,
            0 16px 34px -10px rgba(45, 91, 255, .72);
    }
    .z-btn:hover::after { left: 120%; }
    .z-btn:active { transform: translateY(0) scale(.992); }
    .z-btn:focus-visible {
        outline: none;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, .28) inset,
            0 0 0 3px rgba(0, 230, 118, .55);
    }
    /* anchor styled as the primary button (e.g. "Back to sign in") */
    .z-btn--link {
        display: block;
        text-align: center;
        text-decoration: none;
        margin-top: 1.1rem;
    }

    /* intro/help paragraph above a form */
    .z-help {
        margin-bottom: 1.35rem;
        font-size: .88rem;
        line-height: 1.55;
        color: var(--muted);
    }

    .z-forgot {
        display: block;
        margin-top: 1.25rem;
        text-align: center;
        font-size: .85rem;
        color: var(--muted);
        text-decoration: none;
        transition: color .16s ease;
    }
    .z-forgot:hover { color: var(--blue-bright); }

    .z-alert {
        margin-bottom: 1.25rem;
        padding: .8rem 1rem;
        border-radius: 12px;
        font-size: .85rem;
        line-height: 1.45;
    }
    .z-alert--error {
        color: #ffb1ad;
        background: rgba(226, 75, 74, .12);
        border: 1px solid rgba(226, 75, 74, .32);
    }
    .z-alert--success {
        color: #7af0b3;
        background: rgba(0, 230, 118, .11);
        border: 1px solid rgba(0, 230, 118, .34);
    }

    .z-legal {
        margin-top: 1.75rem;
        padding-top: 1.35rem;
        border-top: 1px solid var(--hairline);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .55rem;
        text-align: center;
        font-size: .76rem;
        color: var(--faint);
        line-height: 1.5;
    }
    .z-status { display: inline-flex; align-items: center; gap: .45rem; }
    .z-dot {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--velocity);
        box-shadow: 0 0 0 0 rgba(0, 230, 118, .55);
        animation: z-pulse 2.6s ease-out infinite;
    }
    .z-links a {
        color: var(--muted);
        text-decoration: none;
        transition: color .16s ease;
    }
    .z-links a:hover { color: var(--blue-bright); }
    .z-sep { margin: 0 .4rem; color: var(--hairline); }

    @keyframes z-flow {
        0%   { background-position: 120% 0; }
        100% { background-position: -120% 0; }
    }
    @keyframes z-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(0, 230, 118, .5); }
        70%  { box-shadow: 0 0 0 7px rgba(0, 230, 118, 0); }
        100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
    }
    @keyframes z-drift-a {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50%      { transform: translateX(-46%) translateY(4vmax); }
    }
    @keyframes z-drift-b {
        0%, 100% { transform: translate(0, 0); }
        50%      { transform: translate(-4vmax, -3vmax); }
    }

    @media (max-width: 480px) {
        .z-card { padding: 2.25rem 1.5rem 1.85rem; border-radius: 20px; }
        .z-mark { height: 64px; }
        .z-wordmark { font-size: 1.05rem; letter-spacing: .4em; text-indent: .4em; }
    }

    @media (prefers-reduced-motion: reduce) {
        .z-card::before,
        .z-dot,
        .z-bg::before,
        .z-bg::after { animation: none; }
        .z-btn::after { transition: none; }
    }