/* 真好學英語教室・樣式
   設計依據（2026-09-28 實際量過的同類網站，見 docs/12）：
   - 版面骨架學 TestGlider／Speak 的「學習中心」（頂欄＋分頁、今日任務、卡片）
   - 閱讀與標題字學 MockLive／Sprechify 的編輯風（米白紙色、襯線標題、單一強調色）
   - 顏色一律用下面的變數；4 套外觀只換變數。對比度由 dev/site/check.mjs 用 WCAG 公式驗（主文字 ≥7、其餘 ≥4.5）。 */

:root,
[data-theme="paper"] {
  --bg: #f6f4ee;
  --surface: #ffffff;
  --surface-2: #fbfaf6;
  --sunken: #efece4;
  --line: #e3ded2;
  --line-strong: #cfc8b8;
  --ink: #1a1915;
  --ink-2: #45413a;
  --muted: #625d53;
  --primary: #2e3ad0;
  --primary-hover: #2430b5;
  --on-primary: #ffffff;
  --primary-soft: #eceefe;
  --primary-line: #c9cdfb;
  --primary-ink: #2430b5;
  --hl: #ffe680;
  --hl-ink: #1a1915;
  --ok: #146c41;
  --ok-soft: #e4f3ea;
  --bad: #b42318;
  --bad-soft: #fdecea;
  --on-bad: #ffffff; /* 紅底上的字（紅色提示、剩 60 秒）；夜讀的紅是淺色，改深字（L-02） */
  --warn: #7a4f00;
  --warn-soft: #fdf3dc;
  --field-line: #8b867b; /* 輸入框、作答區的邊框：對頁面底色、卡片白底、淡藍底都 ≥3:1（L-11；原本用 --line-strong 只有 1.5–1.7:1） */
  --shadow: 0 1px 2px rgba(26, 25, 21, .05), 0 8px 24px rgba(26, 25, 21, .06);
  --shadow-lg: 0 2px 6px rgba(26, 25, 21, .06), 0 24px 48px rgba(26, 25, 21, .10);
  --head-bg: rgba(246, 244, 238, .86);
  --font-ui: "Inter", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", "Microsoft JhengHei", sans-serif;
  --font-display: "Newsreader", "Noto Serif TC", Georgia, "PMingLiU", serif;
  --font-read: "Newsreader", "Noto Serif TC", Georgia, serif;
  --radius: 16px;
  --radius-sm: 10px;
  --lv-a: #0f6b62;
  --lv-b1: #2451b8;
  --lv-b2: #6a3fb5;
  --lv-c1: #a3361a;
  color-scheme: light;
}

[data-theme="blue"] {
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafd;
  --sunken: #e9eef7;
  --line: #dde4ef;
  --line-strong: #c3cddd;
  --field-line: #818792;
  --ink: #0e1726;
  --ink-2: #334155;
  --muted: #536074;
  --primary: #1f4fe0;
  --primary-hover: #173fbd;
  --on-primary: #ffffff;
  --primary-soft: #e7eeff;
  --primary-line: #c3d3ff;
  --primary-ink: #173fbd;
  --hl: #fff08a;
  --head-bg: rgba(243, 246, 251, .86);
  --font-display: "Inter", "Noto Sans TC", system-ui, sans-serif;
  --radius: 18px;
}

[data-theme="teal"] {
  --bg: #f2f6f5;
  --surface: #ffffff;
  --surface-2: #f8fbfa;
  --sunken: #e6eeec;
  --line: #d7e2df;
  --line-strong: #bccdc9;
  --field-line: #7e8987;
  --ink: #0f1f1e;
  --ink-2: #334543;
  --muted: #52625f;
  --primary: #0a6b66;
  --primary-hover: #085652;
  --on-primary: #ffffff;
  --primary-soft: #e3f2f0;
  --primary-line: #b6dbd6;
  --primary-ink: #085652;
  --hl: #ffe27a;
  --head-bg: rgba(242, 246, 245, .86);
  --font-display: "Source Serif 4", "Noto Serif TC", Georgia, serif;
  --radius: 12px;
}

[data-theme="night"] {
  --bg: #111317;
  --surface: #181b21;
  --surface-2: #1d2128;
  --sunken: #0c0e11;
  --line: #2b3039;
  --line-strong: #3b414d;
  --field-line: #767a82;
  --ink: #eceae4;
  --ink-2: #c9c6be;
  --muted: #a3a097;
  --primary: #9aa3ff;
  --primary-hover: #b3baff;
  --on-primary: #0b0d1c;
  --primary-soft: #232a55;
  --primary-line: #3a4390;
  --primary-ink: #b8beff;
  --hl: #6b5a12;
  --hl-ink: #fff6cc;
  --ok: #6fdba5;
  --ok-soft: #133526;
  --bad: #ff9a90;
  --bad-soft: #3d1714;
  --on-bad: #0b0d1c; /* 白字配 #ff9a90 只有 2.04:1 → 深字 9.44:1（L-02） */
  --warn: #f2c265;
  --warn-soft: #3a2c0c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 48px rgba(0, 0, 0, .5);
  --head-bg: rgba(17, 19, 23, .86);
  --lv-a: #67d5c8;
  --lv-b1: #8fb0ff;
  --lv-b2: #c3a6ff;
  --lv-c1: #ffab8f;
  color-scheme: dark;
}

/* ---------- 基礎 ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* 有些元件自己設了 display:grid／flex，會蓋掉 hidden（考場字幕因此藏不起來，2026-09-29 真機實測抓到） */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  overflow-wrap: break-word; /* 原卷的長底線「____」、長網址在手機上會撐寬整頁 */
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-md)/1.65 var(--font-ui); /* 1rem：跟著瀏覽器的「字型大小」設定放大（原本寫死 16px，調大字型時內文不變、小字反而變大；L-20） */
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img, svg, canvas, video { max-width: 100%; display: block; }
img { height: auto; } /* 有 width/height 屬性（先佔好位置、不跳版）時仍依寬度等比縮放 */
a, button, input, select, textarea, label, summary { touch-action: manipulation; } /* 手機點兩下不放大、點擊不延遲 */
body { -webkit-tap-highlight-color: transparent; } /* 點擊回饋改用各元件自己的 :active／:hover 樣式 */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
dialog, .side-log { overscroll-behavior: contain; } /* 對話框、考場字幕捲到底不帶動整頁 */
/* 觸控時 chip 44px 的規則原本放在這裡，被後面 .chip 的 min-height:36px 蓋掉（權重相同、後者勝）→ 搬到 .chip 定義之後（檔尾「觸控裝置」區；L-09） */
svg.i { width: 1.2em; height: 1.2em; flex: none; display: inline-block; vertical-align: -.22em; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary-ink); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; color: var(--ink); }
/* 字級：全站 7 級（L-15，第六輪 D3）。原本內文有 .72／.75／.78／.8／.82／.85／.86／.875／.88／.9／.92／.93／.95／1.02–1.15rem 等二十多種、
   每頁 11–17 種字級；一律換到最接近的一級，不再寫零散的數字（新增樣式也只用這 7 個變數）。用 rem：跟著瀏覽器的字型大小設定放大（L-20）。
     xs 12px：小標、徽章、表頭、選項字母、圖表的字
     sm 14px：說明、提示、註記、表格、講評
     md 16px：內文、按鈕、逐字稿
     lg 18px：閱讀文章與 C-test、導言、h3 與卡片裡的標題（原本卡片標題 1.25rem、h3 1.08rem 兩種，併成這一級）
     section 21.6–28.8px：卡片外的 h2、統計數字
     title 25.6–36px：各頁 h1、考場計時
     display 30.4–49.6px：首頁主視覺 h1、報告的大分數
   標題三級（section／title／display）沿用施工者 D 的流體字級（L-14）；各頁 JS 行內寫的 h1 字級由檔尾「第六輪」區塊用 !important 收回 title（閱讀題組頁 reading-set.js 不歸 D3 改）。
   字重只用 main.js 載入的：400／500／600／700（原本另有 550、650，b／strong 在 550 以上的字裡會變 900） */
