/* Lingo Sidecar — 冷調紙張灰綠 + 墨色；螢光黃只用在「正確說法」與到期徽章 */
:root {
  color-scheme: light;
  --bg: #EDF1EE;
  --surface: #F7F9F7;
  --surface-2: #E4EAE6;
  --ink: #1E2A2B;
  --ink-2: #46534F;
  --muted: #6B7874;
  --line: #CFD8D3;
  --line-soft: #DDE4E0;
  --hl: #F3DA4B;          /* 螢光黃 */
  --hl-ink: #1E2A2B;
  --fix: #2E6F57;         /* 修正綠 */
  --err: #A8453A;         /* 錯誤紅 */
  --on-err: #FFFFFF;
  --warn: #9A6B00;
  --focus: #1E2A2B;
  --user-bubble: #DCE7E1;
  --ai-bubble: #F7F9F7;
  --radius: 10px;
  --font: "Atkinson Hyperlegible", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121A1B;
  --surface: #1A2324;
  --surface-2: #232E2F;
  --ink: #E4EBE7;
  --ink-2: #BAC6C1;
  --muted: #8E9A96;
  --line: #2F3B3C;
  --line-soft: #273233;
  --hl: #F3DA4B;
  --hl-ink: #1E2A2B;
  --fix: #6CC39D;
  --err: #E58677;
  --on-err: #1E2A2B;
  --warn: #E0B341;
  --focus: #E4EBE7;
  --user-bubble: #243532;
  --ai-bubble: #1A2324;
}
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; --bg: #fff; --surface: #fff; --ink: #000; --ink-2: #222; --muted: #555; --line: #bbb; }
  .no-print { display: none !important; }
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--font);
}
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ── 按鈕 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 6px 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--ink-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.danger { color: var(--err); }
.btn[aria-pressed="true"] { background: var(--surface-2); border-color: var(--ink-2); }
.btn.small { min-height: 32px; padding: 3px 10px; font-size: 14px; }

select {
  min-height: 40px; padding: 6px 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px;
}

