/* =====================================================================
   ABS VENDOR — Auth pages (login / register / forgot / reset)
   Matches the homepage design system: Sora + Plus Jakarta Sans,
   royal blue #1D4ED8, warm cream paper, gold + violet accents.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300..800&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..700&display=swap');

:root {
    /* Brand */
    --auth-brand:    #1D4ED8;
    --auth-brand-2:  #1E40AF;
    --auth-brand-3:  #1E3A8A;
    --auth-brand-50: #EEF4FF;
    --auth-brand-100:#DBE8FF;
    --auth-brand-900:#0A1A5E;

    /* Accents */
    --auth-gold:     #F59E0B;
    --auth-violet:   #7C3AED;
    --auth-emerald:  #10B981;

    /* Surface */
    --auth-paper:    #FFFBF5;
    --auth-paper-2:  #FAF3E7;
    --auth-surface:  #FFFFFF;
    --auth-ink:      #0A1124;
    --auth-ink-2:    #1B2437;
    --auth-muted:    #6B7388;
    --auth-muted-2:  #94A0B4;
    --auth-line:     #ECE6DB;
    --auth-line-2:   #E0D9C8;

    /* States */
    --auth-danger:    #DC2626;
    --auth-danger-bg: #FEE2E2;
    --auth-success:   #10B981;
    --auth-success-bg:#D1FAE5;

    /* Hero gradient — deep navy with gold + violet glow,
       matches the app-download card on the landing page. */
    --auth-hero-grad:
      radial-gradient(120% 80% at 0% 0%, rgba(245,158,11,.18), transparent 55%),
      radial-gradient(100% 80% at 100% 100%, rgba(124,58,237,.35), transparent 55%),
      linear-gradient(135deg, #0A1A5E 0%, #0B2260 55%, #1E3A8A 100%);

    /* Effects */
    --auth-sh-sm: 0 1px 2px rgba(10,17,36,.04);
    --auth-sh-md: 0 2px 8px rgba(10,17,36,.05), 0 12px 32px rgba(10,17,36,.07);
    --auth-sh-lg: 0 8px 22px rgba(10,17,36,.08), 0 24px 60px rgba(10,17,36,.10);
    --auth-sh-brand: 0 10px 30px rgba(29,78,216,.28), 0 2px 6px rgba(29,78,216,.16);

    --auth-r-sm: 10px;
    --auth-r-md: 14px;
    --auth-r-lg: 20px;
    --auth-r-xl: 28px;

    --auth-ease: cubic-bezier(.2,.7,.2,1);
    --auth-transition: 250ms var(--auth-ease);

    --auth-font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --auth-font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset ---------------------------------------------------- */
* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--auth-paper);
    color: var(--auth-ink);
    font-family: var(--auth-font-body);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
[v-cloak] { display: none !important; }

/* ---------- Shell ---------------------------------------------------- */
.auth-shell {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    overflow: hidden;
    background: var(--auth-paper);
}

/* ---------- LEFT: brand hero ---------------------------------------- */
.auth-hero {
    position: relative;
    background: var(--auth-hero-grad);
    color: #fff;
    padding: clamp(36px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}
.auth-hero::before,
.auth-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
.auth-hero::before {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(245,158,11,.4), transparent 70%);
    top: -8%; right: -10%;
    opacity: .7;
}
.auth-hero::after {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(124,58,237,.4), transparent 70%);
    bottom: -15%; left: -10%;
    opacity: .6;
}

.auth-hero-grid-overlay {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}

.auth-hero > * { position: relative; z-index: 1; }

/* Brand */
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    margin-bottom: auto;
}
.auth-brand-logo {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    flex-shrink: 0;
    object-fit: cover;
}
.auth-brand-name {
    font-family: var(--auth-font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: #fff;
}

/* Hero body */
.auth-hero-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: clamp(32px, 6vw, 56px) 0;
    max-width: 520px;
}
.auth-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: rgba(255,255,255,.88);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    width: fit-content;
}
.auth-hero-eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--auth-gold);
    box-shadow: 0 0 0 3px rgba(245,158,11,.3);
}

