/* Bizmitra workspace — sign-in, sign-up and onboarding pages (stand-alone, no app shell).
   Ported from the design handoff (components/bundle.css): the base rules these pages use, then
   the auth section. Loaded only by the auth views, together with tokens.css, inside .bz-root. */

/* ---- density + base ---- */
.bz-root, [data-density] { --bz-bar-h: 48px; --bz-row-h: 32px; --bz-cell-x: 10px; --bz-gap: 12px; --bz-pad: 16px; --bz-metric-pad: 10px 14px; }
[data-density="comfortable"] { --bz-bar-h: 56px; --bz-row-h: 40px; --bz-cell-x: 12px; --bz-gap: 16px; --bz-pad: 20px; --bz-metric-pad: 14px 16px; }
[data-density="dense"] { --bz-bar-h: 44px; --bz-row-h: 28px; --bz-cell-x: 8px; --bz-gap: 8px; --bz-pad: 12px; --bz-metric-pad: 8px 12px; }
@media (min-width: 1920px) { .bz-root:not([data-density="dense"]) { --bz-pad: 20px; } }
@media (max-width: 640px) { .bz-root { --bz-pad: 12px; --bz-gap: 10px; } }

.bz-root { font-family: var(--font-sans); font-size: 13px; line-height: 20px; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
.bz-root *, .bz-root *::before, .bz-root *::after { box-sizing: border-box; }
.bz-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.bz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bz-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .bz-root * { transition: none !important; animation: none !important; } }

/* ---- icons, buttons, badges ---- */
/* ---------- icons ---------- */
.bz-ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bz-ic-lg { width: 18px; height: 18px; }

/* ---------- buttons ---------- */
.bz-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid transparent; font: 600 13px/1 var(--font-sans); cursor: pointer; white-space: nowrap; background: none; color: var(--ink); }
.bz-btn-sm { height: 26px; padding: 0 8px; font-size: 12px; }
.bz-btn-primary { background: var(--brand); color: var(--on-brand); }
.bz-btn-primary:hover { filter: brightness(1.08); }
.bz-btn-secondary { background: var(--surface); border-color: var(--control-border); }
.bz-btn-secondary:hover, .bz-btn-ghost:hover { background: var(--surface-sunken); }
.bz-btn-ghost { color: var(--ink-muted); }
.bz-btn-danger { background: var(--danger); color: var(--surface); }
.bz-btn[disabled] { opacity: .5; cursor: not-allowed; }
.bz-iconbtn { position: relative; width: 30px; padding: 0; justify-content: center; }
.bz-count { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: var(--surface); font: 700 10px/15px var(--font-sans); }

/* ---------- inputs ---------- */
.bz-input { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-subtle); min-width: 0; }
.bz-input input { border: 0; outline: 0; background: none; font: 400 13px var(--font-sans); color: var(--ink); width: 100%; min-width: 0; }
.bz-input input::placeholder { color: var(--ink-subtle); }
.bz-input:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.bz-kbd { font: 500 11px/16px var(--font-mono); color: var(--ink-subtle); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 4px; white-space: nowrap; }

/* ---------- badge ---------- */
.bz-badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); font: 600 12px/1 var(--font-sans); white-space: nowrap; background: var(--surface-sunken); color: var(--ink-muted); }
.bz-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bz-badge-success { background: var(--success-soft); color: var(--success); }
.bz-badge-warning { background: var(--warning-soft); color: var(--warning); }
.bz-badge-danger { background: var(--danger-soft); color: var(--danger); }
.bz-badge-info { background: var(--brand-soft); color: var(--brand); }
.bz-badge-plain { background: none; padding: 0; }
.bz-brand-mark { width: 28px; height: 28px; flex: none; border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font: 700 13px/1 var(--font-sans); }

