/* ══════════════════════════════════════════════════════════════════
   The auth surface — Login · MFA challenge · MFA gate · password reset · password update · Logout
   Lifted out of six component <style> blocks (#audit-25, slice 1)

   1,305 lines lived inline, where the styling policy says they must not: `.razor.css` does nothing
   in this app, so a component's own <style> is the only place they COULD live, and being in the
   body they outranked every stylesheet. Editing the file the policy names did nothing for them.

   Moved verbatim. 35 selectors appeared in more than one of the six files and every one carried
   identical declarations, so the duplicates are collapsed to a single copy — checked before the
   move, not assumed.

   These screens are painted from a separate slate/blue scale, not from the brand ramp: of 106
   distinct colour literals in 315 uses, exactly ONE (#4f46e5 = --yb-indigo) matched a --yb-* value.
   That was a decision to take, not a substitution to make. The owner took it — the counselling
   journal's shape from #audit-29: keep the palette, name it. The names are in the block below.
   ══════════════════════════════════════════════════════════════════ */

/* ── The auth palette, named ──────────────────────────────────────────────
   #audit-25 counted 105 colour literals on this surface and exactly one of them matching a --yb-*
   value: these screens are painted from a slate/blue scale, not the brand ramp. Owner's decision:
   keep the palette, give it names — the shape #audit-29 settled for the counselling journal.

   Every colour below was already here, and every rule that used to carry one still carries a
   declaration in the same place at the same specificity — the literal was replaced by a token
   reference, nothing was deleted. That matters: an earlier pass DID delete the dark declarations
   and let the light rule read a dark-valued token, which silently dropped
   `.password-reset-copy` and `.password-reset-secondary-action` from (0,2,1) to (0,1,0), where
   rules in isolated-fallback.css outrank them. Two colours changed. Replace, never delete.

   What this buys: 79 colours that were written twice by hand — once light, once dark, in two
   places, editable independently — are now written once each. That drift is how the #300
   dark-mode defects got in. 36 literals remain below, all of them dark-only or a second dark
   value for a token that already has one; those are named by hand or not at all.

   ⚠ Whether this palette should BECOME the brand ramp is still open. That is now one edit to this
   block rather than 105 edits spread over the file, which is the point of naming.
   ─────────────────────────────────────────────────────────────────────── */
.auth-layout,
.login-page,
.mfa-gate-page,
.password-reset-page,
.password-update-page,
.logout-page {
    --auth-back: #1d4ed8;
    --auth-back-hover: #1e40af;
    --auth-cancel: #0f172a;
    --auth-cancel-bg: rgba(15, 23, 42, 0.06);
    --auth-cancel-bg-hover: rgba(15, 23, 42, 0.1);
    --auth-cancel-edge: rgba(148, 163, 184, 0.32);
    --auth-cancel-hover: #0f172a;
    --auth-cancel-shadow-hover: rgba(15, 23, 42, 0.12);
    --auth-card-form-control-placeholder: #64748b;
    --auth-complete: #334155;
    --auth-confirm: #fff;
    --auth-confirm-bg-1: #ef4444;
    --auth-confirm-bg-2: #dc2626;
    --auth-confirm-hover: #fff;
    --auth-confirm-shadow: rgba(220, 38, 38, 0.24);
    --auth-confirm-shadow-hover: rgba(220, 38, 38, 0.26);
    --auth-copy: #475569;
    --auth-field-label: #0f172a;
    --auth-footnote: #64748b;
    --auth-form-shell-bg: rgba(248, 250, 252, 0.8);
    --auth-form-shell-edge: rgba(148, 163, 184, 0.24);
    --auth-highlights: #475569;
    --auth-highlights-2: #16a34a;
    --auth-highlights-bg: rgba(15, 23, 42, 0.04);
    --auth-icon: #dc2626;
    --auth-icon-bg: rgba(239, 68, 68, 0.12);
    --auth-label: #0f172a;
    --auth-mfa-body-form-text: #475569;
    --auth-mfa-card-bg: rgba(255, 255, 255, 0.9);
    --auth-mfa-card-edge: rgba(148, 163, 184, 0.26);
    --auth-mfa-card-label: #1d4ed8;
    --auth-mfa-header: #1e40af;
    --auth-mfa-header-bg: rgba(29, 78, 216, 0.12);
    --auth-mfa-qr-frame-bg: #fff;
    --auth-mfa-qr-frame-edge: rgba(148, 163, 184, 0.3);
    --auth-notice-copy: #475569;
    --auth-notice-danger-bg-1: rgba(254, 242, 242, 0.96);
    --auth-notice-danger-bg-2: rgba(255, 251, 235, 0.94);
    --auth-notice-danger-edge: rgba(239, 68, 68, 0.18);
    --auth-notice-icon: #dc2626;
    --auth-notice-icon-2: #15803d;
    --auth-notice-icon-3: #2563eb;
    --auth-notice-icon-bg: rgba(239, 68, 68, 0.12);
    --auth-notice-icon-bg-2: rgba(34, 197, 94, 0.14);
    --auth-notice-icon-bg-3: rgba(37, 99, 235, 0.12);
    --auth-notice-info-bg-1: rgba(239, 246, 255, 0.96);
    --auth-notice-info-bg-2: rgba(248, 250, 252, 0.94);
    --auth-notice-info-edge: rgba(37, 99, 235, 0.16);
    --auth-notice-shadow: rgba(15, 23, 42, 0.08);
    --auth-notice-success-bg-1: rgba(240, 253, 244, 0.96);
    --auth-notice-success-bg-2: rgba(239, 246, 255, 0.94);
    --auth-notice-success-edge: rgba(34, 197, 94, 0.18);
    --auth-notice-title: #0f172a;
    --auth-panel: #0f172a;
    --auth-panel-bg: rgba(248, 250, 252, 0.82);
    --auth-panel-edge: rgba(148, 163, 184, 0.24);
    --auth-panel-form-label: #0f172a;
    --auth-secondary-action: #0f172a;
    --auth-secondary-action-bg: rgba(15, 23, 42, 0.08);
    --auth-secondary-link: #1d4ed8;
    --auth-secondary-link-hover: #1e40af;
    --auth-shield: #1d4ed8;
    --auth-shield-bg: rgba(37, 99, 235, 0.12);
    --auth-status: #1e293b;
    --auth-status-badge-off: #475569;
    --auth-status-badge-off-bg: rgba(148, 163, 184, 0.16);
    --auth-status-badge-off-edge: rgba(148, 163, 184, 0.34);
    --auth-status-badge-on: #166534;
    --auth-status-badge-on-bg: rgba(34, 197, 94, 0.14);
    --auth-status-badge-on-edge: rgba(34, 197, 94, 0.32);
    --auth-status-bg: rgba(241, 245, 249, 0.9);
    --auth-status-danger: #b91c1c;
    --auth-status-danger-bg: rgba(254, 226, 226, 0.84);
    --auth-status-danger-edge: rgba(239, 68, 68, 0.34);
    --auth-status-edge: rgba(148, 163, 184, 0.32);
    --auth-status-info: #1d4ed8;
    --auth-status-info-bg: rgba(219, 234, 254, 0.72);
    --auth-status-info-edge: rgba(59, 130, 246, 0.35);
    --auth-status-success: #166534;
    --auth-status-success-bg: rgba(220, 252, 231, 0.74);
    --auth-status-success-edge: rgba(34, 197, 94, 0.34);
    --auth-status-warning: #92400e;
    --auth-status-warning-bg: rgba(254, 243, 199, 0.8);
    --auth-status-warning-edge: rgba(245, 158, 11, 0.34);
    --auth-submit-bg-1: #2563eb;
    --auth-submit-bg-2: #4f46e5;
    --auth-submit-bg-hover-1: #1d4ed8;
    --auth-submit-bg-hover-2: #4338ca;
    --auth-submit-shadow: rgba(37, 99, 235, 0.26);
    --auth-switch-edge-top: rgba(148, 163, 184, 0.24);
    --auth-switch-label: #475569;
    --auth-switch-link: #1d4ed8;
    --auth-switch-link-disabled: #94a3b8;
    --auth-switch-link-hover: #1e40af;
    --auth-text-danger: #b91c1c;
}