.auth-hero-title {
    font-family: var(--auth-font-display);
    font-weight: 600;
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #fff;
    margin: 0;
}
.auth-hero-title em {
    font-style: normal;
    font-weight: 700;
    background: linear-gradient(105deg, #FDE68A 0%, #FBBF24 60%, #FDBA74 120%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-hero-sub {
    color: rgba(255,255,255,.72);
    font-size: clamp(14.5px, 1.3vw, 16px);
    line-height: 1.6;
    margin: 0;
    max-width: 48ch;
}

/* Stats */
.auth-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 14px;
    padding-top: 22px;
    border-top: 1px dashed rgba(255,255,255,.18);
}
.auth-stat-value {
    font-family: var(--auth-font-display);
    font-weight: 600;
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.auth-stat-label {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    font-weight: 600;
}

/* Trust list */
.auth-trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.auth-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: rgba(255,255,255,.82);
    font-weight: 500;
}
.auth-trust-icon {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: var(--auth-gold);
    flex-shrink: 0;
}

/* Hero footer */
.auth-hero-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255,255,255,.55);
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.auth-hero-footer a {
    color: rgba(255,255,255,.75);
    transition: color var(--auth-transition);
}
.auth-hero-footer a:hover { color: var(--auth-gold); }

/* ---------- RIGHT: form wrap ---------------------------------------- */
.auth-form-wrap {
    position: relative;
    padding: clamp(28px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    min-height: 100vh;
    background: var(--auth-paper);
}

/* Mobile brand strip (hidden on desktop where .auth-hero has brand) */
.auth-mobile-brand {
    display: none;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.auth-mobile-brand .auth-brand { margin-bottom: 0; }
.auth-mobile-brand .auth-brand-logo {
    background: var(--auth-brand-50);
    border: 1px solid var(--auth-brand-100);
    width: 40px; height: 40px;
    border-radius: 10px;
}
.auth-mobile-brand .auth-brand-name {
    color: var(--auth-ink);
    font-size: 16px;
}
.auth-mobile-help {
    font-size: 13px;
    color: var(--auth-muted);
    font-weight: 500;
}
.auth-mobile-help a {
    color: var(--auth-brand);
    font-weight: 700;
}

/* Mobile feature chip strip */
.auth-chip-strip {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}
.auth-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--auth-surface);
    border: 1px solid var(--auth-line);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--auth-ink-2);
    letter-spacing: -0.005em;
}
.auth-chip svg { color: var(--auth-brand); }

/* ---------- Form card ----------------------------------------------- */
.auth-card {
    background: var(--auth-surface);
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-r-xl);
    padding: clamp(28px, 4vw, 44px);
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    box-shadow: var(--auth-sh-md);
}
.auth-card--wide { max-width: 560px; }

.auth-card-head { margin-bottom: 24px; }
.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 11px 4px 9px;
    background: var(--auth-brand-50);
    border: 1px solid var(--auth-brand-100);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--auth-brand);
    margin-bottom: 14px;
}
.auth-kicker::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--auth-brand);
    box-shadow: 0 0 0 3px rgba(29,78,216,.15);
}
.auth-title {
    font-family: var(--auth-font-display);
    font-weight: 600;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--auth-ink);
    margin: 0 0 8px;
}
.auth-sub {
    color: var(--auth-muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

/* Progress steps (multi-step register) */
.auth-steps {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}
.auth-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.auth-step-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--auth-paper-2);
    border: 2px solid var(--auth-line-2);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--auth-muted);
    transition: all var(--auth-transition);
    font-family: var(--auth-font-display);
}
.auth-step-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--auth-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color var(--auth-transition);
}
.auth-step-line {
    flex: 1;
    height: 2px;
    background: var(--auth-line-2);
    border-radius: 2px;
    margin: 0 8px 24px;
    transition: background var(--auth-transition);
}
.auth-step.is-active .auth-step-dot {
    background: var(--auth-brand);
    border-color: var(--auth-brand);
    color: #fff;
    box-shadow: 0 0 0 5px var(--auth-brand-50);
}
.auth-step.is-active .auth-step-label { color: var(--auth-ink); }
.auth-step.is-done .auth-step-dot {
    background: var(--auth-brand-50);
    border-color: var(--auth-brand);
    color: var(--auth-brand);
}
.auth-step.is-done + .auth-step-line { background: var(--auth-brand); }

/* ---------- Form ---------------------------------------------------- */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .auth-row { grid-template-columns: 1fr; } }

.auth-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--auth-muted);
}
.auth-label-aux {
    font-size: 11px;
    color: var(--auth-muted-2);
    font-weight: 500;
}
.auth-link {
    color: var(--auth-brand);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: color var(--auth-transition);
}
.auth-link:hover { color: var(--auth-brand-2); text-decoration: underline; }

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--auth-paper);
    border: 1px solid var(--auth-line-2);
    border-radius: 12px;
    transition: border-color var(--auth-transition),
                box-shadow var(--auth-transition),
                background-color var(--auth-transition);
}
.auth-input-wrap:hover { border-color: var(--auth-brand-100); }
.auth-input-wrap:focus-within {
    border-color: var(--auth-brand);
    background: var(--auth-surface);
    box-shadow: 0 0 0 4px var(--auth-brand-50);
}