/* ---- table (sample workspace) ---- */
.bz-tablewrap { overflow: auto; max-width: 100%; }
.bz-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.bz-table caption { text-align: left; }
.bz-table th, .bz-table td { height: var(--bz-row-h); padding: 0 var(--bz-cell-x); border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left; }
.bz-table thead th { position: sticky; top: 0; z-index: 2; height: 32px; background: var(--surface-sunken); font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.bz-table th.bz-r, .bz-table td.bz-r { text-align: right; font-variant-numeric: tabular-nums; }
.bz-table th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.bz-table th button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bz-table tbody tr:hover td { background: var(--surface-sunken); }
.bz-table tbody tr[data-click="true"] { cursor: pointer; }
.bz-table tbody tr[data-dim="true"] td { color: var(--ink-subtle); }
.bz-table tbody tr[aria-selected="true"] td { background: var(--brand-soft); }
@keyframes bz-pulse { 50% { opacity: .5; } }

/* ---- forms ---- */
.bz-check { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); cursor: pointer; vertical-align: middle; }
.bz-link { all: unset; cursor: pointer; color: var(--ink-muted); border-bottom: 1px dashed var(--border-strong); }
.bz-link:hover { color: var(--ink); }
.bz-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* ---------- forms ---------- */
.bz-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 12px; }
.bz-field { grid-column: span 12; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bz-field > label { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.bz-req { color: var(--danger); }
.bz-hint { color: var(--ink-subtle); font-weight: 400; }
.bz-ctl { height: 30px; width: 100%; min-width: 0; padding: 0 8px; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 13px var(--font-sans); }
textarea.bz-ctl { height: auto; padding: 6px 8px; resize: vertical; line-height: 20px; }
.bz-ctl:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.bz-ctl[aria-invalid="true"], .bz-cellinput[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.bz-err { font: 500 12px/16px var(--font-sans); color: var(--danger); }
.bz-inrow { display: flex; gap: 6px; align-items: center; min-width: 0; }
.bz-inrow .bz-ctl { flex: 1; }
.bz-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ink); white-space: nowrap; }
.bz-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bz-switch i { width: 30px; height: 18px; border-radius: 9px; background: var(--control-border); position: relative; transition: background 120ms; flex: none; }
.bz-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); transition: transform 120ms; }
.bz-switch input:checked + i { background: var(--brand); }
.bz-switch input:checked + i::after { transform: translateX(12px); }
.bz-switch input:focus-visible + i { outline: 2px solid var(--focus); outline-offset: 2px; }
.bz-checkrow { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.bz-errlist { margin: 0; padding: 8px 8px 8px 24px; background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-md); font-size: 12px; }
.bz-setrow-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bz-setrow-txt b { font-weight: 600; font-size: 13px; color: var(--ink); }
.bz-setrow-txt span { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.bz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bz-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 1px solid var(--control-border); border-radius: 13px; background: var(--surface); color: var(--ink); font: 500 12px var(--font-sans); cursor: pointer; }
.bz-chip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.bz-chip .bz-ic { width: 14px; height: 14px; }

