/* =====================================================================
   login.css : pages d'authentification (site vitrine ET espace client / PWA)
   Connexion, inscription, mot de passe oublié / réinitialisation, 2FA.
   Refonte mobile-first (2026-09-26), alignée sur le design de l'espace
   client (2026-10-27, maquette proposition-connexion-v2) : mêmes jetons
   que assets/css/espace.css (orange de marque, gris neutres, panneau
   sombre de la barre latérale, boutons en dégradé de marque) et même
   thème sombre. Préfixe .lg-*, autonome (n'a pas besoin de espace.css).

   Principes :
   - mobile d'abord : une colonne, cibles tactiles >= 48px, champs en 16px
     (iOS ne zoome pas au focus), 100dvh (clavier virtuel), safe-areas ;
   - >= 1024px : panneau de marque à gauche ;
   - PWA installée (display-mode: standalone / navigator.standalone) : le
     panneau de marque n'est jamais affiché, même sur grand écran ;
   - thème : clair par défaut, sombre selon le système ou [data-theme].
   ===================================================================== */

:root {
    color-scheme: light;
    --lg-bg: #f6f6fa;
    --lg-surface: #ffffff;
    --lg-sunken: #f3f4f8;
    --lg-border: #ebebf2;
    --lg-border-strong: #dcdce8;
    --lg-ink: #14141f;
    --lg-muted: #6c6c84;
    --lg-light: #9a9ab0;
    --lg-accent: #c2570a;
    --lg-accent-soft: rgba(253, 114, 0, .08);
    --lg-ring: rgba(253, 114, 0, .22);
    --lg-grad: linear-gradient(135deg, #fcb045 0%, #fd1d1d 50%, #833ab4 100%); /* dégradé unique du site et de l'espace client */
    --lg-line: linear-gradient(90deg, #fcb045 0%, #fd1d1d 50%, #833ab4 100%);
    --lg-panel-a: #1a1a1a;
    --lg-panel-b: #141414;
    --lg-panel-c: #101010;
    --lg-err-bg: #fef2f2; --lg-err-bd: #fecaca; --lg-err-tx: #991b1b;
    --lg-ok-bg: #f0fdf4;  --lg-ok-bd: #bbf7d0;  --lg-ok-tx: #166534;
    --lg-warn-bg: #fffbeb; --lg-warn-bd: #fde68a; --lg-warn-tx: #92400e;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --lg-bg: #121212;
    --lg-surface: #1b1b1b;
    --lg-sunken: #232323;
    --lg-border: #2a2a2a;
    --lg-border-strong: #383838;
    --lg-ink: #f2f2f5;
    --lg-muted: #a0a0ae;
    --lg-light: #7c7c8a;
    --lg-accent: #ff9a4d;
    --lg-accent-soft: rgba(255, 154, 77, .12);
    --lg-ring: rgba(255, 154, 77, .3);
    --lg-panel-a: #0e0e0e;
    --lg-panel-b: #0b0b0b;
    --lg-panel-c: #090909;
    --lg-err-bg: rgba(220, 38, 38, .14); --lg-err-bd: rgba(220, 38, 38, .35); --lg-err-tx: #fca5a5;
    --lg-ok-bg: rgba(22, 163, 74, .14);  --lg-ok-bd: rgba(22, 163, 74, .35);  --lg-ok-tx: #86efac;
    --lg-warn-bg: rgba(245, 158, 11, .14); --lg-warn-bd: rgba(245, 158, 11, .35); --lg-warn-tx: #f5b457;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --lg-bg: #121212;
        --lg-surface: #1b1b1b;
        --lg-sunken: #232323;
        --lg-border: #2a2a2a;
        --lg-border-strong: #383838;
        --lg-ink: #f2f2f5;
        --lg-muted: #a0a0ae;
        --lg-light: #7c7c8a;
        --lg-accent: #ff9a4d;
        --lg-accent-soft: rgba(255, 154, 77, .12);
        --lg-ring: rgba(255, 154, 77, .3);
        --lg-panel-a: #0e0e0e;
        --lg-panel-b: #0b0b0b;
        --lg-panel-c: #090909;
        --lg-err-bg: rgba(220, 38, 38, .14); --lg-err-bd: rgba(220, 38, 38, .35); --lg-err-tx: #fca5a5;
        --lg-ok-bg: rgba(22, 163, 74, .14);  --lg-ok-bd: rgba(22, 163, 74, .35);  --lg-ok-tx: #86efac;
        --lg-warn-bg: rgba(245, 158, 11, .14); --lg-warn-bd: rgba(245, 158, 11, .35); --lg-warn-tx: #f5b457;
    }
}

body:has(.lg) { background: var(--lg-surface); }
body:has(.lg) .site-main { padding: 0; min-height: 100vh; min-height: 100dvh; background: transparent; }

.lg {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--lg-ink);
    -webkit-tap-highlight-color: transparent;
}
.lg *, .lg *::before, .lg *::after { box-sizing: border-box; }
.lg a, .lg button, .lg input, .lg label { touch-action: manipulation; }

