/* =====================================================================
 * Calm Focus 全站共享样式 · 设计令牌 + 组件库
 * 亮/暗双主题：html[data-theme=light|dark] 由 app.js 写入（跟随系统或手动）；
 * 无 JS 时靠 prefers-color-scheme 兜底。
 * ===================================================================== */

/* ---------- 设计令牌 ---------- */
:root {
  --bg: #f4ede2;
  --panel: #fffcf6;
  --panel2: #f0e8da;
  --line: rgba(58, 51, 42, 0.14);
  --txt: #3a332a;
  --dim: #9a8d76;
  --accent: #c96f4a;
  --on-accent: #fffcf6;
  --accent-bg: #f6e7d8;
  --red: #a03d33;    --red-bg: #f8e4e0;
  --gold: #8a6420;   --gold-bg: #f7ecd4;
  --green: #4e6b35;  --green-bg: #e8efdc;
  --blue: #2f5d70;   --blue-bg: #dfecf1;
  --purple: #6b5a86; --purple-bg: #ece6f2;
  --shadow-card: 0 18px 44px rgba(140, 110, 70, 0.15);
  --shadow-soft: 0 6px 18px rgba(140, 110, 70, 0.12);
  --r-card: 24px;
  --r-ctl: 14px;
  --r-pill: 999px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #211d18;
  --panel: #2b2620;
  --panel2: #372f26;
  --line: rgba(240, 233, 221, 0.12);
  --txt: #f0e9dd;
  --dim: #9a8f7c;
  --accent: #d08a5b;
  --on-accent: #211d18;
  --accent-bg: #372e24;
  --red: #eba9a0;    --red-bg: #3a2a26;
  --gold: #e3c78e;   --gold-bg: #3a3225;
  --green: #b9cba4;  --green-bg: #2e352a;
  --blue: #a7c4cf;   --blue-bg: #28323a;
  --purple: #c3b2dd; --purple-bg: #322b3d;
  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
/* 无 JS 兜底：系统暗色且未被 app.js 标记时按暗色渲染 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #211d18;
    --panel: #2b2620;
    --panel2: #372f26;
    --line: rgba(240, 233, 221, 0.12);
    --txt: #f0e9dd;
    --dim: #9a8f7c;
    --accent: #d08a5b;
    --on-accent: #211d18;
    --accent-bg: #372e24;
    --red: #eba9a0;    --red-bg: #3a2a26;
    --gold: #e3c78e;   --gold-bg: #3a3225;
    --green: #b9cba4;  --green-bg: #2e352a;
    --blue: #a7c4cf;   --blue-bg: #28323a;
    --purple: #c3b2dd; --purple-bg: #322b3d;
    --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.5);
    --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}
a { color: var(--accent); }
a.link, a.back, a.homelink { color: var(--accent); text-decoration: none; font-size: 13px; }
a.link:hover, a.back:hover, a.homelink:hover { text-decoration: underline; }
.spacer { flex: 1; }
.muted { color: var(--dim); font-size: 13px; }
.note { color: var(--dim); font-size: 12px; opacity: 0.85; }
.hide { display: none !important; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.who { color: var(--dim); font-size: 12px; }
.powered { text-align: center; color: var(--dim); opacity: 0.6; font-size: 12px; padding: 18px 0 26px; letter-spacing: 1px; }
.center { text-align: center; }
kbd {
  background: var(--panel2); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 6px; padding: 2px 8px; font-size: 12px; color: var(--txt); font-weight: 500;
}
::selection { background: var(--accent-bg); }

/* ---------- App 壳：顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.topbar-title { font-size: 14px; font-weight: 600; color: var(--txt); white-space: nowrap; }
.nav-links { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.nav-link {
  color: var(--dim); text-decoration: none; font-size: 13px;
  padding: 6px 12px; border-radius: var(--r-pill); transition: all 0.25s var(--ease);
  white-space: nowrap;
}
.nav-link:hover { color: var(--txt); background: var(--panel2); text-decoration: none; }
.nav-link.on { color: var(--on-accent); background: var(--accent); font-weight: 600; }
.nav-group { position: relative; }
.nav-group > summary {
  list-style: none; cursor: pointer; user-select: none;
  color: var(--dim); font-size: 13px; padding: 6px 12px; border-radius: var(--r-pill);
  transition: all 0.25s var(--ease); white-space: nowrap;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { color: var(--txt); background: var(--panel2); }
.nav-group.on > summary { color: var(--on-accent); background: var(--accent); font-weight: 600; }
.nav-group .nav-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 95;
  display: flex; flex-direction: column; gap: 2px; min-width: 140px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-card); padding: 8px;
  animation: menuIn 0.25s var(--spring);
}
.nav-menu .nav-link { border-radius: 10px; padding: 8px 12px; }

/* ---------- App 壳：手机底部标签栏 ---------- */
.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  justify-content: space-around; align-items: center;
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: var(--dim); text-decoration: none; font-size: 11px;
  padding: 4px 10px; border-radius: 14px; min-width: 52px;
  transition: all 0.25s var(--ease); cursor: pointer; user-select: none;
  background: none; border: 0; font-family: inherit;
}
.tab-item .ti-ico { font-size: 20px; line-height: 1.2; }
.tab-item.on { color: var(--accent); background: var(--accent-bg); font-weight: 600; }
.tab-item:active { transform: scale(0.92); }
.tab-sheet {
  position: fixed; left: 10px; right: 10px; z-index: 96;
  bottom: calc(66px + env(safe-area-inset-bottom));
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-card); padding: 10px;
  display: none; grid-template-columns: repeat(3, 1fr); gap: 6px;
  animation: sheetIn 0.3s var(--spring);
}
.tab-sheet.show { display: grid; }
.tab-sheet a {
  color: var(--txt); text-decoration: none; font-size: 13px; text-align: center;
  padding: 12px 6px; border-radius: 14px; background: var(--panel2);
}
.tab-sheet a.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.tab-sheet a:active { transform: scale(0.95); }

