/* =============================================================================
   LivexID design system — re-map of the Claude Design comp (LivexID.dc.html)
   onto the Metronic 9 / lvx- stack. Mirrors the LivexDesk.Web --lvxd-* token
   approach. Brand accent is GREEN (#04884F / #00C471, the "vault" identity) —
   rebranded from the earlier indigo (#4F46E5) per the 2026-08 design handoff.
   Light-mode only (the comp is light-only). All custom classes use the lvxid-
   prefix so they never collide with Metronic's lvx- or LivexDesk's lvxd-.
   ============================================================================= */

.livexid {
    /* Surfaces */
    --lvxid-bg:            #FAFAFA;
    --lvxid-surface:       #FFFFFF;
    --lvxid-surface-2:     #FAFAFA;
    --lvxid-border:        #E4E4E7;
    --lvxid-border-strong: #D4D4D8;
    --lvxid-hairline:      #F4F4F5;

    /* Text */
    --lvxid-text:          #18181B;
    --lvxid-text-muted:    #71717A;
    --lvxid-text-subtle:   #A1A1AA;
    --lvxid-text-heading:  #09090B;
    --lvxid-text-soft:     #52525B;

    /* Brand (green — LivexID "vault" identity) */
    --lvxid-primary:       #04884F;
    --lvxid-primary-hover: #036B3E;
    --lvxid-primary-bg:    #EEF8F2;
    --lvxid-primary-bd:    #CFE9DB;
    --lvxid-primary-ring:  rgba(4,136,79,.13);
    --lvxid-primary-glow:  0 4px 12px rgba(0,196,113,.28);
    --lvxid-brand-grad:    radial-gradient(120% 80% at 100% 0%,#2A2456 0%,rgba(42,36,86,0) 46%),linear-gradient(158deg,#1A1C40 0%,#12172C 44%,#0C1524 100%);
    --lvxid-banner-grad:   linear-gradient(168deg,#17181B 0%,#202226 58%,#282B30 100%);
    --lvxid-logo-grad:     linear-gradient(135deg,#00C471,#04884F);
    /* Brighter accent tone for arcs/rings/CTAs on dark surfaces, distinct from
       the darker --lvxid-primary used for text/links/focus on light surfaces. */
    --lvxid-accent:        #00C471;

    /* Status */
    --lvxid-success:       #059669;
    --lvxid-success-bg:    #ECFDF5;
    --lvxid-success-bd:    #A7F3D0;
    --lvxid-warn:          #B45309;
    --lvxid-warn-bg:       #FFFBEB;
    --lvxid-warn-bd:       #FDE68A;
    --lvxid-danger:        #DC2626;
    --lvxid-danger-bg:     #FEF2F2;
    --lvxid-danger-bd:     #FECACA;
    --lvxid-info:          #2563EB;
    --lvxid-info-bg:       #EFF6FF;
    --lvxid-violet:        #7C3AED;
    --lvxid-violet-bg:     #F5F3FF;
    --lvxid-cyan:          #0891B2;
    --lvxid-cyan-bg:       #ECFEFF;

    /* Checklist "lock" tile states (Account home — vault protection card) */
    --lvxid-lock-open-bg:  #FDF3EC;
    --lvxid-lock-open-bd:  #E4C3A6;
    --lvxid-lock-open-fg:  #B0723A;

    /* Effects */
    --lvxid-shadow-sm:     0 1px 2px rgba(15,23,42,.03);
    --lvxid-shadow:        0 1px 3px rgba(15,23,42,.04);
    --lvxid-shadow-card:   0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.02);

    /* Type */
    --lvxid-font:          'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --lvxid-font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    background: var(--lvxid-bg);
    color: var(--lvxid-text);
    font-family: var(--lvxid-font);
    font-feature-settings: 'cv11', 'ss01';
    font-size: 13.5px;
    line-height: 1.45;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
}

.livexid *, .livexid *::before, .livexid *::after { box-sizing: border-box; }
.livexid h1, .livexid h2, .livexid h3, .livexid p { margin: 0; }
.livexid a { color: var(--lvxid-primary); text-decoration: none; }
.livexid ::-webkit-scrollbar { width: 10px; height: 10px; }
.livexid ::-webkit-scrollbar-thumb { background: var(--lvxid-border-strong); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
.livexid ::-webkit-scrollbar-thumb:hover { background: var(--lvxid-text-subtle); background-clip: content-box; }

/* ----------------------------------------------------------------------------
   Atoms — buttons, inputs, labels, pills, cards
   ---------------------------------------------------------------------------- */
.lvxid-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s;
}
.lvxid-btn-primary { background: var(--lvxid-primary); color: #fff; box-shadow: var(--lvxid-primary-glow); }
.lvxid-btn-primary:hover { background: var(--lvxid-primary-hover); color: #fff; }
.lvxid-btn-secondary { background: var(--lvxid-surface); color: var(--lvxid-text); border-color: var(--lvxid-border); box-shadow: none; }
.lvxid-btn-secondary:hover { background: var(--lvxid-surface-2); }
.lvxid-btn-block { width: 100%; }
.lvxid-btn-lg { height: 46px; font-size: 14.5px; }
.lvxid-btn:disabled, .lvxid-btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.lvxid-btn .ki-duotone, .lvxid-btn .ki-outline, .lvxid-btn .ki-solid { font-size: 17px; line-height: 1; }

.lvxid-social { gap: 10px; color: var(--lvxid-text); }
.lvxid-social-chip {
    width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center;
    justify-content: center; font-weight: 800; font-size: 11px; flex-shrink: 0;
}

.lvxid-field { display: block; }
.lvxid-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--lvxid-text); margin-bottom: 7px; }
.lvxid-input {
    width: 100%; height: 44px; padding: 0 13px; border: 1px solid var(--lvxid-border);
    border-radius: 10px; background: var(--lvxid-surface); font-family: inherit; font-size: 14px;
    color: var(--lvxid-text-heading); outline: none; transition: border-color .15s, box-shadow .15s;
}
.lvxid-input::placeholder { color: var(--lvxid-text-subtle); }
.lvxid-input:focus { border-color: var(--lvxid-primary); box-shadow: 0 0 0 3px var(--lvxid-primary-ring); }
.lvxid-input[readonly], .lvxid-input:disabled { background: var(--lvxid-surface-2); color: var(--lvxid-text-soft); }
.lvxid-input-wrap { position: relative; }
.lvxid-input-affix { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; }
.lvxid-input-icon-btn { background: none; border: none; cursor: pointer; color: var(--lvxid-text-subtle); display: flex; padding: 6px; }
.lvxid-input-icon-btn:hover { color: var(--lvxid-text-muted); }

/* validation */
.lvxid-input.input-validation-error, .lvxid-input[aria-invalid="true"] { border-color: var(--lvxid-danger); }
.lvxid-input.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.lvxid-val { display: block; margin-top: 6px; font-size: 12px; color: var(--lvxid-danger); }
.lvxid-summary { margin: 0 0 16px; padding: 12px 15px; border-radius: 10px; background: #FEE2E2; border: 1px solid #FCA5A5; border-left: 4px solid #DC2626; }
.lvxid-summary ul { margin: 0; padding-left: 0; list-style: none; }
.lvxid-summary li { font-size: 13.5px; font-weight: 600; color: #B91C1C; line-height: 1.55; }
.lvxid-summary:empty { display: none; }
/* Post-repeated-failure nudge under the error summary (Login: suggests forgot-password). */
.lvxid-summary-hint { margin: -6px 0 16px; padding: 11px 14px; border-radius: 10px; background: var(--lvxid-primary-bg); border: 1px solid var(--lvxid-primary-bd); font-size: 13px; color: var(--lvxid-text); display: flex; align-items: center; gap: 9px; }
.lvxid-summary-hint .ki-duotone { color: var(--lvxid-primary); font-size: 16px; flex-shrink: 0; }
.lvxid-summary-hint a { font-weight: 700; }
/* MVC unobtrusive validation states */
.livexid .validation-summary-valid { display: none; }
.livexid .field-validation-valid { display: none; }

.lvxid-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.lvxid-pill-sm { padding: 2px 8px; font-size: 11.5px; gap: 5px; }
.lvxid-pill .lvxid-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.lvxid-pill-success { background: var(--lvxid-success-bg); color: var(--lvxid-success); }
.lvxid-pill-success .lvxid-dot { background: var(--lvxid-success); }
.lvxid-pill-warn { background: var(--lvxid-warn-bg); color: var(--lvxid-warn); }
.lvxid-pill-danger { background: var(--lvxid-danger-bg); color: var(--lvxid-danger); }
.lvxid-pill-muted { background: var(--lvxid-hairline); color: var(--lvxid-text-muted); }
.lvxid-pill-brand { background: var(--lvxid-primary-bg); color: var(--lvxid-primary); }

.lvxid-card { background: var(--lvxid-surface); border: 1px solid var(--lvxid-border); border-radius: 12px; box-shadow: var(--lvxid-shadow-card); }
.lvxid-card-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--lvxid-border); }
.lvxid-card-hd-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lvxid-text-muted); }
.lvxid-card-link { font-size: 12.5px; color: var(--lvxid-primary); font-weight: 500; cursor: pointer; }
.lvxid-row { display: flex; align-items: center; gap: 13px; padding: 13px 20px; border-bottom: 1px solid var(--lvxid-hairline); }
.lvxid-row:last-child { border-bottom: none; }