/* ── Zone formulaire ──────────────────────────────────────────────── */
.lg-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding:
        max(28px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(28px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));
    background: var(--lg-surface);
    position: relative;
}
.lg-main::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--lg-grad);
}
.lg-card { width: 100%; max-width: 430px; }

.lg-logo { display: flex; justify-content: center; margin: 8px 0 28px; }
.lg-logo img { height: 40px; width: auto; }
:root[data-theme="dark"] .lg-logo img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lg-logo img { filter: brightness(0) invert(1); }
}

.lg-title {
    font-family: var(--font-head, 'Poppins', sans-serif);
    font-size: 25px; font-weight: 700; line-height: 1.2;
    letter-spacing: -.02em; margin: 0 0 6px; text-align: center;
}
.lg-sub {
    font-size: 15px; line-height: 1.5; color: var(--lg-muted);
    margin: 0 0 24px; text-align: center;
}

/* ── Messages ─────────────────────────────────────────────────────── */
.lg-alert {
    border-radius: 12px; padding: 12px 14px; margin: 0 0 16px;
    font-size: 14px; line-height: 1.45;
}
.lg-alert--error   { background: var(--lg-err-bg); border: 1px solid var(--lg-err-bd); color: var(--lg-err-tx); }
.lg-alert--success { background: var(--lg-ok-bg);  border: 1px solid var(--lg-ok-bd);  color: var(--lg-ok-tx); }

/* ── Google + séparateur ──────────────────────────────────────────── */
.lg-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 52px; padding: 0 20px;
    border: 1.5px solid var(--lg-border-strong); border-radius: 14px;
    background: var(--lg-surface); color: var(--lg-ink);
    font-size: 15px; font-weight: 600; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.lg-google:active { background: var(--lg-accent-soft); }
@media (hover: hover) { .lg-google:hover { border-color: var(--lg-accent); background: var(--lg-accent-soft); } }

.lg-divider {
    display: flex; align-items: center; gap: 12px; margin: 20px 0;
    font-size: 12px; color: var(--lg-light);
}
.lg-divider::before, .lg-divider::after { content: ''; flex: 1; height: 1px; background: var(--lg-border); }