/* ---------- 代操作横幅 ---------- */
.imp-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  background: var(--gold-bg); color: var(--gold);
  border-bottom: 1px solid var(--line);
  padding: 8px 14px; font-size: 13px; text-align: center;
}
.imp-bar button {
  margin-left: 12px; background: var(--gold); color: var(--gold-bg);
  border: 0; border-radius: var(--r-pill); padding: 4px 14px; font-weight: 600; cursor: pointer;
}

/* ---------- 主内容 ---------- */
main { max-width: 1000px; margin: 0 auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 18px; width: 100%; }
#msg, .gate-msg { padding: 48px 18px; text-align: center; color: var(--dim); }

/* ---------- 面板 / 卡片 ---------- */
.section, .panel, .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px;
  box-shadow: var(--shadow-soft);
}
.section h2, .panel h2, .card h2 {
  font-size: 14px; color: var(--dim); margin: 0 0 14px; font-weight: 600;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border: 0; padding: 0;
}

/* ---------- 按钮 ---------- */
button { font-family: inherit; }
.btn, button.btn, button.ghost, button.go, button.mini, .menu-btn {
  background: var(--panel2); color: var(--txt);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 16px; font-size: 13px; cursor: pointer;
  transition: all 0.25s var(--ease);
}
.btn:hover, button.ghost:hover, button.go:hover, .menu-btn:hover {
  border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-soft);
}
.btn:active, button.ghost:active, button.go:active { transform: scale(0.96); }
.btn:disabled, button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.primary, .btn-primary, button.btn.primary {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn.primary:hover, .btn-primary:hover { filter: brightness(1.06); }
.btn.danger, button.danger, .btn-danger {
  background: var(--red-bg); color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent);
}
.btn.on { background: var(--gold-bg); color: var(--gold); border-color: var(--gold); font-weight: 600; }
button.go { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: var(--green-bg); }
button.mini { padding: 4px 12px; font-size: 12px; color: var(--dim); background: transparent; }
button.mini:hover { border-color: var(--accent); color: var(--txt); }
button.mini.del:hover { border-color: var(--red); color: var(--red); }
.icon-btn {
  background: none; border: 1px solid var(--line); border-radius: 12px;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; color: var(--dim); transition: all 0.25s var(--ease);
}
.icon-btn:hover { border-color: var(--accent); color: var(--txt); transform: scale(1.05); }

/* 大按钮（训练卡内） */
.big {
  padding: 12px 24px; font-size: 15px; border-radius: var(--r-pill); font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel2); color: var(--txt);
  transition: all 0.25s var(--spring);
}
.big:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.big:active { transform: scale(0.96); }
.big.primary { background: var(--accent); color: var(--on-accent); border: 0; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.big.know { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 40%, transparent); color: var(--green); }
.big.dunno { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
.big.mic { background: var(--gold-bg); border-color: color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold); }
.big.mic.rec { background: var(--gold); color: var(--gold-bg); animation: pulse 1.5s infinite; }
.big.mic:disabled { opacity: 0.55; transform: none; box-shadow: none; }
button.rec { background: var(--red); color: var(--red-bg); }