/* tinted icon tiles */
.lvxid-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 9px; }
.lvxid-tile .ki-duotone, .lvxid-tile .ki-outline, .lvxid-tile .ki-solid { line-height: 1; }

/* avatar (initials) */
.lvxid-av { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; border-radius: 50%; }
.livexid a.lvxid-av, .livexid a.lvxid-av:hover { color: #fff !important; text-decoration: none; }
.lvxid-check-on { font-size: 20px; color: var(--lvxid-success); flex-shrink: 0; }
.lvxid-av-sq { border-radius: 12px; font-weight: 700; letter-spacing: -.02em; }

/* divider with label */
.lvxid-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.lvxid-or::before, .lvxid-or::after { content: ""; flex: 1; height: 1px; background: var(--lvxid-border); }
.lvxid-or span { font-size: 11.5px; color: var(--lvxid-text-subtle); font-weight: 500; }

/* password strength */
.lvxid-strength { margin-top: 9px; display: flex; align-items: center; gap: 10px; }
.lvxid-strength-track { flex: 1; height: 5px; border-radius: 3px; background: var(--lvxid-hairline); overflow: hidden; }
.lvxid-strength-fill { height: 100%; border-radius: 3px; width: 0; transition: width .2s, background .2s; }
.lvxid-strength-label { font-size: 11.5px; font-weight: 600; min-width: 46px; text-align: right; color: var(--lvxid-text-subtle); }
.lvxid-checks { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lvxid-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--lvxid-text-subtle); }
.lvxid-check.met { color: var(--lvxid-success); }
.lvxid-check .lvxid-check-box { position: relative; width: 15px; height: 15px; border-radius: 50%; border: 1.6px solid var(--lvxid-border-strong); display: inline-block; flex-shrink: 0; }
.lvxid-check.met .lvxid-check-box { border-color: var(--lvxid-success); background: var(--lvxid-success); }
.lvxid-check.met .lvxid-check-box::after { content: ''; position: absolute; left: 4.5px; top: 2px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* terms checkbox row */
.lvxid-terms { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; font-size: 12.5px; color: var(--lvxid-text-soft); line-height: 1.5; cursor: pointer; }
.lvxid-terms b { color: var(--lvxid-primary); font-weight: 600; }

/* ============================================================================
   AUTH SHELL — split brand panel + form column
   Full-viewport grid, no scroll at any height — every dimension below is
   clamp()'d so the shell compresses on short screens instead of scrolling.
   ============================================================================ */
.lvxid-auth { display: grid; grid-template-columns: 50% 1fr; grid-template-rows: 100%; width: 100%; height: 100vh; overflow: hidden; }
.lvxid-auth-brand {
    min-height: 0; min-width: 0; background: var(--lvxid-brand-grad); color: #fff;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: clamp(12px, 3vh, 40px); padding: clamp(20px, 4.4vh, 48px) clamp(24px, 4vw, 60px);
    position: relative; overflow: hidden;
}
.lvxid-auth-liquid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.lvxid-auth-liquid path:nth-child(1) { animation: livexDrift 17s ease-in-out infinite; }
.lvxid-auth-liquid path:nth-child(2) { animation: livexDrift 21s ease-in-out infinite reverse; }
.lvxid-auth-liquid path:nth-child(3) { animation: livexDrift 26s ease-in-out infinite; }
.lvxid-auth-brand-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; flex-shrink: 0; animation: livexRise .7s ease; }
.lvxid-brand-mark { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lvxid-brand-mark .ki-duotone, .lvxid-brand-mark .ki-outline, .lvxid-brand-mark .ki-solid { font-size: 22px; }
.lvxid-brand-mark img { width: 24px; height: 24px; object-fit: contain; opacity: .88; }
.lvxid-brand-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.lvxid-brand-sub { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.74); letter-spacing: .06em; }
.lvxid-auth-brand-body { position: relative; z-index: 1; min-height: 0; animation: livexRise .9s ease .12s backwards; }
.lvxid-auth-brand-body h2 { font-size: clamp(20px, 1.6vw, 27px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.lvxid-auth-brand-body p { margin-top: 14px; font-size: clamp(12.5px, .8vw, 14px); line-height: 1.6; color: rgba(255,255,255,.8); }
/* Wordmark sits top-right of the brand panel, in the header row opposite the LivexID mark. */
.lvxid-brand-wordmark { margin-left: auto; align-self: center; }
.lvxid-brand-wordmark img { display: block; height: clamp(34px, 2.4vw, 44px); width: auto; max-width: 100%; opacity: 1; }
.lvxid-auth-brand-foot { position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.72); animation: livexFade .8s ease .35s backwards; }

.lvxid-auth-content { min-height: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(20px, 4vh, 48px) clamp(20px, 4vw, 40px);
    background: radial-gradient(120% 90% at 12% 50%, rgba(4,136,79,.06) 0%, rgba(250,251,250,0) 62%), var(--lvxid-bg); }
.lvxid-auth-card { width: 100%; max-width: 420px; min-height: 0; display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 26px); animation: livexRise .8s ease .12s backwards; }
.lvxid-auth-card-wide { max-width: 480px; }   /* field-heavy auth forms (e.g. Tenant/Register) */
.lvxid-auth-card h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--lvxid-text-heading); }
.lvxid-auth-card .lvxid-lead { margin-top: 8px; font-size: 14px; color: var(--lvxid-text-muted); line-height: 1.55; }
.lvxid-auth-foot { margin-top: 18px; text-align: center; font-size: 13px; color: var(--lvxid-text-muted); }
.lvxid-auth-foot b { color: var(--lvxid-primary); cursor: pointer; }
.lvxid-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--lvxid-text-muted); cursor: pointer; margin-bottom: 22px; }
.lvxid-back:hover { color: var(--lvxid-primary); }
/* Inside the auth card the flex `gap` already spaces the back link from the next block;
   its own margin-bottom would double that. Neutralise only in the card (portal pages keep it). */
