:root {
  color-scheme: light;
  --bg: #ffffff; --bg-soft: #f0f2f5; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #f0f2f5;
  --text: #20242b; --muted: #626974; --line: #e2e5e9;
  --brand: #2563eb; --brand-strong: #1d4ed8; --brand-soft: #eff5ff; --blue: #2563eb;
  --green: #367447; --amber: #956112; --red: #ba4248;
  --shadow: 0 8px 30px #20242b0a; --radius: 9px; --radius-sm: 6px;
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; --sidebar: 208px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
.icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 8px 12px; color: white; background: var(--brand); border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid #2563eb80; outline-offset: 3px; }
#screen-root:focus { outline: none; }
h1[tabindex="-1"]:focus { outline: none; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 12px; }
h2 { font-weight: 600; letter-spacing: -.015em; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
.lead { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0; }
.lead.compact { font-size: 14px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 42px; padding: 9px 17px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; font-size: 12px; font-weight: 600; line-height: 1.4; cursor: pointer; transition: background .16s, border-color .16s, box-shadow .16s; }
.button .icon { width: 17px; height: 17px; }
.button:hover:not(:disabled) { border-color: #aeb5bf; background: var(--surface-3); }
.button:disabled { opacity: .5; cursor: default; }
.button.primary { background: var(--brand); border-color: var(--brand); color: white; }
.button.primary:hover:not(:disabled) { background: var(--brand-strong); border-color: var(--brand-strong); }
.button.secondary { background: var(--surface); }
.button.ghost { background: transparent; color: var(--muted); border-color: transparent; }
.button.large { min-height: 48px; padding: 13px 24px; font-size: 13px; }
.button.small { min-height: 34px; padding: 6px 11px; font-size: 12px; }
.button.danger { background: #fff5f4; border-color: #e9c9c7; color: #a2383e; }
.button.danger:hover:not(:disabled) { background: #ffebea; border-color: #c77c80; }

/* App shell */
.app-header { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); padding: 28px 14px 20px; display: flex; flex-direction: column; background: #f7f8fa; color: var(--text); z-index: 40; border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; color: var(--text); text-decoration: none; padding: 0 12px; flex-shrink: 0; }
.brand b { display: block; font-size: 20px; letter-spacing: -.025em; font-weight: 600; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.sidebar-heading .brand { padding: 0 4px 0 10px; }
.brand-short { display: none; }
.sidebar-toggle { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; }
.sidebar-toggle:hover { background: #e8ebef; color: var(--text); }
.sidebar-chevron { transform-origin: 15px 12px; }
.main-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.nav-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 6px; color: #535b67; text-decoration: none; font-size: 13px; border: 1px solid transparent; }
.nav-link:hover { color: var(--text); background: #eceff3; }
.nav-link[aria-current="page"] { color: #1d4ed8; background: #eaf1fd; border-color: transparent; font-weight: 600; }
.nav-link[aria-current="page"] .icon { color: currentColor; }
.account-area { margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px; flex-shrink: 0; }
.account-identity { display: flex; gap: 10px; align-items: center; margin: 11px 0 8px; }
.account-identity > div { min-width: 0; }
.account-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #535b67; background: #e8ebef; font-size: 12px; flex-shrink: 0; }
.account-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.account-role { display: block; color: var(--muted); font-size: 12px; }
.account-area .button { min-height: 34px; color: var(--muted); padding: 4px 0; }
.account-area .button:hover { color: var(--text); background: transparent; }
.authenticated { padding-left: var(--sidebar); }
.preview-note { padding: 8px 38px; color: #6d6336; background: #f7f3e7; border-bottom: 1px solid #e8e0c9; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 12px; }
.preview-note b { font-weight: 600; }
.preview-note a { text-decoration: none; border-bottom: 1px solid #b6ad89; }
.screen { width: min(1460px, 100%); margin: 0 auto; padding: 38px 38px 24px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 29px; flex-wrap: wrap; }
.page-head h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.25; letter-spacing: -.025em; }
.section-subtitle { margin: 0; color: var(--muted); font-size: 13px; }
.page-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.collection-toolbar { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.search-wrap { position: relative; width: min(480px, 100%); }
.search-wrap > .icon { position: absolute; left: 13px; top: 13px; width: 17px; height: 17px; color: #6b7280; }
input, textarea, select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); background: var(--surface); }
input::placeholder, textarea::placeholder { color: #6b7280; opacity: 1; }
input[type=checkbox] { width: auto; accent-color: var(--brand); }
textarea { resize: vertical; min-height: 88px; }
.search-input { padding: 12px 14px 12px 39px; font-size: 12px; }
.sort-select { width: auto; min-width: 168px; font-size: 12px; }
.patient-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 18px; }
.patient-card { display: flex; flex-direction: column; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-decoration: none; transition: border-color .15s, background .15s; }
.patient-card:hover { border-color: #aeb5bf; background: #fafbfc; }
.patient-card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.patient-card h2 { font-size: 15px; margin: 0; }
.patient-card p { font-size: 12px; margin: 3px 0 0; }
.card-arrow { color: #7b8491; }
.card-arrow .icon { width: 17px; }
.patient-stats { display: flex; gap: 24px; margin: 18px 0; padding: 0; }
.patient-stats > div { flex: 1; padding: 0; }
.patient-stats > div + div { border-left: 0; }
.patient-stats dt { color: var(--muted); font-size: 12px; }
.patient-stats dd { margin: 3px 0 0; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.patient-latest { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
/* Entry and registration */
.public-root { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; overflow-x: clip; }
.public-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.registration-shell, .message-shell { width: min(540px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 32px; }
.registration-shell h1, .message-shell h1 { font-size: 26px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); text-decoration: none; margin-bottom: 24px; }
.back-link:hover { color: var(--brand); }
.registration-form { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; margin-top: 30px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.field:nth-of-type(3), .consent, .form-status, .registration-form > .button { grid-column: 1 / -1; }
.consent { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 12px; }
.consent input { margin-top: 4px; flex-shrink: 0; }
.form-status { padding: 12px 14px; border-radius: 9px; font-size: 12px; }
.form-status.success { color: #234b88; background: #eff5ff; border: 1px solid #cedcf3; }
.form-status.error { color: #a53a40; background: #fff2f1; border: 1px solid #ebc5c5; }
.message-shell { text-align: center; }
.message-shell .lead { margin-inline: auto; }
.message-shell .public-actions { justify-content: center; }
.message-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; font-size: 22px; color: var(--brand); background: var(--brand-soft); }
.message-icon.danger { color: #a83d42; background: #fcefee; }

/* Upload */
.upload-screen { max-width: 1120px; }
.upload-screen .section-subtitle { max-width: 590px; line-height: 1.8; }
.upload-progress { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 0 0 28px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.upload-progress li { display: flex; align-items: center; gap: 10px; padding: 17px 18px; color: var(--muted); font-size: 12px; position: relative; }
.upload-progress li:not(:last-child)::after { content: '›'; position: absolute; right: 2px; font-size: 17px; color: #7b8491; }
.upload-progress li > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: var(--muted); background: var(--bg); border: 1px solid var(--line); font-size: 12px; flex-shrink: 0; }
.upload-progress li.active { color: var(--brand); font-weight: 600; }
.upload-progress li.active > span { background: var(--brand); color: white; border-color: var(--brand); }
.upload-progress li.done > span { color: var(--brand); background: var(--brand-soft); border-color: #cedcf3; }
.upload-workspace { min-height: 420px; }
.upload-card, .finish-card { width: min(760px, 100%); margin: 0 auto; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.upload-card.wide { width: 100%; }
.drop-zone { width: 100%; min-height: 230px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 20px; background: #fafbfc; color: var(--text); border: 1px dashed #b6bdc7; border-radius: 6px; transition: background .15s, border-color .15s; }
.drop-zone:hover, .drop-zone.dragging { background: #f2f5fa; border-color: var(--brand); }
.drop-zone:disabled { cursor: default; background: #f7f8fa; border-color: #d4d8df; }
.drop-zone:disabled .browse-label { color: var(--muted); background: #f0f2f5; }
.drop-zone strong { font-size: 18px; font-weight: 500; letter-spacing: -.025em; }
.drop-zone .muted { font-size: 12px; }
.drop-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 4px; color: #6b7280; }
.drop-icon .icon { width: 25px; height: 25px; }
.browse-label { margin-top: 8px; font-size: 13px; padding: 8px 16px; border-radius: 5px; background: white; border: 1px solid var(--line); color: var(--brand); font-weight: 500; }
.resume-note { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 14px; background: #fbf8ee; border: 1px solid #e7d9b8; border-radius: 9px; font-size: 12px; }
.resume-note p { font-size: 12px; color: #79663e; margin: 3px 0 0; }
.status-card { text-align: center; padding: 45px 30px; }
.status-card h2 { font-size: 24px; margin: 20px 0 8px; }
.status-card p { margin: 0 auto 18px; font-size: 12px; max-width: 480px; }
.large-spinner, .spinner { display: inline-block; width: 24px; height: 24px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .9s linear infinite; flex-shrink: 0; }
.large-spinner { width: 40px; height: 40px; }
.small-spinner { width: 18px; height: 18px; }
.progress-block { margin: 25px auto; max-width: 560px; }
.progress-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.progress-track { height: 7px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.progress-fill { width: 0; height: 100%; background: var(--brand); transition: width .15s; }
.card-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.status-card .card-actions { justify-content: center; }
.inline-error, .inline-warning { font-size: 12px; padding: 12px 14px; border-radius: 9px; }
.inline-error { color: #a23940; background: #fff2f1; border: 1px solid #e6c3c1; }
.inline-warning { color: #815d22; background: #fcf7ea; border: 1px solid #ead9b8; }
.maintenance-notice { display: flex; align-items: flex-start; gap: 15px; margin: 0 auto 22px; padding: 19px 22px; max-width: 760px; background: #fbf6e9; border: 1px solid #e6d8b3; border-radius: 13px; color: #77551e; }
.maintenance-notice .icon { margin-top: 2px; }
.maintenance-notice b { font-size: 13px; font-weight: 600; }
.maintenance-notice p { margin: 4px 0 0; font-size: 12px; line-height: 1.7; }
.maintenance-notice a { display: inline-block; margin-top: 8px; font-size: 12px; }
.scan-choice-list { display: flex; flex-direction: column; gap: 12px; margin-top: 23px; }
.scan-choice { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 13px 20px; padding: 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.scan-select { display: flex; align-items: center; gap: 11px; }
.scan-select small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.bm-select { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 12px; }
.scan-choice .inline-warning, .scan-choice .inline-error { grid-column: 1 / -1; margin: 0; }
.card-heading h2 { font-size: 22px; margin: 0 0 5px; }
.card-heading p { color: var(--muted); margin: 0; font-size: 12px; }
.finish-card { text-align: center; padding-block: 50px; }
.finish-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 20px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); border: 1px solid #cedcf3; font-size: 25px; }
.finish-card h2 { font-size: 25px; margin: 0 0 10px; }
.finish-card p { color: var(--muted); font-size: 13px; }
.finish-card .public-actions { justify-content: center; }

/* Records, administration, and feedback */
.empty-state { grid-column: 1 / -1; padding: 52px 25px; text-align: center; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.empty-state.compact { padding: 32px 20px; }
.empty-icon { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 14px; color: #6b7280; }
.empty-icon .icon { width: 27px; height: 27px; }
.empty-state h2 { margin: 0 0 9px; font-size: 22px; color: var(--text); }
.empty-state p { margin: 0 auto 23px; max-width: 415px; font-size: 12px; line-height: 1.9; }
.error-state { color: #a23940; border-color: #e5c4c4; }
.table-loading, .viewer-loading { grid-column: 1 / -1; min-height: 230px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
.table-wrap { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { padding: 14px 17px; text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); background: #f7f8fa; white-space: nowrap; border-bottom: 1px solid var(--line); }
.data-table td { padding: 17px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #f7f8fa; }
.data-table .number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .strong { color: var(--brand); font-weight: 600; }
.delta-up { color: #b34c42; } .delta-down { color: var(--green); }
.eye-badge, .status-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--surface-2); font-size: 12px; white-space: nowrap; }
.eye-badge { color: #525b68; background: #f3f4f6; border-color: var(--line); }
.status-badge.ready { color: #525b68; background: #f3f4f6; border-color: var(--line); }
.status-badge.failed, .status-badge.deleted { color: #a23940; background: #fff4f3; border-color: #e6c3c1; }
.status-badge.processing { color: #32627c; border-color: #c3d8e3; background: #eef6fb; }
.row-actions { display: flex; justify-content: flex-end; gap: 7px; white-space: nowrap; }
.clinical-note { margin: 18px 0 0; max-width: 850px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.active-jobs { padding: 16px 19px; margin-bottom: 25px; background: #f5f7fa; border: 1px solid var(--line); border-radius: 8px; }
.active-jobs-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 6px; }
.active-job-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; border-top: 1px solid #e2e5e9; padding: 11px 0 4px; }
.active-job-row b, .active-job-row span { display: block; font-size: 12px; }
.tab-nav { display: flex; gap: 12px; margin: 0 0 25px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tab-button { padding: 12px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12px; white-space: nowrap; }
.tab-button:hover { color: var(--brand); }
.tab-button[aria-selected=true] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.admin-section-head { margin: 0 0 21px; }
.admin-section-head h2 { font-size: 19px; margin: 0 0 5px; }
.admin-section-head p { color: var(--muted); font-size: 12px; margin: 0; max-width: 720px; line-height: 1.8; }
.admin-list { display: flex; flex-direction: column; gap: 12px; }
.admin-row { display: grid; grid-template-columns: minmax(155px, 1fr) minmax(130px, .8fr) minmax(185px, 1fr) auto; align-items: center; gap: 17px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.admin-row.compact { grid-template-columns: 1fr auto; }
.admin-person { display: flex; flex-direction: column; min-width: 0; }
.admin-person b { font-size: 13px; }
.admin-person span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.admin-person small, .admin-note { color: var(--muted); font-size: 12px; margin: 3px 0 0; }
.switch-label { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.audit-table td { font-size: 12px; }
.safety-card { display: grid; grid-template-columns: 1fr minmax(220px, .7fr) auto; align-items: center; gap: 17px; padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.safety-card.enabled { border-color: #e4d5b0; background: #fcf8ee; }
.safety-card h2 { font-size: 18px; margin: 0 0 7px; }
.safety-card p { color: var(--muted); font-size: 12px; margin: 0; }
.toast-region { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: flex; flex-direction: column; gap: 9px; max-width: calc(100vw - 44px); }
.toast { padding: 13px 17px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px; box-shadow: var(--shadow); max-width: 440px; font-size: 12px; }
.toast.error { color: #a43b40; border-left-color: var(--red); }
.toast.warning { color: #886022; border-left-color: var(--amber); }
.global-busy { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: #11182740; }
.busy-card { display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 25px; box-shadow: var(--shadow); }

/* Light viewer chrome; diagnostic pixels retain their original dark surround. */
.screen.viewer-screen { width: 100%; max-width: 1750px; padding: 20px 24px; }
.viewer-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.viewer-layout > .viewer-panels, .viewer-layout > .viewer-warning { grid-column: 1 / -1; }
.viewer-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; min-width: 0; }
.viewer-header .back-link { margin: 0; flex-shrink: 0; min-height: 36px; }
.viewer-identity { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: min(100%, 220px); }
.viewer-identity h1 { font-size: 18px; margin: 0; }
.viewer-identity .section-subtitle { font-size: 12px; }
.viewer-header .metric-row { margin: 0 0 0 auto; gap: 14px; }
.viewer-header .metric-card { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.viewer-header .metric-card b { margin: 0; white-space: nowrap; }
.viewer-header .metric-card.green b { font-size: 21px; }
.metric-row { display: flex; gap: 24px; flex-wrap: wrap; margin: 12px 0 18px; align-items: center; }
.metric-card { min-width: 130px; padding: 0; }
.metric-card span { display: block; color: var(--muted); font-size: 12px; }
.metric-card b { display: block; font-size: 17px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.metric-card.green b { font-size: 23px; color: var(--brand); }
.metric-card.amber { border-left: 3px solid var(--amber); }
.metric-card.mono b { font-size: 12px; }
.viewer-warning { flex: 1 1 300px; background: #fcf7ea; border: 1px solid #ead9b8; color: #815d22; font-size: 12px; padding: 15px; border-radius: 12px; }
.viewer-panels { display: grid; grid-template-areas: 'ir bscan enface'; grid-template-columns: minmax(140px, 1fr) minmax(300px, 2.3fr) minmax(140px, 1fr); align-items: start; gap: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.viewer-panel { min-width: 0; color-scheme: light; color: var(--text); }
.viewer-panel:nth-child(1) { grid-area: ir; }
.viewer-panel:nth-child(2) { grid-area: bscan; }
.viewer-panel:nth-child(3) { grid-area: enface; }
.viewer-panel > h2 { color: var(--text); font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.canvas-frame { position: relative; overflow: hidden; width: 100%; background: transparent; border-radius: 3px; line-height: 0; }
.bscan-frame { max-width: calc(clamp(300px, 100dvh - 220px, 850px) * var(--bscan-ratio, 1)); margin-inline: auto; }
.image-canvas { display: block; width: 100%; height: auto; background: black; }
.overlay-canvas { pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.panel-hint { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.panel-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; margin-top: 8px; flex-wrap: wrap; }
.toggle-row, .projection-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.check-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.scan-controls { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.scan-controls input[type=range] { flex: 1; min-width: 0; padding: 0; accent-color: var(--brand); }
.scan-controls .mono { min-width: 64px; text-align: right; color: var(--muted); font-size: 12px; }
.viewer-panel input[type=checkbox] { accent-color: var(--brand); }
.viewer-panel .scan-controls .button { background: var(--brand-soft); color: var(--brand); }
.projection-legend { margin-top: 10px; color: var(--muted); font-size: 12px; }
.legend-swatch { width: 12px; height: 12px; background: #00d20088; border: 1px solid #25c46a; border-radius: 3px; }
.frame-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.frame-status .button { flex-shrink: 0; }
.action-dialog { color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 28px; box-shadow: 0 25px 100px #11182725; }
.action-dialog::backdrop { background: #11182770; }
.action-dialog h2 { font-size: 24px; line-height: 1.25; margin: 0 0 14px; }
.action-dialog p { color: var(--muted); margin: 0 0 20px; }
.action-dialog .field { font-size: 13px; }
.toast { display: flex; align-items: flex-start; gap: 14px; }
.toast-dismiss { border: 0; background: transparent; color: inherit; font-size: 22px; line-height: 1; min-width: 30px; min-height: 30px; margin: -4px -6px; }
.remove-action:hover { color: var(--red); }
@media (pointer: coarse) { .button, .button.small, .nav-link, .tab-button, .check-label, .toast-dismiss, .account-area .button, .sidebar-toggle { min-height: 44px; } .sidebar-toggle { min-width: 44px; } input, select, textarea { font-size: 16px; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes loading-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

@media (max-width: 1200px) { .page-head { align-items: flex-start; } .admin-row { grid-template-columns: 1fr 1fr; } .admin-row .row-actions { justify-content: flex-start; flex-wrap: wrap; } .safety-card { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { :root { --sidebar: 205px; } .screen { padding: 30px 25px 24px; } .public-root { padding: 30px; } .viewer-panels { grid-template-columns: 1fr 1fr; grid-template-areas: 'bscan bscan' 'ir enface'; } .viewer-panel:nth-child(2) { width: 100%; max-width: 640px; justify-self: center; } .upload-progress li { padding: 15px 12px; gap: 7px; } }
@media (max-width: 820px) {
  .viewer-layout { grid-template-columns: minmax(0, 1fr); }
  .viewer-layout > .metric-row { gap: 16px; }
  .authenticated { padding-left: 0; }
  .app-header { position: relative; width: 100%; inset: auto; padding: 17px 20px 0; display: grid; grid-template-columns: 1fr auto; gap: 18px 12px; }
  .sidebar-heading { justify-content: flex-start; }
  .sidebar-heading .brand { padding: 0; order: 1; }
  .brand { padding: 0; }
  .brand b { font-size: 19px; }
  .account-area { padding: 0; border: 0; grid-column: 2; grid-row: 1; align-self: center; }
  .account-identity { display: none; }
  .main-nav { margin-top: 0; flex-direction: row; grid-column: 1 / -1; gap: 5px; padding-bottom: 12px; overflow-x: auto; }
  .mobile-nav-closed .main-nav { display: none; }
  .mobile-nav-closed .app-header { padding-bottom: 12px; }
  .nav-link { padding: 9px 8px; min-height: 44px; font-size: 12px; white-space: nowrap; gap: 6px; }
  .nav-link .icon { width: 16px; height: 16px; }
  .preview-note { padding: 8px 22px; }
  .screen { padding: 27px 22px 22px; }
  .registration-form { grid-template-columns: 1fr; }
  .registration-form > * { grid-column: 1 !important; }
  .scan-choice { grid-template-columns: 1fr; }
}
@media (min-width: 821px) {
  .sidebar-collapsed { --sidebar: 68px; }
  .sidebar-collapsed .app-header { padding: 18px 9px; }
  .sidebar-collapsed .sidebar-heading { flex-direction: column; gap: 12px; }
  .sidebar-collapsed .sidebar-heading .brand { padding: 0; }
  .sidebar-collapsed .brand-full, .sidebar-collapsed .nav-link span, .sidebar-collapsed .account-identity > div, .sidebar-collapsed #logout-button span { display: none; }
  .sidebar-collapsed .brand-short { display: inline; }
  .sidebar-collapsed .sidebar-chevron { transform: rotate(180deg); }
  .sidebar-collapsed .nav-link { justify-content: center; padding: 10px 0; }
  .sidebar-collapsed .account-identity { justify-content: center; }
  .sidebar-collapsed #logout-button { width: 100%; }
}
@media (max-width: 560px) {
  .viewer-header { gap: 8px 12px; }
  .viewer-header .back-link span { display: none; }
  .viewer-header .back-link { font-size: 24px; min-width: 32px; justify-content: center; }
  .viewer-header .viewer-identity { min-width: 0; flex-basis: calc(100% - 48px); }
  .viewer-header .metric-card { padding: 0; min-width: 0; flex: initial; }
  .screen { padding: 25px 16px 18px; }
  .page-head { gap: 17px; margin-bottom: 24px; }
  .page-head h1 { font-size: 28px; }
  .page-actions { width: 100%; }
  .page-actions > .button { flex: 1; }
  .collection-toolbar { flex-wrap: wrap; gap: 9px; }
  .search-wrap { width: 100%; }
  .sort-select { width: 100%; }
  .patient-card { padding: 20px; }
  .patient-stats dd { font-size: 12px; }
  .patient-latest { align-items: flex-start; font-size: 12px; }
  .public-root { padding: 24px 20px; }
  .lead { font-size: 15px; }
  .public-actions { gap: 9px; }
  .public-actions .button.large { flex: 1; padding-inline: 16px; }
  .upload-progress li { flex-direction: column; align-items: flex-start; padding: 13px 10px; gap: 6px; font-size: 12px; }
  .upload-progress li:not(:last-child)::after { top: 14px; }
  .upload-card, .finish-card { padding: 21px 17px; }
  .drop-zone { padding: 22px 14px; min-height: 235px; }
  .drop-zone strong { font-size: 16px; }
  .resume-note { align-items: flex-start; }
  .maintenance-notice { padding: 17px; }
  .viewer-panels { grid-template-columns: 1fr; grid-template-areas: 'bscan' 'ir' 'enface'; }
  .viewer-panel:last-child { grid-column: auto; }
  .metric-card { flex: 1 1 90px; min-width: 0; }
  .admin-row { grid-template-columns: 1fr; }
  .admin-row.compact { grid-template-columns: 1fr auto; }
  .active-jobs-head { flex-direction: column; gap: 4px; }
  .registration-shell, .message-shell { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  /* Show activity without rotation or displacement. Never run spin at a
     near-zero duration: that leaves a misleading frozen partial circle. */
  .large-spinner, .spinner {
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle, var(--brand) 60%, transparent 65%) left center / 22% 22% no-repeat,
      radial-gradient(circle, var(--brand) 60%, transparent 65%) center / 22% 22% no-repeat,
      radial-gradient(circle, var(--brand) 60%, transparent 65%) right center / 22% 22% no-repeat;
    animation: loading-pulse 1.8s ease-in-out infinite !important;
  }
}
@media (max-width: 360px) { .main-nav { gap: 2px; } .nav-link .icon { display: none; } }
.login-shell { width: min(360px, 100%); padding: 32px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.login-shell h1 { font-size: 26px; margin: 0 0 28px; }
.login-actions { display: flex; flex-direction: column; gap: 10px; }
.login-actions .button { min-height: 44px; font-size: 14px; }
@media (max-width: 560px) { .login-shell { padding: 28px; } }