:root{
  --bg:#0f1720; --panel:#16212e; --ink:#e9eef3; --muted:#90a0b0;
  --accent:#fbbf24; --accent2:#38bdf8; --warn:#f87171; --line:#26384a;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  -webkit-tap-highlight-color:transparent}
.screen{display:none;min-height:100vh;padding:18px;max-width:560px;margin:0 auto;flex-direction:column}
.screen.active{display:flex}

/* 開始 */
.brand{font-size:34px;font-weight:800;letter-spacing:1px;margin-top:28px;color:var(--accent)}
.subtitle{color:var(--muted);margin:4px 0 22px}
.case-list{display:flex;flex-direction:column;gap:12px}
.case-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;cursor:pointer}
.case-card:active{transform:scale(.99)}
.case-card .t{font-size:18px;font-weight:700}
.case-card .m{color:var(--muted);font-size:13px;margin-top:4px}
.hint{color:var(--muted);font-size:13px;margin-top:16px;line-height:1.6}
.mode-toggle{display:flex;gap:8px;margin:0 0 20px}
.mode-toggle .seg{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:10px;font-size:15px;cursor:pointer}
.mode-toggle .seg.active{color:#241a04;background:var(--accent);border-color:var(--accent);font-weight:700}

/* 題目卡 */
#screen-door{justify-content:center;align-items:center}
.door-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;width:100%;text-align:center}
.door-timer{font-size:52px;font-weight:800;color:var(--accent2);font-variant-numeric:tabular-nums}
.door-label{color:var(--muted);margin:2px 0 18px;letter-spacing:2px}
.door-cc{font-size:22px;font-weight:700;line-height:1.5}
.door-vitals{margin:14px 0;color:var(--ink);background:#0c141d;border-radius:10px;padding:10px;font-variant-numeric:tabular-nums}
.door-instruction{color:var(--muted);font-size:14px;line-height:1.7;text-align:left}

/* 按鈕 */
.btn-primary,.btn-secondary{border:0;border-radius:12px;padding:14px;font-size:16px;font-weight:700;width:100%;margin-top:18px;cursor:pointer}
.btn-primary{background:var(--accent);color:#241a04}
.btn-secondary{background:var(--panel);color:var(--ink);border:1px solid var(--line)}

/* 考試列 */
.exam-bar{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.exam-timer{font-size:22px;font-weight:800;color:var(--accent2);font-variant-numeric:tabular-nums}
.exam-title{flex:1;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-finish{background:transparent;color:var(--warn);border:1px solid var(--warn);border-radius:9px;padding:6px 10px;font-size:13px}
.btn-switch{flex:none;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:13px;cursor:pointer}
.phase-tabs{display:flex;gap:8px;margin:12px 0}
.tab{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:10px;font-size:15px}
.tab.active{color:#241a04;background:var(--accent);border-color:var(--accent);font-weight:700}
.phase{flex:1;min-height:0;display:flex;flex-direction:column}
.phase.hidden{display:none}

/* 聊天 */
#screen-exam.active{height:100vh;max-height:100vh;overflow:hidden}
.chat{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:6px 2px}
.bubble{max-width:82%;padding:10px 13px;border-radius:14px;line-height:1.5;font-size:15px;white-space:pre-wrap}
.bubble.me{align-self:flex-end;background:var(--accent2);color:#04222e;border-bottom-right-radius:4px}
.bubble.sp{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px}
.bubble.ex{align-self:flex-start;background:#2a2414;border:1px solid #6b5a2f;color:#eae3cb;border-bottom-left-radius:4px}
.bubble.sys{align-self:center;background:transparent;color:var(--muted);font-size:13px;text-align:center}
.bubble .tag{font-size:11px;opacity:.7;display:block;margin-top:3px}

/* 聆聽指示列（取代輸入列；考試中不操作）*/
.listen-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;margin-top:8px;
  border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.mic-dot{width:14px;height:14px;border-radius:50%;background:#3a4a5a;flex:none}
.mic-dot.live{background:var(--warn);animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(248,113,113,.6)}70%{box-shadow:0 0 0 12px rgba(248,113,113,0)}100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}}

/* 輸入列 */
.input-bar{display:flex;gap:8px;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.btn-mic{width:54px;height:48px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-size:22px}
.btn-mic.live{background:var(--warn);border-color:var(--warn)}
#text-input{flex:1;background:#0c141d;border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--ink);font-size:15px}
.btn-send{background:var(--accent);border:0;border-radius:12px;padding:0 14px;height:48px;font-weight:700;color:#241a04}

/* 推理表單 */
.ddx-block{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.ddx-block h4{margin:0 0 8px;color:var(--accent)}
.ddx-block input{width:100%;background:#0c141d;border:1px solid var(--line);border-radius:9px;padding:9px;color:var(--ink);margin-bottom:7px;font-size:14px}

/* 報告 */
#screen-report{overflow-y:auto}
.total{font-size:46px;font-weight:800;color:var(--accent);text-align:center;margin:8px 0}
.block-row{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.block-row .bh{display:flex;justify-content:space-between;font-weight:700;margin-bottom:6px}
.bar{height:8px;background:#0c141d;border-radius:6px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent)}
.warn-box{background:#2a1414;border:1px solid var(--warn);border-radius:12px;padding:12px;margin:10px 0;color:#ffd7d7;font-size:14px}
.miss-box{color:var(--muted);font-size:13px;line-height:1.7;margin-top:8px}

/* 逐項證據明細（A4） */
.block-items{margin-top:8px;border-top:1px dashed var(--line);padding-top:6px}
.block-items summary{cursor:pointer;color:var(--muted);font-size:13px}
.block-items .item{padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px}
.block-items .item.ok{color:var(--ink)}
.block-items .item.miss{color:var(--muted)}
.block-items .via{margin-left:6px;font-size:11px;padding:1px 6px;border-radius:8px;background:#3a3112;color:var(--accent)}
.block-items .via.zero{background:#3a1212;color:#ffb4b4}
.block-items .quote{margin:3px 0 0 18px;color:var(--muted);font-size:12px;line-height:1.5}
.block-items .suggest{margin:3px 0 0 18px;color:var(--accent);font-size:12px;line-height:1.5}

/* 歷史成績（開始畫面） */
.history-box{margin-top:16px}
.hist-details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.hist-details summary{cursor:pointer;color:var(--muted);font-size:14px;font-weight:700}
.hist-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.hist-row{display:flex;align-items:center;gap:10px;font-size:13px}
.hist-date{color:var(--muted);font-variant-numeric:tabular-nums;flex:none;width:88px}
.hist-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-score{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.hs-pass{color:var(--accent)}
.hs-fail{color:var(--warn)}
.hist-cases{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px;display:flex;flex-direction:column;gap:4px}
.hist-case{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.hist-case span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-sum{flex:none;font-variant-numeric:tabular-nums}
.hist-weak{margin-top:10px;font-size:13px;color:var(--accent2);font-weight:700}

/* 整體表現 GRS（實驗性、不計分） */
.grs-card{background:var(--panel);border:1px dashed var(--line);border-radius:12px;padding:12px;margin-top:10px}
.grs-card .bh{display:flex;justify-content:space-between;font-weight:700;margin-bottom:6px;color:var(--muted)}
.grs-rationale{font-size:13px;color:var(--ink);margin-bottom:6px}
.grs-card .item{padding:5px 2px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.04)}
.grs-card .item.ok{color:var(--ink)}
.grs-card .item.miss{color:var(--muted)}
.grs-card .quote{margin:2px 0 0 18px;color:var(--muted);font-size:12px}
.grs-disclaimer{margin-top:8px;font-size:11px;color:var(--muted);opacity:.8}