/* ── Champs ───────────────────────────────────────────────────────── */
.lg-field { margin: 0 0 16px; }
.lg-label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 8px; color: var(--lg-ink); }
.lg-input {
    display: block; width: 100%; height: 52px; padding: 0 16px;
    font: inherit; font-size: 16px; /* 16px minimum : pas de zoom auto iOS */
    color: var(--lg-ink); background: var(--lg-surface);
    border: 1.5px solid var(--lg-border-strong); border-radius: 12px;
    -webkit-appearance: none; appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
.lg-input::placeholder { color: var(--lg-light); }
.lg-input:focus {
    outline: none; border-color: var(--lg-accent);
    box-shadow: 0 0 0 4px var(--lg-ring);
}
.lg-input.is-error { border-color: #dc2626; }
.lg-pw { position: relative; }
.lg-pw .lg-input { padding-right: 56px; }
.lg-pw-toggle {
    position: absolute; top: 4px; right: 4px; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px; background: transparent;
    color: var(--lg-muted); cursor: pointer;
}
.lg-pw-toggle:active { background: var(--lg-sunken); }
.lg-pw-toggle:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 0; }
.lg-pw-toggle .lg-eye-off { display: none; }
.lg-pw-toggle[aria-pressed="true"] .lg-eye { display: none; }
.lg-pw-toggle[aria-pressed="true"] .lg-eye-off { display: block; }

/* ── Se souvenir / mot de passe oublié ────────────────────────────── */
.lg-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 4px 0 20px;
}
.lg-check {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    font-size: 14px; color: var(--lg-ink); cursor: pointer; user-select: none;
}
.lg-check input { width: 22px; height: 22px; accent-color: #fd7200; flex-shrink: 0; margin: 0; }
.lg-link {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: 14px; font-weight: 600; color: var(--lg-accent); text-decoration: none;
}
.lg-link:active { opacity: .7; }

/* ── Bouton principal ─────────────────────────────────────────────── */
.lg-submit {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 54px; padding: 0 20px; border: 0; border-radius: 14px;
    background: var(--lg-grad);
    color: #fff; font-family: var(--font-head, 'Poppins', sans-serif);
    font-size: 16px; font-weight: 600; cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 17, 24, .16);
    transition: transform .12s, box-shadow .12s, filter .12s, opacity .12s;
}
@media (hover: hover) { .lg-submit:hover { filter: brightness(1.04); } }
.lg-submit:active { transform: scale(.985); }
.lg-submit:focus-visible { outline: 3px solid var(--lg-ring); outline-offset: 2px; }
.lg-submit[disabled] { cursor: default; opacity: .85; transform: none; }
.lg-submit.is-loading .lg-submit-label,
.lg-submit.is-loading .lg-submit-arrow { opacity: 0; }
.lg-submit.is-loading::after {
    content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.4); border-top-color: #fff;
    animation: lg-spin .7s linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }

.lg-switch {
    margin: 24px 0 0; text-align: center; font-size: 14px; color: var(--lg-muted);
}
.lg-switch a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
    font-weight: 600; color: var(--lg-accent); text-decoration: none;
}

/* ── Panneau de marque (>= 1024px, jamais en PWA) ─────────────────── */
.lg-brand { display: none; }

@media (min-width: 640px) {
    .lg-main { justify-content: center; background: var(--lg-bg); }
    .lg-card {
        background: var(--lg-surface); border: 1px solid var(--lg-border); border-radius: 20px;
        padding: 32px 32px 24px;
    }
}

