/* 版面概念：一張單欄的「訂正簿」──淡淡的方格紙底，學生的答案是原子筆藍，老師的印章是紅筆。 */
:root {
  --paper: #f7f9f4;
  --paper-2: #ffffff;
  --grid: rgba(60, 120, 110, 0.08);
  --ink: #1d2b2a;
  --ink-soft: #55625f;
  --line: #d5ddd6;
  --pen: #2350a8;          /* 原子筆藍：學生作答、主要按鈕 */
  --pen-soft: #e6edfb;
  --red: #c8372d;          /* 老師紅筆：印章、題號 */
  --ok: #2c7a4b;
  --ok-soft: #e3f3e8;
  --no: #b8630f;           /* 錯誤用橘色，比紅色溫和 */
  --no-soft: #fdf0de;
  --note: #fff4bf;         /* 提示便利貼 */
  --note-ink: #4d4210;
  --shadow: 0 1px 0 rgba(29, 43, 42, 0.06), 0 6px 18px -10px rgba(29, 43, 42, 0.25);
  --display: "Huninn", "jf open 粉圓", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --r: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151b1a; --paper-2: #1d2524; --grid: rgba(140, 200, 190, 0.06);
    --ink: #e7eeeb; --ink-soft: #a3b1ad; --line: #34403e;
    --pen: #8fb0ff; --pen-soft: #22304d; --red: #ff7b6e;
    --ok: #6fd39a; --ok-soft: #1c3527; --no: #f2a65a; --no-soft: #3a2a17;
    --note: #3b3518; --note-ink: #f2e6a8;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 8px 20px -12px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #151b1a; --paper-2: #1d2524; --grid: rgba(140, 200, 190, 0.06);
  --ink: #e7eeeb; --ink-soft: #a3b1ad; --line: #34403e;
  --pen: #8fb0ff; --pen-soft: #22304d; --red: #ff7b6e;
  --ok: #6fd39a; --ok-soft: #1c3527; --no: #f2a65a; --no-soft: #3a2a17;
  --note: #3b3518; --note-ink: #f2e6a8;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 8px 20px -12px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
}
body.has-keypad { padding-bottom: 280px; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; }
button:disabled { cursor: default; }

.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.topbar-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 12px; min-height: 56px; }
.brand { font-family: var(--display); font-size: 1.05rem; color: var(--red); letter-spacing: 0.04em; margin-left: auto; }
#topback { border: 0; background: none; padding: 8px 4px; color: var(--pen); font-weight: 700; }

main {
  max-width: 760px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 20px 48px;
  display: flex; flex-direction: column; gap: 20px;
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0; line-height: 1.3; }
h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
.eyebrow { margin: 0; font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.06em; }
.lede { margin: 0; color: var(--ink-soft); max-width: 34em; }
.inline-ico { width: 1.1em; height: 1.1em; vertical-align: -0.18em; color: var(--pen); }

/* 首頁 */
.hero { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.hero h1 { color: var(--ink); }
.hero h1::after { content: ""; display: block; width: 64px; height: 6px; margin-top: 10px; background: var(--red); border-radius: 3px; transform: rotate(-2deg); }
.group { display: flex; flex-direction: column; gap: 10px; }
.group-title { font-size: 1.15rem; color: var(--ink-soft); }
.exam-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.exam-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .15s ease;
}
.exam-card:hover { transform: translateY(-2px); border-color: var(--pen); }
.exam-unit { font-size: 0.85rem; color: var(--red); }
.exam-title { font-family: var(--display); font-size: 1.35rem; line-height: 1.35; }
.exam-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.9rem; color: var(--ink-soft); }
.pill { font-size: 0.8rem; padding: 1px 10px; border-radius: 99px; }
.pill-done { background: var(--ok-soft); color: var(--ok); }

/* 考卷頁 */
.exam-head { display: flex; flex-direction: column; gap: 4px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .modes { grid-template-columns: 1fr; } }
.mode {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  border-radius: var(--r); padding: 16px 18px; border: 2px solid var(--line); background: var(--paper-2);
}
button.mode { border-color: var(--pen); min-height: 120px; }
.choose-q { margin: 0; font-family: var(--display); font-size: 1.3rem; }
button.mode:hover { background: var(--pen-soft); }
.mode-k { font-family: var(--display); font-size: 1.3rem; }
button.mode .mode-k { color: var(--pen); }
.mode-d { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }
.mode-static { border-style: dashed; }

.picker { display: flex; flex-direction: column; gap: 6px; }
.sec-title { font-size: 1.05rem; margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative; min-width: 64px; min-height: 52px; padding: 6px 12px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--paper-2);
  font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.chip.on { border-color: var(--red); background: var(--no-soft); color: var(--red); font-weight: 700; }