:root { --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-section: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); --fs-title: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); --fs-display: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  --fs-score: clamp(3rem, 2rem + 4vw, 4.6rem); /* 唯一的例外級：報告、起點檢測、寫作結果最上面的大分數（主控 10-04：收進 display 後比標題還小，報告最重要的數字不突出 → 恢復原大小） */ }
h1 { font: 600 var(--fs-title)/1.15 var(--font-display); letter-spacing: -.015em; }
.hero h1 { font-size: var(--fs-display); line-height: 1.12; }
h2 { font: 600 var(--fs-section)/1.2 var(--font-display); letter-spacing: -.01em; }
h3 { font-size: var(--fs-lg); font-weight: 700; }
b, strong { font-weight: 700; } /* 瀏覽器預設是「比外面粗一級」：外面 550 以上時算成 900（沒載入 900，原本實際也是用最粗的已載入字重顯示，畫面不變） */
p { margin: 0 0 .9em; }
small, .small { font-size: var(--fs-sm); }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-display); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
/* 換頁時程式把焦點移到 <main tabindex="-1">（讓讀螢幕軟體從新內容開始念）；剛開網頁還沒用過滑鼠時，瀏覽器會替它畫
   焦點外框＝使用者看到主內容左右兩條藍邊、點一下首頁才消失（2026-09-29 回報）。main 不是可操作的元件，不畫外框；按鈕、連結照舊 */
#main:focus, #main:focus-visible { outline: none; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--primary); color: var(--on-primary); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 減少動態效果：動畫只跑一次就停（原本只把時間縮成 0.01ms、次數照樣無限，「載入中」轉圈每一格跳到隨機角度；L-08）；轉圈直接停住 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .spin { animation: none; }
}

/* ---------- 版面 ---------- */
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.wrap.narrow { width: min(760px, 100% - 32px); }
main { padding: 28px 0 120px; outline: none; }
.stack > * + * { margin-top: var(--gap, 16px); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.spacer { flex: 1; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

/* ---------- 頂欄 ---------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: var(--head-bg); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand .mark { width: 32px; height: 32px; border-radius: 10px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; flex: none; } /* 頂欄擠的時候只縮品牌名，「好」字標不縮（字型調大時英文頂欄的標誌原本縮到 0；L-20） */
.brand .mark svg { width: 24px; height: 24px; } /* 「好」字標本身留了邊（make_logo.py），24px 才看得清楚 */
.brand small { display: block; font-weight: 500; font-size: var(--fs-xs); color: var(--muted); letter-spacing: .04em; margin-top: -3px; }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; color: var(--ink-2); font-weight: 600; padding: 8px 12px; border-radius: 10px; font-size: var(--fs-sm); } /* 原本 .95rem；最近的 md（16px）會讓英文頂欄在 1101 與 1181 以上把品牌名、副標截掉（第六輪 D3 實測）→ 跟頂欄其他按鈕一樣用 sm */
.nav a:hover { background: var(--sunken); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--primary-ink); background: var(--primary-soft); }
.exam-switch { display: inline-flex; background: var(--sunken); border-radius: 999px; padding: 3px; gap: 2px; }
.exam-switch button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; min-height: 32px; }
.exam-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.keydot { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
.keydot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.keydot.on::before { background: var(--ok); }
.iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.iconbtn:hover { background: var(--sunken); color: var(--ink); }
.iconbtn.lang { width: auto; min-width: 44px; padding: 0 10px; font-weight: 700; font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--surface); }
.iconbtn svg { width: 20px; height: 20px; }
.nav a, .exam-switch button { white-space: nowrap; }
.top .wrap > :not(.brand) { flex-shrink: 0; }
.brand { min-width: 0; }
.brand > span:last-child { overflow: hidden; text-overflow: ellipsis; } /* 空間不夠時品牌名以「…」收尾，不擠壞其他按鈕 */
/* 英文標籤比較長：中等寬度就先收掉副標，頂欄才不會擠到折行。
   Key 狀態原本在 1180 以下只剩一顆沒字的圓點（手機、平板看不懂；A10、B22）→ 2026-10-03 起改顯示短字，規則在檔尾「第五輪」區塊
   頂欄的收合點用 em（73.75em＝1180px、68.75em＝1100px，以瀏覽器預設字型大小計）：預設 16px 時跟原本一樣；
   使用者把瀏覽器字型調大時（例 24px），頂欄的字變大、收合點跟著提早，頂欄才放得下（原本英文 1280 寬頁寬變 1300、齒輪被擠出；L-20） */
@media (max-width: 73.75em) {
  .top .wrap { gap: 12px; }
  .brand small { display: none; }
}
/* 齒輪原本在 1100 以下就收掉，901–1100（平板橫放、半個視窗）找不到「設定」（B22）→ 保留到底部分頁出現（900）為止 */
@media (max-width: 68.75em) {
  .nav a { padding: 8px 9px; }
}
@media (max-width: 900px) { .nav, .top .exam-switch, .top .wrap > a.iconbtn { display: none; } } /* 設定鈕：手機改用底部分頁的「設定」 */
/* 901–1100：頂欄多了「使用說明」、齒輪保留後放不下考試切換（英文版 901 寬會擠出頂欄，2026-10-03 實測）→ 跟手機一樣改放在練習、模考、挑戰頁的標題下 */
@media (max-width: 68.75em) { .top .exam-switch { display: none; } }
.m-only { display: none !important; }
@media (max-width: 68.75em) { .m-only { display: inline-flex !important; } .m-only button { min-height: 40px; padding: 8px 16px; } } /* 跟上一行同一個收合點：頂欄的考試切換收起來時，頁面裡的才出現 */
@media (max-width: 560px) {
  .top .wrap { gap: 8px; }
}

/* 手機底部分頁 */
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--head-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a { display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; padding: 6px 0; border-radius: 10px; min-height: 48px; }
  .tabbar a span { white-space: nowrap; } /* 字級收進 xs（.72→.75rem）後，英文 320 寬「Mock tests」要 63.8px、格子只有 62.4px，折成兩行、分頁列從 68 變 89px 高（第六輪 D3 實測）→ 不折行：那一格自己撐寬到 63.8px，其他格 62px */
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--primary-ink); }
  main { padding-bottom: 110px; }
  /* 用鍵盤 Tab 時，瀏覽器把焦點捲進來要避開底部分頁（約 68px 高）；原本焦點常停在分頁列底下看不到（L-01，WCAG 2.4.11） */
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ---------- 按鈕、表單 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--fs-md); cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.btn:hover { border-color: var(--ink-2); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn.soft { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--sunken); }
.btn.danger { color: var(--bad); border-color: var(--bad); background: var(--surface); }
.btn.lg { min-height: 52px; padding: 12px 24px; font-size: var(--fs-md); border-radius: 12px; } /* 跟一般按鈕同一種圓角（原本膠囊形，同一頁兩種形狀混用；L-16）；只有首頁主視覺保留膠囊 */
.hero .btn.lg { border-radius: 999px; }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
label.field { display: grid; gap: 6px; font-weight: 600; font-size: var(--fs-sm); }
.field .hint { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }
input[type="text"], input[type="password"], input[type="search"], input[type="number"], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--field-line); /* L-11：邊框是框內外唯一的界線，要 ≥3:1 */
  background: var(--surface); color: var(--ink);
}
::placeholder { color: var(--muted); opacity: 1; } /* 原本是瀏覽器預設灰 #757575，夜讀只有 3.74:1（L-12）；Firefox 預設會再打半透明，opacity:1 拿掉 */
textarea { min-height: 220px; line-height: 1.7; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--primary-line); border-color: var(--primary); }
/* 勾選框、單選鈕的焦點框用主色：上一行的淡色外框（--primary-line）對白底只有 1.5:1，勾選框本身又沒有其他變化（L-10） */
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline-color: var(--primary); }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--primary); flex: none; }