@media (min-width: 1024px) {
    .lg-brand {
        display: flex; flex-direction: column; width: 480px; flex-shrink: 0;
        padding: 52px 56px; position: relative; overflow: hidden; color: #fff;
        background: linear-gradient(175deg, var(--lg-panel-a) 0%, var(--lg-panel-b) 65%, var(--lg-panel-c) 100%);
    }
    .lg-brand::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: var(--lg-line);
    }
    .lg-brand > * { position: relative; z-index: 1; }
    .lg-brand-logo { margin-bottom: 52px; }
    .lg-brand-logo img { height: 44px; width: auto; filter: brightness(0) invert(1); }
    .lg-brand-title {
        font-family: var(--font-head, 'Poppins', sans-serif); font-size: 33px; font-weight: 700;
        line-height: 1.15; letter-spacing: -.02em; color: #fff; margin: 0 0 14px;
    }
    .lg-brand-title .grad {
        background: var(--lg-grad);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .lg-brand-tag { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.72); margin: 0 0 30px; max-width: 360px; }
    .lg-props { display: flex; flex-direction: column; gap: 14px; margin: 0 0 34px; }
    .lg-prop { display: flex; align-items: flex-start; gap: 12px; }
    .lg-prop-icon {
        width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
        background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
        display: flex; align-items: center; justify-content: center;
    }
    .lg-prop-text { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.85); }
    .lg-prop-text strong { color: #fff; font-weight: 600; }
    .lg-stats { display: flex; gap: 26px; margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
    .lg-stat { display: flex; flex-direction: column; }
    .lg-stat-value {
        display: block; font-family: var(--font-head, 'Poppins', sans-serif); font-size: 22px; font-weight: 700;
        background: var(--lg-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .lg-stat-label { font-size: 12px; color: rgba(255,255,255,.6); }

    /* Sur le panneau de marque, le logo mobile est redondant */
    .lg-logo { display: none; }
}

/* PWA installée : pas de panneau marketing, jamais */
@media (display-mode: standalone) {
    .lg-brand { display: none !important; }
    .lg-logo { display: flex !important; }
    .lg-main { justify-content: flex-start; background: var(--lg-surface); }
    .lg-card { background: transparent; border: 0; padding: 0; border-radius: 0; }
}
.is-standalone .lg-brand { display: none !important; }
.is-standalone .lg-logo { display: flex !important; }
.is-standalone .lg-main { justify-content: flex-start; background: var(--lg-surface); }
.is-standalone .lg-card { background: transparent; border: 0; padding: 0; border-radius: 0; }

/* Petits écrans en hauteur (clavier ouvert, paysage) : on gagne de la place */
@media (max-height: 640px) {
    .lg-logo { margin: 0 0 16px; }
    .lg-logo img { height: 32px; }
    .lg-sub { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-submit, .lg-input, .lg-google { transition: none; }
    .lg-submit.is-loading::after { animation-duration: 1.6s; }
}

/* ── Compléments : inscription, mot de passe, 2FA (2026-09-26) ────── */
.lg-row2 { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 480px) { .lg-row2 { grid-template-columns: 1fr 1fr; gap: 12px; } }
.lg-hint { font-size: 13px; color: var(--lg-muted); margin: 6px 0 0; line-height: 1.4; }
.lg-match { font-size: 13px; margin: 6px 0 0; min-height: 18px; }
.lg-match.is-ok { color: #16a34a; }
.lg-match.is-ko { color: #dc2626; }
.lg-legal { font-size: 12.5px; color: var(--lg-muted); line-height: 1.5; margin: 14px 0 0; text-align: center; }
.lg-legal a { color: var(--lg-accent); }
.lg-center { text-align: center; }
.lg-icon-hero {
    width: 64px; height: 64px; border-radius: 20px; margin: 4px auto 16px;
    background: var(--lg-accent-soft); color: var(--lg-accent);
    display: flex; align-items: center; justify-content: center;
}
.lg-otp {
    text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 28px; font-weight: 700; letter-spacing: .3em; height: 64px; padding: 0 0 0 .3em;
}
.lg-ghost {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px;
    border: 1.5px solid var(--lg-border-strong); border-radius: 14px; background: var(--lg-surface);
    color: var(--lg-ink); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.lg-ghost:active { background: var(--lg-sunken); }
.lg-details { margin: 20px 0 0; border: 1px solid var(--lg-border); border-radius: 14px; background: var(--lg-sunken); }
.lg-details summary {
    list-style: none; cursor: pointer; min-height: 48px; padding: 0 16px; display: flex; align-items: center;
    font-size: 14px; font-weight: 600; color: var(--lg-accent);
}
.lg-details summary::-webkit-details-marker { display: none; }
.lg-details[open] summary { border-bottom: 1px solid var(--lg-border); }
.lg-details-body { padding: 16px; }
.lg-notice { border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.lg-notice--warn { background: var(--lg-warn-bg); border: 1px solid var(--lg-warn-bd); color: var(--lg-warn-tx); }
.lg-notice--ok   { background: var(--lg-ok-bg);   border: 1px solid var(--lg-ok-bd);   color: var(--lg-ok-tx); }
.lg-notice--ko   { background: var(--lg-err-bg);  border: 1px solid var(--lg-err-bd);  color: var(--lg-err-tx); }
.lg-btn-inline { width: auto; display: inline-flex; padding: 0 24px; text-decoration: none; }

/* Pages connectées (réglage 2FA), affichées dans le gabarit habituel */
.lg-page {
    max-width: 560px; margin: 0 auto; font-family: var(--font-body, 'Inter', sans-serif);
    padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); color: var(--lg-ink);
}
.lg-page *, .lg-page *::before, .lg-page *::after { box-sizing: border-box; }
.lg-page-title { font-family: var(--font-head, 'Poppins', sans-serif); font-size: 24px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.02em; }
.lg-page-sub { font-size: 15px; color: var(--lg-muted); line-height: 1.5; margin: 0 0 20px; }
.lg-step { background: var(--lg-surface); border: 1px solid var(--lg-border); border-radius: 16px; padding: 16px; margin: 0 0 14px; }
.lg-step-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin: 0 0 10px; }
.lg-step-num {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; color: #fff; font-size: 14px;
    background: var(--lg-grad);
    display: flex; align-items: center; justify-content: center;
}
.lg-step p { font-size: 14px; color: var(--lg-muted); line-height: 1.5; margin: 0; }
.lg-step a { color: var(--lg-accent); font-weight: 600; }
.lg-qr { display: flex; justify-content: center; margin: 0 0 12px; }
.lg-qr > div { background: #fff; padding: 10px; border: 1px solid var(--lg-border); border-radius: 12px; line-height: 0; }
.lg-qr svg { max-width: 100%; height: auto; }
.lg-secret {
    display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px;
    background: var(--lg-sunken); border: 1px solid var(--lg-border); border-radius: 12px;
}
.lg-secret code { flex: 1; word-break: break-all; font-weight: 700; letter-spacing: .08em; font-size: 14px; }
.lg-copy {
    min-height: 40px; padding: 0 14px; border: 1px solid var(--lg-border-strong); border-radius: 10px;
    background: var(--lg-surface); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--lg-ink);
}
.lg-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lg-codes code {
    display: block; text-align: center; padding: 12px 6px; background: var(--lg-sunken); border: 1px solid var(--lg-border);
    border-radius: 10px; font-size: 14px; letter-spacing: .04em; font-family: ui-monospace, Menlo, Consolas, monospace;
}
@media (max-width: 380px) { .lg-codes { grid-template-columns: 1fr; } }

/* ── Jauge de robustesse du mot de passe (inscription, réinitialisation) ── */
.lg-strength { margin: 10px 0 0; --lg-s: #dc2626; }
.lg-strength[hidden] { display: none; }
.lg-strength-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lg-strength-bar i { display: block; height: 6px; border-radius: 99px; background: var(--lg-border-strong); transition: background .2s; }
.lg-strength[data-level="1"] { --lg-s: #dc2626; }
.lg-strength[data-level="2"] { --lg-s: #fd7200; }
.lg-strength[data-level="3"] { --lg-s: #65a30d; }
.lg-strength[data-level="4"] { --lg-s: #16a34a; }
.lg-strength[data-level="1"] i:nth-child(-n+1),
.lg-strength[data-level="2"] i:nth-child(-n+2),
.lg-strength[data-level="3"] i:nth-child(-n+3),
.lg-strength[data-level="4"] i:nth-child(-n+4) { background: var(--lg-s); }
.lg-strength-text { margin: 7px 0 0; font-size: 13px; line-height: 1.4; color: var(--lg-muted); }
.lg-strength-text b { color: var(--lg-s); font-weight: 600; }
:root[data-theme="dark"] .lg-strength[data-level="1"] { --lg-s: #f87171; }
:root[data-theme="dark"] .lg-strength[data-level="2"] { --lg-s: #ff9a4d; }
:root[data-theme="dark"] .lg-strength[data-level="3"] { --lg-s: #a3e635; }
:root[data-theme="dark"] .lg-strength[data-level="4"] { --lg-s: #4ade80; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lg-strength[data-level="1"] { --lg-s: #f87171; }
    :root:not([data-theme="light"]) .lg-strength[data-level="2"] { --lg-s: #ff9a4d; }
    :root:not([data-theme="light"]) .lg-strength[data-level="3"] { --lg-s: #a3e635; }
    :root:not([data-theme="light"]) .lg-strength[data-level="4"] { --lg-s: #4ade80; }
}
@media (prefers-reduced-motion: reduce) { .lg-strength-bar i { transition: none; } }

/* ── Consentement CGV et confidentialité (inscription) ───────────── */
.lg-consent { margin-top: 4px; }
.lg-consent .lg-check { align-items: flex-start; line-height: 1.45; padding: 4px 0; }
.lg-consent .lg-check input { margin-top: 1px; }
.lg-consent a { color: var(--lg-accent); font-weight: 600; text-decoration: none; }
.lg-consent a:hover { text-decoration: underline; }

/* ── Étape "auth" du tunnel de formalité (espace services, 2026-10-27) ──── */
.lg--tunnel { flex: 1; }
.lg--tunnel .lg-main::before { display: none; } /* la barre de marque .fo-page-bar du tunnel fait déjà ce rôle */
.lg-eyebrow { font: 600 13px/1.2 var(--font-body, 'Inter', sans-serif); letter-spacing: 0; text-transform: none; color: var(--lg-accent); margin: 0 0 10px; }
.lg-eyebrow--mobile { display: block; text-align: center; margin: 0 0 14px; color: var(--lg-accent); }
@media (min-width: 1024px) { .lg-eyebrow--mobile { display: none; } }
.lg-recap { margin: 0 0 26px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.lg-recap > div { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 13.5px; }
.lg-recap span { color: rgba(255,255,255,.6); }
.lg-recap b { color: #fff; font-weight: 600; text-align: right; }
.lg-brand-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: auto; padding-top: 22px; font-size: 12.5px; }
.lg-brand-legal a { color: rgba(255,255,255,.55); text-decoration: none; }
.lg-brand-legal a:hover { color: #fff; }
.lg-prefill {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 12px 14px;
    border-radius: 12px; background: var(--lg-accent-soft); border: 1px solid var(--lg-ring);
}
.lg-prefill b { display: block; }
.lg-prefill small { color: var(--lg-muted); }
.lg-link-btn { border: 0; background: none; color: var(--lg-accent); font: 600 14px var(--font-body, 'Inter', sans-serif); cursor: pointer; padding: 0 4px; min-height: 44px; }
.lg-switch .lg-link-btn { vertical-align: baseline; }
.lg-modal-overlay { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px; background: rgba(20, 20, 31, .55); }
.lg-modal-overlay[hidden] { display: none; }
.lg-modal {
    position: relative; width: 100%; max-width: 410px; max-height: 92vh; overflow-y: auto; padding: 28px 26px;
    border-radius: 18px; background: var(--lg-surface); color: var(--lg-ink);
    box-shadow: 0 30px 70px -28px rgba(0,0,0,.55); font-family: var(--font-body, 'Inter', sans-serif);
}
.lg-modal *, .lg-modal *::before, .lg-modal *::after { box-sizing: border-box; }
.lg-modal-close { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--lg-muted); cursor: pointer; width: 40px; height: 40px; }
.lg-title--left, .lg-sub--left { text-align: left; }
.lg-title--left { font-size: 22px; }
.lg-sub--left { margin-bottom: 18px; }