/* ==========================================================================
   泰語學習網站 — 樣式表
   --------------------------------------------------------------------------
   設計語言：泰式寺廟金 + 深夜藍 + 米白；重點在「泰文字形要好讀」
   無障礙：焦點可見、rem 字級、44px 觸控目標、深色模式、降低動態
   ========================================================================== */

:root{
  /* ---- 品牌色（裝飾用：邊框、色塊、強調線）---- */
  --gold:#c9a227;
  --gold-lt:#e8cf7a;
  --gold-dk:#8c6d1a;        /* 文字用金棕（於米白底 4.26 → 需 4.5，見下方 --gold-ink）*/
  --gold-ink:#7d6115;       /* 文字專用金棕：對 #fbf8f1 4.9:1、對 #fff 5.4:1 */

  --ink:#161a2b;
  --ink-2:#232842;
  --paper:#fbf8f1;
  --paper-2:#f4efe3;
  --line:#e3dac6;
  --text:#22242e;
  --heading:#232842;        /* 標題／強調文字專用（深色模式會換亮色）*/
  --ink-2-bg:#232842;       /* 深色背景區塊專用 */
  /* --text-dim 原 #6b6f80 對 #f4efe3 只有 4.35:1（未達 AA）。
     改用 #63677a：對 #f4efe3 4.72:1、對 #fff 5.4:1，視覺上仍是灰字。 */
  --text-dim:#63677a;
  --white:#fff;
  --focus:#1f6feb;

  /* ---- 字母班別（作為背景 + 白字，需 4.5:1）---- */
  --mid:#9e6d16;            /* 中音：原 #e8a020 白字僅 2.22:1 */
  --mid-bg:#fdf1d8;
  --high:#c93f36;           /* 高音：原 #d8483f 4.27:1；再壓深確保 >4.5 */
  --high-bg:#fbe4e1;
  --low:#2f7abe;            /* 低音：原 #2f7bbf 4.46:1 */
  --low-bg:#e2eefa;
  /* 文字專用（當顏色本身是文字時，不能直接用上面的背景色）*/
  --high-ink:#b8352c;       /* 對白底 5.9:1 */
  --low-ink:#1f5f96;        /* 對白底 6.0:1 */

  /* ---- 五個聲調（作為背景 + 白字，需 4.5:1）---- */
  --t-mid:#548153;          /* 原 #5b8c5a 3.93:1 */
  --t-low:#3f6fa8;          /* 5.18:1 合格 */
  --t-fall:#b5462f;         /* 5.41:1 合格 */
  --t-high:#8e5bb5;         /* 4.87:1 合格 */
  --t-rise:#986811;         /* 原 #c98a1a 2.94:1；再壓深確保 >4.5 */
  /* 聲調色「當文字」用（白底上需要更深）*/
  --t-mid-ink:#3f6b3e;
  --t-low-ink:#2e5c8f;
  --t-fall-ink:#a03c26;
  --t-high-ink:#7a4a9e;
  --t-rise-ink:#86600f;

  --ok:#2c8654;             /* 原 #2e8b57 4.25:1 */
  --bad:#c0392b;            /* 5.44:1 合格 */

  --r:14px;
  --r-sm:9px;
  --shadow:0 2px 4px rgba(20,20,40,.06),0 8px 24px rgba(20,20,40,.08);
  --shadow-lg:0 12px 40px rgba(20,20,40,.16);

  /* 自架子集化字型；拉丁留給系統字型（省下大量位元組） */
  --thai:"Noto Sans Thai Subset","Leelawadee UI","Sarabun",Tahoma,system-ui,sans-serif;
  --ui:"Noto Sans TC Subset","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;

  --tap:44px;                 /* 最小觸控目標 */
}