/* ---------- 卡片、晶片、徽章 ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card.pad-lg { padding: 28px; }
.card.flat { background: var(--surface-2); }
.card.link { text-decoration: none; color: inherit; display: block; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card.link:hover { border-color: var(--primary-line); box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.card h3 { margin-bottom: 6px; }
.kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; min-height: 36px; color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--sunken); color: var(--ink-2); letter-spacing: .02em; white-space: nowrap; }
.badge.lv { color: #fff; }
.badge.lv-A1, .badge.lv-A2 { background: var(--lv-a); }
.badge.lv-B1 { background: var(--lv-b1); }
.badge.lv-B2 { background: var(--lv-b2); }
.badge.lv-C1, .badge.lv-C2 { background: var(--lv-c1); }
[data-theme="night"] .badge.lv { color: #0b0d12; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.ai { background: var(--primary-soft); color: var(--primary-ink); }
.note { border-radius: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.note.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.note.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.note.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.note.info { background: var(--primary-soft); border-color: transparent; color: var(--primary-ink); }
.note strong { color: inherit; }
/* 頂端的示範橫幅（index.html #mockbar）：原本寫在行內 style="margin:12px 0 0"，CSP 的 style-src 拿掉 'unsafe-inline' 後改用這個 class（第六輪 D2，2026-10-03） */
.note.banner-note { margin: 12px 0 0; }

/* ---------- 首頁 ---------- */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 32px 0 40px; }
@media (max-width: 960px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.hero h1 em { font-style: italic; color: var(--primary-ink); }
.hero .lede { font-size: var(--fs-lg); color: var(--ink-2); max-width: 38em; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 14px; }
.hero .fine { font-size: var(--fs-sm); color: var(--muted); }
.demo { display: grid; gap: 16px; }
.demo .card { box-shadow: var(--shadow-lg); }
.demo .stage { display: grid; gap: 14px; }
/* 估分卡原本用負邊距疊在題目卡上（浮動卡片效果），使用者看成版面壞掉（2026-09-29）→ 改成上下排、不重疊 */
.demo .float { justify-self: end; width: min(100%, 380px); }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 48px 0 18px; }
.value .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); margin-bottom: 12px; }
.value .ico svg { width: 22px; height: 22px; }
.steps { counter-reset: s; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.steps li { list-style: none; counter-increment: s; position: relative; padding: 20px 20px 20px 64px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.steps li::before { content: counter(s); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-weight: 700; }
.steps { padding: 0; margin: 0; }
.skill-card { display: grid; gap: 10px; }
.skill-card .top-row { display: flex; align-items: center; gap: 12px; }
.skill-card .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--sunken); color: var(--ink); }
.skill-card .ico svg { width: 22px; height: 22px; }
.skill-card ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); font-size: var(--fs-sm); }
.footer { border-top: 1px solid var(--line); margin-top: 64px; padding: 28px 0 40px; color: var(--muted); font-size: var(--fs-sm); }
.footer a { color: var(--ink-2); }

