/* 西文彎引號（' ' " " …）在 Noto TC 系字體會畫成全形——「Notion' s」那個難看的縫。
   放在 tokens.css 是因為全站每一頁都先載它：只要堆疊前置 'Latin Punct'/'Latin Punct Serif'，
   這幾個字元就改用系統拉丁字體，其餘字形完全不動。 */
@font-face { font-family: 'Latin Punct'; src: local('Helvetica Neue'), local('Arial'); unicode-range: U+2018-201F, U+2026; }
@font-face { font-family: 'Latin Punct Serif'; src: local('Georgia'), local('Times New Roman'); unicode-range: U+2018-201F, U+2026; }
/* ============================================================================
   聽外語 TingWaiYu — 設計 Token 單一來源（2026-09-22 從聽摘 bf385d7 搬來：結構照抄、品牌色值換成聽外語）
   ----------------------------------------------------------------------------
   這支檔案是全站唯一的顏色／間距／字級／圓角／陰影來源。
   規則：
     1. 語意化命名（--bg / --fg / --primary …），不用色名。
     2. 未設偏好維持深色；[data-theme="light"] 使用暖米白，appearance.js 套用裝置偏好。
     3. 檔案最下方保留「舊變數別名」——全站 1181 次 var(--paper) / var(--ink)
        / var(--vermillion) … 一行都不用改，換色只要動這裡。
     4. 新寫的樣式請用語意 token，不要再用別名。

   載入順序：tokens.css 一定放在該頁所有 <style> / styles.css 之前。
   ============================================================================ */

