/* auth.css - split-pane sign-in (ported from btshrms layouts/auth.php) */
/* ═════════════════════════════════════════════════════════════════
   Enterprise auth - split-pane sign-in.

   Left pane:   dark surface with a slow-drifting aurora gradient,
                fine grid overlay, faint noise grain, and the
                tenant brand (logo + name + corner mark). Pure
                visual identity - no marketing copy.

   Right pane:  white form surface with refined typography and
                polished input + button styling.

   Mobile:      stacks vertically (compact brand strip on top,
                form below).
   ════════════════════════════════════════════════════════════ */
:root {
    --c-bg:            #f4f6fb;
    --c-surface:       #ffffff;
    --c-text:          #0f172a;
    --c-text-muted:    #64748b;
    --c-text-faint:    #94a3b8;
    --c-border:        #e2e8f0;
    --c-input-bg:      #ffffff;
    --c-accent:        #1560e0;
    --c-accent-hover:  #104fc0;
    --c-accent-ring:   rgba(21, 96, 224, 0.18);
    --c-success:       #10b981;
}
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02','cv03','cv04','cv11';
    overflow-x: hidden;
}

body.login-page,
body.hold-transition {
    background: var(--c-bg);
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

/* ═══════════════ Brand pane (left) ════════════════════════════ */
.brand-pane {
    position: relative;
    overflow: hidden;
    background: #050816;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 56px 64px;
}
/* Aurora - 4 large soft colour blobs that drift very slowly.
   Punched-up opacity so the colour actually reads on the dark
   background rather than disappearing into it. */
.brand-pane::before {
    content: '';
    position: absolute; inset: -20%;
    background:
        radial-gradient(circle at 18% 28%, rgba(42, 82, 152, 0.90), transparent 42%),
        radial-gradient(circle at 82% 18%, rgba(21, 96, 224, 0.72), transparent 40%),
        radial-gradient(circle at 72% 82%, rgba(124, 58, 237, 0.40), transparent 44%),
        radial-gradient(circle at 22% 88%, rgba(26, 47, 110, 0.85), transparent 40%);
    filter: blur(50px);
    animation: aurora-drift 28s ease-in-out infinite alternate;
    z-index: 0;
}
/* Radial vignette so the centre breathes and the aurora reads as
   depth rather than flat colour. Grid overlay removed - one
   decorative element is more confident than two. */
.brand-pane::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(5,8,22,0.7) 100%);
    z-index: 1;
    pointer-events: none;
}
@keyframes aurora-drift {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(-3%, 2%, 0) rotate(2deg); }
    100% { transform: translate3d(2%, -3%, 0) rotate(-2deg); }
}

.brand-pane > * { position: relative; z-index: 2; }

/* Top product wordmark - small, all-caps, identifies the SaaS
   product (vs. the tenant company which is the hero). */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.brand-mark .mark-dot {
    width: 8px; height: 8px;
    border-radius: 2px;
    background: linear-gradient(135deg, #1a6ef5, #7c3aed);
    box-shadow: 0 0 12px rgba(129, 140, 248, 0.6);
}

/* Big centre hero: large logo plate + tenant name + product subtitle. */
.brand-hero {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
    gap: 22px;
}
.brand-hero .name-block { display: flex; flex-direction: column; gap: 8px; }
.brand-hero .subtitle {
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.3px;
    margin: 0;
}
.brand-hero-plate {
    width: 104px; height: 104px;
    border-radius: 24px;
    background: linear-gradient(155deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92));
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.20),
        0 10px 30px rgba(0,0,0,0.35),
        0 30px 60px rgba(21, 96, 224, 0.25),
        inset 0 1px 0 rgba(255,255,255,1);
}
.brand-hero-plate img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.brand-hero-plate .fallback {
    font-size: 34px;
    font-weight: 800;
    color: var(--c-accent);
    letter-spacing: -1.5px;
}
/* Hero heading - sized to keep long company names on 1–2 lines.
   Uses a fluid clamp() bounded so even very long names look
   dignified rather than overwhelming. */
.brand-hero h1 {
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0;
    color: #fff;
    max-width: 380px;
    text-wrap: balance;
}
.brand-hero .accent-bar {
    height: 3px; width: 48px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0ea5e9, #1a6ef5 50%, #7c3aed);
}

/* Bottom row: faint copyright. Fake status pill removed - we
   weren't actually monitoring uptime. */
.brand-foot {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.1px;
}

