:root { color-scheme: light dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px;
 --canvas: #f4f6f8; --surface: #ffffff; --subtle: #f0f2f4; --text: #172b3a; --muted: #4c6070; --border: #7b8b97;
 --accent: #075b78; --on-accent: #ffffff; --success: #176343; --success-bg: #eaf5ee; --warning: #765000; --warning-bg: #fff5d9; --danger: #a32d32; --danger-bg: #fff0f0;
 --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s6: 1.5rem; --s8: 2rem; --s12: 3rem;
 --small: .875rem; --tiny: .75rem; --h1: 1.75rem; --h2: 1.25rem; --radius: .5rem; --control-radius: .375rem; --ease: cubic-bezier(.23,1,.32,1);
 color: var(--text); background: var(--canvas); }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
input, select, textarea { scroll-margin-top: var(--s12); }
a { color: var(--accent); text-underline-offset: .2em; display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
button, .button, nav a, summary { min-height: 44px; }
button, .button { max-width: 100%; overflow-wrap: anywhere; display: inline-flex; justify-content: center; align-items: center; gap: var(--s2); padding: .6rem var(--s4); border: 1px solid var(--border); border-radius: var(--control-radius); font: inherit; font-weight: 600; background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; }
button:active, .button:active { background: var(--subtle); }
.primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.primary:active { color: var(--text); }
.danger { color: var(--danger); border-color: var(--danger); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { button:hover, .button:hover, nav a:hover { box-shadow: inset 0 0 0 1px currentColor; } }
@media (prefers-reduced-motion: no-preference) { button, .button { transition: background-color 120ms var(--ease), box-shadow 120ms var(--ease); } }
.skip-link { position: absolute; left: var(--s4); top: -6rem; z-index: 10; padding: var(--s3); background: var(--surface); }
.skip-link:focus { top: var(--s2); }
.shell { max-width: 74rem; margin: auto; padding: var(--s4); }
.app-header { border-bottom: 1px solid var(--border); background: var(--surface); }
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.brand { color: var(--text); font-weight: 750; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: var(--s2); }
.brand span { font-weight: 400; color: var(--muted); }
.account { display: flex; gap: var(--s2); align-items: center; font-size: var(--small); }
.account form { margin: 0; }
.account button { font-size: var(--small); padding-inline: var(--s3); }
.global-nav { display: flex; flex-wrap: wrap; gap: var(--s2); }
.global-nav a { display: inline-flex; align-items: center; padding: var(--s2) var(--s3); border-radius: var(--control-radius); text-decoration: none; font-size: var(--small); font-weight: 600; }
.global-nav a[aria-current="page"] { background: var(--subtle); color: var(--text); box-shadow:inset 0 -2px 0 var(--accent); }
main { padding-block: var(--s6) var(--s12) !important; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--s3); }
h1 { font-size: var(--h1); letter-spacing: -.025em; }
h2 { font-size: var(--h2); }
h3 { font-size: 1rem; }
p { margin: 0 0 var(--s3); }
small, .muted, .help { color: var(--muted); font-size: var(--small); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--small); font-variant-numeric: tabular-nums; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--subtle); padding: var(--s4); border-radius: var(--control-radius); }
.page-heading { margin-bottom: var(--s6); }
.page-heading .metadata { margin-top: var(--s2); }
.section, fieldset { min-width: 0; padding: var(--s4); margin: 0 0 var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); scroll-margin-top: var(--s4); }
.section > :last-child { margin-bottom: 0; }
.section-heading { display: flex; align-items: baseline; gap: var(--s2); justify-content: space-between; margin-bottom: var(--s3); }
.section-heading h2 { margin: 0; }
.count { font-size: var(--small); font-weight: 500; color: var(--muted); white-space: nowrap; }
.badge, .ok, .warn, .bad { display: inline-flex; align-items: center; width: fit-content; border: 1px solid currentColor; border-radius: var(--control-radius); padding: .125rem .5rem; font-size: var(--tiny); font-weight: 650; line-height: 1.5; color: var(--muted); background: var(--subtle); }
.ok { color: var(--success); background: var(--success-bg); } .warn { color: var(--warning); background: var(--warning-bg); } .bad { color: var(--danger); background: var(--danger-bg); }
.queue-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-block: var(--s4); border-top: 1px solid var(--border); }
.queue-row > div { min-width: 0; }
.queue-row h3 { margin-bottom: var(--s1); }
.queue-row h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.queue-row p { margin-bottom: var(--s1); }
.queue-row form { flex-shrink: 0; }
.metadata, .action-group, .copy-value { display: flex; gap: var(--s2) var(--s3); align-items: center; flex-wrap: wrap; }
.metadata { color: var(--muted); font-size: var(--small); }
.copy-value code { min-width: 0; overflow-wrap: anywhere; }
.copy-value button { font-size: var(--small); }
.action-group { margin-block: var(--s4); align-items: flex-start; }
.action-form { margin: 0; }
.confirm-control { margin-top: var(--s3); max-width: 32rem; }
.confirm-control input { width: 100%; margin-bottom: var(--s3); }
.danger-zone { border-color: var(--danger); }
.danger-zone > h2 { color: var(--danger); }
.danger-zone .action-form + .action-form { border-top: 1px solid var(--border); padding-top: var(--s4); margin-top: var(--s4); }
.empty-state { padding: var(--s4) 0; }
.empty-state p { color: var(--muted); }
.kv { margin: 0; }
.kv > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--s3); padding-block: var(--s2); border-bottom: 1px solid var(--subtle); }
dt { font-weight: 600; font-size: var(--small); } dd { margin: 0; min-width: 0; }
.section-index { position: static; top: 0; z-index: 2; background: var(--canvas); padding-block: var(--s2); margin-bottom: var(--s4); }
.section-index details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--control-radius); }
summary { cursor: pointer; padding: var(--s3); font-weight: 600; }
.section-index nav { display: flex; flex-wrap: wrap; padding: var(--s2); gap: var(--s1); }
.section-index nav a { padding: var(--s2); font-size: var(--small); display: flex; align-items: center; }
.timeline { list-style: none; counter-reset: steps; margin: var(--s4) 0; padding: 0; }
.timeline li { counter-increment: steps; position: relative; padding: 0 0 var(--s6) 3rem; margin-left: var(--s4); border-left: 2px solid var(--border); }
.timeline li::before { content: counter(steps); position: absolute; top: 0; left: -1rem; display: grid; place-items: center; width: 2rem; height: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; font-variant-numeric: tabular-nums; }
.timeline li:last-child { border-color: transparent; padding-bottom: 0; }
.timeline li[aria-current="step"]::before { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.timeline h3 { padding-top: var(--s1); }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding-block: var(--s3); border-top: 1px solid var(--border); }
.checklist li > div { min-width: 0; }
.checklist li button { font-size: var(--small); }
.notice { padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); margin-bottom: var(--s6); }
.notice summary { padding: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.notice summary::after { content: 'Show'; font-size: var(--small); color: var(--accent); }
.notice[open] summary::after { content: 'Dismiss'; }
.notice p { margin-top: var(--s2); }
label { display: block; font-weight: 600; font-size: var(--small); margin-bottom: var(--s2); }
input, select, textarea { font: inherit; min-height: 44px; padding: .6rem .75rem; width: 100%; max-width: 100%; border: 1px solid var(--border); border-radius: var(--control-radius); background: var(--surface); color: var(--text); }
input[type="hidden"] { display: none; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
input[type="checkbox"] { width: 1.25rem; height: 1.25rem; min-height: 1.25rem; flex-shrink: 0; accent-color: var(--accent); }
.checkbox-label { display: flex; min-height: 44px; gap: var(--s3); align-items: center; }
textarea { resize: vertical; }
.field { margin-bottom: var(--s6); min-width: 0; }
.field .help { margin-top: var(--s2); }
.field-error { color: var(--danger); margin-top: var(--s2); font-size: var(--small); }
[aria-invalid="true"] { border: 2px solid var(--danger); }
legend { font-size: var(--h2); font-weight: 700; padding-inline: var(--s2); }
.filter-bar { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.filter-bar .field { flex: 1 1 12rem; margin: 0; }
.filter-result { min-height: 1.5rem; font-size: var(--small); color: var(--muted); }
.pagination { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.pagination a, .record-links a { min-height: 44px; display: inline-flex; align-items: center; }
.record-links { display: flex; flex-wrap: wrap; gap: var(--s3); }
table { width: 100%; border-collapse: collapse; font-size: var(--small); }
caption { text-align: left; font-weight: 600; margin-bottom: var(--s3); }
th, td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
th { color: var(--muted); } td a { display: inline-flex; min-height: 44px; align-items: center; }
.status-panel { min-height: 5rem; }
.spinner { display: none; width: 1.25rem; height: 1.25rem; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; margin-right: var(--s2); }
.enhanced .spinner { display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .enhanced .spinner { animation: spin 1s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-panel { max-width: 30rem; margin: var(--s8) auto; }
.site-footer { color: var(--muted); font-size: var(--tiny); border-top: 1px solid var(--border); }
@media (max-width: 39.99rem) {
 .brand { font-size: .9375rem; } .brand span { display: none; } .shell { padding-inline: var(--s4); }
 .queue-row, .checklist li { flex-wrap: wrap; } .queue-row > div, .checklist li > div { flex: 1 1 12rem; }
 .kv > div { grid-template-columns: 1fr; gap: var(--s1); }
 table, tbody, tr, td { display: block; } thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 tr { padding-block: var(--s3); border-top: 1px solid var(--border); } td { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s2); padding: var(--s1) 0; border: 0; }
 td::before { content: attr(data-label); font-weight: 600; color: var(--muted); }
}
@media (min-width: 60rem) {
 :root { --h1: 2rem; } .shell { padding-inline: var(--s8); } .app-bar { flex-wrap: nowrap; } .app-header .shell { display: flex; justify-content: space-between; align-items: center; gap: var(--s6); }
 .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--s6); align-items: start; }
 .detail-grid { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--s6); align-items: start; }
 .section-index { position: sticky; top: var(--s4); margin: 0; padding: 0; } .section-index nav { flex-direction: column; }
 .section { padding: var(--s6); scroll-margin-top: var(--s4); } .two-column { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
 .fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s6); } .field-wide { grid-column: 1 / -1; }
 .page-heading-row { display: flex; justify-content: space-between; align-items: start; gap: var(--s6); }
}
@media (prefers-color-scheme: dark) {
 :root { --canvas: #101820; --surface: #18232d; --subtle: #252d33; --text: #e7eff5; --muted: #adbdc9; --border: #60798c; --accent: #95d8ee; --on-accent: #10212d; --success: #9be0b4; --success-bg: #18382a; --warning: #f0ce80; --warning-bg: #382f19; --danger: #ffb3b7; --danger-bg: #402428; }
}

/* Refero refinement: neutral primary, shallow groups, control borders distinct from structure. */
:root { --canvas:#f5f6f7; --text:#20252b; --surface:#fff; --muted:#53616c; --line:#e0e4e8; --primary:#20252b; --primary-text:#fff; }
.app-header,.section,fieldset,.card,.queue-row,.section-heading,.kv>div,.timeline li,th,td { border-color:var(--line); }
button.primary,.button.primary { background:var(--primary); border-color:var(--primary); color:var(--primary-text); }
.queue-section>.section-heading { background:var(--subtle); padding:var(--s3) var(--s4); margin:calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s2); border-bottom:1px solid var(--line); }
.queue-section>.section-heading h2 { font-size:1rem; }
.count { font-variant-numeric:tabular-nums; }
.confirm-control [data-confirm-error] { margin-block:var(--s2); }
@media (prefers-color-scheme:dark) { :root { --canvas:#121619; --text:#e9eef2; --surface:#1b2126; --muted:#afbdc7; --line:#303941; --primary:#e9eef2; --primary-text:#171d22; } }
.section.danger-zone { border-color:var(--danger); }