/* ────────────────────────────────────────────────────────────────────────────
   LIGHT — data-theme="light"：暖米白、深墨與同品牌暖橘
   來源：原本 4 個 :root 的淺色調色盤，值完全一致，直接收斂為一份。
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* —— 底色 / 表面 —— */
  --bg:              #f3eee6;   /* 頁面底：米白宣紙 */
  --bg-sunken:       #efe7d8;   /* 下沉區塊（原 --paper-deep） */
  --surface:         #fffaf4;   /* 卡片（原 --card） */
  --surface-1:       #fffaf4;
  --surface-2:       #f2ebdf;
  --surface-3:       #e8dfd3;

  /* —— 文字 —— */
  --fg:              #21191b;   /* 主文 */
  --fg-muted:        #65564f;   /* 次要文 */
  --fg-faint:        #68584f;   /* 極弱文 / 註腳 */
  /* 2026-09-19 改版夜：「暗但仍讀得到」——全螢幕逐字稿的非當前句、已讀過的段落。
     保證在本主題每一種表面上 ≥3:1（大字 AA），不是靠 opacity 疊出來的 2.06:1。 */
  --fg-dim:          #68584f;   /* 淺色弱化文字仍須通過小字AA。 */

  /* —— 主色與對比前景 —— */
  --primary:         #c8401f;   /* 朱紅——**按鈕底色**用這個，品牌色不動 */
  --primary-hover:   #a33317;
  --primary-fg:      #ffffff;   /* 疊在 --primary 上的字色 */
  /* 🐛 同一個朱紅當「文字」用時是 4.47:1，差 0.03 沒到 WCAG AA 的 4.5。
     這件事我一度標成「設計決策，等 QQ 拍板」放了十幾輪——**但那是標準不是品味**，
     跟導讀重複生成一樣是分類錯誤（見稽核文件第四節）。
     調暗 1.2% 就到 4.59（米底）／5.03（卡片底），肉眼看不出差別。
     底色維持原品牌色：白字疊朱紅本來就達標，調它反而動到品牌識別。 */
  --primary-ink:     #af3b1e;   /* 朱紅——**文字**用這個 */

  --gold-accent:     #805710;   /* 金（印章／小標） */
  --saved-word:      #3c4e9b;
  --saved-word-tint: #e8eaf7;
  --status-error:    #b62347;   /* alert＝失敗訊息；不與主要行動的朱紅共用（一個顏色只做一件事） */
  --gold-accent-fg:  #fffaf4;

  --pine-accent:     #2d4a3e;   /* 松綠（成功／正向） */
  --pine-accent-fg:  #ffffff;

  /* —— 線 —— */
  --line:            rgba(28, 24, 19, 0.16);
  --line-strong:     rgba(28, 24, 19, 0.28);
  --control-line:    #817165;

  /* —— 陰影（淺色用暖黑，不用純黑） —— */
  --shadow-sm:       0 1px 3px rgba(28, 24, 19, 0.08);
  --shadow-md:       0 4px 14px rgba(28, 24, 19, 0.10);
  --shadow-lg:       0 20px 50px rgba(28, 24, 19, 0.16);

  /* ==========================================================================
     2026-09-20 色彩點綴＋立體系統（docs/ux-review-2026-09-19/DESIGN-COLOR-DEPTH-SPEC.md §1／§2）
     淺色值是「不能讓行銷頁壞掉」的合理對應；App 頁（dark）的值才是規格本文。
     命名寫死：--accent-{ink,memory,show}-{text,line,tint}；HTML／JS 只認這些名字。
     ========================================================================== */
  /* —— 點綴色：只做識別，不做狀態（字 ≥4.5 on surface-2；線 ≥3:1 即可） —— */
  --accent-ink-text:      #3d4a9c;   /* 靛・筆墨（你寫的）——淺色 surface-2 #f2ebdf 上 7.4:1 */
  --accent-ink-line:      #6470c4;   /* 線 3.81（非文字 ≥3:1） */
  --accent-ink-tint:      rgba(85, 97, 179, 0.14);
  --accent-memory-text:   #6a4b92;   /* 紫藤・記憶（累積）——5.8:1 */
  --accent-memory-line:   #8b6db3;   /* 線 3.59 */
  --accent-memory-tint:   rgba(132, 103, 173, 0.14);
  --accent-memory-heat:   rgb(132 103 173);   /* 熱力圖 4 階的底色基準（.heat-1..3 用 color-mix 取 18／36／60%） */
  /* 節目色（動態）：JS 在元素上設 --show-h（OKLCH 色相，度數），--accent-show-* 由下方的 * 規則逐元素算出。
     沒設 --show-h 時退回靛（275°）。淺色頁字要深、線要淺，所以 L 與 dark 相反。 */
  --show-l-text:          0.42;   /* 全色相對 surface-2 ≥6.5 */
  --show-l-line:          0.58;   /* 全色相對 surface-2 ≥3.4 */
  --show-l-tint:          0.55;
  --show-l-track:         0.84;   /* cd-fix 進度底軌（淺色：比 surface-2 暗一階、低彩，朱紅 fill 才看得到） */

  /* —— 深度：三層底色＋頂邊高光＋浮層陰影 —— */
  --surface-0:            var(--bg);
  --surface-sunken:       #ece3d3;   /* 下沉輸入框（比 --bg-sunken 再暗半階） */
  --hl-s1:                inset 0 1px 0 rgba(255, 255, 255, 0.70);
  --hl-s2:                inset 0 1px 0 rgba(255, 255, 255, 0.90);
  --elev-1:               0 1px 2px rgba(28, 24, 19, 0.10), 0 6px 16px rgba(28, 24, 19, 0.10);
  --elev-2:               0 2px 4px rgba(28, 24, 19, 0.12), 0 16px 40px rgba(28, 24, 19, 0.18);

  /* —— 主鍵＝實體鍵（淺色＝墨色鍵、米白字；深色＝米白鍵、暖黑字） —— */
  --btn-primary-bg:       linear-gradient(180deg, #2a2520 0%, #21191b 100%);
  --btn-primary-bg-hover: linear-gradient(180deg, #342e28 0%, #24201a 100%);
  --btn-primary-fg:       #f3eee6;
  --btn-primary-shadow:   inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.30), 0 1px 2px rgba(28, 24, 19, 0.25);
  --btn-primary-pressed:  inset 0 2px 4px rgba(0, 0, 0, 0.40);

  --pine-ink:             #286242;   /* 松綠當「文字」用（淺色 surface-2 上 5.6:1）；底色仍用 --pine-accent */

  /* —— 封面光暈（集數頁／播放頁 #ambient；首頁不放） —— */
  --ambient-h:            360px;
  --ambient-blur:         80px;
  --ambient-opacity:      0.55;

  /* ==========================================================================
     以下刻度不分主題，light / dark 共用
     ========================================================================== */

  /* —— 間距（4 的倍數，8 階） —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* —— 圓角 —— */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-full: 999px;
  /* 2026-09-19 改版夜：實拍量到卡面圓角四檔（10／14／16／17／20／22）、內距四檔（12–22）。
     元件層只准用這三檔＋一個內距——chip／輸入框＝10、卡＝16、sheet／浮層＝20；卡內距 16。
     --r-sm／md／lg 留給既有規則，新寫的請用下面這組。 */
  --r-chip:   10px;
  --r-card:   16px;
  --r-sheet:  20px;
  --pad-card: 16px;

  /* —— 字級 —— */
  --fs-xs:   0.72rem;
  --fs-sm:   0.8rem;
  --fs-base: 0.9rem;
  --fs-md:   1rem;
  --fs-lg:   1.15rem;
  --fs-xl:   1.4rem;
  --fs-2xl:  1.7rem;
  --fs-3xl:  2.2rem;

  /* —— 行高 —— */
  --lh-tight:   1.35;   /* 大標 */
  --lh-snug:    1.5;    /* 小標 / 卡片標題 */
  --lh-normal:  1.7;    /* 內文（中文預設） */
  --lh-relaxed: 1.8;    /* 長段落 / 逐字稿 */

  /* —— 字族 —— */
  --font-serif: 'Latin Punct Serif', 'Noto Serif TC', Georgia, serif;
  --font-sans:  'Latin Punct', 'Noto Sans TC', -apple-system, "PingFang TC", system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* —— 緩動 —— */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);      /* 快進慢出 */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);     /* 帶回彈過衝 */
}