.lvxid-auth-card > .lvxid-back { margin-bottom: 0; }
.lvxid-stack { display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 22px); }
.lvxid-stack-tight { display: flex; flex-direction: column; gap: 10px; }

/* lead icon badge (forgot / reset) */
.lvxid-lead-badge { width: 52px; height: 52px; border-radius: 13px; background: var(--lvxid-primary-bg); color: var(--lvxid-primary); display: flex; align-items: center; justify-content: center; }
/* Specificity must clear the theme-wide `.livexid i[class*="ki-"]` (0,2,1) rule, which
   otherwise pins this icon to 16px and leaves it lost in the 52px badge. */
.livexid .lvxid-lead-badge i[class*="ki-"] { font-size: 26px; }

/* Grouped intro block (badge + heading + lead) so the card's flex gap treats it as one
   unit instead of spreading each element apart. Internal spacing lives here. */
.lvxid-auth-intro .lvxid-lead-badge { margin-bottom: 16px; }
.lvxid-auth-intro h1 { margin: 0; }

/* info note row */
.lvxid-note { margin-top: 16px; display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border-radius: 10px; background: var(--lvxid-surface); border: 1px solid var(--lvxid-border); font-size: 12.5px; color: var(--lvxid-text-muted); line-height: 1.5; }
.lvxid-note .ki-duotone, .lvxid-note .ki-outline, .lvxid-note .ki-solid { color: var(--lvxid-text-subtle); margin-top: 1px; }
.lvxid-note.is-danger { background: var(--lvxid-danger-bg); border-color: var(--lvxid-danger-bd); color: var(--lvxid-danger); }
.lvxid-note.is-danger .ki-duotone { color: var(--lvxid-danger); }