/* ---------- 深色模式 ----------
   注意 --ink-2 的雙重身分：淺色模式下它既是深底（.hero 漸層、.tone-ladder）
   也是標題文字色（h4、.rt）。深色模式下若直接把它改亮，深底會變亮底；
   若保持深色，當文字用時就變成「深底深字」——「常見誤用」區塊就是這樣被吃掉的。
   解法：深色模式另立 --ink-2-bg（背景用）與 --heading（文字用），
   並把原本吃 --ink-2 的文字選擇器改指向 --heading。 */

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--ui);
  font-size:1rem;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
/* 放大字級時版面跟著流動 */
@media (min-width:1200px){ body{font-size:1.0625rem} }

/* ---------- 焦點可見（鍵盤使用者） ---------- */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:4px;
}
/* 深色底上的焦點要看得見 */
#sidebar :focus-visible{outline-color:var(--gold-lt)}
.hero :focus-visible{outline-color:#fff}

/* ---------- 跳至主要內容 ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--ink);color:#fff;padding:.75rem 1.25rem;
  border-radius:0 0 var(--r-sm) 0;font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

/* 螢幕閱讀器專用 */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 降低動態 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .stage:hover,.syl:hover,.letter-card:hover{transform:none}
}

/* ---------- 版面骨架 ---------- */
#app{display:flex;min-height:100vh}

#sidebar{
  width:290px;flex:0 0 290px;background:var(--ink);color:#e9e6df;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;
}
#sidebar::-webkit-scrollbar{width:8px}
#sidebar::-webkit-scrollbar-thumb{background:#3a4062;border-radius:4px}

