* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; transform: translateY(-150%); background: white; color: #14202b; padding: 10px; border: 2px solid #1f6feb; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1f2933; background: #f6f7f9; }
.sidebar { background: #14202b; color: white; padding: 20px 16px; }
.brand { font-weight: 700; margin-bottom: 24px; letter-spacing: 0; }
nav { display: grid; gap: 4px; }
nav a { color: #d7dee8; text-decoration: none; padding: 9px 10px; border-radius: 6px; }
nav a:hover { background: #223240; color: white; }
.shell { padding: 28px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
h1 { margin: 0; font-size: 24px; }
p { margin: 6px 0 0; color: #596875; }
h2 { margin: 22px 0 12px; font-size: 18px; }
.panel, .content { background: white; border: 1px solid #d9e2ec; border-radius: 8px; padding: 20px; }
.hidden { display: none; }
.form, .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
input, textarea, select { width: 100%; border: 1px solid #bcccdc; border-radius: 6px; padding: 10px; font: inherit; background: white; }
textarea { min-height: 140px; resize: vertical; margin: 10px 0; }
button { border: 0; border-radius: 6px; background: #1f6feb; color: white; padding: 10px 14px; font: inherit; cursor: pointer; }
button[disabled] { background: #9aa5b1; cursor: not-allowed; }
.button-danger { background: #b42318; }
.button-secondary { background: #52616f; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
pre { overflow: auto; background: #111827; color: #e5e7eb; border-radius: 6px; padding: 14px; max-height: 65vh; }
table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
th, td { border-bottom: 1px solid #d9e2ec; padding: 8px; text-align: left; vertical-align: top; }
th { color: #596875; font-weight: 600; }
.error { color: #ba2525; margin-top: 10px; }
.status { color: #394b59; margin-top: 10px; min-height: 1.4em; }
.log { min-height: 320px; max-height: 65vh; overflow: auto; background: #111827; color: #e5e7eb; border-radius: 6px; padding: 12px; }
.log .muted { color: #cbd5e1; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.card { border: 1px solid #d9e2ec; border-radius: 8px; padding: 14px; background: #ffffff; min-height: 112px; }
.card-pass { border-color: #9ad5b2; background: #f1fbf5; }
.card-warn { border-color: #f3c969; background: #fff9e8; }
.card-fail { border-color: #f4aaa2; background: #fff5f3; }
.card-label { color: #596875; font-size: 13px; margin-bottom: 8px; }
.card-value { font-size: 24px; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.card-detail, .muted { color: #596875; font-size: 13px; margin-top: 6px; }
.quick-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.quick-link { border: 1px solid #bcccdc; color: #1f2933; text-decoration: none; border-radius: 6px; padding: 9px 11px; background: #ffffff; }
.quick-link:hover { border-color: #1f6feb; color: #1f6feb; }
.workflow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.workflow-stepper { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; padding: 0; list-style: none; }
.workflow-stepper li { border: 1px solid #bcccdc; border-radius: 6px; padding: 8px; }
.workflow-stepper li[aria-current="step"] { border-color: #1f6feb; background: #eaf2ff; font-weight: 700; }
.readiness-checklist { display: grid; gap: 8px; padding: 0; list-style: none; }
.readiness-item { border: 1px solid #d9e2ec; border-radius: 6px; padding: 10px; }
.readiness-item .badge { margin-left: 8px; }
.workflow-card { display: grid; gap: 8px; min-height: 120px; border: 1px solid #d9e2ec; border-radius: 8px; padding: 14px; text-decoration: none; color: #1f2933; background: #ffffff; }
.workflow-card:hover { border-color: #1f6feb; }
.workflow-card span { color: #596875; font-size: 13px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.badge { display: inline-flex; align-items: center; min-width: 54px; justify-content: center; border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.badge-pass { color: #096b3b; background: #dff7e8; }
.badge-fail { color: #9f1c13; background: #fde2dd; }
.badge-warn { color: #7a5300; background: #fff1bf; }
.badge-skip { color: #425466; background: #e8edf3; }
.badge-accepted { color: #7a5300; background: #fff1bf; }
.badge-running { color: #0b4a8f; background: #e1edfb; }
.badge-completed { color: #096b3b; background: #dff7e8; }
.badge-failed { color: #9f1c13; background: #fde2dd; }
.badge-cancelled, .badge-unknown { color: #425466; background: #e8edf3; }
.badge-claimed { color: #0b4a8f; background: #e1edfb; }
.badge-expired { color: #425466; background: #e8edf3; }
.badge-aborted { color: #9f1c13; background: #fde2dd; }
.badge-paused, .badge-auth_required { color: #7a5300; background: #fff1bf; }
.badge-lease-available, .badge-cookie-valid { color: #096b3b; background: #dff7e8; }
.badge-lease-leased, .badge-cookie-expiring_soon { color: #0b4a8f; background: #e1edfb; }
.badge-lease-stale, .badge-cookie-expired { color: #7a5300; background: #fff1bf; }
.badge-lease-unknown, .badge-cookie-unknown_expiry, .badge-cookie-inactive { color: #425466; background: #e8edf3; }
.badge-draft, .badge-pending, .badge-queued { color: #7a5300; background: #fff1bf; }
.badge-ready, .badge-succeeded { color: #096b3b; background: #dff7e8; }
.badge-archived, .badge-skipped { color: #425466; background: #e8edf3; }
.badge-partial { color: #7a5300; background: #fff1bf; }
/* Canonical account status (backend/account_status.py primary_status). */
.badge-cookie_missing, .badge-session_invalid { color: #7a5300; background: #fff1bf; }
.badge-authentication_required, .badge-disabled { color: #9f1c13; background: #fde2dd; }
.badge-busy, .badge-cooling_down { color: #0b4a8f; background: #e1edfb; }
.badge-rejected { color: #9f1c13; background: #fde2dd; }
.text-fail { color: #9f1c13; }
.text-warn { color: #7a5300; }
.checkbox-row { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0; }
.checkbox-row input { width: auto; }
.operation-status, .operation-status-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px solid #d9e2ec; border-radius: 8px; background: #fbfcfd; margin-top: 8px; }
.operation-kind { color: #596875; text-transform: uppercase; font-size: 12px; }
.operation-name { font-weight: 600; }
.operation-summary { color: #096b3b; }
.operation-error { color: #9f1c13; }
.operation-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.result-panel { margin: 10px 0; border-radius: 8px; padding: 12px; border: 1px solid #d9e2ec; }
.result-success { background: #f1fbf5; border-color: #9ad5b2; }
.result-error { background: #fff5f3; border-color: #f4aaa2; color: #7f1d1d; }
.result-warn { background: #fff9e8; border-color: #f3c969; }
.result-neutral { background: #f6f7f9; border-color: #b9c0cc; }
.empty-state { border: 1px dashed #bcccdc; border-radius: 8px; padding: 14px; color: #394b59; background: #fbfcfd; margin: 10px 0; }
.preview-panel { margin: 10px 0 14px; }
.preview-list { border: 1px solid #d9e2ec; border-radius: 8px; padding: 10px; background: #fbfcfd; overflow-wrap: anywhere; }
.edit-panel { border: 1px solid #d9e2ec; border-radius: 8px; padding: 12px; margin: 14px 0; }
.edit-panel summary { cursor: pointer; font-weight: 700; color: #394b59; }
.token-reveal-value { margin: 8px 0; padding: 8px; background: #fbfcfd; border: 1px solid #d9e2ec; border-radius: 6px; overflow-wrap: anywhere; user-select: all; }
.token-reveal-value code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.json-details { margin-top: 12px; }
.json-details summary { cursor: pointer; color: #394b59; font-weight: 600; }
.danger-table td:nth-child(4) { color: #9f1c13; font-weight: 600; }
.connection-status { margin: 10px 0; color: #394b59; font-weight: 600; }
.filter-input { max-width: 260px; }
.log-entry { display: grid; grid-template-columns: 170px 110px 1fr; gap: 10px; border-bottom: 1px solid #283548; padding: 6px 0; }
.log-info { color: #e5e7eb; }
.log-warn { color: #fff1bf; }
.log-error { color: #fecaca; }
.log-time { color: #9fb3c8; }
.log-type { color: #f3c969; overflow-wrap: anywhere; }
#recovery-root.hidden { display: none; }
.recovery-overlay { position: fixed; inset: 0; background: rgba(15, 23, 33, 0.72); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; }
.recovery-modal { background: white; border-radius: 10px; padding: 24px; max-width: 520px; width: 100%; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); border-top: 6px solid #b42318; }
.recovery-title { margin: 0 0 10px; font-size: 20px; color: #1f2933; }
.recovery-message { margin: 0 0 12px; color: #394b59; }
.recovery-run-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.recovery-details { margin: 12px 0; }
.recovery-details summary { cursor: pointer; color: #596875; font-weight: 600; }
.recovery-diagnostics { margin-top: 8px; }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.recovery-actions a { border-radius: 6px; padding: 10px 14px; font: inherit; cursor: pointer; text-decoration: none; background: #1f6feb; color: white; }
.recovery-attempt-status { margin-top: 10px; }
#checkpoint-status-root.hidden { display: none; }
.checkpoint-toast { position: fixed; bottom: 20px; right: 20px; max-width: 360px; background: white; border-radius: 10px; padding: 16px 18px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); border-left: 6px solid #096b3b; z-index: 900; }
.checkpoint-toast-title { display: block; color: #096b3b; margin-bottom: 6px; }
.checkpoint-toast-message { margin: 0 0 8px; color: #1f2933; }
.checkpoint-toast-run-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.checkpoint-toast-metrics { margin-top: 6px; }
.checkpoint-toast button { margin-top: 10px; background: #52616f; }
@media (max-width: 760px) {
  body { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .shell { padding: 16px; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .log-entry { grid-template-columns: 1fr; }
}
/* P0.4 Preflight startup stepper */
#preflight-status-root.hidden { display: none; }
.preflight-panel { position: fixed; bottom: 20px; left: 20px; max-width: 300px; background: white; border-radius: 10px; padding: 14px 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); border-left: 6px solid #1f6feb; z-index: 890; }
.preflight-panel-title { display: block; color: #1f6feb; margin-bottom: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.preflight-panel-run-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; margin-bottom: 6px; }
.preflight-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.preflight-step { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: baseline; font-size: 13px; }
.preflight-step-icon { font-size: 12px; text-align: center; }
.preflight-step-label { font-weight: 500; }
.preflight-step-message { font-size: 11px; grid-column: 2; }
.preflight-step--completed .preflight-step-icon { color: #096b3b; }
.preflight-step--completed .preflight-step-label { color: #1f2933; }
.preflight-step--failed .preflight-step-icon { color: #9f1c13; }
.preflight-step--failed .preflight-step-label { color: #9f1c13; }
.preflight-step--in_progress .preflight-step-icon { color: #1f6feb; }
.preflight-step--in_progress .preflight-step-label { color: #1f6feb; font-style: italic; }
.preflight-step--skipped .preflight-step-icon { color: #9aa5b1; }
.preflight-step--skipped .preflight-step-label { color: #9aa5b1; }
.preflight-step--pending .preflight-step-icon { color: #bcccdc; }
.preflight-step--pending .preflight-step-label { color: #596875; }
.preflight-step-progress { grid-column: 2; font-variant-numeric: tabular-nums; }
.preflight-step-error { grid-column: 2; color: #9f1c13; }
.preflight-step-duration { grid-column: 2; }
.preflight-step-diagnostics { grid-column: 2; font-size: 10px; max-width: 100%; overflow-x: auto; background: #f5f7fa; padding: 6px; border-radius: 6px; }
.preflight-panel--success { border-left-color: #096b3b; }
.preflight-panel--failure { border-left-color: #9f1c13; }
.preflight-panel button[data-preflight-action="dismiss"] { margin-top: 10px; }