/* Sign-in/org-picker: fluid control sizing so the auth screens never scroll */
.lvxid-auth-card .lvxid-btn { height: clamp(44px, 6vh, 52px); border-radius: 12px; font-size: 15px; }
.lvxid-auth-card .lvxid-btn-lg { height: clamp(48px, 7vh, 58px); font-size: 15.5px; border-radius: 12px; }
.lvxid-auth-card .lvxid-input { height: clamp(46px, 6.4vh, 56px); border-radius: 12px; font-size: 15px; padding: 0 18px; }
.lvxid-auth-card .lvxid-label { font-size: 13.5px; font-weight: 600; }

/* "FASTEST" badge on the passkey button */
.lvxid-passkey-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 7px; border-radius: 5px; background: var(--lvxid-primary-bg); color: var(--lvxid-primary); font-size: 10px; font-weight: 700; letter-spacing: .02em; }

/* ============================================================================
   STATUS PAGES (changed / locked / disabled / suspended / confirmations)
   ============================================================================ */
.lvxid-status { text-align: center; }
.lvxid-status-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.lvxid-status-icon .ki-duotone, .lvxid-status-icon .ki-outline, .lvxid-status-icon .ki-solid { font-size: 30px; }
.lvxid-status-icon-lg { width: 104px; height: 104px; border-radius: 26px; }
.lvxid-status-icon-lg .ki-duotone, .lvxid-status-icon-lg .ki-outline, .lvxid-status-icon-lg .ki-solid { font-size: 52px; }
.lvxid-status-icon.is-success { background: var(--lvxid-success-bg); color: var(--lvxid-success); }
.lvxid-status-icon.is-warn { background: var(--lvxid-warn-bg); color: var(--lvxid-warn); }
.lvxid-status-icon.is-danger { background: var(--lvxid-danger-bg); color: var(--lvxid-danger); }
.lvxid-status-icon.is-neutral { background: var(--lvxid-hairline); color: var(--lvxid-text-soft); }
.lvxid-status-icon.is-brand { background: var(--lvxid-primary-bg); color: var(--lvxid-primary); }
.lvxid-status h1 { margin-top: 22px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--lvxid-text-heading); }
.lvxid-status p { margin-top: 10px; font-size: 14px; color: var(--lvxid-text-muted); line-height: 1.55; }
.lvxid-status-actions { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.lvxid-countdown { margin-top: 20px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 10px; background: var(--lvxid-warn-bg); border: 1px solid var(--lvxid-warn-bd); color: var(--lvxid-warn); font-size: 13px; font-weight: 600; }
.lvxid-status-meta { margin-top: 18px; font-size: 12px; color: var(--lvxid-text-subtle); }
.lvxid-detailbox { margin-top: 22px; padding: 14px 16px; border-radius: 11px; background: var(--lvxid-surface); border: 1px solid var(--lvxid-border); text-align: left; display: flex; flex-direction: column; gap: 10px; }
.lvxid-detailbox.is-danger { background: var(--lvxid-danger-bg); border-color: var(--lvxid-danger-bd); }
.lvxid-detailbox-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--lvxid-text-muted); }
.lvxid-detailbox-row b { color: var(--lvxid-text); font-weight: 500; }

/* ============================================================================
   PORTAL SHELL — sidebar + topbar + main
   ============================================================================ */