/* ---------- 儀表板 ---------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 960px) { .dash { grid-template-columns: minmax(0, 1fr); } }
.task { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.task:first-of-type { border-top: 0; }
.task .ico, .setrow .ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--sunken); } /* 圖示底塊全站一種大小 44px（原本 40／44 混用；L-16） */
.task .ico svg, .setrow .ico svg { width: 22px; height: 22px; }
.task .txt { flex: 1; min-width: 0; }
.task .txt b { display: block; font-weight: 700; text-wrap: pretty; } /* 手機窄寬時避免最後一行只剩一個字（「11／題」） */
.task .txt span { color: var(--muted); font-size: var(--fs-sm); }
.stat { display: grid; gap: 2px; }
.stat b { font: 600 var(--fs-section)/1.1 var(--font-display); }
.stat span { color: var(--muted); font-size: var(--fs-sm); }
.bar { height: 8px; background: var(--sunken); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; width: 0; transition: width .6s cubic-bezier(.2,.8,.2,1); }
/* 21 天口說挑戰：每天一格（✓＝那天有口說紀錄、深色＝今天）。沒跟上的日子不標紅；還沒到的日子用虛線框（不用半透明，字的對比才夠） */
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.days > div { display: grid; justify-items: center; align-content: center; min-height: 52px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); line-height: 1.3; }
.days > div b { font-size: var(--fs-md); color: var(--ink-2); }
.days > .ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); font-weight: 700; }
.days > .ok b { color: var(--ok); }
.days > .now { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.days > .now b { color: var(--on-primary); }
.days > .later { border-style: dashed; }

/* ---------- 分頁、分段控制 ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button, .tabs a { border: 0; background: none; padding: 12px 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; min-height: 44px; }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.seg { display: inline-flex; background: var(--sunken); border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font-weight: 600; color: var(--ink-2); cursor: pointer; min-height: 40px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ---------- 閱讀作答 ---------- */
.player { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 960px) { .player { grid-template-columns: minmax(0, 1fr); } }
.passage { font: 400 var(--fs-lg)/1.8 var(--font-read); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px clamp(18px, 3vw, 36px); }
.passage p { margin: 0 0 1em; }
.passage .plabel { font: 700 var(--fs-xs)/1 var(--font-ui); color: var(--muted); margin-right: 8px; }
.passage h4 { font: 700 var(--fs-md)/1.4 var(--font-ui); margin: 1.2em 0 .5em; color: var(--ink-2); }
.passage ul { margin: 0 0 1em; padding-left: 1.2em; }
.passage u { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.passage mark, .qstem mark { background: var(--hl); color: var(--hl-ink); border-radius: 3px; padding: 0 2px; }
.passage .blank { display: inline-block; min-width: 2.2em; text-align: center; font: 700 var(--fs-sm)/1.6 var(--font-ui); color: var(--primary-ink); background: var(--primary-soft); border-radius: 6px; padding: 0 6px; margin: 0 2px; }
.passage .figs { display: grid; gap: 12px; margin-top: 12px; }
.passage .figs img { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sticky { position: sticky; top: 84px; }
@media (max-width: 960px) { .sticky { position: static; } }
/* 手機、平板：閱讀「文章／題目」切換，不必上下捲長文 */
.viewtabs { display: none; }
.viewtabs button { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 960px) {
  /* 貼齊頂欄（頂欄 64px＋下框線）：原本 top 72px，中間 7px 的縫會露出往上捲的文章字（L-05）。
     第一層陰影是頁面底色、往上 8px：蓋住兩個圓角外的空隙與頂欄下緣，捲動中的文章不會從縫裡透出來 */
  .viewtabs { display: flex; position: sticky; top: 64px; z-index: 5; margin-bottom: 12px; box-shadow: 0 -8px 0 var(--bg), 0 4px 12px rgba(0, 0, 0, .06); }
  .viewtabs button { flex: 1; justify-content: center; }
  .player[data-view="q"] > .pcol { display: none; }
  .player[data-view="p"] > .qcol { display: none; }
}
.q { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px 18px 14px; }
.q + .q { margin-top: 14px; }
.qhead { display: flex; gap: 10px; align-items: baseline; }
.qnum { font: 700 var(--fs-sm)/1 var(--font-ui); background: var(--ink); color: var(--bg); border-radius: 8px; padding: 5px 8px; flex: none; }
.qstem { font-weight: 600; flex: 1; }
.opts { display: grid; gap: 8px; margin-top: 12px; }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface-2); min-height: 44px; text-align: left; width: 100%; }
.opt:hover { border-color: var(--line-strong); }
.opt .l { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font: 700 var(--fs-xs)/1 var(--font-ui); color: var(--ink-2); }
.opt[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.opt[aria-pressed="true"] .l { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt.right .l { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt.wrong .l { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.opt[disabled] { cursor: default; }
.review { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--line-strong); font-size: var(--fs-sm); }
.review .ev { font-family: var(--font-read); font-size: var(--fs-md); color: var(--ink); }
.review .ai { margin-top: 10px; }
.scorebox { display: flex; align-items: center; gap: 18px; }
.ring { --p: 0; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--sunken) 0); display: grid; place-items: center; flex: none; }
.ring b { width: 64px; height: 64px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 700 var(--fs-lg)/1 var(--font-ui); }
.ctest { font: 400 var(--fs-lg)/2.3 var(--font-read); }
.ctest input { width: auto; min-height: 0; height: 1.9em; padding: 0 4px; border-radius: 6px; font: 500 var(--fs-md)/1 var(--font-ui); border: 1px solid var(--field-line); background: var(--primary-soft); text-align: left; }
/* 作答格（.cblank；Complete the Words、起點檢測）的焦點框畫在格子裡面：原本 3px 外框＋2px 間距往外伸 5px，
   蓋住緊貼在前面的提示字母（「t___」的 t 幾乎看不到；M-06）。邊框也換成主色，焦點一樣看得清楚 */
.ctest input:focus, .ctest input:focus-visible, .cblank:focus, .cblank:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-color: var(--primary); }
.ctest input.right { background: var(--ok-soft); border-color: var(--ok); }
.ctest input.wrong { background: var(--bad-soft); border-color: var(--bad); }
.ctest .keep { color: var(--ink); }
.keep { white-space: nowrap; } /* 提示字母和作答格不拆到兩行（起點檢測、Complete the Words；第六輪 M-06 延伸，施工者 D 回報） */
.filters { display: grid; gap: 14px; }
/* 欄寬固定成 minmax(0, 1fr)：畫面外的列（content-visibility）會記住舊寬度，375 縮到 320 時把整頁撐寬（docs/12 11.3；2026-10-03 修，S6(b)） */
.setlist { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
/* 原本 .setlist > .setrow { content-visibility: auto }（只畫看得到的列）：畫面外的列在無障礙樹裡沒有名字，
   讀屏的連結清單只念「連結」（題庫 48 個連結有 15 個沒名字；U-04）→ 拿掉，每一列都照常排版 */
.setrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; color: inherit; }
.setrow:hover { border-color: var(--primary-line); color: inherit; box-shadow: var(--shadow); }
.setrow .meta { color: var(--muted); font-size: var(--fs-sm); }
.setrow .done { color: var(--ok); font-weight: 700; font-size: var(--fs-sm); }
/* 紀錄頁：可勾選、可刪除的列（勾選框｜內容連結｜垃圾桶） */
.setrow.pick, .setrow.delrow { padding: 6px 8px 6px 14px; }
.setrow.pick { grid-template-columns: auto minmax(0, 1fr) auto; }
.setrow.delrow { grid-template-columns: minmax(0, 1fr) auto; }
.setrow.pick > a, .setrow.delrow > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 0; color: inherit; text-decoration: none; }
/* 可刪除列用 delrow，不用 del：.del 是「刪除線」樣式（原句→建議的原句），共用類別會把整列畫上刪除線（2026-10-02 抓到） */
.issue.delrow { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.setrow input[type="checkbox"], .picker input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); margin: 0; }
.picker { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.picker label { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; cursor: pointer; }
.pickbox { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -12px; cursor: pointer; } /* 勾選框本身 20px，外面包一圈讓手指好點 */

/* ---------- 口說考場 ---------- */
.room { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 960px) { .room { grid-template-columns: minmax(0, 1fr); } }
.stage-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 3vw, 36px); display: grid; gap: 22px; justify-items: center; text-align: center; min-height: 460px; align-content: center; }
.parts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.parts span { font-size: var(--fs-xs); font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--sunken); color: var(--muted); }
.parts span.now { background: var(--ink); color: var(--bg); }
.parts span.done { background: var(--ok-soft); color: var(--ok); }
.orb { width: min(220px, 52vw); aspect-ratio: 1; position: relative; display: grid; place-items: center; }
.orb canvas { width: 100%; height: 100%; }
.orb .face { position: absolute; font: 600 var(--fs-md)/1.3 var(--font-ui); color: var(--ink-2); }
.who { font: 600 var(--fs-md)/1.4 var(--font-ui); }
.caption { max-width: 34em; min-height: 3.2em; font: 400 var(--fs-lg)/1.6 var(--font-read); color: var(--ink-2); }
.talk { width: 96px; height: 96px; border-radius: 50%; border: 0; cursor: pointer; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 35%, transparent); transition: transform .1s; }
.talk svg { width: 38px; height: 38px; }
.talk:active { transform: scale(.97); }
.talk.done-btn { width: auto; height: 56px; border-radius: 999px; padding: 0 28px; font-weight: 700; font-size: var(--fs-md); gap: 10px; display: inline-flex; align-items: center; }
.talk.done-btn svg { width: 22px; height: 22px; }
.timer { font: 600 var(--fs-title)/1 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.timer.low { color: var(--bad); }
.cue { text-align: left; width: min(520px, 100%); border: 2px solid var(--ink); border-radius: 18px; padding: 20px 22px; background: var(--surface-2); font-family: var(--font-read); font-size: var(--fs-lg); }
.cue h3 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; } /* 襯線字只載入到 600 */
.cue ul { margin: 8px 0 0; padding-left: 1.2em; }
.notes-pad { width: min(520px, 100%); min-height: 120px; }
.cue-wrap, .notes-wrap { width: min(520px, 100%); display: grid; justify-items: center; }
.cue-wrap:empty, .notes-wrap:empty { display: none; }
.cue-wrap { scroll-margin-top: 84px; } /* 捲到題卡時不要被固定的頂欄蓋住 */
.level-meter { width: 160px; height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.level-meter i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .08s linear; }
.side-log { max-height: 520px; overflow: auto; display: grid; gap: 10px; }
.bubble { padding: 10px 14px; border-radius: 14px; font-size: var(--fs-md); line-height: 1.55; max-width: 100%; }
.bubble.ex { background: var(--sunken); border-top-left-radius: 4px; }
.bubble.me { background: var(--primary-soft); color: var(--ink); border-top-right-radius: 4px; justify-self: end; }
.bubble .who { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); display: block; margin-bottom: 2px; }
.fix-card { border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 12px; padding: 12px 14px; background: var(--surface); text-align: left; }
.fix-card .from { text-decoration: line-through; text-decoration-color: var(--bad); color: var(--ink-2); }
.fix-card .to { color: var(--ok); font-weight: 600; }
.steps-live { display: grid; gap: 10px; text-align: left; width: min(420px, 100%); }
.steps-live div { display: flex; gap: 10px; align-items: center; color: var(--muted); }
.steps-live div.on { color: var(--ink); font-weight: 600; }
.steps-live div.ok { color: var(--ok); }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--primary); animation: spin 1s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 報告 ---------- */
.report-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
@media (max-width: 640px) { .report-hero { grid-template-columns: minmax(0, 1fr); } }
.band { font: 600 var(--fs-score)/1 var(--font-display); letter-spacing: -.02em; }
.band small { font-size: var(--fs-lg); color: var(--muted); font-family: var(--font-ui); letter-spacing: 0; white-space: nowrap; display: inline-block; } /* 單位整段換行，不會斷成「band（雅思分」／「數）」（L-18） */
/* 有單位的分數：分數與單位是兩個彈性項目，放不下時單位整段換到下一行、那一行只有單位的高度（行內換行會留一整行 4.6rem 的高度）；
   分數與單位之間的空白由 column-gap 給（單位前的空白字元在 inline-block 開頭會被吃掉） */