.chip.on::before { content: "✗"; position: absolute; top: -10px; left: -8px; font-size: 1.1rem; color: var(--red); font-family: var(--display); }
.chip-ok { position: absolute; top: -9px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: var(--paper-2); font-size: 0.8rem; line-height: 22px; text-align: center; }
.reset-row { font-size: 0.9rem; color: var(--ink-soft); }
.link-btn { background: none; border: 0; padding: 4px 2px; text-decoration: underline; color: var(--ink-soft); font-size: 0.9rem; }
.link-btn.danger { color: var(--red); font-weight: 700; }

.dock {
  position: sticky; bottom: 0; z-index: 15;
  padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, var(--paper) 30%);
}

/* 按鈕 */
.btn { border-radius: 12px; padding: 12px 22px; font-weight: 700; border: 2px solid transparent; min-height: 52px; }
.btn-primary { background: var(--pen); color: var(--paper-2); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: var(--paper-2); border-color: var(--pen); color: var(--pen); }
.btn-big { width: 100%; font-size: 1.15rem; min-height: 60px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.actions .btn { flex: 1 1 160px; }

/* 做題 */
.progress { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--pen); border-radius: 99px; transition: width .3s ease; }
.work-eyebrow { margin-top: -8px; }
.qcard {
  position: relative; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px;
}
.qhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qno { font-family: var(--display); font-size: 1.5rem; color: var(--red); }
.qsec { font-size: 0.85rem; color: var(--ink-soft); }
.qhead .speak { margin-left: auto; }
.qtext { font-size: 1.25rem; line-height: 2.4; min-width: 0; overflow-wrap: anywhere; }

/* 分數排版 */
.mfrac { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 0.15em; line-height: 1.15; }
.mw { margin-right: 0.08em; }
.mf { display: inline-flex; flex-direction: column; align-items: center; font-size: 0.82em; }
.mn { padding: 0 0.2em; border-bottom: 2px solid currentColor; }
.md { padding: 0 0.2em; }

/* 填空格 */
.fld {
  display: inline-block; vertical-align: middle; min-width: 3.2em; height: 1.9em; padding: 0 0.4em; margin: 0 0.15em;
  border: 2px solid var(--line); border-radius: 10px; background: var(--paper);
  color: var(--pen); font-weight: 700; font-size: 1.05em; line-height: 1.7em; text-align: center; font-variant-numeric: tabular-nums;
}
.fld-wide { min-width: 6.5em; }
.fld.active { border-color: var(--pen); background: var(--pen-soft); box-shadow: 0 0 0 3px var(--pen-soft); }
.fld.active:empty::after { content: "▏"; animation: blink 1s steps(1) infinite; color: var(--pen); }
@keyframes blink { 50% { opacity: 0; } }
.mark-ok .fld, .fld.mark-ok, .cmp-group.mark-ok { border-color: var(--ok); }
.mark-no .fld, .fld.mark-no, .cmp-group.mark-no { border-color: var(--no); background: var(--no-soft); }
.frac-in { display: inline-flex; align-items: center; vertical-align: middle; gap: 2px; border-radius: 12px; }
.frac-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
.frac-stack .fld { min-width: 2.6em; height: 1.6em; line-height: 1.4em; font-size: 0.95em; }
.frac-bar { display: block; width: 100%; height: 3px; background: var(--ink); border-radius: 2px; }
.fld-w { min-width: 2em; border-style: dashed; }
.unit { margin-left: 0.2em; }
.cmp-group { display: inline-flex; gap: 6px; vertical-align: middle; padding: 3px; border: 2px solid transparent; border-radius: 12px; }
.cmp { width: 2.3em; height: 2.1em; border-radius: 10px; border: 2px solid var(--line); background: var(--paper); font-size: 1em; line-height: 1; }
.cmp.on { border-color: var(--pen); background: var(--pen-soft); color: var(--pen); font-weight: 700; }

/* 選擇題 */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .options { grid-template-columns: 1fr; } }
.opt {
  display: flex; align-items: center; gap: 10px; text-align: left; min-height: 56px; padding: 8px 14px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 1.15rem;
}
.opt-k { font-size: 1.3rem; color: var(--ink-soft); }
.opt.on { border-color: var(--pen); background: var(--pen-soft); }
.opt.on .opt-k { color: var(--pen); }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt-t { min-width: 0; }

/* 朗讀 */
.speak {
  display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--line); background: var(--paper);
  border-radius: 99px; padding: 4px 12px 4px 8px; font-size: 0.9rem; color: var(--pen); min-height: 40px;
}
.speak svg { width: 22px; height: 22px; }
.speak.speaking { border-color: var(--pen); background: var(--pen-soft); }

