:root { --canvas:#f4f7fa; --surface:#fff; --surface-muted:#f8fafc; --ink:#15233a; --ink-muted:#718096; --line:#dbe4ee; --blue:#1769c2; --blue-soft:#eaf3ff; --green:#1b9a70; --shadow:0 8px 24px rgba(25,55,88,.06); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--canvas); color:var(--ink); font-family:"Noto Sans SC",sans-serif; font-size:14px; }
button,a { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
.sidebar { position:fixed; inset:0 auto 0 0; width:228px; display:flex; flex-direction:column; padding:28px 16px 20px; background:var(--surface); border-right:1px solid var(--line); z-index:2; }
.brand { display:flex; align-items:center; gap:10px; padding:0 12px; font:700 20px/1 "Plus Jakarta Sans",sans-serif; letter-spacing:0; }.brand span span { color:var(--blue); }.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:7px; background:var(--blue); color:#fff; font-size:16px; }
.nav-list { display:grid; gap:5px; margin-top:52px; }.nav-item { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:6px; color:#66778d; font-weight:500; }.nav-item:hover,.nav-item.active { color:var(--blue); background:var(--blue-soft); }.nav-icon { display:grid; place-items:center; width:19px; font:600 13px/1 "Plus Jakarta Sans",sans-serif; }
.sidebar-footer { margin-top:auto; padding:16px 12px 0; border-top:1px solid var(--line); color:var(--ink-muted); font-size:12px; }.security-note,.api-status { display:flex; align-items:center; gap:7px; }.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); }.support-link { display:inline-block; margin-top:14px; color:var(--ink-muted); }
.app-shell { min-height:100vh; margin-left:228px; }.topbar { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 36px; background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); }.eyebrow,.section-kicker { margin:0 0 4px; color:#8190a5; font:600 10px/1.2 "Plus Jakarta Sans",sans-serif; letter-spacing:0; } h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:19px; font-weight:700; } h2 { margin-bottom:0; font-size:16px; font-weight:700; }.topbar-actions { display:flex; align-items:center; gap:20px; }.api-status { color:#66778d; font-size:12px; }.api-status .status-dot { background:#aab7c7; }.user-menu { display:flex; align-items:center; gap:9px; padding:4px; border:0; background:transparent; color:var(--ink); }.avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#dceafa; color:#295a90; font:700 12px/1 "Plus Jakarta Sans",sans-serif; }.user-name { font-size:13px; font-weight:600; }.chevron { color:var(--ink-muted); font-size:16px; }
.workspace { max-width:1600px; display:grid; grid-template-columns:minmax(0,58fr) minmax(340px,42fr); gap:24px; margin:0 auto; padding:28px 36px 48px; }.image-column,.results-column { min-width:0; }.image-column { display:grid; align-content:start; gap:20px; }.results-column { display:grid; align-content:start; gap:14px; }.card,.upload-dropzone { background:var(--surface); border:1px solid var(--line); border-radius:7px; box-shadow:var(--shadow); }
.upload-dropzone { display:flex; align-items:center; gap:15px; min-height:112px; padding:20px; border-style:dashed; border-color:#acc9e7; box-shadow:none; }.upload-icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:6px; background:var(--blue-soft); color:var(--blue); font:600 22px/1 "Plus Jakarta Sans",sans-serif; }.upload-dropzone h2 { font-size:15px; }.upload-dropzone p,.localization-panel p,.history-panel p { margin:5px 0 0; color:var(--ink-muted); font-size:12px; }.outline-button { margin-left:auto; padding:9px 13px; border:1px solid #a8c7e8; border-radius:5px; background:#fff; color:var(--blue); font-size:12px; font-weight:600; }.outline-button:hover { background:var(--blue-soft); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }.upload-dropzone.drag-active { border-color:var(--blue); background:var(--blue-soft); }.upload-error { flex-basis:100%; margin:0!important; color:#b42318!important; font-weight:600; }.image-actions { display:flex; justify-content:flex-end; gap:14px; min-height:20px; padding:0 22px 12px; }.uploaded-image { display:block; width:100%; height:100%; max-height:min(52vw,500px); object-fit:contain; }.example-thumbnail { cursor:pointer; font:inherit; }.example-thumbnail:hover { border-color:#a8c7e8; background:var(--blue-soft); }
.card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 22px 15px; }.card-header.compact { padding:16px 18px 12px; }.stage-meta,.subtle-label { color:var(--ink-muted); font-size:12px; }.image-placeholder { position:relative; display:grid; place-content:center; justify-items:center; min-height:min(52vw,500px); margin:0 22px; overflow:hidden; background:#edf2f7; border:1px solid #e0e8f0; color:#74859a; text-align:center; }.placeholder-frame { position:relative; width:162px; height:206px; border:1px solid #bfcedd; border-radius:74px 74px 32px 32px; opacity:.85; }.placeholder-cross { position:absolute; background:#c7d5e2; }.placeholder-cross.vertical { top:12px; bottom:12px; left:calc(50% - .5px); width:1px; }.placeholder-cross.horizontal { top:46%; right:18px; left:18px; height:1px; }.placeholder-lung { position:absolute; top:43px; width:53px; height:112px; border:1px solid #c4d3df; border-radius:48% 44% 42% 46%; }.placeholder-lung.left { left:20px; transform:rotate(4deg); }.placeholder-lung.right { right:20px; transform:rotate(-4deg); }.image-placeholder p { margin:18px 0 5px; color:#5c6e82; font-size:14px; font-weight:600; }.image-placeholder>span { font-size:12px; }.image-toolbar { display:flex; gap:10px; padding:13px 22px; color:var(--ink-muted); font:500 11px/1 "Plus Jakarta Sans",sans-serif; }.toolbar-separator { width:1px; height:13px; margin:0 8px; background:var(--line); }
.scan-overlay { display:none; position:absolute; inset:12px; pointer-events:none; }.image-stage.is-analyzing .scan-overlay { display:block; }.scan-line { position:absolute; right:12px; left:12px; top:0; height:2px; background:#3986cb; box-shadow:0 0 7px rgba(57,134,203,.38); animation:scan-image 2.4s ease-in-out infinite; }.scan-corner { position:absolute; width:19px; height:19px; border-color:#5b97ce; border-style:solid; border-width:0; opacity:.9; }.scan-corner.top-left { top:0; left:0; border-top-width:1px; border-left-width:1px; }.scan-corner.top-right { top:0; right:0; border-top-width:1px; border-right-width:1px; }.scan-corner.bottom-left { bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }.scan-corner.bottom-right { right:0; bottom:0; border-right-width:1px; border-bottom-width:1px; }@keyframes scan-image { 0% { top:0; opacity:.25; } 12%,88% { opacity:1; } 100% { top:calc(100% - 2px); opacity:.25; } }
.prediction-overlay { position:absolute; inset:0; pointer-events:none; }.prediction-overlay:not(.visible) { display:none; }.prediction-overlay-image { width:100%; height:100%; object-fit:contain; opacity:.56; filter:hue-rotate(128deg) saturate(.72); }.prediction-boxes { position:absolute; inset:0; }.prediction-box { position:absolute; border:1px solid #2378bf; background:rgba(58,143,207,.12); box-shadow:0 0 0 1px rgba(255,255,255,.5) inset; }.prediction-box-label { position:absolute; top:-22px; left:-1px; max-width:160px; overflow:hidden; padding:3px 6px; background:#eaf3ff; border:1px solid #9bc2e5; color:#235b8f; font-size:11px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }.image-view-toggle { display:flex; gap:2px; padding:2px; border:1px solid var(--line); border-radius:5px; background:#f5f8fb; }.view-toggle-button { border:0; border-radius:3px; background:transparent; color:var(--ink-muted); font-size:11px; padding:4px 7px; }.view-toggle-button.active { background:#fff; color:var(--blue); box-shadow:0 1px 3px rgba(25,55,88,.12); }
.thumbnail-section { padding:0 2px; }.section-row { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }.section-row h2 { font-size:14px; }.section-row span { color:var(--ink-muted); font-size:12px; }.thumbnail-list { display:flex; gap:10px; }.thumbnail { width:92px; height:74px; padding:8px; border:1px solid var(--line); border-radius:5px; background:var(--surface-muted); color:#8493a4; }.thumbnail span { font:600 10px/1 "Plus Jakarta Sans",sans-serif; }.thumbnail p { margin:29px 0 0; font-size:10px; text-align:center; }
.analysis-status { border-left:3px solid #b9c9dc; }.analysis-status.is-analyzing { border-left-color:#5896cf; }.analysis-status.is-error { border-left-color:#c95a58; }.status-badge { padding:5px 8px; border-radius:4px; font-size:11px; font-weight:600; }.status-badge.neutral { background:#eef2f6; color:#6d7c90; }.status-badge.active { background:var(--blue-soft); color:var(--blue); }.analysis-stage-text { margin:0; padding:0 18px 17px; color:var(--ink-muted); font-size:13px; }.analysis-status.is-analyzing .analysis-stage-text { color:#356c9f; font-weight:600; }.analysis-error { margin:0; padding:0 18px 17px; color:#b42318; font-size:12px; line-height:1.55; }
.result-summary { padding:18px; }.summary-placeholder { margin:12px 0 18px; color:#62748a; line-height:1.7; }.confidence-row { display:grid; grid-template-columns:108px 1fr; align-items:center; gap:14px; padding-top:14px; border-top:1px solid var(--line); }.confidence-row div:first-child { display:grid; gap:3px; color:var(--ink-muted); font-size:11px; }.confidence-row strong { color:var(--ink); font:700 17px/1 "Plus Jakarta Sans",sans-serif; }.confidence-track { height:6px; overflow:hidden; border-radius:4px; background:#e8eef5; }.confidence-track span { display:block; width:0; height:100%; background:var(--blue); }.empty-result { margin:0 18px 17px; padding:13px; border:1px dashed #d5e0ec; color:var(--ink-muted); font-size:12px; text-align:center; }.localization-panel p,.history-panel p { padding:0 18px 17px; }.text-button { padding:0; border:0; background:transparent; color:var(--blue); font-size:12px; font-weight:600; }.report-lines { display:grid; gap:9px; padding:1px 18px 0; }.report-lines span { display:block; height:8px; border-radius:2px; background:#edf2f7; }.report-lines span:nth-child(2) { width:87%; }.report-lines span:nth-child(3) { width:69%; }.report-placeholder { margin:12px 18px 17px; color:var(--ink-muted); font-size:12px; }
.classification-cards { display:grid; gap:9px; padding:0 18px 17px; }.classification-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 10px; align-items:center; font-size:12px; }.classification-name { overflow:hidden; color:#52667c; text-overflow:ellipsis; white-space:nowrap; }.classification-value { color:#285d8d; font:600 12px/1 "Plus Jakarta Sans",sans-serif; }.classification-track { grid-column:1 / -1; height:4px; overflow:hidden; background:#e7eef5; }.classification-fill { display:block; height:100%; background:#5d9cd2; }.localization-content { padding:0 18px 14px; }.localization-panel .localization-item,.localization-panel .localization-empty { margin:0; padding:8px 0; border-top:1px solid #edf1f5; color:#576a7f; font-size:12px; line-height:1.55; }.localization-panel .localization-empty { color:var(--ink-muted); }.gradcam-preview { display:block; width:calc(100% - 36px); max-height:180px; margin:0 18px 12px; object-fit:contain; border:1px solid var(--line); background:#f7f9fb; }
.history-list { display:grid; gap:8px; padding:0 18px 17px; }.history-item { display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; width:100%; padding:8px; border:1px solid #e4ebf2; border-radius:5px; background:#fbfcfd; color:var(--ink); text-align:left; }.history-item:hover { border-color:#a8c7e8; background:var(--blue-soft); }.history-thumb { display:grid; place-items:center; width:42px; height:42px; overflow:hidden; border:1px solid #d6e1eb; border-radius:4px; background:#edf2f7 center/cover no-repeat; color:#7a8ca0; font:600 10px/1 "Plus Jakarta Sans",sans-serif; }.history-item-content { display:grid; min-width:0; gap:3px; }.history-filename,.history-conclusion,.history-time { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.history-filename { font-size:12px; }.history-conclusion { color:#60748a; font-size:11px; }.history-time { color:#91a0af; font-size:10px; }.history-empty,.history-notice { margin:0; padding:0 18px 17px; color:var(--ink-muted); font-size:12px; }.history-notice { padding-top:0; color:#9a6a27; }
.prominent-report { min-height:290px; border-top:3px solid var(--blue); box-shadow:0 10px 28px rgba(25,55,88,.09); }.report-actions { display:flex; gap:12px; }.report-tabs { display:flex; gap:2px; overflow-x:auto; padding:0 18px; border-bottom:1px solid var(--line); }.report-tab { flex:0 0 auto; padding:8px 4px 9px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink-muted); font-size:12px; }.report-tab.active { border-bottom-color:var(--blue); color:var(--blue); font-weight:600; }.report-body { min-height:205px; padding:14px 18px 17px; }.report-editor { display:block; width:100%; min-height:175px; resize:vertical; padding:12px; border:1px solid #cbd9e7; border-radius:5px; background:#fbfdff; color:#30465d; font:400 13px/1.8 "Noto Sans SC",sans-serif; white-space:pre-wrap; }.report-editor:focus { outline:2px solid rgba(23,105,194,.18); border-color:#74a9d9; }.report-editor::placeholder { color:#91a0af; }.report-content,.report-empty { margin:0; color:#52667c; font-size:12px; line-height:1.8; white-space:pre-wrap; }.report-empty { color:var(--ink-muted); }
.priority-diagnosis { display:flex; align-items:baseline; gap:12px; margin:0 18px 12px; padding:13px 14px; border:1px solid #e7c47f; border-left:4px solid #d58a21; border-radius:5px; background:#fff8e8; }.priority-label { color:#94631f; font-size:11px; font-weight:700; letter-spacing:.04em; }.priority-value { color:#8a4d0e; font-size:21px; line-height:1.35; }
@media (max-width:1100px) { .workspace { padding-right:24px; padding-left:24px; gap:18px; }.topbar { padding-right:24px; padding-left:24px; }.user-name { display:none; } }
@media (max-width:900px) { .sidebar { position:static; width:auto; min-height:0; flex-direction:row; align-items:center; padding:14px 20px; border-right:0; border-bottom:1px solid var(--line); }.brand { padding:0; }.nav-list { display:flex; margin:0 0 0 auto; }.nav-item { min-height:34px; padding:0 8px; }.nav-item span:last-child,.sidebar-footer { display:none; }.app-shell { margin-left:0; }.workspace { grid-template-columns:1fr; max-width:820px; padding:22px 20px 38px; }.topbar { padding:16px 20px; }.image-placeholder { min-height:430px; } }
@media (max-width:560px) { .sidebar { padding:12px 14px; }.brand { font-size:17px; }.brand-mark { width:28px; height:28px; }.nav-list { gap:1px; }.nav-item { padding:0 6px; }.topbar { align-items:flex-start; } h1 { font-size:16px; }.eyebrow { font-size:8px; }.api-status { display:none; }.workspace { padding:16px 14px 30px; }.upload-dropzone { flex-wrap:wrap; }.outline-button { margin:0 0 0 auto; }.image-placeholder { min-height:330px; margin:0 14px; }.card-header,.card-header.compact { padding-right:14px; padding-left:14px; }.image-toolbar { padding-right:14px; padding-left:14px; }.user-menu { padding-right:0; } }
.textbook-content { padding:0 18px 16px; }.textbook-empty,.textbook-disclaimer,.textbook-query { margin:0 18px 16px; color:var(--ink-muted); font-size:12px; line-height:1.65; }.textbook-content .textbook-query { margin:0 0 12px; color:#49637c; }.textbook-match { padding:11px 0; border-top:1px solid #edf1f5; }.textbook-match h3 { margin:0 0 5px; color:#2c5578; font-size:13px; }.textbook-source,.textbook-quote,.textbook-support,.textbook-counter { margin:4px 0 0; color:#65798d; font-size:11px; line-height:1.55; }.textbook-quote { color:#415d73; }.textbook-support { color:#287451; }.textbook-counter { color:#9a6b2d; }.textbook-disclaimer { margin:12px 0 0; padding-top:10px; border-top:1px solid #edf1f5; font-size:11px; }
.differential-content { padding:0 18px 16px; }.differential-empty { margin:0 18px 17px; color:var(--ink-muted); font-size:12px; line-height:1.65; }.differential-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:10px 0; border-top:1px solid #edf1f5; }.differential-row.primary { border-top:0; }.differential-label { display:flex; align-items:baseline; gap:8px; min-width:0; }.differential-label strong { overflow:hidden; color:#3d5870; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.differential-rank { color:#8493a4; font-size:10px; }.differential-probability { color:#285d8d; font:600 13px/1 "Plus Jakarta Sans",sans-serif; }.differential-gap { grid-column:1 / -1; color:#8696a6; font-size:10px; }.differential-note,.differential-evidence { margin:10px 0 0; padding:9px 10px; border-top:1px solid #edf1f5; color:#65798d; font-size:11px; line-height:1.55; }.differential-note.warning { color:#8a5b19; background:#fff8ea; border:1px solid #ead3a7; }.differential-evidence { color:#287451; }
.feedback-content { padding:0 18px 16px; }.feedback-prompt { margin:0 0 12px; color:var(--ink-muted); font-size:11px; line-height:1.65; }.feedback-actions { display:grid; grid-template-columns:repeat(3, 1fr); gap:7px; }.feedback-button,.feedback-save-button,.feedback-export-button { min-height:32px; border:1px solid #cad8e5; border-radius:4px; background:#fff; color:#52667c; font:600 11px/1 "Noto Sans SC",sans-serif; }.feedback-button:hover,.feedback-button.selected { border-color:#74a9d9; background:#edf6ff; color:#285d8d; }.feedback-button.not_supported.selected { border-color:#e4c18b; background:#fff8ea; color:#8a5b19; }.feedback-reasons { display:grid; gap:7px; margin-top:11px; padding-top:11px; border-top:1px solid #edf1f5; }.feedback-reason { display:flex; align-items:center; gap:7px; color:#65798d; font-size:11px; }.feedback-reason input { accent-color:#397db7; }.feedback-save-button,.feedback-export-button { justify-self:start; margin-top:2px; padding:0 10px; color:#285d8d; border-color:#a8c7e8; }.feedback-button:disabled,.feedback-save-button:disabled { cursor:default; opacity:.55; }.feedback-summary { margin:10px 0 0; color:var(--ink-muted); font-size:11px; }
.teaching-panel .teaching-empty { margin:0; padding:0 18px 16px; color:var(--ink-muted); font-size:11px; line-height:1.6; }
.teaching-content { padding:0 18px 16px; }.teaching-prompt,.teaching-result { color:var(--ink-muted); font-size:11px; line-height:1.6; }.teaching-input { width:100%; box-sizing:border-box; min-height:32px; margin:5px 0 8px; padding:0 9px; border:1px solid #cad8e5; border-radius:4px; font:400 11px "Noto Sans SC",sans-serif; }.teaching-button { min-height:30px; padding:0 11px; border:1px solid #a8c7e8; border-radius:4px; background:#edf6ff; color:#285d8d; font:600 11px/1 "Noto Sans SC",sans-serif; }
@media (prefers-reduced-motion: reduce) { .scan-line { top:50%; transform:translateY(-50%); animation:none; } }
:root { --triage-border: #cbd9e8; }
.below-image-modules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.below-image-modules > .card { min-width:0; }
.utility-page { max-width:1180px; margin:0 auto; padding:34px 36px 60px; }
.page-heading { margin-bottom:22px; }
.page-heading h2 { margin:0 0 8px; font-size:24px; }
.page-heading > p:last-child { margin:0; color:var(--ink-muted); font-size:13px; }
.utility-page .prominent-report { max-width:920px; }
.settings-card { max-width:760px; padding:4px 20px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.settings-row:last-child { border-bottom:0; }
.settings-row div { display:grid; gap:5px; }
.settings-row strong { font-size:13px; }
.settings-row span { color:var(--ink-muted); font-size:11px; }
.settings-row code { color:#47627d; font-size:12px; }
@media (max-width:900px) { .utility-page { padding:24px 20px 40px; } }
@media (max-width:560px) { .below-image-modules { grid-template-columns:1fr; }.utility-page { padding:20px 14px 32px; }.settings-row { align-items:flex-start; flex-direction:column; gap:8px; } }
.triage-note { display:inline-flex; margin:0 0 15px; padding:4px 8px; border:1px solid var(--triage-border); border-radius:4px; color:#536d86; background:#f5f8fb; font-size:11px; }
.triage-note[data-tier="high"] { border-color:#a8d4bd; color:#236b45; background:#effaf3; }
.triage-note[data-tier="review"] { border-color:#e4c18b; color:#8a5b19; background:#fff8ea; }