/* ═══════════════ Form pane (right) ════════════════════════════ */
.form-pane {
    background: var(--c-surface);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 48px;
    overflow-y: auto;
    min-height: 100vh;
}
/* Very subtle radial corner highlights - keep right pane from feeling sterile */
.form-pane::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 600px 400px at 100% 0%, rgba(29,95,191,0.05), transparent 60%),
        radial-gradient(ellipse 500px 400px at 0% 100%, rgba(124,58,237,0.05), transparent 60%);
    pointer-events: none;
}
.form-pane > * { position: relative; }

.login-box {
    width: 100%;
    max-width: 380px;
}
/* Strip the card chrome - the form floats on the white pane directly. */
.card.login-card-body,
.login-box > .card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.card.login-card-body .card-body { padding: 0 !important; }

/* Tiny eyebrow above the welcome heading */
.form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--c-accent-ring);
    color: var(--c-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.form-eyebrow .pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-ring);
}

/* Headings */
.sign-in-label,
.login-logo {
    display: block;
    text-align: left;
    color: var(--c-text);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.1;
    margin: 0 0 10px;
    text-transform: none;
}
.sign-in-label::before, .sign-in-label::after { display: none; }
.login-logo a { color: inherit; text-decoration: none; font-weight: 700; }
.auth-subtitle,
.login-box-msg {
    text-align: left;
    font-size: 14.5px;
    color: var(--c-text-muted);
    font-weight: 400;
    line-height: 1.5;
    padding: 0;
    margin: 0 0 28px;
}
.brand-logo-wrap { display: none; }

/* ── Form fields ────────────────────────────────────────────── */
.login-card-body .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    position: relative;
    margin-bottom: 14px;
    border-radius: 10px;
    background: var(--c-input-bg);
    border: 1.5px solid var(--c-border);
    transition: border-color .15s, box-shadow .15s;
}
.login-card-body .input-group:hover { border-color: #cbd5e1; }
.login-card-body .input-group:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-ring);
}
.login-card-body .input-group > .form-control {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    color: var(--c-text) !important;
    height: 50px;
    font-size: 14.5px;
    font-weight: 500;
    padding: 0 14px;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif;
    outline: none !important;
    box-shadow: none !important;
}
.login-card-body .input-group > .form-control::placeholder { color: var(--c-text-faint); font-weight: 400; }
.login-card-body .input-group-append,
.login-card-body .input-group-prepend { display: flex; }
.login-card-body .input-group-prepend { order: -1; }
.login-card-body .input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--c-text-faint);
    height: 50px;
    padding: 0 14px;
    font-size: 14px;
    display: flex; align-items: center;
}
.login-card-body .input-group:focus-within .input-group-text { color: var(--c-accent); }
.login-card-body .form-group { margin-bottom: 14px; }
.login-card-body .form-group > label {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--c-text); margin: 0 0 6px;
}

