/* 2026-11-05 視覺改版:參考臺大醫院(深藍字標、綠十字、黃色快捷區)與新竹臺大分院(青綠主色、淡薄荷底、圓形圖示)。
   需求方要求淺色系固定(color-scheme:light)。字型用系統中文字型、不載外部字型;圖示是 app.js 的 inline SVG:院區內網離線也能顯示。
   版面:清單頁單欄(統計列 + 清單卡);評分頁固定兩欄、不整頁捲動。 */
:root { color-scheme:light;
  --navy:#202B6D; --teal:#177E86; --teal-ink:#0F5F66; --teal-soft:#E3F1F1; --teal-line:#BBDCDC;
  --green:#1E7B46; --green-soft:#E4F2E8; --sun-soft:#FFF4CC; --sun-ink:#5C4A00;
  --coral:#C8463A; --coral-soft:#FBE7E4; --amber:#9A6700; --amber-soft:#FFF3D6;
  --bg:#F2F6F4; --card:#FFFFFF; --line:#D9E3E0; --fg:#1F2A37; --muted:#5E6C75;
  --accent:var(--teal); --accent-soft:var(--teal-soft); --warn:var(--amber); --crit:var(--coral); --ok:var(--green);
  --radius:12px; --shadow:0 1px 2px rgba(32,43,109,.05); }
* { box-sizing:border-box; } html, body { height:100%; } [hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC","Helvetica Neue",Arial,sans-serif; font-size:15px; line-height:1.6; }
a { color:var(--teal); } a:hover { color:var(--teal-ink); }
.ic { width:1.15em; height:1.15em; vertical-align:-0.2em; flex:none; }

/* ---- 頁首與品牌 ---- */
header.site { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 24px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; min-width:0; }
.mark { width:40px; height:40px; border-radius:50%; background:var(--teal-soft); color:var(--teal); display:inline-flex; align-items:center; justify-content:center; flex:none; } .mark .ic { width:22px; height:22px; }
.mark.lg { width:64px; height:64px; margin:0 auto 10px; } .mark.lg .ic { width:34px; height:34px; } .mark.sm { width:30px; height:30px; } .mark.sm .ic { width:17px; height:17px; }
.brand-text { display:flex; flex-direction:column; line-height:1.25; } .brand-text b { color:var(--navy); font-size:17px; } .brand-text small { color:var(--muted); font-size:12px; }
header.site nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
header.site nav a { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:8px; color:var(--fg); text-decoration:none; font-size:14px; }
header.site nav a:hover { background:var(--teal-soft); color:var(--teal-ink); } header.site nav a.on { color:var(--teal-ink); background:var(--teal-soft); font-weight:600; }
header.site nav .who { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; padding-right:12px; margin-right:4px; border-right:1px solid var(--line); } .who:empty { display:none; }
main { max-width:1280px; margin:0 auto; padding:20px 24px 40px; }

/* ---- 卡片與基本元件 ---- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); }
.card h2 { margin:0 0 8px; font-size:17px; color:var(--navy); display:flex; align-items:center; gap:8px; } .card-head { margin-bottom:6px; } .card-head p { margin:0; }
.grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; } @media (max-width:1000px){ .grid { grid-template-columns:1fr; } }
table { border-collapse:collapse; width:100%; } th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; } th { color:var(--muted); font-weight:600; font-size:13px; white-space:nowrap; }
th.num, td.num { text-align:right; font-variant-numeric:tabular-nums; } td.time { font-variant-numeric:tabular-nums; white-space:nowrap; } tbody tr:hover td { background:#F6FAF9; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:14px; } .kv dt { color:var(--muted); } .kv dd { margin:0; }
.tier-high, .risk-Markedly_Elevated, .stab-Critical { color:var(--crit); font-weight:700; } .stab-Unstable { color:var(--warn); font-weight:700; } .stab-Stable { color:var(--ok); font-weight:700; } .tier-medium, .risk-Elevated { color:var(--warn); font-weight:700; } .tier-low, .risk-Normal, .risk-Borderline { color:var(--ok); font-weight:700; }
.section { margin-bottom:12px; } .section h3 { margin:0 0 6px; font-size:15px; } .section pre { white-space:pre-wrap; font-family:inherit; margin:0; font-size:14px; }
.bar { height:8px; background:var(--line); border-radius:4px; overflow:hidden; } .bar > span { display:block; height:100%; background:var(--teal); }
form label { display:block; margin:8px 0 4px; font-size:14px; }
select, textarea, input[type=text], input[type=search], input[type=password] { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); font-size:14px; font-family:inherit; }
select:focus, textarea:focus, input:focus { outline:2px solid var(--teal-line); outline-offset:1px; border-color:var(--teal); }
button, .btn-link { background:var(--teal); color:#fff; border:none; border-radius:8px; padding:9px 16px; font-size:14px; font-family:inherit; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; line-height:1.3; }
button:hover, .btn-link:hover { background:var(--teal-ink); color:#fff; } button:disabled { opacity:.5; cursor:default; }
button.ghost { background:var(--card); color:var(--teal-ink); border:1px solid var(--line); } button.ghost:hover { background:var(--teal-soft); color:var(--teal-ink); } button.pri, .btn-link.pri { background:var(--teal); color:#fff; } button.wide { width:100%; justify-content:center; margin-top:14px; }
button:focus-visible, a:focus-visible, .scale b:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.muted { color:var(--muted); font-size:13px; } .err { color:var(--crit); font-size:13px; min-height:1.2em; margin:8px 0 0; }
.badge { display:inline-block; padding:1px 9px; border-radius:10px; border:1px solid var(--line); font-size:12px; color:var(--muted); font-weight:500; background:var(--card); } .kpi { font-size:28px; font-weight:700; color:var(--navy); }
pre.patient-info { white-space:pre-wrap; font-size:12px; line-height:1.5; max-height:420px; overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px; }

/* ---- 登入 ---- */
#login { max-width:440px; margin:56px auto; text-align:center; padding:28px 28px 22px; } #login h2 { justify-content:center; font-size:20px; } #login > p { margin:4px 0 14px; } #login form { text-align:left; }
.input-ic { position:relative; } .input-ic .ic { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted); width:18px; height:18px; } .input-ic input { padding-left:34px; }