.band:has(> small) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .1em; }
.report-hero :is(h1, h2) { word-break: keep-all; } /* 中文標題不從詞中間斷（原本「雅思口說完整模／考（報告範例）」；L-18）；太長時仍由 overflow-wrap 斷開，不會撐寬 */
.crit { display: grid; gap: 14px; }
.crit .row1 { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.crit .reason { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 6px; }
.crit .ref { font-size: var(--fs-xs); font-weight: 700; color: var(--warn); background: var(--warn-soft); padding: 2px 6px; border-radius: 6px; margin-left: 6px; }
.qa { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px; }
.qa + .qa { margin-top: 12px; }
.qa .q-t { font-weight: 700; }
.qa .tr { font-family: var(--font-read); font-size: var(--fs-md); color: var(--ink); margin: 8px 0; }
.issue { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; font-size: var(--fs-sm); padding: 10px 0; border-top: 1px dashed var(--line); }
.issue .t { font-weight: 700; font-size: var(--fs-xs); padding: 2px 8px; border-radius: 6px; background: var(--sunken); height: fit-content; }
.del { text-decoration: line-through; text-decoration-color: var(--bad); color: var(--ink-2); }
.ins { color: var(--ok); font-weight: 600; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.statgrid .card { padding: 16px; }
.essay-view { font: 400 var(--fs-md)/1.85 var(--font-read); white-space: pre-wrap; }
.essay-view .fix { background: var(--warn-soft); border-bottom: 2px solid var(--warn); cursor: pointer; border-radius: 3px; }
.essay-view .fix:hover, .essay-view .fix[aria-expanded="true"] { background: var(--hl); color: var(--hl-ink); }
.essay-view .fix-tip { display: block; margin: 6px 0 10px; padding: 8px 12px; border-left: 3px solid var(--warn); border-radius: 8px; background: var(--surface-2); font: 400 var(--fs-sm)/1.6 var(--font-ui); white-space: normal; }
.essay-view .fix-tip .ins { color: var(--ok); font-weight: 600; }
.wc { font-size: var(--fs-sm); color: var(--muted); }
.wc b { color: var(--ink); }

/* ---------- 對話框、提示 ---------- */
dialog { border: 1px solid var(--line); border-radius: 20px; padding: 0; background: var(--surface); color: var(--ink); width: min(560px, calc(100% - 32px)); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(10, 10, 12, .45); backdrop-filter: blur(2px); }
/* .dlg 由 grid 改成直排 flex：按鈕列要黏在對話框底部（position:sticky），grid 的子元素只能在自己那一格裡黏、等於不會動 */
dialog .dlg { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
/* 小螢幕（320×568、手機橫放）內容比對話框高時，按鈕列黏在對話框底部，不用捲到最下面才按得到（U-18）。
   上下各多一段同色底（負邊距抵銷），沒捲動時位置與原本相同 */
dialog .dlg .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 1; margin: -12px -24px -24px; padding: 12px 24px 24px; background: var(--surface); }
dialog { scroll-padding-bottom: 140px; } /* 在對話框裡按 Tab：焦點捲進來時停在黏住的按鈕列上方，不會被它蓋住（按鈕兩排時約 130px 高） */
.toasts { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; width: min(480px, calc(100% - 32px)); pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: var(--fs-sm); animation: up .25s ease-out; pointer-events: auto; }
.toast.bad { background: var(--bad); color: var(--on-bad); } /* 夜讀原本白字配淺珊瑚底 2.04:1（L-02） */
@keyframes up { from { transform: translateY(8px); opacity: 0; } }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.empty svg { width: 40px; height: 40px; margin: 0 auto 10px; opacity: .6; }
.loading { display: flex; gap: 10px; align-items: center; color: var(--muted); padding: 24px 0; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head p { color: var(--ink-2); margin: 4px 0 0; max-width: 46em; }
.crumbs { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); }
.kbd { font: 600 var(--fs-xs)/1 var(--font-ui); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; padding: 2px 6px; background: var(--surface); }
.swatches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.swatch { border: 2px solid var(--line); border-radius: 16px; padding: 14px; cursor: pointer; text-align: left; background: var(--surface); }
.swatch[aria-pressed="true"] { border-color: var(--primary); }
.swatch .pv { height: 70px; border-radius: 10px; margin-bottom: 10px; display: flex; align-items: end; gap: 6px; padding: 10px; }
.swatch .pv i { width: 40%; height: 14px; border-radius: 6px; display: block; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 窄螢幕表格左右滑，不撐寬整頁 */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .axis { stroke: var(--line); }
.chart text { fill: var(--muted); font-size: var(--fs-xs); font-family: var(--font-ui); } /* 原本寫死 11px：瀏覽器字型調大時不跟著變大（第六輪 D3）。rem 跟著放大；預設 12px，不比原本小 */
.fade-in { animation: fade .35s ease-out both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

/* 第五輪：入口與版面（2026-10-03） ---------------------------------------------------------------
   頂欄「使用說明」與 Key 狀態短字、免費／需要 Key 小標、入口卡片、儀表板最上面兩張卡、示範提醒、
   紀錄頁（教練列展開、聽寫列、跳轉、趨勢空狀態）、關於頁分頁列的左右滑提示、觸控面積。 */

/* 頂欄：使用說明（桌機文字；1180 以下圖示＋短字）、Key 狀態（1180 以下短字，不再只剩圓點） */
.helplink { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 10px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; } /* sm：同頂欄的 .nav a（md 會擠掉英文品牌副標） */
.helplink:hover { background: var(--sunken); color: var(--ink); }
.helplink svg { width: 18px; height: 18px; flex: none; }
.helplink .hl-short, .keydot .kd-short { display: none; }
@media (max-width: 73.75em) { /* ＝1180px（預設字型），收合點用 em 的理由見「頂欄」區（L-20） */
  .helplink .hl-long, .keydot .kd-long { display: none; }
  .helplink .hl-short, .keydot .kd-short { display: inline; }
  .helplink { padding: 8px; }
  .keydot { gap: 6px; padding: 6px 10px; min-height: 40px; }
}
@media (min-width: 73.8125em) { .top .wrap { gap: 14px; } } /* ＝1181px；原本 18px；多了「使用說明」後，英文版 1181 以上品牌副標會被切掉 */
@media (max-width: 560px) {
  .helplink { padding: 6px; gap: 4px; font-size: var(--fs-sm); min-height: 44px; }
  .keydot { gap: 5px; padding: 6px 9px; min-height: 44px; font-size: var(--fs-xs); }
}
/* 375 左右的手機：品牌名、說明、Key 狀態、語言鈕要擠在一行，各收一點空間，品牌名才不會被切成「真好學英…」 */
.brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) {
  .top .wrap { gap: 6px; }
  .brand { gap: 7px; font-size: var(--fs-sm); } /* 原本 .95rem；收進 7 級時最近的是 md（16px），但 375 寬中文品牌名會被截成「真好學英語…」（第六輪 D3 實測）→ 用小一級的 sm */
  .brand .mark { width: 28px; height: 28px; }
  .brand .mark svg { width: 21px; height: 21px; }
  .helplink { padding: 4px 5px; gap: 3px; font-size: var(--fs-xs); }
  .helplink svg { width: 16px; height: 16px; }
  .keydot { gap: 4px; padding: 6px 7px; }
}
@media (max-width: 360px) { .brand .mark + span { display: none; } } /* 320 寬：只留「好」字標（連結仍有完整名稱），說明、Key 狀態、語言鈕才放得下 */
.keydot.is-demo::before { background: var(--warn); }

/* 免費／需要 Key 小標 */
.badge.keyreq { background: var(--warn-soft); color: var(--warn); }
.badge svg.i { width: 1em; height: 1em; vertical-align: -.12em; }
.task .txt span.badge { font-size: var(--fs-xs); }
.task .txt span.badge.ok { color: var(--ok); }
.task .txt span.badge.keyreq { color: var(--warn); }
.task .txt .task-sub { display: block; }
/* 手機：今日任務的按鈕換到下一行（對齊文字），標題不會被擠成一行兩三個字 */
@media (max-width: 560px) { .task { flex-wrap: wrap; row-gap: 8px; } .task .txt { flex: 1 1 180px; } .task > .btn { margin-left: 58px; } } /* 58＝圖示 44＋間距 14 */

/* 入口卡片（首頁、儀表板、練習頁共用 ui.js linkCard） */
.lc { display: grid; align-content: start; gap: 0; }
.lc-top { gap: 8px; align-items: flex-start; }
.lc-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--sunken); flex: none; color: var(--ink); } /* 44px：同 .task .ico（L-16） */
.lc-ico svg { width: 22px; height: 22px; }
.lc-badges { gap: 6px; justify-content: flex-end; }
.lc h3 { margin: 12px 0 6px; }

/* 儀表板最上面兩張卡：起點檢測、21 天挑戰 */
.top-cards { align-items: stretch; }
.top-card { display: grid; align-content: start; gap: 10px; }
.top-card h2 { font-size: var(--fs-lg); margin: 0; } /* 卡片標題一種大小（原本 1.2rem，旁邊「今日任務」1.25rem；L-14）；第六輪 D3 卡片標題併入 lg（L-15） */
.top-card p { margin: 0; }
.nokey { display: grid; gap: 10px; margin-bottom: 18px; }

/* 示範模式提醒（開始設定、起點檢測、21 天挑戰、設定頁最上面） */
.demo-note { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.demo-note p { flex: 1 1 260px; }

/* 匯入鈕的圖示：匯出的箭頭倒過來 */
.flip svg { transform: rotate(180deg); }

/* 首頁示意圖：桌機在主視覺右邊；960 以下主視覺變一欄，改放在「不用 Key 也能先用」後面，入口才在第一屏附近 */
.demo-after { display: none; }
@media (max-width: 960px) { .demo-hero { display: none; } .demo-after { display: grid; margin-top: 32px; } }

/* 紀錄頁：頁首跳轉、教練列展開、聽寫列（不是連結）、趨勢空狀態 */
.jump { margin: 0 0 18px; }
.rec-sec { scroll-margin-top: 84px; } /* 跳過去時標題不要被固定的頂欄蓋住；用鍵盤跳時照樣有焦點外框（不關 outline） */
.setrow.pick > .recplain, .setrow.pick > .recdet > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 0; }
.setrow.pick > .recdet > summary { cursor: pointer; list-style: none; }
.setrow.pick > .recdet > summary::-webkit-details-marker { display: none; }
.recdet .chev { transition: transform .15s; }
.recdet[open] .chev { transform: rotate(90deg); }
.recdet-body { padding: 0 0 10px; }
.chart-empty { display: grid; align-content: start; gap: 8px; }
.chart-empty p { margin: 0; }
.chart-empty .btn { justify-self: start; }

/* 關於本站：分頁列在手機上要看得出可以左右滑（原本捲軸藏起來、沒有任何提示；B04） */
.tabs-wrap { position: relative; }
.tabs-wrap.more::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 40px; pointer-events: none; background: linear-gradient(to right, transparent, var(--bg)); }
@media (pointer: coarse), (max-width: 900px) { .tabs { scrollbar-width: thin; } }