html[data-theme="dark"] .auth-layout,
html[data-theme="dark"] .login-page,
html[data-theme="dark"] .mfa-gate-page,
html[data-theme="dark"] .password-reset-page,
html[data-theme="dark"] .password-update-page,
html[data-theme="dark"] .logout-page,
.dark-mode .auth-layout,
.dark-mode .login-page,
.dark-mode .mfa-gate-page,
.dark-mode .password-reset-page,
.dark-mode .password-update-page,
.dark-mode .logout-page {
    --auth-back: #93c5fd;
    --auth-back-hover: #bfdbfe;
    --auth-cancel: #e2e8f0;
    --auth-cancel-bg: rgba(148, 163, 184, 0.16);
    --auth-cancel-bg-hover: rgba(148, 163, 184, 0.24);
    --auth-cancel-hover: #f8fafc;
    --auth-cancel-shadow-hover: rgba(148, 163, 184, 0.22);
    --auth-card-form-control-placeholder: #94a3b8;
    --auth-complete: #cbd5e1;
    --auth-confirm-shadow-hover: rgba(248, 113, 113, 0.28);
    --auth-copy: #cbd5e1;
    --auth-field-label: #f8fafc;
    --auth-footnote: #94a3b8;
    --auth-form-shell-bg: rgba(15, 23, 42, 0.7);
    --auth-highlights: #cbd5e1;
    --auth-highlights-bg: rgba(148, 163, 184, 0.14);
    --auth-icon: #fecaca;
    --auth-icon-bg: rgba(248, 113, 113, 0.18);
    --auth-label: #e2e8f0;
    --auth-mfa-body-form-text: #cbd5e1;
    --auth-mfa-card-bg: rgba(2, 6, 23, 0.55);
    --auth-mfa-card-label: #93c5fd;
    --auth-mfa-header: #dbeafe;
    --auth-mfa-header-bg: rgba(59, 130, 246, 0.24);
    --auth-notice-copy: #cbd5e1;
    --auth-notice-danger-bg-1: rgba(69, 10, 10, 0.9);
    --auth-notice-danger-bg-2: rgba(51, 65, 85, 0.88);
    --auth-notice-danger-edge: rgba(248, 113, 113, 0.22);
    --auth-notice-icon: #fecaca;
    --auth-notice-icon-2: #bbf7d0;
    --auth-notice-icon-3: #bfdbfe;
    --auth-notice-icon-bg: rgba(248, 113, 113, 0.16);
    --auth-notice-icon-bg-2: rgba(74, 222, 128, 0.18);
    --auth-notice-icon-bg-3: rgba(96, 165, 250, 0.18);
    --auth-notice-info-bg-1: rgba(30, 41, 59, 0.9);
    --auth-notice-info-bg-2: rgba(15, 23, 42, 0.88);
    --auth-notice-info-edge: rgba(96, 165, 250, 0.22);
    --auth-notice-success-bg-1: rgba(20, 83, 45, 0.88);
    --auth-notice-success-bg-2: rgba(30, 41, 59, 0.9);
    --auth-notice-success-edge: rgba(74, 222, 128, 0.22);
    --auth-notice-title: #f8fafc;
    --auth-panel: #f1f5f9;
    --auth-panel-bg: rgba(15, 23, 42, 0.7);
    --auth-panel-form-label: #f1f5f9;
    --auth-secondary-action: #f8fafc;
    --auth-secondary-action-bg: rgba(148, 163, 184, 0.2);
    --auth-secondary-link: #93c5fd;
    --auth-secondary-link-hover: #bfdbfe;
    --auth-shield: #bfdbfe;
    --auth-shield-bg: rgba(59, 130, 246, 0.22);
    --auth-status: #e2e8f0;
    --auth-status-badge-off: #cbd5e1;
    --auth-status-badge-off-bg: rgba(148, 163, 184, 0.2);
    --auth-status-badge-off-edge: rgba(148, 163, 184, 0.36);
    --auth-status-badge-on: #bbf7d0;
    --auth-status-badge-on-bg: rgba(34, 197, 94, 0.2);
    --auth-status-badge-on-edge: rgba(74, 222, 128, 0.34);
    --auth-status-bg: rgba(30, 41, 59, 0.62);
    --auth-status-danger: #fecaca;
    --auth-status-danger-bg: rgba(127, 29, 29, 0.45);
    --auth-status-danger-edge: rgba(248, 113, 113, 0.45);
    --auth-status-info: #bfdbfe;
    --auth-status-info-bg: rgba(30, 58, 138, 0.35);
    --auth-status-info-edge: rgba(96, 165, 250, 0.4);
    --auth-status-success: #bbf7d0;
    --auth-status-success-bg: rgba(20, 83, 45, 0.45);
    --auth-status-success-edge: rgba(74, 222, 128, 0.4);
    --auth-status-warning: #fde68a;
    --auth-status-warning-bg: rgba(120, 53, 15, 0.4);
    --auth-status-warning-edge: rgba(251, 191, 36, 0.45);
    --auth-switch-label: #cbd5e1;
    --auth-switch-link: #93c5fd;
    --auth-switch-link-hover: #bfdbfe;
    --auth-text-danger: #fca5a5;
}

