/* ============================================================
   Asetrix · Auth pages (login, signup, password reset, confirm)
   Global stylesheet — page bodies under AuthLayout share these
   classes for inputs, buttons, cards, helpers. The layout shell
   itself ships scoped styles next to its component.
   ============================================================ */

/* ─── Shell ──────────────────────────────────────────────── */

.auth-shell {
    /* ─── Asetrix Forest palette ──────────────────────────────
       Colours chosen for eye comfort during long sessions:
         · NO pure black or pure white anywhere — they cause vibration
           and OLED smearing.
         · Warm cream surface (#FAFAF7) for light; deep forest near-
           black (#0D130F) for dark.
         · Brand emerald (#14532D) is the trust colour; bright
           emerald (#16A34A) is the action colour.
         · Gold (#D4A647) is the prestige accent — used sparingly. */

    --asetrix-brand:        #14532D;
    --asetrix-brand-bright: #16A34A;
    --asetrix-brand-glow:   #BBF7D0;
    --asetrix-brand-dark:   #0F3D22;
    --asetrix-brand-on-dark:#4ADE80;
    --asetrix-gold:         #D4A647;
    --asetrix-gold-bright:  #F0C75F;

    --auth-hero-bg-start: #0D130F;
    --auth-hero-bg-mid:   #14201B;
    --auth-hero-bg-end:   #08110C;
    --auth-hero-accent:   var(--asetrix-brand-bright);
    --auth-hero-accent-2: var(--asetrix-brand-on-dark);
    --auth-hero-accent-3: var(--asetrix-gold);
    --auth-hero-fg:       #F0F4F1;
    --auth-hero-fg-muted: rgba(240, 244, 241, 0.72);

    /* Card on cream — warm white that's easy on the eye */
    --auth-card-bg:       #FFFFFF;
    --auth-card-fg:       #14191A;
    --auth-card-fg-muted: #4A554E;
    --auth-card-fg-soft:  #8B968E;
    --auth-card-border:   rgba(20, 83, 45, 0.10);
    --auth-card-shadow:   0 1px 2px rgba(20, 50, 30, 0.06),
                          0 14px 40px -14px rgba(20, 50, 30, 0.22);

    --auth-input-border:        #D6DDD8;
    --auth-input-border-strong: #9CA9A0;
    --auth-input-focus:         var(--asetrix-brand);

    --auth-danger:  #DC2626;
    --auth-success: var(--asetrix-brand-bright);
    --auth-radius:  0.85rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    background: #FAFAF7;
    color: var(--auth-card-fg);
    font-family: var(--font-sans, "Inter", "Helvetica Neue", system-ui, sans-serif);
}

@media (max-width: 960px) {
    .auth-shell {
        grid-template-columns: 1fr;
        grid-template-rows: 220px auto;
    }
}

[data-theme="dark"] .auth-shell {
    /* Dark mode tuned for hours of reading:
         · Background is deep forest near-black, not pure black —
           reduces OLED ghosting + eye strain.
         · Text is cream (#F0F4F1), not pure white — softens contrast. */
    background: var(--auth-hero-bg-end);

    --auth-card-bg:       #131A14;
    --auth-card-fg:       #F0F4F1;
    --auth-card-fg-muted: #BBD9C9;
    --auth-card-fg-soft:  #6B8B7F;
    --auth-card-border:   rgba(74, 222, 128, 0.10);
    --auth-card-shadow:   0 1px 2px rgba(0, 0, 0, 0.4),
                          0 14px 40px -12px rgba(0, 0, 0, 0.6);

    --auth-input-border:        #1F2A22;
    --auth-input-border-strong: #2F4035;
    --auth-input-focus:         var(--asetrix-brand-on-dark);
}

/* ─── Card body inside the form pane ─────────────────────── */

.auth-card {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    background: var(--auth-card-bg);
    border: 1px solid var(--auth-card-border);
    border-radius: var(--auth-radius);
    padding: 2.5rem 2.5rem 2.25rem;
    box-shadow: var(--auth-card-shadow);
    position: relative;
    overflow: hidden;
}

.auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--auth-hero-accent), var(--auth-hero-accent-2), var(--auth-hero-accent));
    background-size: 200% 100%;
    animation: auth-bar-shimmer 6s ease-in-out infinite;
}