/* ────────────────────────────────────────────────────────────────────────────
   DARK — App 頁：index / episode / guide / legal / mentor / u / dashboard / deck
   來源：dashboard.html + deck.html 的暖黑調色盤（兩者原本已一致）。
   styles.css 與獨立頁不再覆寫主題色；預設維持原深色。
   ──────────────────────────────────────────────────────────────────────────── */
:root:not([data-theme="light"]), [data-theme="dark"] {
  /* 未選擇外觀維持原深色；明確 light 時不覆寫上面的暖米白 token。 */
  color-scheme: dark;

  --bg:              #100d0e;   /* 暖黑（不是藍黑） */
  --bg-sunken:       #17131a;
  /* 2026-09-19 改版夜：實拍卡面有 5 種底色（25,20,22／27,22,24／29,23,25／31,25,28／33,26,29）——
     來源是 surface-1≠surface，加上各容器自己畫 surface-2→surface-1 的漸層，取樣到中間值。
     收成兩層：--surface＝卡（貼在 --bg 上的東西）、--surface-2＝浮在卡上的東西（sheet／選單／卡內 chip／次要鍵）。
     --surface-1 改成指向 --surface（別名，舊規則不用改）；--surface-3 只留給 hover／pressed。 */
  --surface:         #1b1618;
  --surface-1:       var(--surface);
  --surface-2:       #221b1e;
  --surface-3:       #2b2226;

  --fg:              #f4ece3;
  --fg-muted:        #b3a59c;
  --fg-faint:        #a7988f;
  --fg-dim:          #a7988f;   /* B71：補足小字AA；實際alpha合成對比由appearance-web檢查。 */

  /* 🐛 第 34 輪（對比度掃描器終於用假資料渲染真實介面之後才看得到）：
     深色主題的按鈕底色原本是 #e0532f，**白字疊上去只有 3.85:1**——
     「摘錄」那顆主要動作鍵就在其中。前 33 輪掃 episode.html 只看得到
     14 個文字元素的空殼，這兩處完全不可見。

     深淺兩種橘各有各的職責，剛好相反：
       文字橘（--primary-ink）在深底上要**更亮**才讀得到 → #e0532f，5.02／4.64 ✅
       按鈕橘（--primary）要**更深**，白字疊上去才夠 → #c8401f，4.99 ✅
     所以按鈕底色兩個主題一致，文字色兩個主題不同。
     這正是第 33 輪拆 token 之後才做得到的——同一個變數兼兩職時無解。 */
  --primary:         #f2613a;   /* 聽外語朱紅＝播放位置（進度填色／當前句左條）。不再當按鈕底——主鍵是米白實體鍵 */
  --primary-hover:   #d94f2b;
  --primary-fg:      #ffffff;
  /* ⚠️ 第 34 輪修正：原本用 #e0532f，只驗過 --bg 與 --surface（5.02／4.64），
     沒驗 --surface-2（#221b1e，卡片與按鈕的凸起表面）——那裡只有 4.38。
     「刪掉重新生成」那顆 danger 鍵就在凸起表面上。
     調亮到 #e6613c，三種深色底全過（5.65／5.23／4.94）。
     📌 教訓：一個色票要驗**它會疊上去的每一種底**，不是挑最深那個算完就好。 */
  --primary-ink:     #f2613a;   /* 深底文字朱紅：bg 6.0／surface 5.5／surface-2 5.2 */

  --gold-accent:     #d9a441;
  --saved-word:      #a9b6f5;
  --saved-word-tint: #1c2a3e;
  --status-error:    #f17a91;   /* alert＝失敗訊息（深色表面） */
  --gold-accent-fg:  #100d0e;

  --pine-accent:     #4f8f6b;
  --pine-accent-fg:  #100d0e;

  --line:            rgba(255, 255, 255, 0.08);
  --line-strong:     rgba(255, 245, 240, 0.14);
  --control-line:    #8b7e74;

  --shadow-sm:       0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-md:       0 10px 30px rgba(0, 0, 0, 0.18);
  --shadow-lg:       0 20px 50px rgba(0, 0, 0, 0.35);

  /* ==========================================================================
     2026-09-20 色彩點綴＋立體系統——**這裡是規格本文**（SPEC §1／§2，對比以 surface-2 #221b1e 計）
     ⚠️ --shadow-md 的 dark 值（0.18）實測太淺，App 頁的景深一律改用 --elev-1／--elev-2；
        resting 卡不再有陰影，只靠色階＋ --hl-s1 頂光。--shadow-* 留給行銷頁與舊規則。
     ========================================================================== */
  /* —— 點綴色 —— */
  --accent-ink-text:      #a9b6f5;   /* 靛・筆墨：bg 9.85／surface 9.11／surface-2 8.60 */
  --accent-ink-line:      #5561b3;   /* 線 3.45／3.19／3.01（非文字，≥3:1） */
  --accent-ink-tint:      rgba(110, 125, 235, 0.14);
  /* 紫藤・記憶（累積）：2026-09-23 改回 SPEC §1 的紫藤。
     先前聽外語把它設成朱紅系，違反「朱紅只標播放位置」——首頁同屏會出現
     「複習剩 N 張」的朱紅字＋進度條的朱紅填色，兩個朱紅各自代表不同意思。
     實算對比（scripts/e2e/color-depth.mjs 會再驗一次）：字 bg 10.15／surface 9.38／surface-2 8.86；線 4.17／3.85／3.64。 */
  --accent-memory-text:   #cdb0ec;
  --accent-memory-line:   #8467ad;
  --accent-memory-tint:   rgba(160, 120, 210, 0.14);
  --accent-memory-heat:   rgb(160 120 210);
  /* 節目色：字 L 0.77 C 0.10、線 L 0.54 C 0.10、底軌 L 0.32 C 0.06、tint L 0.60 C 0.10 α.18（見下方 * 規則；cd-fix 與 iOS 常數逐項對齊）
     ⚠️ 線的 L 沒照 SPEC 寫 0.42–0.48：實算 L 0.45 對 surface-2 只有 2.15–2.47（九個色相全不到 3:1），
        靛線 #5561b3 本身就是 L 0.52。取 0.54 → 3.16–3.52 全色相過線；字 L 0.77 → 7.79+（≥7 符合 SPEC）。 */
  --show-l-text:          0.77;
  --show-l-line:          0.56;
  --show-l-tint:          0.60;
  --show-l-track:         0.22;   /* cd-fix（Codex 十九審）進度底軌：L 0.22／C 0.04 不透明——朱紅 fill 對底軌全色相 ≥3:1；0.32 時 h=61 只有 2.x；側條仍 0.54 */

  /* —— 深度 —— */
  --surface-0:            var(--bg);          /* #100d0e 頁面 */
  --surface-sunken:       #0d0a0b;            /* 下沉輸入框 */
  --hl-s1:                inset 0 1px 0 rgba(255, 245, 235, 0.10);   /* surface-1 卡頂光（cd-fix：0.06 在深色底上看不見 → 0.10） */
  --hl-s2:                inset 0 1px 0 rgba(255, 245, 235, 0.14);   /* surface-2 浮層頂光（cd-fix：0.09 → 0.14） */
  --elev-1:               0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.28);   /* 只給 hover／拖曳中的卡 */
  --elev-2:               0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.45);  /* 浮層：sheet／選單／迷你播放器 */

  /* —— 主鍵＝米白實體鍵（字 #100d0e，16.5:1） —— */
  --btn-primary-bg:       linear-gradient(180deg, #faf4ec 0%, #ede4d8 100%);
  --btn-primary-bg-hover: linear-gradient(180deg, #fffaf3 0%, #f3ebe0 100%);
  --btn-primary-fg:       #100d0e;
  --btn-primary-shadow:   inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(28, 24, 19, 0.14), 0 1px 2px rgba(0, 0, 0, 0.4);
  --btn-primary-pressed:  inset 0 2px 4px rgba(28, 24, 19, 0.28);

  --pine-ink:             #81bd9b;   /* 松綠字：surface-2 5.64（原 #4f8f6b 只有 4.40） */

  /* —— 封面光暈 —— */
  --ambient-h:            360px;
  --ambient-blur:         80px;
  --ambient-opacity:      0.55;
}

/* 節目色（--accent-show-*）為什麼寫在 * 上而不是 :root：
   custom property 裡的 var() 在「宣告它的那個元素」求值，子孫繼承的是算完的值。
   放 :root 的話，JS 在 .snip-card 上設 --show-h 只會改到 :root 沒看的變數，卡片仍是靛。
   放 * 上每個元素用自己繼承到的 --show-h 重算一次——JS 只要設 --show-h（度數），
   不要直接設 --accent-show-*（設了會被子孫的 * 規則蓋回去）。沒設＝靛 275°。 */
*, ::before, ::after {
  --accent-show-text: oklch(var(--show-l-text, 0.77) 0.10 var(--show-h, 275));
  --accent-show-line: oklch(var(--show-l-line, 0.45) 0.10 var(--show-h, 275));
  --accent-show-tint: oklch(var(--show-l-tint, 0.60) 0.10 var(--show-h, 275) / 0.18);   /* cd-fix：C 0.12／α .14 → C 0.10／α .18（與 iOS 對齊） */
  --accent-show-track: oklch(var(--show-l-track, 0.22) 0.04 var(--show-h, 275));   /* cd-fix：進度底軌專用（低明度低彩，不透明；朱紅 fill 對它全色相 ≥3:1） */
}
@supports not (color: oklch(0.5 0.1 200)) {
  *, ::before, ::after {
    --accent-show-text: var(--accent-ink-text);
    --accent-show-line: var(--accent-ink-line);
    --accent-show-tint: var(--accent-ink-tint);
    --accent-show-track: var(--line-strong);
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   舊變數別名 — 相容層
   全站既有 var() 呼叫全部指到上面的語意 token；一行舊 CSS 都不用改。
   別名用 var() 轉指，custom property 是「用到才求值」，所以切主題會自動跟著換。
   ⚠️ 新樣式請直接用語意 token，別名只為相容，未來會逐步移除。
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  --paper:            var(--bg);
  --paper-deep:       var(--bg-sunken);
  --card:             var(--surface);

  --ink:              var(--fg);
  --ink-soft:         var(--fg-muted);
  --ink-faint:        var(--fg-faint);

  --vermillion:       var(--primary-ink);
  --vermillion-deep:  var(--primary-hover);
  --vermillion-ink:   var(--primary-ink);   /* 當文字色時用這個（見上面的對比度說明） */
  --verm:             var(--primary-ink);       /* landing-b 用的短名 */
  --verm-deep:        var(--primary-hover);
  --verm-ink:         var(--primary-ink);

  --gold:             var(--gold-accent);
  --seal-gold:        var(--gold-accent);   /* 行銷頁印章金 */
  --pine:             var(--pine-ink);

  --line-hi:          var(--line-strong);
  --glow:             rgba(242, 97, 58, 0.5);

  --radius:           14px;                 /* welcome 的預設；styles.css 覆寫為 16px */
}

/* ────────────────────────────────────────────────────────────────────────────
   全域焦點環 — 之前全站只有 styles.css 一處 :focus-visible，鍵盤使用者等於裸奔。
   用 :where() 把選擇器權重壓成 0，只有 :focus-visible 本身計權重，
   任何既有的 .btn:focus-visible 之類都蓋得過它，不會改到現有外觀。
   ──────────────────────────────────────────────────────────────────────────── */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  /* 改版夜：焦點環改 ink（朱紅只留播放位置）。outline-offset 2px 讓 ink 實心鍵外也看得到環。 */
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* ────────────────────────────────────────────────────────────────────────────
   Level 2.2／2.3／2.4 的收斂規則與「刻意不收」清單
   （寫在這裡是因為這是刻度的唯一來源，下次有人想再收斂時第一個會打開的就是它）

   ■ 換算規則
     取「幾何最近」的刻度階 —— 刻度是比例級數，所以 10px 落在 8 與 12 中間時
     比值較小的 12 勝（12/10 = 1.20 < 10/8 = 1.25）。字級同理。
     只有同時滿足這兩條才換：
       間距／圓角：與最近階的絕對差 ≤4px，且相對差 ≤25%
       字級：      與最近階的相對差 ≤6%
     其餘一律原值保留 —— 換過去會造成肉眼看得出來的位移，那不是收斂是改設計。

   ■ 刻意不收的（保留原值，這是決定不是遺漏）
     間距：1／2／3px  hairline 級微調，換到 --sp-1(4px) 是 +33%～+300%
           6px        與 components.css 的 --btn-gap 同一個決定（動它＝動 App 頁上百顆按鈕）
           40／56px   離最近階 8px，換過去是 ±20% 的明顯位移
           72／76／80／88／96／100／104／110／118／120／150px
                      版面級留白（section padding），超出這套 8 階刻度的定義域（上限 64px）；
                      要收的話得先在這裡開 --sp-9／--sp-10，那要 QQ 拍板
           負值、em／rem 相對單位：不在 px 刻度上
     字級：0.58／0.6／0.62／.64／0.65／0.66rem  比 --fs-xs 小超過 6%（極小註腳字）
           1.08／1.3／1.5／1.9／2rem            卡在兩階中間，兩邊都超過 6%
           2.6／3.4／4／4.4rem                  超出 --fs-3xl(2.2rem)，是 landing 的巨標
           9 個 clamp()、0.85em／0.86em          響應式與相對單位，不在固定刻度的定義域
           welcome 的 340px／220px               裝飾用的巨大浮水印字，不是內文級距
     圓角：50%        圓形（非正方形元素上 50% 會變橢圓，跟 --r-full 不等價）
           2／3／4px  hairline 級，換到 --r-sm(8px) 是 +100%～+300%
           22／28／34／35／38／42／44／46px       landing-b／welcome 的有機大圓角造型
     陰影：見下

   ■ 陰影為什麼只收了一小部分（54 → 41）
     這三階 token 描述的是「景深」，但站上的 box-shadow 其實有三種語言：
       ①景深（rgba(0,0,0,α)／rgba(28,24,19,α)）②硬邊紙感偏移（4px 4px 0、8px 10px 0…）
       ③品牌光暈（rgba(242,97,58,α)）
     ②③根本不是 elevation，硬塞進三階會直接改掉設計語彙。
     而①雖然同類，深色頁實際在用的 alpha 多半是 0.35～0.55，
     --shadow-md 的 dark 值卻是 rgba(0,0,0,0.18) —— 換過去會讓卡片明顯變淺。
     所以這一輪只換「幾乎完全相同」的（層數同、色同、offset-y 差 ≤2px、blur 差 ≤4px、
     alpha 差 ≤0.04），其餘保留。
     ⚠️ 建議下一輪處理：把 dark 的 --shadow-md alpha 調到符合實況，再回頭收 ——
        那會動到 token 值本身，需要 QQ 先看過截圖。

   ■ Build71 外觀設定
     appearance.js 在 CSS 前套用持久化的 system／light／dark；預設保留深色。
     App 與伺服器產生的分享頁都須載入本色票，styles.css 只負責排版。
     元件與頁面文字使用語意 token，避免深色專用固定色覆蓋淺色色票。
   ──────────────────────────────────────────────────────────────────────────── */

/* 表單placeholder也必須可讀，獨立頁與App頁都沿用次要文字色。 */
input::placeholder, textarea::placeholder { color:var(--fg-muted); opacity:1; }