:root{
  --bg:#0f172a; --bg2:#1e293b; --card:#1e293b; --card2:#273449;
  --accent:#38bdf8; --accent2:#22d3ee; --good:#4ade80; --warn:#fbbf24;
  --text:#e2e8f0; --muted:#94a3b8; --line:#334155;
  --radius:16px; --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
#appbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;
  background:rgba(15,23,42,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
#title{flex:1; font-weight:700; font-size:17px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.iconbtn{
  background:var(--card2); border:none; color:var(--text); font-size:20px;
  width:40px; height:40px; border-radius:12px; flex:0 0 auto;
}
#backBtn{font-size:26px; line-height:1}
main{padding:16px 14px calc(120px + var(--safe-b)); max-width:760px; margin:0 auto}

/* 首頁科目卡 */
.hero{margin:8px 4px 18px}
.hero h1{font-size:22px; margin:0 0 6px}
.hero p{color:var(--muted); margin:0; font-size:14px}
.grid{display:grid; gap:14px}
.subjcard{
  display:flex; align-items:center; gap:14px; padding:18px;
  background:linear-gradient(135deg,var(--card),var(--card2));
  border:1px solid var(--line); border-radius:var(--radius);
}
.subjcard .emoji{font-size:34px}
.subjcard .meta{flex:1}
.subjcard h2{margin:0 0 2px; font-size:18px}
.subjcard small{color:var(--muted)}
.subjcard .chev{color:var(--accent); font-size:24px}
.subjcard.locked{opacity:.55}
.badge{font-size:11px; background:var(--accent); color:#06283d; padding:2px 8px; border-radius:999px; font-weight:700}
.badge.soon{background:var(--warn); color:#3a2c00}

/* 考卷列表 */
.examrow{
  display:flex; align-items:center; gap:12px; padding:15px 16px; margin-bottom:10px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
}
.examrow .yr{font-weight:800; color:var(--accent2); font-size:15px; min-width:42px}
.examrow .info{flex:1}
.examrow .info b{display:block; font-size:15px}
.examrow .info small{color:var(--muted)}
.examrow .chev{color:var(--accent)}

/* 題目卡 */
.qnav{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 16px}
.qchip{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font-weight:700; font-size:15px;
}
.qchip.active{background:var(--accent); color:#06283d; border-color:var(--accent)}
.qchip.done{border-color:var(--good)}

.qcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:16px}
.qhead{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.qhead .num{background:var(--accent); color:#06283d; font-weight:800; border-radius:10px; padding:4px 12px; font-size:15px}
.tags{display:flex; flex-wrap:wrap; gap:6px; flex:1}
.tag{font-size:11px; color:var(--accent2); border:1px solid var(--line); padding:2px 8px; border-radius:999px}
.stem{font-size:16px; margin:6px 0 4px}
.figure-note{font-size:13px; color:var(--warn); background:rgba(251,191,36,.08); border:1px dashed rgba(251,191,36,.4); padding:8px 10px; border-radius:10px; margin:8px 0}
.figure-note a{color:var(--accent)}

.section{margin-top:14px; border-top:1px dashed var(--line); padding-top:12px}
.section h4{margin:0 0 8px; font-size:14px; display:flex; align-items:center; gap:8px; color:var(--accent2)}
.section h4 .ic{font-size:16px}
.idea li, .sol li{margin:0 0 8px}
.idea{padding-left:20px} .sol{padding-left:20px}
.answer{background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.35); border-radius:12px; padding:10px 12px; font-size:16px}
.answer b{color:var(--good)}

.diagram{margin:14px 0; padding:12px; background:#f8fafc; border:1px solid var(--line); border-radius:14px; text-align:center}
.diagram svg{max-width:100%; height:auto; display:block; margin:0 auto}
.diagram figcaption{margin-top:8px; font-size:13px; color:#475569}

.collapsed{display:none}
.revealbtn{width:100%; padding:12px; border-radius:12px; border:1px dashed var(--line); background:transparent; color:var(--accent); font-size:15px; font-weight:600; margin-top:6px}

/* 朗讀 / 操作鈕 */
.actionrow{display:flex; gap:10px; margin-top:14px}
.bigbtn{flex:1; padding:14px; border-radius:14px; border:none; font-size:16px; font-weight:700}
.bigbtn.play{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#06283d}
.bigbtn.nav{background:var(--card2); color:var(--text); border:1px solid var(--line)}
.bigbtn:disabled{opacity:.4}

/* 播放浮列 */
#player{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px calc(12px + var(--safe-b));
  background:rgba(30,41,59,.97); backdrop-filter:blur(10px); border-top:1px solid var(--line);
}
.pbtn{background:var(--accent); color:#06283d; border:none; border-radius:12px; padding:11px 16px; font-weight:700; font-size:15px}
.pbtn.ghost{background:var(--card2); color:var(--text); border:1px solid var(--line)}
#speakLabel{flex:1; color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* 設定面板 */
.sheet{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.5); display:flex; align-items:flex-end}
.sheet-inner{width:100%; max-width:760px; margin:0 auto; background:var(--bg2); border-radius:20px 20px 0 0; padding:20px 18px calc(28px + var(--safe-b)); border:1px solid var(--line)}
.sheet h3{margin:0 0 14px}
.sheet label{display:block; margin:14px 0; font-size:14px}
.sheet input[type=range]{width:100%; margin-top:8px; accent-color:var(--accent)}
.sheet select{width:100%; margin-top:8px; padding:10px; border-radius:10px; background:var(--card); color:var(--text); border:1px solid var(--line); font-size:15px}
.hint{color:var(--muted); font-size:12px; line-height:1.6}

.toast{position:fixed; left:14px; right:14px; bottom:calc(20px + var(--safe-b)); z-index:50; background:var(--card2); border:1px solid var(--line); border-radius:14px; padding:14px; font-size:13px; color:var(--text); box-shadow:0 10px 30px rgba(0,0,0,.4)}

.empty{text-align:center; color:var(--muted); padding:50px 20px}
.spin{text-align:center; padding:40px; color:var(--muted)}
mjx-container{overflow-x:auto; overflow-y:hidden; max-width:100%}