/* ---------- 分段控件 ---------- */
.seg, .tabs {
  display: flex; border: 1px solid var(--line); border-radius: var(--r-pill);
  overflow: hidden; background: var(--panel2); flex-wrap: nowrap;
}
.seg button, .tabs button {
  background: transparent; color: var(--dim); border: 0; padding: 8px 16px;
  font-size: 13px; cursor: pointer; transition: all 0.25s var(--ease); white-space: nowrap;
}
.seg button.on, .tabs button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; border-radius: var(--r-pill); }
.seg button:not(.on):hover, .tabs button:not(.on):hover { color: var(--txt); }

/* ---------- 表单 ---------- */
select, input:not([type]), input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], textarea {
  background: var(--panel2); color: var(--txt);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  padding: 8px 12px; font-size: 14px; font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
select { cursor: pointer; }
select option { background: var(--panel); color: var(--txt); }
input[type="number"] { width: 80px; }
select:hover { border-color: var(--accent); }
select:focus, input:focus, textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
textarea { width: 100%; line-height: 1.6; min-height: 100px; resize: vertical; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); }
.chk { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---------- 徽章 / 药丸 / 标签 ---------- */
.pill {
  display: inline-block; background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 3px 12px; font-size: 12px; color: var(--dim);
}
.pill.again { color: var(--red); background: var(--red-bg); border-color: transparent; font-weight: 600; }
.pill.hard { color: var(--gold); background: var(--gold-bg); border-color: transparent; font-weight: 600; }
.pill.good { color: var(--green); background: var(--green-bg); border-color: transparent; font-weight: 600; }
.pill.easy { color: var(--blue); background: var(--blue-bg); border-color: transparent; font-weight: 600; }
.tag, .badge { font-size: 11px; border-radius: var(--r-pill); padding: 2px 9px; border: 1px solid var(--line); color: var(--dim); }
.tag.admin, .badge.mock { color: var(--gold); border-color: var(--gold); }
.tag.banned { color: var(--red); border-color: var(--red); }
.tag.blocked { color: var(--gold); border-color: var(--gold); }
.tag.ai { color: var(--purple); border-color: var(--purple); }
.tag.upload { color: var(--green); border-color: var(--green); }
.badge.rest { color: var(--green); border-color: var(--green); }

/* ---------- 进度条 ---------- */
.progress, .prog .bar, .bar {
  height: 8px; background: var(--panel2); border-radius: var(--r-pill); overflow: hidden;
}
.progress > div, .bar > div, .bar > i {
  display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill);
  width: 0; transition: width 0.5s var(--ease);
}
.bar.review > div { background: var(--purple); }
.bar.newq > div { background: var(--accent); }
.scanbar { height: 6px; background: var(--panel2); border-radius: var(--r-pill); overflow: hidden; margin-top: 10px; }
.scanbar > i { display: block; height: 100%; background: var(--accent); width: 100%; }

/* ---------- 训练主卡（index / plan 今日共用） ---------- */
.card-hero, #card {
  width: min(800px, 94vw);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 40px 28px; min-height: 320px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  box-shadow: var(--shadow-card); position: relative; margin: 0 auto;
}
.dirtag { font-size: 12px; letter-spacing: 1px; color: var(--accent); font-weight: 600;
  background: var(--accent-bg); padding: 4px 12px; border-radius: var(--r-pill); }