/* Glass variant — sits above the form-pane backdrop glow with a
   subtle frosted look. The card text stays solid for legibility;
   only the background + border are translucent. */
.auth-card-glass {
    background: linear-gradient(180deg,
                  rgba(255, 255, 255, 0.96) 0%,
                  rgba(255, 255, 252, 0.84) 100%);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-color: rgba(20, 83, 45, 0.12);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 14px 40px -18px rgba(20, 50, 30, 0.18),
        0 36px 90px -38px rgba(20, 83, 45, 0.25);
}

[data-theme="dark"] .auth-card-glass {
    background: linear-gradient(180deg,
                  rgba(20, 30, 24, 0.78) 0%,
                  rgba(13, 19, 15, 0.92) 100%);
    border-color: rgba(74, 222, 128, 0.10);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 14px 40px -12px rgba(0, 0, 0, 0.6),
        0 36px 90px -38px rgba(20, 83, 45, 0.55);
}

@media (max-width: 540px) {
    .auth-card {
        padding: 1.75rem 1.5rem 1.5rem;
        max-width: none;
        border-radius: 1rem;
    }
    /* On mobile the glass effect competes with the dynamic viewport,
       so we drop the blur and lean on a solid surface for clarity. */
    .auth-card-glass {
        background: var(--auth-card-bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Wide variant for multi-step wizards (signup, etc.). Loosens
   the form max-width so two-column field rows and the plan grid
   don't squash. Triggered either explicitly via data-size="wide"
   or implicitly when the slot contains a .auth-wizard wrapper. */
.auth-card[data-size="wide"],
.auth-card:has(.auth-wizard) {
    max-width: 720px;
    padding: 2.5rem 3rem 2.25rem;
}

@media (max-width: 720px) {
    .auth-card[data-size="wide"],
    .auth-card:has(.auth-wizard) {
        padding: 1.75rem 1.5rem 1.5rem;
        max-width: none;
    }
}

@keyframes auth-bar-shimmer {
    0%, 100% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.10);
    color: var(--asetrix-brand);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: "Outfit", "Inter", system-ui, sans-serif;
}

[data-theme="dark"] .auth-eyebrow {
    background: rgba(74, 222, 128, 0.12);
    color: var(--asetrix-brand-on-dark);
}

.auth-eyebrow.is-danger { background: rgba(220, 38, 38, 0.12); color: var(--auth-danger); }
.auth-eyebrow.is-success { background: rgba(22, 163, 74, 0.12); color: var(--auth-success); }

.auth-title {
    margin: 1rem 0 0.5rem 0;
    font-family: "Outfit", "Inter", system-ui, sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--auth-card-fg);
}

.auth-subtitle {
    margin: 0 0 1.75rem 0;
    color: var(--auth-card-fg-muted, #4A554E);
    font-size: 0.96rem;
    line-height: 1.6;
}

/* ─── Form ────────────────────────────────────────────────── */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.auth-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    letter-spacing: 0.02em;
}

.auth-field-label-aux {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--auth-hero-accent);
    text-decoration: none;
}

.auth-field-label-aux:hover { text-decoration: underline; }

/* ─── Live availability indicator ─────────────────────────── */
/* Sits in the right of the .auth-field-label, opposite the label
   text. Shows the result of a debounced server check ("Checking…",
   "Available", "Already taken", "Not allowed") with a colour-coded
   state token. */
.auth-availability {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--auth-card-fg-soft, #8B968E);
    transition: color 180ms ease, opacity 180ms ease;
    opacity: 0;
    pointer-events: none;
}

.auth-availability[data-state="checking"],
.auth-availability[data-state="available"],
.auth-availability[data-state="taken"],
.auth-availability[data-state="invalid"] {
    opacity: 1;
}