/* ── from Login.razor ────────────────────────────────────────── */
/* #audit-26 — 12 rules that used to live here were ALSO declared in
       isolated-fallback.css, and this copy won on document order, so editing the file
       the styling policy names did nothing. They live there now, in the section at the
       end. Everything below is declared HERE only — do not re-add a global copy. */

    .login-shell {
        display: block;
    }

    .login-shell__main {
        min-width: 0;
        width: 100%;
    }

    /* The .login-processing-indicator family used to be duplicated here, which is
       precisely why /login/mfa never got the #114 alignment fix — a page-local
       style block only exists while that page is rendered. It now lives once, in
       isolated-fallback.css, alongside the other auth-form rules. Do not copy it
       back: a second copy is a second thing to forget to fix. */

    .login-mfa-body .form-text {
        color: var(--auth-mfa-body-form-text);
    }

    .login-card .form-control::placeholder {
        color: var(--auth-card-form-control-placeholder);
        opacity: 1;
    }

    .login-mfa-header {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.22rem 0.6rem;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--auth-mfa-header);
        background: var(--auth-mfa-header-bg);
    }

    .login-notice {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.85rem;
        align-items: start;
        border: 1px solid transparent;
        border-radius: 1rem;
        padding: 0.95rem 1rem;
        box-shadow: 0 14px 30px var(--auth-notice-shadow);
    }

    .login-notice__icon {
        width: 2.2rem;
        height: 2.2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font-size: 1rem;
    }

    .login-notice__title {
        font-weight: 700;
        color: var(--auth-notice-title);
        margin-bottom: 0.2rem;
    }

    .login-notice__copy {
        color: var(--auth-notice-copy);
        line-height: 1.5;
    }

    .login-notice__copy a {
        font-weight: 600;
    }

    .login-secondary-link {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--auth-secondary-link);
        text-decoration: none;
    }

    .login-secondary-link:hover,
    .login-secondary-link:focus-visible {
        color: var(--auth-secondary-link-hover);
        text-decoration: underline;
    }

    .login-notice--danger {
        background: linear-gradient(135deg, var(--auth-notice-danger-bg-1), var(--auth-notice-danger-bg-2));
        border-color: var(--auth-notice-danger-edge);
    }

    .login-notice--danger .login-notice__icon {
        background: var(--auth-notice-icon-bg);
        color: var(--auth-notice-icon);
    }

    .login-notice--success {
        background: linear-gradient(135deg, var(--auth-notice-success-bg-1), var(--auth-notice-success-bg-2));
        border-color: var(--auth-notice-success-edge);
    }

    .login-notice--success .login-notice__icon {
        background: var(--auth-notice-icon-bg-2);
        color: var(--auth-notice-icon-2);
    }

    html[data-theme="dark"] .login-notice {
        box-shadow: none;
    }

    html[data-theme="dark"] .login-notice__title {
        color: var(--auth-notice-title);
    }

    html[data-theme="dark"] .login-notice__copy {
        color: var(--auth-notice-copy);
    }

    html[data-theme="dark"] .login-notice--danger {
        background: linear-gradient(135deg, var(--auth-notice-danger-bg-1), var(--auth-notice-danger-bg-2));
        border-color: var(--auth-notice-danger-edge);
    }

    html[data-theme="dark"] .login-notice--danger .login-notice__icon {
        background: var(--auth-notice-icon-bg);
        color: var(--auth-notice-icon);
    }

    html[data-theme="dark"] .login-notice--success {
        background: linear-gradient(135deg, var(--auth-notice-success-bg-1), var(--auth-notice-success-bg-2));
        border-color: var(--auth-notice-success-edge);
    }

    html[data-theme="dark"] .login-notice--success .login-notice__icon {
        background: var(--auth-notice-icon-bg-2);
        color: var(--auth-notice-icon-2);
    }

    html[data-theme="dark"] .login-mfa-header {
        color: #dbeafe;
        background: rgba(59, 130, 246, 0.24);
    }

    html[data-theme="dark"] .login-mfa {
        background: rgba(15, 23, 42, 0.78);
        border-color: rgba(148, 163, 184, 0.34);
    }

    html[data-theme="dark"] .login-field-label {
        color: #f8fafc;
    }

    html[data-theme="dark"] .login-mfa-body .form-text {
        color: #cbd5e1;
    }

    html[data-theme="dark"] .login-card .form-control::placeholder {
        color: #94a3b8;
        opacity: 1;
    }

    html[data-theme="dark"] .login-secondary-link {
        color: #93c5fd;
    }

    html[data-theme="dark"] .login-secondary-link:hover,
    html[data-theme="dark"] .login-secondary-link:focus-visible {
        color: #bfdbfe;
    }

    .dark-mode .login-field-label {
        color: #f8fafc;
    }

    .dark-mode .login-mfa-body .form-text {
        color: #cbd5e1;
    }

    .dark-mode .login-mfa-header {
        color: #dbeafe;
        background: rgba(59, 130, 246, 0.24);
    }

    .dark-mode .login-mfa {
        background: rgba(15, 23, 42, 0.78);
        border-color: rgba(148, 163, 184, 0.34);
    }

    .dark-mode .login-card .form-control::placeholder {
        color: #94a3b8;
        opacity: 1;
    }

    .dark-mode .login-secondary-link {
        color: #93c5fd;
    }

    .dark-mode .login-secondary-link:hover,
    .dark-mode .login-secondary-link:focus-visible {
        color: #bfdbfe;
    }