/* 觸控裝置：可點面積至少 44px（刪除鈕、顯示 Key 鈕原本 40px，平板頂欄考試切換 32px；B31） */
@media (pointer: coarse) {
  .iconbtn { width: 44px; height: 44px; }
  .exam-switch button { min-height: 44px; }
  .chip { min-height: 44px; } /* 從檔頭搬來：要放在 .chip（min-height 36px）之後才有效（原本觸控時量到 37px；L-09） */
}
/* 提示框避開 iPhone 底部安全區＋底部分頁（B31） */
.toasts { bottom: calc(88px + env(safe-area-inset-bottom)); }


/* 第五輪：麥克風檢查與示範導覽（2026-10-03） */
/* 只用既有的顏色變數，4 套外觀（含夜讀）都看得清楚；動畫在「減少動態效果」時停掉。 */

/* 麥克風檢查（mic-check.js）：音量條、狀態字、分步驟說明 */
.mic-meter { height: 14px; border-radius: 999px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line-strong); overflow: hidden; }
.mic-meter > i { display: block; height: 100%; width: 100%; background: var(--ok); transform: scaleX(0); transform-origin: left center; transition: transform .08s linear; } /* 圓角由外框裁切 */
.mic-status { margin: 0; font-weight: 600; }
.mic-status.ok { color: var(--ok); }
.mic-status.wait { color: var(--muted); }
.mic-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.mic-check .note b { display: block; }
.mic-check { max-width: 760px; margin-left: 0; } /* 一欄讀完：音量條、按鈕不要拉到 1100px 寬 */

/* 作答中的「錄音中」：紅點＋文字 */
.recbadge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font: 600 var(--fs-sm)/1.3 var(--font-ui); vertical-align: middle; white-space: nowrap; }
.recbadge > i { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .recbadge > i { animation: none; } }

/* 考場字幕：上面一行標誰在說；「顯示字幕」鈕在考場卡片裡 */
.capwrap { display: grid; gap: 2px; justify-items: center; width: min(34em, 100%); }
.capwrap .cap-who { font-weight: 600; letter-spacing: .02em; }
.cap-btn { font-size: var(--fs-sm); }

/* 考場進行中（body.in-room）：手機隱藏底部分頁列，誤點就會離開考場 */
@media (max-width: 900px) {
  body.in-room .tabbar { display: none; }
  body.in-room main { padding-bottom: 32px; }
}