/* ---- 清單頁:統計列 ---- */
.stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)) minmax(250px, 1.5fr); gap:12px; margin-bottom:16px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow); min-width:0; }
.tile .ico { width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:none; } .tile .ico .ic { width:22px; height:22px; }
.ico.sun { background:var(--sun-soft); color:var(--sun-ink); } .ico.green { background:var(--green-soft); color:var(--green); } .ico.teal { background:var(--teal-soft); color:var(--teal); } .ico.navy { background:#E8EAF4; color:var(--navy); }
.tile div { display:flex; flex-direction:column; line-height:1.2; min-width:0; } .tile b { font-size:24px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; } .tile div span { font-size:12px; color:var(--muted); margin-top:3px; }
.tile.cta { flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; background:var(--teal-soft); border-color:var(--teal-line); } .tile.cta button { font-size:15px; padding:10px 18px; }
@media (max-width:1000px){ .stats { grid-template-columns:1fr 1fr; } .tile.cta { grid-column:1 / -1; } }

/* ---- 清單頁:工具列、表格、分頁 ---- */
.toolbar { display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end; padding:12px 0 10px; border-top:1px solid var(--line); margin-top:10px; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; } .seg button { background:var(--card); color:var(--fg); border-radius:0; padding:8px 12px; font-size:14px; border-right:1px solid var(--line); }
.seg button:last-child { border-right:none; } .seg button.on { background:var(--teal); color:#fff; } .seg button:not(.on):hover { background:var(--teal-soft); color:var(--teal-ink); }
.search { position:relative; display:block; margin:0; width:220px; } .search .ic { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted); width:18px; height:18px; pointer-events:none; } .search input { padding-left:34px; }
.field { display:flex; flex-direction:column; gap:3px; margin:0; font-size:12px; color:var(--muted); } .field select { width:auto; min-width:118px; padding:7px 28px 7px 10px; } .field.inline { flex-direction:row; align-items:center; gap:6px; } .field.inline select { min-width:0; }
.toolbar .ghost { padding:8px 12px; } #result-count { margin:2px 0 6px; }
.table-wrap { overflow-x:auto; } th[data-sort] { cursor:pointer; user-select:none; } th[data-sort]:hover { color:var(--teal-ink); } th.sorted::after { content:" ▲"; font-size:10px; } th.sorted.desc::after { content:" ▼"; }
th .ic { color:var(--muted); margin-right:3px; width:15px; height:15px; }
td .pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:10px; font-size:12px; font-weight:600; white-space:nowrap; } .pill .ic { width:14px; height:14px; }
.pill.todo { background:var(--sun-soft); color:var(--sun-ink); } .pill.done { background:var(--green-soft); color:var(--green); } .pill.ok { background:var(--teal-soft); color:var(--teal-ink); }
.pill.run { background:var(--amber-soft); color:var(--amber); } .pill.fail { background:var(--coral-soft); color:var(--coral); } .pill.none { background:#EEF1F0; color:var(--muted); font-weight:500; }
td.case a { font-weight:600; text-decoration:none; } td.case a:hover { text-decoration:underline; } td .tag { display:inline-block; margin-left:6px; padding:0 7px; border-radius:8px; font-size:11px; background:var(--teal-soft); color:var(--teal-ink); vertical-align:1px; }
td .set-ic { color:var(--muted); margin-right:4px; } tr.rated td { color:var(--muted); } tr.rated td.case a { color:var(--muted); }
.empty { text-align:center; padding:36px 10px; color:var(--muted); } .empty .ic { width:36px; height:36px; color:var(--teal-line); } .empty p { margin:6px 0 0; }
.pager { display:flex; align-items:center; gap:10px; padding-top:12px; flex-wrap:wrap; } .pager .spacer { flex:1; }

/* ---- 評分頁:固定兩欄 ---- */
body.case-body { display:flex; flex-direction:column; overflow:hidden; }
.topbar { display:flex; align-items:center; gap:16px; padding:8px 16px; flex:none; background:var(--card); border-bottom:1px solid var(--line); }
.tb-left, .tb-right { display:flex; align-items:center; gap:10px; min-width:0; } .tb-left strong { white-space:nowrap; color:var(--navy); } .tb-back { margin:0; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.tb-mid { flex:1; display:flex; align-items:center; gap:10px; min-width:160px; }
.progress { flex:1; height:8px; background:var(--line); border-radius:4px; overflow:hidden; } .progress > span { display:block; height:100%; width:0; background:var(--teal); transition:width .2s; }
.kbd { font-family:ui-monospace,Menlo,monospace; font-size:12px; white-space:nowrap; }
.case-main { flex:1; display:grid; grid-template-columns:3fr 2fr; gap:0; max-width:none; padding:0; min-height:0; }
.pane-left { display:flex; flex-direction:column; min-width:0; min-height:0; border-right:1px solid var(--line); background:var(--card); }
.pane-right { display:flex; flex-direction:column; min-width:0; min-height:0; padding:14px; overflow:auto; }
.ecg-panel { position:relative; flex:none; padding:10px 14px 0; } .ecg-panel img.ecg { width:100%; max-height:260px; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:#fff; display:block; }
.ecg-panel.collapsed img.ecg { max-height:90px; object-fit:cover; object-position:top; } .ecg-panel #ecg-toggle { position:absolute; right:20px; top:16px; padding:3px 9px; font-size:12px; background:rgba(255,255,255,.92); }
.facts { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:10px 14px; flex:none; } .facts div { border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:12px; color:var(--muted); background:var(--bg); min-width:0; }
.facts div b { display:block; font-size:16px; color:var(--fg); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .facts div b.sm { font-size:12px; white-space:normal; line-height:1.3; }
.facts .fl { display:flex; align-items:center; gap:5px; color:var(--muted); } .facts .fl .ic { width:14px; height:14px; color:var(--teal); }
.tabs { display:flex; gap:0; padding:0 14px; border-bottom:1px solid var(--line); flex:none; overflow-x:auto; }
.tabs b { padding:8px 12px; font-weight:500; font-size:13px; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; } .tabs b.on { color:var(--teal-ink); border-color:var(--teal); font-weight:600; } .tabs b.done::before { content:"✓ "; color:var(--ok); } .tabs b.spacer { margin-left:auto; cursor:default; }
.report-body { flex:1; overflow:auto; padding:10px 14px; min-height:0; } .report-body .section h3 { color:var(--navy); } .report-body .section.dim { opacity:.45; }
.report-body .section li { margin-bottom:6px; }
.qcard { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:10px; flex:1; min-height:0; box-shadow:var(--shadow); }
.q-zh { font-size:19px; font-weight:600; line-height:1.45; text-wrap:balance; color:var(--navy); } .q-en { line-height:1.4; }
.scale { display:flex; gap:8px; } .scale b { flex:1; text-align:center; padding:14px 0; border:1px solid var(--line); border-radius:8px; font-size:20px; font-weight:600; cursor:pointer; user-select:none; background:var(--bg); font-variant-numeric:tabular-nums; }
.scale b:hover { border-color:var(--teal); background:var(--teal-soft); } .scale b.on { background:var(--teal); color:#fff; border-color:var(--teal); } .scale.ten b { padding:10px 0; font-size:16px; }
.anchors { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); } .anchors span { flex:1; } .anchors span:nth-child(2) { text-align:center; } .anchors span:last-child { text-align:right; }
.q-hint { font-size:13px; line-height:1.45; white-space:pre-line; }
.scale b small { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:2px; } .scale b.on small { color:#fff; }
.shap-panel { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; padding:0 14px 8px; flex:none; font-size:12px; position:relative; } .shap-panel h4 { margin:0 0 3px; font-size:12px; font-weight:600; color:var(--fg); }
.shap-panel h4 .muted { font-weight:400; } .shap-panel .sr { display:grid; grid-template-columns:minmax(0,1fr) 52px 64px 44px; gap:6px; align-items:center; padding:1px 0; }
.shap-panel .sf { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .shap-panel .sv, .shap-panel .ss { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.shap-panel .sb { height:8px; background:var(--line); border-radius:4px; overflow:hidden; } .shap-panel .sb i { display:block; height:100%; } .shap-panel .sb i.pos { background:var(--crit); } .shap-panel .sb i.neg { background:var(--teal); }
.shap-panel #shap-toggle { grid-column:1 / -1; justify-self:start; padding:2px 8px; font-size:12px; }
.anchors-list { display:flex; flex-direction:column; gap:3px; font-size:13px; line-height:1.4; } .anchors-list div { display:grid; grid-template-columns:22px 1fr; gap:6px; padding:4px 6px; border-radius:6px; cursor:pointer; color:var(--muted); }
.anchors-list div b { color:var(--fg); text-align:center; font-variant-numeric:tabular-nums; } .anchors-list div:hover { background:var(--teal-soft); } .anchors-list div.on { background:var(--teal-soft); color:var(--fg); box-shadow:inset 0 0 0 1px var(--teal-line); }
.q-en-rubric { font-size:12px; line-height:1.4; } .q-en-rubric summary { cursor:pointer; } .q-en-rubric p { margin:4px 0; white-space:pre-line; } .q-en-rubric ol { margin:4px 0 0; padding-left:18px; }
.q-ai { border:1px dashed var(--teal-line); border-radius:8px; padding:6px 10px; font-size:13px; background:#F7FBFB; } .q-ai summary { cursor:pointer; } .q-ai b { color:var(--teal-ink); }
.dots { display:flex; gap:5px; flex-wrap:wrap; margin-top:auto; } .dots i { width:18px; height:18px; border-radius:50%; background:var(--line); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-style:normal; color:transparent; }
.dots i.d { background:var(--teal); } .dots i.cur { outline:2px solid var(--teal); outline-offset:2px; background:var(--card); color:var(--teal); } .dots i:hover { color:var(--fg); }
.nav { display:flex; gap:8px; align-items:center; } .nav .pri { margin-left:auto; }
.qcard.shake { animation:shake .3s; } @keyframes shake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }
.choices { display:flex; gap:14px; } .choices label { display:flex; align-items:center; gap:6px; font-size:15px; cursor:pointer; }
.cmp-wrap { overflow:auto; max-height:52vh; } #compare-table td, #compare-table th { font-size:13px; padding:4px 6px; } #compare-table td.diff { color:var(--crit); font-weight:700; }
@media (max-width:1000px) { body.case-body { overflow:auto; } .case-main { grid-template-columns:1fr; } .pane-left { border-right:none; border-bottom:1px solid var(--line); } .report-body { max-height:50vh; } .facts { grid-template-columns:repeat(2,1fr); } .tb-right .kbd { display:none; } header.site { padding:10px 16px; } main { padding:16px; } }
@media (prefers-reduced-motion: reduce) { .progress > span { transition:none; } .qcard.shake { animation:none; } }

/* ---- 2026-11-09 提示編輯頁與帳號頁 ---- */
.prompts-main { display:grid; grid-template-columns:280px minmax(0,1fr); gap:16px; align-items:start; } .prompt-list h3 { font-size:13px; color:var(--muted); margin:14px 0 6px; font-weight:600; }
.pfile { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; background:var(--card); color:var(--fg); border:1px solid var(--line); padding:7px 10px; margin:4px 0; font-size:13px; font-family:ui-monospace, Menlo, Consolas, monospace; }
.pfile:hover { background:var(--teal-soft); color:var(--teal-ink); } .pfile.on { background:var(--teal); color:#fff; border-color:var(--teal); }
.prompt-pane textarea { width:100%; min-height:420px; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:13px; line-height:1.5; resize:vertical; white-space:pre; overflow:auto; }
.btn-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0; } .status { font-size:13px; color:var(--muted); } .status.ok { color:var(--ok); } .status.err { color:var(--crit); }
.notice { border-radius:8px; padding:10px 12px; font-size:13px; } .notice.warn { background:var(--amber-soft); color:var(--amber); } .notice.ok { background:var(--green-soft); color:var(--green); }
.history { list-style:none; padding:0; margin:0; } .history li { display:flex; gap:12px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); font-size:13px; } .history li span:first-child { min-width:150px; }
button.sm { padding:4px 10px; font-size:12px; } .small { font-size:12px; } #prompt-preview pre { white-space:pre-wrap; font-size:12px; max-height:420px; overflow:auto; background:var(--bg); padding:10px; border-radius:8px; }
.accounts-main { display:grid; gap:16px; max-width:960px; } .form-grid { display:grid; gap:6px; max-width:520px; } .form-grid label { font-size:13px; color:var(--muted); margin-top:6px; }
.form-grid input { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; }
#accounts-table tr.off td { color:var(--muted); } #accounts-table .acts { display:flex; gap:6px; justify-content:flex-end; } #onetime code { font-size:15px; background:var(--card); padding:2px 8px; border-radius:6px; border:1px solid var(--line); }
#login .pri { width:100%; margin-top:14px; } #login label { display:block; text-align:left; font-size:13px; color:var(--muted); margin:10px 0 4px; }
@media (max-width: 860px) { .prompts-main { grid-template-columns:1fr; } }