[hidden] { display: none !important; }
/* 設計稿：Claude Design「英文腦訓練 Redesign」。深色實驗室：中翻腦琥珀、英文腦青綠、你的數字用藍紫 */
:root {
  color-scheme: dark;
  --bg: #0E1116; --surface: #161B22; --line: #262D36; --ink: #E8EAED; --ink-2: #C9CED4; --muted: #9AA3AE; --faint: #5B6573;
  --tw: #F2A65A; --tw-ink: #F5C894; --tw-bg: #1E1A14; --tw-line: #3A2E1F;
  --en: #4FD1C5; --en-ink: #9BE7DF; --en-bg: #12201F; --en-line: #1F3A37;
  --you: #8EA8FF; --on-accent: #0E1116;
  --serif: "Noto Serif TC", "Songti TC", serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); overflow-wrap: anywhere; }
.wrap { max-width: 560px; margin: 0 auto; padding: 0 20px calc(28px + env(safe-area-inset-bottom)); }
a { color: var(--en); }
a:hover { color: var(--en-ink); }
h1 { font: 700 28px/1.25 var(--serif); margin: 8px 0 4px; }
h2 { font-size: 15px; margin: 22px 0 8px; color: var(--ink-2); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); }

/* 頂列 */
.top { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 6px; }
.logo { display: flex; align-items: baseline; gap: 8px; color: var(--ink); text-decoration: none; }
.logo:hover { color: var(--ink); }
.logo b { font: 700 24px var(--serif); letter-spacing: 1px; }
.logo span { font-size: 13px; color: var(--muted); }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--ink); background: none; border: 0; cursor: pointer; }
.icon-btn:hover { background: var(--surface); color: var(--ink); }
.unit-top { display: flex; align-items: center; gap: 8px; padding: 14px 0 4px; margin: 0 -8px; }
.progress { flex: 1; display: grid; gap: 4px; }
.progress span { height: 4px; border-radius: 2px; background: var(--line); }
.progress span.done { background: var(--en); }
.step-name { font-size: 12px; color: var(--muted); padding: 0 8px; white-space: nowrap; }

