/* StayTH 追加樣式（th.css 是從 StayTW 複製的底，這裡覆蓋＋新增泰文專用元件）。主色：叢林青綠＋番紅花橘 */
:root {
  --ac: #11806F; --ac-soft: rgba(17,128,111,.09); --ac2: #D27420;
  --serif: "Noto Sans Thai Looped", "PingFang TC", "Noto Sans TC", sans-serif;
  --thf: "Noto Sans Thai Looped", "Thonburi", "Sukhumvit Set", "Leelawadee UI", sans-serif;
}
[data-theme="dark"] { --ac: #4FC7B2; --ac-soft: rgba(79,199,178,.12); --ac2: #F2A65A; }
body { font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", var(--thf), sans-serif; }
[lang="th"] { font-family: var(--thf); line-height: 1.7; }
.fc-word[lang="th"], .vcard-w, .ws-w, .qz-word[lang="th"], .ph-z, .th-wod-w, .th-letter-big, .th-syl { font-family: var(--thf); font-weight: 700; }
.hd h1 img { width: 30px; height: 30px; }

/* 共用小元件 */
.th-pr { color: var(--ac2); font-family: var(--thf); font-weight: 600; }
.th-rr { color: var(--tx3); font-size: .92em; letter-spacing: .01em; }
.hj { font-family: "PingFang TC", "Noto Serif TC", "Songti TC", serif; color: var(--tx2); }
.vcard-py .hj, .fc-py .hj, .ws-p .hj, .qsub .hj, .th-wod-s .hj { border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; margin-left: 4px; font-size: .92em; }
.th-exm { color: var(--tx2); font-size: 13.5px; line-height: 1.7; margin-top: 3px; }
.th-zh { font-family: inherit; }
.th-learned { color: var(--ok); font-weight: 700; font-size: 13px; }
.th-lead { color: var(--tx2); font-size: 14px; line-height: 1.8; margin: 0 0 10px; }
.th-sub { color: var(--tx3); font-weight: 500; font-size: .85em; }
.th-h { display: block; font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.th-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0 0 14px; }
.th-card > .th-lead:last-child { margin-bottom: 0; }
.th-sec { display: flex; flex-direction: column; gap: 10px; }
.th-tabs { margin: 4px 0 16px; }
.th-tagrow { max-height: 96px; overflow-y: auto; padding-bottom: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.th-select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); color: var(--tx); font: inherit; font-size: 14px; }
.th-foot { margin-top: 6px; font-size: 12px; color: var(--tx3); }
.rd-empty { text-align: center; color: var(--tx3); padding: 40px 0; font-size: 14px; }
.th-bigplay { padding: 14px 28px; font-size: 16px; margin: 6px 0 14px; }
.th-hjarrow { color: var(--tx3); margin: 0 6px; }
.srs-btn.srs-mid { color: #fff; }
.vlist { display: grid; gap: 10px; }
.vcard .tts-btn { width: 32px; height: 32px; font-size: 14px; }
.vcard-top { align-items: center; }

/* 首頁 */
.th-hero { flex-direction: column; align-items: stretch; gap: 12px; }
.th-hero .hb-greet { font-family: inherit; }
.th-mascot { width: 52px !important; height: 52px !important; flex: none; }
.th-hiko { display: block; font-size: 13px; font-weight: 500; color: var(--tx3); margin-top: 2px; }
.th-goalset { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0 9px; font: inherit; font-size: 11px; color: var(--tx2); cursor: pointer; }
.th-hero .hb-goal-top { align-items: center; gap: 8px; }
.th-hero .hb-goal-top span:first-child { flex: 1; }
.th-hero .hb-goal-n { cursor: default; }
.th-wod { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 15px 17px; cursor: pointer; }
.th-wod-l { font-size: 11px; font-weight: 700; color: var(--tx3); letter-spacing: .06em; }
.th-wod-b { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.th-wod-w { font-size: 28px; line-height: 1.2; }
.th-wod-s { font-size: 13px; margin-top: 2px; }
.th-wod-m { font-size: 15px; font-weight: 600; margin-top: 6px; }
.th-lvgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.th-lvcard { text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; cursor: pointer; font: inherit; color: var(--tx); display: flex; flex-direction: column; gap: 5px; }
.th-lvcard.on { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac) inset; }
.th-lvcard b { font-size: 16px; }
.th-lvcard small, .th-lvcard span { font-size: 11px; color: var(--tx3); }
@media (max-width: 420px) { .th-lvgrid { grid-template-columns: repeat(2, 1fr); } }

/* 單字表、查字 */
.th-hjrel { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 12px; }
.th-hjrel-h { font-size: 13.5px; color: var(--tx2); margin-bottom: 8px; }
.th-hjrel-h .hj { font-size: 18px; color: var(--tx); }
.th-hjchip { border: 1px solid var(--line); background: var(--bg2); color: var(--tx); border-radius: 999px; padding: 5px 12px; margin: 0 6px 8px 0; font: inherit; font-size: 13.5px; cursor: pointer; }
.wsheet { max-height: 82vh; overflow-y: auto; }
.ws-top .tts-btn { width: 40px; height: 40px; }

/* 文法 */
.th-gcard { margin-bottom: 10px; }
.th-gcard .g-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 18px; cursor: pointer; font-family: inherit; }
.th-gcard .g-pattern { margin: 0; font-family: var(--thf); font-size: 15px; }
.th-g-mean { width: 100%; font-size: 13.5px; font-weight: 500; color: var(--tx2); }
.th-gcard.open { border-color: var(--ac); }
.th-gcard .g-body { border-top: 1px solid var(--line); padding-top: 14px; }
.th-form { background: var(--bg3); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.7; margin-bottom: 10px; }
.th-form b { display: inline-block; margin-right: 8px; color: var(--ac); font-size: 12px; }
.th-gp { font-size: 14px; line-height: 1.85; color: var(--tx); margin: 0 0 10px; }
.th-gcard .g-ex { color: var(--tx); font-size: 15px; line-height: 1.7; padding: 8px 0; margin: 0; border-bottom: 1px solid var(--line); }
.th-gcard .g-ex:last-child { border-bottom: 0; }
.th-gcard .g-ex em { font-style: normal; color: var(--ac); font-weight: 700; }
.th-gcard .g-ex .tts-btn { width: 28px; height: 28px; font-size: 12px; vertical-align: middle; }
.th-vs { font-size: 13px; color: var(--tx2); margin: 10px 0; }

/* 會話 */
.th-phlist { display: grid; gap: 10px; }
.th-phlist .ph-item { margin: 0; flex-direction: column; gap: 2px; }
.th-phlist .ph-main { display: flex; align-items: center; gap: 10px; width: 100%; }
.th-phlist .ph-main .tts-btn { margin-left: auto; width: 32px; height: 32px; font-size: 14px; }

/* 測驗 */
.th-qzans { font-size: 15px; line-height: 1.7; }
.th-qzans [lang="th"] { font-size: 20px; font-weight: 700; }
.qz .qhd { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx3); margin-bottom: 8px; }
.qz-big { text-align: center; margin-bottom: 18px; }
.qz-score { font-size: 40px; font-weight: 700; color: var(--ac); margin: 6px 0; }
.th-set-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--tx2); }
.th-set-row span { margin-right: 4px; }

/* 我的 */
.th-pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.th-pf-stats div { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 6px; text-align: center; }
.th-pf-stats b { display: block; font-size: 22px; }
.th-pf-stats span { font-size: 11px; color: var(--tx3); }
.th-hm { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; overflow-x: auto; }
.th-hm-c { width: 12px; height: 12px; border-radius: 3px; background: var(--bg3); }
.th-hm-c.l1 { background: color-mix(in srgb, var(--ac) 30%, var(--bg3)); }
.th-hm-c.l2 { background: color-mix(in srgb, var(--ac) 55%, var(--bg3)); }
.th-hm-c.l3 { background: color-mix(in srgb, var(--ac) 78%, var(--bg3)); }
.th-hm-c.l4 { background: var(--ac); }

/* 漢字詞 */
.th-hjintro p { font-size: 14px; line-height: 1.85; color: var(--tx2); margin: 6px 0 0; }
.th-hjintro .hj { color: var(--tx); font-weight: 700; }
.th-hjgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 6px; }
.th-hjcell { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 4px; cursor: pointer; font: inherit; color: var(--tx); }
.th-hjcell .hj { font-size: 26px; color: var(--tx); line-height: 1.2; }
.th-hjcell b { font-size: 15px; color: var(--ac); }
.th-hjcell small { font-size: 10.5px; color: var(--tx3); }
.th-hjhero { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 10px; font-size: 44px; font-weight: 700; }
.th-hjhero .hj { color: var(--tx); }
.th-hjhero [lang="th"] { color: var(--ac); }
.th-hj-big { font-size: 15px; }

