:root { color-scheme: light; --bg: #f4f6f8; --text: #17202f; --muted: #626d7b; --line: #dce1e7; --green: #167755; --red: #b4233c; --focus: #236bc2; }
* { box-sizing: border-box; letter-spacing: 0; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--text); font: 14px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button, .external-link, .back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
button { min-height: 44px; padding: 9px 16px; border: 1px solid transparent; border-radius: 6px; color: white; background: var(--green); font-weight: 650; cursor: pointer; white-space: normal; }
button:hover:not(:disabled) { filter: brightness(.94); }
button:disabled { opacity: .48; cursor: not-allowed; }
button.secondary { border-color: var(--line); background: white; color: var(--text); }
button.compact { min-height: 34px; padding: 5px 10px; font-size: 12px; }
button.icon-button { flex: 0 0 40px; width: 40px; min-height: 40px; padding: 10px; background: transparent; color: var(--muted); border: 0; }
svg { width: 18px; height: 18px; flex: 0 0 auto; }
a { color: var(--focus); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid #86baf1; outline-offset: 3px; }
.topbar { background: white; border-bottom: 1px solid var(--line); }
.topbar-inner, main { width: min(1020px, calc(100% - 40px)); margin: auto; }
.topbar-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; font-size: 17px; }
.brand img { border-radius: 6px; }
.back { color: var(--muted); font-size: 13px; }
main { margin-top: 32px; margin-bottom: 36px; }
.heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.eyebrow { color: var(--muted); font-size: 11px; margin-bottom: 3px; }
h1 { margin: 0; font-size: 27px; line-height: 1.35; }
h2 { font-size: 16px; line-height: 1.4; margin: 0; }
.local-badge { display: flex; align-items: center; gap: 6px; color: var(--green); font-size: 12px; font-weight: 650; }
.privacy { margin: 14px 0 24px; max-width: 820px; color: var(--muted); font-size: 12px; }
.import-section { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.section-heading { margin-bottom: 18px; }
label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 650; }
input:not([type=checkbox]), select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #c5cdd7; border-radius: 6px; color: var(--text); background: white; }
input[readonly] { background: #f9fafb; }
.input-actions { display: flex; align-items: center; min-width: 0; border: 1px solid #c5cdd7; border-radius: 6px; background: white; overflow: hidden; }
.input-actions input { border: 0; border-radius: 0; flex: 1 1 0; }
.input-actions:focus-within { outline: 2px solid #86baf1; outline-offset: 1px; }
.input-actions input:focus { outline: none; }
.input-actions button:focus-visible { outline-offset: -3px; }
.import-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.status { min-height: 20px; margin: 8px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.status.error { color: var(--red); }
.status.success { color: var(--green); }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 38px; padding: 30px 0; }
.workspace-grid > section { min-width: 0; }
.field { margin-bottom: 15px; }
.totp-section { padding-left: 32px; border-left: 1px solid var(--line); }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.export-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 20px; }
.checkbox { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0; font-weight: 400; color: var(--muted); font-size: 12px; }
input[type=checkbox] { width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 17px; accent-color: var(--green); }
.code-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 34px 0 14px; min-height: 58px; }
#token { font: 650 42px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 3px; overflow: hidden; accent-color: var(--green); }
progress::-webkit-progress-bar { background: #e0e6e3; }
progress::-webkit-progress-value { background: var(--green); }
.countdown-line { display: flex; gap: 12px; justify-content: space-between; color: var(--muted); font-size: 11px; margin: 10px 0 30px; }
.qr-container { width: 224px; max-width: 100%; aspect-ratio: 1; margin: 16px 0 8px; }
.qr-container canvas { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; }
.rebind-section { border-top: 1px solid var(--line); padding-top: 26px; }
.automation-section { padding: 26px 0; border-bottom: 1px solid var(--line); }
.auto-buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 0 20px; }
.login-main { max-width: 440px; margin-top: 56px; }
.login-main h1 { margin-bottom: 24px; font-size: 24px; }
.login-main form { display: grid; gap: 12px; }
.login-main label { margin: 0; }
.auto-events { padding-left: 22px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.auto-events li { padding: 3px 0; }
.auto-enrollment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
#auto-code { width: 150px; font: 600 25px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; }
.browser-surface { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.browser-surface .section-heading { margin-bottom: 6px; }
#auto-browser-origin { overflow-wrap: anywhere; }
#auto-frame { display: block; width: 100%; height: auto; aspect-ratio: 1100 / 780; object-fit: contain; border: 1px solid var(--line); background: white; cursor: crosshair; }
#auto-input-form { margin-top: 14px; }
.browser-keys { margin-top: 10px; }
.browser-handoff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; }
.rebind-section[inert] { opacity: .5; }
@media (max-width: 760px) { .auto-enrollment { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.external-link { font-size: 12px; justify-content: flex-start; }
.notice { padding: 12px 16px; background: #fff7e8; border-left: 3px solid #c58d29; font-size: 12px; color: #624916; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 24px 0 28px; padding: 0; list-style-position: inside; }
.steps li { min-width: 0; font-size: 12px; }
.steps strong { font-size: 13px; }
.steps span { display: block; color: var(--muted); margin-top: 5px; }
.rebind-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 40px; }
.spaced { margin-top: 12px; }
.new-qr-panel { text-align: center; }
.new-qr-panel .qr-container { margin: 12px auto; }
.qr-label { color: var(--green); font-size: 12px; font-weight: 700; }
.verify-row { display: flex; gap: 12px; align-items: center; }
#verification-code { width: 150px; font: 600 25px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; }
#verification { margin-top: 18px; }
.feedback { margin: 24px 0 16px; }
footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; font-size: 11px; color: var(--muted); }
dialog { width: min(560px, calc(100% - 32px)); padding: 20px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; }
dialog::backdrop { background: rgba(20, 24, 30, .4); }
dialog .section-heading { margin-bottom: 10px; }
#copy-value { display: block; width: 100%; min-height: 170px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; resize: vertical; overflow-wrap: anywhere; white-space: pre-wrap; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
@media (max-width: 760px) { .workspace-grid { grid-template-columns: 1fr; gap: 26px; } .totp-section { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; } .code-row { margin-top: 16px; max-width: 370px; } .steps { grid-template-columns: 1fr; gap: 14px; } .rebind-grid { grid-template-columns: 1fr; gap: 20px; } .new-qr-panel { text-align: left; } .new-qr-panel .qr-container { margin-left: 0; } }
@media (max-width: 480px) { .topbar-inner, main { width: calc(100% - 28px); } main { margin-top: 24px; } .import-section { padding: 16px; } .import-row, .export-row { grid-template-columns: 1fr; } h1 { font-size: 23px; } .brand { font-size: 15px; } #token { font-size: 38px; } .local-badge { font-size: 11px; } }

/* Keep the first view focused on one login task. Advanced controls remain available on demand. */
.section-caption { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.section-kicker { margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.state-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: 12px; font-weight: 700; }
.state-pill.is-success { border-color: #a8d4c2; color: var(--green); background: #f1faf6; }
.state-pill.is-error { border-color: #e6b5bf; color: var(--red); background: #fff5f6; }
.automation-section { padding-top: 30px; }
.status-card { margin: 18px 0 16px; padding: 20px; border-left: 3px solid var(--green); background: #fff; }
.status-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.status-card-top > * { min-width: 0; overflow-wrap: anywhere; }
.status-card h3 { margin: 3px 0 0; font-size: 20px; line-height: 1.35; }
.status-message { margin-top: 14px; min-height: 0; color: var(--text); font-size: 13px; }
.status-message.error { color: var(--red); }
.status-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; color: var(--muted); font-size: 11px; }
.status-meta strong { color: var(--text); font-weight: 700; }
.progress-track { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: #e7ecea; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--green); transition: width .2s ease; }
.next-action { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin: 16px 0 0; color: var(--muted); font-size: 12px; }
.next-action strong { color: var(--text); }
.session-line { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.primary-actions { gap: 10px; }
.primary-actions #auto-login { min-width: 150px; }
.consent { margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.secondary-panel { border-top: 1px solid var(--line); }
.secondary-panel > summary { padding: 15px 0; color: var(--text); cursor: pointer; font-size: 13px; font-weight: 700; list-style-position: outside; }
.secondary-panel > summary::marker { color: var(--muted); }
.secondary-panel[open] > summary { margin-bottom: 12px; }
#advanced-tools { margin-top: 18px; }
#advanced-tools .notice { margin: 0 0 14px; }
.advanced-actions { margin-bottom: 14px; }
.auto-events { margin-top: 14px; margin-bottom: 0; }
.follow-up { margin-top: 18px; padding: 16px; border: 1px solid #cbd8d3; border-radius: 8px; background: #fff; }
.enrollment-row { margin-top: 18px; }
.workspace-panel { margin-top: 26px; }
.workspace-panel > summary { padding: 16px 0; }
.workspace-panel .workspace-grid { padding: 6px 0 26px; }
.rebind-section { padding-top: 4px; }
.rebind-section > summary { padding-top: 16px; }
.rebind-section > summary + .section-heading { margin-top: 4px; }
@media (max-width: 480px) {
  .status-card { padding: 16px; }
  .status-card-top { display: block; }
  .status-card-top #automation-account { display: block; margin-top: 8px; }
  .next-action { grid-template-columns: 1fr; gap: 2px; }
  .primary-actions button { flex: 1 1 auto; }
}