:root {
    color-scheme: light;
    --canvas: #f2f6f4;
    --surface: #ffffff;
    --surface-subtle: #f6f9f7;
    --surface-panel: #fbfcfb;
    --ink: #10231e;
    --text: #2f443d;
    --muted: #4f665e;
    --border: #d8e2dc;
    --border-soft: #e3ebe6;
    --border-strong: #b9c9bf;
    --border-input: #7d9188;
    --action: #0c4a3c;
    --action-hover: #093a2f;
    --action-soft: #e6f1ec;
    --focus: #0d7b5a;
    --positive: #0f6b4f;
    --positive-bg: #e4f3ec;
    --positive-border: #b7dcc9;
    --info: #244f8a;
    --info-mark: #315f9f;
    --info-bg: #edf3ff;
    --info-border: #bfd0ef;
    --warning: #7a4c08;
    --warning-bg: #fff4df;
    --warning-border: #e6c579;
    --danger: #9b1c1c;
    --danger-hover: #7f1717;
    --danger-bg: #fff0ee;
    --danger-border: #f0b8b2;
    --neutral: #4a5568;
    --neutral-bg: #edf1f5;
    --neutral-border: #d5dde6;
    --shadow-card: 0 1px 2px rgb(12 33 28 / 6%), 0 8px 24px rgb(12 33 28 / 5%);
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: var(--canvas);
    font-size: 16px;
    line-height: 1.55;
    font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; background: var(--canvas); }
a { color: var(--action); text-underline-offset: .2em; }
a:hover { color: var(--action-hover); }
button, input, select { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .6rem; color: var(--ink); font-size: clamp(1.75rem, 3.4vw, 2.4rem); font-weight: 700; line-height: 1.15; letter-spacing: -.035em; }
h2 { margin-bottom: .65rem; color: var(--ink); font-size: 1.125rem; font-weight: 650; line-height: 1.35; }
h3 { margin-bottom: .5rem; color: var(--ink); font-size: 1rem; font-weight: 650; line-height: 1.35; }
p:last-child { margin-bottom: 0; }
code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; user-select: text; }
.icon { flex: 0 0 auto; width: 18px; height: 18px; }