.dirtag:empty { display: none; }
.kindtag { font-size: 12px; letter-spacing: 1px; font-weight: 600; padding: 4px 12px; border-radius: var(--r-pill); }
.kindtag.review { color: var(--purple); background: var(--purple-bg); }
.kindtag.newq { color: var(--accent); background: var(--accent-bg); }
.hidebtn {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  background: none; border: 1px solid var(--line); border-radius: 12px;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; padding: 0; cursor: pointer; color: var(--dim);
  transition: all 0.25s var(--ease);
}
.hidebtn:hover { border-color: var(--accent); color: var(--txt); transform: scale(1.05); }
.hidebtn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.star {
  font-size: 24px; background: none; border: 0; cursor: pointer;
  color: var(--line); transition: all 0.25s var(--spring); position: absolute; top: 12px; left: 16px;
}
.star:hover { transform: scale(1.2); color: var(--dim); }
.star.on { color: var(--gold); text-shadow: 0 0 14px color-mix(in srgb, var(--gold) 50%, transparent); position: absolute; }
.prompt { font-size: clamp(28px, 5vw, 48px); font-weight: 700; text-align: center; line-height: 1.25; }
.prompt.zh { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.prompt.corrected { color: var(--gold); }
.prompt.masked { font-size: clamp(20px, 3vw, 30px); font-weight: 600; color: var(--dim); letter-spacing: 1px; cursor: pointer; }
.prompt.sentence { font-size: clamp(18px, 3.2vw, 30px); font-weight: 600; line-height: 1.5; max-width: 780px; }
.promptsub { font-size: 14px; color: var(--dim); }
.promptsub .lab, .ans-sub .lab, .explain .lab, .detail .lab, .promptexp .lab, .exs .lab {
  color: var(--dim); font-size: 12px; margin-right: 6px; border: 1px solid var(--line);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.promptexp {
  color: var(--green); font-size: 15px; line-height: 1.6; text-align: center; max-width: 640px;
  background: var(--green-bg); padding: 8px 16px; border-radius: var(--r-ctl);
}
.promptexp:empty, .cardstat:empty, .promptsub:empty { display: none; }
.cardstat { font-size: 13px; color: var(--dim); background: var(--panel2); padding: 5px 14px; border-radius: var(--r-pill); }
.cardstat .g { color: var(--green); } .cardstat .r { color: var(--red); }
.hint { color: var(--dim); font-size: 14px; min-height: 20px; text-align: center; }
.answer { width: 100%; border-top: 1px solid var(--line); padding-top: 22px; display: none;
  flex-direction: column; gap: 12px; align-items: center; animation: fadeUp 0.35s var(--spring); }
.answer.show { display: flex; }
.ansbox { width: 100%; border-top: 1px solid var(--line); padding-top: 20px; display: flex;
  flex-direction: column; gap: 10px; align-items: center; }
.ansbox:empty { display: none; }
.ans-main { font-size: clamp(26px, 4.5vw, 42px); font-weight: 700; text-align: center;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.ans-main.corrected { color: var(--gold); }
.ans-main.en { font-family: inherit; letter-spacing: -0.5px; }
.ans-en { font-size: clamp(22px, 3.5vw, 34px); font-weight: 700; text-align: center; letter-spacing: -0.5px; }
.ans-sub { font-size: 15px; color: var(--dim); text-align: center; }
.modern { color: var(--gold); font-size: 15px; text-align: center; }
.explain {
  color: var(--green); font-size: 15px; text-align: center; line-height: 1.6; max-width: 640px;
  background: var(--green-bg); padding: 10px 18px; border-radius: var(--r-ctl);
}
.answer .note, .ansbox .note {
  color: var(--red); font-size: 14px; text-align: center; opacity: 1;
  background: var(--red-bg); padding: 8px 16px; border-radius: var(--r-ctl);
}
.detail {
  color: var(--txt); font-size: 14px; line-height: 1.7; max-width: 640px; text-align: left;
  background: var(--panel2); padding: 12px 18px; border-radius: var(--r-ctl);
}
.exs { display: flex; flex-direction: column; gap: 10px; max-width: 640px; width: 100%; }
.exs .lab { display: inline-block; align-self: flex-start; margin-bottom: 4px; }
.ex {
  background: var(--blue-bg); border-radius: var(--r-ctl);
  padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; text-align: left;
}
.ex-en { color: var(--txt); font-size: 14px; line-height: 1.6; }
.ex-zh { color: var(--dim); font-size: 13.5px; line-height: 1.6; padding-top: 6px; border-top: 1px dashed var(--line); }
.hl-word { background: var(--gold-bg); color: var(--gold); padding: 0 4px; border-radius: 4px; font-weight: 600; }
.spk {
  font-size: 0.6em; background: var(--panel2); border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer; color: var(--dim); vertical-align: middle; padding: 6px; line-height: 1; margin-left: 8px;
  transition: all 0.25s var(--spring);
}
.spk:hover { color: var(--accent); border-color: var(--accent); transform: scale(1.12); }
.controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.typewrap { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.typeans { min-width: min(420px, 70vw); border-radius: var(--r-pill); padding: 11px 18px; }
.aihint { font-size: 13px; color: var(--purple); text-align: center; min-height: 18px; }

/* 评分四档 */
.grades { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.gbtn {
  padding: 12px 20px; border-radius: var(--r-pill); font-weight: 600; cursor: pointer; font-size: 15px;
  border: 0; transition: all 0.25s var(--spring); min-width: 92px; font-family: inherit;
}
.gbtn small { display: block; font-size: 11px; opacity: 0.75; font-weight: 400; margin-top: 2px; }
.gbtn.again { background: var(--red-bg); color: var(--red); }
.gbtn.hard { background: var(--gold-bg); color: var(--gold); }
.gbtn.good { background: var(--green-bg); color: var(--green); }
.gbtn.easy { background: var(--blue-bg); color: var(--blue); }
.gbtn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.gbtn:active { transform: scale(0.95); }
.gbtn.preselect { box-shadow: 0 0 0 2px currentColor, var(--shadow-soft); transform: translateY(-2px); }

/* 语音判定框 */
.vverdict {
  width: 100%; max-width: 640px; border-radius: var(--r-ctl); padding: 12px 16px; margin-bottom: 8px;
  font-size: 14px; text-align: center;
}
.vverdict.ok { color: var(--green); background: var(--green-bg); }
.vverdict.warn { color: var(--gold); background: var(--gold-bg); }
.vverdict.bad { color: var(--red); background: var(--red-bg); }
.vverdict .vhead { font-weight: 600; font-size: 15px; }
.vverdict .vreason { margin-top: 6px; color: var(--txt); font-size: 14px; line-height: 1.6; opacity: 0.9; }

/* ---------- 口译共用：评分块 ---------- */
.units { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.unit { border-left: 3px solid var(--line); padding: 8px 12px; background: var(--panel2); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.unit.high { border-left-color: var(--red); }
.unit.mid { border-left-color: var(--gold); }
.unit.low { border-left-color: var(--dim); }
.unit .t { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; }
.unit .pair { font-size: 14px; margin-top: 2px; }
.unit .pair b { color: var(--gold); }
.unit .pair s { color: var(--red); }
.unit .note { color: var(--dim); font-size: 12px; margin-top: 3px; background: none; padding: 0; }
.summary {
  background: var(--blue-bg); border-left: 3px solid var(--blue);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0; padding: 12px 14px; line-height: 1.7; margin-top: 10px;
}
.est, .score .pct { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.score .pct { font-size: 46px; }
.est.pass, .pct.pass { color: var(--green); }
.est.fail, .pct.fail { color: var(--red); }
.score { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.timer { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.timer.warn { color: var(--gold); }
.timer.over { color: var(--red); }
.passage, .box {
  font-size: 17px; line-height: 1.85; white-space: pre-wrap;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--r-ctl); padding: 16px;
}
.passage { max-height: 46vh; overflow: auto; }
.passage.cn, .box.cn { font-size: 18px; }
.legend {
  background: var(--panel2); border-radius: var(--r-ctl);
  padding: 12px 14px; font-size: 12px; color: var(--dim); line-height: 1.9;
}
.legend b { color: var(--gold); }
.hist { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--dim); }
.hist .h { background: var(--panel2); border-radius: var(--r-ctl); padding: 5px 12px; }
.hist button { margin-left: 6px; background: transparent; color: var(--accent); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 10px; cursor: pointer; }
.hist button:disabled { opacity: 0.55; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }
.col h3 { font-size: 13px; color: var(--dim); margin: 0 0 8px; }

/* ---------- 表格 ---------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--dim); font-weight: 600; font-size: 12px; white-space: nowrap; }
tr:hover > td { background: color-mix(in srgb, var(--panel2) 55%, transparent); }

/* ---------- KPI ---------- */
.kpis, .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-soft); }
.kpi .n { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--dim); font-size: 12px; margin-top: 4px; }
.kpi.good .n { color: var(--green); }
.kpi.warn .n { color: var(--gold); }
.kpi.dim2 .n { color: var(--dim); }
.kpi.star .n { color: var(--gold); }
.kpi.acc .n { color: var(--accent); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 8px 16px; font-size: 13px; color: var(--dim); box-shadow: var(--shadow-soft); }
.chip b { font-size: 20px; color: var(--txt); font-variant-numeric: tabular-nums; }
.chip.exam b { color: var(--gold); }
.chip.reg b { color: var(--accent); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(10px);
  background: var(--green-bg); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  padding: 10px 20px; border-radius: var(--r-pill); font-size: 13px; opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--spring);
  pointer-events: none; z-index: 300; box-shadow: var(--shadow-soft);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--red-bg); color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }

/* ---------- 弹窗 ---------- */
.modal {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 15, 10, 0.55); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 16px;
}
.modal.show, .modal[data-open] { display: flex; }
.modal-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card);
  max-width: 560px; width: 100%; max-height: 88vh; overflow: auto; padding: 24px;
  box-shadow: var(--shadow-card); animation: sheetIn 0.3s var(--spring);
}
.modal-x { background: transparent; border: 0; color: var(--dim); font-size: 22px; cursor: pointer; line-height: 1; }