.lvxid-portal { display: flex; width: 100%; min-height: 100vh; }
.lvxid-side { width: 248px; flex-shrink: 0; background: var(--lvxid-surface); border-right: 1px solid var(--lvxid-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.lvxid-side-brand { height: 62px; display: flex; align-items: center; gap: 11px; padding: 0 22px; border-bottom: 1px solid var(--lvxid-border); flex-shrink: 0; }
.lvxid-side-logo { height: 30px; width: auto; display: block; }
.lvxid-side-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--lvxid-logo-grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,196,113,.32); }
.lvxid-side-mark .ki-duotone, .lvxid-side-mark .ki-outline, .lvxid-side-mark .ki-solid { font-size: 17px; }
.lvxid-side-name { font-size: 9.5px; font-weight: 600; color: var(--lvxid-text-subtle); letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.lvxid-side-sub { font-size: 17px; font-weight: 700; color: var(--lvxid-text-heading); letter-spacing: -.01em; line-height: 1.1; }
.lvxid-side-nav { flex: 1; overflow-y: auto; padding: 12px 0 8px; }
.lvxid-side-group { padding: 13px 18px 5px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lvxid-text-subtle); }
.lvxid-side-item { display: flex; align-items: center; gap: 11px; padding: 7px 12px; margin: 1px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--lvxid-text); font-weight: 500; }
.lvxid-side-item:hover { background: var(--lvxid-hairline); color: var(--lvxid-text); }
.lvxid-side-item .ki-duotone, .lvxid-side-item .ki-outline, .lvxid-side-item .ki-solid { font-size: 17px; color: var(--lvxid-text-muted); }
.lvxid-side-item.active { background: var(--lvxid-primary-bg); color: var(--lvxid-primary); font-weight: 600; }
.lvxid-side-item.active .ki-duotone, .lvxid-side-item.active .ki-outline, .lvxid-side-item.active .ki-solid { color: var(--lvxid-primary); }
/* nav items are <a> — beat Metronic's link colour: only the active item is indigo, the rest are black */
.livexid a.lvxid-side-item, .livexid a.lvxid-side-item:hover { color: var(--lvxid-text) !important; }
.livexid a.lvxid-side-item.active, .livexid a.lvxid-side-item.active:hover { color: var(--lvxid-primary) !important; }
/* an <a> styled as a button must not inherit Metronic's link colour (rendered blank until hover) */
.livexid a.lvxid-btn-primary, .livexid a.lvxid-btn-primary:hover,
.livexid a.lvxid-btn-danger, .livexid a.lvxid-btn-danger:hover { color: #fff !important; }
.livexid a.lvxid-btn-secondary, .livexid a.lvxid-btn-secondary:hover { color: var(--lvxid-text) !important; }
.lvxid-side-item span.lvxid-side-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvxid-side-foot { padding: 11px 14px; border-top: 1px solid var(--lvxid-border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer; background: none; border-left: none; border-right: none; border-bottom: none; width: 100%; text-align: left; font-family: inherit; }
.lvxid-side-foot:hover { background: var(--lvxid-surface-2); }
.lvxid-side-foot-name { font-size: 12.5px; font-weight: 600; color: var(--lvxid-text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvxid-side-foot-sub { font-size: 10.5px; color: var(--lvxid-text-muted); }

.lvxid-main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lvxid-topbar { height: 62px; flex-shrink: 0; display: flex; align-items: center; padding: 0 24px; gap: 16px; border-bottom: 1px solid var(--lvxid-border); background: var(--lvxid-surface); position: sticky; top: 0; z-index: 20; }
.lvxid-secure { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; border-radius: 8px; background: var(--lvxid-success-bg); border: 1px solid var(--lvxid-success-bd); color: #047857; font-size: 12px; font-weight: 600; }
.lvxid-search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border: 1px solid var(--lvxid-border); border-radius: 8px; background: var(--lvxid-surface-2); color: var(--lvxid-text-muted); font-size: 13px; }
.lvxid-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; border: 1px solid var(--lvxid-border); background: #fff; color: var(--lvxid-text-muted); font-size: 11px; font-family: var(--lvxid-font-mono); }
.lvxid-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; color: var(--lvxid-text-muted); }

/* arrival-continuity pill — shown once, right after the vault-unlock flow */
.lvxid-arrive-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--lvxid-primary-bg); border: 1px solid var(--lvxid-primary-bd); color: var(--lvxid-primary); font-size: 12px; font-weight: 600; animation: livexArrive 6s ease forwards; }
.lvxid-main { flex: 1; min-height: 0; background: var(--lvxid-bg); }
.lvxid-page { padding: 30px 36px 64px; width: 100%; }
.lvxid-page-narrow { max-width: 900px; }
.lvxid-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lvxid-primary); }
.lvxid-eyebrow .lvxid-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lvxid-primary); }
.lvxid-h1 { margin-top: 10px; font-size: 30px; font-weight: 700; letter-spacing: -.025em; color: var(--lvxid-text-heading); line-height: 1.1; }
.lvxid-h1-sm { font-size: 27px; letter-spacing: -.02em; }
.lvxid-subtitle { margin-top: 6px; font-size: 14px; color: var(--lvxid-text-muted); }