/* 卡片與按鈕 */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin: 12px 0; }
.card.tw { background: var(--tw-bg); border-color: var(--tw-line); }
.card.en { background: var(--en-bg); border-color: var(--en-line); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: 14px;
  border: 0; background: var(--en); color: var(--on-accent); font: 700 16px var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover { color: var(--on-accent); filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
.btn.light { background: var(--ink); color: var(--on-accent); }
.btn:disabled { opacity: .5; cursor: default; }
.actions { display: flex; gap: 10px; margin-top: 16px; }
.actions > * { flex: 1; }
.actions > .grow { flex: 1.4; }

/* 首頁 */
.hero { display: flex; flex-direction: column; gap: 14px; }
.hero .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pill { font-size: 12px; font-weight: 700; color: var(--on-accent); background: var(--en); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.q-big { font: 700 30px/1.2 var(--serif); }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.bar-row .name { width: 64px; }
.bar-row .val { width: 48px; text-align: right; font: 13px var(--mono); }
.track { flex: 1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.track > i { display: block; height: 100%; border-radius: 4px; }
.c-tw { color: var(--tw); } .c-en { color: var(--en); } .c-you { color: var(--you); }
.bg-tw { background: var(--tw); } .bg-en { background: var(--en); } .bg-you { background: var(--you); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 4px; scrollbar-width: none; }
.chip { flex: none; min-height: 36px; font: 13px var(--sans); padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink-2); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-accent); font-weight: 700; }
.theme { font-size: 12px; color: var(--muted); letter-spacing: 1px; margin: 16px 0 8px; }
.list { display: grid; gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.item:hover { color: var(--ink); border-color: var(--faint); }
.item .num { font: 13px var(--mono); color: var(--muted); width: 22px; }
.item .txt { flex: 1; display: flex; flex-direction: column; }
.item .txt span { font-size: 12px; color: var(--muted); }
.badge { font: 12px var(--mono); border-radius: 999px; padding: 2px 8px; background: var(--line); color: var(--ink); white-space: nowrap; }
.badge.good { background: var(--en); color: var(--on-accent); }

/* 題目 */
.question { padding: 14px 4px 0; display: flex; flex-direction: column; gap: 4px; }
.question .ctx { font-size: 13px; color: var(--muted); }
.question .q { font: 700 32px/1.2 var(--serif); }

/* 錄音 */
.recorder { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0 8px; }
.mic-wrap { position: relative; width: 148px; height: 148px; display: flex; align-items: center; justify-content: center; }
.mic-wrap .ring { position: absolute; border-radius: 50%; border: 2px solid var(--en); opacity: 0; }
.mic-wrap .ring.r1 { inset: 0; } .mic-wrap .ring.r2 { inset: 14px; }
.mic-wrap.live .ring { animation: ring 1.6s ease-out infinite; }
.mic-wrap.live .ring.r2 { animation-delay: .5s; }
@keyframes ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mic-wrap.live .ring { animation: none; opacity: .6; } }
.mic { width: 112px; height: 112px; border-radius: 50%; border: 0; background: var(--en); color: var(--on-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mic:disabled { opacity: .7; cursor: default; }
.clock { display: flex; align-items: baseline; gap: 6px; min-height: 58px; }
.clock b { font: 600 48px var(--mono); color: var(--en); }
.clock span { font-size: 16px; color: var(--ink-2); }
.clock.over b { color: var(--tw); }
.status { font-size: 14px; color: var(--muted); text-align: center; min-height: 22px; }
.slots { display: grid; gap: 6px; }
.slot { text-align: center; padding: 7px 2px; border-radius: 10px; border: 1px dashed var(--faint); color: var(--muted); font-size: 13px; transition: background .2s, color .2s; }
.slot.lit { background: var(--en); border: 1px solid var(--en); color: var(--on-accent); font-weight: 700; }
.slot-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.transcript { margin: 12px 0 0; font-size: 15px; line-height: 1.5; min-height: 1.5em; }
.hint { background: var(--en-bg); border: 1px solid var(--en-line); color: var(--en-ink); border-radius: 12px; padding: 10px 12px; margin-top: 8px; font-size: 14px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.metrics.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px; text-align: center; }
.metric b { display: block; font: 600 22px var(--mono); }
.metric span { font-size: 12px; color: var(--muted); }
.flags { margin: 8px 0 0; padding-left: 1.1em; font-size: 14px; }
.flags li { margin: 4px 0; }
.flags code { font-family: var(--mono); background: var(--tw-bg); color: var(--tw-ink); border: 1px solid var(--tw-line); padding: 0 5px; border-radius: 6px; }
.tag { display: inline-block; font-size: 11px; border-radius: 6px; padding: 0 6px; margin: 0 4px; background: var(--line); color: var(--ink-2); }
.note { font-size: 13px; color: var(--muted); }
.warn { background: var(--tw-bg); border: 1px solid var(--tw-line); color: var(--tw-ink); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
audio { width: 100%; margin-top: 8px; }

/* 兩顆腦 */
.stage { position: relative; margin: 4px -20px 0; }
.stage canvas { display: block; width: 100%; height: 280px; touch-action: none; cursor: grab; }
.stage .lab { position: absolute; top: 8px; font-size: 13px; font-weight: 700; }
.stage .lab.l { left: 20px; color: var(--tw); } .stage .lab.r { right: 20px; color: var(--en); }
.stage .drag { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--muted); }
.clocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.clocks .card { margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.clocks b { font: 600 30px var(--mono); }
.clocks span { font-size: 14px; min-height: 22px; }
.card.tw span { color: var(--tw-ink); } .card.en span { color: var(--en-ink); }
.say { display: flex; flex-direction: column; gap: 4px; }
.say .k { font-size: 11px; letter-spacing: 1px; }
.say .v { font-size: 15px; line-height: 1.5; }
details.think { margin-top: 10px; }
details.think summary { cursor: pointer; font-size: 13px; color: var(--muted); min-height: 32px; }
details.think ol { margin: 6px 0 0; padding-left: 1.2em; font-size: 14px; color: var(--ink-2); }
.quote { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; font-size: 14px; color: var(--ink-2); margin: 0; }
.quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--muted); }

/* 完成 */
.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: right; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.mini { padding: 12px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mini b { font: 600 20px var(--mono); }
.mini span { font-size: 12px; color: var(--muted); }
.choice { display: flex; gap: 8px; }
.choice button { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--en-line); background: transparent; color: var(--ink); font: 14px var(--sans); cursor: pointer; }
.choice button[aria-pressed="true"] { background: var(--en); border-color: var(--en); color: var(--on-accent); font-weight: 700; }

/* 首頁：快聽入口（設計稿 Main） */
.quick-entry { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; margin-top: 10px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.quick-entry:hover { color: var(--ink); border-color: var(--faint); }
.quick-entry .qi { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--en-bg); border: 1px solid var(--en-line); color: var(--en); display: flex; align-items: center; justify-content: center; }
.quick-entry .txt { flex: 1; display: flex; flex-direction: column; }
.quick-entry .txt span { font-size: 12px; color: var(--muted); }
.quick-entry svg:last-child { color: var(--muted); }

/* 反問題型（設計稿 Ask） */
.pill.you { background: var(--you); align-self: flex-start; }
.bubble { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.bubble .who { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--line); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink-2); }
.bubble > div { padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.ask-hint { font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.ask-hint b { color: var(--ink); }

/* 聽力：播放列、語速（設計稿 ListenBrains / Listen / QuickListen） */
.player { display: flex; align-items: center; gap: 14px; }
.play-btn { width: 56px; height: 56px; flex: none; border-radius: 50%; border: 0; background: var(--en); color: var(--on-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pbody { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plab { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.bg-ink { background: var(--ink); }
.track > i { transition: width .08s linear; }
.speed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; min-width: 180px; }
.speed button { min-height: 32px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font: 12px var(--sans); cursor: pointer; }
.speed button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-accent); font-weight: 700; }

/* 聽力的兩顆腦 */
.hear { display: flex; flex-direction: column; gap: 10px; }
.hear .hh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.words { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.wd { display: inline-flex; flex-direction: column; align-items: center; min-width: 36px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--tw-line); color: var(--faint); font-size: 14px; }
.wd small { font-size: 11px; min-height: 16px; color: var(--tw-ink); }
.wd.done { background: #2A2116; border-color: #2A2116; color: var(--ink); }
.wd.now { background: var(--tw); border-color: var(--tw); color: var(--on-accent); }
.wd.now small { color: var(--on-accent); }
.wd.missed { border-style: dashed; border-color: var(--tw); color: var(--muted); }
.words.en .kw { font-size: 20px; font-weight: 700; color: #2C4A47; transition: color .15s; }
.words.en .fw { font-size: 13px; color: var(--line); transition: color .15s; }
.words.en .kw.on { color: var(--en); }
.words.en .fw.on { color: var(--faint); }
.note-tw { margin: 0; font-size: 14px; min-height: 22px; color: var(--tw-ink); }
.note-en { margin: 0; font-size: 14px; min-height: 22px; color: var(--en-ink); }

/* 英文腦聽法：四個小練習 */
.drill { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; }
.drill .note { margin: 0; }
.tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.tile { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font: 15px var(--sans); cursor: pointer; }
.opts { display: grid; gap: 6px; }
.opts.c1 { grid-template-columns: minmax(0, 1fr); }
.opts.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opts.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.opt { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 14px var(--sans); cursor: pointer; padding: 0 8px; }
.opt:disabled { cursor: default; }
.opt.row { display: flex; justify-content: space-between; align-items: center; padding: 0 14px; text-align: left; }
.opt.row small { font-size: 12px; }
.opt.sm { font-size: 12px; padding: 0 2px; }
.opt.good, .tile.good { border-color: var(--en); background: var(--en); color: var(--on-accent); font-weight: 700; }
.opt.bad, .tile.bad { border-color: var(--tw-line); background: var(--tw-bg); color: var(--tw-ink); }
.opt.hint { border: 1px dashed var(--en); color: var(--en-ink); }
.ok { margin: 0; font-size: 13px; color: var(--en-ink); }
.row-btns { display: flex; }
.row-btns .btn { min-height: 44px; }
.q-title { font: 700 20px var(--serif); }
.reveal { text-align: center; display: flex; flex-direction: column; gap: 4px; }

.tag.ai { background: var(--you); color: var(--on-accent); font-weight: 700; }

.remind { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; }
.remind label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.remind input { min-height: 44px; border-radius: 10px; border: 1px solid var(--en-line); background: var(--bg); color: var(--ink); font: 16px var(--mono); padding: 0 10px; }
.remind .btn { min-height: 44px; }

/* 對方聽起來是什麼感覺：中翻腦一句一句回，對方一直追問；英文腦一段話，對方不用追問 */
.chat { display: flex; flex-direction: column; gap: 6px; }
.chat .k { font-size: 11px; letter-spacing: 1px; }
.msg { max-width: 88%; margin: 0; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.msg.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); border-top-left-radius: 4px; }
.msg.me { align-self: flex-end; border-top-right-radius: 4px; }
.chat.tw .msg.me { background: var(--tw-line); color: var(--tw-ink); }
.chat.en .msg.me { background: var(--en-line); color: var(--en-ink); }
.msg.bonus { background: transparent !important; border: 1px dashed var(--en); }
.msg small { display: block; font-size: 11px; color: var(--muted); }
.tally { margin: 4px 0 0; font: 600 14px var(--mono); }
.ask-why { display: block; font-size: 12px; color: var(--muted); margin-top: -4px; }