/* 字母 */
.th-letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.th-letter { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.th-letter-big { font-size: 48px; line-height: 1; color: var(--ac); background: var(--ac-soft); border: 0; border-radius: 14px; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
div.th-letter-big { cursor: default; }
.th-letter-meta { font-size: 14px; }
.th-letter-tip { font-size: 13.5px; line-height: 1.75; color: var(--tx2); margin: 0; }
.th-exrow { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.th-exchip { border: 1px solid var(--line); background: var(--bg); color: var(--tx); border-radius: 10px; padding: 5px 10px; font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.th-exchip small { color: var(--tx3); }
.th-exchip em { font-style: normal; color: var(--tx2); font-size: 12.5px; }
.th-done-btn { width: 100%; padding: 13px; margin-bottom: 14px; }
.th-dbl { display: grid; gap: 0; }
.th-dbl-row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.th-dbl-row:last-child { border-bottom: 0; }
.th-dbl-row .th-exrow { grid-column: 2; border-top: 0; padding-top: 0; }
.th-dbl-c { font-size: 30px; color: var(--ac); grid-row: span 2; }
.th-parts { display: grid; gap: 10px; margin-top: 8px; }
.th-parts div { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.th-parts p { font-size: 13px; color: var(--tx2); margin: 4px 0 0; line-height: 1.7; }
.th-sylrow { display: flex; flex-wrap: wrap; gap: 8px; }
.th-sylex { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--tx); }
.th-syl { font-size: 32px; color: var(--ac); line-height: 1.2; }
.th-sylex small { font-size: 11.5px; color: var(--tx3); }
.th-hgopts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 10px; }
.th-hgopt { font-size: 34px; padding: 14px 0; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--tx); cursor: pointer; }
.th-hgopt.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.th-hgopt.ng { background: var(--ac2); border-color: var(--ac2); color: #fff; }

/* 發音規則 */
.th-rules { display: grid; gap: 10px; }
.th-rule { display: flex; align-items: center; gap: 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--tx); text-align: left; }
.th-rule-n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ac-soft); color: var(--ac); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.th-rule-tx { flex: 1; min-width: 0; }
.th-rule-tx b { display: block; font-size: 15.5px; }
.th-rule-tx small { display: block; font-size: 12.5px; color: var(--tx2); line-height: 1.6; margin-top: 2px; }
.th-sum { font-size: 15px; font-weight: 600; margin: 4px 0 10px; }
.th-pats { display: grid; gap: 8px; margin-top: 10px; }
.th-pat { background: var(--bg3); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.th-pat small { display: block; color: var(--tx3); margin-top: 4px; font-size: 12.5px; }
.th-prex { display: grid; }
.th-prex-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: var(--tx); cursor: pointer; text-align: left; }
.th-prex-row:last-child { border-bottom: 0; }
.th-prex-w { font-size: 18px; font-weight: 700; }
.th-prex-row .th-pr { font-size: 18px; }
.th-prex-row small { color: var(--tx3); font-size: 12.5px; }
.th-prex-row em { font-style: normal; color: var(--tx2); font-size: 13px; margin-left: auto; }
.th-prq { font-size: 34px; font-weight: 700; vertical-align: middle; }

/* 修正：StayTW 的 pa-found 是 div 結構，這裡用 span 要補 block */
.pa-found-t, .pa-found-d { display: block; }
.pa-found { margin: 0; }
.btn.primary { background: var(--ac); border-color: var(--ac); color: #fff; }
.btn.primary:disabled { opacity: .45; }
/* 答錯用紅色（主色改藍之後，原本 .ng 用 --ac 會看起來像「選中」） */
.qz-opt.ng { background: var(--ac2); border-color: var(--ac2); }
[data-theme="dark"] .btn.primary { color: #0E1A30; }

/* 做題：選取 → 送出 → 詳解 → 下一題 */
.qz-opt.sel, .th-hgopt.sel { border-color: var(--ac); background: var(--ac-soft); box-shadow: 0 0 0 1px var(--ac) inset; }
.th-submit { display: block; width: 100%; padding: 13px; margin-top: 14px; }
.qz-fb { text-align: left; margin-top: 16px; }
.qz-fb > b { display: block; font-size: 16px; margin-bottom: 8px; }
.qz-fb.ok > b { color: var(--ok); }
.qz-fb.ng > b { color: var(--ac2); }
.qz-fb.ng { border-color: var(--ac2); background: color-mix(in srgb, var(--ac2) 7%, var(--bg2)); }
.th-explain { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.7; }
.th-ex-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 16px; }
.th-ex-main [lang="th"] { font-size: 20px; font-weight: 700; }
.th-ex-main .tts-btn, .th-ex-eg .tts-btn, .th-ex-pick .tts-btn { width: 28px; height: 28px; font-size: 12px; vertical-align: middle; }
.th-ex-m { font-weight: 600; }
.th-ex-note { color: var(--tx2); border-top: 1px dashed var(--line); padding-top: 8px; }
.th-ex-eg { border-top: 1px dashed var(--line); padding-top: 8px; }
.th-ex-pick { background: color-mix(in srgb, var(--ac2) 8%, var(--bg)); border-radius: 10px; padding: 9px 11px; color: var(--tx); }
/* 錯題紀錄 */
.th-wblist { display: grid; gap: 12px; }
.th-wb { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.th-wb-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.th-wb-top .vcard-pos { margin-left: 0; }
.th-wb-n { font-size: 12px; color: var(--tx3); flex: 1; }
.th-wb-del { background: none; border: 0; color: var(--tx3); font-size: 15px; cursor: pointer; padding: 2px 6px; }
.th-wb-q { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.th-wb-row { font-size: 14px; padding: 3px 0; }
.th-wb-ng span { color: var(--ac2); font-weight: 600; }
.th-wb-ok span { color: var(--ok); font-weight: 600; }
.th-wb-exp { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.qz-fb .th-ex-main .th-pr, .th-wb-exp .th-ex-main .th-pr { color: var(--ok); }

/* 付費牆 */
.th-lock { width: 13px; height: 13px; vertical-align: -2px; }
.th-locked { opacity: .62; }
.th-hjcell.th-locked small { color: var(--tx3); }
.pw-quota.th-free { color: var(--ok); }
.btn.primary .th-lock { stroke: currentColor; }

/* 韓國文化 */
.th-culist { display: grid; gap: 10px; }
.th-cucard { display: flex; align-items: center; gap: 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--tx); text-align: left; }
.th-cu-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--ac-soft); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.th-cu-ic.big { width: 56px; height: 56px; font-size: 30px; }
.th-cu-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.th-cu-tx small { font-size: 11.5px; color: var(--ac); font-weight: 700; }
.th-cu-tx b { font-size: 15.5px; line-height: 1.45; }
.th-cu-tx em { font-style: normal; font-size: 12.5px; color: var(--tx2); line-height: 1.55; }
.th-cu-art { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 20px 18px; margin: 12px 0 14px; }
.th-cu-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.th-cu-head small { font-size: 12px; color: var(--ac); font-weight: 700; }
.th-cu-head h2 { font-size: 21px; line-height: 1.4; margin: 2px 0 0; }
.th-cu-p { font-size: 15px; line-height: 1.95; margin: 0 0 12px; }
.th-cu-sec { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; }
.th-cu-sec h3 { font-size: 17px; margin: 0 0 10px; }
.th-cu-kos { display: grid; gap: 8px; }
.th-cu-ko { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; cursor: pointer; }
.th-cu-ko [lang="th"] { font-size: 17px; font-weight: 700; }
.th-cu-ko .tts-btn, .th-cu-line .tts-btn { width: 28px; height: 28px; font-size: 12px; vertical-align: middle; }
.th-cu-m { font-size: 13.5px; color: var(--tx2); margin-top: 2px; }
.th-cu-note { font-size: 12.5px; color: var(--ac); margin-top: 5px; line-height: 1.6; }
.th-cu-dlg { display: grid; gap: 0; }
.th-cu-line { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.th-cu-line:last-child { border-bottom: 0; }
.th-cu-line.on { background: var(--ac-soft); }
.th-cu-s { font-size: 12.5px; font-weight: 700; color: var(--ac); padding-top: 3px; }
.th-cu-line [lang="th"] { font-size: 16px; }
.th-cu-voc { display: flex; flex-wrap: wrap; gap: 8px; }
.th-cu-tip { background: color-mix(in srgb, var(--ac) 7%, var(--bg)); border-radius: 12px; padding: 13px 15px; margin-top: 18px; font-size: 14px; line-height: 1.85; }
.th-cu-tip b { display: block; color: var(--ac); margin-bottom: 4px; }
.th-cu-q { font-size: 15.5px; font-weight: 600; line-height: 1.7; margin: 0 0 12px; }

/* 追星韓文 */
.th-cucard.th-on { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac) inset; }
.th-fc-pick { display: grid; gap: 8px; }
.th-fan-name { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.th-fan-name label { font-size: 12.5px; font-weight: 700; color: var(--tx2); }
.th-fan-name small { font-size: 12px; color: var(--tx3); }
.th-fan-name .search { max-width: none; }
.th-fan-tpl { display: grid; gap: 10px; background: var(--bg); border: 1px dashed var(--line); border-radius: 12px; padding: 14px; }
.th-fan-tpl [lang="th"] { font-size: 15.5px; }
.th-easy { font-size: 11px; color: var(--ok); border: 1px solid var(--ok); border-radius: 5px; padding: 0 5px; }
.th-fc-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.th-fc-head b { font-size: 17px; }
.th-fc-head small { color: var(--tx3); font-size: 12px; }
.th-fc-log { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 14px 2px; }
.th-bub { max-width: 86%; border-radius: 16px; padding: 10px 13px; font-size: 14.5px; line-height: 1.6; }
.th-bub.ai { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.th-bub.me { align-self: flex-end; background: var(--ac-soft); border: 1px solid color-mix(in srgb, var(--ac) 30%, var(--line)); border-bottom-right-radius: 4px; }
.th-bub [lang="th"] { font-size: 16px; }
.th-bub .tts-btn { width: 26px; height: 26px; font-size: 11px; vertical-align: middle; }
.th-typing { color: var(--tx3); letter-spacing: 3px; }
.th-fix { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--tx2); }
.th-fix [lang="th"] { color: var(--ok); font-weight: 700; font-size: 14px; }
.th-fc-hints { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.th-fc-hints small { width: 100%; color: var(--tx3); font-size: 12px; }
.th-fc-input { display: flex; gap: 8px; }
.th-fc-input .search { flex: 1; max-width: none; }
.th-fc-end { text-align: center; color: var(--tx2); font-size: 14px; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.th-ta { width: 100%; min-height: 130px; box-sizing: border-box; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--tx); font: inherit; font-size: 15px; line-height: 1.7; resize: vertical; }
.th-fx-g { padding: 10px 0; border-bottom: 1px solid var(--line); }
.th-fx-g:last-child { border-bottom: 0; }
.th-yt-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 12px 0; border-radius: 14px; overflow: hidden; background: #000; }
.th-yt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.th-yt-line { cursor: default; }
.th-yt-ctl { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.th-yt-score { font-weight: 700; font-size: 14px; }
.th-yt-score.ok { color: var(--ok); } .th-yt-score.mid { color: #B07A1F; } .th-yt-score.ng { color: var(--ac2); }

/* 闖關路線（sample） */
.th-path-try { width: 100%; padding: 13px; border-radius: 14px; border: 1px dashed var(--ac); background: var(--ac-soft); color: var(--ac); font: inherit; font-weight: 700; cursor: pointer; }
.th-path-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.th-path-top h2 { font-size: 30px; margin: 0; flex: 1; }
.th-seg { display: flex; background: var(--bg3); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.th-seg button { border: 0; background: none; color: var(--tx2); font: inherit; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.th-seg button.on { background: var(--bg2); color: var(--tx); box-shadow: var(--sh2); }
.th-path-hero { background: var(--bg2); border: 1px solid var(--line); border-radius: 22px; padding: 20px 20px 18px; margin-bottom: 22px; }
.th-path-hero-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; }
.th-path-hero-top span:first-child { color: var(--ac2); }
.th-path-hero-top span:last-child { color: var(--tx2); white-space: nowrap; }
.th-path-eg { font-family: var(--thf); font-size: 30px; font-weight: 700; line-height: 1.35; margin: 16px 0 6px; }
.th-path-eg em { font-style: normal; color: var(--ac2); }
.th-path-egm { color: var(--tx2); font-size: 15px; margin-bottom: 16px; }
.th-path-bar { display: block; height: 6px; border-radius: 999px; background: var(--bg3); overflow: hidden; margin-top: 8px; }
.th-path-bar i { display: block; height: 100%; background: var(--ac2); border-radius: 999px; transition: width .4s var(--ease); }
.th-path-bar.big { height: 8px; flex: 1; margin: 0; }
.th-path-sec { display: flex; align-items: center; gap: 12px; color: var(--tx3); font-size: 14px; font-weight: 700; margin: 6px 4px 12px; }
.th-path-sec i { flex: 1; height: 1px; background: var(--line); }
.th-path-units, .th-path-lessons { display: grid; gap: 10px; margin-bottom: 22px; }
.th-path-unit, .th-path-lesson { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--tx); }
.th-path-unit.cur { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac) inset; }
.th-path-num { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--tx2); }
.th-path-unit.cur .th-path-num { background: var(--ac); color: #fff; }
.th-path-ut { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.th-path-ut b { font-size: 16px; }
.th-path-ut small { font-size: 12.5px; color: var(--tx3); }
.th-path-cnt { flex: none; font-weight: 700; color: var(--ac2); font-size: 15px; }
.th-path-stars { flex: none; color: #E0A526; letter-spacing: 1px; }
.th-path-uhead { margin: 14px 2px 16px; }
.th-path-uhead small { color: var(--ac2); font-weight: 700; }
.th-path-uhead h2 { margin: 4px 0; font-size: 24px; }
.th-path-uhead p { color: var(--tx2); margin: 0; }
.th-lesson-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.th-lesson-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 20px; padding: 20px 18px; }
.th-lesson-k { color: var(--ac2); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; }
.th-lesson-pat { font-family: var(--thf); font-size: 30px; font-weight: 700; margin: 10px 0 4px; }
.th-lesson-g { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.th-lesson-egs { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 12px; }
.th-lesson-eg { padding: 12px 2px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 17px; }
.th-lesson-eg:last-child { border-bottom: 0; }
.th-lesson-eg em, .th-lesson-qk em { font-style: normal; color: var(--ac2); font-weight: 700; }
.th-lesson-eg .tts-btn { width: 28px; height: 28px; font-size: 12px; vertical-align: middle; }
.th-lesson-words { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.th-lesson-word { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.th-lesson-word [lang="th"] { font-size: 20px; font-weight: 700; }
.th-lesson-word .tts-btn { width: 26px; height: 26px; font-size: 11px; vertical-align: middle; }
.th-lesson-wm { font-size: 12.5px; }
.th-lesson-q { text-align: center; margin: 14px 0 18px; }
.th-lesson-qk { font-size: 22px; font-weight: 700; line-height: 1.5; margin-bottom: 6px; }
.th-lesson-qw { font-size: 38px; font-weight: 700; }
.th-blank { display: inline-block; min-width: 3em; border-bottom: 2px solid var(--ac2); color: var(--ac2); }
.th-lesson-stars { font-size: 44px; color: #E0A526; letter-spacing: 4px; }
.th-lesson-stars span { color: var(--line); }
@media (max-width: 420px) { .th-path-top h2 { font-size: 26px; } .th-seg button { padding: 7px 11px; font-size: 13px; } }
.th-path-home { margin-bottom: 0; }
.th-path-all { display: block; width: 100%; margin-top: 10px; background: none; border: 0; color: var(--tx2); font: inherit; font-size: 13.5px; cursor: pointer; }
/* 付費牆方案（2026-09-24 定價） */
.th-pw-plans { display: grid; grid-template-columns: 1fr; gap: 8px; }
.th-pw-plans .pw-plan { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; text-align: left; padding: 12px 14px; }
.th-pw-plans .pw-plan > span:not(.pw-tag) { font-size: 13.5px; font-weight: 700; }
.th-pw-plans .pw-plan b { grid-row: span 2; font-size: 20px; }
.th-pw-plans .pw-plan .pw-per { grid-column: 1; font-size: 12px; }
.th-pw-life { position: relative; }
.th-pw-life .pw-tag { position: absolute; top: -9px; right: 12px; }
.th-pw-was { grid-column: 2; font-size: 12.5px; color: var(--tx3); text-align: right; }
.th-pw-timer { color: #D08A10 !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.th-pm { font-size: 10px; font-weight: 700; color: var(--ac); border: 1px solid var(--ac); border-radius: 5px; padding: 0 4px; margin-left: 3px; vertical-align: 1px; }

/* 模擬考 */
.th-exparts { display: grid; gap: 0; margin-top: 6px; }
.th-expart { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.th-expart b { font-size: 15px; } .th-expart small { display: block; color: var(--tx3); font-size: 12px; }
.th-expart-btns { display: flex; gap: 8px; }
.th-exhist { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.th-exhist:last-child { border-bottom: 0; } .th-exhist span { flex: 1; } .th-exhist small { color: var(--tx3); }
.th-exhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 13.5px; color: var(--tx2); }
.th-exhead span:nth-child(2) { flex: 1; font-weight: 700; color: var(--tx); }
.th-extimer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ac); font-size: 16px; }
.th-extimer.warn { color: var(--ac2); }
.th-exq-ins { font-size: 14px; color: var(--tx2); margin: 8px 0 12px; line-height: 1.7; }
.th-expassage { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 16px; line-height: 1.95; margin-bottom: 12px; }
.th-expassage u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.th-exq-q { font-weight: 700; font-size: 15.5px; margin: 0 0 12px; }
.th-exn { color: var(--tx3); margin-right: 4px; }
.th-exnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.th-exgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; margin-bottom: 4px; }
.th-exgrid button { height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--tx2); font: inherit; font-size: 13px; cursor: pointer; }
.th-exgrid button.done { background: var(--ac-soft); color: var(--ac); border-color: var(--ac); }
.th-exgrid button.cur { box-shadow: 0 0 0 2px var(--ac) inset; font-weight: 700; }
.th-exscore { font-size: 54px; font-weight: 800; color: var(--ac); margin: 8px 0; }
.th-exscore small { font-size: 18px; color: var(--tx3); }
.th-extype { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.th-extype .th-path-bar { margin: 0; }
.th-exrev { border-top: 1px solid var(--line); padding: 10px 0; }
.th-exrev summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; font-weight: 700; }
.th-exrev summary small { color: var(--tx3); font-weight: 500; }
.th-exrev.ok summary span { color: var(--ok); } .th-exrev.ng summary span { color: var(--ac2); }
.th-exrev-opts { display: grid; gap: 4px; margin: 8px 0; font-size: 14.5px; }
.th-exrev-opts .ok { color: var(--ok); font-weight: 700; } .th-exrev-opts .ng { color: var(--ac2); text-decoration: line-through; }

.th-wait{color:var(--tx3);font-size:14px}

.th-hg-intro summary{cursor:pointer;font-weight:700;list-style:none}.th-hg-intro summary::-webkit-details-marker{display:none}.th-hg-intro summary::after{content:" ▾";color:var(--tx3)}.th-hg-intro[open] summary::after{content:" ▴"}
select.th-goalset{padding:4px 8px;font-size:13px;border-radius:999px}

/* ── 練習中心（2026-10-05）── */
.th-prac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.th-prac-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; border: 1px solid var(--bd); background: var(--bg2); border-radius: 14px; padding: 16px; cursor: pointer; font: inherit; color: var(--tx); }
.th-prac-card:active { transform: translateY(1px); }
.th-prac-ic { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.th-prac-t { font-weight: 700; font-size: 16px; }
.th-prac-d { font-size: 13px; color: var(--tx2); line-height: 1.6; }
.th-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--tx); font: inherit; font-size: 17px; margin-top: 8px; }
.th-input:focus { outline: 2px solid var(--ac); outline-offset: -1px; }
.th-input:disabled { opacity: .7; }
.th-slowplay { margin-left: 8px; }
/* 排列句子 */
.th-order-hint { font-size: 18px; font-weight: 700; line-height: 1.6; }
.th-order-src { color: var(--tx3); font-size: 13px; margin-top: 6px; }
.th-order-ans { min-height: 56px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border: 1px dashed var(--bd); border-radius: 12px; background: var(--bg); margin-bottom: 12px; }
.th-order-ph { color: var(--tx3); font-size: 13.5px; }
.th-order-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 44px; }
.th-chip { border: 1px solid var(--bd); background: var(--bg2); color: var(--tx); border-radius: 10px; padding: 9px 14px; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.th-chip.on { background: color-mix(in srgb, var(--ac) 10%, var(--bg)); border-color: var(--ac); }
.th-chip.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.th-chip.ng { background: var(--ac2); border-color: var(--ac2); color: #fff; }
.th-chip.ghost { visibility: hidden; padding: 9px 14px; }
.th-chip:disabled { cursor: default; }
.th-prac-wrong { display: flex; flex-direction: column; gap: 8px; text-align: left; max-width: 520px; margin: 0 auto; }
.th-prac-wl { border-bottom: 1px solid var(--line); padding: 8px 2px; font-size: 16px; }
.th-prac-wl small { color: var(--tx2); font-size: 13px; }
/* 聽寫比對 */
.th-dict-diff { display: flex; flex-direction: column; gap: 6px; font-size: 18px; letter-spacing: .5px; }
.th-dict-diff small { display: inline-block; width: 52px; color: var(--tx3); font-size: 12px; letter-spacing: 0; }
.th-dict-diff .ok { color: var(--ok); }
.th-dict-diff .miss { color: var(--ac2); text-decoration: underline; text-underline-offset: 3px; }
.th-dict-diff .extra { color: var(--ac2); text-decoration: line-through; opacity: .7; }
/* 打字 */
.th-type-target { font-size: 30px; font-weight: 700; letter-spacing: 1px; line-height: 1.5; word-break: keep-all; }
.th-type-target span.ok { color: var(--ok); }
.th-type-target span.cur { text-decoration: underline; text-decoration-color: var(--ac); text-underline-offset: 6px; }
.th-type-target span.ng { color: var(--ac2); text-decoration: underline; text-decoration-color: var(--ac2); text-underline-offset: 6px; }
.th-type-m { color: var(--tx2); font-size: 14px; }
.th-type-stat { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--tx2); margin: 10px 2px 8px; }
.th-type-stat b { color: var(--tx); font-size: 15px; }
.th-kbd { display: flex; flex-direction: column; gap: 5px; align-items: center; margin: 6px 0 10px; user-select: none; }
.th-kbd-row { display: flex; gap: 4px; }
.th-kbd-k { position: relative; width: 32px; height: 40px; border: 1px solid var(--bd); border-radius: 6px; background: var(--bg2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: var(--tx); }
.th-kbd-k b { font-weight: 600; }
.th-kbd-k small { font-size: 9px; color: var(--tx3); margin-top: 2px; text-transform: uppercase; }
.th-kbd-k i { position: absolute; top: 2px; right: 3px; font-style: normal; font-size: 9px; color: var(--tx3); }
.th-kbd-k.wide { width: 48px; font-size: 14px; }
.th-kbd-k.space { width: 200px; font-size: 11px; color: var(--tx3); }
.th-kbd-k.hot { background: var(--ac); border-color: var(--ac); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 25%, transparent); }
.th-kbd-k.hot small, .th-kbd-k.hot i { color: #fff; }
@media (max-width: 420px) { .th-kbd-k { width: 28px; height: 36px; font-size: 13px; } .th-kbd-k.wide { width: 40px; } .th-kbd-k.space { width: 160px; } }
/* 寫作 */
.th-wr-list { display: flex; flex-direction: column; margin-top: 10px; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
.th-wr-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--line); background: var(--bg2); color: var(--tx); font: inherit; cursor: pointer; }
.th-wr-item:last-child { border-bottom: 0; }
.th-wr-t { font-weight: 600; font-size: 15px; }
.th-wr-s { color: var(--tx3); font-size: 12.5px; white-space: nowrap; }
.th-wr-prompt { margin-top: 12px; }
.th-wr-ko { font-size: 16px; line-height: 1.9; white-space: normal; word-break: keep-all; }
.th-wr-hints { margin-top: 10px; font-size: 14px; }
.th-wr-hints summary, .th-wr-model summary { cursor: pointer; color: var(--ac); font-weight: 600; }
.th-wr-hints ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.8; color: var(--tx2); }
.th-wr-lab { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.th-wr-lab span { font-weight: 700; font-size: 18px; width: 28px; }
.th-wr-lab .th-input { margin-top: 0; }
.th-wr-ta { min-height: 220px; margin-top: 10px; font-size: 16px; }
.th-wr-count { text-align: right; font-size: 13px; color: var(--tx3); margin: 6px 2px 0; }
.th-wr-count .ok { color: var(--ok); font-weight: 700; }
.th-wr-count .over { color: var(--ac2); font-weight: 700; }
.th-wr-model { margin-top: 14px; font-size: 14px; }
.th-wr-model div { margin-top: 8px; line-height: 1.9; font-size: 15px; }
.th-wr-res { margin-top: 18px; }
.th-wr-score { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--bd); }
.th-wr-score b { font-size: 38px; line-height: 1; }
.th-wr-score span { color: var(--tx2); }
.th-wr-score p { flex-basis: 100%; margin: 6px 0 0; font-size: 14px; line-height: 1.7; color: var(--tx2); }
.th-wr-score.hi b { color: var(--ok); } .th-wr-score.mid b { color: var(--ac); } .th-wr-score.lo b { color: var(--ac2); }
.th-wr-fix { border-bottom: 1px solid var(--line); padding: 10px 0; }
.th-wr-fix:last-child { border-bottom: 0; }
.th-wr-fix-row { font-size: 16px; line-height: 1.8; }
.th-wr-fix-row s { color: var(--ac2); opacity: .85; }
.th-wr-fix-row b { color: var(--ok); }
.th-wr-ul { margin: 0; padding-left: 20px; line-height: 1.9; font-size: 14.5px; }
/* 敬語轉換 */
.th-hn-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 12px 0 14px; }
.th-hn-lv { border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; background: var(--bg2); }
.th-hn-lv b { font-size: 17px; }
.th-hn-n { margin-left: 6px; font-size: 12.5px; color: var(--ac); font-weight: 600; }
.th-hn-lv p { margin: 6px 0 8px; font-size: 13px; color: var(--tx2); line-height: 1.7; }
.th-hn-ex { font-size: 15px; }
.th-hn-samples { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.th-hn-card { border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; margin-top: 12px; background: var(--bg2); }
.th-hn-src { font-size: 16px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.th-hn-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.th-hn-row:last-of-type { border-bottom: 0; }
.th-hn-row em { font-style: normal; font-size: 12px; color: var(--ac); font-weight: 700; width: 64px; flex: none; }
/* 週報 */
.th-wk-bars { display: flex; gap: 6px; align-items: flex-end; height: 90px; margin: 10px 0 4px; }
.th-wk-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.th-wk-col span { font-size: 11px; color: var(--tx3); }
.th-wk-col.today span { color: var(--ac); font-weight: 700; }
.th-wk-b { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.th-wk-b i { display: block; width: 40%; border-radius: 3px 3px 0 0; min-height: 2px; }
.th-wk-b i.prev { background: var(--bd); }
.th-wk-b i.cur { background: var(--ac); }
.th-wk-legend { font-size: 11.5px; color: var(--tx3); display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.th-wk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.th-wk-legend i.cur { background: var(--ac); } .th-wk-legend i.prev { background: var(--bd); }
.th-wk-rows { display: flex; flex-direction: column; }
.th-wk-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.th-wk-row:last-child { border-bottom: 0; }
.th-wk-row span { flex: 1; color: var(--tx2); }
.th-wk-row b { font-size: 16px; min-width: 36px; text-align: right; }
.th-wk-row i { font-style: normal; font-size: 12px; min-width: 64px; text-align: right; color: var(--tx3); }
.th-wk-row i.up { color: var(--ok); } .th-wk-row i.dn { color: var(--ac2); }
.th-wk-adv { margin-top: 12px; background: color-mix(in srgb, var(--ac) 7%, var(--bg)); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.th-wk-adv b { display: block; color: var(--ac); margin-bottom: 4px; }
.th-wk-adv ul { margin: 0; padding-left: 18px; line-height: 1.8; color: var(--tx2); }
.th-wk-mini { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1px solid var(--bd); background: var(--bg2); border-radius: 14px; padding: 12px 16px; margin: 12px 0; font: inherit; color: var(--tx); cursor: pointer; font-size: 13.5px; flex-wrap: wrap; }
.th-wk-mini b { font-size: 17px; margin-right: 2px; }
.th-wk-mini i { font-style: normal; font-size: 12px; color: var(--tx3); } .th-wk-mini i.up { color: var(--ok); } .th-wk-mini i.dn { color: var(--ac2); }
.th-wk-mini-t { font-weight: 700; color: var(--ac); }
.th-wk-mini-go { margin-left: auto; color: var(--tx3); font-size: 12.5px; }

/* ── 語音辨識：錄音中狀態、跟讀講評（2026-10-06）── */
.th-mic.rec, .btn.th-mic.rec { background: var(--ac2); border-color: var(--ac2); color: #fff; animation: th-pulse 1s ease-in-out infinite; }
@keyframes th-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac2) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
.th-yt-line.rec { border-color: var(--ac2); }
.th-yt-live { color: var(--ac2); min-height: 1.4em; }
.th-yt-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.th-yt-fb { margin-top: 8px; font-size: 13.5px; }
.th-yt-fbbox { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.th-yt-issue { border-left: 3px solid var(--ac); padding: 4px 10px; font-size: 14px; }
.th-yt-issue b { font-size: 17px; }
.th-yt-issue small { color: var(--tx3); }
.th-yt-drill { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.th-yt-drill small { color: var(--tx3); }
.th-cu-m .ok { color: var(--ok); } .th-cu-m .miss { color: var(--ac2); text-decoration: underline; text-underline-offset: 3px; } .th-cu-m .extra { color: var(--ac2); text-decoration: line-through; opacity: .7; }

/* ── AI 簽售會改版（2026-10-06）── */
.th-fc-snd { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 12.5px; color: var(--ac); font-weight: 600; margin: -4px 0 12px; }
.th-fc-snd-btn { margin-left: auto; padding-left: 10px; padding-right: 10px; }
.th-fc-quota { font-size: 13px; color: var(--tx2); margin: 6px 0 4px; min-height: 1em; }
.th-fc-quota b { color: var(--ac); }
.th-fc-toko { margin-top: 8px; }
.th-fc-toko .th-exchip { width: 100%; text-align: center; padding: 9px 12px; }
.th-fc-hints .th-hint-wrap { display: inline-flex; align-items: center; gap: 2px; margin: 2px 4px 2px 0; }
.th-fc-noleft { background: color-mix(in srgb, var(--ac) 7%, var(--bg)); border-radius: 12px; padding: 12px; }
.th-fc-reviewing { text-align: center; color: var(--tx2); padding: 20px 0; }
.th-fc-review { margin-top: 10px; }
.th-fc-rvhead { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.th-fc-rvhead b { display: block; font-size: 17px; }
.th-fc-rvhead small { color: var(--tx3); font-size: 12.5px; }
.th-fc-ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 700; flex: none; }
.th-fc-ring.hi, .th-fc-dot.hi { background: var(--ok); } .th-fc-ring.mid, .th-fc-dot.mid { background: #C98A00; } .th-fc-ring.lo, .th-fc-dot.lo { background: var(--ac2); }
.th-fc-dot { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-style: normal; font-size: 12.5px; font-weight: 700; margin-right: 8px; vertical-align: middle; }
.th-fc-rv { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.75; }
.th-fc-rv span { display: block; font-size: 12px; color: var(--ac); font-weight: 700; margin-bottom: 2px; }
.th-fc-enc { margin-top: 10px; background: color-mix(in srgb, var(--ac) 7%, var(--bg)); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.th-fc-rvbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.th-fc-head small { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-fc-head .btn { white-space: nowrap; flex: none; }

/* ── YouTube 跟讀（精選片單＋播放器，照 StayTW ytshadow 移植 2026-10-06）── */
.yts-lead{font-size:13.5px;color:var(--tx2);line-height:1.65;margin:0 0 14px}
.yts-cats{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:13px;-webkit-overflow-scrolling:touch}
.yts-cat{flex:0 0 auto;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:inherit;font-size:12.5px;color:var(--tx2);cursor:pointer}
.yts-cat.on{background:var(--ac);border-color:var(--ac);color:#fff}
.yts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.yts-card{position:relative;display:block;background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:0;cursor:pointer;font:inherit;text-align:left;color:var(--tx)}
.yts-card:active{transform:scale(.985)}
.yts-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--line)}
.yts-ct{padding:9px 11px 11px}
.yts-ct b{display:block;font-size:13.5px;font-weight:700;line-height:1.4}
.yts-ct span{display:block;font-size:11.5px;color:var(--tx3);margin-top:3px}
.yts-ct em{display:inline-block;font-style:normal;font-size:11px;color:var(--ac);margin-top:5px}
.yts-card.locked img{opacity:.42;filter:grayscale(.5)}
.yts-card.locked .yts-ct b{color:var(--tx2)}
.yts-lock,.yts-free{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;line-height:1}
.yts-lock{background:rgba(0,0,0,.62);color:#fff}
.yts-free{background:var(--ok);color:#fff}
.yts-own{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.yts-own summary{font-size:13.5px;color:var(--tx2);cursor:pointer;font-weight:600}
.yts-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.yts-back{background:none;border:0;font:inherit;font-size:16px;font-weight:700;color:var(--ac);cursor:pointer;padding:10px 0;min-height:44px;flex:0 0 auto}
.yts-title{font-size:13px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yts-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.yts-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yts-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:13px 0 4px}
@media(max-width:400px){.yts-modes{grid-template-columns:repeat(2,1fr)}}
.yts-mode{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 3px;font:inherit;font-size:12.5px;color:var(--tx2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yts-mode.on{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:700}
.yts-prog{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin:14px 0 7px}
.yts-prog i{display:block;height:100%;background:var(--ac)}
.yts-count{font-size:11.5px;color:var(--tx3);text-align:center;margin-bottom:9px;font-variant-numeric:tabular-nums}
.yts-ctrl{display:flex;gap:7px;align-items:stretch;margin-bottom:14px}
.yts-c{flex:0 0 auto;min-width:44px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:10px 8px;font:inherit;font-size:14px;color:var(--tx);cursor:pointer}
.yts-c.wide{flex:1}
.yts-i{width:17px;height:17px;vertical-align:-3px;margin-right:5px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.yts-c:not(.wide) .yts-i{margin-right:0}
.yts-c.on{background:var(--ac);border-color:var(--ac);color:#fff}
.yts-c:active{transform:translateY(1px)}
.yts-sent{font-size:21px;line-height:2;text-align:center;padding:16px 10px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;min-height:64px;word-break:keep-all}
.yts-sent.yts-blur{filter:blur(7px);user-select:none}
.yts-w{background:none;border:0;padding:0 1px;font:inherit;color:inherit;cursor:pointer;border-radius:4px}
.yts-w.has{border-bottom:2px dotted var(--ac)}
.yts-w:active{background:color-mix(in srgb,var(--ac) 15%,transparent)}
.yts-tr{font-size:13.5px;color:var(--tx2);text-align:center;margin-top:8px;line-height:1.7}
.yts-dictwrap{display:flex;gap:8px;margin-bottom:11px}
.yts-in{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);color:var(--tx);font:inherit;font-size:16px}
.yts-chk{flex:0 0 auto;padding:10px 16px}
.yts-how{font-size:12.5px;color:var(--tx2);text-align:center;margin-top:14px;line-height:1.6}
.yts-mic-wrap{text-align:center;margin-top:12px}
.yts-mic{width:100%;max-width:340px;min-height:52px;border-radius:14px;background:var(--ac);border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;color:#fff;font:inherit;font-size:15px;font-weight:700;padding:12px 18px}
.yts-mic.rec{background:var(--ac2);animation:th-pulse 1.1s infinite}
.yts-status{font-size:12.5px;color:var(--ac);margin-top:9px;min-height:18px}
.yts-res{margin-top:15px;padding:16px;border:1px solid var(--line);border-radius:14px;text-align:center;background:var(--bg2)}
.yts-res.ok{border-color:var(--ok)}
.yts-score{font-family:var(--serif);font-size:38px;line-height:1;color:var(--ac2)}
.yts-res.ok .yts-score{color:var(--ok)}
.yts-score span{font-size:16px;margin-left:2px}
.yts-marked{font-size:19px;line-height:1.9;margin:11px 0 6px}
.yts-miss{text-decoration:underline;text-decoration-color:var(--ac2);text-decoration-thickness:2px;text-underline-offset:4px}
.yts-said{font-size:12.5px;color:var(--tx3);margin-bottom:13px;word-break:break-all}
.yts-res .btn{margin:0 4px}
.yts-qz-start{text-align:center;padding:26px 16px}
.yts-qz-t{font-size:17px;font-weight:700;color:var(--tx)}
.yts-qz-sub{font-size:13.5px;color:var(--tx2);line-height:1.9;margin:8px auto 18px;max-width:30em}
.yts-qz-score{font-size:34px;font-weight:800;color:var(--ac);letter-spacing:-.02em}
.yts-qz-head{display:flex;justify-content:space-between;font-size:12.5px;color:var(--tx3);margin-top:14px}
.yts-qz-q{font-size:15px;font-weight:700;color:var(--tx);margin:16px 0 4px;text-align:center}
.yts-qz-line{font-size:21px;line-height:1.9;text-align:center;margin:10px 0 2px;color:var(--tx);word-break:keep-all}
.yts-qz-bk{display:inline-block;min-width:2.2em;border-bottom:2px solid var(--ac);color:var(--ac);font-weight:700}
.yts-qz-play{text-align:center;margin:10px 0 4px}
.yts-qz-opts{display:grid;gap:10px;margin:16px 0 4px}
.yts-qz-opt{padding:14px 16px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2);color:var(--tx);font-size:15.5px;line-height:1.6;text-align:left;cursor:pointer;font-family:inherit}
.yts-qz-opt.sel{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,var(--bg))}
.yts-qz-opt.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--bg));font-weight:700}
.yts-qz-opt.ng{border-color:var(--ac2);background:color-mix(in srgb,var(--ac2) 10%,var(--bg))}
.yts-qz-opt:disabled{cursor:default;opacity:1}
.yts-qz-ex{margin-top:16px;padding:16px;border-radius:14px;border:1px solid var(--bd);background:var(--bg2)}
.yts-qz-ex.ok{border-color:var(--ok)}
.yts-qz-verdict{font-weight:700;font-size:15px;color:var(--ac2)}
.yts-qz-ex.ok .yts-qz-verdict{color:var(--ok)}
.yts-qz-full{font-size:19px;line-height:2.2;margin:12px 0 2px;color:var(--tx);word-break:keep-all}
.yts-qz-why{font-size:12.5px;color:var(--tx2);line-height:1.9;margin-top:6px}
.yts-qz-act{display:flex;gap:10px;margin-top:14px}
.yts-qz-act .btn{flex:1}
.yts-qz-rvs{margin-top:22px;border-top:1px solid var(--line)}
.yts-qz-rv{padding:14px 2px;border-bottom:1px solid var(--line)}
.yts-qz-rvh{font-size:12px;color:var(--tx3);letter-spacing:.04em}
.yts-qz-mine{color:var(--ac2);font-size:14px;margin-top:4px}
.yts-qz-corr{color:var(--ok);font-size:14px;margin-top:2px;font-weight:600}
.yts-qz-sent{font-size:13.5px;color:var(--tx2);margin-top:4px;line-height:1.8}
.yts-load,.yts-empty{text-align:center;color:var(--tx2);padding:26px 10px;font-size:14px;line-height:1.8}
.lv-info{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);font-weight:700;cursor:pointer;align-self:center;margin-left:4px;font-size:14px}
.th-lvinfo{display:flex;flex-direction:column;margin-top:8px}
.th-lvinfo div{display:grid;grid-template-columns:auto 64px 1fr;white-space:normal;gap:8px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.6}
.th-lvinfo div:last-child{border-bottom:0}
.th-lvinfo b{white-space:nowrap}.th-lvinfo small{color:var(--ac);font-weight:600;font-size:12px}

/* ── 插圖（illos.js）與線條圖示（icons.js）2026-10-06 ── */
:root{--il-ink:#3B3A3E;--il-ink2:#5A575E;--il-paper:#FFFFFF;--il-cream:#F4EFE3;--il-line:#DDD5C0;--il-red:#C7452F;--il-blue:#2B5BA8;--il-amber:#E2A53A;--il-green:#4F8A5C;--il-blush:#EFA49B;--il-tea:#C9A27A}
:root[data-theme="dark"]{--il-ink:#D9D3C7;--il-ink2:#A7A196;--il-paper:#2B292B;--il-cream:#242224;--il-line:#3B3733;--il-red:#E4715F;--il-blue:#7FA5D8;--il-amber:#D3A257;--il-green:#7FA886;--il-blush:#D08C84;--il-tea:#B08C68}
.th-il{display:block;width:100%;max-width:220px;height:auto;margin:0 auto}
.th-il.sm{max-width:150px}
.th-il-head{text-align:center;margin:4px 0 10px}
.th-big-ic{color:var(--ac);display:flex;justify-content:center}
.th-big-ic img{display:block}
.th-prac-ic{color:var(--ac)}
.th-cu-ic svg{color:var(--ac)}
.pa-up-ic img{width:30px;height:30px;display:block}
.ti svg,.bi svg{width:1.15em;height:1.15em}
.th-cu-note svg,.ph-note svg{color:var(--il-amber);vertical-align:-.18em}
.hb-fire svg{color:#E2703A}
.th-tiger{display:block;object-fit:contain;margin:0 auto;height:auto}
.th-tiger-fb{display:inline-block;width:46px;height:46px;vertical-align:middle;margin:-8px 6px -8px 0}
.th-scene{display:block;object-fit:contain;height:auto}
.th-cu-ic .th-scene{width:100%;height:100%;object-fit:contain}
.th-ph-scene{display:flex;align-items:center;gap:12px;margin:4px 0 12px}
.th-ph-scene b{font-size:17px}
img.th-mascot{width:56px;height:56px;object-fit:contain}
.hb-goal-top{display:flex;align-items:center;gap:10px}
.hb-goal-top>span:first-child{white-space:nowrap}
.hb-goal-top .th-goalset{width:auto;flex:none;min-width:64px;padding:4px 26px 4px 10px;margin-left:auto}
.hb-goal-top .hb-goal-n{white-space:nowrap}
.th-hjintro>.th-scene,.th-hjintro>.th-tiger{margin:0 auto 8px}

/* ── 首頁問候卡 v2（2026-10-06 Mia：舊版不好看）── */
.th-greet{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 10%,var(--bg2)),var(--bg2) 70%);border:1px solid var(--line);border-radius:20px;padding:16px 18px;margin-bottom:14px}
.th-greet-tg{flex:none;width:76px;display:flex;justify-content:center}
.th-greet-tg .th-tiger{width:76px!important;height:76px!important;margin:0;animation:thBob 3.2s ease-in-out infinite}
@keyframes thBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.th-greet-tg .th-tiger{animation:none}}
.th-greet-tx{flex:1;min-width:0}
.th-greet-hi{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1.25;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.th-greet-fire{font-family:inherit;font-size:12px;font-weight:700;color:#C2410C;background:color-mix(in srgb,#F97316 14%,var(--bg));border-radius:999px;padding:3px 9px;display:inline-flex;align-items:center;gap:3px}
.th-greet-ko{font-size:13px;color:var(--tx3);margin-top:2px}
.th-greet-motto{font-size:13.5px;color:var(--tx2);margin-top:6px;line-height:1.55}
.th-greet-goal{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.th-ring{position:relative;width:74px;height:74px}
.th-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.th-ring circle{fill:none;stroke:var(--line);stroke-width:7}
.th-ring .th-ring-v{stroke:var(--ac);stroke-linecap:round;stroke-dasharray:calc(var(--p) * 1) 100;transition:stroke-dasharray .6s}
.th-ring.done .th-ring-v{stroke:var(--ok)}
.th-ring span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.th-ring b{font-size:20px}
.th-ring small{font-size:11px;color:var(--tx3)}
.th-greet-set{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--tx3)}
.th-greet-set select{font:inherit;font-size:12px;font-weight:700;color:var(--tx2);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 6px;cursor:pointer}
@media (max-width:420px){.th-greet{padding:14px;gap:10px}.th-greet-tg,.th-greet-tg .th-tiger{width:60px!important;height:60px!important}.th-greet-hi{font-size:19px}.th-ring{width:64px;height:64px}.th-greet-motto{font-size:12.5px}}

/* ── 闖關：今日關卡卡片＋地圖節點（照 StayJP pq-*，2026-10-06）── */
.pq-card{background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:16px 18px;margin-bottom:14px}
.pq-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.pq-lv{background:none;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:700;color:var(--ac);cursor:pointer;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pq-today{flex:none;font-size:12px;font-weight:700;color:var(--tx2);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px;display:inline-flex;align-items:center;gap:3px}
.pq-today.ok{color:var(--ok);border-color:var(--ok)}
.pq-today svg{color:#E2703A}
.pq-head{font-size:19px;font-weight:900;line-height:1.35}
.pq-sub{font-size:13px;color:var(--tx2);margin-top:4px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pq-meta{color:var(--tx3)}
.pq-track{display:flex;align-items:flex-end;gap:10px;margin:14px 0 4px;min-height:96px}
.pq-path{flex:1;min-width:0;display:flex;align-items:flex-start;justify-content:center;padding-top:6px}
.pq-link{flex:1 1 18px;max-width:52px;min-width:12px;height:6px;border-radius:999px;background:var(--line);margin-top:27px;align-self:flex-start}
.pq-link.done{background:var(--ok)}
.pq-node{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;font:inherit;color:var(--tx);background:none;border:0;padding:0;cursor:pointer;min-width:52px;-webkit-tap-highlight-color:transparent}
.pq-dot{position:relative;width:46px;height:46px;margin-top:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;color:#fff;background:var(--ac);box-shadow:0 4px 0 color-mix(in srgb,var(--ac) 60%,#000);transition:transform .15s}
.pq-node:active .pq-dot{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--ac) 60%,#000)}
.pq-dot svg{width:22px!important;height:22px!important;stroke-width:3}
.pq-node.done .pq-dot{background:var(--ok);box-shadow:0 4px 0 color-mix(in srgb,var(--ok) 60%,#000)}
.pq-node.todo .pq-dot,.pq-node.open .pq-dot{background:var(--bg3,var(--line));color:var(--tx3);box-shadow:0 4px 0 var(--bd)}
.pq-node.open .pq-dot{background:var(--bg);border:2px solid var(--ac);color:var(--ac)}
.pq-node.extra .pq-dot{background:var(--bg);color:var(--tx3);border:2px dashed var(--bd);box-shadow:none}
.pq-node.cur .pq-dot{width:60px;height:60px;margin-top:0;font-size:22px}
.pq-node.cur .pq-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:3px solid color-mix(in srgb,var(--ac) 45%,transparent);animation:pqPulse 1.8s ease-out infinite}
@keyframes pqPulse{0%{transform:scale(.92);opacity:1}100%{transform:scale(1.25);opacity:0}}
.pq-lbl{font-size:11.5px;font-weight:700;color:var(--tx2);white-space:nowrap}
.pq-node.cur .pq-lbl{color:var(--ac);font-weight:900}
.pq-stars{display:flex;gap:1px;line-height:1}
.pq-stars i svg{width:12px!important;height:12px!important;color:var(--bd)}
.pq-stars i.on svg{color:#F5B301;fill:#F5B301}
.pq-mascot{flex:none;width:72px!important;height:72px!important;margin:0!important;align-self:flex-end;animation:thBob 3.2s ease-in-out infinite}
.pq-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:15px 14px;font:inherit;font-size:16.5px;font-weight:800;color:#fff;background:var(--ac);border:0;border-radius:14px;cursor:pointer;box-shadow:0 4px 0 color-mix(in srgb,var(--ac) 60%,#000)}
.pq-go:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--ac) 60%,#000)}
.pq-go.sub{background:var(--bg);color:var(--tx);border:1px solid var(--bd);box-shadow:0 3px 0 var(--bd);font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.pq-foot{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--tx3)}
.pq-minibar{flex:1;height:4px;border-radius:999px;background:var(--line);overflow:hidden}
.pq-minibar b{display:block;height:100%;background:var(--ac);border-radius:999px}
.pq-link-btn{flex:none;background:none;border:0;font:inherit;font-size:12px;font-weight:700;color:var(--ac);cursor:pointer;padding:0}
.pm-unit{margin:6px 0 18px}
.pm-banner{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;background:color-mix(in srgb,var(--ac) 9%,var(--bg2));border:1px solid var(--line);border-radius:14px;padding:11px 14px;margin-bottom:10px}
.pm-banner.clear{background:color-mix(in srgb,var(--ok) 10%,var(--bg2))}
.pm-banner b{font-size:15.5px}.pm-banner small{grid-column:1;font-size:12px;color:var(--tx2)}.pm-banner span{grid-row:1/3;grid-column:2;font-size:13px;font-weight:800;color:var(--ac)}
.pm-nodes{display:flex;flex-direction:column;gap:6px;position:relative}
.pm-row{display:flex;align-items:center;gap:12px;min-height:74px}
.pm-row .pq-node{min-width:62px}
.pm-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.pm-tx b{font-size:15px}.pm-tx small{font-size:12px;color:var(--tx3);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pm-tx.cur b{color:var(--ac)}
.pm-tiger{width:58px!important;height:58px!important;margin:0 0 0 auto!important;flex:none;animation:thBob 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.pq-node.cur .pq-dot::after,.pq-mascot,.pm-tiger{animation:none}}

/* ── 文章封面（2026-10-06）── */
.th-cover{display:block;overflow:hidden;border-radius:12px;background:color-mix(in srgb,var(--ac) 8%,var(--bg2));aspect-ratio:16/10}
.th-cover img{width:100%;height:100%;object-fit:cover;display:block}
.th-cover-scene{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#E3F3EF,#FBE9D7);color:var(--ac)}
[data-theme="dark"] .th-cover-scene{background:linear-gradient(135deg,#1C3A35,#3A2D20)}
.th-cover-scene .th-scene{width:62%!important;height:auto!important}
.th-cover.sm{flex:none;width:104px;aspect-ratio:16/11}
.th-cover.hero{width:100%;aspect-ratio:16/8;border-radius:16px;margin-bottom:14px}
.th-cover.hero.th-cover-scene .th-scene{width:34%!important}
.th-cucard .th-cover.sm{margin-right:2px}
.th-sec-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.th-cu-strip{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.th-cu-tile{position:relative;flex:0 0 200px;scroll-snap-align:start;display:flex;flex-direction:column;text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:0;font:inherit;color:var(--tx);cursor:pointer}
.th-cu-tile .th-cover{border-radius:0}
.th-cu-tile-tx{padding:9px 11px 12px;display:flex;flex-direction:column;gap:3px}
.th-cu-tile-tx small{font-size:11.5px;color:var(--ac);font-weight:700}
.th-cu-tile-tx b{font-size:13.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.th-cu-tile.th-locked .th-cover{opacity:.55}
.th-cu-tile-lock{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.6);color:#fff;border-radius:999px;padding:4px 7px;display:flex}
.pm-row{position:relative}
.pm-row.has-tiger .pm-tx{padding-right:66px}
.pm-row .pm-tiger{position:absolute;right:0;top:50%;margin:0!important;transform:translateY(-50%)}
.pm-row .pm-tx{flex:1}

/* ── 情境對話播放器（2026-10-06）── */
.cd{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg2)}
.cd-bar{position:sticky;top:0;z-index:3;background:color-mix(in srgb,var(--ac) 7%,var(--bg2));border-bottom:1px solid var(--line);padding:10px 12px}
.cd-main{display:flex;align-items:center;gap:8px}
.cd-b{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--bd);background:var(--bg);color:var(--tx);display:grid;place-items:center;cursor:pointer}
.cd-b svg{width:20px!important;height:20px!important}
.cd-play{flex:1;height:46px;border-radius:999px;border:0;background:var(--ac);color:#fff;font:inherit;font-size:15.5px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,var(--ac) 60%,#000)}
.cd-play:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--ac) 60%,#000)}
.cd-pos{flex:none;min-width:46px;text-align:right;font-size:12.5px;font-weight:700;color:var(--tx2);font-variant-numeric:tabular-nums}
.cd-opts{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.cd-o{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--bd);background:var(--bg);color:var(--tx2);border-radius:999px;padding:5px 11px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.cd-o.on{background:color-mix(in srgb,var(--ac) 14%,var(--bg));border-color:var(--ac);color:var(--ac)}
.cd-o svg{width:14px!important;height:14px!important}
.cd-hint{font-size:12px;color:var(--tx3);margin-top:7px}
.cd-lines{display:flex;flex-direction:column}
.cd-line{display:grid;grid-template-columns:40px 1fr 36px;gap:10px;align-items:start;padding:12px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .2s}
.cd-line:last-child{border-bottom:0}
.cd-line.on{background:color-mix(in srgb,var(--ac) 10%,var(--bg2))}
.cd-line.on .cd-ko{color:var(--ac)}
.cd-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:var(--ac)}
.cd-av.sp1{background:#C7452F}.cd-av.sp2{background:#4F8A5C}.cd-av.sp3{background:#B07A1E}
.cd-who{font-size:11.5px;font-weight:700;color:var(--tx3)}
.cd-ko{font-size:17px;line-height:1.55;margin-top:1px}
.cd-rr{font-size:12.5px;color:var(--tx3);margin-top:2px}
.cd-tr{font-size:13.5px;color:var(--tx2);margin-top:3px;line-height:1.6}
.cd-lines.no-tr .cd-tr,.cd-lines.no-rr .cd-rr{display:none}
.cd-one{width:34px;height:34px;border-radius:50%;border:0;background:color-mix(in srgb,var(--ac) 12%,var(--bg));color:var(--ac);display:grid;place-items:center;cursor:pointer}
.cd-one svg{width:16px!important;height:16px!important}
.cd-bar{top:calc(var(--hd-h,58px) + env(safe-area-inset-top,0px))}
/* 修破版（2026-10-06）：overflow:hidden 會讓 sticky 以外框為捲動容器，top 偏移變成框內空白並蓋住第一句 */
.cd{overflow:visible}
.cd-bar{border-radius:16px 16px 0 0}
.cd-lines .cd-line:last-child{border-radius:0 0 16px 16px}
.cd-play{max-width:260px}
.cd-main{justify-content:center}
.cd-pos{margin-left:auto}
@media (min-width:700px){.cd-main{justify-content:flex-start}.cd-opts{margin-top:0;margin-left:auto}.cd-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.cd-main{flex:1 1 360px}.cd-hint{flex-basis:100%}}
.cd-bar{position:static}
.cd-float{position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140%);z-index:150;width:min(560px,calc(100% - 24px));display:flex;align-items:center;gap:8px;background:#2C2C30;color:#fff;border-radius:999px;padding:7px 10px;box-shadow:0 8px 28px rgba(0,0,0,.3);transition:transform .25s;pointer-events:none}
.cd-float.show{transform:translate(-50%,0);pointer-events:auto}
.cd-float .cd-b{width:36px;height:36px;background:transparent;border-color:rgba(255,255,255,.25);color:#fff}
.cd-fplay{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--ac);color:#fff;display:grid;place-items:center;cursor:pointer}
.cd-ftx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.cd-ftx small{font-size:11px;opacity:.7}
.cd-ftx span{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:900px){.cd-float{bottom:24px}}
.srs-btn{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.25}
.srs-btn small{font-size:11.5px;font-weight:600;opacity:.85}
.srs-ng{background:#C7452F}

/* ── 大字體（zoom 1.25／1.4）時的排版：看卡片實際寬度自動改排列（2026-10-06 Mia：字體最大破版）── */
.hb,.pq-card,.pm{container-type:inline-size}
@container (max-width:340px){
  .th-greet{flex-wrap:wrap;row-gap:10px}
  .th-greet-tx{flex:1 1 150px}
  .th-greet-goal{flex:1 1 100%;flex-direction:row;justify-content:center;gap:14px;padding-top:10px;border-top:1px dashed var(--line)}
  .th-greet-motto{font-size:12.5px}
}
@container (max-width:400px){
  .pq-path .pq-node:nth-of-type(n+4),.pq-path .pq-link:nth-of-type(n+3){display:none}
  .pq-mascot{width:56px!important;height:56px!important}
  .pq-node{min-width:46px}
  .pq-lbl{font-size:10.5px}
}
@container (max-width:320px){
  .pq-mascot{display:none}
  .pq-head{font-size:17px}
}
@container (max-width:340px){
  .pm-row .pm-tiger{display:none}
  .pm-row.has-tiger .pm-tx{padding-right:0}
  .pm-row{padding-left:0!important}
}
.cd{container-type:inline-size}
.cd-play{min-width:0;white-space:nowrap}
@container (max-width:380px){
  .cd-main{flex-wrap:wrap}
  .cd-play{order:-1;flex:1 1 100%;max-width:none}
  .cd-pos{margin-left:auto}
  .cd-line{grid-template-columns:34px 1fr 32px;gap:8px;padding:10px}
  .cd-av{width:34px;height:34px;font-size:10.5px}
}

/* ── StayTH：字母、聲調、類別詞、像中文的字 ── */
.th-cls { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.th-cls-mid { color: #2E8B57; } .th-cls-high { color: #C0392B; } .th-cls-low { color: #2F6DB5; }
[data-theme="dark"] .th-cls-mid { color: #6FD39A; } [data-theme="dark"] .th-cls-high { color: #F28B7D; } [data-theme="dark"] .th-cls-low { color: #8DB8F0; }
.th-len-long { color: var(--ac); } .th-len-short { color: var(--ac2); }
.th-rare { opacity: .72; }
.th-raretag { color: var(--tx3); font-size: 12px; }
.th-vbig { font-size: 40px !important; letter-spacing: .04em; }
.th-nums { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }
.th-num { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; text-align: center; }
.th-num b { font-size: 15px; color: var(--tx2); }
.th-tones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.th-tone { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; color: var(--tx); text-align: center; }
.th-tone b { font-size: 15px; } .th-tone em { font-style: normal; color: var(--tx2); font-size: 13px; }
.th-tone small { color: var(--tx3); font-size: 12px; line-height: 1.5; }
.th-tone-w { font-size: 34px; font-weight: 700; line-height: 1.5; }
.th-tonesvg { display: inline-block; vertical-align: middle; }
.th-scroll { overflow-x: auto; }
.th-ttable { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 13.5px; }
.th-ttable th, .th-ttable td { border: 1px solid var(--line); padding: 8px 6px; text-align: center; vertical-align: middle; }
.th-ttable thead th { background: var(--bg); font-size: 18px; }
.th-ttable thead th small { font-size: 11px; color: var(--tx3); }
.th-ttable tbody th { white-space: nowrap; background: var(--bg); }
.th-tcell { display: inline-block; font-weight: 700; }
.th-t1 { color: #6B7280; } .th-t2 { color: #2F6DB5; } .th-t3 { color: #C0392B; } .th-t4 { color: #D27420; } .th-t5 { color: #7C5CD6; }
[data-theme="dark"] .th-t1 { color: #B8BEC8; } [data-theme="dark"] .th-t2 { color: #8DB8F0; } [data-theme="dark"] .th-t3 { color: #F28B7D; } [data-theme="dark"] .th-t4 { color: #F2A65A; } [data-theme="dark"] .th-t5 { color: #B9A3F5; }
.th-input { width: 100%; box-sizing: border-box; font-size: 26px; padding: 10px 14px; border: 1.5px solid var(--bd); border-radius: 12px; background: var(--bg); color: var(--tx); font-family: var(--thf); }
.th-calc-res { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.th-calc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.th-calc-top b { font-size: 18px; }
.th-calc-w { font-family: var(--thf); font-size: 44px; font-weight: 700; line-height: 1.5; }
.th-steps { margin: 10px 0 4px; padding-left: 22px; line-height: 1.9; font-size: 14.5px; }
.th-zh { display: inline-block; font-size: 12px; color: var(--ac2); border: 1px solid currentColor; border-radius: 999px; padding: 0 8px; margin-left: 4px; }
.th-clf { display: inline-block; font-size: 12px; color: var(--tx2); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; margin-left: 4px; }
.th-clf [lang="th"] { font-weight: 700; color: var(--tx); }
.th-sino { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.th-sino-c { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; text-align: left; color: var(--tx); }
.th-sino-c [lang="th"] { font-size: 24px; font-weight: 700; }
.th-sino-c .th-zh { margin: 4px 0 0; }
.th-gender { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
:root{--el-body:#DCE3F1;--el-ear:#F8C9D6;--el-ink:#5B5470;--el-eye:#3A3346}
:root[data-theme="dark"]{--el-body:#C9D2E4;--el-ear:#E9AFC0;--el-ink:#2E2A38;--el-eye:#2E2A38}
.th-mascot-svg svg{width:100%;height:100%;display:block}
.th-tap { cursor: pointer; border-bottom: 1.5px dotted var(--ac); }
.th-tap:hover { background: var(--ac-soft); }
.fc-word.th-zhm { font-size: clamp(26px, 6vw, 38px); }