.auth-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.auth-header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; width: min(100%, 1200px); margin-inline: auto; padding: .75rem 1.5rem; }
.auth-brand { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; background: var(--action); color: #fff; font-size: 1rem; font-weight: 700; }
.auth-wordmark { color: var(--ink); font-size: 1.2rem; font-weight: 700; letter-spacing: -.03em; }
.auth-environment { display: inline-flex; align-items: center; padding: .15rem .65rem; border: 1px solid var(--warning-border); border-radius: 999px; background: var(--warning-bg); color: var(--warning); font-size: .75rem; font-weight: 600; line-height: 1.5; }
.auth-language { display: flex; gap: .125rem; margin-left: auto; font-size: .8125rem; font-weight: 600; }
.auth-language a { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; padding: 0 .65rem; border-radius: 8px; color: var(--muted); text-decoration: none; }
.auth-language a:hover { background: var(--surface-subtle); color: var(--action); }
.auth-language a[aria-current] { background: var(--action-soft); color: var(--action); }

.auth-shell { width: min(100%, 1200px); margin-inline: auto; padding: 2.5rem 1.5rem 1.5rem; }
.auth-card { margin-inline: auto; padding: 2.5rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-card); }
.auth-card--wide { max-width: 1000px; }
.auth-card--compact { max-width: 500px; }
.auth-card--compact > .credentials-form { margin-top: 1.75rem; }
.auth-card--compact > .primary-button { margin-top: 1.5rem; }
.auth-page { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
.auth-intro { margin-bottom: 2rem; }
.auth-eyebrow { margin-bottom: .5rem; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.auth-lead { max-width: 720px; margin-bottom: 0; color: var(--text); font-size: 1rem; line-height: 1.65; }
.auth-footer { margin: 2rem auto 0; color: var(--muted); font-size: .8rem; text-align: center; }

.auth-progress { display: flex; justify-content: center; gap: 0; margin: 0 auto 1.75rem; padding: 0; list-style: none; counter-reset: step; }
.auth-progress li { position: relative; display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .875rem; font-weight: 600; counter-increment: step; }
.auth-progress li + li { margin-left: 2.5rem; }
.auth-progress li + li::after { content: ""; position: absolute; left: -2rem; width: 1.5rem; height: 2px; border-radius: 1px; background: var(--border-strong); }
.auth-progress li::before { content: counter(step); display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: .8rem; font-weight: 700; }
.auth-progress .is-current { color: var(--ink); }
.auth-progress .is-current::before { border-color: var(--action); background: var(--action); color: #fff; }
.auth-progress .is-complete { color: var(--positive); }
.auth-progress .is-complete::before { content: "\2713"; border-color: var(--positive); background: var(--positive); color: #fff; }

.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.25rem 2rem; }
.page-head .auth-intro { flex: 999 1 32rem; min-width: 0; margin-bottom: 0; }
.page-head > .primary-button { flex: 0 0 auto; }
.section-label { margin-bottom: 1rem; color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.setup-grid { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: 2rem; align-items: start; }
.setup-panel { min-width: 0; padding: 1.5rem; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface-subtle); }
.setup-step { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.setup-step > span { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--action-soft); color: var(--action); font-size: .8rem; font-weight: 700; }
.setup-step h2 { margin: 0; }
.setup-help { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.qr-frame { display: flex; justify-content: center; width: fit-content; max-width: 100%; margin: 1.2rem auto; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.qr-frame svg { display: block; width: 100%; max-width: 260px; height: auto; background: #fff; shape-rendering: crispEdges; }
.manual-key { margin-top: 1.25rem; padding-top: .25rem; border-top: 1px solid var(--border-soft); font-size: .875rem; }
.manual-key summary { width: fit-content; min-height: 44px; padding-block: .75rem; color: var(--action); font-weight: 600; cursor: pointer; }
.manual-key[open] summary { margin-bottom: 0; }
.manual-key code { display: block; margin-block: .65rem; padding: .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: .9rem; letter-spacing: .04em; overflow-wrap: anywhere; white-space: normal; user-select: all; }
.manual-key p { margin-bottom: .6rem; color: var(--muted); }

.credentials-form { display: grid; gap: 1.1rem; min-width: 0; }
.credentials-form .setup-step { margin-bottom: 0; }
.credentials-form > .field-help { margin-top: -.6rem; }
.credentials-form > .secondary-link { justify-self: start; margin-block: -.4rem; }
.credentials-form > .credential-anchor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }
.form-field { min-width: 0; }
.form-field label, label.form-field { display: block; color: var(--ink); font-size: .85rem; font-weight: 600; }
.form-field label { margin-bottom: .4rem; }
.form-field input, label.form-field input, .form-field select { display: block; width: 100%; min-width: 0; min-height: 48px; padding: .7rem .85rem; border: 1px solid var(--border-input); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 1rem; font-weight: 400; }
label.form-field input, .form-field select { margin-top: .4rem; }
input::placeholder { color: #66786f; opacity: 1; }
input:focus, select:focus { border-color: var(--action); }
input[aria-invalid="true"] { border-color: var(--danger); }
.password-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.field-help { margin: .45rem 0 0; color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1.55; }
input.totp-field, .totp-field input { width: min(100%, 240px); font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .32em; }
input.totp-field::placeholder, .totp-field input::placeholder { font-weight: 400; }
.form-error { margin: 0; padding: .8rem 1rem; border: 1px solid var(--danger-border); border-radius: 10px; background: var(--danger-bg); color: var(--danger); font-size: .9rem; }
.auth-notice { margin: 1.3rem 0 1rem; padding: .85rem 1rem; border: 1px solid var(--info-border); border-radius: 10px; background: var(--info-bg); color: var(--info); font-size: .875rem; line-height: 1.6; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin-top: .35rem; }

.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 48px; padding: .75rem 1.25rem; border: 1px solid var(--action); border-radius: 10px; background: var(--action); color: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgb(12 33 28 / 18%); }
.primary-button:hover { border-color: var(--action-hover); background: var(--action-hover); color: #fff; }
.primary-button:disabled { border-color: #6e867b; background: #6e867b; color: #fff; cursor: wait; }
.primary-button[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: auth-spin .8s linear infinite; }
.secondary-button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 48px; padding: .65rem 1.1rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--action); font-size: .9375rem; font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.secondary-button:hover { border-color: var(--action); background: var(--action-soft); color: var(--action-hover); }
.secondary-button:disabled { opacity: .65; cursor: wait; }
.secondary-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; color: var(--action); font-size: .875rem; font-weight: 600; text-decoration-thickness: 1px; }
.danger-button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 48px; padding: .75rem 1.25rem; border: 1.5px solid var(--danger); border-radius: 10px; background: var(--surface); color: var(--danger); font-size: .9375rem; font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer; }
.danger-button:hover { border-color: var(--danger-hover); background: var(--danger-bg); color: var(--danger-hover); }
.danger-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; border-radius: 8px; color: var(--danger); font-size: .875rem; font-weight: 600; text-decoration: none; }
.danger-link:hover { background: var(--danger-bg); color: var(--danger-hover); text-decoration: underline; }

#registry-search { padding: 1rem; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-subtle); }
#registry-button { margin-top: .75rem; }
#registry-status { margin: .75rem 0; font-size: .875rem; }
#registry-results { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
#registry-results button { justify-content: flex-start; width: 100%; text-align: left; }

.status-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 1.25rem; border-radius: 50%; background: var(--positive-bg); color: var(--positive); font-size: 1.4rem; font-weight: 700; }
.status-icon--pending { border: 3px solid var(--positive-border); border-top-color: var(--positive); }
.registration-checklist { display: grid; gap: .45rem; margin: 1.5rem 0; padding-left: 1.4rem; color: var(--positive); font-size: .9rem; }
.registration-checklist [aria-current="step"] { color: var(--ink); font-weight: 650; }

.company-tile { display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--action-soft); color: var(--action); }
.company-tile .icon { width: 20px; height: 20px; }
.empty-state { display: grid; justify-items: start; gap: .25rem; max-width: 720px; padding: 2rem; border-color: var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.empty-state .company-tile { margin-bottom: .75rem; }
.empty-state p { color: var(--text); }
.empty-state p:last-child { margin-top: .75rem; }

.company-cards { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.company-card { min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.company-card-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem .875rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-soft); }
.company-name { min-width: 0; margin: 0; color: var(--ink); font-size: 1.1875rem; font-weight: 650; line-height: 1.3; letter-spacing: -.015em; overflow-wrap: anywhere; }
.company-code { display: inline-block; padding: .05rem .5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--canvas); color: var(--text); font-family: var(--font-mono); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.company-name .company-code { margin-left: .375rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; vertical-align: .1em; }
.chip { display: inline-flex; align-items: center; gap: .375rem; padding: .15rem .65rem; border: 1px solid transparent; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.5; }
.chip--relation { background: var(--action-soft); color: var(--action); }
.company-card-heading .danger-link { margin-left: auto; }

.role-switch { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.25rem 1.5rem 1.5rem; }
.role-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.role-switch label { display: inline-flex; justify-content: center; align-items: center; min-width: 5.5rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--action); font-size: .875rem; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
.role-switch-input:checked + label { border-color: var(--action); background: var(--action); color: #fff; }
.role-switch-input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }
.role-panels { flex-basis: 100%; min-width: 0; }
.role-panel { display: none; flex-direction: column; gap: .875rem; min-width: 0; padding: 1.125rem 1.25rem; border: 1px solid var(--border); border-top: 3px solid var(--action); border-radius: 12px; background: var(--surface-panel); }
.role-panel--test { border-top-color: var(--info-mark); }
.role-panel--missing { border-style: dashed; border-top-style: solid; background: var(--surface); }
.role-switch-input--live:checked ~ .role-panels .role-panel--live, .role-switch-input--test:checked ~ .role-panels .role-panel--test { display: flex; }
.role-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.role-mark { display: inline-block; margin: 0; padding: .05rem .5rem; border: 1.5px solid var(--action); border-radius: 6px; color: var(--action); font-size: .75rem; font-weight: 700; line-height: 1.55; letter-spacing: .08em; }
.role-panel--test .role-mark { border-color: var(--info-mark); color: var(--info); }
.role-description { color: var(--text); font-size: .875rem; }
.status-chip { display: inline-flex; align-items: center; gap: .375rem; margin-left: auto; padding: .15rem .65rem; border: 1px solid transparent; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.5; }
.status-chip::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-chip--positive { border-color: var(--positive-border); background: var(--positive-bg); color: var(--positive); }
.status-chip--progress { border-color: var(--info-border); background: var(--info-bg); color: var(--info); }
.status-chip--attention { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning); }
.status-chip--stopped { border-color: var(--neutral-border); background: var(--neutral-bg); color: var(--neutral); }
.status-chip--attention::before { border-radius: 1px; transform: rotate(45deg); }
.status-chip--stopped::before { border-radius: 1px; }
.role-details { display: grid; gap: .625rem; margin: 0; font-size: .875rem; }
.role-detail { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .25rem .75rem; align-items: start; }
.role-detail dt { display: flex; align-items: center; gap: .5rem; min-height: 1.6rem; color: var(--muted); font-size: .8125rem; }
.role-detail dt .icon { width: 16px; height: 16px; }
.role-detail dd { min-width: 0; margin: 0; padding-top: .1rem; color: var(--ink); }
.role-address { font-family: var(--font-mono); font-size: .8125rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.role-missing { margin: 0; color: var(--muted); font-size: .875rem; }
.role-panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .25rem; }

.role-upgrade { display: grid; gap: .35rem; min-width: 0; padding: .75rem .9rem; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); color: var(--text); font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.role-upgrade p { margin: 0; }
.role-upgrade-title { color: var(--ink); font-weight: 650; }
.role-upgrade--progress { border-color: var(--info-border); background: var(--info-bg); color: var(--info); }
.role-upgrade--attention { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning); }
.role-upgrade--stopped { border-color: var(--neutral-border); background: var(--neutral-bg); color: var(--neutral); }
.role-upgrade--positive { border-color: var(--positive-border); background: var(--positive-bg); color: var(--positive); }
.role-upgrade--progress .role-upgrade-title, .role-upgrade--attention .role-upgrade-title, .role-upgrade--stopped .role-upgrade-title, .role-upgrade--positive .role-upgrade-title { color: inherit; }
.role-upgrade + .role-upgrade, .role-upgrade + .form-actions, .role-upgrade + p { margin-top: .75rem; }
.upgrade-retry { margin: 1.5rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--border-soft); }
.role-upgrade-step { font-weight: 600; }
.upgrade-meter { display: block; width: 100%; max-width: 100%; height: .5rem; accent-color: var(--action); }
.role-upgrade-note { margin: 0; color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
.role-upgrade-button { max-width: 100%; flex-wrap: wrap; overflow-wrap: normal; text-align: left; }
.role-upgrade-button .release-version { min-width: 0; overflow-wrap: anywhere; font-size: .875em; }
.role-upgrade-button:disabled { opacity: .7; cursor: not-allowed; }
.role-upgrade-cancel { display: contents; }
.role-upgrade-dismiss { justify-self: start; max-width: 100%; }
.upgrade-company { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: .6rem; color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
.role-mark--test { border-color: var(--info-mark); color: var(--info); }
.upgrade-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .6rem; }
.upgrade-heading h1 { margin: 0; min-width: 0; }
.upgrade-heading .status-chip { margin-left: 0; }
.upgrade-versions { display: grid; gap: .5rem; margin: 0 0 1.25rem; padding: .75rem .9rem; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-subtle); font-size: .875rem; }
.upgrade-versions div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; min-width: 0; }
.upgrade-versions dt { color: var(--muted); }
.upgrade-versions dd { min-width: 0; margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.upgrade-versions .secondary-link { min-height: 0; padding: 0; }
.upgrade-plan { display: grid; gap: .4rem; margin: 0 0 1rem; padding-left: 1.4rem; font-size: .9rem; }
.auth-notice--warning { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning); }