/* ── from MfaChallenge.razor ────────────────────────────────────────── */
html[data-theme="dark"] .login-field-label,
    .dark-mode .login-field-label { color: #f8fafc; }


    html[data-theme="dark"] .login-mfa,
    .dark-mode .login-mfa {
        background: rgba(15, 23, 42, 0.78);
        border-color: rgba(148, 163, 184, 0.34);
    }

    html[data-theme="dark"] .login-mfa-header,
    .dark-mode .login-mfa-header {
        color: var(--auth-mfa-header);
        background: var(--auth-mfa-header-bg);
    }

    html[data-theme="dark"] .login-mfa-body .form-text,
    .dark-mode .login-mfa-body .form-text { color: var(--auth-mfa-body-form-text); }

    html[data-theme="dark"] .login-card .form-control::placeholder,
    .dark-mode .login-card .form-control::placeholder { color: var(--auth-card-form-control-placeholder); opacity: 1; }

    html[data-theme="dark"] .login-secondary-link,
    .dark-mode .login-secondary-link { color: var(--auth-secondary-link); }

    html[data-theme="dark"] .login-secondary-link:hover,
    html[data-theme="dark"] .login-secondary-link:focus-visible,
    .dark-mode .login-secondary-link:hover,
    .dark-mode .login-secondary-link:focus-visible { color: var(--auth-secondary-link-hover); }

/* ── from MfaGate.razor ────────────────────────────────────────── */
.mfa-gate-card {
        max-width: 46rem;
    }

    .mfa-gate-shield {
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 auto 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--auth-shield-bg);
        color: var(--auth-shield);
        font-size: 1.1rem;
    }

    .mfa-gate-copy {
        max-width: 34rem;
    }

    .mfa-gate-back {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--auth-back);
        text-decoration: none;
    }

    .mfa-gate-back:hover,
    .mfa-gate-back:focus-visible {
        color: var(--auth-back-hover);
        text-decoration: underline;
    }

    .mfa-gate-body {
        width: min(100%, 90%);
        margin: 0 auto;
    }

    /* Panel surface that replaces the old Bootstrap bg-body-tertiary cards */
    .mfa-gate-panel {
        border: 1px solid var(--auth-panel-edge);
        border-radius: 16px;
        background: var(--auth-panel-bg);
        padding: 1rem 1.1rem;
    }

    .mfa-gate-panel h6 {
        font-weight: 700;
        color: var(--auth-panel);
    }

    .mfa-gate-panel .form-label {
        font-weight: 600;
        color: var(--auth-panel-form-label);
    }

    .mfa-gate-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.32rem 0.7rem;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 700;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .mfa-gate-status-badge--on {
        color: var(--auth-status-badge-on);
        background: var(--auth-status-badge-on-bg);
        border-color: var(--auth-status-badge-on-edge);
    }

    .mfa-gate-status-badge--off {
        color: var(--auth-status-badge-off);
        background: var(--auth-status-badge-off-bg);
        border-color: var(--auth-status-badge-off-edge);
    }

    .mfa-gate-footnote {
        margin: 1rem 0 0;
        text-align: center;
        font-size: 0.82rem;
        color: var(--auth-footnote);
    }

    /* MFA setup grid (QR + manual key) — scoped so AdminUsers' own rules are untouched.
       auto-fit + minmax keeps both columns flexible and wraps cleanly on narrow widths;
       a fixed first column or `auto` lets the QR caption's max-content width crush the
       manual-setup column, so it must stay fr-based. */
    .mfa-gate-card .admin-mfa-setup-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1rem;
        align-items: start;
    }

    .mfa-gate-card .admin-mfa-card {
        min-width: 0;
        border: 1px solid var(--auth-mfa-card-edge);
        border-radius: 14px;
        background: var(--auth-mfa-card-bg);
        padding: 0.85rem;
    }

    .mfa-gate-card .admin-mfa-card-label {
        margin-bottom: 0.5rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--auth-mfa-card-label);
    }

    .mfa-gate-card .admin-mfa-qr-shell {
        display: flex;
        justify-content: center;
        margin-bottom: 0.6rem;
    }

    .mfa-gate-card .admin-mfa-qr-frame {
        width: min(100%, 184px);
        padding: 0.5rem;
        background: var(--auth-mfa-qr-frame-bg);
        border: 1px solid var(--auth-mfa-qr-frame-edge);
        border-radius: 12px;
    }

    .mfa-gate-card .admin-mfa-qr-frame svg {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .mfa-gate-card .admin-mfa-card .form-control {
        max-width: 100%;
    }

    /* Login-notice surface (shared inline pattern, mirrors Login/PasswordReset) */
    .mfa-gate-card .login-notice {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.85rem;
        align-items: start;
        border: 1px solid transparent;
        border-radius: 1rem;
        padding: 0.95rem 1rem;
        box-shadow: 0 14px 30px var(--auth-notice-shadow);
    }

    .mfa-gate-card .login-notice__icon {
        width: 2.2rem;
        height: 2.2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font-size: 1rem;
    }

    .mfa-gate-card .login-notice__title {
        font-weight: 700;
        color: var(--auth-notice-title);
        margin-bottom: 0.2rem;
    }

    .mfa-gate-card .login-notice__copy {
        color: var(--auth-notice-copy);
        line-height: 1.5;
    }

    .mfa-gate-card .login-notice--danger {
        background: linear-gradient(135deg, var(--auth-notice-danger-bg-1), var(--auth-notice-danger-bg-2));
        border-color: var(--auth-notice-danger-edge);
    }

    .mfa-gate-card .login-notice--danger .login-notice__icon {
        background: var(--auth-notice-icon-bg);
        color: var(--auth-notice-icon);
    }

    .mfa-gate-card .login-notice--success {
        background: linear-gradient(135deg, var(--auth-notice-success-bg-1), var(--auth-notice-success-bg-2));
        border-color: var(--auth-notice-success-edge);
    }

    .mfa-gate-card .login-notice--success .login-notice__icon {
        background: var(--auth-notice-icon-bg-2);
        color: var(--auth-notice-icon-2);
    }

    .mfa-gate-card .login-notice--info {
        background: linear-gradient(135deg, var(--auth-notice-info-bg-1), var(--auth-notice-info-bg-2));
        border-color: var(--auth-notice-info-edge);
    }

    .mfa-gate-card .login-notice--info .login-notice__icon {
        background: var(--auth-notice-icon-bg-3);
        color: var(--auth-notice-icon-3);
    }

    /* ---------------- Dark mode ---------------- */
    html[data-theme="dark"] .mfa-gate-back,
    .dark-mode .mfa-gate-back {
        color: var(--auth-back);
    }

    html[data-theme="dark"] .mfa-gate-back:hover,
    html[data-theme="dark"] .mfa-gate-back:focus-visible,
    .dark-mode .mfa-gate-back:hover,
    .dark-mode .mfa-gate-back:focus-visible {
        color: var(--auth-back-hover);
    }

    html[data-theme="dark"] .mfa-gate-shield,
    .dark-mode .mfa-gate-shield {
        background: var(--auth-shield-bg);
        color: var(--auth-shield);
    }

    html[data-theme="dark"] .mfa-gate-panel,
    .dark-mode .mfa-gate-panel {
        background: var(--auth-panel-bg);
        border-color: rgba(148, 163, 184, 0.3);
    }

    html[data-theme="dark"] .mfa-gate-panel h6,
    html[data-theme="dark"] .mfa-gate-panel .form-label,
    .dark-mode .mfa-gate-panel h6,
    .dark-mode .mfa-gate-panel .form-label {
        color: var(--auth-panel-form-label);
    }

    html[data-theme="dark"] .mfa-gate-footnote,
    .dark-mode .mfa-gate-footnote {
        color: var(--auth-footnote);
    }

    html[data-theme="dark"] .mfa-gate-status-badge--off,
    .dark-mode .mfa-gate-status-badge--off {
        color: var(--auth-status-badge-off);
        background: var(--auth-status-badge-off-bg);
        border-color: var(--auth-status-badge-off-edge);
    }

    html[data-theme="dark"] .mfa-gate-status-badge--on,
    .dark-mode .mfa-gate-status-badge--on {
        color: var(--auth-status-badge-on);
        background: var(--auth-status-badge-on-bg);
        border-color: var(--auth-status-badge-on-edge);
    }

    html[data-theme="dark"] .mfa-gate-card .admin-mfa-card,
    .dark-mode .mfa-gate-card .admin-mfa-card {
        background: var(--auth-mfa-card-bg);
        border-color: rgba(148, 163, 184, 0.26);
    }

    html[data-theme="dark"] .mfa-gate-card .admin-mfa-card-label,
    .dark-mode .mfa-gate-card .admin-mfa-card-label {
        color: var(--auth-mfa-card-label);
    }

    html[data-theme="dark"] .mfa-gate-card .login-notice,
    .dark-mode .mfa-gate-card .login-notice {
        box-shadow: none;
    }

    html[data-theme="dark"] .mfa-gate-card .login-notice__title,
    .dark-mode .mfa-gate-card .login-notice__title {
        color: var(--auth-notice-title);
    }

    html[data-theme="dark"] .mfa-gate-card .login-notice__copy,
    .dark-mode .mfa-gate-card .login-notice__copy {
        color: var(--auth-notice-copy);
    }

    html[data-theme="dark"] .mfa-gate-card .login-notice--danger,
    .dark-mode .mfa-gate-card .login-notice--danger {
        background: linear-gradient(135deg, var(--auth-notice-danger-bg-1), var(--auth-notice-danger-bg-2));
        border-color: var(--auth-notice-danger-edge);
    }

    html[data-theme="dark"] .mfa-gate-card .login-notice--danger .login-notice__icon,
    .dark-mode .mfa-gate-card .login-notice--danger .login-notice__icon {
        background: var(--auth-notice-icon-bg);
        color: var(--auth-notice-icon);
    }

    html[data-theme="dark"] .mfa-gate-card .login-notice--success,
    .dark-mode .mfa-gate-card .login-notice--success {
        background: linear-gradient(135deg, var(--auth-notice-success-bg-1), var(--auth-notice-success-bg-2));
        border-color: var(--auth-notice-success-edge);
    }

    html[data-theme="dark"] .mfa-gate-card .login-notice--success .login-notice__icon,
    .dark-mode .mfa-gate-card .login-notice--success .login-notice__icon {
        background: var(--auth-notice-icon-bg-2);
        color: var(--auth-notice-icon-2);
    }

    html[data-theme="dark"] .mfa-gate-card .login-notice--info,
    .dark-mode .mfa-gate-card .login-notice--info {
        background: linear-gradient(135deg, var(--auth-notice-info-bg-1), var(--auth-notice-info-bg-2));
        border-color: var(--auth-notice-info-edge);
    }

    html[data-theme="dark"] .mfa-gate-card .login-notice--info .login-notice__icon,
    .dark-mode .mfa-gate-card .login-notice--info .login-notice__icon {
        background: var(--auth-notice-icon-bg-3);
        color: var(--auth-notice-icon-3);
    }

/* ── from PasswordReset.razor ────────────────────────────────────────── */
.password-reset-card {
        max-width: 58rem;
    }

    .password-reset-title {
        font-size: clamp(1.65rem, 2.5vw, 2rem);
    }

    .password-reset-copy {
        max-width: 26rem;
        color: var(--auth-copy);
    }

    .password-reset-form {
        width: min(100%, 70%);
    }

    .password-reset-card .login-field-label {
        font-weight: 700;
        color: var(--auth-field-label);
    }

    .password-reset-card .form-control::placeholder {
        color: var(--auth-card-form-control-placeholder);
        opacity: 1;
    }

    .password-reset-card .validation-message,
    .password-reset-card .validation-errors,
    .password-reset-card .text-danger {
        color: var(--auth-text-danger);
    }

    .password-reset-card .login-secondary-link {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--auth-secondary-link);
        text-decoration: none;
    }

    .password-reset-card .login-secondary-link:hover,
    .password-reset-card .login-secondary-link:focus-visible {
        color: var(--auth-secondary-link-hover);
        text-decoration: underline;
    }

    .password-reset-card .login-notice {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.85rem;
        align-items: start;
        border: 1px solid transparent;
        border-radius: 1rem;
        padding: 0.95rem 1rem;
        box-shadow: 0 14px 30px var(--auth-notice-shadow);
    }

    .password-reset-card .login-notice__icon {
        width: 2.2rem;
        height: 2.2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font-size: 1rem;
    }

    .password-reset-card .login-notice__title {
        font-weight: 700;
        color: var(--auth-notice-title);
        margin-bottom: 0.2rem;
    }

    .password-reset-card .login-notice__copy {
        color: var(--auth-notice-copy);
        line-height: 1.5;
    }

    .password-reset-card .login-notice--danger {
        background: linear-gradient(135deg, var(--auth-notice-danger-bg-1), var(--auth-notice-danger-bg-2));
        border-color: var(--auth-notice-danger-edge);
    }

    .password-reset-card .login-notice--danger .login-notice__icon {
        background: var(--auth-notice-icon-bg);
        color: var(--auth-notice-icon);
    }

    .password-reset-card .login-notice--success {
        background: linear-gradient(135deg, var(--auth-notice-success-bg-1), var(--auth-notice-success-bg-2));
        border-color: var(--auth-notice-success-edge);
    }

    .password-reset-card .login-notice--success .login-notice__icon {
        background: var(--auth-notice-icon-bg-2);
        color: var(--auth-notice-icon-2);
    }

    .password-reset-secondary-action {
        min-height: 2.85rem;
        min-width: 9.25rem;
        border-radius: 14px;
        background: var(--auth-secondary-action-bg);
        box-shadow: none;
        color: var(--auth-secondary-action);
    }

    .password-reset-secondary-action:hover,
    .password-reset-secondary-action:focus-visible {
        box-shadow: none;
        filter: none;
    }

    .password-reset-status {
        align-self: center;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: .82rem;
        color: var(--auth-status);
        font-weight: 700;
        border-radius: 999px;
        padding: 0.35rem 0.62rem;
        border: 1px solid var(--auth-status-edge);
        background: var(--auth-status-bg);
    }

    .password-reset-status--info {
        color: var(--auth-status-info);
        border-color: var(--auth-status-info-edge);
        background: var(--auth-status-info-bg);
    }

    .password-reset-status--success {
        color: var(--auth-status-success);
        border-color: var(--auth-status-success-edge);
        background: var(--auth-status-success-bg);
    }

    .password-reset-status--warning {
        color: var(--auth-status-warning);
        border-color: var(--auth-status-warning-edge);
        background: var(--auth-status-warning-bg);
    }

    .password-reset-status--danger {
        color: var(--auth-status-danger);
        border-color: var(--auth-status-danger-edge);
        background: var(--auth-status-danger-bg);
    }

    .password-reset-complete {
        width: min(100%, 70%);
        margin: 0 auto;
        text-align: center;
        color: var(--auth-complete);
    }

    html[data-theme="dark"] .password-reset-card .login-field-label,
    .dark-mode .password-reset-card .login-field-label {
        color: var(--auth-field-label);
    }

    html[data-theme="dark"] .password-reset-copy,
    .dark-mode .password-reset-copy {
        color: var(--auth-copy);
    }

    html[data-theme="dark"] .password-reset-card .form-control::placeholder,
    .dark-mode .password-reset-card .form-control::placeholder {
        color: var(--auth-card-form-control-placeholder);
        opacity: 1;
    }

    html[data-theme="dark"] .password-reset-card .validation-message,
    html[data-theme="dark"] .password-reset-card .validation-errors,
    html[data-theme="dark"] .password-reset-card .text-danger,
    .dark-mode .password-reset-card .validation-message,
    .dark-mode .password-reset-card .validation-errors,
    .dark-mode .password-reset-card .text-danger {
        color: var(--auth-text-danger);
    }

    html[data-theme="dark"] .password-reset-card .login-secondary-link,
    .dark-mode .password-reset-card .login-secondary-link {
        color: var(--auth-secondary-link);
    }

    html[data-theme="dark"] .password-reset-card .login-secondary-link:hover,
    html[data-theme="dark"] .password-reset-card .login-secondary-link:focus-visible,
    .dark-mode .password-reset-card .login-secondary-link:hover,
    .dark-mode .password-reset-card .login-secondary-link:focus-visible {
        color: var(--auth-secondary-link-hover);
    }

    html[data-theme="dark"] .password-reset-card .login-notice,
    .dark-mode .password-reset-card .login-notice {
        box-shadow: none;
    }

    html[data-theme="dark"] .password-reset-card .login-notice__title,
    .dark-mode .password-reset-card .login-notice__title {
        color: var(--auth-notice-title);
    }

    html[data-theme="dark"] .password-reset-card .login-notice__copy,
    .dark-mode .password-reset-card .login-notice__copy {
        color: var(--auth-notice-copy);
    }

    html[data-theme="dark"] .password-reset-card .login-notice--danger,
    .dark-mode .password-reset-card .login-notice--danger {
        background: linear-gradient(135deg, var(--auth-notice-danger-bg-1), var(--auth-notice-danger-bg-2));
        border-color: var(--auth-notice-danger-edge);
    }

    html[data-theme="dark"] .password-reset-card .login-notice--danger .login-notice__icon,
    .dark-mode .password-reset-card .login-notice--danger .login-notice__icon {
        background: var(--auth-notice-icon-bg);
        color: var(--auth-notice-icon);
    }

    html[data-theme="dark"] .password-reset-card .login-notice--success,
    .dark-mode .password-reset-card .login-notice--success {
        background: linear-gradient(135deg, var(--auth-notice-success-bg-1), var(--auth-notice-success-bg-2));
        border-color: var(--auth-notice-success-edge);
    }

    html[data-theme="dark"] .password-reset-card .login-notice--success .login-notice__icon,
    .dark-mode .password-reset-card .login-notice--success .login-notice__icon {
        background: var(--auth-notice-icon-bg-2);
        color: var(--auth-notice-icon-2);
    }

    html[data-theme="dark"] .password-reset-secondary-action,
    .dark-mode .password-reset-secondary-action {
        background: var(--auth-secondary-action-bg);
        color: var(--auth-secondary-action);
    }

    html[data-theme="dark"] .password-reset-status,
    .dark-mode .password-reset-status {
        color: var(--auth-status);
        border-color: rgba(148, 163, 184, 0.36);
        background: var(--auth-status-bg);
    }

    html[data-theme="dark"] .password-reset-status--info,
    .dark-mode .password-reset-status--info {
        color: var(--auth-status-info);
        border-color: var(--auth-status-info-edge);
        background: var(--auth-status-info-bg);
    }

    html[data-theme="dark"] .password-reset-status--success,
    .dark-mode .password-reset-status--success {
        color: var(--auth-status-success);
        border-color: var(--auth-status-success-edge);
        background: var(--auth-status-success-bg);
    }

    html[data-theme="dark"] .password-reset-status--warning,
    .dark-mode .password-reset-status--warning {
        color: var(--auth-status-warning);
        border-color: var(--auth-status-warning-edge);
        background: var(--auth-status-warning-bg);
    }

    html[data-theme="dark"] .password-reset-status--danger,
    .dark-mode .password-reset-status--danger {
        color: var(--auth-status-danger);
        border-color: var(--auth-status-danger-edge);
        background: var(--auth-status-danger-bg);
    }

    html[data-theme="dark"] .password-reset-complete,
    .dark-mode .password-reset-complete {
        color: var(--auth-complete);
    }

