/* 科啟：日系手帳任務風。米白點點方格紙當底，白卡片和便利貼（淺抹茶、淡藍、米灰）放內容，小標題下面一道螢光筆；
   綠色只放在「開始練」與進度上。整站唯一的紅是花丸、花苞的朱色（--hana，仿老師的紅筆）；答錯用灰紫，不用紅。
   深色模式不是直接反轉：底改成墨綠黑、便利貼改成低彩度的深色紙。字級用 --rs 切換。 */
:root {
  --ground: #f6f6f1; --surface: #ffffff; --raised: #f1f0ea; --active: #e6e5dd; --side: #ecebe4;
  --border: #e3e2da; --rule: #ecebe4; --control: #bdbcb2; --dot: #dddcd2;
  --ink: #16191a; --muted: #5e625f; --faint: #6b6f6c;
  --accent: #0d6b4e; --accent-ink: #0a5a41; --accent-bg: #dcefe5; --accent-mid: #8db8a5;
  --primary: #16191a;
  --ok: #1f7a4d; --ok-bg: #e3f4ea; --ok-ink: #145c38;
  --bad: #6b5f8f; --bad-bg: #ece8f4; --bad-ink: #4e4470;          /* 答錯：灰紫，不用紅 */
  --warn-bg: #fff4dd; --warn-ink: #8a4b00;
  --hl: #ffe24d; --hl-soft: #ffec85; --hl-pink: #ffc2d1; --marker: #cfe8da;
  --hana: #e0533d; --hana-soft: #fbe6e1;                             /* 花丸、花苞專用的朱色 */
  --aux: #7b6fa6; --aux-bg: #ece8f4;
  --note1: #dcefe5; --note2: #e1eaf4; --note3: #f1eee2; --tape: rgba(222, 220, 208, .85);
  --track: #e6e5dd;
  --font: "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
  --r: 12px; --rc: 20px; --rn: 6px 18px 6px 18px; --rs: 1;
  /* 舊名稱：日檢、專版等畫面還在用 */
  --card: var(--surface); --card2: var(--raised); --paper: var(--surface); --paper2: var(--rule); --dim: var(--muted);
  --pick: var(--accent-bg); --blue-bg: #e1eaf4; --blue-ink: #2f557f; --edge: var(--border);
}
body.dark {
  --ground: #121514; --surface: #1e2322; --raised: #262c2b; --active: #2c3231; --side: #1a1e1d;
  --border: #2c3231; --rule: #262c2b; --control: #4a5452; --dot: #252b2a;
  --ink: #ecede8; --muted: #a9afab; --faint: #9aa09c;
  --accent: #46ac84; --accent-ink: #79d2ac; --accent-bg: #18392d; --accent-mid: #2f6f57;
  --primary: #ecede8;
  --ok: #46ac84; --ok-bg: #18392d; --ok-ink: #7fdcb6;
  --bad: #b3a8da; --bad-bg: #2a2638; --bad-ink: #cfc6f0;
  --warn-bg: #3a2a10; --warn-ink: #ffcf7a;
  --hl: rgba(255, 214, 10, .34); --hl-soft: rgba(255, 214, 10, .3); --hl-pink: rgba(255, 105, 150, .34); --marker: #1f4a3a;
  --hana: #ee6a55; --hana-soft: #3a2420;
  --aux: #b3a8da; --aux-bg: #2a2638;
  --note1: #1b3a2f; --note2: #1f2b38; --note3: #2b2a24; --tape: rgba(80, 88, 86, .7);
  --track: #2c3231;
  --blue-bg: #1f2b38; --blue-ink: #a9c6f5;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--ground) radial-gradient(var(--dot) 1px, transparent 1.3px) 0 0 / 18px 18px; font: 15px/1.6 var(--font); overflow-x: clip;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.num, .kpi b, .score b, .timer, #count, .tagrow .n { font-variant-numeric: tabular-nums; }

/* ---------- 頂部與導覽 ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border);
  padding: env(safe-area-inset-top) 16px 0; }
.top .in { max-width: 980px; margin: 0 auto; height: 52px; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 17px; white-space: nowrap; }
.logo { width: 28px; height: 28px; display: block; border-radius: 7px; }
body.dark .logo { box-shadow: 0 0 0 1px var(--border); }
.back { flex: none; border: 0; background: transparent; padding: 8px 8px 8px 0; margin-right: -4px; cursor: pointer; font-size: 15px; color: var(--ink); white-space: nowrap; }
.back:hover { color: var(--accent-ink); }
.back:not([hidden]) + .brand .wm { display: none; }
/* 外框兩套：body.shell-mobile（底部四個分頁）／body.shell-desk（左側欄＋頁首搜尋）。app.js 依寬度與指標裝置切換 */
.top .who { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; text-decoration: none; }
.nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; background: var(--surface); border-top: 1px solid var(--border);
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
.nav a { flex: 1; text-align: center; padding: 12px 2px; font-size: 14px; color: var(--muted); text-decoration: none; }
.nav a.on { color: var(--accent-ink); font-weight: 600; }
body.shell-mobile main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
body.quizzing .nav, body.onboard .nav, body.shell-desk .nav { display: none; }
.side, .gsearch { display: none; }

body.shell-desk { padding-left: 232px; }
body.shell-desk .side { display: flex; flex-direction: column; position: fixed; z-index: 21; left: 0; top: 0; bottom: 0; width: 232px; padding: 14px 12px;
  background: var(--side); overflow-y: auto; }
body.shell-desk.quizzing, body.shell-desk.onboard { padding-left: 0; }
body.shell-desk.quizzing .side, body.shell-desk.onboard .side { display: none; }
.side-h { font-size: 12px; color: var(--faint); padding: 12px 8px 4px; }
.side-exams, .side-nav { display: grid; gap: 2px; }
.side a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r); text-decoration: none; color: var(--ink); min-width: 0; }
.side a:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.side a.on { background: var(--surface); color: var(--accent-ink); font-weight: 600; }
.side-exams .icon { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; font-size: 13px; font-weight: 700;
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: color-mix(in srgb, var(--c) 80%, var(--ink)); }
.side-exams .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-exams .add { color: var(--muted); font-size: 14px; }
.side-who { margin-top: auto; border-top: 1px solid var(--rule); border-radius: 0 !important; padding-top: 12px !important; color: var(--muted) !important; font-size: 14px; }
body.shell-desk .top .brand, body.shell-desk .top .who, body.shell-desk #top-track { display: none; }
body.shell-desk .top .in { max-width: 1120px; }
body.shell-desk .gsearch { display: flex; align-items: center; position: relative; flex: 1; max-width: 480px; margin-left: auto; }
.gsearch input { min-height: 36px; padding: 6px 64px 6px 12px; font-size: 14px; }
.gsearch .hint { position: absolute; right: 8px; font: 12px var(--font); color: var(--faint); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; pointer-events: none; }
body.shell-desk main { max-width: 1120px; }
body.shell-desk main.reading { max-width: 780px; }
body.shell-desk .toast { bottom: 24px; left: calc(50% + 116px); }
body.shell-desk.quizzing .toast { left: 50%; }
main { max-width: 980px; margin: 0 auto; padding: 16px 16px 48px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); overflow-x: clip; }
main.reading { max-width: 780px; }

/* ---------- 卡片、標題 ---------- */
.card { background: var(--surface); border: 1px solid transparent; border-radius: var(--rc); padding: 20px; min-width: 0; box-shadow: 0 1px 0 var(--border); }
.card.flush { padding: 4px 0; }
.card h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; line-height: 1.4; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card h2 .sub, .sub { color: var(--muted); font-size: 13px; font-weight: 400; }
.card h2 .sub { margin-left: auto; }
.card h3 { margin: 18px 0 8px; font-size: 15px; font-weight: 600; }
.section-title { margin: 14px 2px -2px; color: var(--ink); font-size: 16px; font-weight: 700; }
.grid2 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.muted { color: var(--muted); font-size: 13px; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }
.empty { color: var(--muted); text-align: center; padding: 20px 0; font-size: 14px; }

/* 頁首：麵包屑、標題、一句說明 */
.pagehead { display: grid; gap: 10px; }
.pagehead h1 { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; }
.pagehead .lede { margin: 0; color: var(--muted); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs a + span::before, .crumbs a + a::before { content: "/"; margin-right: 14px; color: var(--control); }
.cid { color: var(--muted); font-weight: 600; margin-right: .5em; font-variant-numeric: tabular-nums; }

/* ---------- 按鈕 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none;
  min-height: 40px; padding: 8px 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--control); border-radius: var(--r);
  font-weight: 500; white-space: nowrap; transition: background .12s, border-color .12s, transform .06s; }
.btn:hover { background: var(--raised); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.go { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: 999px; font-weight: 700; }
.btn.go:hover { background: var(--accent-ink); }
.btn.blue { background: var(--primary); border-color: var(--primary); color: var(--surface); }
.btn.blue:hover { opacity: .88; }
.btn.red { background: var(--surface); border-color: var(--bad); color: var(--bad); }
.btn.red:hover { background: var(--bad-bg); }
body.dark .btn.go { color: #0f1011; }
.btn.soft { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.btn.soft:hover { background: var(--accent-bg); }
.btn.small { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.btn.big { min-height: 52px; padding: 12px 18px; font-size: 17px; width: 100%; white-space: normal; line-height: 1.35; }
.btn.ghost { background: transparent; border-color: transparent; text-decoration: underline; padding: 4px 6px; min-height: 0; }

/* ---------- 首頁 ---------- */
.hero { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.hero .greet { font-size: 20px; font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r); }
.kpi { padding: 10px 8px; text-align: center; text-decoration: none; }
.kpi + .kpi { border-left: 1px solid var(--border); }
.kpi b { display: block; font-size: 22px; font-weight: 600; line-height: 1.25; }
.kpi span { font-size: 12px; color: var(--muted); }
a.kpi:hover { background: var(--raised); }
@media (max-width: 420px) { .kpi b { font-size: 19px; } }
.review-cta { display: grid; gap: 4px; }
.list { display: grid; }
.item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; text-decoration: none; min-width: 0; border-bottom: 1px solid var(--rule); }
.item:last-child { border-bottom: 0; }
.card:not(.flush) .list .item { padding: 10px 2px; }
a.item:hover { background: var(--raised); }
.item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .r { font-size: 13px; color: var(--muted); white-space: nowrap; }
.item.two { display: grid; gap: 2px; padding: 14px 16px; }
.item.two .t { white-space: normal; font-weight: 600; line-height: 1.45; }
.item.two .r { white-space: normal; }
.item .r.bad, .mine.bad { color: var(--bad-ink); }
.pill { display: inline-block; font-size: 12px; line-height: 20px; padding: 0 8px; border-radius: 999px; background: var(--raised); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill.bad { background: var(--bad-bg); color: var(--bad-ink); }
.pill.blue { background: var(--blue-bg); color: var(--blue-ink); }
.pill.seenin { background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; }
/* 考過的標籤在題號旁只佔一行：太長就省略，點一下展開全文 */
.qmeta .pill.seenin { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-width: 0; cursor: pointer; }
.qmeta .pill.seenin.open { white-space: normal; }

.exam-head .icon { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 10px; font-size: 20px; font-weight: 700;
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); color: color-mix(in srgb, var(--c, var(--accent)) 80%, var(--ink)); }
.exam-head { display: flex; align-items: center; gap: 12px; }
.exam-head .name { font-size: 19px; font-weight: 700; line-height: 1.35; }
.subj { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.bar { height: 6px; background: var(--active); border-radius: 3px; position: relative; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; }
.bar i.solid { background: var(--ok); }

/* ---------- 表單 ---------- */
label.f { display: block; margin: 12px 0 6px; font-size: 13px; color: var(--muted); }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=date], select, textarea {
  width: 100%; min-height: 42px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--control); border-radius: var(--r); font-size: 16px; }