/* ── Primary buttons ───────────────────────────────────────── */
.btn-signin,
.login-card-body .btn.btn-primary,
.login-card-body .btn.btn-block.btn-primary {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    margin-top: 8px;
    background: linear-gradient(135deg, #1a6ef5 0%, #1560e0 45%, #5b47e8 100%) !important;
    border: 1px solid #16274d !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 14.5px;
    font-weight: 600;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer;
    box-shadow:
        0 1px 2px rgba(26, 47, 110, 0.20),
        0 8px 16px rgba(26, 47, 110, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.18);
    transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
    position: relative;
    overflow: hidden;
}
.btn-signin:hover,
.login-card-body .btn.btn-primary:hover {
    background: linear-gradient(135deg, #1560e0 0%, #104fc0 45%, #4c3bd6 100%) !important;
    color: #fff !important;
    box-shadow:
        0 1px 2px rgba(26, 47, 110, 0.22),
        0 12px 24px rgba(26, 47, 110, 0.36),
        inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-signin:active,
.login-card-body .btn.btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(26, 47, 110, 0.20);
}
.btn-signin i { font-size: 13px; }

/* ── Links ─────────────────────────────────────────────────── */
.forgot-link, .login-card-body a {
    color: var(--c-accent);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s;
}
.forgot-link:hover, .login-card-body a:hover { color: var(--c-accent-hover); }

.login-card-body .text-center.mt-4 {
    text-align: center !important;
    margin-top: 20px !important;
    font-size: 13.5px;
}

/* ── 2FA method cards (setup hub + choose screens) ─────────── */
.mfa-method-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--c-input-bg);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    color: var(--c-text);
    transition: border-color .15s, box-shadow .15s;
}
.mfa-method-card:hover { border-color: #cbd5e1; }
.mfa-method-card.enrolled {
    border-color: color-mix(in srgb, var(--c-success) 45%, var(--c-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 10%, transparent);
}
.mfa-method-card .mfa-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--c-accent-ring);
    color: var(--c-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.mfa-method-card .mfa-icon.is-fido {
    background: rgba(16, 185, 129, 0.10);
    color: var(--c-success);
}
.mfa-method-card .mfa-body { flex: 1; min-width: 0; }
.mfa-method-card .mfa-title-row {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.mfa-method-card .mfa-title {
    font-size: 14px; font-weight: 600; color: var(--c-text);
}
.mfa-method-card .mfa-desc {
    font-size: 12.5px; color: var(--c-text-muted);
    margin-top: 2px; line-height: 1.4;
}
.mfa-method-card .mfa-actions { margin-left: 8px; flex-shrink: 0; }

.mfa-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
    letter-spacing: 0.2px;
}
.mfa-badge.is-enrolled {
    background: #d1fae5; color: #065f46;
}
.mfa-badge.is-pending {
    background: #f1f5f9; color: var(--c-text-muted);
    font-weight: 500;
}

/* Clickable variant of .mfa-method-card - used on the "choose method"
   screens (enroll-time and verify-time). Whole card is the click
   target (an <a> or <button>); chevron on the right hints at it. */
.mfa-select-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--c-input-bg);
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    color: var(--c-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: border-color .15s, background .15s, transform .08s;
}
.mfa-select-card:hover {
    border-color: var(--c-accent);
    background: #fff;
    color: var(--c-text);
    text-decoration: none;
}
.mfa-select-card:active { transform: translateY(1px); }
.mfa-select-card.is-preferred {
    border-color: var(--c-accent);
    background: var(--c-accent-ring);
}
.mfa-select-card .mfa-icon {
    width: 40px; height: 40px;
    border-radius: 9px;
    background: var(--c-accent-ring);
    color: var(--c-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.mfa-select-card .mfa-icon.is-fido {
    background: rgba(16, 185, 129, 0.10);
    color: var(--c-success);
}
.mfa-select-card .mfa-body { flex: 1; min-width: 0; }
.mfa-select-card .mfa-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 600; color: var(--c-text);
}
.mfa-select-card .mfa-desc {
    font-size: 12.5px; color: var(--c-text-muted);
    margin-top: 2px; line-height: 1.4;
}
.mfa-select-card .mfa-chevron {
    color: var(--c-text-faint);
    font-size: 12px;
}

/* FIDO ceremony page - big fingerprint icon + description block */
.fido-prompt {
    text-align: center;
    padding: 22px 8px 18px;
}
.fido-prompt .fido-ico {
    font-size: 52px;
    color: var(--c-accent);
    margin-bottom: 12px;
    opacity: 0.9;
}
.fido-prompt .fido-text {
    font-size: 13.5px;
    color: var(--c-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* Secondary button used in MFA cards (Set up / Remove) */
.btn-mfa {
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
}
.btn-mfa.is-primary {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}
.btn-mfa.is-primary:hover {
    background: var(--c-accent-hover);
    border-color: var(--c-accent-hover);
}
.btn-mfa.is-danger {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}
.btn-mfa.is-danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

/* ── Numbered step rows (2FA enrollment flow) ──────────────── */
.auth-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
}
.auth-step + .auth-step { border-top: 1px solid var(--c-border); }
.auth-step-num {
    flex: 0 0 28px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--c-accent-ring);
    color: var(--c-accent);
    font-size: 12.5px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.auth-step-body { flex: 1; min-width: 0; }
.auth-step-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 4px;
}
.auth-step-desc {
    font-size: 13px;
    color: var(--c-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* QR + manual key, side-by-side. Compact so the whole 2FA setup
   fits in a single viewport without scrolling on most laptops. */
.qr-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    background: var(--c-input-bg);
    border: 1px solid var(--c-border);
    border-radius: 12px;
}
.qr-frame {
    padding: 8px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    flex-shrink: 0;
    line-height: 0;
}
.qr-frame img { display: block; width: 140px; height: 140px; }
.qr-side { flex: 1; min-width: 0; }
.qr-side-label {
    font-size: 13px; font-weight: 600;
    color: var(--c-text); margin: 0 0 2px;
}
.qr-side-desc {
    font-size: 12px; color: var(--c-text-muted);
    margin: 0 0 8px; line-height: 1.4;
}

/* Manual entry secret - monospace block, selects-all on click */
.manual-secret {
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--c-text);
    letter-spacing: 1px;
    word-break: break-all;
    line-height: 1.5;
    user-select: all;
    cursor: text;
}
/* Same block, without the letter-spacing that suits a base32 key. */
.manual-account {
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--c-text);
    word-break: break-word;
    line-height: 1.5;
    user-select: all;
    cursor: text;
}
.manual-secret-label {
    display: block;
    font-size: 11.5px;
    color: var(--c-text-muted);
    margin-top: 10px;
    font-weight: 500;
}

/* Label above the OTP input. */
.otp-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    margin: 0 0 6px;
}