.release-badge { display: inline-block; max-width: 100%; padding: .1rem .65rem; border: 1px solid var(--neutral-border); border-radius: 14px; background: var(--neutral-bg); color: var(--neutral); font-size: .8125rem; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.release-version { font-family: var(--font-mono); font-size: .95em; font-weight: 500; font-variant-numeric: tabular-nums; }
.release-badge .secondary-link { display: inline-block; min-height: 0; margin-block: -.75rem; padding: .75rem 0; color: inherit; font-size: inherit; }
.release-badge--up-to-date { border-color: var(--positive-border); background: var(--positive-bg); color: var(--positive); }
.release-badge--newer { border-color: var(--info-border); background: var(--info-bg); color: var(--info); }
.release-badge--withdrawn { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }
.release-badge--unknown { border-style: dashed; border-color: var(--border-strong); background: var(--surface); color: var(--neutral); }

.company-progress { padding: 1.5rem; border: 1.5px dashed var(--action); border-radius: 14px; background: var(--surface); }
.company-progress-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.company-progress-heading h2 { margin: 0; }
.company-progress-indicator { flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; border: 3px solid var(--action-soft); border-top-color: var(--action); border-radius: 50%; }
.company-progress-indicator.is-active { animation: auth-spin 1s linear infinite; }
.company-installations { display: grid; gap: .4rem; margin: 1rem 0; padding: 0; list-style: none; font-size: .9rem; }
.role-tag { display: inline-block; min-width: 3.4rem; margin-right: .3rem; padding: .05rem .45rem; border: 1.5px solid var(--action); border-radius: 6px; color: var(--action); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-align: center; }
.company-progress-status { margin: .75rem 0 0; color: var(--info); font-weight: 650; }
.company-progress-steps { display: grid; gap: .25rem; margin: 1rem 0; padding: 0; list-style: none; color: var(--muted); font-size: .875rem; }
.company-progress-steps li { display: flex; align-items: center; gap: .75rem; min-height: 2.25rem; padding: .25rem .75rem .25rem .3rem; border-radius: 10px; }
.company-progress-steps li::before { content: ""; display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); font-size: .75rem; font-weight: 700; line-height: 1; }
.company-progress-steps .is-complete { color: var(--positive); }
.company-progress-steps .is-complete::before { content: "\2713"; border-color: var(--positive); background: var(--positive); color: #fff; }
.company-progress-steps .is-current { background: var(--info-bg); color: var(--info); font-weight: 650; }
.company-progress-steps .is-current::before { border: 6px solid var(--info-mark); }
.company-progress-steps .is-stopped { background: var(--danger-bg); color: var(--danger); }
.company-progress-steps .is-stopped::before { content: "!"; border: 2px solid var(--danger); background: var(--danger); color: #fff; }
.company-closures { padding: 1.25rem 1.5rem; }
.company-closures h2 { font-size: 1rem; }
.company-closures ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.company-closures li { color: var(--text); font-size: .9rem; }
.logout-zone { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.logout-zone .form-actions { margin: 0; }
.logout-zone .field-help { flex: 1 1 18rem; margin: 0; }
.logout-zone > p { margin: 0; }
.passkey-signin { display: grid; gap: .6rem; margin-top: 1.5rem; }
.passkey-signin .field-help { margin: 0; }
.auth-divider { margin: .75rem 0 0; color: var(--muted); font-size: .8125rem; font-weight: 600; text-align: center; }
.passkey-list { display: grid; gap: .75rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.passkey-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); }
.passkey-item { display: grid; gap: .2rem; min-width: 0; }
.passkey-item strong { overflow-wrap: anywhere; }
.passkey-item span { color: var(--muted); font-size: .85rem; }
.passkey-remove { margin: 0; }
#passkey-register { margin-block: 1.5rem; }
#passkey-register h2 { margin-top: 0; }

@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (min-width: 900px) {
    .role-switch-input, .role-switch label { display: none; }
    .role-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .role-panels .role-panel { display: flex; }
}
@media (max-width: 760px) {
    .auth-header-inner { padding: .6rem 1rem; }
    .auth-shell { padding: 1.5rem 1rem 1.25rem; }
    .auth-card { padding: 1.5rem; border-radius: 14px; }
    .setup-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .setup-panel { padding: 1.25rem; }
    .auth-intro { margin-bottom: 1.5rem; }
    .page-head .auth-intro { margin-bottom: 0; }
    .page-head > .primary-button { width: 100%; }
    .company-card-heading { padding: 1rem 1.125rem; }
    .company-name { flex: 1 1 calc(100% - 56px); }
    .role-switch { padding: 1rem 1.125rem 1.25rem; }
    .role-switch label { flex: 1 1 0; }
    .role-panel { padding: 1rem; }
    .role-detail { grid-template-columns: minmax(0, 1fr); }
    .role-panel-actions .secondary-button, .role-panel-actions .primary-button { width: 100%; }
    .logout-zone .form-actions, .logout-zone .secondary-button { width: 100%; }
    .empty-state { padding: 1.5rem; }
    .qr-frame svg { max-width: 240px; }
}
@media (max-width: 430px) {
    .auth-shell { padding: 1rem 1rem 1.25rem; }
    .auth-card { padding: 1.25rem; }
    .auth-progress { justify-content: space-between; margin-bottom: 1.25rem; }
    .auth-progress li { flex-direction: column; gap: .35rem; font-size: .73rem; text-align: center; }
    .auth-progress li + li { margin-left: .5rem; }
    .auth-progress li + li::after { display: none; }
    .password-pair { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .form-actions .primary-button, .form-actions .danger-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .company-progress-indicator.is-active { animation: none; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
    .primary-button, .secondary-button, .danger-button, .role-switch label { border: 1px solid ButtonText; }
    .release-badge, .chip, .status-chip, .auth-environment, .company-code, .role-mark, .role-tag, .role-upgrade { border: 1px solid CanvasText; }
    .release-badge--unknown { border-style: dashed; }
    .company-card, .role-panel, .setup-panel, .auth-card { border-color: CanvasText; }
    .role-switch-input:checked + label { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
    .auth-progress .is-current::before { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
    .company-progress-steps .is-current { outline: 2px solid Highlight; }
    .qr-frame, .qr-frame svg { forced-color-adjust: none; }
}