/* 示範導覽（demo.js demoGuide）：桌機放考場側欄最上面，手機（單欄）排在考場上方 */
.demo-guide { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--radius); background: var(--primary-soft); border: 1px solid var(--primary-line); color: var(--ink); }
.demo-guide .dg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.demo-guide .dg-head b { color: var(--primary-ink); }
.demo-guide .badge { background: var(--surface); color: var(--primary-ink); }
.demo-guide .dg-now { margin: 0; font-weight: 600; line-height: 1.55; color: var(--ink); }
.demo-guide .dg-note { margin: 0; color: var(--ink-2); }
.demo-guide .btn { justify-self: start; }
@media (min-width: 961px) {
  .room.has-guide { grid-template-areas: "stage guide" "stage side"; grid-template-rows: auto 1fr; }
  .room.has-guide > .demo-guide { grid-area: guide; }
  .room.has-guide > .stage-card { grid-area: stage; }
  .room.has-guide > aside { grid-area: side; }
}
/* 手機：導覽、字幕、「我講完了」都要在第一個畫面裡 → 字幕移到最上面、聲波球縮小並移到按鈕下面 */
@media (max-width: 960px) {
  .room.has-guide { gap: 12px; }
  .room.has-guide > .stage-card { min-height: 0; gap: 12px; padding: 16px; }
  .room.has-guide .orb { width: min(120px, 32vw); }
  .room.has-guide .stage-card > .parts { order: -2; }
  .room.has-guide .stage-card > .capwrap { order: -1; }
  .room.has-guide .stage-card > .orb { order: 1; }
  .room.has-guide .stage-card > .cap-btn { order: 2; } /* 示範預設就有字幕，切換鈕放最後 */
  .room.has-guide .caption { min-height: 0; font-size: var(--fs-md); }
  .room.has-guide .timer { font-size: var(--fs-title); }
}

/* 進示範先選：看自動示範／我自己試 */
.choices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.choice { display: grid; gap: 6px; align-content: start; text-align: left; min-height: 44px; padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.choice:hover { border-color: var(--ink-2); box-shadow: var(--shadow); }
.choice.main { border: 2px solid var(--primary); background: var(--primary-soft); }
.choice-t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-md); color: var(--ink); }
.choice.main .choice-t { color: var(--primary-ink); }
.choice-t svg { width: 20px; height: 20px; flex: none; }
.choice-d { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }

/* 示範與報告範例結尾的下一步 */
.next-steps h2 { margin: 0; font-size: var(--fs-lg); } /* 卡片標題（原本 clamp 到 1.45rem；L-14；第六輪 D3 卡片標題併入 lg） */

/* 「參考」標籤（數字會說話：模型自己數的，不是網站量的） */
.ref-tag { display: inline-block; margin-left: 8px; padding: 2px 6px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); font: 700 var(--fs-xs)/1.4 var(--font-ui); vertical-align: middle; }

/* 教練頁頂端的話題：不要被 .kicker 轉成全大寫 */
.kicker.keep-case { text-transform: none; letter-spacing: .01em; }


/* 第六輪：第三方檢核的版面修正（2026-10-03，docs/third-party-audit-2026-10-03/FIX_SPEC.md 施工者 D） ------------------------
   只用 CSS：各頁 JS 的行內 style 不動，需要時用 !important 蓋過（標註在每一條）。驗收腳本在 docs/third-party-audit-2026-10-03/round6/D/work。 */

/* L-14 標題等級（變數在檔頭「基礎」）：各頁 JS 用行內 style 改 h1、卡片裡 h2 的字級，這裡用 !important 收回同一級。主視覺（首頁）一種、頁面標題一種；卡片外的 h2 一種、卡片裡的 h2 一種。
   第六輪 D3：各頁 JS 的行內字級已拿掉（L-15），只剩閱讀題組頁 reading-set.js 的 h1（不歸 D3 改）還靠這裡；卡片裡的 h2 併入 lg（同 h3） */
main h1 { font-size: var(--fs-title) !important; }
main .hero h1 { font-size: var(--fs-display) !important; }
main .card h2 { font-size: var(--fs-lg) !important; }

/* L-16 模考卡：第六輪 D3 起 mock.js 改用跟練習頁同一個入口卡（ui.js linkCard：44px 底塊圖示＋右上標籤＋標題在下），原本替它補 44px 底塊的規則拿掉 */

/* U-18 單獨一行的小連結（設定頁「看每一步的截圖教學」原本 126×17、404「回首頁」48×20、頁尾 23.2px、「看原題組」23.1px、報告「看保留你想法的改寫版」23.1px）：
   上下各加 4px，可點範圍至少 24px 高。句子裡的連結也會套到，但行內元素的 padding 不改排版，只把可點範圍撐高 */
p > a:only-child:not(.btn), .empty a:not(.btn), .footer a, a.small:not(.btn), summary.small { padding-block: 4px; }

/* L-17 窄螢幕的擠壓 */
@media (max-width: 420px) {
  /* 紀錄列（勾選框｜內容｜垃圾桶）：垃圾桶移到勾選框下面（第二行）、拿掉連結箭頭，320 寬時標題欄從 60–73px（一行兩三個字）變成約 130–165px */
  .setrow.pick { grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; }
  .setrow.pick > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .setrow.pick > .iconbtn { grid-column: 1; grid-row: 2; margin-left: -12px; }
  .setrow.pick > a { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .setrow.pick > a > svg { display: none; }
  .setrow.pick > .recplain, .setrow.pick > .recdet > summary { gap: 10px; }
  /* 教練話題框：輸入框與「換一個」上下排（320 寬原本輸入框只剩 107–120px，看不到整個話題）；JS 行內寫了 flexWrap:nowrap、flex:1，用 !important 蓋過 */
  .field > .row:has(> input[type="text"] + .btn) { flex-wrap: wrap !important; }
  .field > .row:has(> input[type="text"] + .btn) > input { flex: 1 1 100% !important; }
}
@media (max-width: 480px) {
  /* 儀表板快捷卡（圖示｜標題＋說明｜「需要 Key」）：小標移到標題下面，說明不再被擠成一行一兩個字（320 英文原本 74px、5 行） */
  a.card.link > .row:not(.lc-top):not(.between):has(> .lc-ico) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start; }
  a.card.link > .row:not(.lc-top):not(.between):has(> .lc-ico) > .lc-ico { grid-row: span 2; }
  a.card.link > .row:not(.lc-top):not(.between):has(> .lc-ico) > .badge { grid-column: 2; justify-self: start; }
}
/* 中文表格的格子不斷行（評分準度表 320 寬原本把「樣本」「排名一致」「12 段」拆成兩行）；放不下就在 .table-wrap 裡左右捲。
   英文只在空白處換行、不會拆字，維持原樣（套用的話英文表會從 363px 撐到 559px 寬） */
.table th:lang(zh), .table td:lang(zh) { white-space: nowrap; }

/* L-19 英文示範模式：Key 狀態「Demo mode」比較長，品牌副標 “AI English Classroom” 被截成 “AI English Classr…”（要 125px、只給 116px）。
   頂欄最寬就是 .wrap 的 1160px，1280 以上也一樣被截 → 英文示範模式不分寬度都收副標（施工規格寫 ≤1280）；中文示範與一般模式不受影響 */
html[lang="en"] .top:has(.keydot.is-demo) .brand small { display: none; }

/* L-04 計時列（介面約定 3.2）：用 div.timerbar 包住剩餘時間——閱讀計時測驗（A，reading-set.js）桌機放在題目欄最上方、≤960 放進「文章／題目」切換列；
   計時寫作（C，writing.js）放在作答區上方。黏在頂欄下方，往下作答也看得到（原本只在頁首，做到第 8 題時在畫面上方 2,152px 外）；剩 60 秒由頁面加 .low 變紅 */