textarea { min-height: 88px; resize: vertical; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; min-height: 36px; }
label.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { cursor: pointer; user-select: none; padding: 5px 12px; font-size: 13px; background: var(--surface); border: 1px solid var(--control); border-radius: 999px; }
.chip.old { color: var(--muted); border-style: dashed; }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--surface); border-style: solid; }
.chip small { opacity: .7; }
.seg { display: inline-flex; flex-wrap: wrap; background: var(--raised); border-radius: var(--r); padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 14px; cursor: pointer; font-size: 14px; border-radius: 6px; color: var(--muted); min-height: 34px; }
.seg button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--border); }
.seg.wide { display: flex; }
.seg.wide button { flex: 1; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin: -4px 0 12px; overflow-x: auto; }
.tabs button { background: transparent; border: 0; padding: 8px 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

/* ---------- 作答畫面 ---------- */
body.quizzing .top { display: none; }
.qbar { position: sticky; top: 0; z-index: 25; background: var(--surface); margin: -16px -16px 0; padding: calc(8px + env(safe-area-inset-top)) 16px 10px;
  border-bottom: 1px solid var(--border); display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.qbar .row { flex-wrap: nowrap; }
.qbar .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.qbar #quit { border-color: transparent; padding-left: 4px; }
.qbar #count { white-space: nowrap; }
.timer { font-size: 17px; font-weight: 600; min-width: 4.5em; text-align: right; }
.timer.low { color: var(--bad); }
.progress { height: 4px; background: var(--active); border-radius: 2px; position: relative; overflow: hidden; }
.progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }

.qcard { padding: 18px; }
.qmeta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.stem { font-size: calc(18px * var(--rs) * var(--qs, 1)); line-height: var(--ql, 1.75); margin: 0 0 16px; white-space: pre-wrap; word-break: break-word; }
.opts { display: grid; gap: 10px; }
.opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; cursor: pointer; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--control); border-radius: var(--r); font-size: calc(16px * var(--rs) * var(--qs, 1)); line-height: calc(var(--ql, 1.75) - .15); transition: background .12s, border-color .12s; }
.opt:hover:not(:disabled) { background: var(--raised); }
.opt .k { flex: none; width: 26px; height: 26px; margin-top: 1px; display: grid; place-items: center; font-size: 14px; font-weight: 600; border-radius: 50%;
  background: var(--raised); color: var(--muted); }