/* ── from PasswordUpdate.razor ────────────────────────────────────────── */
/* #audit-26 — 7 rules that used to live here were ALSO declared in
       isolated-fallback.css, and this copy won on document order, so editing the file
       the styling policy names did nothing. They live there now, in the section at the
       end. Everything below is declared HERE only — do not re-add a global copy. */

    .password-update-page {
        display: flex;
        justify-content: center;
    }

    .password-update-panel {
        width: min(100%, 34rem);
    }

    .password-update-label {
        font-weight: 600;
        color: var(--auth-label);
    }

    .password-update-form-shell {
        border-radius: 1rem;
        border: 1px solid var(--auth-form-shell-edge);
        background: var(--auth-form-shell-bg);
        padding: 0.85rem;
        margin-bottom: 0.85rem;
    }

    .password-update-notice {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.85rem;
        align-items: start;
        border-radius: 1rem;
        border: 1px solid transparent;
        box-shadow: 0 14px 30px var(--auth-notice-shadow);
        padding: 0.95rem 1rem;
    }

    .password-update-notice__icon {
        width: 2.2rem;
        height: 2.2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font-size: 1rem;
    }

    .password-update-notice__title {
        color: var(--auth-notice-title);
        font-weight: 700;
        margin-bottom: 0.2rem;
    }

    .password-update-notice__copy {
        color: var(--auth-notice-copy);
        line-height: 1.5;
    }

    .password-update-notice--success {
        background: linear-gradient(135deg, var(--auth-notice-success-bg-1), var(--auth-notice-success-bg-2));
        border-color: var(--auth-notice-success-edge);
    }

    .password-update-notice--success .password-update-notice__icon {
        background: var(--auth-notice-icon-bg-2);
        color: var(--auth-notice-icon-2);
    }

    .password-update-notice--danger {
        background: linear-gradient(135deg, var(--auth-notice-danger-bg-1), var(--auth-notice-danger-bg-2));
        border-color: var(--auth-notice-danger-edge);
    }

    .password-update-notice--danger .password-update-notice__icon {
        background: var(--auth-notice-icon-bg);
        color: var(--auth-notice-icon);
    }

    .password-update-notice--info {
        background: linear-gradient(135deg, var(--auth-notice-info-bg-1), var(--auth-notice-info-bg-2));
        border-color: var(--auth-notice-info-edge);
    }

    .password-update-notice--info .password-update-notice__icon {
        background: var(--auth-notice-icon-bg-3);
        color: var(--auth-notice-icon-3);
    }

    .password-update-actions {
        display: flex;
        justify-content: center;
    }

    .password-update-submit {
        min-width: 13rem;
        border-radius: 999px;
        padding: 0.8rem 1.6rem;
        font-weight: 700;
        background: linear-gradient(135deg, var(--auth-submit-bg-1), var(--auth-submit-bg-2));
        border: none;
        box-shadow: 0 16px 32px var(--auth-submit-shadow);
    }

    .password-update-submit:hover:not(:disabled),
    .password-update-submit:focus-visible:not(:disabled) {
        background: linear-gradient(135deg, var(--auth-submit-bg-hover-1), var(--auth-submit-bg-hover-2));
    }

    .password-update-highlights {
        margin-top: 0.75rem;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.65rem;
        font-size: 0.82rem;
        color: var(--auth-highlights);
    }

    .password-update-highlights span {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        background: var(--auth-highlights-bg);
        padding: 0.35rem 0.65rem;
    }

    .password-update-highlights i {
        color: var(--auth-highlights-2);
    }

    .password-update-switch {
        margin-top: 1rem;
        padding-top: 0.85rem;
        border-top: 1px solid var(--auth-switch-edge-top);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.88rem;
    }

    .password-update-switch__label {
        color: var(--auth-switch-label);
    }

    /* Let the button stay the flex item so the switch row layout is unchanged. */
    .password-update-switch__form {
        display: contents;
    }

    .password-update-switch__link {
        border: none;
        background: none;
        padding: 0;
        font-weight: 600;
        color: var(--auth-switch-link);
        text-decoration: underline;
        cursor: pointer;
    }

    .password-update-switch__link:hover:not(:disabled),
    .password-update-switch__link:focus-visible:not(:disabled) {
        color: var(--auth-switch-link-hover);
    }

    .password-update-switch__link:disabled {
        color: var(--auth-switch-link-disabled);
        cursor: not-allowed;
        text-decoration: none;
    }

    html[data-theme="dark"] .password-update-card {
        background: rgba(15, 23, 42, 0.82);
        border-color: rgba(148, 163, 184, 0.2);
        box-shadow: 0 32px 60px rgba(2, 6, 23, 0.5);
    }

    html[data-theme="dark"] .password-update-title,
    html[data-theme="dark"] .password-update-label {
        color: var(--auth-label);
    }

    html[data-theme="dark"] .password-update-copy {
        color: #cbd5e1;
    }

    html[data-theme="dark"] .password-update-shield {
        background: rgba(45, 212, 191, 0.18);
        color: #99f6e4;
    }

    html[data-theme="dark"] .password-update-form .form-control {
        background: rgba(15, 23, 42, 0.9);
        color: #e2e8f0;
        border-color: rgba(148, 163, 184, 0.3);
    }

    html[data-theme="dark"] .password-update-form-shell {
        border-color: rgba(148, 163, 184, 0.3);
        background: var(--auth-form-shell-bg);
    }

    html[data-theme="dark"] .password-update-notice {
        box-shadow: none;
    }

    html[data-theme="dark"] .password-update-notice__title {
        color: var(--auth-notice-title);
    }

    html[data-theme="dark"] .password-update-notice__copy {
        color: var(--auth-notice-copy);
    }

    html[data-theme="dark"] .password-update-notice--success {
        background: linear-gradient(135deg, var(--auth-notice-success-bg-1), var(--auth-notice-success-bg-2));
        border-color: var(--auth-notice-success-edge);
    }

    html[data-theme="dark"] .password-update-notice--success .password-update-notice__icon {
        background: var(--auth-notice-icon-bg-2);
        color: var(--auth-notice-icon-2);
    }

    html[data-theme="dark"] .password-update-notice--danger {
        background: linear-gradient(135deg, var(--auth-notice-danger-bg-1), var(--auth-notice-danger-bg-2));
        border-color: var(--auth-notice-danger-edge);
    }

    html[data-theme="dark"] .password-update-notice--danger .password-update-notice__icon {
        background: var(--auth-notice-icon-bg);
        color: var(--auth-notice-icon);
    }

    html[data-theme="dark"] .password-update-notice--info {
        background: linear-gradient(135deg, var(--auth-notice-info-bg-1), var(--auth-notice-info-bg-2));
        border-color: var(--auth-notice-info-edge);
    }

    html[data-theme="dark"] .password-update-notice--info .password-update-notice__icon {
        background: var(--auth-notice-icon-bg-3);
        color: var(--auth-notice-icon-3);
    }

    html[data-theme="dark"] .password-update-highlights {
        color: var(--auth-highlights);
    }

    html[data-theme="dark"] .password-update-highlights span {
        background: var(--auth-highlights-bg);
    }

    html[data-theme="dark"] .password-update-switch {
        border-top-color: rgba(148, 163, 184, 0.3);
    }

    html[data-theme="dark"] .password-update-switch__label {
        color: var(--auth-switch-label);
    }

    html[data-theme="dark"] .password-update-switch__link {
        color: var(--auth-switch-link);
    }

    html[data-theme="dark"] .password-update-switch__link:hover:not(:disabled),
    html[data-theme="dark"] .password-update-switch__link:focus-visible:not(:disabled) {
        color: var(--auth-switch-link-hover);
    }

    html[data-theme="dark"] .password-update-submit {
        box-shadow: none;
    }

