/* ============ Design Tokens（设计文档 v1.0 · 方案A 科技浅蓝） ============ */
:root {
  --primary: #185FA5;
  --primary-dark: #0C447C;
  --primary-bg: #E6F1FB;
  --primary-line: #B5D4F4;
  --bg: #F5F7F9;
  --surface: #FCFDFE;
  --card: #FFFFFF;
  --divider: #ECF0F4;
  --border: #E1E6EB;
  --text: #26282B;
  --text2: #5F5E5A;
  --text3: #888780;
  --text4: #B4B2A9;
  --danger: #A32D2D;
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.75;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--surface); position: relative; box-shadow: 0 0 40px rgba(12,68,124,.06); }
@media (max-width: 520px) { #app { box-shadow: none; } }

/* ============ 通用组件 ============ */
.page-pad { padding: 24px 24px 96px; }
.h-page { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.sub { font-size: 12px; color: var(--text3); }
.sub2 { font-size: 11px; color: var(--text4); }
.hairline { border: 0; border-top: 1px solid var(--divider); margin: 16px 0; }
.btn-primary {
  display: block; width: 100%; text-align: center; background: var(--primary); color: #fff;
  border: 0; border-radius: 999px; padding: 13px; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.btn-primary:active { background: var(--primary-dark); }
.btn-ghost {
  display: block; width: 100%; text-align: center; background: transparent; color: var(--primary);
  border: 1px solid var(--primary); border-radius: 999px; padding: 12px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.list-row {
  display: flex; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--divider);
  cursor: pointer; background: none; width: 100%; border-left: 0; border-right: 0; border-top: 0;
  font-family: inherit; font-size: 15px; color: var(--text); text-align: left;
}
.list-row:last-child { border-bottom: 0; }
.list-row b { font-weight: 600; font-size: 14px; }
.list-row .mut { color: var(--text3); font-size: 12px; margin-left: 8px; }
.list-row .chev { margin-left: auto; color: var(--text4); }
.card { background: var(--card); border: 1px solid var(--divider); border-radius: 12px; padding: 6px 18px; margin-bottom: 22px; }
.chip-mini { font-size: 11px; padding: 2px 10px; border-radius: 999px; background: var(--primary-bg); color: var(--primary); font-weight: 600; }
.dot-danger { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); margin-left: 6px; }
.progress { height: 6px; background: var(--divider); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.progress > i { display: block; height: 6px; background: var(--primary); border-radius: 999px; }

/* 分段器（轻量文字 tab） */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--divider); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs span { color: var(--text3); font-size: 13px; padding: 0 0 8px; cursor: pointer; white-space: nowrap; }
.tabs span.on { color: var(--text); font-weight: 600; border-bottom: 2px solid var(--primary); margin-bottom: -1px; }

/* 模式切换 */
.mode-sw { display: flex; background: var(--bg); border-radius: 999px; padding: 3px; margin-bottom: 16px; }
.mode-sw span { flex: 1; text-align: center; font-size: 13px; color: var(--text3); padding: 7px 0; border-radius: 999px; cursor: pointer; }
.mode-sw span.on { background: #fff; color: var(--primary); font-weight: 600; box-shadow: 0 1px 4px rgba(12,68,124,.10); }

/* ============ 底部导航 ============ */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px;
  background: rgba(252,253,254,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--divider);
  display: flex; padding: 6px 0 calc(10px + env(safe-area-inset-bottom)); z-index: 50;
}
.tabbar a { flex: 1; text-align: center; font-size: 11px; color: var(--text4); text-decoration: none; cursor: pointer; }
.tabbar a .ti { display: block; font-size: 19px; line-height: 1.3; }
.tabbar a.on { color: var(--primary); font-weight: 600; }

/* ============ Onboarding ============ */
.ob-step { font-size: 12px; color: var(--text3); margin-bottom: 2px; }
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.pill { border: 1px solid var(--border); color: var(--text2); border-radius: 999px; padding: 7px 15px; font-size: 13px; cursor: pointer; }
.pill.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
input.txt, textarea.txt {
  width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  font-size: 15px; font-family: inherit; margin: 10px 0 16px; background: #fff; color: var(--text); outline: none;
}
input.txt:focus { border-color: var(--primary-line); }

/* ============ 对话页 ============ */
.chat-head { display: flex; align-items: baseline; padding-top: 22px; }
.chat-src { font-size: 11px; color: var(--text4); margin-bottom: 14px; }
.msgs { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; max-height: calc(100vh - 340px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.msg { display: flex; gap: 10px; }
.msg .ava {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 600;
}
.msg.ava-e .ava { background: var(--primary-bg); color: var(--primary); }
.msg.ava-b { justify-content: flex-end; }
.msg.ava-b .ava { background: var(--divider); color: var(--text2); order: 2; }
.bubble { border-radius: 4px 14px 14px 14px; padding: 10px 14px; font-size: 15px; font-weight: 600; line-height: 1.6; max-width: 340px; }
.msg.ava-e .bubble { background: var(--bg); }
.msg.ava-b .bubble { background: var(--primary-bg); border-radius: 14px 4px 14px 14px; }
.bubble .hl { color: var(--primary); }
.msg .lat { font-size: 10px; color: var(--text4); margin-top: 3px; font-weight: 400; }

/* ---- 中英对照：气泡下方补一行中文译文 ---- */
.msg .col { display: flex; flex-direction: column; max-width: 340px; }
.msg.ava-b .col { align-items: flex-end; }
.bub-zh {
  font-size: 12.5px; font-weight: 400; color: var(--text3); line-height: 1.65;
  margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--divider); max-width: 340px;
}
.msg.ava-b .bub-zh { text-align: right; }

/* ---- 单词卡的来源标签 ---- */
.wtag { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 20px; white-space: nowrap; }
.wtag.used { background: var(--primary-bg); color: var(--primary); }
.wtag.new { background: #E9F5EC; color: #2E7D4F; }
.wtag.target { background: var(--divider); color: var(--text2); }
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-line); animation: tp 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes tp { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* 解析卡 */
.parse-card { margin: 2px 0 4px 42px; animation: fadein .4s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
.pc-head { display: flex; align-items: center; gap: 7px; margin: 12px 0 4px; }
.pc-head .dot { width: 6px; height: 6px; border-radius: 50%; }
.pc-head span { font-size: 11px; color: var(--text3); }
.pc-body { font-size: 13px; color: #444441; line-height: 1.7; }
.pc-body .w { line-height: 1.9; }
.pc-act { margin-top: 8px; font-size: 12px; color: var(--primary); cursor: pointer; }

/* 录音区 */
.rec-zone { position: fixed; bottom: calc(62px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px;
  background: var(--surface); border-top: 1px solid var(--divider); padding: 14px 0 14px; text-align: center; z-index: 60; }
.rec-btn {
  width: 60px; height: 60px; border-radius: 50%; background: var(--primary); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all .2s;
}
.rec-btn i { width: 18px; height: 18px; border-radius: 50%; background: #fff; display: block; }
.rec-btn.recording { background: var(--danger); animation: pulse 1.2s infinite; }
.rec-btn.recording i { width: 16px; height: 16px; border-radius: 4px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(163,45,45,.35); } 70% { box-shadow: 0 0 0 14px rgba(163,45,45,0); } 100% { box-shadow: 0 0 0 0 rgba(163,45,45,0); } }
.rec-hint { font-size: 12px; color: var(--text3); margin-top: 8px; }
.txt-input-row { display: flex; gap: 8px; margin-top: 10px; padding: 0 24px; }
.txt-input-row input { flex: 1; }
.txt-input-row button { border: 0; background: var(--primary); color: #fff; border-radius: 12px; padding: 0 18px; font-family: inherit; cursor: pointer; }

/* 关卡 */
.gate { flex: 1; text-align: center; padding: 13px 4px; border: 1px solid var(--divider); border-radius: 12px; }
.gate.done { border-color: var(--primary-line); background: var(--primary-bg); }
.gate.now { border-color: var(--primary); }
.gate.off { opacity: .38; }
.gate .gi { font-size: 15px; } .gate .gt { font-weight: 600; font-size: 12px; margin-top: 2px; } .gate .gs { color: var(--primary); font-size: 10px; }
.gate.off .gs { color: var(--text4); }

/* 单词卡 */
.word-card { background: #fff; border: 1px solid var(--divider); border-radius: 14px; padding: 20px 22px; margin-bottom: 12px; }
.word-card h4 { font-size: 17px; font-weight: 600; }
.word-card .ph { color: var(--text3); font-size: 12px; font-weight: 400; margin-left: 6px; }
.word-card .sen { font-style: italic; color: var(--text2); font-size: 13px; margin-top: 8px; }
.wc-acts { display: flex; gap: 10px; margin-top: 14px; }
.wc-acts button { flex: 1; border: 1px solid var(--divider); background: none; border-radius: 999px; padding: 9px 0; font-size: 12px; color: var(--text2); font-family: inherit; cursor: pointer; }
.wc-acts button.go { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* Toast */
#toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-60px); background: rgba(38,40,43,.9); color: #fff;
  font-size: 13px; padding: 9px 20px; border-radius: 999px; transition: transform .25s; z-index: 99; pointer-events: none; }
#toast.show { transform: translateX(-50%) translateY(0); }

/* 徽章/统计卡 */
.stat3 { display: flex; gap: 10px; margin-bottom: 16px; }
.stat3 > div { flex: 1; background: var(--primary-bg); border-radius: 12px; padding: 12px; text-align: center; }
.stat3 b { display: block; font-size: 15px; font-weight: 600; color: var(--primary-dark); }
.stat3 span { font-size: 11px; color: var(--text2); }
.diag { background: var(--bg); border-radius: 12px; padding: 12px 16px; font-size: 13px; color: #444441; margin-bottom: 16px; }

/* 单元行 */
.unit-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bg); gap: 10px; }
.unit-row .ck { width: 18px; height: 18px; border: 1px solid var(--border); border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.unit-row.sel .ck { background: var(--primary); border-color: var(--primary); }
.unit-row b { font-weight: 600; font-size: 13px; }
.unit-row .st { margin-left: auto; font-size: 11px; color: var(--text4); }
.unit-row .st.done { color: var(--primary); }
.unit-row .st.now { color: var(--primary); font-weight: 600; }

/* 资源池筛选器 */
.filters { margin: 0 0 12px; }
.fl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.fl-l { font-size: 11px; color: var(--text3); width: 34px; flex-shrink: 0; }
.fp { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--text2); cursor: pointer; }
.fp.on { background: var(--primary); color: #fff; font-weight: 600; }

/* 教材资源池书本卡片 */
.tb-book { border: 1px solid var(--border); border-radius: 14px; padding: 4px 14px 10px; margin-bottom: 12px; }
.tb-book-head { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; border-bottom: 1px solid var(--bg); }
.tb-book-head b { font-size: 14px; font-weight: 700; color: var(--primary-dark); }

/* 作文素材卡片 */
.wr-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.wr-head { display: flex; align-items: center; gap: 8px; }
.wr-head b { font-size: 14px; font-weight: 700; color: var(--primary-dark); }
.wr-cat { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--bg); color: var(--text2); }
.wr-exam { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--primary-bg); color: var(--primary); }
.wr-lead { font-size: 12px; color: var(--text3); margin: 8px 0 10px; line-height: 1.6; }
.wr-kw { font-size: 12px; color: var(--text2); margin-bottom: 8px; }
.wr-kw b { color: var(--primary); font-weight: 600; }
.wr-sen { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px dashed var(--bg); }
.wr-sen .en { font-size: 13px; color: #444441; flex: 1; line-height: 1.5; }
.wr-sen .zh { font-size: 12px; color: var(--text3); line-height: 1.5; }
.wr-sen .tag { font-size: 10px; color: var(--text4); flex-shrink: 0; padding-top: 2px; }
.wr-sen-last { border-bottom: none; }
.wr-patterns { margin-top: 8px; font-size: 12px; color: var(--text2); line-height: 1.7; }
.wr-patterns span { color: var(--primary); }

/* 考点频率标签（年级>=8 显示） */
.exam-freq { font-size: 10px; padding: 1px 6px; border-radius: 999px; white-space: nowrap; margin-left: 4px; font-weight: 600; }
.exam-freq.high { background: #FDEBEB; color: #C62828; }
.exam-freq.mid { background: #FFF4E0; color: #E67E22; }
.exam-freq.low { background: var(--bg); color: var(--text3); }

/* 语法地图分组 */
.gp-stage { font-size: 13px; font-weight: 700; color: var(--primary-dark); margin: 16px 0 4px; padding: 6px 10px; background: var(--primary-bg); border-radius: 8px; }
.gp-live { font-size: 10px; color: var(--primary); background: var(--primary-bg); padding: 1px 7px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.gp-stage + .list-row { border-top: none; }
.list-row .mut { flex: 1; margin-left: 10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

/* ============ 记单词板块 ============ */
.wp-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.wp-head { display: flex; align-items: center; gap: 8px; }
.wp-head b { font-size: 14px; font-weight: 700; color: var(--primary-dark); }
.wp-level { font-size: 10px; padding: 1px 8px; border-radius: 999px; background: var(--primary-bg); color: var(--primary); margin-left: auto; }
.wp-intro { font-size: 12px; color: var(--text3); margin: 6px 0 10px; line-height: 1.6; }
.wp-rule { padding: 7px 0; border-top: 1px dashed var(--bg); }
.wp-pat { font-size: 13px; font-weight: 600; color: var(--text); }
.wp-words { font-size: 13px; color: var(--primary); margin: 2px 0; }
.wp-tip { font-size: 11px; color: var(--text3); }
.wp-point { font-size: 13px; color: #444441; padding: 4px 0; line-height: 1.6; }
.ebb-row { display: flex; gap: 6px; margin-top: 8px; }
.ebb { flex: 1; text-align: center; font-size: 11px; color: var(--primary); background: var(--primary-bg); border-radius: 8px; padding: 6px 0; }
.ebb b { display: block; font-size: 12px; }
.wp-book { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; cursor: pointer; }
.wp-book b { font-size: 14px; font-weight: 600; }
.wp-book .mut { font-size: 11px; color: var(--text3); margin-left: 8px; }
.wp-book .st { font-size: 11px; color: var(--primary); float: right; }
.wp-book-prog { height: 5px; background: var(--divider); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.wp-book-prog i { display: block; height: 5px; background: var(--primary); border-radius: 999px; }
.wp-progress { height: 6px; background: var(--divider); border-radius: 999px; overflow: hidden; margin: 8px 0 12px; }
.wp-progress i { display: block; height: 6px; background: var(--primary); border-radius: 999px; }
.quiz-card { background: #fff; border: 1px solid var(--divider); border-radius: 14px; padding: 20px 18px; }
.quiz-q { font-size: 15px; font-weight: 600; }
.quiz-ph { font-size: 12px; color: var(--text3); margin: 4px 0 14px; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-opt { border: 1px solid var(--border); background: var(--bg); border-radius: 10px; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--text); font-family: inherit; cursor: pointer; }
.quiz-opt:active { border-color: var(--primary); color: var(--primary); }

/* ============ 自定义上传板块 ============ */
.up-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.up-head { display: flex; align-items: center; gap: 8px; }
.up-head b { font-size: 15px; font-weight: 700; color: var(--primary-dark); }
.up-tag { font-size: 10px; padding: 1px 8px; border-radius: 999px; background: var(--bg); color: var(--text2); }
.up-kw { font-size: 12px; color: var(--text2); margin: 10px 0; }
.up-kw b { color: var(--primary); }
.up-q { font-size: 12px; color: var(--text3); margin-bottom: 6px; }
.up-qline { font-size: 13px; color: #444441; padding: 3px 0; line-height: 1.6; }
.up-drop { border: 2px dashed var(--primary-line); border-radius: 14px; padding: 30px 20px; text-align: center; color: var(--text2); cursor: pointer; background: var(--primary-bg); }

/* ===== 首页双主入口 ===== */
.home-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.hero-card { border: 1px solid var(--border); border-radius: 16px; padding: 18px 16px; cursor: pointer; background: #fff; }
.hero-card:active { border-color: var(--primary); }
.hero-card:first-child { background: linear-gradient(135deg, var(--primary-bg), #fff); }
.hero-card:last-child { background: linear-gradient(135deg, #FFF7E8, #fff); }
.hero-ico { font-size: 26px; }
.hero-title { font-size: 16px; font-weight: 700; margin-top: 8px; }
.hero-sub { font-size: 11px; color: var(--text3); margin-top: 3px; }

/* ===== 记单词：tab 角标 / 空状态 / 拼写题 ===== */
.tab-dot { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; text-align: center; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: var(--danger); border-radius: 999px; margin-left: 3px; padding: 0 4px; }
.empty-card { text-align: center; padding: 40px 20px; border: 1px dashed var(--border); border-radius: 14px; color: var(--text2); }
.quiz-sense { font-size: 13px; color: var(--text2); margin: 4px 0 12px; }
.quiz-mask { font-size: 24px; font-weight: 700; letter-spacing: 6px; color: var(--primary-dark); margin: 10px 0 14px; }

/* ===== 记单词两阶段：学新词教学卡 ===== */
.teach-card { padding: 18px 18px; }
.teach-hint { font-size: 12px; color: var(--text2); padding: 7px 0; border-top: 1px dashed var(--divider); line-height: 1.6; }
.teach-hint b { color: var(--primary-dark); }
.teach-hint .syl { color: var(--primary); font-weight: 700; letter-spacing: 1px; }

/* ===== 书籍来源标注 + 出国旅游主题实用句 ===== */
.teach-src { font-size: 11px; color: var(--text3); margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--divider); }
.phrase-box { background: var(--bg); border-radius: 12px; padding: 10px 12px; margin: 2px 0 10px; }
.phrase-line { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--divider); }
.phrase-line:last-of-type { border-bottom: none; }
.phrase-line b { display: block; font-size: 13px; }
.phrase-line .mut { display: block; font-size: 12px; margin-top: 2px; }
.phrase-line > div { flex: 1; }
.ph-say { border: none; background: var(--primary-bg); color: var(--primary); width: 34px; height: 34px; border-radius: 50%; font-size: 15px; cursor: pointer; flex-shrink: 0; }

/* ===== 彩色音组拆分（《初中生你得这样背单词》右脑图像记忆） ===== */
.color-word { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 10px 0 6px; }
.color-chunk {
  padding: 3px 9px; border-radius: 9px; font-weight: 700; font-size: 20px; letter-spacing: 0.5px;
  color: #fff; line-height: 1.3; font-family: "Georgia", "Times New Roman", serif;
}
.color-chunk.lg { font-size: 26px; padding: 5px 11px; }
.color-sep { color: var(--text4); font-size: 16px; font-weight: 700; margin: 0 2px; }
.color-caption { font-size: 11px; color: var(--text3); margin-top: 4px; }

/* 听写逐字母反馈 */
.dict-row { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 12px 0 6px; }
.dict-cell {
  width: 40px; height: 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; font-family: "Georgia", serif;
  border: 2px solid var(--border); background: var(--bg); color: var(--text);
}
.dict-cell.fill { border-color: var(--primary); background: var(--surface); }
.dict-cell.right { border-color: #2e8b57; background: #e8f5ec; color: #2e8b57; }
.dict-cell.wrong { border-color: var(--danger); background: #fbeaea; color: var(--danger); }
.dict-cell.miss { border-color: var(--text4); background: transparent; color: var(--text4); }

/* 听写主卡 */
.dict-card { background: #fff; border: 1px solid var(--divider); border-radius: 14px; padding: 20px 18px; text-align: center; }
.dict-play {
  width: 72px; height: 72px; border-radius: 50%; border: none; background: var(--primary);
  color: #fff; font-size: 30px; cursor: pointer; box-shadow: 0 6px 16px rgba(24,95,165,.28);
  transition: transform .12s;
}
.dict-play:active { transform: scale(.92); }
.dict-input {
  width: 100%; max-width: 260px; margin: 14px auto 0; display: block; text-align: center;
  font-size: 24px; letter-spacing: 6px; font-weight: 700; font-family: "Georgia", serif;
  border: 2px solid var(--border); border-radius: 12px; padding: 12px 8px; outline: none;
}
.dict-input:focus { border-color: var(--primary); }

/* ===== 每日记单词计划卡（记单词页最顶部） ===== */
.daily-card { background: linear-gradient(135deg, #185FA5 0%, #0C447C 100%); border-radius: 16px; padding: 16px 18px; color: #fff; margin-top: 14px; box-shadow: 0 8px 20px rgba(12,68,124,.22); }
.daily-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.daily-title { font-size: 17px; font-weight: 700; }
.daily-sub { font-size: 12px; color: rgba(255,255,255,.82); margin-top: 2px; }
.daily-goal { display: flex; gap: 6px; flex-shrink: 0; }
.goal-chip { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); color: rgba(255,255,255,.85); cursor: pointer; }
.goal-chip.on { background: #fff; color: #0C447C; border-color: #fff; }
.daily-meter { margin-top: 14px; }
.daily-num { display: flex; align-items: baseline; gap: 4px; }
.daily-num b { font-size: 30px; font-weight: 800; }
.daily-num span { font-size: 13px; color: rgba(255,255,255,.82); }
.daily-left { margin-left: auto; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.18); padding: 3px 10px; border-radius: 999px; }
.daily-done { margin-left: auto; font-size: 12px; font-weight: 700; color: #FFE9A8; }
.daily-bar { height: 8px; background: rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.daily-bar i { display: block; height: 8px; background: #7FD1AE; border-radius: 999px; transition: width .3s; }
.daily-list { margin-top: 14px; }
.daily-done-row { font-size: 12px; color: #C9F0DD; margin-bottom: 8px; line-height: 1.8; }
.daily-todo-row { font-size: 12px; color: rgba(255,255,255,.8); line-height: 1.9; }
.daily-todo-label { font-weight: 600; color: #fff; }
.daily-word { display: inline-block; padding: 2px 8px; margin: 2px 3px 2px 0; border-radius: 6px; background: rgba(255,255,255,.16); color: #fff; font-weight: 600; font-size: 12px; }
.daily-word.done { background: #7FD1AE; color: #0C447C; text-decoration: none; }
.daily-card .btn-primary { background: #fff; color: #0C447C; }
.daily-card .mut { color: rgba(255,255,255,.7); }

/* ===== 数字人音色选择面板 ===== */
.voice-menu { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; margin: 8px 0; background: var(--surface); }
.voice-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px; border-radius: 10px; cursor: pointer; }
.voice-item.on { background: var(--primary-bg); }
.voice-info { display: flex; flex-direction: column; gap: 2px; }
.voice-info b { font-size: 14px; color: var(--text); }
.voice-info .mut { font-size: 11px; }
.voice-acts { display: flex; align-items: center; gap: 8px; }
.voice-try { border: none; background: var(--primary-bg); color: var(--primary); width: 34px; height: 34px; border-radius: 50%; font-size: 15px; cursor: pointer; }
.voice-try:active { transform: scale(.92); }
.voice-check { color: var(--primary); font-weight: 700; font-size: 16px; }