.opt .v { flex: 1; min-width: 0; word-break: break-word; }
.opt.picked { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt.picked .k { background: var(--ink); color: var(--surface); }
.opt.right { background: var(--ok-bg); border-color: var(--ok); }
.opt.right .k { background: var(--ok); color: #fff; }
.opt.wrong { background: var(--bad-bg); border-color: var(--bad); }
.opt.wrong .k { background: var(--bad); color: #fff; }
.opt:disabled { cursor: default; color: var(--ink); }
.feedback { margin-top: 16px; padding: 14px; border-radius: var(--r); background: var(--raised); display: grid; gap: 8px; }
.feedback.ok { background: var(--ok-bg); }
.feedback.bad { background: var(--bad-bg); }
.feedback .verdict { font-size: 17px; font-weight: 700; }
.feedback.ok .verdict { color: var(--ok-ink); }
.feedback.bad .verdict { color: var(--bad-ink); }
.explain { font-size: calc(15px * var(--rs) * var(--qs, 1)); line-height: var(--ql, 1.75); white-space: pre-wrap; }
.rate { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.qtools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.star.on { background: var(--hl-soft); border-color: var(--hl); }
.qnav { display: flex; gap: 8px; margin-top: 6px; }
.qnav .btn { flex: 1; }
.kbd { font-size: 12px; color: var(--muted); text-align: center; }
@media (hover: none), (max-width: 720px) { .kbd { display: none; } }

.sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.sheet button { padding: 6px 0; background: var(--surface); border: 1px solid var(--control); border-radius: 6px; cursor: pointer; font-size: 13px; }
.sheet button.done { background: var(--blue-bg); border-color: var(--blue-bg); }
.sheet button.flag { box-shadow: inset 0 -3px 0 var(--hl); }
.sheet button.cur { outline: 2px solid var(--ink); outline-offset: 1px; }
.sheet button.right { background: var(--ok-bg); border-color: var(--ok-bg); }
.sheet button.wrong { background: var(--bad-bg); border-color: var(--bad-bg); }
.sheet button.skip { color: var(--faint); }

/* ---------- 結果 ---------- */
.score { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.score b { font-size: 40px; font-weight: 700; line-height: 1; }
.verdict-pass { color: var(--ok); } .verdict-fail { color: var(--bad); }
.review-list { display: grid; gap: 8px; }
.rv { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; display: grid; gap: 4px; border-left-width: 4px; }
.rv:hover { background: var(--raised); }
.rv .s { font-size: 15px; line-height: 1.65; }
.rv.ok { border-left-color: var(--ok); } .rv.bad { border-left-color: var(--bad); } .rv.skip { border-left-color: var(--control); }

/* ---------- 統計 ---------- */
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.heat i { width: 12px; height: 12px; background: var(--active); border-radius: 2px; }
.heat i.l1 { background: #b8dfc9; } .heat i.l2 { background: #74bf97; } .heat i.l3 { background: #2f8f62; } .heat i.l4 { background: #0d6b4e; }
.tagrow { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 6.5em; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.tagrow .n { text-align: right; color: var(--muted); white-space: nowrap; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 110px; padding-top: 24px; }
.bars div { flex: 1; display: grid; align-content: end; justify-items: center; gap: 2px; font-size: 11px; color: var(--muted); height: 100%; }
.bars div i { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; }
.bars div b { font-weight: 500; color: var(--ink); }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th, table.t td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.t th { font-weight: 500; color: var(--muted); font-size: 12px; }

/* ---------- 題庫 ---------- */
.qitem { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); display: grid; gap: 6px; cursor: pointer; }
.qitem:hover { background: var(--raised); }
.qitem .s { font-size: 15px; line-height: 1.65; }
.qitem .a { font-size: 14px; color: var(--ok-ink); }
.pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; }

/* ---------- 彈窗、下方面板、提示 ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(15, 16, 17, .45); display: grid; place-items: center; padding: 16px; }
.modal .card { width: 100%; max-width: 640px; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.modal.drawer { place-items: end center; padding: 0; }
.modal.drawer .card { max-width: 720px; max-height: 88vh; border-radius: 16px 16px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 721px) { .modal.drawer { place-items: center; padding: 16px; } .modal.drawer .card { border-radius: 12px; } }
.sheet-head { display: flex; margin: -6px -6px 0 0; }
.toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--surface);
  padding: 10px 18px; border-radius: var(--r); max-width: 90vw; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.toast.err { background: var(--bad); color: #fff; }

/* ---------- 登入頁 ---------- */
.login { max-width: 400px; margin: 12vh auto 0; padding: 0 16px; }
.login .brand { display: grid; justify-items: center; gap: 6px; margin: 6px 0 14px; text-align: center; }
.login .brand .logo { width: 52px; height: 52px; border-radius: 12px; }
.login .brand h1 { margin: 4px 0 0; font-size: 24px; font-weight: 700; }
.login button[type=submit] { width: 100%; margin-top: 18px; min-height: 48px; font-size: 17px; }
.login .msg { margin-top: 10px; min-height: 1.5em; font-size: 13px; }
.login .alt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- 考試卡片牆 ---------- */
.wall { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 張數除不盡時，最後一張補滿整排，不留半格（偶數張不受影響） */
.wall > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .wall > :last-child:nth-child(odd) { grid-column: auto; }
  .wall > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .wall > :last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media (min-width: 980px) {
  .wall > :last-child:nth-child(3n+1) { grid-column: auto; }
  .wall > :last-child:nth-child(3n+2) { grid-column: auto; }
  .wall > :last-child:nth-child(4n+1) { grid-column: 1 / -1; }
  .wall > :last-child:nth-child(4n+2), .wall > :last-child:nth-child(4n+3) { grid-column: span 2; }
}
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; text-align: left; text-decoration: none; cursor: pointer;
  padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--ink); font: inherit; transition: border-color .12s, background .12s; }
a.tile:hover, button.tile:hover { border-color: var(--control); background: var(--raised); }
.tile .icon { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 8px; font-size: 17px; font-weight: 700; margin-bottom: 2px;
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); color: color-mix(in srgb, var(--c, var(--accent)) 80%, var(--ink)); }
.tile .name { font-size: 16px; font-weight: 600; line-height: 1.4; }
.tile .desc { font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; }
.tile .bar { width: 100%; margin-top: 4px; }
.tile .row { margin-top: 6px; }
.tile.static { cursor: default; }
.tile.static:hover { background: var(--surface); border-color: var(--border); }
.tile.soon { cursor: default; opacity: .7; }
@media (max-width: 420px) { .tile { padding: 12px; } .tile .name { font-size: 15px; } }
button.tile { width: 100%; }
.banner { display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 14px; border-radius: var(--r);
  background: color-mix(in srgb, var(--c, var(--bad)) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c, var(--bad)) 30%, var(--surface)); }
.banner .count { flex: none; min-width: 60px; text-align: center; font-size: 13px; color: color-mix(in srgb, var(--c, var(--bad)) 85%, var(--ink)); }
.banner .count b { display: block; font-size: 28px; line-height: 1; }
.banner .txt { font-size: 13px; line-height: 1.55; color: var(--muted); }
.banner .txt b { font-size: 16px; color: var(--ink); }
.special-head { border-top: 4px solid var(--c, var(--bad)); }
.special-head .name { font-size: 19px; font-weight: 700; }
.countdown { flex: none; min-width: 70px; text-align: center; padding: 6px; border-radius: var(--r); font-size: 13px;
  background: color-mix(in srgb, var(--c, var(--bad)) 12%, var(--surface)); color: color-mix(in srgb, var(--c, var(--bad)) 85%, var(--ink)); }
.countdown b { display: block; font-size: 26px; line-height: 1; }

/* ---------- 報名考試：選考試、填日期、導覽、我的考試 ---------- */
.tile.add { border-style: dashed; background: transparent; }
.tile.add .name { color: var(--accent-ink); }
.tile.pick { position: relative; }
.tile.pick.on { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent); }
.tile.pick .pill { margin-top: 2px; }
.tile.pick.on .pill { background: var(--accent); color: #fff; }
body.dark .tile.pick.on .pill { color: #0f1011; }
.onboard .nav, .onboard #who, .onboard #back { display: none !important; }
.onboard main { padding-bottom: 48px !important; }
.enr-head { display: grid; gap: 4px; }
.enr-head h1 { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; }
.enr-foot { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.enr-foot .btn { width: 100%; }
.enr-foot.stick { position: sticky; bottom: 0; margin: 16px -18px -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 var(--r) var(--r); }
.modal .enr-foot.stick { margin-bottom: -18px; }
.daterow { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.daterow:last-of-type { border-bottom: 0; }
.daterow .nm { font-weight: 600; line-height: 1.4; }
.tour { display: grid; gap: 14px; justify-items: start; }
.tour .step { display: flex; gap: 6px; }
.tour .step i { width: 22px; height: 4px; border-radius: 2px; background: var(--active); }
.tour .step i.on { background: var(--accent); }
.tour .ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; font-size: 20px; font-weight: 700; background: var(--accent-bg); color: var(--accent-ink); }
.tour h1 { margin: 0; font-size: 22px; line-height: 1.35; }
.tour p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.tour .btns { display: grid; gap: 8px; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.tour .btns .go, .tour .btns.one .btn { grid-column: 1 / -1; }
.exrow { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.exrow:last-child { border-bottom: 0; }
.exrow .exh { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.exrow .exh .icon { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 8px; font-size: 17px; font-weight: 700;
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); color: color-mix(in srgb, var(--c, var(--accent)) 80%, var(--ink)); }
.exrow .nm { font-weight: 600; line-height: 1.4; }
.exrow .acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.exrow .acts .btn { width: 100%; }
.exrow .acts .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .exrow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .exrow .acts { display: flex; }
  .exrow .acts .btn { width: auto; }
  .card .addbtn { width: auto; }
}
.card .addbtn { width: 100%; margin-top: 10px; }
.askcard { display: grid; gap: 10px; border-left: 4px solid var(--accent); }
.askcard .acts { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.askcard .acts .btn { width: 100%; }
@media (min-width: 560px) { .askcard .acts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.adminopt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); display: grid; gap: 4px; }

/* ---------- 讀的內容：講義、統整筆記 ---------- */
.guide { font-size: calc(16px * var(--rs)); line-height: 1.85; }
.guide h2 { font-size: calc(19px * var(--rs)); font-weight: 700; margin: 0 0 12px; scroll-margin-top: 64px; }
.guide h3 { font-size: calc(17px * var(--rs)); font-weight: 700; margin: 26px 0 8px; scroll-margin-top: 64px; }
.guide h4 { font-size: calc(16px * var(--rs)); font-weight: 600; margin: 16px 0 6px; }
.guide p { margin: 6px 0; }
.guide ul { margin: 4px 0 8px; padding-left: 1.3em; }
.guide li { margin: 4px 0; }
/* 螢光筆：講義裡的粗體就是考試重點 */
/* 螢光筆畫在字的下半部，像真的用筆劃過；整條塗滿的只有常考知識點的標題 */
.guide b, .kppoint b, .pair span b, b.key { font-weight: 700; padding: 0 .08em; background: linear-gradient(transparent 52%, var(--hl-soft) 52%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.guide b.pit, .kppoint b.pit, b.key.pit { background: linear-gradient(transparent 52%, var(--hl-pink) 52%); }
mark { color: inherit; border-radius: 2px; padding: 0 .15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.hot { background: var(--hl); }
mark.warm { background: var(--hl-soft); }
.tag { display: inline-block; vertical-align: 2px; margin-left: 8px; font-size: 12px; line-height: 20px; padding: 0 7px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
.guide .t { font-size: 14px; }
.tscroll { overflow-x: auto; margin: 10px 0; }
.tscroll table.t { min-width: 420px; }
.tscroll table.t th { background: var(--raised); color: var(--ink); font-weight: 600; }
.callout { margin: 10px 0; padding: 10px 14px; background: var(--blue-bg); border-radius: var(--r); font-size: 15px; }
.callout.bad { background: var(--bad-bg); }
.gpractice { margin: 12px 0 4px; }
.gpractice .btn { white-space: normal; text-align: left; }
.toc summary, .orig summary { cursor: pointer; font-size: 15px; padding: 4px 0; font-weight: 600; }
.toc ol { margin: 6px 0 0; padding-left: 0; list-style: none; columns: 2; column-gap: 24px; font-size: 14px; }
@media (max-width: 560px) { .toc ol { columns: 1; } }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
details.toc nav { display: grid; margin-top: 6px; }
details.toc nav a { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; text-decoration: none; }
details.toc nav a:last-child { border-bottom: 0; }
.orig { border-bottom: 1px solid var(--rule); padding: 8px 0; }
.origtext { white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.8; margin-top: 8px; }
.totop { position: fixed; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 20; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
@media (min-width: 721px) { .totop { bottom: 24px; } }
.score b.grade { font-size: 26px; color: var(--accent); }
.qmeta .pill, .qitem .pill, .rv .pill { white-space: normal; }
.qcard, .rv, .qitem, .modal .card { overflow-wrap: anywhere; }
.multi-hint { display: inline-block; margin-bottom: 10px; padding: 2px 10px; font-size: 13px; border-radius: 4px; background: var(--blue-bg); color: var(--blue-ink); font-weight: 600; }
.opts.multi .opt .k { border-radius: 5px; }
.opts.multi .opt.picked .k { font-size: 0; }
/* 複選「已選」：和線條圖示同一個勾（ART.icon("check")），用遮罩畫，顏色跟著字色 */
.opts.multi .opt.picked .k::after { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- 講義：章節頁 ---------- */
.legend { margin: 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.legend > span { white-space: nowrap; }
.legend.card { padding: 12px 16px; }
.chintro { color: var(--ink); }
.secbody { margin-bottom: 4px; }
.kp { margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 8px; scroll-margin-top: 64px; }
.kp.hl { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; padding-bottom: 14px; background: var(--accent-bg); border-top-color: transparent; border-radius: var(--r); }
.kphead { margin: 0 !important; font-size: calc(17px * var(--rs)) !important; line-height: 1.5; font-weight: 700; }
.kppoint p, .kpdetail p { margin: 4px 0; }
.kpdetail { font-size: calc(15px * var(--rs)); color: var(--ink); padding-left: 12px; border-left: 3px solid var(--rule); }
.kpdetail b { background: transparent; padding: 0; }
.cite { font-size: 13px; color: var(--muted); }
.kpfoot { display: grid; gap: 8px; margin-top: 4px; }
.mine { font-size: 13px; color: var(--muted); }
.kpfoot .btn { justify-self: start; }
@media (max-width: 560px) { .kpfoot .btn { justify-self: stretch; } }
.kplinks { font-size: 15px; }
.kplinks a { color: var(--blue-ink); }
.endcap { display: grid; gap: 10px; }
.endcap h2 { margin: 0; }
.endcap p { margin: 0; }
/* 讀完這一章：標題、本章練習結果（兩條進度條，不堆數字）、三顆按鈕（手機一排一顆、寬螢幕並排） */
.endhead { display: grid; gap: 2px; }
.endhead h2 { font-size: calc(20px * var(--rs)); }
.endstat { display: grid; gap: 8px; padding: 12px 14px; background: var(--raised); border-radius: var(--r); }
.endstat .bar { margin-bottom: 6px; }
.endstat .bar:last-child { margin-bottom: 0; }
.es-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.es-row b { font-size: 16px; font-variant-numeric: tabular-nums; }
.endbtns { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.endbtns .btn { width: 100%; }
@media (min-width: 560px) { .endbtns { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.endnum { font-size: 13px; color: var(--muted); justify-self: start; }
/* 講義工具列：卡片／全文、目錄與最愛、搜尋 */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ntools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ntools .btn { min-height: 44px; }
.search { display: block; }
.search input { width: 100%; min-height: 44px; padding: 8px 14px; border: 1px solid var(--control); border-radius: var(--r); background: var(--surface); font-size: 16px; }
.search input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.chintro-d summary, .secnote summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 2px 0; }
.chintro-d .chintro { margin-top: 6px; }
mark.find { background: var(--hl); color: inherit; border-radius: 2px; padding: 0 1px; }
.find-row .r { color: var(--muted); }
.findch { display: flex; gap: 6px; margin: 16px 0 4px !important; }
.sub-h { margin: 18px 0 0 !important; font-size: 15px !important; }
/* 最愛的星號 */
.kprow { display: flex; align-items: flex-start; gap: 8px; }
.kprow .kphead { flex: 1; min-width: 0; }
.fav { flex: 0 0 auto; width: 40px; height: 40px; margin: -8px -8px 0 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; }
.fav svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: transform .2s; }
.fav:hover { background: var(--raised); color: var(--ink); }
.fav.on { color: #d99a00; }
.fav.on svg { fill: currentColor; }
.fav:active svg { transform: scale(.85); }
body.dark .fav.on { color: #ffc93c; }
.favdot { display: inline-grid; vertical-align: -3px; margin-right: 4px; color: #d99a00; }
.favdot svg { width: 16px; height: 16px; fill: currentColor; }
body.dark .favdot { color: #ffc93c; }
/* 卡片：一次一張，左右滑 */
.deck { display: grid; gap: 10px; scroll-margin-top: 64px; }
.dprog { height: 4px; border-radius: 2px; background: var(--active); overflow: hidden; }
.dprog i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.dview { touch-action: pan-y; overflow-x: clip; padding: 2px; }
.kcard.kp { margin: 0; border-top: 1px solid var(--border); padding: 18px; gap: 10px; min-height: 52vh; align-content: start; user-select: none; -webkit-user-select: none;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), opacity .2s; }
.kcard.kp .kppoint, .kcard.kp .kpdetail, .kcard.kp .cite { user-select: text; -webkit-user-select: text; }
.kcard.dragging { transition: none; }
.kcard.leaving { opacity: 0; }
.kcard.in-r { animation: card-in-r .28s cubic-bezier(.22, 1, .36, 1); }
.kcard.in-l { animation: card-in-l .28s cubic-bezier(.22, 1, .36, 1); }
@keyframes card-in-r { from { transform: translateX(28%); opacity: 0; } }
@keyframes card-in-l { from { transform: translateX(-28%); opacity: 0; } }
.kcard .dsec { font-size: 13px; color: var(--muted); font-weight: 600; }
.kcard .kphead { font-size: calc(19px * var(--rs)) !important; }
.kcard .kppoint { font-size: calc(16px * var(--rs)); line-height: 1.75; }
.secnote { background: var(--raised); border-radius: var(--r); padding: 8px 12px; font-size: 14px; }
.secnote .secbody { margin: 6px 0 2px; }
.dnav { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 -2px; padding: 8px 2px 10px; background: var(--ground); }
.dnav .btn { min-height: 48px; }
.dnav .btn:disabled { opacity: 1; background: var(--raised); color: var(--faint); border-color: var(--border); }
.dlegend { margin-top: 10px; }
.toch { margin-top: 18px !important; }
.dhint { margin: 0; font-size: 13px; }
.dhint .keys { display: none; }
@media (hover: hover) and (pointer: fine) { .dhint .touch { display: none; } .dhint .keys { display: inline; } }
.onlyfav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; font-weight: 600; }
body.shell-mobile .dnav { bottom: calc(60px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .kcard.in-r, .kcard.in-l { animation: none; } .kcard.kp { transition: none; } }
/* 目錄（下方面板） */
.toclist { display: grid; margin-top: 10px; }
.toclist h3 { margin: 14px 0 2px !important; font-size: 13px !important; color: var(--muted); }
.toclist a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 8px; margin: 0 -8px; border-radius: 6px; text-decoration: none; font-size: 15px; line-height: 1.45; }
.toclist a:hover { background: var(--raised); }
.toclist a.cur { background: var(--accent-bg); font-weight: 600; }
.toclist + .btn { margin-top: 14px; }
/* 數字對照：左邊數字、右邊規定，一對一 */
.pairs { display: grid; margin: 4px 0 12px; }
.pair { display: grid; grid-template-columns: minmax(5.5em, 28%) minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: baseline; font-size: calc(15px * var(--rs)); line-height: 1.65; }
.pair > b { font-size: calc(17px * var(--rs)); font-weight: 700; color: var(--accent-ink); word-break: break-word; background: none; padding: 0; }
.pair.known { opacity: .55; }
.pair .src { display: block; font-size: 12px; color: var(--muted); text-decoration: none; margin-top: 2px; }
.pair .src:hover { text-decoration: underline; }

/* ---------- 講義：總整理 ---------- */
details.topic { padding: 0; }
details.topic > summary { list-style: none; cursor: pointer; display: grid; gap: 2px; padding: 14px 16px; }
details.topic > summary::-webkit-details-marker { display: none; }
details.topic > summary .t { font-weight: 600; line-height: 1.45; }
details.topic > summary .t::after { content: "＋"; float: right; color: var(--muted); font-weight: 400; }
details.topic[open] > summary .t::after { content: "－"; }
details.topic > summary .r { font-size: 13px; color: var(--muted); }
details.topic > :not(summary) { margin-left: 16px; margin-right: 16px; }
details.topic > .row { margin-bottom: 16px; }
details.topic h3 { font-size: 14px; color: var(--muted); font-weight: 600; margin: 14px 16px 4px; }
.kplist { list-style: none; padding: 0; margin: 0 16px; }
.kplist li { padding: 7px 0 7px 16px; border-bottom: 1px solid var(--rule); position: relative; line-height: 1.55; }
.kplist li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--active); }
.kplist li.ok::before { background: var(--ok); }
.kplist li.bad::before { background: var(--bad); }
.kplist a { text-decoration: none; }
.kplist a:hover { text-decoration: underline; }
.onepage h2.subj { font-size: 20px; margin: 24px 0 4px; }
.onepage h2.subj:first-of-type { margin-top: 14px; }
.onepage h3 { margin-top: 18px; }
.onepage h4 { color: var(--muted); font-size: 14px; margin: 12px 0 2px; }
.onepage a { text-decoration: none; }
.onepage a.kt { font-weight: 700; color: var(--ink); }
.onepage a.kt::after { content: "："; }
/* 數字卡 */
.numbar { display: grid; gap: 8px; padding: 12px 14px; }
.numbar .row { gap: 4px 14px; }
.flash { position: relative; display: grid; align-content: start; gap: 14px; min-height: 260px; padding: 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; cursor: pointer; user-select: none; -webkit-user-select: none; transition: border-color .15s; }
.flash:hover { border-color: var(--control); }
.flash.flipped { border-color: var(--accent); }
.flash.known::after { content: "已記住"; position: absolute; right: 16px; bottom: 14px; font-size: 12px; color: var(--ok-ink); }
.fmeta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.fq { font-size: calc(19px * var(--rs)); line-height: 1.7; }
.fq .blank { display: inline-block; min-width: 3em; text-align: center; color: var(--accent-ink); font-weight: 700; }
.fq .ask { color: var(--muted); margin-left: .3em; }
.fa { padding-top: 14px; border-top: 1px dashed var(--control); }
.fa b { font-size: calc(32px * var(--rs)); line-height: 1.25; color: var(--accent-ink); word-break: break-word; }
.fhint { margin-top: auto; color: var(--muted); font-size: 13px; }
.fsrc a { font-size: 14px; color: var(--blue-ink); }
.fbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fbtns .btn { min-height: 52px; font-size: 16px; }

/* ---------- 日檢：學習卡、讀解文章、聽解 ---------- */
.lcard .lhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lword { font-size: 40px; line-height: 1.2; word-break: break-all; font-weight: 500; }
.lword.g { font-size: 28px; }
.lword.k { font-size: 64px; }
.lread { font-size: 20px; color: var(--accent-ink); margin-top: 2px; }
.lzh { font-size: 20px; margin: 8px 0 6px; }
.lrow { margin: 6px 0; line-height: 1.75; }
.lexp { line-height: 1.8; margin: 8px 0; }
.lex { border-left: 3px solid var(--rule); padding: 6px 12px; margin: 10px 0; }
.lex .ja { font-size: 18px; line-height: 2.1; }
.lkanji { display: grid; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.lkanji b { font-size: 20px; font-weight: 500; margin-right: 4px; }
.ai-note { font-size: 12px; color: var(--muted); margin-top: 10px; }
ruby rt { font-size: 0.55em; color: var(--muted); }
body.nofuri ruby rt { visibility: hidden; }
.passage { white-space: pre-wrap; line-height: 1.9; font-size: calc(16px * var(--rs)); background: var(--raised); border-radius: var(--r); padding: 14px 16px; margin: 0 0 16px; max-height: 60vh; overflow-y: auto; }
.listen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.today .steps { display: grid; gap: 8px; margin-top: 10px; }
.bar.dual { display: flex; }
.bar.dual i { position: static; display: block; height: 100%; border-radius: 0; }
.tagrow.prow { grid-template-columns: 3em minmax(0, 1fr) auto; }
.bar.dual i:not(.solid) { opacity: .45; }
.citem { cursor: pointer; }
.citem .cw { font-size: 18px; min-width: 5.5em; }

/* ---------- 顯示設定：字級 ---------- */
body.fs-l { --rs: 1.15; }
body.fs-xl { --rs: 1.3; }

.swipe-hint { font-size: 12px; color: var(--muted); text-align: center; }
@media (hover: hover) and (pointer: fine) { .swipe-hint { display: none; } }

/* ---------- 離線 ---------- */
.offline-bar { max-width: 980px; margin: 0 auto 8px; background: var(--warn-bg); color: var(--warn-ink); text-align: center; font-size: 13px; padding: 4px 8px; border-radius: 6px; }
body.offline .offline-bar { display: block; }
.resume { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
body.quizzing.offline .qbar::after { content: "離線中：作答先存在手機，連上網路後自動補送"; display: block; background: var(--warn-bg); color: var(--warn-ink);
  text-align: center; font-size: 12px; padding: 2px 6px; border-radius: 4px; }

@media print {
  .top, .nav, #stab, .row .btn, .totop, .crumbs, .legend { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding: 0; }
  .card { border: 0; padding: 0; }
  .guide b, mark.hot { background: #fff3a0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- 方案與權益 ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin: 8px 0 14px; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
.plan { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--raised); }
.plan h3 { margin: 0 0 4px; font-size: 16px; }
.plan .price { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.plan ul { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.chip.locked { color: var(--muted); border-style: dashed; background: var(--raised); }
.chip.locked small { color: var(--blue-ink); opacity: 1; }
.pill.lock { border: 0; cursor: pointer; background: var(--blue-bg); color: var(--blue-ink); font: inherit; font-size: 12px; }
.item.locked { color: var(--muted); }
.kplock { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; }
.card.notice { display: flex; align-items: center; gap: 12px; background: var(--blue-bg); color: var(--blue-ink); }
.card.notice .t { flex: 1; min-width: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.check.consent { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 4px; }
.accline { margin-top: 8px; }

/* ---------- 首頁：手機的今日任務卡 ---------- */
.today .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -2px; }
.today .track::-webkit-scrollbar { display: none; }
.tslide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: grid; gap: 12px; padding: 2px; }
.tslide .icon, .task .icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-weight: 700;
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: color-mix(in srgb, var(--c) 80%, var(--ink)); }
.tslide .nm { font-size: 17px; font-weight: 700; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tslide .cd { display: flex; align-items: baseline; gap: 6px; }
.tslide .cd b { font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.tslide .cd span { color: var(--muted); }
.tslide .todo { font-size: 16px; }
.pager2 { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pager2 .btn { min-width: 44px; font-size: 18px; }
.dots { display: flex; gap: 8px; }
.dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--control); cursor: pointer; }
.dots button.on { background: var(--accent); }
.homex { gap: 8px; }

/* ---------- 首頁：桌機儀表板 ---------- */
.dash { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: stretch; }
.dash-today { display: grid; gap: 14px; align-content: start; }
.dash-side { display: grid; gap: 14px; grid-template-rows: auto 1fr; }
.tasks { display: grid; gap: 8px; }
.task { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); }
.task .tx { flex: 1; min-width: 0; }
.task .nm { font-weight: 600; text-decoration: none; }
.task .nm:hover { text-decoration: underline; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wd { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border-radius: var(--r); background: var(--raised); font-size: 13px; color: var(--muted); }
.wd b { font-size: 16px; min-height: 1.5em; color: var(--ink); font-variant-numeric: tabular-nums; }
.wd small { font-size: 11px; }
.wd.on { background: var(--accent-bg); }
.wd.on b { color: var(--accent-ink); }
.wd.today { box-shadow: inset 0 0 0 1px var(--accent); }
.prog-ex { display: grid; gap: 4px; margin-bottom: 10px; }
.prog-ex a { text-decoration: none; }

/* ---------- 考試分頁頂端的搜尋、錯題本 ---------- */
.searchbox { display: flex; gap: 8px; padding: 12px; }
.searchbox input { flex: 1; min-width: 0; }

/* ---------- 作答：手機一題一畫面、換題列固定在拇指區；桌機左右兩欄 ---------- */
.fb-wait { display: none; }
.mynote { margin-top: 12px; padding: 10px 12px; background: var(--raised); border-radius: var(--r); font-size: 14px; white-space: pre-wrap; }
.qnav { margin-top: 14px; }
.kbd kbd { font: 11px var(--font); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; background: var(--raised); }
body.shell-mobile .kbd { display: none; }
body.shell-desk .swipe-hint { display: none; }
body.shell-mobile .opt { min-height: 56px; padding: 15px 16px; align-items: center; }
body.shell-mobile .opt .k { width: 30px; height: 30px; margin-top: 0; }
body.shell-mobile.quizzing .qnav { position: fixed; z-index: 26; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border); }
body.shell-mobile.quizzing .qnav .btn { min-height: 50px; font-size: 16px; }
body.shell-mobile.quizzing main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.shell-mobile.quizzing .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
body.shell-desk.quizzing main { max-width: 1240px; }
body.shell-desk .qcard { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "main side" "nav side" "kbd side"; gap: 0 24px; align-items: start; }
body.shell-desk .qmain { grid-area: main; min-width: 0; }
body.shell-desk .qside { grid-area: side; min-width: 0; position: sticky; top: 90px; border-left: 1px solid var(--rule); padding-left: 24px; align-self: stretch; }
body.shell-desk .qside #fb .feedback { margin-top: 0; }
body.shell-desk .qnav { grid-area: nav; }
body.shell-desk .kbd { grid-area: kbd; margin-top: 8px; }
body.shell-desk .fb-wait { display: block; padding: 14px; border: 1px dashed var(--border); border-radius: var(--r); font-size: 14px; }

/* ---------- 後台表格：手機一筆一張卡，桌機維持表格 ---------- */
.tcards { overflow-x: auto; }
body.shell-mobile .tcards { overflow: visible; }
body.shell-mobile .tcards table, body.shell-mobile .tcards tbody { display: block; }
body.shell-mobile .tcards thead { display: none; }
body.shell-mobile .tcards tr { display: grid; gap: 4px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r); }
body.shell-mobile .tcards td { display: flex; gap: 10px; padding: 0; border: 0; min-width: 0; word-break: break-word; }
body.shell-mobile .tcards td[data-label]::before { content: attr(data-label); flex: none; width: 5em; color: var(--muted); font-size: 12px; padding-top: 2px; }
body.shell-mobile .tcards td.lead { font-weight: 700; }
body.shell-mobile .tcards td.acts { flex-wrap: wrap; margin-top: 6px; }
body.shell-mobile .tcards td.acts:empty { display: none; }

/* ---------- 作答：送出中（再按不會被默默吃掉）---------- */
.sending-note { display: none; margin-top: 8px; font-size: 13px; color: var(--muted); }
.qcard.sending .opts { opacity: .5; cursor: progress; transition: opacity .12s; }
.qcard.sending .opt { cursor: progress; }
.qcard.sending .sending-note { display: block; }
.qcard.nudge .sending-note { animation: nudge .3s; }
@keyframes nudge { 0%, 100% { transform: none; } 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }

/* ---------- 模擬考：桌機仿電腦應試（右側題號面板、計時在右上）；手機全螢幕、題號面板從下方滑出 ---------- */
.mockwrap { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.mockside { display: none; }
#sheetbtn { flex: none; white-space: nowrap; }
.qno { color: var(--ink); font-size: 13px; }
.pill.flagp { background: var(--hl-soft); color: var(--ink); }
.flagb.on { background: var(--hl-soft); border-color: var(--hl); }
.sheet button { color: var(--ink); position: relative; min-height: 36px; }
.sheet button.flag { background: var(--hl-soft); border-color: var(--hl); box-shadow: none; }
.sheet button.flag::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.sheet button.done.flag { background: linear-gradient(135deg, var(--blue-bg) 50%, var(--hl-soft) 50%); }
.sheet.big { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
.sheet.big button { min-height: 44px; font-size: 15px; }
.sheet.jump { margin-bottom: 6px; }
.mlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0; font-size: 13px; color: var(--muted); }
.mlegend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--control); background: var(--surface); }
.lg.done { background: var(--blue-bg); border-color: var(--blue-bg); }
.lg.flag { background: var(--hl-soft); border-color: var(--hl); }
.mstat { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.mstat b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mtimer { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--rule); }
.mtimer span { font-size: 13px; color: var(--muted); }
.mtimer b { font-size: 26px; font-variant-numeric: tabular-nums; }
.mtimer b.low { color: var(--warn-ink); }
.timer.low { color: var(--warn-ink); }
body.shell-desk .mockwrap { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
body.shell-desk .mockside { display: block; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; }
body.shell-desk .mockwrap .qcard { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side" "nav" "kbd"; }
body.shell-desk .mockwrap .qside { position: static; border-left: 0; padding-left: 0; }
body.shell-desk .mockwrap .qside #fb:empty { display: none; }
body.shell-desk .qbar #timer, body.shell-desk .qbar #sheetbtn { display: none; }
body.shell-mobile .qbar .timer { min-width: 0; font-variant-numeric: tabular-nums; }
body.shell-mobile .mockwrap .qtools .btn { flex: 1 1 calc(50% - 4px); }

/* ---------- 右側練習面板（桌機講義）---------- */
.sidepanel { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(480px, 42vw); background: var(--ground); border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(0, 0, 0, .08); animation: sp-in .22s cubic-bezier(.22, 1, .36, 1); }
@keyframes sp-in { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sidepanel { animation: none; } }
.sp-body { height: 100%; overflow: auto; padding: 16px; display: grid; gap: 14px; align-content: start; grid-template-columns: minmax(0, 1fr); overscroll-behavior: contain; }
.sidepanel .qbar { margin: -16px -16px 0; padding-top: 10px; }
body.shell-desk .sidepanel .qcard { display: block; }
body.shell-desk .sidepanel .qside { position: static; border-left: 0; padding-left: 0; margin-top: 14px; }
.sidepanel .qcard { padding: 16px; }
.sidepanel .stem { font-size: calc(16px * var(--rs) * var(--qs, 1)); }
body.shell-desk.panel-open main { margin-right: calc(min(480px, 42vw) + 8px); margin-left: 8px; }
body.shell-desk.panel-open .nside { display: none; }
body.shell-desk.panel-open .nlayout { grid-template-columns: minmax(0, 1fr); }
body.shell-desk.panel-open .toast { left: calc(232px + (100vw - 232px - min(480px, 42vw)) / 2); }

/* ---------- 講義（桌機）：左邊固定的本章目錄 ---------- */
.nlayout { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
#nbody { display: grid; gap: 14px; min-width: 0; }
.nside { display: none; }
body.shell-desk main.withtoc { max-width: 1120px; }
body.shell-desk .nlayout { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
body.shell-desk .nside { display: grid; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; padding: 4px 4px 12px 0; font-size: 14px; }
.nside-h { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 6px 8px; }
.nside a { display: flex; gap: 4px; align-items: flex-start; padding: 5px 8px; border-radius: 6px; text-decoration: none; color: var(--muted); line-height: 1.45; }
.nside a:hover { background: var(--raised); color: var(--ink); }
.nside a.sec { color: var(--ink); font-weight: 600; margin-top: 8px; }
.nside a.kpl { padding-left: 16px; }
.nside a.cur { background: var(--accent-bg); color: var(--accent-ink); }
.nside .favdot svg { width: 13px; height: 13px; margin-top: 3px; }

/* ---------- 錯題本：手機翻卡複習 ---------- */
#wbody { display: grid; gap: 10px; }
.flipview { touch-action: pan-y; overflow-x: clip; padding: 2px; }
.flipcard { margin: 0; cursor: pointer; user-select: none; -webkit-user-select: none; transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .15s; position: relative; }
.flipcard .stem { font-size: calc(17px * var(--rs)); }
.flipcard .opt { cursor: inherit; }
.flipcard.open .explain, .flipcard.open .stem { user-select: text; -webkit-user-select: text; }
.flipcard.dragging { transition: none; }
.flipcard[data-lean="yes"] { box-shadow: inset 0 0 0 2px var(--accent); }
.flipcard[data-lean="no"] { box-shadow: inset 0 0 0 2px var(--control); }
.flipcard.in-r { animation: card-in-r .28s cubic-bezier(.22, 1, .36, 1); }
.flipcard.in-l { animation: card-in-l .28s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .flipcard.in-r, .flipcard.in-l { animation: none; } .flipcard { transition: none; } }
.fliptap { margin-top: 14px; padding: 12px; text-align: center; border: 1px dashed var(--border); border-radius: var(--r); color: var(--muted); font-size: 14px; }
.flipbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flipdone p { margin: 0; }

/* ---------- 錯題本：桌機表格 ---------- */
.wtable h2 { display: flex; align-items: center; gap: 8px; }
.wfilters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.wfilters label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.wacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
table.wt td { font-size: 14px; }
table.wt td.nw { white-space: nowrap; }
table.wt td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.wt th:first-child, table.wt td:first-child { width: 32px; }
table.wt input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.wstem { color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wstem:hover { text-decoration: underline; }
.printonly, .printhead { display: none; }
@media print {
  .side, .noprint, #wprint, .modal, .toast, .sidepanel { display: none !important; }
  body.shell-desk { padding-left: 0; }
  .printhead { display: block; font-weight: 700; margin-bottom: 8px; }
  .printonly { display: table-cell; }
  ol.printonly { display: block; margin: 4px 0 0; padding-left: 20px; }
  .wstem { -webkit-line-clamp: unset; display: block; color: #000; }
  table.wt tr { break-inside: avoid; }
  table.wt .pill { background: none; padding: 0; color: #000; }
  .tscroll { overflow: visible !important; }
}

/* ---------- 首頁：加到主畫面的提示 ---------- */
.a2hs { display: grid; gap: 4px; }
.a2hs .row2 { margin-top: 10px; }
.a2hs .row2:has(> :only-child) { grid-template-columns: 1fr; }
table.wt th { white-space: nowrap; }
.sheet button.done { background: color-mix(in srgb, var(--blue-ink) 22%, var(--surface)); border-color: color-mix(in srgb, var(--blue-ink) 35%, var(--surface)); }
.lg.done { background: color-mix(in srgb, var(--blue-ink) 22%, var(--surface)); border-color: color-mix(in srgb, var(--blue-ink) 35%, var(--surface)); }
.sheet button.done.flag { background: linear-gradient(135deg, color-mix(in srgb, var(--blue-ink) 22%, var(--surface)) 50%, var(--hl-soft) 50%); }
body.shell-mobile .mockwrap ~ * #count, body.shell-mobile.quizzing .qbar:has(#sheetbtn) #count { display: none; }
body.shell-desk.panel-open .top .in { margin-right: calc(min(480px, 42vw) + 8px); }
/* 登入、忘記密碼、重設密碼 */
.login .ftitle { margin: 4px 0 6px; font-size: 18px; }
.login .pw { position: relative; }
.login .pw input { width: 100%; padding-right: 64px; }
.login .pw .eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted);
  font-size: 13px; padding: 8px 10px; cursor: pointer; min-height: 40px; }
.login .pw .eye:hover { color: var(--ink); }
.login .caps { margin-top: 6px; font-size: 13px; color: var(--warn-ink); background: var(--warn-bg); border-radius: 6px; padding: 4px 8px; }
.login .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: 14px; }
.login .row a { color: var(--accent-ink); text-decoration: none; }
.login .row a:hover { text-decoration: underline; }
.login .msg.bad { color: var(--bad-ink); }
.login .alt a { color: var(--accent-ink); }
.login .note { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r); font-size: 14px; }
.login .note.ok { background: var(--ok-bg); color: var(--ok-ink); }
.login #dead .btn { display: flex; justify-content: center; margin-top: 14px; }
.login input[readonly] { background: var(--raised); color: var(--muted); cursor: default; }
.login .row .check a { color: var(--accent-ink); }

/* ---------- 科啟手帳風：共用元件 ---------- */
/* 螢光筆小標題：字的下半截一道淡綠 */
.mk { box-shadow: inset 0 -.42em 0 var(--marker); padding: 0 2px; }
/* 金融｜日檢 全域切換：手機在頂端標題列、桌機在側欄頂端，都在「科啟」標誌旁；作答中不顯示 */
.tswitch { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; background: var(--track); border-radius: 999px; padding: 3px; }
.tswitch button { border: 0; background: transparent; border-radius: 999px; padding: 4px 12px; min-height: 32px; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tswitch button.on { background: var(--trk); color: var(--trk-on); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.side-top { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; min-width: 0; }
.side-top .brand { padding: 4px 8px; }
#side-track { margin-left: auto; min-width: 0; }
#top-track { flex: none; }
body.quizzing #top-track, body.quizzing #side-track, body.onboard #top-track { display: none; }
/* 輔助色：主色抹茶不變；金融偏墨、日檢偏藤色（切換鈕、頁首與側欄的一道邊），一眼看得出在哪一邊 */
:root { --trk: var(--surface); --trk-on: var(--ink); }
body.track-fin { --trk: #3d4a5c; --trk-on: #fff; --trk-bg: #e4e8ee; }
body.track-lang { --trk: #7b6fa6; --trk-on: #fff; --trk-bg: #ece8f4; }
body.track-other { --trk: #8a6e3a; --trk-on: #fff; --trk-bg: #f1eadc; }
body.dark.track-fin { --trk: #9fb0c8; --trk-on: #121514; --trk-bg: #222a35; }
body.dark.track-lang { --trk: #b3a8da; --trk-on: #121514; --trk-bg: #2a2638; }
body.dark.track-other { --trk: #d2b47a; --trk-on: #121514; --trk-bg: #33291a; }
body[class*="track-"] .top { box-shadow: inset 0 -2px 0 var(--trk); }
body.shell-desk[class*="track-"] .side { box-shadow: inset 3px 0 0 var(--trk); }
body.quizzing .top { box-shadow: none; }
/* 講義頁「回到剛才的練習」：捲動時固定在頁首下面（黏在 main 裡，不能黏在 pagehead 卡片裡） */
.backbar { position: sticky; top: calc(53px + env(safe-area-inset-top)); z-index: 6; background: var(--ground); margin: 0 -16px; padding: 6px 16px; }
body.shell-desk .backbar { top: 53px; margin: 0; padding: 6px 0; }
/* 便利貼卡：三色、上方一段紙膠帶、圓角不對稱 */
.note { position: relative; border-radius: var(--rn); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.note::before { content: ""; position: absolute; top: -7px; left: 50%; width: 58px; height: 15px; margin-left: -29px; background: var(--tape); border-radius: 2px; transform: rotate(-3deg); }
.n1 { background: var(--note1); } .n2 { background: var(--note2); } .n3 { background: var(--note3); }
.note-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.note-h b { font-size: calc(16px * var(--rs)); font-weight: 800; letter-spacing: .02em; }
.note-t { font-size: calc(14px * var(--rs)); }
.note-f { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ring text, .trend text { font-family: var(--font); }
.trend .ax { font-size: 10px; fill: var(--muted); } .trend .ax.strong { fill: var(--ink); font-weight: 700; }
.segbar { display: flex; gap: 2px; border-radius: 99px; overflow: hidden; background: var(--track); }
.segbar span { min-width: 2px; }
.segbar .l0 { background: var(--track); } .segbar .l1 { background: color-mix(in srgb, var(--accent) 38%, var(--track)); }
.segbar .l2 { background: color-mix(in srgb, var(--accent) 66%, var(--track)); } .segbar .l3 { background: var(--accent); }
.heatg { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 7), auto); gap: 3px; }
.heatg i, .heat-legend i { aspect-ratio: 1; border-radius: 3px; background: var(--track); }
.heatg .h1, .heat-legend .h1 { background: color-mix(in srgb, var(--accent) 22%, var(--track)); }
.heatg .h2, .heat-legend .h2 { background: color-mix(in srgb, var(--accent) 45%, var(--track)); }
.heatg .h3, .heat-legend .h3 { background: color-mix(in srgb, var(--accent) 72%, var(--track)); }
.heatg .h4, .heat-legend .h4 { background: var(--accent); }
.heatg .hx { background: transparent; outline: 1px dashed var(--control); outline-offset: -1px; }
.heat-legend { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.heat-legend i { width: 10px; }
.cat { margin: 0; display: grid; place-items: center; }
.cat img { width: 100%; height: auto; max-height: 220px; object-fit: contain; object-position: center; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hana .draw { stroke-dasharray: 420; animation: hana-draw 900ms ease-out both; }
  @keyframes hana-draw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
}

/* ---------- 首頁（儀表板） ---------- */
.home-loading { display: grid; justify-items: center; gap: 8px; padding: 32px 16px; }
.home-loading .cat img { max-height: 160px; }
.home-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.home-top h1 { margin: 2px 0 0; font-size: calc(26px * var(--rs)); line-height: 1.3; letter-spacing: .01em; }
.home-top p { margin: 0; }
.home-top .btn { border-radius: 999px; background: var(--raised); border-color: transparent; font-weight: 700; }
.dash2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.dash2 .span2 { grid-column: span 2; }
.dz { display: flex; flex-direction: column; gap: 12px; }
.dz h2 { margin: 0; }
.dz .num { font-weight: 700; }
.dz-note { margin: 0; font-size: 14px; }
.dz-stack { display: grid; gap: 16px; grid-template-rows: auto 1fr; min-width: 0; }
.today3 { flex-direction: row; gap: 20px; }
.today3-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.notes3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; flex: 1; padding-top: 6px; }
.notes3 .note { min-height: 150px; }
.task-art { width: 220px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; text-align: center; position: relative; }
.task-art .hana { position: absolute; top: 0; right: 0; z-index: 1; }
.task-art.soft { justify-content: center; }
.task-art p { margin: 0; font-size: 13px; }
.subj-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; text-decoration: none; }
.subj-r { display: grid; gap: 7px; }
.subj-n { display: flex; justify-content: space-between; gap: 8px; }
.subj-r .segbar { height: 10px; }
.sub .up { color: var(--accent-ink); }
.hbars { display: grid; gap: 4px; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 120px) 3em 2em; gap: 10px; align-items: center; font-size: 14px; text-align: left;
  background: transparent; border: 0; padding: 5px 4px; border-radius: 8px; color: inherit; }
button.hbar { cursor: pointer; }
button.hbar:hover { background: var(--raised); }
.hbar .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .b { height: 8px; background: var(--track); border-radius: 99px; overflow: hidden; }
.hbar .b i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.hbar .num { text-align: right; font-variant-numeric: tabular-nums; }
.hbar .go { font-size: 12px; color: var(--accent-ink); font-weight: 700; }
.hbar .tr { color: var(--muted); }
.sprint { position: relative; padding-top: 6px; }
.sprint-bar { display: flex; gap: 2px; height: 8px; border-radius: 99px; overflow: hidden; }
.sprint-bar span { background: var(--track); }
.sprint-bar span.past { background: var(--accent); } .sprint-bar span.now { background: color-mix(in srgb, var(--accent) 50%, var(--track)); }
.sprint-bar i { position: absolute; top: 0; width: 2px; height: 20px; background: var(--ink); margin-left: -1px; }
.sprint-lb { display: flex; font-size: 12px; color: var(--muted); margin-top: 8px; }
.sprint-lb .on { color: var(--ink); font-weight: 700; }
.open-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.open-card { background: var(--note3); border-radius: var(--rn); padding: 14px; display: grid; gap: 8px; text-decoration: none; align-content: start; }
.open-card .pill { justify-self: start; background: var(--surface); }
.open-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.open-card .segbar { height: 6px; }
.plants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.plant { border-radius: 12px; padding: 12px 6px; display: grid; justify-items: center; gap: 2px; text-align: center; }
.plant .muted { font-size: 12px; }
.plants + .segbar { height: 10px; }
.weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.weeks span { height: 40px; border-radius: 8px; background: var(--track); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
body.shell-desk .dz .heatg { max-width: 420px; }

/* 手機今日：任務卡左右滑（露出下一張的邊），圖精簡 */
.m-head h1 { margin: 0; font-size: calc(22px * var(--rs)); line-height: 1.3; }
.m-head p { margin: 2px 0 0; }
.hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -16px; padding: 10px 16px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; min-height: 168px; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots i { width: 6px; height: 6px; border-radius: 9px; background: var(--control); transition: width .2s; }
.dots i.on { width: 18px; background: var(--accent); }
.cat-card .task-art { width: auto; flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left; }
.cat-card .task-art .cat img { max-height: 110px; width: 110px; }
.cat-card .task-art .hana { position: static; }
.rings2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ring-card { align-items: center; text-align: center; text-decoration: none; }
body.shell-mobile .plant .num { font-size: 15px; }
body.shell-mobile .hbar { grid-template-columns: minmax(0, 1fr) 72px 3em 1.5em; }
body.shell-mobile .heatg[style*="repeat(15"] { gap: 3px; }
@media (max-width: 1100px) { .task-art { width: 160px; } }
.heatg i, .heat-legend i { display: block; }
.hscroll { scroll-padding-inline: 16px; }
body.shell-mobile .open-grid { grid-template-columns: minmax(0, 1fr); }

/* ======================================================================
   第 2 段：作答回饋、格子進度條、結果頁、講義章節地圖、錯題本、線條圖示
   動畫都在 300ms 內、不擋操作；使用者設定減少動態時全部不動（最下面）。
   ====================================================================== */
.ico { flex: none; vertical-align: -3px; }
.btn .ico { vertical-align: 0; }
.qtools .btn .ico, .star .ico { margin-left: -2px; }
.star.on { color: #8a5d00; }
body.dark .star.on { color: #ffcf7a; }

/* 格子進度條：每題一格；一排最多 24 格，多了平均分成幾排（--cols），手機不會水平捲動 */
.qgrid { display: grid; grid-template-columns: repeat(var(--cols, 20), minmax(0, 22px)); gap: 2px; justify-content: start; min-width: 0; }
.qgrid button { all: unset; box-sizing: border-box; cursor: pointer; height: 22px; display: grid; place-items: center; position: relative; min-width: 0; }
.qgrid button::before { content: ""; width: min(16px, 100%); aspect-ratio: 1; border-radius: 50%; border: 1.6px solid var(--control); background: var(--surface); box-sizing: border-box; }
.qgrid button.ok::before { background: var(--accent); border-color: var(--accent); }
.qgrid button.bad::before { background: var(--bad); border-color: var(--bad); }
.qgrid button.done::before { background: var(--accent-bg); border-color: var(--accent); }
.qgrid button.cur::before { border-color: var(--accent); border-width: 2.4px; box-shadow: 0 0 0 2px var(--accent-bg); }
.qgrid button.flag::after { content: ""; position: absolute; top: 1px; right: calc(50% - 9px); width: 7px; height: 7px; border-radius: 50%; background: #e0a100; border: 1.5px solid var(--surface); }
.qgrid button:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }
.streak { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--accent-ink); font-weight: 600; min-height: 0; }
.streak:empty { display: none; }
.streak .lv { display: inline-flex; gap: 2px; }
.streak .lv i { display: inline-grid; }

/* 答題回饋：答對＝綠色學習卡＋小勾；答錯＝選的被墨線劃掉、正解輕輕亮起 */
.opt.right { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: 6px 16px 6px 16px; position: relative; }
.opt.right .k { background: rgba(255, 255, 255, .22); color: #fff; }
.opt.right:disabled { color: #fff; }
.opt.right::after { content: ""; position: absolute; top: -6px; right: 18px; width: 12px; height: 20px; background: var(--tape); border-radius: 2px; transform: rotate(14deg); }
.opt.answer { background: var(--accent-bg); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt.answer .k { background: var(--surface); color: var(--accent-ink); }
.opt.wrong { background: var(--raised); border-color: var(--border); }
.opt.wrong .k { background: var(--bad-bg); color: var(--bad-ink); }
.opt.wrong .v { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.6px; text-decoration-color: color-mix(in srgb, var(--ink) 75%, transparent); }
.feedback .verdict { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.feedback .verdict .vsub { flex-basis: 100%; font-size: 14px; font-weight: 400; color: var(--muted); }
.feedback.ok { background: var(--accent-bg); }
.feedback.ok .verdict { color: var(--accent-ink); }
.feedback.bad { background: var(--raised); }
.feedback.bad .verdict { color: var(--ink); }
.sheet button.done { background: var(--accent-bg); border-color: var(--accent); }
.sheet button.flag { box-shadow: none; position: relative; }
.sheet button.flag::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #e0a100; }
.sheet button.done.flag { background: var(--accent-bg); }
.lg { border-radius: 50%; }
.lg.done { background: var(--accent-bg); border-color: var(--accent); }
.lg.flag { background: var(--surface); position: relative; }
.lg.flag::after { content: ""; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: #e0a100; }
@media (prefers-reduced-motion: no-preference) {
  .opt.right.just { animation: card-flip 280ms ease-out both; }
  .opt.answer.just { animation: soft-glow 300ms ease-out both; }
  .opt.wrong.just .v { animation: strike 260ms ease-out both; }
  .streak .lv i.pop { animation: leaf-pop 280ms cubic-bezier(.3, 1.6, .5, 1) both; }
}
@keyframes card-flip { from { transform: perspective(600px) rotateX(70deg); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes soft-glow { from { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 0 var(--accent-bg); } 50% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 6px var(--accent-bg); } to { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 0 transparent; } }
@keyframes strike { from { text-decoration-color: transparent; color: var(--ink); } }
@keyframes leaf-pop { from { transform: translateY(6px) scale(.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* 結果頁：分數儀表、花丸／花苞、和上次比、各主題橫條 */
.result h2 .rtitle { font-size: 13px; font-weight: 400; color: var(--muted); }
.rline { margin: -6px 0 6px; font-size: calc(21px * var(--rs)); font-weight: 800; line-height: 1.4; }
.rhead { display: grid; justify-items: center; gap: 4px; }
.rgauge { width: 100%; display: grid; justify-items: center; }
.gauge { max-width: 100%; height: auto; }
.gauge .gauge-n { font-size: 52px; font-weight: 800; fill: var(--ink); font-variant-numeric: tabular-nums; }
.gauge .ax { font-size: 13px; fill: var(--muted); } .gauge .ax.strong { fill: var(--ink); font-weight: 700; }
.rbadge { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.rbadge-t:empty { display: none; }
.cmp { display: grid; gap: 2px; }
.cmp b { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; }
.cmp b.up { color: var(--accent-ink); } .cmp b.down { color: var(--bad-ink); }
.rhead .cat img { max-height: 180px; }
.rmeta { text-align: center; margin-top: 6px; }
.nextrow .btn { flex: 1 1 auto; max-width: 100%; white-space: normal; text-align: center; }   /* 最弱主題的章節名可能很長：按鈕可以換行，不超出卡片 */
.tbars { display: grid; gap: 6px; }
.tbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 1.3fr) 3em 1.2em; gap: 10px; align-items: center; font-size: 14px; }
.tbar .t { min-width: 0; display: grid; line-height: 1.35; }
.tbar .t small { font-size: 12px; color: var(--muted); }
.tbar .b { position: relative; height: 10px; background: var(--track); border-radius: 99px; }
.tbar .b i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.tbar .b i.lo { background: var(--accent-mid); }
.tbar .b em { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--muted); border: 1.5px solid var(--surface); }
.tbar .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbar .tr { color: var(--accent-ink); display: grid; } .tbar .tr.dn { color: var(--bad-ink); }
.tbars + .dz-note { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .gauge .gauge-v { stroke-dasharray: 100; animation: gauge-in 300ms ease-out both; }
}
@keyframes gauge-in { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
body.shell-desk .rhead { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
body.shell-desk .rhead .cat { grid-column: 1 / -1; }

/* 講義章節地圖：每個知識點一個節點連成一條小路，整章開花在終點放花丸 */
.chlist .item.chap { display: grid; gap: 6px; align-items: start; }
.chap-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; min-width: 0; }
.chap-h .t { min-width: 0; }
.kpath { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.kpath .kn { display: inline-flex; align-items: center; }
.kpath .kn + .kn::before { content: ""; width: 6px; height: 2px; background: var(--accent-mid); opacity: .7; }
.kpath .end { margin-left: 6px; display: inline-grid; }
.kpath .end .goal { opacity: .45; }
.vmap { list-style: none; margin: 0; padding: 0; display: grid; }
.vmap li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 40px; position: relative; }
.vmap li a { text-decoration: none; padding: 6px 0; }
.vmap li::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--accent-mid); opacity: .5; z-index: 0; }
.vmap li:first-child::before { top: 50%; } .vmap li.endpt::before { bottom: 50%; }
.vmap li > svg, .vmap li > .hana { position: relative; z-index: 1; justify-self: center; background: var(--surface); border-radius: 50%; }
.vmap li.endpt span { color: var(--muted); font-size: 14px; }
.maplegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); margin-top: 10px; }
.maplegend span { display: inline-flex; align-items: center; gap: 4px; }
.endart { display: grid; justify-items: center; gap: 6px; margin: 4px 0 10px; text-align: center; }
.endart p { margin: 0; font-weight: 600; }
.endart .cat img { max-height: 170px; }
.endmap { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.endmap h3 { margin-top: 0 !important; }

/* 錯題本：最常錯主題、空了、移出時輕輕飛走 */
.wtop .hbar { grid-template-columns: minmax(0, 1fr) minmax(60px, 1.2fr) 3.4em 2em; }
.wempty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 6px 0 4px; }
.wempty .cat img { max-height: 180px; }
.wempty p { margin: 0; font-weight: 700; font-size: 16px; }
.empty-next { display: grid; justify-items: center; gap: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .fly { animation: fly-away 300ms ease-in forwards; pointer-events: none; }
}
@keyframes fly-away { to { transform: translate(40px, -24px) rotate(6deg); opacity: 0; } }

/* 找不到頁面、離線 */
.lost { display: grid; justify-items: center; gap: 10px; text-align: center; }
.lost .cat img { max-height: 220px; }
.lost p { margin: 0; font-size: 17px; font-weight: 700; }
.offline-bar { display: none; align-items: center; justify-content: center; gap: 8px; }
body.offline .offline-bar { display: flex; }
.offline-bar img { width: 34px; height: 34px; object-fit: contain; flex: none; }

/* 首頁小項：字級跟著設定、桌機三件事每張都有按鈕 */
.note .btn.small, .today3 .btn { font-size: calc(13px * var(--rs)); }
.today3 > div > div > .btn.go { font-size: calc(15px * var(--rs)); }
.dz-note { font-size: calc(14px * var(--rs)); }
.note-f .btn { flex: none; }
.open-more { justify-self: start; }


/* ======================================================================
   第 2b 段：考試分頁（便利貼卡、三個大入口、歷屆時間軸）、錯題（進出長條、小卡）、我的（個人卡、徽章、設定分頁）、紀錄圖表
   ====================================================================== */
.seglegend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12px; color: var(--muted); }
.seglegend span { display: inline-flex; align-items: center; gap: 5px; }
.seglegend span.on { color: var(--ink); font-weight: 700; }
.seglegend i { width: 12px; height: 8px; border-radius: 99px; background: var(--track); display: inline-block; }
.seglegend i.l1 { background: color-mix(in srgb, var(--accent) 38%, var(--track)); } .seglegend i.l3 { background: var(--accent); }
.seglegend i.lin { background: var(--bad); opacity: .75; } .seglegend i.lout { background: var(--accent); }
.subj-row.static { cursor: default; }
.subjs { display: grid; gap: 14px; }
.subj-b { gap: 8px; }
.subj-b .btn { flex: none; }

/* 考試列表：一張報名考試一張便利貼 */
.exgrid { display: grid; gap: 18px 14px; grid-template-columns: minmax(0, 1fr); padding-top: 6px; }
@media (min-width: 720px) { .exgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.excard { text-decoration: none; color: inherit; gap: 10px; }
.excard:hover { filter: brightness(.98); }
.excard-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.excard-h .icon, .exhero .exam-head .icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; font-size: 19px; font-weight: 800;
  background: var(--surface); color: var(--c); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.excard-n { display: grid; min-width: 0; line-height: 1.4; }
.excard-n b { font-size: calc(16px * var(--rs)); overflow-wrap: anywhere; }
.excard-n .muted { font-size: 13px; }
.excard .segbar { height: 8px; }
.excard-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; min-height: 24px; }
.excard-f .hn { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); font-weight: 700; }
.exadd { width: 100%; align-items: center; text-align: center; }

/* 考試頁：頂端插畫圖示＋倒數＋三個大入口 */
.exhero { display: grid; gap: 14px; }
.exhero .exam-head .icon { width: 52px; height: 52px; font-size: 24px; border-radius: 14px; }
.exam-hn { flex: 1; min-width: 0; }
.exhero .countdown { display: inline-flex; align-items: baseline; gap: 3px; flex: none; color: var(--ink); }
.exhero .countdown b { font-size: calc(30px * var(--rs)); line-height: 1; font-variant-numeric: tabular-nums; }
.exhero .countdown small { font-size: 12px; color: var(--muted); }
.exhero .accline { margin: 0; }
.big3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.big3-b { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; min-width: 0;
  padding: 14px 6px 12px; border-radius: var(--rn); background: var(--note1); color: var(--ink); }
.big3-b:nth-child(2) { background: var(--note2); } .big3-b:nth-child(3) { background: var(--note3); }
.big3-b .ico { color: var(--accent-ink); }
.big3-b b { font-size: calc(15px * var(--rs)); }
.big3-b .muted { font-size: 12px; line-height: 1.4; }
.big3-b:hover { filter: brightness(.97); }
.big3-b:focus-visible { outline: 2px solid var(--accent); }
.big3-b[disabled] { opacity: .5; cursor: default; }
@media (max-width: 420px) { .big3-b .muted { display: none; } }

/* 歷屆時間軸：一屆一個節點，用一條線串起來（新的在前），手機兩欄、桌機自動排 */
.tline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px 0; }
body.shell-mobile .tline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl { position: relative; min-width: 0; }
.tl::before { content: ""; position: absolute; top: 19px; left: 0; right: 0; height: 2px; background: var(--accent-mid); opacity: .45; }
.tl:first-child::before { left: 50%; }
.tl button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; position: relative; text-align: center; }
.tl button:hover { background: var(--raised); }
.tl button:focus-visible { outline: 2px solid var(--accent); }
.tl-n { position: relative; display: grid; place-items: center; width: 28px; height: 28px; background: var(--surface); border-radius: 50%; }
.tl-h { position: absolute; right: -14px; top: -8px; }
.tl b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.tl small { font-size: 11px; }
.tl.old b { color: var(--muted); font-weight: 400; }
.tl.locked button { color: var(--muted); }
.tl.locked .ico { width: 28px; height: 28px; padding: 4px; box-sizing: border-box; background: var(--surface); border-radius: 50%; }
.tl.locked .pill { font-size: 11px; padding: 1px 8px; }
.tl-more { justify-self: start; }

/* 錯題本頂端：進出長條＋各考試分布、最常錯主題；桌機兩張並排同高 */
.wtops { display: grid; gap: 16px; }
body.shell-desk .wtops:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.wtrend h3 { margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; }
.wtrend h3 .sub { margin-left: auto; }
.segbar.mix span { min-width: 3px; }
.wtrend .dz-note { display: flex; align-items: center; gap: 6px; }
/* 錯題小卡：考試色的小邊條、小標籤、連對點點 */
.wcard { border-left: 4px solid var(--c); border-radius: 6px var(--r) var(--r) 6px; gap: 8px; }
.wcard-h, .wcard-f { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.wcard-f { font-size: 12px; row-gap: 2px; }
.ctag { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--raised); color: var(--muted); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctag.ex { background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--ink); font-weight: 600; }
.sdots { display: inline-flex; gap: 3px; }
.sdots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); box-sizing: border-box; }
.sdots i.on { background: var(--accent); }
#wres { display: grid; gap: 10px; }
/* 錯題本（手機）：考試下拉；免費時舊屆錯題暫時藏起來的一行提示（續用通行證就回來） */
.wexam { display: grid; gap: 4px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.oldhint { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--r); font-size: 14px; }
.oldhint p { margin: 0; flex: 1 1 14em; min-width: 0; }

/* 我的：個人卡（熱度、花丸、徽章）＋一張清單；子頁見下面 */
.mecard { display: grid; gap: 14px; }
.mecard h3 { margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; }
.mecard h3 .sub { margin-left: auto; }
.me-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; background: var(--accent-bg); color: var(--accent-ink); }
.me-n { display: grid; min-width: 0; }
.me-n b { font-size: calc(18px * var(--rs)); }
.me-n .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-streak { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--accent-ink); }
.me-streak .num { font-size: 18px; }
body.shell-desk .me-heat .heatg { max-width: 460px; }
.me-hana { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
body.shell-mobile .me-hana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hn-chip { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; background: var(--raised); text-decoration: none; color: inherit; min-width: 0; }
.hn-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.mecard .dz-note { margin: -6px 0 0; font-size: 12px; }
.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1024px) { body.shell-desk .badges { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.badge { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; padding: 12px 6px; border-radius: 14px; border: 1.5px dashed var(--control); min-width: 0; }
.badge .bdg { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--control); background: var(--raised); }
.badge b { font-size: 13px; color: var(--muted); }
.badge .muted { font-size: 11px; line-height: 1.4; }
.badge.got { border: 1.5px solid var(--accent-mid); background: var(--accent-bg); }
.badge.got .bdg { color: var(--accent-ink); background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.badge.got b { color: var(--ink); }
.bprog { width: 70%; height: 4px; border-radius: 99px; background: var(--track); overflow: hidden; }
.bprog i { display: block; height: 100%; background: var(--accent-mid); }
.mecard h3 .btn { margin-left: auto; }
.badges.got { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
body.shell-desk .badges.got { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

/* 我的：清單＋子頁。手機單欄（清單在個人卡下面；子頁只留內容，頁首「‹」回到我的）；桌機左邊清單、右邊內容 */
.me-page { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.me-sub { display: grid; gap: 14px; min-width: 0; }
.melist { padding: 6px 0; }
.mrow { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 16px; text-decoration: none; color: inherit; min-width: 0; border-bottom: 1px solid var(--rule); }
.melist > :last-child { border-bottom: 0; }
a.mrow:hover { background: var(--raised); }
a.mrow.on { background: var(--accent-bg); }
.mrow .mico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--accent-bg); color: var(--accent-ink); }
.mrow .mico .ico { width: 20px; height: 20px; }
.mrow .mtx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mrow .mtx b { font-weight: 600; line-height: 1.4; }
.mrow .mtx .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .mtx .muted.wrap { white-space: normal; line-height: 1.5; }
.mrow .mgo { flex: none; font-size: 22px; line-height: 1; color: var(--faint); }
.mrow.adm { background: color-mix(in srgb, var(--blue-bg) 55%, var(--surface)); }
a.mrow.adm:hover { background: var(--blue-bg); }
.mrow.adm .mico { background: var(--surface); color: var(--blue-ink); }
.mrow-h { font-size: 12px; font-weight: 600; color: var(--blue-ink); padding: 14px 16px 4px; margin-top: 4px; border-top: 1px solid var(--rule); }
body.shell-mobile .me-page.is-sub .melist { display: none; }
body.shell-desk .me-page { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "list content"; column-gap: 20px; }
body.shell-desk .melist { grid-area: list; position: sticky; top: 76px; align-self: start; }
body.shell-desk .mecard, body.shell-desk .me-sub { grid-area: content; min-width: 0; }

/* 考試列：列尾「…」選單（改日期、收起）；收起與考過的收在最下面 */
.mexrow { display: flex; align-items: flex-start; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.mexrow .exh { display: flex; gap: 12px; align-items: flex-start; flex: 1; min-width: 0; }
.mexrow .exh .icon { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 8px; font-size: 17px; font-weight: 700;
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); color: color-mix(in srgb, var(--c, var(--accent)) 80%, var(--ink)); }
.mexrow .exm { display: grid; gap: 2px; min-width: 0; }
.mexrow .nm { font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.mexrow .exm .muted { line-height: 1.5; overflow-wrap: anywhere; }
.mexrow.old { align-items: center; }
.mexrow.old .exh { align-items: center; }
.mexrow .ghost { min-height: 0; padding: 0 2px; }
.xm { position: relative; flex: none; }
.xm-b { min-width: 40px; padding: 4px 10px; font-size: 18px; line-height: 1; letter-spacing: .08em; }
.xm-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; display: grid; min-width: 188px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, .16); }
.xm-pop button { border: 0; background: transparent; text-align: left; padding: 0 12px; min-height: 42px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); }
.xm-pop button:hover, .xm-pop button:focus-visible { background: var(--raised); }
.mex-old { margin-top: 14px; border-top: 1px solid var(--rule); }
.mex-old > summary { cursor: pointer; list-style: none; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.mex-old > summary::-webkit-details-marker { display: none; }
.mex-old > summary::after { content: "展開"; margin-left: auto; font-size: 13px; font-weight: 400; color: var(--faint); }
.mex-old[open] > summary::after { content: "收起"; }

/* 方案與權益：每張考試一行 */
.planrow .t { white-space: normal; display: grid; gap: 2px; min-width: 0; }
.planrow .t b { font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.planrow .t .muted { line-height: 1.5; }

/* 開關（role=switch）：提醒與通知、管理員的「顯示全部考試」 */
.swrow { display: flex; align-items: center; gap: 14px; }
.swrow .mtx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.swrow .mtx b { font-weight: 600; line-height: 1.4; }
.swrow .mtx .muted { line-height: 1.5; }
.sw { position: relative; flex: none; width: 48px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: var(--control); cursor: pointer; transition: background .18s; }
.sw i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); transition: transform .18s; }
.sw[aria-checked="true"] { background: var(--accent); }
.sw[aria-checked="true"] i { transform: translateX(20px); }
.sw:disabled { opacity: .5; cursor: default; }
.sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mrow.adm .sw { margin-left: auto; }

/* 我的紀錄：桌機上兩張並排同高；走勢多科時並排 */
.stats2 { display: grid; gap: 16px; }
body.shell-desk .stats2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.trends { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.trends h3 { margin: 0 0 4px; display: flex; gap: 8px; align-items: baseline; }
.vbars { margin-bottom: 4px; }
.jprow { margin-bottom: 10px; }
.jprow .segbar { height: 10px; }

@media (prefers-reduced-motion: reduce) {
  .opt.right.just, .opt.answer.just, .opt.wrong.just .v, .streak .lv i.pop, .gauge .gauge-v, .fly { animation: none !important; }
  .fly { opacity: 0; }
}
.exhero .countdown { min-width: 0; padding: 0; background: none; }
.exhero .countdown b { display: inline; }
.tl:last-child::before { right: 50%; } .tl:first-child:last-child::before { display: none; }
.dz > svg.trend, .trends svg.trend { max-height: 200px; }

/* ---------- 作答時的操作（第 3 段）：刪去法、標原因、法條標籤、側邊講義、快捷鍵、配速、題目字級 ---------- */
/* 題目字級／行距：只套用題目區（--qs 乘在全站字級 --rs 上） */
.qfs-s { --qs: .9; --ql: 1.6; }
.qfs-l { --qs: 1.18; --ql: 1.95; }
.qmeta .aa { order: 99; margin-left: auto; flex: none; min-width: 36px; min-height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font); cursor: pointer; }
.qmeta .aa:hover { background: var(--raised); }
.aa-demo { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r); background: var(--raised); font-size: calc(16px * var(--rs) * var(--qs, 1)); line-height: var(--ql, 1.75); }
/* 刪去法：淡化＋細線，只是記號（照樣可以點來作答） */
.opt { -webkit-touch-callout: none; }
body.shell-mobile .opt { user-select: none; -webkit-user-select: none; }
.opt.elim { opacity: .5; border-style: dashed; }
.opt.elim .v { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--muted); color: var(--muted); }
.opt.elim .k { background: transparent; box-shadow: inset 0 0 0 1px var(--control); }
.opt.pressing { background: var(--raised); transition: background .4s; }
/* 標原因：小小的按鈕，選了變墨色 */
.reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.reasons .chip { padding: 3px 12px; min-height: 30px; }
/* 詳解裡的法條、知識點標籤 */
.lawtag { display: inline; font: inherit; font-size: .92em; line-height: 1.5; padding: 0 6px; margin: 0 1px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--blue-ink); cursor: pointer; text-decoration: none; white-space: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lawtag:hover { background: var(--blue-bg); border-color: var(--blue-bg); }
.lawtag.off { color: var(--muted); cursor: default; border-style: dashed; background: transparent; }
.kplinks { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 14px; }
.kplinks .lawtag.kp { color: var(--accent-ink); }
.kplinks .lawtag.kp:hover { background: var(--accent-bg); border-color: var(--accent-bg); }
.feedback.fold .exwrap { display: none; }
.feedback.fold #unfold { justify-self: start; }
/* 側邊講義：桌機右側、手機從下方滑出；不換頁 */
.kpdrawer { position: fixed; inset: 0; z-index: 55; }
.kpd-back { position: absolute; inset: 0; background: rgba(15, 16, 17, .32); }
.kpd { position: absolute; display: grid; gap: 10px; align-content: start; overflow: auto; overscroll-behavior: contain; margin: 0; outline: none;
  right: 0; top: 0; bottom: 0; width: min(440px, 92vw); border-radius: 0; padding: 18px; animation: kpd-r .22s cubic-bezier(.22, 1, .36, 1); }
.kpd-h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kpd .kphead { margin: 0; font-size: calc(18px * var(--rs)); }
.kpd .kppoint, .kpd .kpdetail { line-height: 1.75; }
.kppit { padding: 10px 12px; border-radius: var(--r); background: var(--raised); font-size: 14px; }
.kppit b { display: block; font-size: 12px; color: var(--muted); }
.kpd-f { margin-top: 4px; }
.skel { height: 18px; border-radius: 6px; background: var(--raised); margin: 8px 0; }
.skel.short { width: 60%; }
@keyframes kpd-r { from { transform: translateX(40px); opacity: 0; } }
@keyframes kpd-u { from { transform: translateY(40px); opacity: 0; } }
@media (max-width: 720px), (hover: none) {
  .kpd { top: auto; left: 0; width: 100%; max-height: 78vh; border-radius: 16px 16px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); animation-name: kpd-u; }
}
/* 快捷鍵表按鈕：桌機作答頁右下角 */
.kbhelp { display: none; }
body.shell-desk .kbhelp { display: grid; place-items: center; position: fixed; z-index: 25; right: 20px; bottom: 20px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 700 17px/1 var(--font); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
body.shell-desk .kbhelp:hover { background: var(--raised); }
table.keys td { padding: 7px 8px; vertical-align: top; }
table.keys kbd { font: 12px var(--font); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; background: var(--raised); }
/* 復原 toast：墨色＋一顆「復原」 */
.toast.undo { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; }
.toast.undo button { border: 0; border-radius: 8px; padding: 6px 12px; min-height: 32px; background: color-mix(in srgb, var(--surface) 18%, transparent); color: var(--surface); font-weight: 700; cursor: pointer; }
.toast.undo button:hover { background: color-mix(in srgb, var(--surface) 30%, transparent); }
/* 模擬考配速：實際進度（抹茶）＋理想進度的刻度（墨色細線） */
.pace { margin-bottom: 10px; }
.pace-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.pace-h b { color: var(--ink); }
.pace-b { position: relative; height: 8px; border-radius: 4px; background: var(--track); }
.pace-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent-mid); }
.pace-b em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
/* 錯題本：錯的原因分段長條（點一段就篩選） */
.rbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; margin: 6px 0 8px; }
.rbar button { border: 0; padding: 0; cursor: pointer; min-width: 6px; }
.rbar button.careless, .rlegend i.careless { background: var(--accent-mid); }
.rbar button.unknown, .rlegend i.unknown { background: var(--bad); }
.rbar button.forgot, .rlegend i.forgot { background: var(--blue-ink); }
.rbar button.none, .rlegend i.none { background: var(--track); }
.rbar.sel button:not(.on) { opacity: .35; }
.rlegend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
.rlegend button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--ink); font-size: 13px; cursor: pointer; white-space: nowrap; }
.rlegend button.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.rlegend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rlegend b { font-variant-numeric: tabular-nums; }
.ctag.rs { background: var(--raised); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .kpd { animation: none; } .opt.pressing { transition: none; } }
/* 加入考試：另一類收在「其他類別」下面 */
.section-title.other-h { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--rule); }
.section-title.sm { font-size: 14px; color: var(--muted); }

/* ---------- 帳號與安全：email、登入中的裝置、刪除說明；條款同意面板 ---------- */
.acct-em .t { flex: 0 0 auto; }
.acct-em .r { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.item.dev { align-items: flex-start; }
.item.dev .t { white-space: normal; overflow-wrap: anywhere; }
.item.dev .t .muted { display: block; font-size: 13px; margin-top: 2px; }
.item.dev .btn { flex: 0 0 auto; }
ul.plain { margin: 6px 0 10px; padding-left: 1.2em; display: grid; gap: 6px; }
ul.plain li { line-height: 1.55; }
.card.legal { max-width: 640px; margin-left: auto; margin-right: auto; }
.card.legal .list { margin: 12px 0; border: 1px solid var(--rule); border-radius: var(--r); }
#restore .btn { width: 100%; margin-top: 10px; min-height: 48px; font-size: 16px; }
.card.legal .list .item { padding: 12px 14px; }

/* ======================================================================
   E：日檢考試頁（級別大字、分科便利貼、模擬考時間軸、植物分布、更多清單）
   手機一欄；桌機兩欄（左：分科＋模擬考，右：今日學習＋植物＋單字卡）
   ====================================================================== */
.exhero .exam-head .icon.lvl { font-size: calc(22px * var(--rs)); letter-spacing: .02em; color: var(--trk, var(--c)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--trk, var(--c)) 50%, transparent); }
.jgrid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.jcol { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 980px) { body.shell-desk .jgrid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.jsubjs { display: grid; gap: 18px 14px; grid-template-columns: minmax(0, 1fr); padding-top: 6px; }
@media (min-width: 600px) { .jsubjs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { body.shell-desk .jsubjs { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1240px) { body.shell-desk .jsubjs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jsubj { gap: 10px; }
.jsubj-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.jglyph { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; font-size: calc(18px * var(--rs)); font-weight: 800;
  background: var(--surface); color: var(--trk, var(--accent-ink)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--trk, var(--accent)) 40%, transparent); }
.jsubj-n { display: grid; min-width: 0; line-height: 1.4; }
.jsubj-n b { font-size: calc(16px * var(--rs)); }
.jsubj-n .muted { font-size: 13px; }
.jsubj-m { display: flex; align-items: center; gap: 8px; font-size: 13px; min-height: 24px; }
.jsubj-m .num { font-size: calc(15px * var(--rs)); }
.jtypes summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; white-space: nowrap; }
.jtype-l { display: grid; gap: 4px; padding-top: 4px; }
.jtype { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; font-size: calc(13px * var(--rs)); }
.jtype:hover, .jtype:focus-visible { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.jtype:focus-visible { outline: 2px solid var(--accent); }
.jtype .rbar { grid-column: 1 / -1; }
.rbar { display: block; height: 5px; border-radius: 99px; background: var(--track); overflow: hidden; }
.rbar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
/* 模擬考：一份一張卡，左邊一條線串起來 */
.mtl { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mcard { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; position: relative; }
.mcard:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: -12px; width: 2px; background: var(--rule); }
.mdot { display: grid; place-items: center; height: 30px; }
.mbody { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--rn); background: var(--raised); min-width: 0; }
.mhead { display: grid; gap: 2px; line-height: 1.45; }
.mhead b { font-size: calc(15px * var(--rs)); }
.mhead .muted { font-size: 13px; }
.sbars { display: grid; gap: 8px; }
.sbar-n { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.sbar-n b small { font-weight: 400; color: var(--muted); }
.sbar { position: relative; height: 8px; border-radius: 99px; background: var(--track); margin-top: 3px; }
.sbar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.sbar.low i { background: var(--bad); opacity: .7; }
.sbar .base { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); opacity: .55; border-radius: 1px; }
.mbody .btnrow .btn { min-width: 120px; }
/* 今日學習與植物 */
.jt-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jt-h h2 { margin: 0; }
#l-prefs { font-weight: 800; text-decoration: none; border: 1px solid var(--border); border-radius: 999px; min-width: 40px; min-height: 32px; }
.today .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.today .steps { margin-top: 0; }
.plants4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; }
.plants4 .pl { display: grid; justify-items: center; gap: 0; }
.plants4 .pl b { font-size: calc(18px * var(--rs)); line-height: 1.2; }
.plants4 .pl small { font-size: 12px; }
.jbig { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--rn);
  background: var(--note3); color: var(--ink); text-decoration: none; }
.jbig > span { display: grid; gap: 2px; }
.jbig .muted { font-size: 13px; }
.jbig .ico { color: var(--accent-ink); }
.jbig:hover { filter: brightness(.97); }
.jmore .list { border: 1px solid var(--border); border-radius: var(--r); }
.jmore .item { padding: 12px 16px; background: none; border-left: 0; border-right: 0; border-top: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.jmore details.item { display: block; }
.jmore details.item summary { list-style: none; display: flex; }
.jmore details.item summary::-webkit-details-marker { display: none; }
.jmore details.item p { margin: 8px 0 0; font-size: 13px; }
.spark { flex: none; }

/* ======================================================================
   F：按鈕群組間距、中文斷行
   ====================================================================== */
/* 按鈕群組：一律 flex＋gap，換行時上下也有間距 */
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btnstack { display: grid; gap: 10px; }
/* 不能斷的片段（nicewrap 產生：括號整段、「・」連起來的詞） */
.nw { white-space: nowrap; }
/* 按鈕、標籤、chip、徽章、分段鈕不換行 */
.btn:not(.big), .pill, .chip, .seg button, .tswitch button, .badge, th { white-space: nowrap; }
/* 標題平衡斷行；短說明不在詞中間斷（長內文不套） */
h1, h2, h3, .name, .card h2, .note-h b, .mhead b, .jsubj-n b, .excard-n b { text-wrap-style: balance; }
.muted, .sub, .desc, .r, .dz-note, small, label.f, .big3-b b, .big3-b .muted { word-break: keep-all; overflow-wrap: anywhere; text-wrap-style: pretty; }
.passage, .stem, .opt, .exp, .lexp, .notes-body, .kp-body { word-break: normal; }
.aubox { display: inline-flex; align-items: center; gap: 6px; }
.au-rate { min-width: 52px; font-variant-numeric: tabular-nums; padding: 4px 8px; }
/* 掃描修正：三個大入口的名稱不換行（字級大時縮字）；錯題本主題列太長用省略號 */
.big3-b b { white-space: nowrap; font-size: min(calc(15px * var(--rs)), 4.1vw); }
.hbar .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 掃描修正（360 寬）：大按鈕不換行，窄螢幕略縮字；科目名（卡片副標）平衡斷行，不留單字一行 */
.btn.big { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(15px, 4.4vw, 17px); }
.subj-n b { text-wrap-style: balance; }