/* score banner */
.lvxid-posture { margin-top: 22px; padding: 22px 24px; border-radius: 14px; background: var(--lvxid-banner-grad); color: #fff; display: flex; align-items: center; gap: 22px; box-shadow: 0 12px 28px rgba(15,17,20,.35); position: relative; overflow: hidden; }
.lvxid-posture-mark { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lvxid-posture-mark .ki-duotone, .lvxid-posture-mark .ki-outline, .lvxid-posture-mark .ki-solid { font-size: 22px; }
.lvxid-posture h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.lvxid-posture p { margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 640px; }
.lvxid-posture-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); font-size: 10.5px; font-weight: 700; }
.lvxid-posture::before { content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(0,196,113,.22), transparent 70%); pointer-events: none; }
.lvxid-posture > * { position: relative; z-index: 1; }
.lvxid-ring-wrap { position: relative; width: 84px; height: 84px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.lvxid-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.lvxid-ring-num b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lvxid-ring-num span { font-size: 10px; color: rgba(255,255,255,.7); margin-top: 2px; }

/* grids */
.lvxid-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.lvxid-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.lvxid-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.lvxid-grid-2col { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.lvxid-grid-profile { display: grid; grid-template-columns: 1fr 320px; gap: 16px; margin-top: 24px; align-items: start; }
.lvxid-col { display: flex; flex-direction: column; gap: 16px; }

/* stat card */
.lvxid-stat { background: var(--lvxid-surface); border: 1px solid var(--lvxid-border); border-radius: 12px; box-shadow: var(--lvxid-shadow-card); padding: 18px 20px; }
.lvxid-stat-hd { display: flex; align-items: center; gap: 8px; color: var(--lvxid-text-muted); font-size: 13px; font-weight: 500; }
.lvxid-stat-ic { width: 24px; height: 24px; border-radius: 6px; background: var(--lvxid-surface-2); display: flex; align-items: center; justify-content: center; }
.lvxid-stat-val { margin-top: 13px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--lvxid-text-heading); line-height: 1; font-variant-numeric: tabular-nums; }
.lvxid-stat-sub { margin-top: 8px; font-size: 12px; color: var(--lvxid-text-muted); }

/* activity stat (compact) */
.lvxid-mini { background: var(--lvxid-surface); border: 1px solid var(--lvxid-border); border-radius: 11px; padding: 16px 18px; box-shadow: var(--lvxid-shadow-sm); }
.lvxid-mini-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--lvxid-text-subtle); }
.lvxid-mini-val { margin-top: 9px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--lvxid-text-heading); }
.lvxid-mini-sub { margin-top: 6px; font-size: 12px; color: var(--lvxid-text-muted); }

/* checklist / list rows */
.lvxid-listrow { display: flex; align-items: center; gap: 13px; padding: 13px 20px; border-bottom: 1px solid var(--lvxid-hairline); }
.lvxid-listrow:last-child { border-bottom: none; }
.lvxid-listrow-title { font-size: 13.5px; font-weight: 600; color: var(--lvxid-text-heading); }
.lvxid-listrow-sub { margin-top: 2px; font-size: 12px; color: var(--lvxid-text-muted); }
.lvxid-listrow-tile { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lvxid-listrow-tile.sm { width: 30px; height: 30px; border-radius: 8px; }
.lvxid-listrow-tile.lg { width: 42px; height: 42px; border-radius: 11px; }
a.lvxid-listrow { cursor: pointer; }
a.lvxid-listrow:hover { background: var(--lvxid-surface-2); }

/* real outline action button on incomplete checklist rows (replaces a bare pill) */
.lvxid-listrow-action { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--lvxid-border); background: var(--lvxid-surface); color: var(--lvxid-text); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; flex-shrink: 0; }
.lvxid-listrow-action:hover { border-color: var(--lvxid-primary-bd); background: var(--lvxid-primary-bg); color: var(--lvxid-primary); }

/* "N of 4 locks in place" tile row — checklist card header progress indicator */
.lvxid-lock-tiles { display: flex; align-items: center; gap: 6px; }
.lvxid-lock-tile { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--lvxid-primary-bg); border: 1.5px solid var(--lvxid-primary-bd); color: var(--lvxid-primary); }
.lvxid-lock-tile.is-open { background: var(--lvxid-lock-open-bg); border-style: dashed; border-color: var(--lvxid-lock-open-bd); color: var(--lvxid-lock-open-fg); }
.livexid .lvxid-lock-tile i { font-size: 14px; }

/* activity table */
.lvxid-table-hd, .lvxid-table-row { display: grid; gap: 14px; align-items: center; }
.lvxid-table-hd { padding: 11px 20px; border-bottom: 1px solid var(--lvxid-border); background: var(--lvxid-surface-2); }
.lvxid-table-hd > div { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lvxid-text-subtle); }
.lvxid-table-row { padding: 13px 20px; border-bottom: 1px solid var(--lvxid-hairline); }
.lvxid-table-row:last-child { border-bottom: none; }
.lvxid-mono { font-family: var(--lvxid-font-mono); font-size: 12px; }

/* toggle switch */
.lvxid-switch { width: 44px; height: 25px; border-radius: 999px; background: var(--lvxid-border-strong); position: relative; cursor: pointer; transition: background .15s; flex-shrink: 0; border: none; padding: 0; }
.lvxid-switch.on { background: var(--lvxid-primary); }
.lvxid-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.lvxid-switch.on::after { left: 22px; }
.lvxid-switch:disabled { opacity: .5; cursor: not-allowed; }

/* native-checkbox switch — CSP-safe, submits as a checkbox (no JS) */
.lvxid-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.lvxid-toggle > input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.lvxid-toggle .lvxid-toggle-track { width: 40px; height: 23px; border-radius: 999px; background: var(--lvxid-border-strong); position: relative; transition: background .15s; flex-shrink: 0; }
.lvxid-toggle .lvxid-toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.lvxid-toggle > input:checked + .lvxid-toggle-track { background: var(--lvxid-primary); }
.lvxid-toggle > input:checked + .lvxid-toggle-track::after { left: 20px; }
.lvxid-toggle > input:focus-visible + .lvxid-toggle-track { outline: 2px solid var(--lvxid-primary); outline-offset: 2px; }
.lvxid-toggle > input:disabled + .lvxid-toggle-track { opacity: .5; }