/* ---- auth ---- */
/* ---------- auth ---------- */
.bz-auth { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--surface); }
.bz-auth-show { display: flex; flex-direction: column; gap: 32px; padding: 32px 48px; background: var(--bg); border-right: 1px solid var(--border); min-width: 0; }
.bz-auth-brand { display: flex; align-items: center; gap: 10px; font: 700 16px var(--font-sans); color: var(--ink); }
.bz-auth-pitch { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; max-width: 560px; }
.bz-auth-pitch h2 { margin: 0; font: 700 28px/34px var(--font-sans); letter-spacing: -.02em; color: var(--ink); }
.bz-auth-pitch > p { margin: -8px 0 0; color: var(--ink-muted); font-size: 14px; line-height: 21px; }
.bz-auth-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.bz-auth-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.bz-auth-points b { display: block; color: var(--ink); font-weight: 600; }
.bz-auth-pi { width: 28px; height: 28px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.bz-auth-preview { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.bz-auth-preview-head { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.bz-auth-preview-head span { margin-left: auto; font-size: 11px; color: var(--ink-subtle); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.bz-auth-preview .bz-table th, .bz-auth-preview .bz-table td { height: 30px; }
.bz-auth-preview figcaption { padding: 8px 12px; font-size: 12px; color: var(--ink-muted); border-top: 1px solid var(--border); }
.bz-auth-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-muted); }
.bz-auth-foot a { color: inherit; }
.bz-auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; gap: 16px; min-width: 0; }
.bz-auth-mobile-brand { display: none; }
.bz-auth-card { width: 100%; max-width: 400px; }
.bz-auth-title { margin: 0 0 4px; font: 700 22px/28px var(--font-sans); letter-spacing: -.01em; }
.bz-auth-sub { margin: 0 0 20px; color: var(--ink-muted); font-size: 13px; line-height: 19px; }
.bz-ctl-lg { height: 38px; font-size: 14px; }
.bz-auth .bz-inrow .bz-iconbtn { height: 38px; width: 38px; }
.bz-btn-block { width: 100%; justify-content: center; height: 38px; font-size: 14px; }
.bz-auth-row { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 16px; font-size: 13px; }
.bz-auth-or { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--ink-subtle); font-size: 12px; }
.bz-auth-or::before, .bz-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.bz-auth-alts { display: grid; gap: 8px; }
.bz-auth-switch { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--ink-muted); }
.bz-auth-roles { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--ink-subtle); }
.bz-auth-roles a, .bz-auth a { color: var(--brand); }
.bz-link-strong { color: var(--brand); font-weight: 600; border-bottom: 0; }
.bz-auth-legal { font-size: 12px; color: var(--ink-subtle); text-align: center; }
.bz-auth-hint { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 12px; color: var(--ink-muted); }
.bz-auth-why { display: flex; gap: 6px; align-items: flex-start; margin: 16px 0 0; font-size: 12px; line-height: 17px; color: var(--ink-subtle); }
.bz-auth-actions { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.bz-qrbox { display: flex; gap: 18px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.bz-qrwrap { position: relative; flex: none; width: 168px; height: 168px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.bz-qr { width: 100%; height: 100%; display: block; fill: #141a22; }
.bz-qr .bz-qr-bg { fill: #ffffff; }
.bz-qrbox[data-expired="true"] .bz-qr { opacity: .12; }
.bz-qr-expired { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; color: #141a22; }
.bz-qrsteps { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.bz-qrsteps b { color: var(--ink); }
.bz-qrstatus { list-style: none; margin: 6px 0 0 -18px; font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bz-dotlive { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; display: inline-block; }
.bz-dotlive[data-tone="warning"] { background: var(--warning); } .bz-dotlive[data-tone="danger"] { background: var(--danger); } .bz-dotlive[data-tone="brand"] { background: var(--brand); }
.bz-qrstatus .bz-dotlive { animation: bz-pulse 1.6s ease-in-out infinite; }
.bz-wslist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.bz-wslist li + li { border-top: 1px solid var(--border); }
.bz-wslist button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; cursor: pointer; }
.bz-wslist button:hover { background: var(--surface-sunken); }
.bz-wslist button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.bz-ws-avatar { width: 30px; height: 30px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font: 700 13px var(--font-sans); }
.bz-prefix { display: grid; place-items: center; height: 38px; padding: 0 8px; border: 1px solid var(--control-border); border-radius: var(--radius-md); color: var(--ink-muted); font-size: 13px; background: var(--surface-sunken); }
.bz-pwmeter { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--ink-muted); }
.bz-pwmeter i { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); }
.bz-pwmeter span { margin-left: 6px; }
.bz-pwmeter[data-score="1"] i:nth-child(-n+1) { background: var(--danger); }
.bz-pwmeter[data-score="2"] i:nth-child(-n+2) { background: var(--warning); }
.bz-pwmeter[data-score="3"] i:nth-child(-n+3), .bz-pwmeter[data-score="4"] i { background: var(--success); }
.bz-chips[aria-invalid="true"] .bz-chip { border-color: var(--danger); }
.bz-chip[aria-checked="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.bz-auth .bz-chip { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 15px; }
.bz-steps { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 12px; color: var(--ink-muted); }
.bz-steps-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-sunken); overflow: hidden; }
.bz-steps-bar i { display: block; height: 100%; background: var(--brand); transition: width 200ms ease; }
.bz-wsdiagram { margin-top: 10px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); display: grid; gap: 10px; justify-items: center; font-size: 12px; }
.bz-wsdiagram small { display: block; color: var(--ink-muted); font-size: 11px; }
.bz-wsd-top { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font-weight: 600; }
.bz-wsd-top small { color: inherit; opacity: .8; margin-left: 6px; display: inline; }
.bz-wsd-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bz-wsd-row > div { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); font-weight: 500; }
.bz-colist { display: grid; gap: 6px; margin-bottom: 6px; }
.bz-corow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.bz-setup { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.bz-setup li { padding: 10px 12px; } .bz-setup li + li { border-top: 1px solid var(--border); }
/* per-product sign-in pages: their own accent on the same layout (data-product on .bz-auth) */
.bz-auth[data-product="staff"] { --brand: #334155; --brand-hover: #1e293b; --brand-soft: #eef1f5; --on-brand: #ffffff; }
.bz-auth[data-product="staff"][data-theme="dark"] { --brand: #cbd5e1; --brand-hover: #e2e8f0; --brand-soft: #1e2633; --on-brand: #0f172a; }
.bz-auth[data-product="employee"] { --brand: #0f766e; --brand-hover: #0b5f59; --brand-soft: #e3f3f1; --on-brand: #ffffff; }
.bz-auth[data-product="employee"][data-theme="dark"] { --brand: #4fd1c5; --brand-hover: #81e6d9; --brand-soft: #12302d; --on-brand: #06201d; }
.bz-auth[data-product="customer"] { --brand: #c2410c; --brand-hover: #9a3412; --brand-soft: #fff1e8; --on-brand: #ffffff; }
.bz-auth[data-product="customer"][data-theme="dark"] { --brand: #fb923c; --brand-hover: #fdba74; --brand-soft: #3a1d0c; --on-brand: #1c0d03; }
.bz-auth[data-product="partner"] { --brand: #6d28d9; --brand-hover: #5b21b6; --brand-soft: #f1ebfd; --on-brand: #ffffff; }
.bz-auth[data-product="partner"][data-theme="dark"] { --brand: #a78bfa; --brand-hover: #c4b5fd; --brand-soft: #241a3d; --on-brand: #140b2b; }
.bz-auth[data-product="cx"] { --brand: #be123c; --brand-hover: #9f1239; --brand-soft: #fdecef; --on-brand: #ffffff; }
.bz-auth[data-product="cx"][data-theme="dark"] { --brand: #fb7185; --brand-hover: #fda4af; --brand-soft: #3b1219; --on-brand: #2a0610; }
.bz-auth-kicker { margin: 0 0 4px; color: var(--brand); font-size: 12px; font-weight: 600; }
.bz-auth-brand small, .bz-auth-mobile-brand small { margin-left: 2px; padding: 2px 8px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font: 600 12px var(--font-sans); }
.bz-auth-sample { margin: 18px 0 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card, 0 1px 2px rgba(15,23,42,.06)); }
.bz-auth-sample-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; color: var(--ink-muted); }
.bz-auth-sample-head b { color: var(--ink); font-weight: 600; }
.bz-auth-sample-head span:last-child { margin-left: auto; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.bz-auth-sample dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.bz-auth-sample dt { font-size: 11px; color: var(--ink-subtle); }
.bz-auth-sample dd { margin: 2px 0 0; font: 600 15px var(--font-sans); color: var(--ink); }
/* result / state panels (link sent, link expired, sign-in approved / blocked) */
.bz-auth a.bz-btn { text-decoration: none; } .bz-auth a.bz-btn-primary { color: var(--on-brand); } .bz-auth a.bz-btn-secondary { color: var(--ink); }
.bz-auth-state { text-align: center; padding: 4px 0 0; }
.bz-auth-state-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.bz-auth-state-ic .bz-ic { width: 24px; height: 24px; }
.bz-auth-state[data-tone="success"] .bz-auth-state-ic { background: var(--success-soft); color: var(--success); }
.bz-auth-state[data-tone="warning"] .bz-auth-state-ic { background: var(--warning-soft); color: var(--warning); }
.bz-auth-state[data-tone="danger"] .bz-auth-state-ic { background: var(--danger-soft); color: var(--danger); }
.bz-auth-state .bz-auth-sub { margin-left: auto; margin-right: auto; max-width: 360px; }
.bz-auth-state .bz-auth-actions { flex-direction: column; align-items: stretch; }
.bz-auth-tips { margin: 16px 0 0; padding: 10px 12px 10px 28px; border: 1px solid var(--border); border-radius: var(--radius-md); text-align: left; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
/* password rules ticked off while typing */
.bz-pwreq { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 12px; font-size: 12px; color: var(--ink-muted); }
.bz-pwreq li { display: flex; align-items: center; gap: 6px; }
.bz-pwreq li::before { content: ""; flex: none; width: 12px; height: 12px; border: 1.5px solid var(--border-strong); border-radius: 50%; }
.bz-pwreq li[data-ok="true"] { color: var(--success); }
.bz-pwreq li[data-ok="true"]::before { border-color: var(--success); background: var(--success); box-shadow: inset 0 0 0 2px var(--surface); }
/* the sign-in being checked (new-device step-up) */
.bz-devicecard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0 0 16px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 12px; }
.bz-devicecard dt { color: var(--ink-subtle); }
.bz-devicecard dd { margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.bz-codein { width: 100%; text-align: center; letter-spacing: .5em; font: 600 22px var(--font-mono); }
@media (max-width: 1023px) { .bz-auth { grid-template-columns: minmax(0, 1fr); } .bz-auth-show { display: none; } .bz-auth-mobile-brand { display: flex; align-items: center; gap: 8px; font: 700 16px var(--font-sans); } }
@media (max-width: 640px) { .bz-qrbox { flex-direction: column; } .bz-corow { grid-template-columns: minmax(0, 1fr) auto; } .bz-corow input:nth-child(2) { grid-column: 1; } .bz-auth-main { justify-content: flex-start; padding: 20px 16px; } }