/* 樣子：靠右的小卡（原本計時在頁首右邊；整條空白長條只放一個時間像壞掉的工具列），往下捲時浮在題目欄／作答區右上角 */
.timerbar {
  position: sticky; top: 72px; z-index: 6;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  width: fit-content; max-width: 100%; margin: 0 0 12px auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow);
}
.timerbar .badge { font-size: var(--fs-sm); padding: 4px 10px; } /* 剩餘時間比一般小標大一號 */
.timerbar.low { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.timerbar.low .badge { background: var(--bad); color: var(--on-bad); }
html:has(.timerbar) { scroll-padding-top: 140px; } /* 用 Tab 移到下一題時不要停在計時列底下 */
@media (max-width: 960px) {
  .viewtabs .timerbar { position: static; margin: 0 0 0 auto; padding: 0 6px; border: 0; background: none; box-shadow: none; } /* 閱讀頁手機：在切換列裡，跟著切換列黏 */
  .viewtabs .timerbar .badge { font-size: var(--fs-xs); padding: 3px 8px; } /* 切換列寬度有限：375 寬時「文章｜題目（12）｜剩 17:58」要放得進一行 */
  /* 切換列多了計時：兩顆鈕照字的寬度分配、字不斷行（原本平分寬度，375 寬「題目（12）」被擠成兩行）；一行放不下時計時自己換到第二行 */
  .viewtabs:has(.timerbar) button { flex: 1 1 auto; white-space: nowrap; }
  html:has(.viewtabs) { scroll-padding-top: 128px; } /* 切換列黏在頂欄下（64–112px）：Tab 的焦點不要停在它底下 */
  html:has(.viewtabs .timerbar) { scroll-padding-top: 160px; } /* 計時換到第二行時切換列約 64–144px */
}
/* 第六輪 D3（施工者 D 回報第 7 條）：英文 320–414 寬「Passage｜Questions (12)｜17:59 left」放不進一行，切換列變兩行（高 82–97px），中文 320 寬也是（82px）。
   放不下的寬度把切換列收緊：按鈕不放圖示、字小一級（sm）、內距縮小，計時的內距也縮小 → 一行；計時照樣在黏住的切換列裡，往下作答一直看得到。
   只套在放不下的語言與寬度（英文 ≤429px、中文 ≤359px），其他寬度與語言不變 */
@media (max-width: 429.98px) {
  html[lang="en"] .viewtabs:has(.timerbar) { gap: 2px; }
  html[lang="en"] .viewtabs:has(.timerbar) button { padding: 8px; font-size: var(--fs-sm); }
  html[lang="en"] .viewtabs:has(.timerbar) button svg { display: none; }
  html[lang="en"] .viewtabs .timerbar { padding: 0 2px; }
  html[lang="en"] .viewtabs .timerbar .badge { padding: 3px 6px; }
}
@media (max-width: 359.98px) {
  .viewtabs:has(.timerbar) { gap: 2px; }
  .viewtabs:has(.timerbar) button { padding: 8px; font-size: var(--fs-sm); }
  .viewtabs:has(.timerbar) button svg { display: none; }
  .viewtabs .timerbar { padding: 0 2px; }
  .viewtabs .timerbar .badge { padding: 3px 6px; }
}

/* L-05 手機橫放（高度 ≤500px，例 667×375）：頂欄不黏、閱讀頁藏起底部分頁（同考場 body.in-room 的做法），文章至少有 2/3 畫面
   （原本頂欄＋切換列＋分頁列只剩 185px、49%） */
@media (max-height: 500px) {
  .top { position: relative; }
  html { scroll-padding-top: 16px; }
  html:has(.timerbar) { scroll-padding-top: 64px; } /* 計時列黏在最上面（8px 起、約 42px 高） */
  .sticky { top: 16px; }
  .viewtabs { top: 0; }
  .timerbar { top: 8px; }
}
@media (max-height: 500px) and (max-width: 960px) {
  html:has(.viewtabs), html:has(.viewtabs .timerbar) { scroll-padding-top: 64px; } /* 頂欄不黏，只剩切換列（0–50px） */
}
@media (max-height: 500px) and (max-width: 900px) {
  body:has(main .player) .tabbar { display: none; }
  body:has(main .player) main { padding-bottom: 32px; }
  html:has(main .player) { scroll-padding-bottom: 16px; }
}

/* L-03 列印（報告、閱讀交卷頁、寫作結果；瀏覽器預設不印背景）：
   只印內容（頂欄、底部分頁、提示、示範橫幅、「文章／題目」切換、按鈕都不印）；文章與題目都印；黑字白底（夜讀也是）；卡片不跨頁斷開。
   原本：報告每頁底部都疊著分頁列、蓋掉內容；閱讀交卷頁只印出文章；夜讀印成淺灰字 2.92:1 */
@media print {
  :root, [data-theme] {
    --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --sunken: #efece4; --line: #d6d0c2; --line-strong: #b3ab9a; --field-line: #8b867b;
    --ink: #000000; --ink-2: #2b2924; --muted: #4f4a42; --primary: #2e3ad0; --primary-hover: #2430b5; --on-primary: #ffffff; --primary-soft: #eceefe; --primary-line: #c9cdfb; --primary-ink: #2430b5;
    --hl: #ffe680; --hl-ink: #000000; --ok: #146c41; --ok-soft: #e4f3ea; --bad: #b42318; --bad-soft: #fdecea; --on-bad: #ffffff; --warn: #6b4500; --warn-soft: #fdf3dc;
    --lv-a: #0f6b62; --lv-b1: #2451b8; --lv-b2: #6a3fb5; --lv-c1: #a3361a; --shadow: none; --shadow-lg: none; --head-bg: #ffffff;
    color-scheme: light;
  }
  html, body { background: #ffffff; color: var(--ink); }
  .skip, header.top, .tabbar, .toasts, #mockbar, .viewtabs, .timerbar, .footer, .btn, .iconbtn, .talk, .cap-btn, .seg, .next-steps, dialog, .tabs-wrap.more::after { display: none !important; }
  main .card:has(> .seg) { display: none; } /* 報告結尾「你同意這個分數嗎？」（按鈕組與輸入框，紙上用不到） */
  .wrap, .wrap.narrow { width: auto; margin: 0; }
  main { padding: 0; }
  .player > .pcol, .player > .qcol { display: block !important; } /* 手機版面的「文章／題目」只顯示一邊：列印兩邊都要 */
  .player > .qcol { margin-top: 16px; }
  .opts { gap: 4px; margin-top: 8px; }
  .opt { min-height: 0; padding: 4px 10px; } /* 紙上不需要 44px 的觸控高度：題目卡矮一點，少一些「放不下整張卡、換頁留白」（12 題長文 13→11 頁） */
  .sticky { position: static; }
  .card, .q, .qa, .review, .issue, .fix-card, .note, .stat, .crit > *, .steps li, .setrow { break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }
  /* 長卡片允許跨頁（第六輪 D3）：整張卡不拆時，放不下就整張搬到下一頁，頁尾留大片空白（12 題雅思長文交卷頁印 11 頁）。
     交卷後的題目（題目＋選項＋講解）、逐題回顧的一題、各項分數、作文全文、逐句修改、改寫版這幾種長卡片可以跨頁，
     但只在自己的段落之間斷開：題目與選項一塊、講解一塊、每個分項一塊、每條修改一塊，都不從中間切；標題不單獨留在頁尾。
     短的（沒有講解的單題、做得好的／下一步、統計小卡、報告開頭的分數卡）照舊整塊不拆 */
  .q:has(> .review), .qa, .card:has(.crit, .essay-view, .issue, .fix-card) { break-inside: auto; }
  .q > .qhead, .q > .opts, .opt { break-inside: avoid; }
  .q > .qhead, .qa > .q-t, .qa > div.small, details > summary { break-after: avoid; }
  .card.link:hover { transform: none; }
  [data-theme] .badge.lv { color: #ffffff; } /* 夜讀把等級徽章改成深字；列印用的是晨讀的深色底，要白字 */
  /* 小色塊照原色印（等級、題號、選項字母、答對答錯、分數環、標黃的原文依據、批改標記）：不印背景時白字會印在白紙上 */
  .badge, .qnum, .opt .l, .ring, mark, .essay-view .fix, .parts span, .days > div, .bar, .chip[aria-pressed="true"], .steps li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}