.auth-input-icon {
    display: grid;
    place-items: center;
    width: 44px;
    color: var(--auth-muted);
    flex-shrink: 0;
    transition: color var(--auth-transition);
}
.auth-input-wrap:focus-within .auth-input-icon { color: var(--auth-brand); }

.auth-input {
    flex: 1;
    padding: 13px 16px 13px 4px;
    border: 0;
    background: transparent;
    font-family: var(--auth-font-body);
    font-size: 14.5px;
    color: var(--auth-ink);
    outline: none;
    min-width: 0;
}
.auth-input--trailing { padding-right: 48px; }
.auth-input::placeholder { color: var(--auth-muted-2); font-weight: 400; }
.auth-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px var(--auth-paper) inset;
    -webkit-text-fill-color: var(--auth-ink);
    caret-color: var(--auth-ink);
}

.auth-input-suffix {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    color: var(--auth-muted);
    transition: color var(--auth-transition),
                background-color var(--auth-transition);
}
.auth-input-suffix:hover {
    color: var(--auth-brand);
    background: var(--auth-brand-50);
}

/* Select (native) */
.auth-select {
    width: 100%;
    padding: 13px 40px 13px 16px;
    border: 1px solid var(--auth-line-2);
    border-radius: 12px;
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7388' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 16px center var(--auth-paper);
    color: var(--auth-ink);
    font-size: 14.5px;
    appearance: none;
    cursor: pointer;
    transition: border-color var(--auth-transition),
                box-shadow var(--auth-transition),
                background-color var(--auth-transition);
}
.auth-select:focus {
    border-color: var(--auth-brand);
    box-shadow: 0 0 0 4px var(--auth-brand-50);
    background-color: var(--auth-surface);
    outline: none;
}

/* Checkbox */
.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--auth-ink-2);
    cursor: pointer;
    user-select: none;
}
.auth-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1.5px solid var(--auth-line-2);
    border-radius: 5px;
    flex-shrink: 0;
    margin-top: 2px;
    background: var(--auth-paper);
    display: grid;
    place-items: center;
    transition: background-color var(--auth-transition),
                border-color var(--auth-transition);
    cursor: pointer;
}
.auth-check input:checked {
    background: var(--auth-brand);
    border-color: var(--auth-brand);
}
.auth-check input:checked::before {
    content: "";
    width: 10px; height: 10px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}
.auth-check a { color: var(--auth-brand); font-weight: 600; }

/* Error / success alerts */
.auth-error {
    display: none;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--auth-danger-bg);
    color: var(--auth-danger);
    border: 1px solid rgba(220,38,38,.2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}
.auth-error:not(:empty) { display: block; }
.auth-success {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--auth-success-bg);
    color: #065F46;
    border: 1px solid rgba(16,185,129,.2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* Submit button */
.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--auth-brand);
    color: #fff;
    border-radius: 999px;
    font-family: var(--auth-font-body);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: 0 1px 0 rgba(255,255,255,.14) inset,
                0 10px 26px rgba(29,78,216,.28);
    transition: transform var(--auth-transition),
                background-color var(--auth-transition),
                box-shadow var(--auth-transition);
    margin-top: 6px;
}
.auth-submit:hover:not(:disabled) {
    background: var(--auth-brand-3);
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(29,78,216,.38);
}
.auth-submit:disabled { opacity: .75; cursor: not-allowed; }
.auth-submit svg { transition: transform var(--auth-transition); }
.auth-submit:hover:not(:disabled) svg { transform: translateX(3px); }

/* Spinner (inside button) */
.auth-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin .7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Secure note */
.auth-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--auth-muted);
    font-size: 12px;
    margin-top: 10px;
    justify-content: center;
}
.auth-secure svg { color: var(--auth-emerald); }

/* Divider */
.auth-divider {
    position: relative;
    margin: 18px 0 14px;
    text-align: center;
}
.auth-divider::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--auth-line);
}
.auth-divider span {
    position: relative;
    background: var(--auth-surface);
    padding: 0 14px;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--auth-muted);
    font-weight: 600;
}