/* 回饋、提示、詳解 */
.feedback { border-radius: var(--r); padding: 12px 16px; font-weight: 700; line-height: 1.8; }
.fb-ok { background: var(--ok-soft); color: var(--ok); }
.fb-no { background: var(--no-soft); color: var(--no); }
.fb-info { background: var(--pen-soft); color: var(--pen); }
.hints { display: flex; flex-direction: column; gap: 10px; }
.hint {
  background: var(--note); color: var(--note-ink); border-radius: 4px 14px 14px 14px; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; box-shadow: var(--shadow);
}
.hint p { margin: 0; font-size: 1.1rem; line-height: 2; }
.hint-k { font-family: var(--display); font-size: 0.95rem; }
.hint .speak { background: transparent; }
.solution {
  border: 2px solid var(--ok); border-radius: var(--r); padding: 16px 18px; background: var(--paper-2);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.solution h3 { font-size: 1.2rem; color: var(--ok); }
.solution p { margin: 0; font-size: 1.1rem; line-height: 2.1; }
.answer-line { font-weight: 700; color: var(--ok); }
.solution-note { font-size: 1rem !important; color: var(--pen); font-weight: 700; }

/* 紅筆印章 */
.fb-ok { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.stamp {
  flex: none; width: 70px; height: 70px; border-radius: 50%; background: var(--paper-2);
  border: 3px solid var(--red); color: var(--red); font-family: var(--display);
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15; font-size: 1rem;
  transform: rotate(-14deg); opacity: 0.85; pointer-events: none;
  animation: stamp .35s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes stamp { from { transform: rotate(-14deg) scale(1.8); opacity: 0; } }

/* 短除法、樹狀圖 */
.shortdiv { display: inline-flex; flex-direction: column; font-size: 1.2rem; font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.sd-row { display: flex; align-items: stretch; }
.sd-div { width: 2em; text-align: right; padding-right: 0.4em; color: var(--red); font-weight: 700; }
.sd-n { width: 2.6em; text-align: center; }
.sd-has .sd-n { border-bottom: 2px solid var(--ink); }
.sd-has .sd-n:first-of-type { border-left: 2px solid var(--ink); }
.ftree { display: flex; flex-direction: column; gap: 2px; font-size: 1.2rem; margin: 4px 0 8px; }
.ft-root { font-weight: 700; }
.ft-row { display: flex; gap: 8px; padding-left: 1.2em; }
.ft-row + .ft-row { padding-left: 3.2em; }
.ft-leaf { color: var(--red); font-weight: 700; }

/* 鍵盤 */
.keypad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--paper-2); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.4);
  padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.kp-inner { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.key { min-height: 50px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.key:active { background: var(--pen-soft); }
.key-op { color: var(--pen); }
.key-fn { font-size: 1rem; color: var(--ink-soft); }
.key-dun { font-size: 2rem; line-height: 1; }

/* 結果 */
.result-head { display: flex; flex-direction: column; gap: 6px; }
.score { margin: 4px 0; display: flex; align-items: baseline; gap: 8px; }
.score-n { font-family: var(--display); font-size: 4rem; color: var(--red); line-height: 1; }
.score-of { color: var(--ink-soft); }
.result-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.result-list li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); font-size: 0.95rem; }
.r-id { font-weight: 700; font-variant-numeric: tabular-nums; }
.r-ok, .r-self { color: var(--ok); }
.r-no { color: var(--no); background: var(--no-soft) !important; }
.r-hint { color: var(--pen); }
.r-shown { color: var(--no); }
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tally > div { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; align-items: center; }
.t-n { font-family: var(--display); font-size: 2.2rem; line-height: 1.1; }
.t-k { font-size: 0.85rem; color: var(--ink-soft); text-align: center; }
.fine { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40;
  background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 99px; font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 類題 */
.practice-offer { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between;
  background: var(--paper-2); border: 2px dashed var(--pen); border-radius: var(--r); padding: 12px 16px; }
.practice-offer p { margin: 0; font-weight: 700; color: var(--pen); }
.practice-offer .btn { flex: 0 1 auto; }
.qcard.is-practice { border: 2px dashed var(--pen); }
.qcard.is-practice .qno { color: var(--pen); }
.r-sim { display: block; font-size: 0.8rem; color: var(--pen); }

/* 對照紙本考卷的圖 */
.see-paper { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  background: var(--note); color: var(--note-ink); font-weight: 700; font-size: 1.05rem; }
.see-paper svg { width: 26px; height: 26px; flex: none; }

/* LaTeX（MathJax）排版 */
.tex { display: inline-block; vertical-align: middle; max-width: 100%; }
.tex mjx-container { margin: 0 !important; }
.tex svg { overflow: visible; }
.tex-block { display: block; overflow-x: auto; padding-block: 4px; }
.tex-src { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; color: var(--ink-soft); }
.qtext .tex { font-size: 1.08em; }