/* Centred 6-digit one-time-code input - tightened from previous
   version (height 48 not 56, letter-spacing 8 not 12) to keep the
   whole 2FA setup screen above the fold. */
.otp-input {
    width: 100%;
    height: 48px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 8px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    padding: 0 14px 0 22px;
    background: var(--c-input-bg);
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    color: var(--c-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.otp-input::placeholder {
    font-family: 'Inter', sans-serif;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    color: var(--c-text-faint);
}
.otp-input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-ring);
    background: #fff;
}

/* Inline link-style submit button - used for "Sign out and return
   to login" on 2FA screens where the user wants to abandon the
   flow. POST is required (CSRF) so it can't be a plain <a>. */
.btn-linklike {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--c-accent);
    font-weight: 500;
    cursor: pointer;
}
.btn-linklike:hover { color: var(--c-accent-hover); text-decoration: underline; }

/* Row of small secondary links centered below the primary form. */
.auth-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
    font-size: 13px;
}
.auth-nav-links .sep {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--c-border-strong);
}
.auth-nav-links a, .auth-nav-links .btn-linklike {
    font-size: 13px;
}

/* Helper text shown below a form (info/success/warning footnote) */
.auth-foothelp {
    margin-top: 12px;
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
}
.auth-foothelp.is-warn    { color: #b45309; }
.auth-foothelp.is-info    { color: var(--c-text-muted); }
.auth-foothelp.is-success { color: #047857; }

/* ── Trust footer ──────────────────────────────────────────── */
.form-foot {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--c-border);
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px;
    color: var(--c-text-faint);
}
.form-foot .secure { display: inline-flex; align-items: center; gap: 6px; }
.form-foot .secure i { color: var(--c-success); font-size: 11px; }

/* ── Alerts ────────────────────────────────────────────────── */
.login-card-body .alert {
    border-radius: 10px;
    font-size: 13px;
    padding: 11px 13px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    line-height: 1.45;
}
.login-card-body .alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.login-card-body .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.login-card-body .alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.login-card-body .close {
    color: inherit; opacity: 0.55;
    background: transparent; border: 0;
    font-size: 18px; line-height: 1;
    padding: 0 0 0 8px; cursor: pointer;
    float: right;
}
.login-card-body .close:hover { opacity: 1; }

/* ── Responsive: stack to single column on tablet / mobile ──── */
@media (max-width: 980px) {
    /* Drop the desktop 2-pane grid and the height stretching that
       comes with it. On mobile, the brand pane is a compact header
       and the form pane sits directly below - both sized to their
       own content. Without these overrides the form would be
       vertically centered in a full-viewport pane, leaving a huge
       gap between the brand header and "Welcome back". */
    /* Fill the screen, but anchor the content to the top. Sizing both
       panes to their content (the previous `display:block; min-height:0`)
       removed the gap between the brand header and "Welcome back", but
       left the whole lower screen as bare page background below the white
       card. Flex column + a growing form pane keeps the content where it
       was and lets the white surface run to the bottom edge.
       100dvh, not 100vh: on iOS Safari 100vh is the height WITHOUT the
       browser chrome, so it overflows by the toolbar's height. */
    body.login-page,
    body.hold-transition {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
    }
    .brand-pane { flex: 0 0 auto; }
    .brand-pane {
        padding: 24px 24px 22px;
        min-height: 0;
    }
    /* Drop the radial vignette on mobile - without huge surrounding
       space it just looks like a dark blur over the brand. */
    .brand-pane::after { display: none; }
    .brand-pane::before { animation-duration: 40s; }

    .brand-mark { font-size: 11.5px; letter-spacing: 1.6px; }

    /* Horizontal layout on mobile: small logo plate + name beside it.
       Better use of limited vertical real-estate than stacking. */
    .brand-hero {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        margin-top: 16px;
        flex: 0 0 auto;
    }
    .brand-hero-plate {
        width: 52px; height: 52px;
        border-radius: 13px;
        padding: 9px;
        box-shadow:
            0 1px 2px rgba(0,0,0,0.20),
            0 6px 14px rgba(0,0,0,0.28),
            inset 0 1px 0 rgba(255,255,255,1);
    }
    .brand-hero-plate .fallback { font-size: 18px; }
    .brand-hero .accent-bar { display: none; }
    .brand-hero .name-block { gap: 2px; }
    .brand-hero h1 {
        font-size: 16px;
        letter-spacing: -0.2px;
        line-height: 1.25;
        max-width: 100%;
    }
    .brand-hero .subtitle { font-size: 11.5px; }
    .brand-foot { display: none; }

    /* Form pane sized to content, anchored to the top. The min-height
       and centering used on desktop create the empty stretch on
       mobile - kill both. */
    .form-pane {
        flex: 1 1 auto;
        min-height: 0;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 26px 22px 28px;
        background: var(--c-surface);
    }
    .login-box { max-width: 100%; }
    .form-eyebrow { margin-bottom: 10px; }
    .sign-in-label { font-size: 26px; }
    .auth-subtitle { margin-bottom: 20px; }
    .form-foot { margin-top: 24px; padding-top: 16px; }
}
@media (max-width: 480px) {
    .brand-pane { padding: 20px 20px 18px; }
    .brand-hero { margin-top: 12px; gap: 12px; }
    .brand-hero-plate { width: 46px; height: 46px; border-radius: 11px; padding: 8px; }
    .brand-hero-plate .fallback { font-size: 16px; }
    .brand-hero h1 { font-size: 15px; }
    .brand-hero .subtitle { font-size: 11px; }
    .form-pane { padding: 22px 20px 24px; }
    .sign-in-label { font-size: 23px; }
    .auth-subtitle { font-size: 13.5px; margin-bottom: 18px; }

    /* QR row stacks vertically on phones so the QR doesn't get
       squeezed beside the manual key. */
    .qr-row { flex-direction: column; gap: 12px; }
    .qr-frame img { width: 160px; height: 160px; }
    .qr-side { width: 100%; }

    /* iOS Safari auto-zooms into any focused input whose computed
       font-size is < 16px. Our form inputs render at 14.5px on
       desktop, which triggers an annoying zoom-in (and the page
       never zooms back out). Bump to 16px just on small viewports
       so iPhones don't pinch in. The visual height of the input
       is preserved because it's driven by explicit height, not
       font-size. */
    .login-card-body .input-group > .form-control,
    .login-card-body .input-group-text,
    .otp-input {
        font-size: 16px !important;
    }
}

/* Standalone-mode (added to iOS home screen) niceties: respect
   the safe-area inset so content doesn't sit under the status
   bar / home indicator. */
@supports (padding: max(0px)) {
    body.login-page {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* ── BidGenie brand ───────────────────────────────────────────────── */
/* The logo is drawn for white, so the brand pane is a light surface with a soft
   blue / violet wash taken from the artwork; multiply removes the logo's own white. */
.brand-pane { background: #f5f7ff; color: #0f1e3d; border-right: 1px solid #e3e9f7; }
.brand-pane::before {
    background:
        radial-gradient(circle at 20% 22%, rgba(26, 110, 245, 0.16), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.12), transparent 42%),
        radial-gradient(circle at 70% 85%, rgba(124, 58, 237, 0.14), transparent 46%);
    filter: blur(40px);
}
.brand-pane::after { display: none; }
.brand-mark { color: #3b4a6b; }
.brand-mark .mark-dot { background: linear-gradient(135deg, #1a6ef5, #7c3aed); box-shadow: none; }
.brand-foot { color: #6b7894; }
.brand-hero { align-items: flex-start; gap: 10px; }
.brand-hero .subtitle { color: #4b5b7c; font-size: 15px; font-weight: 500; letter-spacing: .2px; margin-left: 6px; }
/* No z-index here: an isolated layer would blend the logo with nothing, leaving its white box. */
.brand-pane > .brand-hero { z-index: auto; }
.brand-logo-lockup { margin: 0; line-height: 0; }
.brand-logo-lockup img { mix-blend-mode: multiply; display: block; }
.brand-logo-lockup .lockup-square { width: min(380px, 75%); height: auto; }
.brand-logo-lockup .lockup-wide { display: none; height: 46px; width: auto; }
@media (max-width: 980px) {
    .brand-pane { border-right: 0; border-bottom: 1px solid #e3e9f7; }
    .brand-logo-lockup .lockup-square { display: none; }
    .brand-logo-lockup .lockup-wide { display: block; }
    .brand-hero { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 12px; }
    .brand-hero .subtitle { margin-left: 0; font-size: 12.5px; }
}