/* OAuth buttons */
.auth-oauth {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.auth-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--auth-surface);
    border: 1px solid var(--auth-line-2);
    border-radius: 999px;
    color: var(--auth-ink);
    font-family: var(--auth-font-body);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: background-color var(--auth-transition),
                border-color var(--auth-transition),
                transform var(--auth-transition);
}
.auth-btn-ghost:hover:not(:disabled) {
    background: var(--auth-paper);
    border-color: var(--auth-brand-100);
    transform: translateY(-1px);
}
.auth-btn-ghost:disabled { opacity: .6; cursor: not-allowed; }

/* Alt link ("Don't have an account?") */
.auth-alt {
    font-size: 13.5px;
    color: var(--auth-muted);
    text-align: center;
    margin: 18px 0 0;
}
.auth-alt a {
    color: var(--auth-brand);
    font-weight: 700;
    letter-spacing: -0.005em;
}
.auth-alt a:hover { text-decoration: underline; }

.auth-card-foot {
    text-align: center;
    margin-top: 20px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--auth-muted-2);
    font-weight: 600;
}

/* Terms block */
.auth-terms {
    font-size: 12px;
    line-height: 1.6;
    color: var(--auth-muted);
    text-align: center;
    margin-top: 4px;
}
.auth-terms a {
    color: var(--auth-ink-2);
    font-weight: 600;
}
.auth-terms a:hover { color: var(--auth-brand); }

/* ---------- Supplementary components -------------------------------- */
/* Inline meta row (e.g. the "Resend OTP" line on reset.html) */
.auth-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

/* Spinner variant for use on the card surface (not inside the blue
   submit button). Adapts to the theme via tokens. */
.auth-spinner--ink {
    border-color: var(--auth-line-2);
    border-top-color: var(--auth-brand);
}

/* Regulatory trust cue (NCC licence) — register page. Uses brand
   tokens so dark mode is handled by the token redefinitions below. */
.auth-license {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--auth-brand-50);
    border: 1px solid var(--auth-brand-100);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color var(--auth-transition),
                background-color var(--auth-transition);
}
.auth-license:hover { border-color: var(--auth-brand); }
.auth-license__icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--auth-brand);
}
.auth-license__title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--auth-ink);
    line-height: 1.3;
}
.auth-license__sub {
    font-size: 11px;
    color: var(--auth-muted);
    margin-top: 1px;
}

/* ---------- Responsive ---------------------------------------------- */
@media (max-width: 1023px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-hero { display: none; }
    .auth-mobile-brand { display: flex; }
    .auth-chip-strip { display: flex; }
}

@media (max-width: 520px) {
    .auth-form-wrap { padding: 24px 18px; }
    .auth-card { padding: 24px 20px; border-radius: var(--auth-r-lg); }
    .auth-chip-strip { gap: 5px; margin-bottom: 20px; }
    .auth-chip { font-size: 11px; padding: 5px 10px; }
}

@media (max-width: 380px) {
    .auth-title { font-size: 22px; }
    .auth-card { padding: 20px 16px; }
    .auth-input-icon { width: 40px; }
    .auth-input { padding: 12px 14px 12px 2px; font-size: 14px; }
    .auth-submit { padding: 13px 16px; font-size: 14px; }
}

/* ---------- Dark mode (driven by html[data-abs-theme="dark"]) --------
   Token-first approach: redefine the design tokens and let the components
   below pick them up automatically via the cascade. We only patch the
   handful of places where a token alone can't fix the problem (autofill,
   the inline <select> arrow SVG, the focus glow). */
[data-abs-theme="dark"] {
    /* Surface */
    --auth-paper:    #0b1220;
    --auth-paper-2:  #0f172a;
    --auth-surface:  #131c2e;
    --auth-ink:      #e2e8f0;
    --auth-ink-2:    #cbd5e1;
    --auth-muted:    #94a3b8;
    --auth-muted-2:  #64748b;
    --auth-line:     #1e293b;
    --auth-line-2:   #2a3348;

    /* Brand tints — re-tune for dark contrast (the originals are
       cream-white and would create a glaring focus glow on dark cards). */
    --auth-brand-50:  rgba(96, 165, 250, 0.16);
    --auth-brand-100: rgba(96, 165, 250, 0.32);

    /* States — danger text needs to lift off the dark surface */
    --auth-danger:     #fca5a5;
    --auth-danger-bg:  rgba(220, 38, 38, 0.16);
    --auth-success-bg: rgba(16, 185, 129, 0.18);

    /* Shadows: drop the tinted shadows — meaningless on a dark page. */
    --auth-sh-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --auth-sh-md: 0 2px 8px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .45);
    --auth-sh-lg: 0 8px 22px rgba(0, 0, 0, .4),  0 24px 60px rgba(0, 0, 0, .5);

    color-scheme: dark;
}