/* hover/focus info tooltip (CSP-safe, no JS) */
.lvxid-infotip { position: relative; display: inline-flex; align-items: center; color: var(--lvxid-text-muted); cursor: help; }
.lvxid-infotip > .ki-duotone, .lvxid-infotip > .ki-outline { font-size: 15px; }
.lvxid-infotip-body { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; width: 260px; padding: 12px 14px; background: var(--lvxid-surface); border: 1px solid var(--lvxid-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); color: var(--lvxid-text); font-size: 12.5px; cursor: auto; }
.lvxid-infotip:hover .lvxid-infotip-body, .lvxid-infotip:focus .lvxid-infotip-body, .lvxid-infotip:focus-within .lvxid-infotip-body { display: block; }
.lvxid-infotip-body ul { margin: 6px 0 0; padding-left: 16px; }
.lvxid-infotip-body li { margin: 3px 0; color: var(--lvxid-text-muted); }

/* progress bar (profile completeness) */
.lvxid-progress { margin-top: 10px; height: 7px; border-radius: 4px; background: var(--lvxid-hairline); overflow: hidden; }
.lvxid-progress-fill { height: 100%; border-radius: 4px; background: var(--lvxid-primary); }

/* ----------------------------------------------------------------------------
   Keenicon sizing — icons render as <i class="ki-duotone ki-NAME">. A baseline
   keeps any icon from inheriting a stray size; containers override below.
   ---------------------------------------------------------------------------- */
.livexid i[class*="ki-"] { font-size: 16px; line-height: 1; display: inline-flex; }
.livexid .lvxid-stat-ic i { font-size: 16px; }
.livexid .lvxid-listrow-tile i { font-size: 18px; }
.livexid .lvxid-listrow-tile.sm i { font-size: 15px; }
.livexid .lvxid-listrow-tile.lg i { font-size: 21px; }
.livexid .lvxid-secure i { font-size: 14px; }
.livexid .lvxid-search > i { font-size: 17px; }
.livexid .lvxid-topbar-actions > i { font-size: 18px; }
.livexid .lvxid-input-icon-btn i { font-size: 17px; }
.livexid .lvxid-card-link i, .livexid .lvxid-listrow i.lvxid-chev { font-size: 16px; }

/* ----------------------------------------------------------------------------
   Org picker (TenantPicker) + subdomain input group + slug feedback
   ---------------------------------------------------------------------------- */
.lvxid-orgbtn { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 13px 14px; border: 1px solid var(--lvxid-border); border-radius: 10px; background: var(--lvxid-surface); box-shadow: 0 1px 2px rgba(16,14,40,.05); cursor: pointer; font-family: inherit; transition: border-color .15s, box-shadow .15s, background .15s, transform .15s; }
.lvxid-orgbtn:hover { border-color: var(--lvxid-primary-bd); box-shadow: 0 10px 24px -16px rgba(20,22,26,.35); transform: translateY(-1px); }
.lvxid-orgbtn:focus-visible { outline: none; border-color: var(--lvxid-primary); box-shadow: 0 1px 2px rgba(16,14,40,.05), 0 0 0 4px var(--lvxid-primary-ring); }
.lvxid-orgbtn.is-last { border-color: var(--lvxid-primary-bd); background: #FBFDFC; }
.lvxid-orgbtn-name { font-size: 13.5px; font-weight: 600; color: var(--lvxid-text-heading); }
.lvxid-orgbtn-sub { font-size: 11.5px; color: var(--lvxid-text-muted); margin-top: 2px; }

.lvxid-input-group { display: flex; align-items: stretch; }
.lvxid-input-group .lvxid-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lvxid-input-group-suffix { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--lvxid-border); border-left: none; border-radius: 0 10px 10px 0; background: var(--lvxid-surface-2); color: var(--lvxid-text-muted); font-size: 13px; white-space: nowrap; }
.lvxid-slug-feedback { display: block; margin-top: 6px; font-size: 12px; min-height: 16px; }
.lvxid-slug-feedback.ok { color: var(--lvxid-success); }
.lvxid-slug-feedback.bad { color: var(--lvxid-danger); }
.lvxid-slug-feedback.muted { color: var(--lvxid-text-muted); }

/* code input (2FA / authenticator verify) */
.lvxid-code-input { letter-spacing: .3em; font-size: 18px; text-align: center; font-family: var(--lvxid-font-mono); }

/* recovery codes grid */
.lvxid-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.lvxid-codes code { font-family: var(--lvxid-font-mono); font-size: 13px; padding: 9px 12px; border-radius: 8px; background: var(--lvxid-surface-2); border: 1px solid var(--lvxid-border); color: var(--lvxid-text-heading); text-align: center; }

