/* Verbatim copy of the <style> block in btshrms app/Views/layouts/auth.php
   (lines 51-922) and the install-button rules from auth/login.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:        #1d5fbf;
        --c-accent-hover:  #17509f;
        --c-accent-ring:   rgba(29, 95, 191, 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(29, 95, 191, 0.72), transparent 40%),
            radial-gradient(circle at 72% 82%, rgba(56, 189, 248, 0.42), 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, #60a5fa, #38bdf8);
        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(29, 95, 191, 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, #60a5fa, #38bdf8);
    }

    /* 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(56,189,248,0.04), 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(180deg, #2a5298 0%, #1a2f6e 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(180deg, #1d5fbf 0%, #16274d 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-left: 3px solid var(--c-success);
        padding-left: 14px;
    }
    .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));
        }
    }
.pwa-install-btn{
    display:flex;align-items:center;justify-content:center;gap:9px;
    width:100%;min-height:48px;margin-top:18px;
    background:var(--c-surface);color:var(--c-accent);
    border:1.5px solid var(--c-border);border-radius:12px;
    font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
    transition:border-color .15s, background .15s;
}
.pwa-install-btn:hover{border-color:var(--c-accent);background:#f7f9ff}
.pwa-install-btn[hidden]{display:none}

/* ---- btshrms partials/pwa-install.php: the iOS instruction sheet ---- */
.pwa-sheet[hidden]{display:none}
.pwa-sheet{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-end;justify-content:center}
.pwa-sheet-scrim{position:absolute;inset:0;background:rgba(10,16,32,.55)}
.pwa-sheet-body{
    position:relative;width:100%;max-width:520px;
    background:#fff;border-radius:20px 20px 0 0;
    padding:8px 22px calc(24px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 40px rgba(10,16,32,.28);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    animation:pwa-rise .26s cubic-bezier(.32,.72,0,1);
}
@keyframes pwa-rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pwa-sheet-grip{width:38px;height:4px;border-radius:999px;background:#dbe3f0;margin:6px auto 16px}
.pwa-sheet-title{margin:0 0 6px;font-size:19px;font-weight:800;color:#16233f;letter-spacing:-.3px}
.pwa-sheet-sub{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:#62708c}
.pwa-steps{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:14px}
.pwa-steps li{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:#16233f}
.pwa-step-n{
    flex:0 0 24px;width:24px;height:24px;border-radius:50%;
    background:#e8f1fe;color:#1d5fbf;font-size:12px;font-weight:800;
    display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.pwa-ios-share{
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:6px;background:#eef2f9;color:#1d5fbf;
    vertical-align:-6px;margin:0 2px;
}
.pwa-sheet-done{
    width:100%;min-height:48px;border:none;border-radius:12px;cursor:pointer;
    background:linear-gradient(125deg,#1a2f6e,#2a5298);color:#fff;
    font-size:15px;font-weight:700;font-family:inherit;
}
@media (prefers-reduced-motion: reduce){ .pwa-sheet-body{animation:none} }