/* ── from Logout.razor ────────────────────────────────────────── */
.logout-card {
        max-width: 30rem;
    }

    .logout-icon {
        width: 2.6rem;
        height: 2.6rem;
        margin: 0 auto 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--auth-icon-bg);
        color: var(--auth-icon);
        font-size: 1.2rem;
    }

    .logout-copy {
        max-width: 24rem;
    }

    .logout-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.6rem;
        margin-top: 0.5rem;
    }

    .logout-confirm {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.85rem;
        padding: 0 1.6rem;
        border: none;
        border-radius: 16px;
        font-weight: 700;
        color: var(--auth-confirm);
        background: linear-gradient(135deg, var(--auth-confirm-bg-1), var(--auth-confirm-bg-2));
        box-shadow: 0 16px 30px var(--auth-confirm-shadow);
        transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }

    .logout-confirm:hover,
    .logout-confirm:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 20px 36px var(--auth-confirm-shadow-hover);
        color: var(--auth-confirm-hover);
    }

    .logout-cancel {
        display: inline-flex;
        align-items: center;
        min-height: 2.85rem;
        padding: 0 1.4rem;
        border-radius: 16px;
        font-weight: 600;
        color: var(--auth-cancel);
        text-decoration: none;
        background: var(--auth-cancel-bg);
        border: 1px solid var(--auth-cancel-edge);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }

    /* Cancel had only a colour swap - no lift, no shadow, no easing - so beside Logout it read as
       unresponsive. It now moves the same way, with a smaller shadow in its own slate palette so
       Logout stays the primary action. */
    .logout-cancel:hover,
    .logout-cancel:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px var(--auth-cancel-shadow-hover);
        background: var(--auth-cancel-bg-hover);
        color: var(--auth-cancel-hover);
    }

    html[data-theme="dark"] .logout-icon,
    .dark-mode .logout-icon {
        background: var(--auth-icon-bg);
        color: var(--auth-icon);
    }

    html[data-theme="dark"] .logout-confirm,
    .dark-mode .logout-confirm {
        box-shadow: none;
    }

    /* The rule above is (0,2,1) and outranks .logout-confirm:hover (0,2,0), so without this the
       dark button never got its hover shadow - it lifted 2px over nothing. The glow is only
       suppressed at REST in dark; on hover it returns, in the lighter red the dark palette uses. */
    html[data-theme="dark"] .logout-confirm:hover,
    html[data-theme="dark"] .logout-confirm:focus-visible,
    .dark-mode .logout-confirm:hover,
    .dark-mode .logout-confirm:focus-visible {
        box-shadow: 0 20px 36px var(--auth-confirm-shadow-hover);
    }

    html[data-theme="dark"] .logout-cancel,
    .dark-mode .logout-cancel {
        color: var(--auth-cancel);
        background: var(--auth-cancel-bg);
        border-color: rgba(148, 163, 184, 0.34);
    }

    html[data-theme="dark"] .logout-cancel:hover,
    html[data-theme="dark"] .logout-cancel:focus-visible,
    .dark-mode .logout-cancel:hover,
    .dark-mode .logout-cancel:focus-visible {
        color: var(--auth-cancel-hover);
        background: var(--auth-cancel-bg-hover);
        box-shadow: 0 12px 24px var(--auth-cancel-shadow-hover);
    }