/* Styled confirmation modal (replaces native window.confirm) */
.lvxid-confirm-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(9,9,11,.5); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.lvxid-confirm-overlay.open { opacity: 1; pointer-events: auto; }
.lvxid-confirm-box { width: 100%; max-width: 410px; background: var(--lvxid-surface); border: 1px solid var(--lvxid-border); border-radius: 16px; box-shadow: 0 24px 60px rgba(9,9,11,.28); padding: 24px; transform: translateY(10px) scale(.97); transition: transform .15s ease; }
.lvxid-confirm-overlay.open .lvxid-confirm-box { transform: none; }
.lvxid-confirm-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--lvxid-warn-bg); color: var(--lvxid-warn); }
.lvxid-confirm-ico.danger { background: var(--lvxid-danger-bg); color: var(--lvxid-danger); }
.livexid .lvxid-confirm-ico i { font-size: 22px; }
.lvxid-confirm-title { margin-top: 14px; font-size: 17px; font-weight: 700; color: var(--lvxid-text-heading); }
.lvxid-confirm-msg { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--lvxid-text-soft); }
.lvxid-confirm-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 10px; }
.lvxid-btn-danger { background: var(--lvxid-danger); color: #fff; border-color: var(--lvxid-danger); box-shadow: none; }
.lvxid-btn-danger:hover { filter: brightness(.94); }

/* ============================================================================
   VAULT UNLOCK OVERLAY — org-picker "choosing an organisation" transition.
   Built once, lazily, by initVaultUnlock() in livexid.js — never emitted from
   Razor markup. Gated on the real SelectTenant response; see that JS module
   for why the phase timings below are a ceiling, not a promise.
   ============================================================================ */
.lvxid-vault-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(16,17,20,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.lvxid-vault-overlay.open { opacity: 1; pointer-events: auto; }
.lvxid-vault-stack { display: flex; flex-direction: column; align-items: center; gap: 22px; color: #fff; text-align: center; }
.lvxid-vault-ring { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; }
.lvxid-vault-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); animation: livexPulse 2.4s ease-in-out infinite; }
.lvxid-vault-ring::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); }
.lvxid-vault-arc { position: absolute; inset: 6px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--lvxid-accent); animation: livexRing 1.15s linear infinite; }
.lvxid-vault-sweep { position: absolute; inset: 6px; border-radius: 50%; overflow: hidden; pointer-events: none; }
.lvxid-vault-sweep::before { content: ""; position: absolute; left: 0; right: 0; top: -100%; height: 100%; background: linear-gradient(180deg, transparent, rgba(0,196,113,.35), transparent); animation: livexSweep 2.1s ease-in-out infinite; }
.lvxid-vault-core { width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; color: var(--lvxid-accent); transition: background .3s ease, box-shadow .3s ease; }
.lvxid-vault-core.is-done { background: var(--lvxid-accent); color: #05100B; box-shadow: 0 0 34px rgba(0,196,113,.45); }
.lvxid-vault-core.is-done .ki-duotone, .lvxid-vault-core.is-done .ki-outline, .lvxid-vault-core.is-done .ki-solid { animation: livexPop .42s ease; }
.livexid .lvxid-vault-core i { font-size: 26px; }
.lvxid-vault-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lvxid-accent); }
.lvxid-vault-org { margin-top: 4px; font-size: 19px; font-weight: 700; color: #fff; }
.lvxid-vault-steps { width: 268px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.lvxid-vault-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.34); }
.lvxid-vault-step .lvxid-vault-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.lvxid-vault-step.is-active { color: #fff; font-weight: 600; }
.lvxid-vault-step.is-active .lvxid-vault-dot { background: var(--lvxid-accent); box-shadow: 0 0 0 4px rgba(0,196,113,.18); }
.lvxid-vault-step.is-complete { color: rgba(255,255,255,.72); }
.lvxid-vault-progress { width: 268px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.lvxid-vault-progress-fill { height: 100%; width: 0; background: var(--lvxid-accent); transition: width .55s cubic-bezier(.4,0,.2,1); }
.lvxid-vault-error { max-width: 280px; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.5; }
.lvxid-vault-retry { margin-top: 6px; }

/* responsive */
@media (max-width: 1024px) {
    .lvxid-grid-2col, .lvxid-grid-profile { grid-template-columns: 1fr; }
    .lvxid-grid-3, .lvxid-grid-2 { grid-template-columns: 1fr; }
    .lvxid-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .lvxid-auth { grid-template-columns: 1fr; }
    .lvxid-auth-brand { display: none; }
    .lvxid-side { display: none; }
    .lvxid-page { padding: 22px 18px 48px; }
}

/* ============================================================================
   MOTION — entrances, ambient drift, the vault-unlock sequence, and the org-
   picker idle nudge. Scoped to .livexid so nothing here can leak onto other
   screens, and fully disabled under prefers-reduced-motion below.
   ============================================================================ */
@keyframes livexRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes livexFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes livexDrift { 0%, 100% { transform: translate3d(0,-12px,0); } 50% { transform: translate3d(0,12px,0); } }
@keyframes livexNudge {
    0%, 100% { box-shadow: 0 1px 2px rgba(16,14,40,.05); transform: none; }
    50% { box-shadow: 0 1px 2px rgba(16,14,40,.05), 0 0 0 7px rgba(0,196,113,.24); }
    72% { transform: translateY(-2px); }
}
@keyframes livexPulse { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .9; transform: scale(1.03); } }
@keyframes livexRing { to { transform: rotate(360deg); } }
@keyframes livexSweep { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }
@keyframes livexArrive {
    0% { opacity: 0; transform: translateY(-4px); }
    10%, 75% { opacity: 1; transform: none; }
    100% { opacity: 0; visibility: hidden; }
}
@keyframes livexPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .livexid *, .livexid *::before, .livexid *::after { animation: none !important; transition: none !important; }
}

/* Print: recovery codes only — drop the portal chrome and the on-screen actions */
@media print {
    .lvxid-side, .lvxid-topbar, .lvxid-back, [data-lvxid-noprint] { display: none !important; }
    .lvxid-portal, .lvxid-main-col, .lvxid-main, .lvxid-page { display: block !important; padding: 0 !important; background: #fff !important; }
    .lvxid-card { border: none !important; box-shadow: none !important; padding: 0 !important; }
    .lvxid-codes code { border: 1px solid #999 !important; }
}