.brand{padding:22px 20px 18px;border-bottom:1px solid #2e3350}
.brand h1{margin:0;font-size:1.1875rem;letter-spacing:.5px;color:#fff}
.brand h1 span{color:var(--gold-lt)}
.brand p{margin:6px 0 0;font-size:.75rem;color:#b6bcd4;line-height:1.5}

.nav{padding:10px 0 40px}
.nav-group{margin:2px 0}
.nav-head{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:0;color:#cfd3e6;font:inherit;font-size:.875rem;
  padding:12px 20px;min-height:var(--tap);cursor:pointer;transition:.15s;
}
.nav-head:hover{background:#22283f;color:#fff}
.nav-head .ch-num{
  font-size:.6875rem;font-weight:700;letter-spacing:.5px;padding:2px 7px;border-radius:20px;
  background:#333a58;color:var(--gold-lt);flex:0 0 auto;
}
.nav-group.c1 .ch-num{background:#4a3a12;color:#f0c95c}
.nav-group.c2 .ch-num{background:#4d2320;color:#f0938c}
.nav-group.c3 .ch-num{background:#1d3a53;color:#8dc4f0}
.nav-head .arrow{margin-left:auto;font-size:.625rem;transition:.2s;color:#a3a9c4}
.nav-group.open .nav-head .arrow{transform:rotate(90deg)}

.nav-items{display:none;padding:2px 0 8px}
.nav-group.open .nav-items{display:block}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:10px 20px 10px 30px;
  min-height:var(--tap);
  font-size:.84375rem;color:#c2c7dc;text-decoration:none;cursor:pointer;transition:.12s;
  border-left:2px solid transparent;
}
.nav-item:hover{background:#22283f;color:#fff}
.nav-item.active,.nav-item[aria-current="page"]{
  background:#2b3350;color:#fff;border-left-color:var(--gold);
}
.nav-item .lno{
  flex:0 0 30px;font-size:.6875rem;color:#a3a9c4;font-variant-numeric:tabular-nums;
}
.nav-item .lch{font-family:var(--thai);font-size:1.0625rem;line-height:1}
.nav-item .done{margin-left:auto;color:#5fd08a;font-size:.75rem}

#main{flex:1;min-width:0;display:flex;flex-direction:column}
#content{flex:1;max-width:1000px;width:100%;margin:0 auto;padding:34px 40px 90px}

/* ---------- 通用元件 ---------- */
h2{font-size:1.625rem;margin:0 0 6px;letter-spacing:.3px;text-wrap:balance}
h3{font-size:1.1875rem;margin:34px 0 12px;padding-left:12px;border-left:4px solid var(--gold)}
h4{font-size:1rem;margin:22px 0 8px;color:var(--heading)}
p{margin:10px 0}
a{color:var(--gold-ink)}
code{background:var(--paper-2);padding:1px 6px;border-radius:5px;font-size:.875rem}

.crumb{font-size:.78125rem;color:var(--text-dim);margin-bottom:8px;letter-spacing:.4px}
.lead{font-size:.96875rem;color:var(--text-dim);margin:0 0 26px;max-width:74ch}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow);margin:16px 0;
}
.card.tight{padding:14px 16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}

.tag{
  display:inline-block;font-size:.71875rem;padding:2px 9px;border-radius:20px;
  background:var(--paper-2);color:var(--text-dim);margin-right:6px;white-space:nowrap;
}
.tag.mid{background:var(--mid-bg);color:#96650a}
.tag.high{background:var(--high-bg);color:#a8281f}
.tag.low{background:var(--low-bg);color:#1e5d94}
.tag.gold{background:#f7f0d8;color:#6f5510}

.note{
  border-left:4px solid var(--gold);background:#fdfaf0;padding:12px 16px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;margin:14px 0;font-size:.90625rem;
}
.note.warn{border-color:var(--bad);background:#fdf3f2}
.note.ok{border-color:var(--ok);background:#f1f9f4}
.note b{color:var(--heading)}

/* 淡底提示卡：取代散落在 JS 裡的 inline background:#fdfaf0（那會讓深色模式出現淺底淺字）*/
.card.tint{background:#fdfaf0}

/* 「一句話總結」卡片：固定深底亮字，不隨主題反轉。
   原本用 inline 的 background+color，深色模式下會被 .card 的
   background:var(--white) 蓋掉底色，變成淺字疊淺底（1.22:1 不可讀）。 */
.oneline-card{
  background:linear-gradient(135deg,#1b2038,#2c3358);
  color:#e8ecfa;border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow);margin:16px 0;
}
.oneline-card p{color:#e8ecfa}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);background:var(--white);color:var(--text);
  font:inherit;font-size:.875rem;padding:10px 15px;min-height:var(--tap);
  border-radius:var(--r-sm);cursor:pointer;transition:.15s;text-decoration:none;
}
.btn:hover{border-color:var(--gold);background:#fffdf6}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{background:var(--ink-2-bg);border-color:var(--gold)}
.btn.sm{padding:6px 11px;font-size:.8125rem;min-height:36px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- 字母卡 ---------- */
.letter-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 16px 14px;text-align:center;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.letter-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--mid);
}
.letter-card.high::before{background:var(--high)}
.letter-card.low::before{background:var(--low)}
.letter-card .glyph{
  font-family:var(--thai);font-size:4.75rem;line-height:1.1;color:var(--text);
  margin:8px 0 2px;display:block;
}
.letter-card .lname{font-family:var(--thai);font-size:1.1875rem;color:var(--heading)}
.letter-card .lname small{font-family:var(--ui);font-size:.75rem;color:var(--text-dim);display:block}
.letter-card .meta{font-size:.78125rem;color:var(--text-dim);margin-top:8px;line-height:1.6}
.letter-card .rt{font-weight:700;color:var(--heading);font-size:.84375rem}
.letter-card .zd{color:var(--gold-ink);font-size:.8125rem}
.letter-card .pos{font-size:.6875rem;color:var(--text-dim)}
.letter-card .mini{margin-top:10px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.letter-card:hover{box-shadow:var(--shadow-lg)}

/* ---------- 音檔播放器 ---------- */
.audio-row{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 12px;margin:10px 0;
}
.audio-row .label{font-size:.8125rem;color:var(--text-dim);min-width:64px}
.speed-toggle{display:inline-flex;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.speed-toggle button{
  border:0;background:var(--white);font:inherit;font-size:.78125rem;
  padding:8px 12px;min-height:36px;cursor:pointer;color:var(--text-dim);transition:.15s;
}
.speed-toggle button.on{background:var(--ink);color:#fff}
.play-btn{
  width:var(--tap);height:var(--tap);border-radius:50%;border:0;background:var(--ink);color:#fff;
  font-size:.875rem;cursor:pointer;display:grid;place-items:center;flex:0 0 auto;transition:.15s;
}
.play-btn:hover{background:var(--gold);color:var(--ink)}
.play-btn.playing{background:var(--gold);color:var(--ink)}
.progress{flex:1;min-width:80px;height:8px;background:#ddd6c4;border-radius:4px;overflow:hidden;cursor:pointer}
.progress i{display:block;height:100%;width:0;background:var(--gold)}
.dur{font-size:.75rem;color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
.rate{font-size:.75rem;color:var(--text-dim);display:flex;align-items:center;gap:6px}
.rate input{width:90px;min-height:24px}

/* ---------- 拼音練習表 ---------- */
.syl-table{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.syl{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 6px 7px;text-align:center;cursor:pointer;transition:.13s;position:relative;
  min-height:var(--tap);
}
.syl:hover{border-color:var(--gold);background:#fffdf6;transform:translateY(-1px)}
.syl.playing{border-color:var(--gold);background:#fdf4d9}
.syl b{font-family:var(--thai);font-size:1.6875rem;font-weight:400;display:block;line-height:1.25}
.syl i{font-style:normal;font-size:.71875rem;color:var(--text-dim);display:block}
.syl .tn{position:absolute;top:3px;right:4px;font-size:.59375rem;padding:0 4px;border-radius:8px;color:#fff}
.tn.mid{background:var(--t-mid)}
.tn.low{background:var(--t-low)}
.tn.fall{background:var(--t-fall)}
.tn.high{background:var(--t-high)}
.tn.rise{background:var(--t-rise)}

.vrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:0}
.vrow .vg{font-family:var(--thai);font-size:1.875rem;min-width:78px;color:var(--text)}
.vrow .vi{font-size:.8125rem;color:var(--text-dim);flex:1}

/* ---------- 聲調階梯圖 ---------- */
.tone-ladder{background:var(--ink);border-radius:var(--r);padding:18px 20px;color:#dfe3f5;overflow-x:auto}
.tone-ladder svg{display:block;min-width:520px}

/* ---------- 表格 ---------- */
table{border-collapse:collapse;width:100%;font-size:.875rem;margin:14px 0;background:var(--white)}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--paper-2);font-weight:600;font-size:.8125rem;color:var(--heading)}
td.th{font-family:var(--thai);font-size:1.1875rem;text-align:center;white-space:nowrap}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 進度 ---------- */
.progress-bar{height:8px;background:var(--paper-2);border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.progress-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-lt));width:0}
.pct{font-size:.78125rem;color:var(--text-dim);margin-top:6px}

/* ---------- 練習題 ---------- */
.drill{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow)}
.drill-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.drill-head h4{margin:0;font-size:1.0625rem}
.drill-q{font-size:1.0625rem;margin:8px 0 16px;font-weight:600}
.drill-q .big{font-family:var(--thai);font-size:2.75rem;display:block;margin:10px 0;font-weight:400}
.opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.opt{
  border:1.5px solid var(--line);background:var(--white);border-radius:var(--r-sm);
  padding:13px 14px;min-height:var(--tap);cursor:pointer;font:inherit;font-size:.9375rem;
  text-align:center;transition:.14s;color:var(--text);
}
.opt:hover{border-color:var(--gold);background:#fffdf6}
.opt.correct{border-color:var(--ok);background:#eefaf2;color:#1d6b41;font-weight:600}
.opt.wrong{border-color:var(--bad);background:#fdf0ef;color:#9d2f22}
.opt .th{font-family:var(--thai);font-size:1.875rem;display:block;line-height:1.3}

.fb{margin-top:13px;font-size:.90625rem;padding:10px 14px;border-radius:var(--r-sm);display:none}
.fb.show{display:block}
.fb.ok{background:#eefaf2;color:#1d6b41;border-left:4px solid var(--ok)}
.fb.no{background:#fdf0ef;color:#9d2f22;border-left:4px solid var(--bad)}

.drill-stat{font-size:.8125rem;color:var(--text-dim);margin-top:12px}

/* ---------- 描紅 ---------- */
.trace-wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.trace-box{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white)}
.trace-box .guide{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#eae3d2 1px,transparent 1px),linear-gradient(90deg,#eae3d2 1px,transparent 1px);
  background-size:100% 33.3%,33.3% 100%;
}
.trace-box .ghost{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--thai);font-size:7.5rem;color:#e8e1d0;pointer-events:none;user-select:none;
}
.trace-box canvas{touch-action:none;cursor:crosshair;position:relative}

/* ---------- 首頁 ---------- */
.hero{
  background:linear-gradient(135deg,var(--ink) 0%,#2b2f52 55%,#4a3a12 100%);
  color:#fff;border-radius:var(--r);padding:38px 40px;margin-bottom:28px;position:relative;overflow:hidden;
}
.hero h2{font-size:1.9375rem;color:#fff;margin-bottom:10px}
.hero p{color:#c7cbe2;max-width:60ch;font-size:.96875rem}
.hero .thai-big{
  position:absolute;right:-10px;bottom:-42px;font-family:var(--thai);font-size:11.875rem;
  color:rgba(255,255,255,.055);line-height:1;pointer-events:none;
}
.hero .chips{margin-top:20px;display:flex;gap:9px;flex-wrap:wrap}
.hero .chip{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);padding:5px 13px;border-radius:20px;font-size:.8125rem}

.path{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.stage{
  border:1px solid var(--line);border-radius:var(--r);padding:17px 19px;background:var(--white);
  cursor:pointer;transition:.16s;position:relative;
}
.stage:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.stage .sn{font-size:.71875rem;letter-spacing:1.2px;color:var(--gold-ink);font-weight:700}
.stage h4{margin:5px 0 6px;font-size:1.0625rem}
.stage p{margin:0;font-size:.84375rem;color:var(--text-dim)}
.stage .cnt{position:absolute;top:16px;right:17px;font-size:.71875rem;color:var(--text-dim)}

/* ---------- 其他 ---------- */
.kbd{display:inline-block;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-size:.78125rem;background:var(--white);color:var(--heading)}
.muted{color:var(--text-dim);font-size:.84375rem}
.hr{height:1px;background:var(--line);margin:28px 0;border:0}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.pill{border:1px solid var(--line);border-radius:20px;padding:9px 14px;min-height:var(--tap);font-size:.8125rem;cursor:pointer;background:var(--white);transition:.14s;color:var(--text)}
.pill:hover{border-color:var(--gold)}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tone-strip{display:flex;gap:3px;margin-top:6px}
.tone-strip span{height:5px;flex:1;border-radius:3px}
.loading{padding:60px;text-align:center;color:var(--text-dim)}

/* 搜尋框 */
.search-box{width:100%;padding:12px 16px;font:inherit;font-size:1rem;min-height:var(--tap);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);color:var(--text)}
.search-box:focus-visible{border-color:var(--gold)}

/* 進度匯出匯入 */
.io-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
textarea.io{width:100%;min-height:120px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.8125rem;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper-2);color:var(--text)}

/* 複習排程卡片 */
.due-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--white);margin-bottom:10px}
.due-card .g{font-family:var(--thai);font-size:2.25rem;line-height:1;flex:0 0 auto}

/* ---------- 響應式 ---------- */
@media (max-width:900px){
  #app{flex-direction:column}
  #sidebar{width:100%;flex:none;height:auto;position:relative;max-height:none}
  .nav{max-height:44vh;overflow-y:auto}
  #content{padding:22px 18px 70px}
  .hero{padding:26px 20px}
  .hero h2{font-size:1.5rem}
  .hero .thai-big{font-size:7.5rem}
}

@media (max-width:480px){
  body{font-size:.9375rem}
  h2{font-size:1.375rem}
  h3{font-size:1.0625rem}
  #content{padding:16px 14px 60px}
  .grid{gap:12px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .syl-table{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
  .syl b{font-size:1.375rem}
  .letter-card .glyph{font-size:3.75rem}
  .drill-q .big{font-size:2.125rem}
  .audio-row{gap:6px;padding:8px}
  .audio-row .label{min-width:auto;width:100%}
  .rate{display:none}          /* 窄螢幕收起微調滑桿，保留標準／慢速兩鍵 */
  .trace-box{width:100%!important}
  .trace-box canvas,.trace-box .ghost{width:100%!important}
  /* 例字表格改成卡片式，避免橫向捲動 */
  table.responsive,
  table.responsive tbody{display:block;width:100%}
  table.responsive tr{display:block;border:1px solid var(--line);border-radius:var(--r-sm);
    margin-bottom:10px;background:var(--white);padding:8px 10px}
  table.responsive td,
  table.responsive th{display:block;border:0;padding:3px 0;text-align:left}
  table.responsive td.th{font-size:1.625rem}
  table.responsive td:not(.th)::before{
    content:attr(data-label) "：";color:var(--text-dim);font-size:.75rem;
  }
}

@media print{
  #sidebar,.audio-row,.btn,.skip-link{display:none!important}
  #content{max-width:none;padding:0}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   深色模式覆蓋層
   --------------------------------------------------------------------------
   必須放在檔案最後！同權重下後定義的規則才會勝出。
   先前放在檔案開頭，被後面的淺色元件規則整片覆蓋，
   導致深色模式下出現「淺底淺字」——.note.warn 的內文就是這樣變成一片白的。
   ========================================================================== */

@media (prefers-color-scheme: dark){
  :root{
    --ink:#0f1220;
    --ink-2:#c8cde4;          /* 當「文字色」時要夠亮 */
    --ink-2-bg:#1b2036;       /* 當「背景色」時要保持深 */
    --heading:#e6e8f0;
    --paper:#14161f;
    --paper-2:#1e2130;
    --line:#333849;
    --text:#e6e8f0;
    --text-dim:#a8aec6;       /* 對 #1e2130 7.4:1 */
    --white:#1a1d29;
    --gold:#e0bb4a;
    --gold-dk:#e8cf7a;
    --gold-ink:#e8cf7a;       /* 深色底上用亮金 */
    --focus:#6aa9ff;
    --mid:#e0a63a;            /* 深色模式標籤底色要亮，配深字 */
    --mid-bg:#3a2f14;
    --high:#e8736a;
    --high-bg:#3d211e;
    --low:#6aa9e0;
    --low-bg:#16283a;
    --high-ink:#f0938c;
    --low-ink:#8dc4f0;
    --ok:#5fd08a;
    --bad:#f0938c;
    --shadow:0 2px 4px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  }
  body{background:var(--paper);color:var(--text)}

  /* 標題與強調文字一律用 --heading，不要用 --ink-2 */
  h4,.letter-card .rt,.letter-card .lname,.stage h4,.drill-head h4,
  .note b,.kbd,.stage p b,.card b,.vrow b{color:var(--heading)}

  /* 深底區塊（hero／tone-ladder）固定用深色漸層，不隨 --ink-2 變亮 */
  .hero{background:linear-gradient(135deg,#0b0e18 0%,#1b2036 55%,#3a2c0d 100%)}
  .tone-ladder{background:#0b0e18}
  .drill-q{color:var(--text)}
  .hero h2{color:#fff}
  .hero p{color:#c7cbe2}
  .brand h1{color:#fff}

  /* 卡片與色塊 */
  .card,.letter-card,.syl,.opt,.stage,.drill,.due-card,.trace-box,
  .search-box,textarea.io{background:var(--white)}
  .note{background:#241f10;color:var(--text)}
  .note.warn{background:#2a1a18;color:var(--text)}
  .note.ok{background:#152a1d;color:var(--text)}
  .note b{color:#fff}

  /* 彩色標籤：深色模式改用「亮底 + 深字」，避免亮底亮字 */
  .tag{background:#2a2f42;color:#c8cde4}
  .tag.mid{background:var(--mid);color:#1a1200}
  .tag.high{background:var(--high);color:#2a0d0a}
  .tag.low{background:var(--low);color:#04121f}
  .tag.gold{background:var(--gold);color:#1a1200}

  /* 聲調標籤維持白字（底色已加深達標） */
  .tn,.tn.mid,.tn.low,.tn.fall,.tn.high,.tn.rise{color:#fff}

  /* 表頭與表格 */
  th{background:#252a3d;color:#e6e8f0}
  td{border-color:var(--line)}
  table{background:var(--white)}

  /* 側欄課號：深色底上要更亮 */
  .nav-item .lno{color:#a3a9c4}
  .nav-item .lch{color:inherit}

  /* 播放器 */
  .audio-row{background:#232838;border-color:var(--line)}
  .progress{background:#2c3148}
  .speed-toggle button{background:#1a1d29;color:#c8cde4}
  .speed-toggle button.on{background:var(--gold);color:#1a1200}

  /* 回饋訊息 */
  .fb.ok{background:#152a1d;color:#8fe3ad}
  .fb.no{background:#2a1a18;color:#f5a9a2}
  .opt.correct{background:#152a1d;color:#8fe3ad;border-color:var(--ok)}
  .opt.wrong{background:#2a1a18;color:#f5a9a2;border-color:var(--bad)}

  /* 按鈕 */
  .btn{background:#1a1d29;color:var(--text);border-color:var(--line)}
  .btn:hover{background:#232838;border-color:var(--gold)}
  .btn.primary{background:var(--gold);color:#1a1200;border-color:var(--gold)}
  .btn.primary:hover{background:#f0cf6a}
  .btn.on{background:var(--gold);color:#1a1200}

  /* 其他細節 */
  .hero .chip{background:rgba(255,255,255,.14);color:#fff}
  .pill{background:#1a1d29;color:var(--text)}
  .pill.on{background:var(--gold);color:#1a1200}
  .loading{color:var(--text-dim)}
  .muted{color:var(--text-dim)}
  code{background:#252a3d;color:#e6e8f0}
  img{filter:none}
}

@media (prefers-color-scheme: dark){
}

@media (prefers-color-scheme: dark){
  .letter-card .lname,.letter-card .rt{color:var(--text)}
}

@media (prefers-color-scheme: dark){ .progress{background:#2c3148} }

@media (prefers-color-scheme: dark){ th{color:var(--text)} }

@media (prefers-color-scheme: dark){
  .opt.correct{background:#152a1d;color:#7fd8a4}
  .opt.wrong{background:#2a1a18;color:#f0938c}
}

@media (prefers-color-scheme: dark){
  .fb.ok{background:#152a1d;color:#7fd8a4}.fb.no{background:#2a1a18;color:#f0938c}
}

/* ---- 深色模式補充：tint 卡與聲調文字色 ---- */
@media (prefers-color-scheme: dark){
  .card.tint{background:#241f10}
  :root{
    /* 深色底上的聲調文字要夠亮（實測 #1a1d29 上需 >4.5）*/
    --t-mid-ink:#8fd08d;
    --t-low-ink:#7db4e8;
    --t-fall-ink:#f0917c;
    --t-high-ink:#c9a0e8;
    --t-rise-ink:#e0b654;
  }
}