.auth-availability[data-state="checking"]  { color: var(--auth-card-fg-soft, #8B968E); }
.auth-availability[data-state="available"] { color: var(--asetrix-brand-bright, #16A34A); }
.auth-availability[data-state="taken"]     { color: var(--auth-danger, #DC2626); }
.auth-availability[data-state="invalid"]   { color: #B45309; }

[data-theme="dark"] .auth-availability[data-state="available"] {
    color: var(--asetrix-brand-on-dark, #4ADE80);
}

.auth-availability-spinner {
    width: 11px;
    height: 11px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: auth-spin 720ms linear infinite;
}

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

/* Slug-with-suffix variant — the input renders as "alpha-properties"
   with a faint ".asetrix.co.za" tail visually attached, so the user
   understands their portal URL without parsing the hint copy. */
.auth-input-prefix-wrap {
    border: 1.5px solid var(--auth-input-border);
    outline: 3px solid transparent;
    outline-offset: 0;
    border-radius: 0.6rem;
    background: var(--auth-card-bg);
    overflow: hidden;
    transition: outline-color 160ms ease, border-color 160ms ease;
}

.auth-input-prefix-wrap:hover { border-color: var(--auth-input-border-strong); }

.auth-input-prefix-wrap:focus-within {
    border-color: var(--auth-input-focus);
    outline-color: rgba(20, 83, 45, 0.20);
}

.auth-input-prefix-wrap:has(.auth-input[data-invalid="true"]) {
    border-color: var(--auth-danger);
    outline-color: rgba(220, 38, 38, 0.18);
}

/* The inner input in a prefix-wrap composite. The visible focus/hover
   chrome lives on the parent .auth-input-prefix-wrap so the inner
   input must never paint its own border or outline — otherwise the
   element will shift when those state classes mutate.

   Specificity is bumped to .auth-input.auth-input-prefix (0,2,0) so
   these rules win regardless of where the general .auth-input block
   lives in the file. Every layout-relevant property is locked in
   every state — base, hover, focus, focus-visible, invalid — so
   pseudo-class transitions can never re-trigger box-model maths. */
.auth-input.auth-input-prefix,
.auth-input.auth-input-prefix:hover,
.auth-input.auth-input-prefix:focus,
.auth-input.auth-input-prefix:focus-visible,
.auth-input.auth-input-prefix[data-invalid="true"] {
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    flex: 1 1 auto;
    min-width: 0;
}

.auth-input-suffix {
    padding: 0 0.95rem 0 0.25rem;
    color: var(--text-tertiary, #94A3B8);
    font-size: 0.92rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: -0.01em;
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 540px) {
    .auth-input-suffix {
        padding: 0 0.75rem 0 0.2rem;
        font-size: 0.82rem;
    }
}

.auth-input {
    width: 100%;
    padding: 0.85rem 1rem;
    /* Two layers so the focus ring NEVER shifts surrounding content:
       - The visible 1.5px border stays the same colour-able layer.
       - A 3px outline (offset 0) is reserved permanently in transparent
         and only gets coloured on focus. Outlines occupy no layout
         space, so the focused input feels "lifted" without nudging
         its siblings by even a sub-pixel.  */
    border: 1.5px solid var(--auth-input-border);
    outline: 3px solid transparent;
    outline-offset: 0;
    border-radius: 0.6rem;
    background: var(--auth-card-bg);
    color: var(--auth-card-fg);
    font-family: inherit;
    /* 16px+ so iOS Safari doesn't auto-zoom on focus, which would
       jolt the wizard layout on small phones. */
    font-size: 1rem;
    line-height: 1.4;
    transition: outline-color 160ms ease, border-color 160ms ease, background 140ms ease;
}

.auth-input::placeholder { color: rgba(100, 116, 139, 0.6); }

.auth-input:hover { border-color: var(--auth-input-border-strong); }

.auth-input:focus {
    border-color: var(--auth-input-focus);
    outline-color: rgba(20, 83, 45, 0.20);
    background: var(--auth-card-bg);
}

.auth-input[data-invalid="true"] {
    border-color: var(--auth-danger);
    outline-color: rgba(220, 38, 38, 0.18);
}

.auth-input[type="password"],
.auth-input[data-type="password"] {
    padding-right: 2.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.08em;
}

.auth-input-toggle {
    position: absolute;
    right: 0.5rem;
    height: 2rem;
    width: 2rem;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 0.35rem;
    background: transparent;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.auth-input-toggle:hover { background: rgba(15, 23, 42, 0.06); color: var(--auth-card-fg); }
.auth-input-toggle:focus-visible {
    outline: 2px solid var(--auth-input-focus);
    outline-offset: 1px;
}

.auth-field-hint {
    font-size: 0.78rem;
    color: var(--text-tertiary, #94A3B8);
    line-height: 1.45;
}

.auth-field-error {
    font-size: 0.82rem;
    color: var(--auth-danger);
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    animation: auth-shake 360ms cubic-bezier(.36,.07,.19,.97);
}

@keyframes auth-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}

.auth-caps-warning {
    font-size: 0.78rem;
    color: #B45309;
    background: #FEF3C7;
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
    display: none;
    align-items: center;
    gap: 0.4rem;
}

.auth-caps-warning[data-visible="true"] { display: inline-flex; }

[data-theme="dark"] .auth-caps-warning { background: #422006; color: #FCD34D; }

/* ─── Buttons ─────────────────────────────────────────────── */

.auth-submit {
    /* inline-flex so the optional <svg> trailing-icon stays inline with
       the label text. Without this the global svg { display: block }
       reset (in _reset.css) pushes the icon onto its own line. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.95rem 1rem;
    border: none;
    border-radius: 0.6rem;
    background: linear-gradient(135deg,
                  var(--asetrix-brand) 0%,
                  var(--asetrix-brand-bright) 50%,
                  var(--asetrix-brand) 100%);
    background-size: 220% 220%;
    background-position: 0% 50%;
    color: #FFFFFF;
    font-family: "Outfit", "Inter", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 180ms ease, background-position 600ms ease, opacity 140ms ease;
    box-shadow:
        0 1px 2px rgba(20, 50, 30, 0.08),
        0 10px 28px -10px rgba(20, 83, 45, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    position: relative;
    overflow: hidden;
    margin-top: 0.5rem;
    min-height: 48px;
}

.auth-submit > svg { flex: 0 0 auto; }

.auth-submit:hover {
    background-position: 100% 50%;
    box-shadow:
        0 1px 2px rgba(20, 50, 30, 0.10),
        0 14px 32px -8px rgba(20, 83, 45, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.auth-submit:active { transform: translateY(1px); }

.auth-submit:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

.auth-submit[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.auth-submit-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 0.45rem;
    vertical-align: -3px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: auth-spin 700ms linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

.auth-secondary-action {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    font-size: 0.88rem;
    color: var(--text-secondary, #475569);
}

.auth-secondary-action a {
    color: var(--auth-hero-accent);
    text-decoration: none;
    font-weight: 600;
    margin-left: 0.4rem;
}

.auth-secondary-action a:hover { text-decoration: underline; }

/* ─── Server error / status banner ───────────────────────── */

.auth-banner {
    padding: 0.75rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    line-height: 1.45;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.auth-banner-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-top: 1px;
}

.auth-banner[data-tone="error"] {
    background: rgba(220, 38, 38, 0.08);
    color: #991B1B;
    border: 1px solid rgba(220, 38, 38, 0.18);
}

.auth-banner[data-tone="error"] .auth-banner-icon { background: var(--auth-danger); }

.auth-banner[data-tone="info"] {
    background: rgba(37, 99, 235, 0.08);
    color: #1E3A8A;
    border: 1px solid rgba(37, 99, 235, 0.18);
}

.auth-banner[data-tone="info"] .auth-banner-icon { background: #2563EB; }

.auth-banner[data-tone="success"] {
    background: rgba(22, 163, 74, 0.08);
    color: #166534;
    border: 1px solid rgba(22, 163, 74, 0.18);
}

.auth-banner[data-tone="success"] .auth-banner-icon { background: var(--auth-success); }

[data-theme="dark"] .auth-banner[data-tone="error"] {
    background: rgba(220, 38, 38, 0.18);
    color: #FCA5A5;
    border-color: rgba(220, 38, 38, 0.4);
}

[data-theme="dark"] .auth-banner[data-tone="info"] {
    background: rgba(59, 130, 246, 0.18);
    color: #BFDBFE;
    border-color: rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .auth-banner[data-tone="success"] {
    background: rgba(22, 163, 74, 0.18);
    color: #86EFAC;
    border-color: rgba(22, 163, 74, 0.4);
}

/* ─── Password strength meter ────────────────────────────── */

.auth-strength {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 0.4rem;
}

.auth-strength-seg {
    height: 5px;
    border-radius: 999px;
    background: var(--auth-input-border);
    transition: background 200ms ease;
}

.auth-strength[data-level="1"] .auth-strength-seg:nth-child(-n+1) { background: #DC2626; }
.auth-strength[data-level="2"] .auth-strength-seg:nth-child(-n+2) { background: #F59E0B; }
.auth-strength[data-level="3"] .auth-strength-seg:nth-child(-n+3) { background: #22C55E; }
.auth-strength[data-level="4"] .auth-strength-seg:nth-child(-n+4) { background: #16A34A; }

.auth-strength-label {
    font-size: 0.75rem;
    color: var(--text-tertiary, #94A3B8);
    margin-top: 0.25rem;
}

.auth-strength-label[data-level="1"] { color: #DC2626; }
.auth-strength-label[data-level="2"] { color: #B45309; }
.auth-strength-label[data-level="3"] { color: #15803D; }
.auth-strength-label[data-level="4"] { color: #14532D; }

/* ─── Success checkmark animation ────────────────────────── */

.auth-checkmark {
    width: 64px;
    height: 64px;
    margin: 0.25rem auto 1rem;
    display: block;
}

.auth-checkmark .ring {
    fill: none;
    stroke: var(--auth-success);
    stroke-width: 3;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: auth-ring-draw 600ms ease-out forwards;
}

.auth-checkmark .tick {
    fill: none;
    stroke: var(--auth-success);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: auth-tick-draw 350ms ease-out 450ms forwards;
}

@keyframes auth-ring-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes auth-tick-draw {
    to { stroke-dashoffset: 0; }
}

/* ─── Stepper (signup wizard) ────────────────────────────── */

/* Continuous progress bar — sits above the discrete stepper and
   gives a "you're 33%/66%/100% there" hint that reads at a glance,
   especially on mobile where step labels collapse. */
.auth-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--auth-input-border);
    overflow: hidden;
    margin: 1.25rem 0 1rem;
    position: relative;
}

.auth-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--auth-hero-accent) 0%, var(--auth-hero-accent-2) 50%, var(--auth-hero-accent) 100%);
    background-size: 200% 100%;
    border-radius: inherit;
    transition: width 480ms cubic-bezier(0.16, 1, 0.3, 1);
    animation: auth-progress-shimmer 3.5s ease-in-out infinite;
}

@keyframes auth-progress-shimmer {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
}

/* Step stage — the content area inside the wizard form that swaps
   between steps. Re-renders animate up + fade as Blazor diffs the
   new step in. The data-step-key attribute is keyed off _step so
   the animation re-runs on every step change. */
.auth-wizard-stage {
    animation: auth-stage-in 360ms cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@keyframes auth-stage-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-stepper {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0;
}

.auth-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-tertiary, #94A3B8);
    font-size: 0.85rem;
    font-weight: 500;
}

.auth-step:not(:last-child)::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--auth-input-border);
    margin: 0 0.85rem;
    transition: background 240ms ease;
    min-width: 24px;
}

.auth-step.is-done:not(:last-child)::after {
    background: linear-gradient(90deg, var(--auth-hero-accent), var(--auth-hero-accent-2));
}

.auth-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-2, #F1F5F9);
    color: var(--text-secondary, #475569);
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 240ms ease, color 240ms ease, transform 200ms ease;
    border: 2px solid transparent;
}

.auth-step.is-current .auth-step-num {
    background: linear-gradient(135deg, var(--asetrix-brand) 0%, var(--asetrix-brand-bright) 100%);
    color: #FFFFFF;
    transform: scale(1.05);
    box-shadow: 0 4px 12px -2px rgba(20, 83, 45, 0.42);
}

.auth-step.is-done .auth-step-num {
    background: var(--auth-success);
    color: #FFFFFF;
}

.auth-step.is-current .auth-step-label {
    color: var(--auth-card-fg);
    font-weight: 600;
}

.auth-step.is-done .auth-step-label {
    color: var(--text-secondary, #475569);
}

@media (max-width: 540px) {
    .auth-step-label { display: none; }
    .auth-step:not(:last-child)::after { margin: 0 0.5rem; }
}

.auth-step-meta {
    display: block;
    margin: 0 0 1rem 0;
    font-size: 0.78rem;
    color: var(--text-tertiary, #94A3B8);
    letter-spacing: 0.02em;
}

/* ─── Field row (two columns on wide cards) ──────────────── */

.auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 540px) {
    .auth-row { grid-template-columns: 1fr; }
}

/* ─── Wizard footer (back / continue split) ──────────────── */

.auth-wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--auth-card-border);
}

.auth-btn-ghost {
    /* Same inline-flex trick as .auth-submit so the trailing arrow
       icon doesn't break onto its own line (svg { display: block }
       global reset side effect). */
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--auth-input-border);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--auth-card-fg);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

.auth-btn-ghost > svg { flex: 0 0 auto; }

.auth-btn-ghost:hover {
    background: var(--surface-hover, rgba(15, 23, 42, 0.04));
    border-color: var(--auth-input-border-strong);
}

.auth-btn-ghost[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.auth-submit-inline {
    width: auto;
    margin-top: 0;
    padding: 0.75rem 1.4rem;
}

/* ─── Plan grid (step 3) ─────────────────────────────────── */

.auth-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.auth-plan {
    text-align: left;
    background: var(--auth-card-bg);
    border: 1.5px solid var(--auth-input-border);
    border-radius: 0.6rem;
    padding: 1rem 1.1rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--auth-card-fg);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease, background 140ms ease;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.auth-plan:hover {
    border-color: var(--auth-input-border-strong);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.18);
}

.auth-plan.is-selected {
    border-color: var(--asetrix-brand);
    box-shadow: 0 0 0 4px rgba(20, 83, 45, 0.15);
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.06), transparent 60%);
}

.auth-plan.is-selected::after {
    content: "✓";
    position: absolute;
    top: 0.5rem;
    right: 0.7rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--asetrix-brand) 0%, var(--asetrix-brand-bright) 100%);
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.auth-plan-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--auth-card-fg);
}

.auth-plan-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--auth-card-fg);
}

.auth-plan-price small {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-tertiary, #94A3B8);
    margin-left: 0.15rem;
}

.auth-plan-features {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
    color: var(--text-secondary, #475569);
}

/* ─── Mobile polish ──────────────────────────────────────── */
/* Larger touch targets + tighter spacing on small phones. */

@media (max-width: 540px) {
    .auth-title {
        font-size: 1.4rem;
        margin-top: 1rem;
    }
    .auth-subtitle {
        font-size: 0.92rem;
        margin-bottom: 1.25rem;
    }
    .auth-input {
        padding: 0.95rem 1rem;
        font-size: 1rem;
        border-radius: 0.7rem;
    }
    .auth-input-toggle {
        height: 2.4rem;
        width: 2.4rem;
        right: 0.4rem;
    }
    .auth-submit {
        min-height: 52px;
        font-size: 1.02rem;
        padding: 1rem 1rem;
    }
    /* Plan grid in the signup wizard stacks to a single column with
       large tappable rows so a thumb can pick from a sale by glance. */
    .auth-plan-grid {
        grid-template-columns: 1fr !important;
    }
    .auth-plan {
        padding: 1.1rem 1rem !important;
    }
    /* Wizard step indicator gets tighter so the form stays the focus. */
    .auth-stepper {
        gap: 0.5rem;
    }
    .auth-step-label {
        font-size: 0.78rem;
    }
}

/* Very small screens — squeeze the auth-card to claim more vertical
   room for inputs since the hero band is collapsing too. */
@media (max-width: 380px) {
    .auth-card {
        padding: 1.5rem 1.25rem 1.25rem !important;
    }
}

/* ─── Reduced motion respect ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .auth-card::before,
    .auth-checkmark .ring,
    .auth-checkmark .tick,
    .auth-submit-spinner,
    .auth-step-num,
    .auth-plan {
        animation: none;
        transition: none;
    }
    .auth-checkmark .ring,
    .auth-checkmark .tick { stroke-dashoffset: 0; }
}