/* The hero pane already uses a dark navy gradient — leave its painted
   colors alone. Only adjust the form pane + card so the seam between
   hero and form looks intentional. */

/* Native <select> arrow needs an explicit lighter colour in dark mode
   because the SVG is inlined as a data URI with a hard-coded stroke. */
[data-abs-theme="dark"] .auth-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* Browser autofill: Chrome forces yellow background unless we re-paint
   the inset shadow in dark colours and force the text fill colour. */
[data-abs-theme="dark"] .auth-input:-webkit-autofill,
[data-abs-theme="dark"] .auth-input:-webkit-autofill:hover,
[data-abs-theme="dark"] .auth-input:-webkit-autofill:focus,
[data-abs-theme="dark"] .auth-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 40px var(--auth-paper) inset !important;
    -webkit-text-fill-color: var(--auth-ink) !important;
    caret-color: var(--auth-ink);
    transition: background-color 5000s ease-in-out 0s;
}

/* Soften the OAuth ghost button hover — the light-mode hover swap to
   --auth-paper produces a visible flash because paper is now darker
   than surface in dark mode. */
[data-abs-theme="dark"] .auth-btn-ghost:hover:not(:disabled) {
    background: var(--auth-paper-2);
    border-color: var(--auth-brand-100);
}

/* Submit button shadow uses brand blue — keep but lower opacity for
   dark backgrounds so it doesn't bloom too brightly. */
[data-abs-theme="dark"] .auth-submit {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset,
                0 10px 26px rgba(29, 78, 216, .45);
}
[data-abs-theme="dark"] .auth-submit:hover:not(:disabled) {
    box-shadow: 0 14px 34px rgba(29, 78, 216, .55);
}

/* Hero stays white-on-navy in both themes; explicitly opt the hero out
   of any inherited dark text colour. */
[data-abs-theme="dark"] .auth-hero,
[data-abs-theme="dark"] .auth-hero * {
    color-scheme: dark;
}
[data-abs-theme="dark"] .auth-hero-title,
[data-abs-theme="dark"] .auth-brand-name {
    color: #fff;
}

/* Subtle border for the <input>-wrap in dark — the existing line-2
   token gives enough contrast, but the focus ring needs a tinted glow
   instead of the bright cream. The brand-50 token redefinition above
   already takes care of this — no rule needed here. */

/* --------------------------------------------------------------------
   Dark-mode foreground fix: --auth-brand (#1D4ED8) is dark enough to
   work as a *button fill* on dark surfaces, but as text / icon / border
   foreground it fails contrast. Re-point those foreground uses to a
   lighter blue (matches --abs-link in dark-theme.css). Solid fills
   (.auth-submit, active step dot, checked checkbox) are left untouched.
   -------------------------------------------------------------------- */
[data-abs-theme="dark"] .auth-link,
[data-abs-theme="dark"] .auth-alt a,
[data-abs-theme="dark"] .auth-mobile-help a,
[data-abs-theme="dark"] .auth-check a,
[data-abs-theme="dark"] .auth-kicker,
[data-abs-theme="dark"] .auth-chip svg,
[data-abs-theme="dark"] .auth-license__icon,
[data-abs-theme="dark"] .auth-terms a:hover {
    color: #60a5fa;
}
[data-abs-theme="dark"] .auth-link:hover,
[data-abs-theme="dark"] .auth-alt a:hover {
    color: #93c5fd;
}
[data-abs-theme="dark"] .auth-input-wrap:focus-within .auth-input-icon,
[data-abs-theme="dark"] .auth-input-suffix:hover {
    color: #60a5fa;
}
[data-abs-theme="dark"] .auth-input-wrap:focus-within,
[data-abs-theme="dark"] .auth-select:focus {
    border-color: #60a5fa;
}
[data-abs-theme="dark"] .auth-kicker::before {
    background: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}
[data-abs-theme="dark"] .auth-step.is-done .auth-step-dot {
    color: #60a5fa;
    border-color: #60a5fa;
}
[data-abs-theme="dark"] .auth-step.is-done + .auth-step-line {
    background: #60a5fa;
}
[data-abs-theme="dark"] .auth-spinner--ink {
    border-color: var(--auth-line-2);
    border-top-color: #60a5fa;
}

/* Hard-coded success text colour (#065F46) vanishes on a dark surface. */
[data-abs-theme="dark"] .auth-success {
    color: #6ee7b7;
}

/* Floating toggle for auth pages (no nav bar to host it) */
.abs-auth-theme-fab {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}