/* ---------- 登录闸门 ---------- */
.auth-gate, #authGate {
  position: fixed; inset: 0; z-index: 1000;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 30px; text-align: center;
}
#authGate h2 { margin: 0; font-size: 26px; color: var(--txt); font-weight: 700; }
#authGate p { margin: 0; color: var(--dim); font-size: 15px; max-width: 460px; line-height: 1.6; }
#authMsg { color: var(--accent); font-size: 14px; min-height: 20px; max-width: 460px; }
.gate-input {
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-ctl);
  color: var(--txt); padding: 10px 12px; font-size: 14px; width: 100%;
}
.gate-link { background: transparent; border: 0; color: var(--accent); font-size: 13px; cursor: pointer; text-decoration: underline; }
.gate-submit {
  background: var(--accent); border: 0; color: var(--on-accent); border-radius: var(--r-pill);
  padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer; width: 100%;
}

/* ---------- 设置面板（settings.js 渲染） ---------- */
.settings-panel {
  display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; font-size: 13px;
  padding: 14px; background: var(--panel2); border-radius: var(--r-ctl); width: 100%;
}
.settings-grp { display: flex; align-items: center; gap: 6px; color: var(--dim); }
.settings-grp select { max-width: 180px; padding: 6px 10px; }
.settings-sep { flex-basis: 100%; height: 0; }
.settings-panel input[type="number"] { width: 60px; padding: 6px 10px; }

/* ---------- 动效 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cardEnter { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.card-enter { animation: cardEnter 0.45s var(--spring); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 50%, transparent); }
  70% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes flashOk {
  0% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 55%, transparent), var(--shadow-card); }
  100% { box-shadow: var(--shadow-card); }
}
@keyframes flashBad {
  0% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 55%, transparent), var(--shadow-card); transform: translateX(-8px); }
  25% { transform: translateX(8px); }
  50% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
  100% { box-shadow: var(--shadow-card); transform: translateX(0); }
}
@keyframes flashSoft {
  0% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 45%, transparent), var(--shadow-card); }
  100% { box-shadow: var(--shadow-card); }
}
.flash-ok { animation: flashOk 0.7s ease-out !important; }
.flash-bad { animation: flashBad 0.5s ease-out !important; }
.flash-soft { animation: flashSoft 0.6s ease-out !important; }
.popbadge {
  position: fixed; transform: translate(-50%, 0); z-index: 250; pointer-events: none;
  font-size: 21px; font-weight: 700; white-space: nowrap;
  animation: popUp 0.9s var(--spring) forwards;
}
@keyframes popUp {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.8); }
  22% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -44px) scale(1); }
}

/* ---------- 专注模式 ---------- */
#appShell, footer.kbd-help { transition: opacity 0.6s var(--ease); }
body.focusing #appShell, body.focusing footer.kbd-help, body.focusing .powered { opacity: 0.12; }
body.focusing #appShell:hover, body.focusing footer.kbd-help:hover { opacity: 1; }

/* ---------- 响应式 ---------- */
@media (max-width: 679px) {
  .topbar .nav-links { display: none; }
  .tabbar { display: flex; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  main { padding: 14px 12px; gap: 14px; }
  .section, .panel, .card { padding: 16px; border-radius: 20px; }
  .card-hero, #card { padding: 28px 18px; }
  .prompt { font-size: clamp(24px, 6vw, 34px); }
  footer.kbd-help { display: none; }
}
@media (min-width: 680px) {
  .tabbar, .tab-sheet { display: none !important; }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}