/* ── 頁首 ── */
.topbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--bg);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; font-size: 18px; letter-spacing: .2px; white-space: nowrap; }
.brand span { color: var(--fix); }
.tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
.tab {
  position: relative; padding: 6px 12px; min-height: 40px; border: 0; background: none;
  border-radius: 8px; cursor: pointer; color: var(--ink-2); white-space: nowrap;
}
.tab[aria-selected="true"] { color: var(--ink); font-weight: 700; background: var(--surface-2); }
.badge {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 10px; background: var(--hl); color: var(--hl-ink);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.top-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.spend { width: 120px; cursor: help; }
.spend-label { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.spend-track { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.spend-fill { height: 100%; width: 0; background: var(--fix); border-radius: 2px; }
.spend[data-level="warn"] .spend-fill { background: var(--warn); }
.spend[data-level="crit"] .spend-fill { background: var(--err); }

/* ── 版面 ── */
main { max-width: 1280px; margin: 0 auto; padding: 20px; }
.view[hidden] { display: none !important; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.panel h2, .section-title { font-size: 17px; margin: 0 0 12px; }
.alert { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--err); color: var(--err); background: var(--surface); margin-bottom: 16px; }
.alert.info { border-color: var(--line); color: var(--ink-2); }

.talk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.notes-col { position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
@media (max-width: 860px) {
  .talk-layout { grid-template-columns: 1fr; }
  .notes-col { position: static; max-height: none; }
  main { padding: 16px; }
  .topbar { padding: 8px 16px; }
  .tabs { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; }
  .tab { padding: 6px 10px; }
  .who-label { display: none; }
  .who select { max-width: 130px; }
  .top-right { flex-wrap: wrap; width: 100%; margin-left: 0; gap: 8px; justify-content: space-between; }
  .spend { width: 96px; }
  .account-menu { right: auto; left: 0; }
  .notes-col { top: auto; }
}

/* ── 對話 ── */
.setup { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-2); }
.mode-desc { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.mode-options { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin-top: 10px; }
.mode-options:empty { display: none; }
.field.wide { flex: 1 1 260px; }
.field input[type=text] { min-height: 40px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; width: 100%; }
.picker { border: 0; padding: 0; margin: 0; flex: 1 1 100%; min-width: 0; }
.picker legend { font-size: 14px; color: var(--ink-2); padding: 0; margin-bottom: 6px; }
.pick-count { color: var(--muted); font-size: 13px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; }
.pick { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.pick:has(input:checked) { border-color: var(--fix); box-shadow: inset 0 0 0 1px var(--fix); }
.pick:has(input:disabled:not(:checked)) { opacity: .55; cursor: not-allowed; }
.pick input { margin-top: 4px; }
.pick-body { display: flex; flex-direction: column; min-width: 0; }
.pick-label { font-size: 14px; font-weight: 700; }
.pick-hint { font-size: 12px; color: var(--ink-2); font-style: italic; }
.pick-stats { font-size: 12px; color: var(--muted); }
.check { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 14px; color: var(--ink-2); }
.stage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0 8px; }
.mic-wrap { position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.mic-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--fix);
  transform: scale(calc(1 + var(--level, 0) * .35)); opacity: calc(.25 + var(--level, 0) * .75);
  transition: transform 80ms linear, opacity 80ms linear;
}
.mic-btn {
  position: relative; width: 136px; height: 136px; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--ink); color: var(--bg); font-size: 20px; font-weight: 700;
}
.mic-btn[data-state="active"] { background: var(--err); color: var(--on-err); }
.mic-btn[data-state="busy"] { background: var(--muted); cursor: progress; }
.clock { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 15px; }
.status-line { min-height: 1.6em; text-align: center; color: var(--ink-2); font-size: 14px; }
.status-line.warn { color: var(--warn); font-weight: 700; }
.status-line.err { color: var(--err); }
.controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.controls-note { text-align: center; font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.end-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 8px 14px; border: 1px solid var(--err); border-radius: 8px; color: var(--err); font-weight: 700; }
.btn.danger:not(:disabled) { border-color: var(--err); }
.practice { border: 2px solid var(--fix); border-radius: var(--radius); padding: 12px 16px; margin: 4px 0 14px; background: var(--bg); }
.practice h3 { font-size: 16px; margin: 0 0 4px; }
.practice-list { margin: 8px 0 4px; padding-left: 22px; }
.practice-list li { margin: 8px 0; }
.practice-list .orig { display: inline; }
.practice-list details { margin-top: 2px; font-size: 15px; }
.practice-list summary { cursor: pointer; color: var(--ink-2); font-size: 13px; width: fit-content; }
.practice-list .tag { font-size: 12px; color: var(--muted); margin-left: 6px; }

.transcript { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; min-height: 160px; }
.transcript-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 32px 0; }
.bubble { max-width: 82%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.user { align-self: flex-end; background: var(--user-bubble); border-bottom-right-radius: 4px; }
.bubble.assistant { align-self: flex-start; background: var(--ai-bubble); border-bottom-left-radius: 4px; }
.bubble .who { display: block; font-size: 12px; color: var(--muted); }

/* ── 即時筆記 ── */
.notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.notes-status { font-size: 13px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.chips-label { font-size: 13px; color: var(--ink-2); margin: 0; }
.chip { font-size: 13px; padding: 2px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.chip[data-state="ok"] { border-color: var(--fix); color: var(--fix); }
.chip[data-state="bad"] { border-color: var(--err); color: var(--err); }
.notes-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; padding-right: 2px; }
.notes-empty { color: var(--muted); font-size: 14px; padding: 16px 0; }

.card { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 14px; }
.card-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.type-tag { font-weight: 700; color: var(--ink-2); }
.again { color: var(--err); font-weight: 700; }
.new-tag { color: var(--fix); font-weight: 700; }
.orig { color: var(--err); text-decoration: line-through; text-decoration-thickness: 2px; margin: 0; }
.fix { margin: 2px 0 6px; font-size: 17px; font-weight: 700; }
/* 招牌視覺：正確說法的螢光筆 */
.hl {
  color: var(--hl-ink);
  background: linear-gradient(transparent 12%, var(--hl) 12%, var(--hl) 92%, transparent 92%);
  padding: 0 3px; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.pattern { font-size: 14px; color: var(--fix); margin: 0 0 2px; }
.explain { font-size: 14px; margin: 0 0 2px; }
.example { font-size: 14px; color: var(--ink-2); font-style: italic; margin: 0; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--muted); margin-top: 8px; }
.card-meta .btn { margin-left: auto; }

.summary-box { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.summary-box h3 { font-size: 15px; margin: 0 0 6px; }
.summary-box ul { margin: 4px 0 8px; padding-left: 20px; }

/* ── 複習 ── */
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 6px 14px; min-height: 40px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.flash { max-width: 640px; margin: 0 auto; text-align: center; padding: 28px 20px; }
.flash .said { font-size: 13px; color: var(--muted); margin: 0; }
.flash .orig { font-size: 20px; margin: 4px 0 12px; }
.flash .prompt { color: var(--ink-2); margin: 0 0 16px; }
.flash .fix { font-size: 22px; }
.flash-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.progress { font-size: 13px; color: var(--muted); text-align: center; margin-top: 12px; font-variant-numeric: tabular-nums; }
.quiz { max-width: 640px; margin: 0 auto; }
.quiz .q { font-size: 19px; margin: 0 0 14px; }
.options { display: grid; gap: 8px; }
.option { text-align: left; justify-content: flex-start; min-height: 46px; }
.option:disabled { opacity: .6; }
.option[data-result] { opacity: 1; }
.option[data-result="correct"] { border-color: var(--fix); color: var(--fix); font-weight: 700; }
.option[data-result="wrong"] { border-color: var(--err); color: var(--err); text-decoration: line-through; }
.feedback { margin-top: 12px; min-height: 1.6em; }
.score { font-size: 28px; font-weight: 700; text-align: center; margin: 8px 0; }

/* ── 筆記庫 ── */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filter { border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 4px 12px; min-height: 36px; cursor: pointer; font-size: 14px; }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lib-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; margin-bottom: 12px; }
.field.inline select { min-width: 240px; max-width: 100%; }
.session-group { margin-bottom: 22px; }
.session-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; font-size: 15px; }
.session-head .muted { font-size: 13px; }
.linkish { background: none; border: 0; padding: 0; color: var(--fix); text-decoration: underline; cursor: pointer; font: inherit; }
.exercises { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.ex-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ex-head .btn { margin-left: auto; }
.ex-batch { margin-top: 8px; }
.ex-batch-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ex-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.ex { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: start; font-size: 14px; }
.ex-kind { font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.ex-body { min-width: 0; overflow-wrap: anywhere; }
.ex-note { display: block; font-size: 13px; color: var(--muted); }
.ex details summary { cursor: pointer; font-size: 12px; color: var(--ink-2); width: fit-content; }
.ex-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.ex-del:hover { color: var(--err); }
.focus-list { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 10px; }
.focus-item { border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; background: var(--bg); }
.focus-row { display: flex; align-items: center; gap: 8px; }
.focus-row .btn { margin-left: auto; }
.changelog { max-width: 820px; }
.cl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 16px; }
.cl-head h2 { margin: 0; font-size: 20px; }
.cl-entry { margin-bottom: 14px; }
.cl-entry h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 4px; font-size: 17px; }
.cl-entry h3 .muted { font-size: 13px; font-weight: 400; }
.cl-current { font-size: 12px; font-weight: 700; color: var(--fix); border: 1px solid var(--fix); border-radius: 10px; padding: 0 8px; }
.cl-summary { margin: 0 0 8px; color: var(--ink-2); }
.cl-section h4 { margin: 8px 0 2px; font-size: 14px; color: var(--muted); }
.cl-section ul { margin: 0; padding-left: 20px; }
.cl-section li { margin: 2px 0; }
.changelog code { font-size: 13px; background: var(--surface-2); padding: 0 4px; border-radius: 4px; }
.identity { display: flex; gap: 8px; align-items: center; }
.who { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.who select { min-height: 32px; padding: 2px 6px; font-size: 14px; max-width: 150px; }
.inline-form, .group-form, .allow-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-bottom: 8px; }
.member-pick { border: 0; padding: 0; margin: 0; flex: 1 1 100%; }
.member-pick legend { font-size: 14px; color: var(--ink-2); padding: 0; margin-bottom: 4px; }
.member-pick label { display: inline-flex; align-items: center; gap: 4px; margin: 0 14px 4px 0; font-size: 14px; }
.group-card { border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px; margin-top: 10px; background: var(--bg); }
.group-card h3 { font-size: 15px; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.group-card h3 .btn { margin-left: auto; }
.role-tag { font-size: 12px; font-weight: 700; color: var(--fix); border: 1px solid var(--fix); border-radius: 10px; padding: 0 6px; }
.owner-tag { font-size: 12px; color: var(--ink-2); background: var(--surface-2); border-radius: 10px; padding: 0 8px; }
.share-box { margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; font-size: 14px; }
.share-box label { display: inline-flex; align-items: center; gap: 4px; margin: 0 12px 4px 0; }
td .actions { display: flex; gap: 6px; }
.account { position: relative; }
dialog.dialog { border: 1px solid var(--line); color: var(--ink); width: min(420px, calc(100vw - 32px)); }
dialog.dialog::backdrop { background: rgb(0 0 0 / .35); }
dialog.dialog h2 { font-size: 18px; margin: 0; }
.account-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; padding: 8px; display: grid; gap: 2px; }
.account-menu p { margin: 2px 6px 6px; }
.menu-item { text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; color: var(--ink); }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.menu-item.danger { color: var(--err); }
.auth-main { max-width: 460px; }
.auth-card { display: grid; gap: 12px; margin-top: 12px; }
.auth-card h1 { font-size: 20px; margin: 0; }
.auth-card input { min-height: 40px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; width: 100%; }
.auth-card code, .secret { font-family: ui-monospace, Consolas, monospace; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
.secret-box { border: 2px solid var(--fix); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.status-tag { font-size: 12px; border-radius: 10px; padding: 0 8px; border: 1px solid var(--line); }
.status-tag.off { color: var(--err); border-color: var(--err); }
.audit-list { max-height: 360px; overflow-y: auto; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.plan-meter { position: relative; height: 14px; border-radius: 7px; background: var(--line-soft); overflow: hidden; margin: 8px 0 4px; }
.plan-meter .pm-used { position: absolute; inset: 0 auto 0 0; background: var(--fix); border-radius: 7px; }
.plan-meter .pm-inc { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.bill { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.bill-row { display: flex; justify-content: space-between; font-size: 14px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.bill-row.total { font-size: 17px; border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 6px; }
.value-list { margin: 0 0 12px; padding-left: 20px; }
.value-compare { display: grid; gap: 8px; }
.value-compare div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line-soft); padding: 4px 0; }
.value-compare b { font-size: 18px; font-variant-numeric: tabular-nums; }
.plans-table th, .plans-table td { text-align: center; white-space: normal; }
.plans-table tbody th { text-align: left; color: var(--ink-2); }
.plans-table .current { background: var(--surface-2); }
.finance { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; font-size: 14px; }
.finance b { font-variant-numeric: tabular-nums; }
.rec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -4px 0 10px; }
.rec-row audio { height: 36px; max-width: 100%; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.grid .card { background: var(--surface); }
.summaries { display: grid; gap: 12px; margin-top: 24px; }
.summary-item h3 { font-size: 15px; margin: 0 0 4px; }
.summary-item p { margin: 4px 0; }
.summary-item ul { margin: 4px 0; padding-left: 20px; }

/* ── 花費與設定 ── */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.meter-row { margin-bottom: 14px; }
.meter-label { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.meter { height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.meter > span { display: block; height: 100%; background: var(--fix); border-radius: 4px; width: 0; }
.meter[data-level="warn"] > span { background: var(--warn); }
.meter[data-level="crit"] > span { background: var(--err); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.ok-text { color: var(--fix); font-weight: 700; }
.bad-text { color: var(--err); font-weight: 700; }
.radio { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.radio input { margin-top: 5px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
td.num, th.num { text-align: right; }

/* ── 提示訊息 ── */
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50;
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 8px;
  background: var(--ink); color: var(--bg); font-size: 14px;
}
.toast.err { background: var(--err); color: var(--on-err); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .mic-ring { transform: none; }
}

/* ── v1.2.0：橫幅、密碼欄位防呆、後台 ── */
.banner { border: 1px solid var(--line); border-left: 4px solid var(--fix); background: var(--surface); border-radius: 8px; padding: 8px 14px; margin-bottom: 12px; font-size: 14px; }
.banner p { margin: 2px 0; }
.banner[data-level="warn"] { border-left-color: var(--warn); }
.banner[data-level="bad"] { border-left-color: var(--err); }
.banner .linkish { margin-left: 6px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 64px !important; width: 100%; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 32px; padding: 2px 10px; border: 0; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; cursor: pointer; }
.caps-warn { display: block; font-size: 13px; color: var(--warn); font-weight: 700; }
.pw-checks { list-style: none; margin: -4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--muted); }
.pw-checks li.ok { color: var(--fix); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0; }
#forgot-view .auth-card + .auth-card { margin-top: 12px; }
#forgot-view h2 { font-size: 17px; margin: 0; }
.field textarea { padding: 6px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; width: 100%; font: inherit; color: inherit; resize: vertical; }
.field input[type=number], .field input[type=email] { min-height: 40px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; width: 100%; }
.adm-nav { margin-bottom: 16px; flex-wrap: wrap; }
.adm-pane > .panel + .panel, .adm-block { margin-top: 16px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kpi { padding: 12px 14px; }
.kpi[data-level="warn"] { border-color: var(--warn); }
.kpi[data-level="crit"] { border-color: var(--err); }
.kpi-label { font-size: 13px; color: var(--muted); }
.kpi-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0; }
.kpi .meter { margin-top: 6px; }
.limits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.backup-list { max-height: 280px; overflow-y: auto; }
td.wrap { white-space: normal; min-width: 160px; }
dialog.dialog.wide { width: min(560px, calc(100vw - 32px)); }
.device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; }
.device-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-soft); padding: 6px 0; }
.toast-btn { margin-left: 10px; background: none; border: 1px solid currentColor; color: inherit; border-radius: 6px; padding: 2px 10px; cursor: pointer; font: inherit; }
.trash-panel { margin-bottom: 16px; }
.card-actions { display: inline-flex; gap: 6px; }
@media print {
  .banner, .adm-nav { display: none !important; }
}

/* ── v1.3.0：虛擬角色 ── */
/* 角色和開始鈕並排（手機也是），提示、工具列、示範放在下面整排 */
.stage-row { display: grid; grid-template-columns: auto auto; grid-template-areas: "face mic" "hint hint" "tools tools" "demo demo"; justify-content: center; justify-items: center; align-items: center; gap: 6px 36px; width: 100%; }
.stage:not(.with-avatar) .stage-row { grid-template-columns: auto; grid-template-areas: "mic"; }
.stage-row .avatar-card { display: contents; }
.stage-row .avatar-box { grid-area: face; }
.stage-row .avatar-hint { grid-area: hint; }
.stage-row .avatar-tools { grid-area: tools; }
.stage-row .avatar-demo { grid-area: demo; max-width: 560px; }
.mic-col { grid-area: mic; display: flex; flex-direction: column; align-items: center; gap: 6px; }
@media (max-width: 520px) {
  .stage-row { gap: 6px 10px; }
  .stage.with-avatar .mic-wrap { width: 128px; height: 128px; }
  .stage.with-avatar .mic-btn { width: 104px; height: 104px; font-size: 18px; }
}
.avatar-box { width: min(250px, 46vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 38%, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--line); }
.avatar-svg { width: 100%; height: 100%; display: block; }
.avatar-hint { min-height: 2.9em; margin: 0; font-size: 13px; line-height: 1.45; text-align: center; color: var(--ink-2); opacity: 0; transition: opacity .2s; max-width: 420px; }
.avatar-hint.on { opacity: 1; }
.avatar-hint b { color: var(--fix); }
.hint-word { background: var(--hl); color: var(--hl-ink); padding: 0 4px; border-radius: 4px; font-weight: 700; }
.avatar-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.avatar-tools select { min-height: 32px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 2px 6px; max-width: 170px; }
.avatar-demo { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.avatar-demo p { margin: 0 0 4px; }
.demo-label { font-size: 13px; color: var(--muted); margin-top: 8px !important; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { min-height: 34px; padding: 2px 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-2); color: var(--ink); cursor: pointer; font: inherit; font-size: 14px; }
.chip-btn:hover:not(:disabled) { border-color: var(--fix); }
.chip-btn:disabled { opacity: .5; cursor: not-allowed; }
.demo-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; margin-top: 10px; }
.demo-form .field { flex: 1 1 180px; }
.demo-form input { min-height: 36px; padding: 4px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; width: 100%; }
.mouth-dialog .demo-box { width: min(260px, 62vw); margin: 0 auto; }
.mouth-dialog .flash-actions { margin-top: 4px; }
.mouth-dialog .demo-text { font-size: 18px; font-weight: 700; margin: 0; text-align: center; }
.mouth-dialog .avatar-hint { margin: 0 auto; }
@media print {
  .avatar-card, #avatar-show { display: none !important; }
}

/* ── v1.4.0：錄音回放、隨手錄音 ── */
.rec-dot { color: var(--err); font-weight: 700; font-size: 13px; margin-left: 8px; animation: rec-blink 1.4s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: .4; } }
.pb-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.pb-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 899px) { .pb-layout { grid-template-columns: 1fr; } }
.pb-list { padding: 8px; max-height: calc(100vh - 170px); overflow-y: auto; }
.pb-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pb-item { width: 100%; text-align: left; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; font: inherit; color: var(--ink); }
.pb-item:hover { background: var(--surface-2); }
.pb-item.on { background: var(--surface-2); border-color: var(--line); }
.pb-item-top { font-size: 14px; }
.pb-item-sub { font-size: 13px; color: var(--muted); }
.pb-item-preview { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.pb-head h2 { margin: 0; }
.pb-head-actions { margin-left: auto; display: flex; gap: 6px; }
.pb-player { position: sticky; top: 70px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.pb-play { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); font-size: 17px; cursor: pointer; }
.pb-play:disabled { opacity: .4; cursor: progress; }
#pb-seek { flex: 1 1 180px; min-width: 120px; accent-color: var(--fix); }
.pb-time { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink-2); }
.pb-rate select { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 2px 6px; }
.pb-who button { min-height: 36px; padding: 4px 10px; font-size: 14px; }
.pb-tip { margin: 8px 0 0; }
.pb-lines { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pb-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--surface); }
.pb-line.user { background: var(--user-bubble); }
.pb-line.playing { border-color: var(--fix); box-shadow: inset 4px 0 0 var(--fix); }
.pb-lines.plain .pb-line { grid-template-columns: 1fr; }
.pb-line-play { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.pb-line-play:hover { border-color: var(--fix); color: var(--fix); }
.pb-line-body { display: grid; gap: 1px; text-align: left; background: none; border: 0; padding: 2px 0; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.pb-line-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pb-line-meta .who { font-weight: 700; color: var(--ink-2); }
.pb-line-text { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.pb-line-actions { display: flex; gap: 4px; }
.pb-line-actions .btn[aria-pressed="true"] { background: var(--hl); color: var(--hl-ink); border-color: var(--hl); }
@media (max-width: 560px) {
  .pb-line { grid-template-columns: auto minmax(0, 1fr); }
  .pb-line-actions { grid-column: 2; }
  .pb-player { top: 118px; }
}
.pb-clips-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pb-clips-head h2 { margin: 0; }
.clip-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.clip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; }
.clip.playing { border-color: var(--fix); }
.clip-body { display: grid; gap: 2px; min-width: 0; }
.clip-target { font-size: 15px; color: var(--ink); }
.clip-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* 隨手錄音（右下角） */
.qr-fab { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 18px 0 14px; border-radius: 26px; border: 0; background: var(--ink); color: var(--bg); font: inherit; font-weight: 700; box-shadow: 0 4px 14px rgb(0 0 0 / .25); cursor: pointer; }
.qr-fab-icon { font-size: 20px; line-height: 1; }
.qr-fab.recording { background: var(--err); color: var(--on-err); animation: rec-blink 1.4s ease-in-out infinite; }
.qr-panel { position: fixed; right: 20px; bottom: 84px; z-index: 41; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto; box-shadow: 0 10px 30px rgb(0 0 0 / .25); display: grid; gap: 10px; }
.qr-head { display: flex; justify-content: space-between; align-items: center; }
.qr-head h2 { margin: 0; font-size: 17px; }
.qr-target { border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; }
.qr-target p { margin: 0; }
.qr-target-text { font-size: 17px; font-weight: 700; margin: 2px 0 6px !important; overflow-wrap: anywhere; }
.qr-target-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qr-rec { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.qr-rec-btn { min-height: 48px; padding: 0 18px; border-radius: 24px; border: 0; background: var(--err); color: var(--on-err); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.qr-rec-btn[data-state="recording"] { background: var(--ink); color: var(--bg); }
.qr-meter { height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.qr-meter span { display: block; height: 100%; width: 0; background: var(--fix); transition: width 60ms linear; }
.qr-time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); white-space: nowrap; }
.qr-takes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qr-takes:empty { display: none; }
.qr-take { display: grid; gap: 4px; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: 8px; }
.qr-take.playing { border-color: var(--fix); }
.qr-take-meta { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.qr-take-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.qr-foot { margin: 0; }
body.has-fab .toast { bottom: 84px; }
body.has-fab main { padding-bottom: 88px; }
@media (max-width: 520px) {
  .qr-fab { right: 16px; bottom: 16px; width: 52px; padding: 0; justify-content: center; }
  .qr-fab-label { display: none; }
  .qr-panel { left: 16px; right: 16px; width: auto; bottom: 80px; }
}
@media print {
  .qr-fab, .qr-panel, .pb-player { display: none !important; }
}

/* 對話方式：即時對話／輪流對話（省錢） */
.kind-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; border: 0; padding: 0; margin: 0 0 12px; }
.kind-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.kind-opt:has(input:checked) { border-color: var(--fix); box-shadow: inset 0 0 0 1px var(--fix); }
.kind-opt:has(input:disabled) { cursor: default; opacity: .75; }
.kind-opt input { margin-top: 4px; accent-color: var(--fix); }
.kind-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kind-opt small { color: var(--ink-2); font-size: 13px; }
.kind-opt .kind-cost { color: var(--fix); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 輪流對話的按鈕狀態 */
.mic-btn[data-state="ready"] { background: var(--fix); color: #fff; }
.mic-btn[data-state="recording"] { background: var(--err); color: var(--on-err); }
.mic-btn[data-state="speaking"] { background: var(--ink); color: var(--bg); }
.turn-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; width: 100%; }
.turn-form { display: flex; gap: 6px; flex: 1 1 260px; max-width: 520px; min-width: 0; }
.turn-form input { flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; min-height: 38px; }

/* 模型選擇（測試驗證用）與每一步的速度、花費 */
.model-picks { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; margin: 10px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius); }
.model-picks .model-note { flex-basis: 100%; margin: 0; }
.model-picks .field { flex: 1 1 220px; min-width: 0; max-width: 100%; }
.model-picks select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.turn-metrics { margin: 0; text-align: center; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* 輪流對話：AI 說完後倒數自動聆聽 */
.auto-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 8px 14px; border: 1px solid var(--fix); border-radius: 8px; color: var(--fix); font-weight: 700; font-variant-numeric: tabular-nums; }
.turn-bar .check { flex-basis: 100%; justify-content: center; }

/* 對話方式標籤：即時對話／輪流對話 */
.kind-tag { display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.6; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink-2); background: var(--surface-2); vertical-align: 1px; }
.kind-tag[data-kind="turn"] { color: var(--fix); border-color: var(--fix); background: transparent; }
.kind-tag[data-kind="live"] { color: var(--err); border-color: var(--err); background: transparent; }
/* 花費明細：一段對話一組 */
tr.lg-head td, tr.lg-sub td { border-bottom: 0; white-space: normal; }
tr.lg-head td { border-top: 2px solid var(--line); padding-top: 10px; }
tr.lg-head td.num, tr.lg-sub td.num { white-space: nowrap; }
tr.lg-sub td { border-top: 0; padding-top: 2px; padding-bottom: 4px; font-size: 13px; }
tr.lg-sub .lg-name { display: inline-block; padding-left: 14px; position: relative; color: var(--ink-2); }
tr.lg-sub .lg-name::before { content: "└"; position: absolute; left: 0; color: var(--muted); }

/* ── 對話控制列（dock） ──
   還沒開始：在設定下方，大大的「開始」。
   對話中：精簡成一列、固定在畫面下方（逐字稿在上面捲動，控制鈕永遠看得到）。 */
.dock { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 16px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); }
.dock-main { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dock-info { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.dock .dock-end[disabled] { display: none; }
.dock .practice { margin: 0; max-height: 45vh; overflow-y: auto; }
.dock.live { position: sticky; bottom: 0; z-index: 30; margin-top: 12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-color: var(--line); box-shadow: 0 -6px 20px rgb(0 0 0 / .14); }
.dock.live .dock-main { flex-direction: row; align-items: center; gap: 14px; }
.dock.live .mic-wrap { width: 84px; height: 84px; flex: none; }
.dock.live .mic-btn { width: 72px; height: 72px; font-size: 15px; }
.dock.live .dock-info { flex: 1; align-items: flex-start; text-align: left; }
.dock.live .status-line { min-height: 0; text-align: left; font-size: 15px; font-weight: 700; color: var(--ink); }
.dock.live .status-line.warn { color: var(--warn); }
.dock.live .status-line.err { color: var(--err); }
.dock.live .clock { font-size: 13px; }
.dock.live .turn-metrics { text-align: left; font-size: 12px; }
.dock.live .dock-end { flex: none; min-height: 44px; padding: 0 18px; font-weight: 700; }
.dock.live .controls { justify-content: flex-start; }
.dock.live .controls-note { display: none; }
.dock .turn-bar { justify-content: flex-start; }
.dock .turn-bar .check { flex-basis: auto; }
/* 最新的逐字稿捲到控制列上方，不會被蓋住 */
.bubble { scroll-margin-bottom: calc(var(--dock-h, 0px) + 12px); }
/* 窄螢幕：對話中貼齊畫面底部（捲到筆記也看得到） */
@media (max-width: 860px) {
  .dock.live { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; border-radius: 14px 14px 0 0; border-width: 1px 0 0; }
  body.talk-docked { padding-bottom: var(--dock-h, 0px); }
}
@media (max-width: 600px) {
  .dock.live .mic-wrap { width: 66px; height: 66px; }
  .dock.live .mic-btn { width: 56px; height: 56px; font-size: 14px; }
  .dock.live .dock-main { gap: 10px; }
  .dock.live .status-line { font-size: 14px; }
  .dock.live .controls { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .dock.live .controls .btn { flex: none; }
  .dock.live .turn-metrics { display: none; }
  .dock.live { gap: 8px; padding-top: 8px; }
  .dock.live .clock { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  .dock.live .dock-info { gap: 2px; }
  .dock.live .auto-notice, .dock.live .end-notice { padding: 6px 10px; }
}
@media print { .dock.live { position: static; box-shadow: none; } }

/* 我的方案：輪流對話、即時對話各一條用量 */
.quota { margin: 12px 0; }
.quota .meter-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ── 家教老師 ── */
.tutor-pick { margin: 0 0 12px; }
.tutor-title { margin: 0 0 8px; font-size: 16px; }
.tutor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.tutor-card { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; min-width: 0; }
.tutor-card:has(input:checked) { border-color: var(--fix); box-shadow: inset 0 0 0 1px var(--fix); }
.tutor-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tutor-card:has(input:disabled) { cursor: default; opacity: .75; }
.tutor-card input { position: absolute; opacity: 0; pointer-events: none; }
.tutor-badge { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--tc, var(--fix)) 20%, var(--surface)); }
.tutor-badge svg, .tutor-live svg { display: block; width: 100%; height: 100%; }
.tutor-body { display: flex; flex-direction: column; min-width: 0; }
.tutor-body small { color: var(--ink-2); font-size: 12px; }
.tutor-body .tutor-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .tutor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tutor-body .tutor-tag { display: none; } }

/* ── 不知道怎麼回？ ── */
.suggest-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: 10px 12px; margin-bottom: 10px; }
.suggest-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; }
.suggest-head .btn { margin-left: auto; }
.suggest-list { display: grid; gap: 6px; }
.suggest-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.suggest-opt:hover { border-color: var(--fix); }
.suggest-opt .en { font-size: 15px; }
.suggest-opt .zh { font-size: 13px; color: var(--ink-2); }

/* ── 家教記得的事 ── */
.mem-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.mem-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: 8px; }
.mem-cat { font-size: 12px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.mem-text { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.mem-acts { display: flex; gap: 6px; margin-left: auto; }
.mem-item.editing input { flex: 1 1 200px; min-width: 0; min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; }
.mem-form { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mem-form input { flex: 1 1 200px; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; }
.mem-form select, .mem-item select { min-height: 36px; }

/* ── 家教頭像（對話中）：CSS 動畫，不分析聲音 ── */
.dock-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tutor-live { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--tc, var(--fix)) 20%, var(--surface)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px transparent; transition: box-shadow .2s; }
.dock:not(.live) .tutor-live { display: none; }
.tutor-live[data-state="listening"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--fix); }
.tutor-live[data-state="speaking"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--tc, var(--fix)); }
.tutor-live .tav-eyes { transform-box: fill-box; transform-origin: center; animation: tav-blink 4.2s infinite; }
.tutor-live[data-state="speaking"] svg { animation: tav-bob .9s ease-in-out infinite; }
.tutor-live[data-state="speaking"] .tav-open { animation: tav-talk .32s steps(1) infinite; }
.tutor-live[data-state="speaking"] .tav-smile { animation: tav-talk .32s steps(1) infinite reverse; }
.tutor-live[data-state="thinking"] svg { animation: tav-tilt 1.6s ease-in-out infinite; }
.tutor-live[data-state="thinking"]::after { content: "…"; position: absolute; right: 2px; top: -2px; font-weight: 700; font-size: 18px; line-height: 1; color: var(--ink); }
@keyframes tav-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes tav-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes tav-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
@keyframes tav-talk { 0% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tutor-live *, .tutor-live svg { animation: none !important; } }
@media (max-width: 600px) { .tutor-live { width: 40px; height: 40px; } .dock-who { gap: 8px; } }
/* 逐字稿：家教的小頭像 */
.bubble .who .who-av { width: 22px; height: 22px; border-radius: 50%; vertical-align: -6px; margin-right: 6px; background: var(--surface); }

/* 逐字稿隱藏時的提示 */
.transcript-off { margin: 16px 0 0; padding: 20px 12px; text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed var(--line); border-radius: var(--radius); }

/* ── 長文欄位、幫我想主題 ── */
.field.full { flex: 1 1 100%; min-width: 0; }
.field.full textarea { min-height: 120px; }
.long-meta { font-size: 12px; }
.pick-topic { gap: 6px; }
.pick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pick-summary { margin: 0; }
.topic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.topic-cards:empty { display: none; }
.topic-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; min-width: 0; }
.topic-card[aria-pressed="true"] { border-color: var(--fix); box-shadow: inset 0 0 0 1px var(--fix); }
.topic-card:hover:not(:disabled) { border-color: var(--fix); }
.topic-card span { overflow-wrap: anywhere; }

/* ── 限時作答 ── */
.answer-timer { display: inline-block; padding: 2px 10px; border-radius: 12px; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid var(--fix); color: var(--fix); }
.answer-timer[data-level="warn"] { border-color: var(--warn); color: var(--warn); }
.answer-timer[data-level="crit"] { border-color: var(--err); color: var(--err); }

/* ── 面試回饋報告 ── */
.iv-report { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.iv-report h3 { margin: 0 0 6px; }
.iv-report h4 { margin: 10px 0 4px; font-size: 14px; }
.iv-verdict { font-weight: 700; }
.iv-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 16px; margin: 8px 0; }
.iv-scores div { display: flex; justify-content: space-between; gap: 6px; }
.iv-scores dt { color: var(--ink-2); white-space: nowrap; }
.iv-scores dd { margin: 0; color: var(--fix); font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-scores dd b { color: var(--ink); }
.iv-questions { padding-left: 20px; display: grid; gap: 8px; }
.iv-questions p { margin: 2px 0; }
.iv-q { font-weight: 700; }
.iv-better { padding: 4px 8px; border-left: 3px solid var(--fix); background: var(--surface-2); }

/* ── TOEIC 專區 ── */
.toeic { display: grid; gap: 14px; }
.tq-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; }
.tq-head h2 { margin: 2px 0 2px; }
.tq-head p { margin: 0; }
.tq-goal h3 { margin-top: 0; }
.tq-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; margin: 8px 0; }
.tq-verdict { margin-left: 6px; }
.tq-verdict.ok { color: var(--fix); } .tq-verdict.warn { color: var(--warn); } .tq-verdict.err { color: var(--err); }
.tq-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tq-kpi { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.tq-kpi b { font-size: 18px; font-variant-numeric: tabular-nums; }
.tq-tasks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.tq-task { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding: 6px 10px; border: 1px solid var(--line-soft); border-radius: 8px; }
.tq-task.done span { color: var(--ink-2); }
.chip-ok { font-size: 12px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--fix); color: var(--fix); white-space: nowrap; }
.tq-bar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--surface-2); vertical-align: middle; overflow: hidden; }
.tq-bar > span { display: block; height: 100%; background: var(--fix); }
.tq-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.tq-unit, .tq-part { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.tq-unit:hover, .tq-part:hover:not(:disabled) { border-color: var(--fix); }
.tq-part:disabled { opacity: .6; cursor: wait; }
.tq-unit-top { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.tq-unit-bar { display: inline-flex; align-items: center; gap: 6px; }
.tq-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tq-grammar { display: grid; gap: 6px; }
.tq-g { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(140px, 1.5fr) auto; gap: 6px 12px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line-soft); }
.tq-g-stat { font-variant-numeric: tabular-nums; }
.tq-recent { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.tq-plan summary { cursor: pointer; }
.tq-plan-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.tq-plan-table th, .tq-plan-table td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.tq-plan-table tr.now td { background: var(--surface-2); font-weight: 700; }
.table-scroll { overflow-x: auto; }
.tq-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tq-tab { padding: 6px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink-2); font: inherit; cursor: pointer; }
.tq-tab[aria-selected="true"] { border-color: var(--fix); color: var(--ink); box-shadow: inset 0 0 0 1px var(--fix); font-weight: 700; }
.tq-words { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.tq-words li { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(100px, 1fr) auto; gap: 2px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.tq-w-en { font-weight: 700; }
.tq-w-ex { grid-column: 1 / 3; }
.tq-group h3 { margin-top: 0; }
.tq-scene { padding: 8px 12px; border-left: 3px solid var(--fix); background: var(--surface-2); }
.tq-passage { white-space: pre-wrap; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface-2); line-height: 1.7; }
.tq-audio { width: 100%; max-width: 480px; margin: 6px 0; }
.tq-q { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.tq-prompt { margin: 0 0 6px; }
.tq-choices { display: grid; gap: 6px; }
.tq-choice { display: flex; gap: 8px; align-items: baseline; text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.tq-choice:hover:not(:disabled) { border-color: var(--fix); }
.tq-choice:disabled { cursor: default; }
.tq-choice.right { border-color: var(--fix); box-shadow: inset 0 0 0 1px var(--fix); }
.tq-choice.wrong { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
.tq-explain { margin: 6px 0 0; font-size: 14px; }
.tq-explain.ok { color: var(--fix); } .tq-explain.bad { color: var(--err); }
.tq-transcript pre { white-space: pre-wrap; font: inherit; margin: 6px 0 0; }
.tq-score { font-size: 22px; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .tq-g { grid-template-columns: 1fr auto; }
  .tq-g-stat { grid-column: 1 / -1; grid-row: 2; }
  .tq-words li { grid-template-columns: 1fr auto; }
  .tq-w-zh { grid-column: 1; }
  .tq-w-ex { grid-column: 1 / -1; }
}

/* 分頁變多：中等寬度把分頁間距縮小，避免最後一個分頁被擠到看不到 */
@media (max-width: 1400px) { .tab { padding: 6px 9px; } }

/* ── 測試模式 ── */
.focus-banner { display: none; }
body.focus .focus-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; padding: 8px 12px; border: 1px dashed var(--fix); border-radius: var(--radius); background: var(--surface); font-size: 14px; }
body.focus .tab:not([data-focus]) { display: none; }
body.focus #tutor-pick, body.focus #qr-fab, body.focus #qr-panel { display: none !important; }

/* ── 測試註記（隨手記） ── */
.tn-fab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 42; min-height: 48px; padding: 0 16px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; box-shadow: 0 4px 14px rgb(0 0 0 / .2); cursor: pointer; }
/* 預設右下角：錄音按鈕上方（測試模式沒有錄音按鈕就貼著角落）、對話中在控制列上方；可以拖拉 */
body:not(.focus) .tn-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
body.talk-docked .tn-fab { bottom: calc(var(--dock-h, 0px) + 16px); }
.tn-fab { touch-action: none; user-select: none; }
.tn-fab.moved { right: auto !important; bottom: auto !important; }
.tn-fab.dragging { cursor: grabbing; opacity: .9; box-shadow: 0 8px 22px rgb(0 0 0 / .3); }
.tn-panel { position: fixed; right: 20px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 43; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto; box-shadow: 0 10px 30px rgb(0 0 0 / .25); display: grid; gap: 8px; }
body:not(.focus) .tn-panel { bottom: calc(144px + env(safe-area-inset-bottom, 0px)); }
.tn-panel.moved { right: auto !important; bottom: auto !important; }
body.talk-docked .tn-panel { bottom: calc(var(--dock-h, 0px) + 76px); max-height: calc(100vh - var(--dock-h, 0px) - 100px); }
.tn-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tn-head h2 { margin: 0; font-size: 17px; }
.tn-context { margin: 0; }
.tn-chips, .tn-rates, .tl-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tn-chip, .tn-rate { min-height: 32px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.tn-chip[aria-pressed="true"], .tn-rate[aria-pressed="true"] { border-color: var(--fix); color: var(--ink); box-shadow: inset 0 0 0 1px var(--fix); font-weight: 700; }
.tn-panel textarea { width: 100%; min-height: 90px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; resize: vertical; }
.tn-recent { margin: 0; padding-left: 18px; }

/* ── 測試紀錄 ── */
.testlog { display: grid; gap: 12px; }
.tl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; }
.tl-head h2 { margin: 0; }
.tl-head p { margin: 2px 0 0; }
.tl-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.inline-field { flex-direction: row; align-items: center; gap: 6px; }
.tl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.tl-kpi { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.tl-kpi b { font-size: 17px; font-variant-numeric: tabular-nums; }
.tl-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.tl-session { margin: 0; }
.tl-s-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tl-cost { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 14px; }
.tl-models { margin: 4px 0 0; }
.tl-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.tl-note { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; }
.tl-note[data-rating="bad"] { border-left: 3px solid var(--err); }
.tl-note[data-rating="good"] { border-left: 3px solid var(--fix); }
.tl-note[data-rating="idea"] { border-left: 3px solid var(--warn); }
.tl-icon { font-size: 18px; line-height: 1.4; }
.tl-body { display: flex; flex-direction: column; min-width: 0; }
.tl-cat { font-size: 12px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink-2); }
.tl-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-note.editing { grid-template-columns: auto auto 1fr; }
.tl-note.editing textarea { grid-column: 1 / -1; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; }
.tl-note.editing .tl-actions { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .tl-note { grid-template-columns: auto 1fr; }
  .tl-note .tl-actions { grid-column: 2; }
  .tl-cost { margin-left: 0; flex-basis: 100%; }
  .tn-fab { min-height: 42px; padding: 0 12px; }
}
@media print { .tn-fab, .tn-panel { display: none !important; } }

/* 不知道怎麼回？＋自動建議開關 */
.suggest-ctl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.suggest-auto { min-height: 32px; padding: 0 8px; border: 1px solid var(--line-soft); border-radius: 8px; }
.dock.live .controls .suggest-auto { flex: none; }

/* 鍵盤快捷鍵提示、TOEIC 目前這一題 */
.kbd-hint { text-align: center; margin: 8px 0 0; }
.tq-q.current { outline: 2px solid var(--fix); outline-offset: 4px; border-radius: 6px; }

/* ── 成就 ── */
.ach-chip { display: inline-flex; gap: 8px; align-items: center; min-height: 34px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.ach-chip .ach-dim { opacity: .55; }
.achievements { display: grid; gap: 12px; }
.ach-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; }
.ach-head h2 { margin: 0; }
.ach-head p { margin: 2px 0 0; }
.ach-points { display: flex; flex-direction: column; align-items: flex-end; }
.ach-points b { font-size: 26px; font-variant-numeric: tabular-nums; }
.ach-recs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ach-rec { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.ach-rec b { font-size: 20px; font-variant-numeric: tabular-nums; }
.ach-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ach-badge { --tier: var(--line); display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-soft); border-left: 4px solid var(--tier); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.ach-badge.locked { opacity: .7; }
.ach-badge.locked .ach-icon { filter: grayscale(1); opacity: .6; }
.ach-badge.bronze { --tier: #B07A47; } .ach-badge.silver { --tier: #8E9AA6; } .ach-badge.gold { --tier: #C9A227; } .ach-badge.diamond { --tier: #3B8FD0; } .ach-badge.legend { --tier: #8A4FC4; }
.ach-badge.fresh { box-shadow: 0 0 0 2px var(--tier); }
.ach-icon { font-size: 28px; line-height: 1; flex: none; }
.ach-b-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ach-new { font-size: 11px; padding: 0 6px; border-radius: 8px; background: var(--fix); color: var(--surface); }
.ach-progress { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.ach-progress > span { display: block; height: 100%; background: var(--tier); }
.ach-badge.locked .ach-progress > span { background: var(--fix); }
.ach-tiers { display: flex; gap: 4px; flex-wrap: wrap; }
.ach-tier { font-size: 11px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); font-variant-numeric: tabular-nums; }
.ach-tier.bronze { border-color: #B07A47; color: var(--ink); } .ach-tier.silver { border-color: #8E9AA6; color: var(--ink); } .ach-tier.gold { border-color: #C9A227; color: var(--ink); } .ach-tier.diamond { border-color: #3B8FD0; color: var(--ink); } .ach-tier.legend { border-color: #8A4FC4; color: var(--ink); }
.ach-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.ach-two .panel { margin: 0; min-width: 0; }
.ach-rules { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ach-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 360px; overflow-y: auto; }
.ach-hist li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 3px 0; border-top: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .ach-chip { padding: 2px 8px; gap: 6px; } .ach-hist li { grid-template-columns: 1fr auto; } .ach-hist li > span:first-child { grid-column: 1 / -1; } }

/* ── 真人練習 ── */
.kind-tag[data-kind="peer"] { color: #6A4FA0; border-color: #6A4FA0; background: transparent; }
:root[data-theme="dark"] .kind-tag[data-kind="peer"] { color: #B39BE0; border-color: #B39BE0; }
.peer-panel { display: none; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
body.talk-peer .peer-panel { display: block; }
body.talk-peer #setup, body.talk-peer #model-picks, body.talk-peer #mode-desc, body.talk-peer #mode-options, body.talk-peer #tutor-pick, body.talk-peer #record-note { display: none !important; }
body.talk-peer #controls [data-control], body.talk-peer #turn-bar { display: none !important; }
body.talk-peer .dock:not(.live) .mic-wrap { display: none; }
.peer-panel h3 { margin: 0 0 8px; font-size: 16px; }
.peer-panel h4 { margin: 12px 0 6px; font-size: 14px; }
.peer-prefs { display: grid; gap: 2px; }
.peer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.peer-person { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; }
.peer-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--surface-2); color: var(--ink); flex: none; }
.peer-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 140px; }
.peer-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.peer-pending { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--fix); border-radius: 8px; }
.peer-blocked { margin-top: 8px; }
.peer-blocked ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.peer-invite { position: fixed; top: calc(70px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 60; width: min(440px, calc(100vw - 32px)); box-shadow: 0 12px 32px rgb(0 0 0 / .28); border: 2px solid var(--fix); display: grid; gap: 8px; }
.peer-invite-title { margin: 0; font-size: 16px; }
body.talk-peer.talk-docked .peer-panel { display: none; }
body.talk-peer .dock:not(.live) #controls, body.talk-peer .dock:not(.live) .clock { display: none; }

/* 輪流對話：外圈標示有沒有在收音 */
.mic-wrap[data-mode="off"] .mic-ring { border-style: dashed; border-color: var(--muted); opacity: .55; transform: none; }
.mic-wrap[data-mode="listening"] .mic-ring { border-color: var(--err); }
.mic-wrap[data-mode]::after { z-index: 1; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); padding: 0 7px; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; pointer-events: none; }
.mic-wrap[data-mode="off"]::after { content: "未收音"; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.mic-wrap[data-mode="listening"]::after { content: "● 收音中"; background: var(--err); color: var(--on-err); }

/* 先聽再看字幕 */
.bubble.sub-held { min-width: 220px; }
.sub-placeholder { display: block; color: var(--muted); font-style: italic; }
.sub-placeholder .linkish { font-style: normal; margin-left: 4px; }

/* 接著聊的分隔線 */
.talk-divider { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--muted); font-size: 13px; }
.talk-divider::before, .talk-divider::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }

/* 重聽 AI 的某一句 */
.replay-btn { margin-left: 6px; padding: 0 6px; min-height: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 12px; cursor: pointer; vertical-align: 1px; }
.replay-btn:hover:not(:disabled) { border-color: var(--fix); }
.replay-btn:disabled { opacity: .5; cursor: progress; }

/* 結束後：重新對話＋接著聊下去 */
.continue-talk { min-height: 52px; padding: 0 22px; font-size: 16px; font-weight: 700; border-radius: 26px; }
.dock:not(.live) .dock-main:has(.continue-talk:not([hidden])) { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 16px; }
.dock .mic-btn { font-size: clamp(15px, 2.2vw, 20px); }
.continue-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 2px; padding: 10px 12px; border: 1px dashed var(--fix); border-radius: var(--radius); }

/* 自動聆聽／自動送出：開關＋秒數 */
.auto-ctl { display: inline-flex; align-items: center; gap: 4px; }
.sec-pick { min-height: 32px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; }
.sec-pick:disabled { opacity: .45; }
.mic-btn .send-cd { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.2; opacity: .92; }
.mic-wrap[data-countdown] .mic-ring { animation: send-pulse 1s ease-in-out infinite; }
@keyframes send-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mic-wrap[data-countdown] .mic-ring { animation: none; } }

/* 兩個階段：對談中收起設定選單，只留摘要卡 */
.talk-col.in-session :is(#kind-switch, #peer-panel, #tutor-pick, #setup, #model-picks, #record-note, #mode-desc, #mode-options) { display: none !important; }
.session-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2, var(--surface)); }
.session-av { flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.session-av svg { width: 56px; height: 56px; }
.session-peer { font-size: 34px; }
.session-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.session-title { font-size: 17px; }
.session-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; }
.session-chips li { font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-chips li span { color: var(--muted); margin-right: 4px; }
.session-card #session-edit { flex: none; align-self: flex-start; }
/* 控制列：選設定時只留「開始」；對談中不顯示說明文字與測速資訊（測試模式才看） */
.dock.setup-stage :is(#controls, .clock, #turn-metrics) { display: none !important; }
.dock:not(.setup-stage) #controls-note { display: none; }
body:not(.focus) .dock:not(.setup-stage) #turn-metrics { display: none !important; }
@media (max-width: 560px) {
  .session-card { flex-wrap: wrap; }
  .session-av, .session-av svg { width: 44px; height: 44px; }
}
@media (max-width: 560px) {
  /* 摘要卡：設定排成一列左右滑，不佔高度 */
  .session-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .session-chips li { flex: none; }
  .session-card #session-edit { align-self: center; }
  /* 控制列一列左右滑：「不知道怎麼回？」不要被擠壓蓋住 */
  .dock.live .controls .suggest-ctl { flex: none; flex-wrap: nowrap; }
  .dock.live .turn-bar { gap: 4px 10px; }
  .dock.live .turn-bar .check { min-height: 32px; }
}
.talk-col { min-width: 0; }
/* 對話結束後：用不到的按鈕（速度、再說一次、建議、分析）先收起來，只留逐字稿開關 */
.dock:not(.live):not(.setup-stage) #controls :is([data-control], #analyze-now, #mute-btn, .suggest-ctl) { display: none; }

/* 等待中的泡泡：你的話轉文字中、AI 思考中（打字中的三個點） */
.bubble.pending .pending-text { color: var(--muted); font-size: 14px; }
.typing { display: inline-flex; gap: 5px; align-items: center; height: 22px; padding: 0 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); opacity: .35; animation: typing-dot 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: .9; } }
/* AI 已經開口、文字還沒到：點點變成聲波 */
.bubble.pending.talking .typing i { border-radius: 2px; width: 4px; height: 14px; animation: talk-bar .8s ease-in-out infinite; }
@keyframes talk-bar { 0%, 100% { transform: scaleY(.45); opacity: .5; } 50% { transform: scaleY(1); opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .typing i, .bubble.pending.talking .typing i { animation: none; opacity: .6; } }

/* 特色學習法：龍櫻式暗記暗誦 */
.recite { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.rc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rc-head h2 { margin: 0; }
.rc-head p { margin: 4px 0 0; }
.rc-method { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.rc-method h3 { margin: 4px 0 0; font-size: 19px; }
.rc-method p { margin: 0; }
.rc-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.rc-flow { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 4px 0; padding: 0; }
.rc-flow li { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; }
.rc-decks-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-decks-head h3 { margin: 0; }
.rc-decks { display: grid; gap: 12px; }
.rc-deck { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.rc-deck-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: flex-start; }
.rc-deck h3 { margin: 0 0 2px; font-size: 17px; }
.rc-nums { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); }
.rc-nums b { font-size: 18px; color: var(--ink); margin-right: 2px; font-variant-numeric: tabular-nums; }
.rc-lib-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.rc-decks-head p { margin: 2px 0 0; max-width: 70ch; }
.rc-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rc-bar i { display: block; height: 100%; background: var(--fix); border-radius: 999px; }
.rc-parts { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-2); }
.rc-part-head { margin-top: 10px; font-weight: 700; font-size: 15px; }
.rc-part-head:first-child { margin-top: 0; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rc-note { padding: 10px 14px; border-radius: var(--radius); background: var(--surface-2); font-size: 14px; }
.rc-preview, .rc-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.rc-plist, .rc-list { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.rc-list { list-style: none; padding: 0; }
.rc-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.rc-item.editing { flex-direction: column; }
.rc-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 360px; }
.rc-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rc-status { font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: var(--surface-2); }
.rc-status[data-s="due"] { color: var(--warn); }
.rc-status[data-s="mastered"] { color: var(--fix); }
.rc-point { color: var(--fix); }
.rc-point.big { font-weight: 700; font-size: 15px; padding: 8px 12px; border-radius: var(--radius); background: var(--surface-2); color: var(--ink); }
.rc-noteblock { font-size: 14.5px; line-height: 1.7; white-space: normal; }
.rc-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rc-step { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.rc-step.on { border-color: var(--fix); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--fix); }
.rc-prompt { display: flex; flex-direction: column; gap: 6px; }
.rc-zh { font-size: 22px; font-weight: 700; line-height: 1.5; }
.rc-en { font-size: 20px; color: var(--fix); font-weight: 600; }
.rc-answer { display: flex; flex-direction: column; gap: 8px; }
.rc-answer p { margin: 0; }
.rc-answer-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.rc-answer-row textarea { flex: 1 1 320px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; resize: vertical; }
.rc-result { padding: 12px 14px; border-radius: var(--radius); border: 2px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.rc-result.ok { border-color: var(--fix); }
.rc-result.mid { border-color: var(--warn); }
.rc-result.bad { border-color: var(--err); }
.rc-result p { margin: 0; }
.rc-diff { font-size: 18px; line-height: 1.9; }
.rc-ins { text-decoration: underline 2px; text-underline-offset: 3px; color: var(--fix); font-weight: 700; background: color-mix(in srgb, var(--fix) 14%, transparent); border-radius: 3px; padding: 0 2px; }
.rc-del { color: var(--err); text-decoration-thickness: 2px; background: color-mix(in srgb, var(--err) 12%, transparent); border-radius: 3px; padding: 0 2px; }
.rc-en-show { display: flex; flex-direction: column; gap: 2px; }
.rc-hint { padding: 8px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 14%, transparent); font-size: 14px; }
.rc-done { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 560px) { .rc-zh { font-size: 19px; } .rc-item-side { align-items: flex-start; } }
.allow-form .field:first-child { flex: 1 1 320px; min-width: 0; }
.allow-form textarea { width: 100%; resize: vertical; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }