:root {
  --bg: #0e1116;
  --panel: #161b23;
  --panel2: #1d232d;
  --text: #e8edf4;
  --muted: #8b98a9;
  --accent: #4d8bff;
  --good: #35c48a;
  --warn: #ffb84d;
  --danger: #ff6b6b;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #232a35; position: sticky; top: 0;
  background: rgba(14,17,22,.92); backdrop-filter: blur(8px); z-index: 5;
}
.brand { font-weight: 600; letter-spacing: .3px; }
.topright { display: flex; align-items: center; gap: 10px; }
select {
  background: var(--panel2); color: var(--text); border: 1px solid #2b3440;
  border-radius: 8px; padding: 6px 10px; font-size: 14px;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); display: inline-block; }
.dot.ok { background: var(--good); }
.dot.bad { background: var(--danger); }

main { max-width: 880px; margin: 0 auto; padding: 16px; }
.view { display: none; }
.view.active { display: block; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.stat {
  background: var(--panel); border: 1px solid #232a35; border-radius: var(--radius);
  padding: 10px 12px; text-align: center;
}
.stat b { display: block; font-size: 20px; }
.stat span { color: var(--muted); font-size: 12px; }

.section-title { font-size: 15px; color: var(--muted); font-weight: 500; margin: 18px 0 10px; }
.scenarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.scenario {
  background: var(--panel); border: 1px solid #232a35; border-radius: var(--radius);
  padding: 12px; cursor: pointer; transition: .15s; text-align: left; color: var(--text);
}
.scenario:hover { border-color: var(--accent); transform: translateY(-1px); }
.scenario .emoji { font-size: 22px; }
.scenario .zh { font-weight: 600; margin-top: 4px; }
.scenario .en { color: var(--muted); font-size: 12px; }
.scenario .lvl { float: right; color: var(--muted); font-size: 11px; border: 1px solid #2b3440; border-radius: 6px; padding: 0 5px; }

.card { background: var(--panel); border: 1px solid #232a35; border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.card h3 { margin: 0 0 10px; font-size: 14px; color: var(--muted); font-weight: 500; }
.row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 680px) { .row-split { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2,1fr);} }

.due-list, .recent-list, .vocab-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow: auto; }
.due-item, .recent-item, .vocab-item {
  background: var(--panel2); border-radius: 10px; padding: 8px 10px; font-size: 14px;
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
}
.muted { color: var(--muted); font-size: 12px; }

button { font: inherit; cursor: pointer; border-radius: 10px; border: 1px solid #2b3440; background: var(--panel2); color: var(--text); padding: 8px 14px; }
button:hover { border-color: #3a4757; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.ghost { background: transparent; }
button.danger { color: var(--danger); border-color: #4a2b2b; }
button.sm { padding: 4px 10px; font-size: 13px; }

/* ---------- talk ---------- */
.talk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.scene-name { font-weight: 600; }
.transcript { display: flex; flex-direction: column; gap: 10px; min-height: 45vh; max-height: 60vh; overflow-y: auto; padding: 6px 2px 90px; }
.msg { max-width: 82%; padding: 10px 13px; border-radius: 14px; position: relative; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: #1f3f6b; border-bottom-right-radius: 4px; }
.msg.ai { align-self: flex-start; background: var(--panel2); border-bottom-left-radius: 4px; }
.msg .who { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.correction {
  align-self: flex-end; max-width: 82%; background: #2a2416; border: 1px solid #4a3d1c;
  border-radius: 10px; padding: 8px 11px; font-size: 13px; color: #f0d9a6;
}
.correction s { color: #b07b7b; }
.correction b { color: var(--good); }
.pending { align-self: center; color: var(--muted); font-size: 13px; }

.talk-foot { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 40%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.talk-btn {
  width: 168px; height: 56px; border-radius: 28px; background: var(--accent); border: none;
  color: #fff; font-weight: 600; font-size: 16px; box-shadow: 0 6px 24px rgba(77,139,255,.35);
  user-select: none; touch-action: none;
}
.talk-btn.recording { background: var(--danger); box-shadow: 0 6px 24px rgba(255,107,107,.4); transform: scale(.97); }
.talk-btn:disabled { opacity: .45; box-shadow: none; }
.hint { color: var(--muted); font-size: 12px; }

/* ---------- summary ---------- */
.score-big { font-size: 34px; font-weight: 700; color: var(--accent); }
.err-item { background: var(--panel2); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; font-size: 14px; }
.err-item .tag { font-size: 11px; color: var(--muted); border: 1px solid #2b3440; border-radius: 5px; padding: 0 5px; margin-right: 6px; }
.row-actions { display: flex; gap: 10px; margin-top: 16px; }
.review-box { min-height: 60px; }
.review-card { text-align: center; padding: 8px; }
.review-word { font-size: 24px; font-weight: 700; margin: 6px 0; }
.review-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }

/* ---------- syllabus ---------- */
.lvl-badge {
  background: var(--accent); color: #fff; font-weight: 700; font-size: 12px;
  border-radius: 8px; padding: 3px 8px;
}
.progress-note { color: var(--muted); font-size: 13px; margin: -6px 0 14px; }
.chapters { display: flex; flex-direction: column; gap: 12px; }
.chapter { background: var(--panel); border: 1px solid #232a35; border-radius: var(--radius); overflow: hidden; }
.chapter.locked { opacity: .55; }
.chapter-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid #1e242e; }
.chapter-head .emoji { font-size: 22px; }
.chapter-title { font-weight: 600; }
.chapter-sub { color: var(--muted); font-size: 12px; }
.obj-list { display: flex; flex-direction: column; }
.obj {
  display: flex; gap: 10px; padding: 11px 14px; cursor: pointer; align-items: flex-start;
  border-top: 1px solid #1a2028;
}
.obj:first-child { border-top: none; }
.obj:hover { background: #1a212b; }
.obj.locked { cursor: not-allowed; opacity: .5; }
.obj.passed .mark { color: var(--good); }
.obj .mark { width: 18px; color: var(--muted); font-size: 13px; }
.obj-body { flex: 1; }
.obj-title { font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
  background: #202836; border: 1px solid #2b3440; border-radius: 8px;
  padding: 2px 8px; font-size: 12px; cursor: pointer; color: #cfe0ff;
}
.chip:hover { border-color: var(--accent); }
.chip.hit { background: #17321f; border-color: #2e6b45; color: #8ee0b0; }
.chip.big { font-size: 14px; padding: 5px 10px; }
.chip.big i { color: var(--muted); font-style: normal; font-size: 11px; margin-left: 4px; }
.wordstrip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.objective-bar { background: var(--panel); border: 1px solid #232a35; border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.can-do { font-size: 14px; }
.pass-banner { border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; background: var(--panel2); }
.pass-banner.ok { background: #14301f; border: 1px solid #2e6b45; }
.pass-banner.no { background: #33231a; border: 1px solid #6b4a2e; }
.pass-banner b { display: block; margin-bottom: 4px; }
.scenarios.small { display: flex; flex-wrap: wrap; gap: 8px; }
.scenarios.small .scenario { width: auto; padding: 7px 12px; }
.muted-card { margin-top: 16px; }

/* ---------- drill panel ---------- */
.drill-panel {
  background: linear-gradient(180deg, #1b2536, #161b23);
  border: 1px solid #2b3440; border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
}
.drill-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.drill-progress { color: var(--muted); font-size: 12px; }
.drill-zh { color: #9fb3cc; font-size: 13px; margin-bottom: 6px; }
.drill-target { font-size: 21px; font-weight: 700; line-height: 1.4; color: #eaf1ff; }
.drill-feedback { margin-top: 8px; font-size: 13px; color: #f0d9a6; min-height: 18px; }
button.sm { padding: 3px 9px; font-size: 12px; }

/* ---------- 消息流（短信样式） ---------- */
.bubble-row { display: flex; margin-bottom: 10px; }
.bubble-row.me { justify-content: flex-end; }
.bubble-row.sys { justify-content: center; }
.bubble {
  max-width: 84%; background: var(--panel2); border: 1px solid #232a35;
  border-radius: 16px; padding: 9px 13px; box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.bubble.me { background: #1f3f6b; border-color: #2a4f80; border-bottom-right-radius: 5px; }
.bubble.coach, .bubble.ai { border-bottom-left-radius: 5px; }
.bubble-meta { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.bubble-text { white-space: pre-wrap; line-height: 1.5; }
.zh { color: #9fb3cc; font-size: 12.5px; margin-top: 5px; line-height: 1.45; }
.bubble.coach.drill { background: linear-gradient(180deg, #1b2536, #161b23); border-color: #2b3440; }
.drill-zh { color: #9fb3cc; font-size: 13px; margin-bottom: 5px; }
.drill-target { font-size: 20px; font-weight: 700; line-height: 1.35; color: #eaf1ff; }
.bubble .replay { margin-top: 9px; }
.feedback { font-size: 13px; padding: 7px 12px; border-radius: 12px; max-width: 84%; }
.feedback.ok { background: #14301f; border: 1px solid #2e6b45; color: #8ee0b0; }
.feedback.no { background: #33231a; border: 1px solid #6b4a2e; color: #f0c9a6; }
.miss { color: #d9a86c; font-size: 12px; margin-top: 3px; }
.drill-mini { color: var(--muted); font-size: 12px; }


/* ---------- 今日任务 ---------- */
.today-card {
  background: linear-gradient(135deg, #1d2a3d, #16202c);
  border: 1px solid #2b3a4e; border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 14px;
}
.today-card h3 { margin: 0 0 10px; font-size: 14px; color: #9fb3cc; font-weight: 600; }
.today-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #22303f; }
.today-row:first-of-type { border-top: 0; }
.today-row .label { flex: 1; }
.today-row .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.today-row button { flex: 0 0 auto; }
.badge-review { background: #2b4a6b; color: #9fd0ff; padding: 1px 7px; border-radius: 9px; font-size: 11px; }


/* ---------- 单词卡 ---------- */
.modal {
  display: none; position: fixed; inset: 0; background: rgba(8, 12, 18, .72);
  z-index: 50; align-items: center; justify-content: center; padding: 20px;
}
.modal.open { display: flex; }
.modal-box {
  position: relative; width: min(520px, 100%); max-height: 86vh; overflow: auto;
  background: var(--panel); border: 1px solid #2b3a4e; border-radius: 16px; padding: 22px;
}
.modal-close {
  position: absolute; right: 12px; top: 10px; background: none; border: 0;
  color: var(--muted); font-size: 18px; cursor: pointer;
}
.word-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.word-big { font-size: 30px; font-weight: 800; letter-spacing: .5px; }
.word-phon { color: #9fb3cc; font-size: 15px; }
.word-meaning { margin-top: 8px; font-size: 17px; }
.word-meta { color: var(--muted); font-size: 12px; margin: 8px 0 4px; }
.example {
  border-top: 1px solid #22303f; padding: 10px 0; display: flex; gap: 10px; align-items: flex-start;
}
.example .txt { flex: 1; }
.example .en { font-size: 15px; }
.example .zh { color: #9fb3cc; font-size: 13px; margin-top: 3px; }

/* ---------- 记录 ---------- */
.hist-item {
  background: var(--panel); border: 1px solid #24313f; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
}
.hist-item:hover { border-color: #33506e; }
.hist-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.hist-name { font-size: 15px; margin: 4px 0; }
.hist-skills { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #9fb3cc; }


/* ---------- 自己的录音 ---------- */
.bubble .mine { margin-top: 8px; }
.bubble.me .mine { float: right; }

/* ---------- 手机适配 ---------- */
@media (max-width: 720px) {
  body { padding: 10px; }
  .topbar { flex-wrap: wrap; gap: 8px; height: auto; padding-bottom: 8px; }
  .topbar select, .topbar button { font-size: 12px; padding: 4px 8px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .bubble { max-width: 92%; }
  .drill-target { font-size: 18px; }
  .talk-foot { position: sticky; bottom: 0; }
  /* 以前这里把每行按钮拉成整行，5 个入口光按钮就占满一屏；改成右侧紧凑按钮 */
  .today-row { flex-wrap: nowrap; gap: 10px; }
  .today-row .label { min-width: 0; }
  .today-row button { width: auto; flex: 0 0 auto; padding: 9px 16px; }
  .modal-box { padding: 16px; }
}


/* ---------- 发音分 ---------- */
.pron-badge {
  margin-top: 8px; padding: 6px 10px; border-radius: 10px; font-size: 13px;
  background: #17222f; border: 1px solid #2a3a4d; color: #cfe3ff;
  display: inline-block;
}
.pron-badge .grade {
  margin-left: 8px; padding: 0 6px; border-radius: 6px; font-size: 11px;
  background: #24405e; color: #bcd8ff;
}
.pron-badge.gA { border-color: #2e6b45; color: #a8ecc4; }
.pron-badge.gB { border-color: #3c5a7a; }
.pron-badge.gC { border-color: #6b5a2e; color: #f0dfa8; }
.pron-badge.gD { border-color: #6b3a3a; color: #f0b8b8; }
.pron-parts { color: #8fa6bf; font-size: 11px; margin-top: 3px; }
.pron-tip { color: #d9b06c; font-size: 12px; margin-top: 3px; }


.pron-head { font-size: 13px; font-weight: 600; }
.pron-head b { color: #bcd8ff; margin-left: 2px; }


.mistake-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }


/* ---------- 听力选项 ---------- */
.listen-options { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.listen-options .opt {
  text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: #1a2430; border: 1px solid #2b3a4e; color: #dfe9f5; font-size: 14px;
}
.listen-options .opt:hover:not(:disabled) { border-color: #3f5f85; background: #1f2c3c; }
.listen-options .opt:disabled { opacity: .55; cursor: default; }


/* ---------- 跳过询问 ---------- */
.fastpass-box {
  background: #16212e; border: 1px solid #2b3a4e; border-radius: 12px;
  padding: 12px 14px; max-width: 84%;
}
.fastpass-q { font-size: 14px; margin-bottom: 10px; }
.fastpass-actions { display: flex; gap: 10px; }


/* ---------- 音色选择 ---------- */
.voice-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid #24313f; margin-bottom: 6px;
}
.voice-row.on { border-color: #3f6f9f; background: #16212e; }
.voice-row .vlabel { flex: 1; font-size: 14px; }


/* ---------- 我的句子 ---------- */
.text-input {
  display: block; width: 100%; margin: 8px 0; padding: 10px 12px; border-radius: 10px;
  background: #131b24; border: 1px solid #2a3a4d; color: #e6eef8; font-size: 14px;
}
.custom-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 1px solid #22303f;
}
.custom-item .en { font-size: 15px; }
.custom-item .zh { color: #9fb3cc; font-size: 13px; margin-top: 2px; }
.custom-item > div { flex: 1; }


/* ---------- 周报 ---------- */
.stat-row { display: flex; gap: 14px; justify-content: space-between; }
.stat { text-align: center; flex: 1; }
.stat b { display: block; font-size: 22px; }
.stat span { color: #9fb3cc; font-size: 12px; }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bar { width: 100%; background: linear-gradient(180deg, #4b8fd6, #2f6fb5); border-radius: 6px 6px 0 0; }
.bar-label { font-size: 11px; color: #8fa6c0; margin-top: 6px; }
.bar-val { font-size: 10px; color: #6f86a0; height: 12px; }

/* ---------- 逐词高亮 ---------- */
.word { padding: 0 1px; transition: color .08s, background .08s; }
.word.on { background: #2f6fb5; color: #fff; border-radius: 4px; }


/* ---------- 词汇库 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  padding: 5px 10px; border-radius: 999px; font-size: 12px; cursor: pointer;
  background: #16212e; border: 1px solid #2a3a4d; color: #cfe0f2;
}
.chip.on { background: #2f6fb5; border-color: #2f6fb5; color: #fff; }
.vocab-row {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 2px;
  border-bottom: 1px solid #1d2733; cursor: pointer;
}
.vocab-row:hover { background: #141d28; }
.vocab-row .vw { font-size: 15px; min-width: 96px; }
.vocab-row .vp { color: #7f96b0; font-size: 12px; min-width: 96px; }
.vocab-row .vt { color: #cfe0f2; font-size: 13px; }


/* ---------- 当场纠错 ---------- */
.bubble.correction { background: #2a1e22; border: 1px solid #5a3038; }
.corr-head { color: #f0b3bd; font-size: 13px; margin-bottom: 6px; }
.corr-orig { color: #9aa9bb; font-size: 13px; text-decoration: line-through; }
.corr-fixed { color: #9fe0a8; font-size: 16px; margin: 6px 0; }


/* ---------- 顶部按钮：单行胶囊 + 横向滚动 ---------- */
.topright.navchips {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 4px;
  max-width: 100%;
}
.topright.navchips::-webkit-scrollbar { display: none; }
.topright.navchips button {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 7px 13px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 999px;
  background: #182231;
  border: 1px solid #25334a;
  color: #cfe0f2;
}
.topright.navchips button:active { background: #22303f; }
.topright.navchips .lvl-badge { flex: 0 0 auto; }

/* 手机上给内容区多一点呼吸空间 */
@media (max-width: 480px) {
  .card { padding: 16px 15px; }
  .card h3 { font-size: 17px; }
  .row-actions button, .review-actions button { min-height: 46px; }
}


/* ---------------- 登录 ---------------- */
.auth-screen {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 0%, #1a2740 0%, #0c1016 60%);
  padding: 24px;
}
.auth-screen.hidden { display: none; }
.auth-card {
  width: 100%; max-width: 380px;
  background: #131a24; border: 1px solid #223044; border-radius: 20px;
  padding: 28px 22px 22px; box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.auth-brand { font-size: 20px; font-weight: 700; color: #eaf2fb; text-align: center; }
.auth-sub { font-size: 13px; color: #8ba1bd; text-align: center; margin: 8px 0 22px; }
.auth-label { display: block; font-size: 12px; color: #8ba1bd; margin: 14px 0 6px; }
.auth-input {
  width: 100%; box-sizing: border-box; padding: 13px 14px;
  background: #0e141c; border: 1px solid #26374d; border-radius: 12px;
  color: #eaf2fb; font-size: 16px;
}
.auth-input:focus { outline: none; border-color: #3d7fd6; }
.auth-msg { min-height: 18px; font-size: 13px; color: #e08b8b; margin: 12px 0 4px; }
.auth-msg.ok { color: #7ddba0; }
.auth-btn {
  width: 100%; margin-top: 6px; padding: 14px;
  border: 0; border-radius: 13px; background: linear-gradient(180deg,#3d86dd,#2f6fb5);
  color: #fff; font-size: 16px; font-weight: 600;
}
.auth-btn:disabled { opacity: .6; }
.auth-link {
  width: 100%; margin-top: 14px; background: transparent; border: 0;
  color: #7ea6d6; font-size: 13px;
}


/* ============================================================
   浅色主题（参考 Pingo AI：奶油底 + 大圆角白卡 + 蓝黄粉点缀）
   ============================================================ */
:root {
  --bg: #f7f5ef;
  --panel: #ffffff;
  --panel2: #f2efe7;
  --text: #1b1b1b;
  --muted: #8b8b8b;
  --accent: #0b4ce0;
  --good: #14a06a;
  --warn: #f0b429;
  --danger: #ee4f6b;
  --radius: 22px;

  --pg-blue: #0b4ce0;
  --pg-blue-soft: #e8eefc;
  --pg-yellow: #f7d33f;
  --pg-pink: #f2506e;
  --pg-card: #ffffff;
  --pg-shadow: 0 10px 26px rgba(23, 32, 54, .07);
}

body { background: var(--bg); color: var(--text); }

/* 顶栏 */
.topbar {
  background: transparent;
  border-bottom: 0;
  padding: 14px 16px 8px;
}
.brand { font-size: 17px; font-weight: 700; color: var(--text); }
.topright.navchips button {
  background: #ffffff;
  border: 1px solid #e7e3d8;
  color: #4a4a4a;
  box-shadow: 0 2px 6px rgba(23,32,54,.05);
}
.lvl-badge {
  background: var(--pg-blue); color: #fff; font-weight: 700;
  border-radius: 12px; padding: 6px 12px;
}

/* 卡片 */
.card {
  background: var(--pg-card);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--pg-shadow);
  padding: 20px 18px;
  margin-bottom: 14px;
}
.card h3 { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }

/* “今日任务”这类主卡：蓝色英雄卡 */
.card.hero {
  background: linear-gradient(160deg, #1457ff 0%, #0b3fd0 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgba(11,76,224,.28);
}
.card.hero h3, .card.hero .muted, .card.hero .card-sub { color: rgba(255,255,255,.86); }
.card.hero .pill { background: rgba(255,255,255,.18); color: #fff; }
.card.hero button.primary {
  background: #fff; color: var(--pg-blue); font-weight: 700;
}

/* 统计小卡（等级 / 新词 / 连胜） */
.stats { gap: 12px; }
.stat {
  background: #fff; border-radius: 20px; box-shadow: var(--pg-shadow);
  border: 0; padding: 16px 14px;
}
.stat .num { font-size: 30px; font-weight: 800; letter-spacing: -1px; }
.stat .label { color: var(--muted); font-size: 12px; }
.stat.blue .num { color: var(--pg-blue); }
.stat.pink .num { color: var(--pg-pink); }
.stat.yellow .num { color: #b98b00; }

/* 按钮 */
button, .btn {
  border-radius: 999px;
  font-weight: 600;
}
button.primary, .btn-primary {
  background: var(--pg-blue); color: #fff; border: 0;
  padding: 15px 26px; font-size: 16px;
  box-shadow: 0 10px 22px rgba(11,76,224,.25);
}
button.ghost { background: #fff; border: 1px solid #e7e3d8; color: #3d3d3d; }
.chip, .tag, .scenario {
  background: #f1eee6; border: 0; color: #55524c;
}

/* 对话气泡 */
.bubble-row.sys .bubble { background: #f1eee6; color: #2a2a2a; }
.bubble-row.user .bubble { background: var(--pg-blue); color: #fff; }
.bubble.correction {
  background: #fff5f7; border: 1px solid #ffd9e0; color: #2a2a2a;
}
.corr-head { color: var(--pg-pink); }
.corr-fixed { color: #0b7a4d; }

/* 输入区 / 底部 */
.hint { color: var(--muted); }
input, select, textarea {
  background: #fff; border: 1px solid #e7e3d8; color: var(--text);
  border-radius: 14px;
}


/* 今日任务卡 = 蓝色英雄卡（参考 Pingo 首页） */
#todayCard {
  background: linear-gradient(158deg, #1457ff 0%, #0a37c4 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgba(11,76,224,.26);
  border: 0;
}
#todayCard h3 { color: #fff; font-size: 18px; }
#todayCard .muted { color: rgba(255,255,255,.78) !important; }
#todayCard .obj, #todayCard .task-row { border-top: 1px solid rgba(255,255,255,.16); }
#todayCard button {
  background: #fff; color: var(--pg-blue); font-weight: 700;
  border: 0; box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
#todayCard .pill, #todayCard .badge {
  background: rgba(255,255,255,.2); color: #fff;
}


/* 英雄卡内部：行分隔线 + 徽标改成半透明白 */
#todayCard .today-row { border-top: 1px solid rgba(255,255,255,.18); }
#todayCard .today-row:first-of-type { border-top: 0; }
#todayCard .today-row .label { color: #fff; }
#todayCard .today-row .sub { color: rgba(255,255,255,.72); }
#todayCard .badge-review {
  background: rgba(255,255,255,.22); color: #fff; font-weight: 600;
}
#todayCard button.primary {
  background: #fff; color: var(--pg-blue); font-weight: 700; border: 0;
}


/* ---------------- 等级 / 连胜 卡片 ---------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.duo .card { margin: 0; padding: 16px; border-radius: 20px; }
.duo .level-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--pg-blue); color: #fff; font-weight: 800; font-size: 18px;
}
.bar { height: 10px; border-radius: 999px; background: #ece8de; margin-top: 14px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--pg-blue); border-radius: 999px; }
.duo .big-pink { font-size: 34px; font-weight: 800; color: var(--pg-pink); letter-spacing: -1px; }
.duo .flame { font-size: 26px; }
.streak-card {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 20px; box-shadow: var(--pg-shadow);
  padding: 16px 18px; margin-bottom: 12px;
}
.streak-card .flame-circle {
  width: 46px; height: 46px; border-radius: 50%; background: #fdf0c9;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.streak-card .n { font-size: 28px; font-weight: 800; }
.streak-card .t { color: var(--muted); font-size: 13px; margin-left: auto; }

/* ---------------- 目标时间线 ---------------- */
.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: ''; position: absolute; left: 11px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px; background: #dfe7f8;
}
.tl-item { position: relative; margin-bottom: 14px; }
.tl-item::before {
  content: ''; position: absolute; left: -30px; top: 16px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #cdd9ee; border: 3px solid #f7f5ef;
}
.tl-item.done::before { background: var(--pg-blue); }
.tl-item.now::before { background: var(--pg-blue); box-shadow: 0 0 0 5px #dfe7f8; }
.tl-card {
  background: #fff; border-radius: 16px; box-shadow: var(--pg-shadow);
  padding: 14px 16px;
}
.tl-item.done .tl-card { opacity: .72; }
.tl-mini { font-size: 11px; color: var(--muted); }
.tl-title { font-size: 15px; font-weight: 600; margin-top: 2px; }
.tl-words { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.tl-words span { background: #f1eee6; border-radius: 999px; padding: 3px 10px; font-size: 12px; color: #55524c; }

/* ---------------- 账号页 ---------------- */
.user-list { margin: 10px 0 14px; }
.user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid #f0ece2;
}
.user-row:last-child { border-bottom: 0; }
.user-row .nm { font-weight: 600; }
.user-row .meta { color: var(--muted); font-size: 12px; margin-left: auto; }
.user-row .admin-tag {
  background: var(--pg-blue-soft); color: var(--pg-blue);
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
}
.user-add { display: flex; flex-direction: column; gap: 10px; }
.user-add input {
  padding: 13px 14px; border-radius: 14px; border: 1px solid #e7e3d8;
  font-size: 15px; background: #fff;
}
.user-add button { padding: 14px; font-size: 16px; }


/* 时间线强制覆盖（旧规则用了更深的选择器） */
#view-home .chapter,
#view-home .chapter.unlocked {
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; padding: 0 !important; margin: 0 0 18px !important;
}
#view-home .obj-list { position: relative !important; padding-left: 30px !important; }
#view-home .obj-list::before {
  content: '' !important; position: absolute !important;
  left: 8px !important; top: 12px !important; bottom: 12px !important;
  width: 3px !important; border-radius: 3px !important;
  background: #e2e9f7 !important; display: block !important;
}
#view-home .obj {
  position: relative !important; display: block !important;
  background: #fff !important; border: 0 !important; border-radius: 16px !important;
  box-shadow: var(--pg-shadow) !important;
  padding: 14px 16px !important; margin: 0 0 12px !important;
}
#view-home .obj::before {
  content: '' !important; position: absolute !important; left: -26px !important;
  top: 20px !important; width: 13px !important; height: 13px !important;
  border-radius: 50% !important; background: #cdd9ee !important;
  border: 3px solid #f7f5ef !important; display: block !important;
}
#view-home .obj:not(.locked)::before { background: var(--pg-blue) !important; }
#view-home .obj .obj-title { font-size: 15px !important; font-weight: 600 !important; }


#view-home .chapter-head, #view-home .chapter-head * {
  border: 0 !important; background: transparent !important;
}
#view-home .chapter-title { font-size: 17px !important; font-weight: 700 !important; }


/* 等级进度卡（参考 Pingo） */
.level-card {
  background: #fff; border-radius: 20px; box-shadow: var(--pg-shadow);
  padding: 16px 18px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 14px;
}
.level-card .lv-chip {
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--pg-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; flex: 0 0 auto;
}
.level-card .lv-body { flex: 1; min-width: 0; }
.level-card .lv-title { font-size: 14px; font-weight: 600; }
.level-card .lv-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.level-card .lv-bar {
  height: 9px; border-radius: 999px; background: #ece8de;
  margin-top: 9px; overflow: hidden;
}
.level-card .lv-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #3d86dd, #0b4ce0);
}


/* ---------------- 练习页（参考 Pingo 的极简居中布局） ---------------- */
#view-talk { background: var(--bg); }
#view-talk .talk-head {
  padding: 10px 4px 6px; border: 0; background: transparent;
}
#view-talk .talk-head button { background: #fff; border: 1px solid #e7e3d8; color: #3d3d3d; }

.logo-dots {
  display: flex; justify-content: center; align-items: center; gap: 7px;
  margin: 22px 0 18px;
}
.logo-dots i { display: block; width: 13px; height: 26px; border-radius: 8px; }
.logo-dots i:nth-child(1) { background: #0b4ce0; }
.logo-dots i:nth-child(2) { background: #f7d33f; }
.logo-dots i:nth-child(3) { background: #f2506e; height: 30px; border-radius: 10px; }
.logo-dots i:nth-child(4) { background: #0b4ce0; }

#view-talk .objective-bar {
  background: transparent; border: 0; padding: 0 4px 10px; text-align: center;
}
#view-talk .can-do {
  font-size: 24px; font-weight: 800; letter-spacing: -.4px;
  color: var(--text); line-height: 1.3;
}
#view-talk .wordstrip { justify-content: center; margin-top: 10px; }
#view-talk .wordstrip .chip {
  background: #f1eee6; border: 0; color: #55524c; border-radius: 999px;
}

#view-talk .transcript {
  background: transparent; border: 0; box-shadow: none; padding: 6px 2px;
}
#view-talk .bubble-row.sys .bubble {
  background: #fff; border: 0; border-radius: 18px;
  box-shadow: 0 6px 16px rgba(23,32,54,.06); color: #2a2a2a;
}
#view-talk .bubble-row.user .bubble,
#view-talk .bubble.me {
  background: var(--pg-blue); color: #fff; border: 0; border-radius: 18px;
}

#view-talk .talk-foot { padding: 14px 16px 24px; text-align: center; }
#view-talk .talk-btn {
  width: 132px; height: 132px; border-radius: 50%;
  background: linear-gradient(180deg, #1457ff, #0b3fd0);
  color: #fff; border: 0; font-size: 16px; font-weight: 700;
  box-shadow: 0 18px 40px rgba(11,76,224,.34);
  margin: 0 auto; display: block;
}
#view-talk .talk-btn.recording {
  background: linear-gradient(180deg, #f2506e, #d93a58);
  box-shadow: 0 18px 40px rgba(242,80,110,.36);
  transform: scale(.97);
}
#view-talk .hint { margin-top: 14px; color: var(--muted); font-size: 13px; }


/* 练习时收起顶部导航，专注当前这句（Pingo 的做法） */
body.in-session .topbar { display: none; }
body.in-session #view-talk { padding-top: 10px; }

/* 助手气泡：白底深字 */
#view-talk .msg.assistant,
#view-talk .bubble.assistant,
#view-talk .msg.sys {
  background: #fff !important; color: #2a2a2a !important;
  border: 0 !important; border-radius: 18px !important;
  box-shadow: 0 6px 16px rgba(23,32,54,.07) !important;
}
#view-talk .msg.assistant b, #view-talk .msg.assistant strong { color: #0b4ce0; }
#view-talk .msg.user, #view-talk .bubble.me {
  background: var(--pg-blue) !important; color: #fff !important;
}


/* ============================================================
   词汇 / 听力 / 复盘 / 列表页：统一到浅色卡片风格
   ============================================================ */

/* 词汇卡 */
#view-vocab .word-card,
#view-vocab .card {
  background: #fff; border: 0; border-radius: 22px;
  box-shadow: var(--pg-shadow); padding: 22px 18px;
}
#view-vocab .word-big, #view-vocab .word {
  font-size: 34px; font-weight: 800; letter-spacing: -.8px; color: var(--text);
  text-align: center;
}
#view-vocab .phon, #view-vocab .word-phon { color: var(--muted); text-align: center; }
#view-vocab .meaning, #view-vocab .word-cn {
  font-size: 17px; color: var(--text); text-align: center; margin-top: 8px;
}
#view-vocab button, #view-vocab .opt {
  background: #fff; border: 1px solid #e7e3d8; border-radius: 16px;
  padding: 15px 16px; font-size: 16px; color: var(--text); text-align: left;
  width: 100%; margin-top: 10px; box-shadow: 0 3px 10px rgba(23,32,54,.04);
}
#view-vocab button.right, #view-vocab .opt.right {
  background: #e8f7ef; border-color: #b9e6cd; color: #10804f;
}
#view-vocab button.wrong, #view-vocab .opt.wrong {
  background: #fdeef1; border-color: #f7c2cd; color: #c02b48;
}

/* 听力 */
#view-listen .card, #view-listen .listen-card {
  background: #fff; border: 0; border-radius: 22px;
  box-shadow: var(--pg-shadow); padding: 22px 18px; text-align: center;
}
#view-listen .opt, #view-listen button.opt {
  background: #fff; border: 1px solid #e7e3d8; border-radius: 16px;
  padding: 15px; font-size: 16px; margin-top: 10px; width: 100%;
  box-shadow: 0 3px 10px rgba(23,32,54,.04); color: var(--text);
}
#view-listen .opt.right { background: #e8f7ef; border-color: #b9e6cd; color: #10804f; }
#view-listen .opt.wrong { background: #fdeef1; border-color: #f7c2cd; color: #c02b48; }

/* 复盘 / 周报 / 历史 / 错题 / 词库 / 自造句 */
#view-summary .card, #view-week .card, #view-history .card,
#view-mistakes .card, #view-vocablib .card, #view-custom .card,
#view-accounts .card {
  background: #fff; border: 0; border-radius: 22px;
  box-shadow: var(--pg-shadow);
}
#view-summary h2, #view-week h2 { font-size: 20px; font-weight: 700; }
.row-item, .history-row, .mistake-row {
  border-bottom: 1px solid #f0ece2; padding: 12px 0;
}
.row-item:last-child, .history-row:last-child, .mistake-row:last-child {
  border-bottom: 0;
}
.muted, .sub { color: var(--muted); }

/* 底部主按钮统一成大胶囊 */
button.primary, .btn-primary { border-radius: 999px; }


/* 词汇页：气泡改成居中大白卡 */
#view-vocab .transcript {
  background: transparent; border: 0; box-shadow: none;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 4px 2px;
}
#view-vocab .transcript .msg,
#view-vocab .transcript .bubble {
  background: #fff !important; color: var(--text) !important;
  border: 0 !important; border-radius: 22px !important;
  box-shadow: var(--pg-shadow) !important;
  max-width: 100% !important; width: 100% !important;
  align-self: stretch !important; padding: 20px 18px !important;
  margin: 0 0 12px !important;
  text-align: center;
}
#view-vocab .transcript .msg .muted { color: var(--muted) !important; }
#view-vocab .transcript .word-big,
#view-vocab .transcript h2,
#view-vocab .transcript .en {
  font-size: 32px; font-weight: 800; letter-spacing: -.5px; color: var(--text);
}
#view-vocab .transcript button {
  display: block; width: 100%; margin-top: 10px;
  background: #fff !important; border: 1px solid #e7e3d8 !important;
  border-radius: 16px !important; padding: 15px !important;
  font-size: 16px !important; color: var(--text) !important;
  box-shadow: 0 3px 10px rgba(23,32,54,.05) !important;
  text-align: center;
}
#view-vocab .transcript button.primary,
#view-vocab .transcript button[data-play] {
  background: var(--pg-blue-soft) !important;
  border-color: #cfdcf7 !important; color: var(--pg-blue) !important;
  width: auto !important; display: inline-block !important;
  padding: 10px 20px !important; margin: 12px auto 0 !important;
}
#view-vocab .hint, #view-vocab .talk-foot { color: var(--muted); }
#view-vocab .talk-foot { padding: 12px 16px 24px; }


/* ---------------- 下拉菜单 ---------------- */
.topbar { position: relative; }
.dropdown {
  position: absolute; right: 12px; top: 58px; z-index: 60;
  background: #fff; border-radius: 18px;
  box-shadow: 0 16px 40px rgba(23,32,54,.18);
  padding: 8px; min-width: 168px;
  display: flex; flex-direction: column; gap: 2px;
}
.dropdown.hidden { display: none; }
.dropdown button {
  width: 100%; text-align: left; background: transparent;
  border: 0; border-radius: 12px; padding: 12px 14px;
  font-size: 15px; color: var(--text);
}
.dropdown button:active { background: #f4f1ea; }
.dropdown button.danger { color: var(--pg-pink); }

/* ---------------- 登录落地页 ---------------- */
.auth-screen {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px;
}
.auth-card {
  width: 100%; max-width: 360px; text-align: center;
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
.auth-card .logo-dots { margin: 0 0 18px; }
.auth-brand { font-size: 25px; font-weight: 800; letter-spacing: -.5px; color: var(--text); }
.auth-sub { font-size: 13px; color: var(--muted); margin: 8px 0 26px; line-height: 1.6; }
.auth-tabs {
  display: flex; background: #efece4; border-radius: 999px; padding: 4px; margin-bottom: 16px;
}
.auth-tab {
  flex: 1; border: 0; background: transparent; border-radius: 999px;
  padding: 11px; font-size: 15px; color: #6b6b6b; font-weight: 600;
}
.auth-tab.active { background: #fff; color: var(--pg-blue); box-shadow: 0 3px 10px rgba(23,32,54,.08); }
.auth-card .auth-input {
  width: 100%; box-sizing: border-box; margin-bottom: 12px;
  padding: 15px 16px; border-radius: 16px;
  background: #fff; border: 1px solid #e7e3d8;
  color: var(--text); font-size: 16px; text-align: left;
}
.auth-card .auth-input:focus { outline: none; border-color: var(--pg-blue); }
.auth-card .auth-btn {
  width: 100%; margin-top: 6px; padding: 16px;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg,#1457ff,#0b3fd0);
  color: #fff; font-size: 16px; font-weight: 700;
  box-shadow: 0 12px 26px rgba(11,76,224,.28);
}
.auth-foot { margin-top: 16px; font-size: 12px; color: var(--muted); }
.auth-msg { min-height: 18px; font-size: 13px; color: var(--pg-pink); text-align: left; }
.auth-msg.ok { color: #0b7a4d; }

.hidden { display: none !important; }


/* ---------------- 账号设置页 ---------------- */
.acct-hero {
  background: linear-gradient(158deg, #1457ff 0%, #0a37c4 100%);
  border-radius: 24px; padding: 26px 20px 24px; text-align: center;
  box-shadow: 0 16px 34px rgba(11,76,224,.26); margin-bottom: 14px;
}
.acct-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255,255,255,.2); margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.acct-name { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.acct-role { color: rgba(255,255,255,.78); font-size: 13px; margin-top: 5px; }

.acct-actions { padding: 4px 0; }
.acct-row {
  width: 100%; background: transparent; border: 0;
  padding: 16px 18px; display: flex; justify-content: space-between;
  align-items: center; font-size: 15px; color: var(--text);
  border-bottom: 1px solid #f2eee5;
}
.acct-row:last-child { border-bottom: 0; }
.acct-row.danger { color: var(--pg-pink); }
.acct-section-title { font-size: 17px; font-weight: 700; }
.acct-hint { font-size: 12px; margin: 6px 0 14px; }

.user-list { margin-bottom: 16px; }
.user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #f2eee5;
}
.user-row:last-child { border-bottom: 0; }
.user-row .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--pg-blue-soft); color: var(--pg-blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex: 0 0 auto;
}
.user-row .who { min-width: 0; }
.user-row .nm { font-weight: 600; font-size: 15px; }
.user-row .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.user-row .admin-tag {
  margin-left: auto; background: var(--pg-blue-soft); color: var(--pg-blue);
  font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600;
}

.acct-form { display: flex; flex-direction: column; gap: 10px; }
.acct-form input {
  padding: 14px 15px; border-radius: 15px; border: 1px solid #e7e3d8;
  font-size: 15px; background: #fff; color: var(--text);
}
.acct-form input:focus { outline: none; border-color: var(--pg-blue); }
.acct-form button { padding: 15px; font-size: 16px; border-radius: 999px; }
#userMsg { min-height: 18px; margin-top: 10px; font-size: 13px; }


/* ============ 词汇复习（Pingo 风格） ============ */
#view-vocab .vocab-hero {
  background: #fff; border-radius: 24px; box-shadow: var(--pg-shadow);
  padding: 26px 20px; text-align: center; margin: 6px 2px 14px;
}
#view-vocab .vocab-hero .label {
  font-size: 12px; color: var(--muted); letter-spacing: .5px;
}
#view-vocab .vocab-hero .word {
  font-size: 40px; font-weight: 800; letter-spacing: -1px;
  color: var(--text); margin: 10px 0 6px;
}
#view-vocab .vocab-hero .phon { font-size: 15px; color: var(--muted); }
#view-vocab .vocab-hero .speak {
  margin-top: 14px; display: inline-block;
  background: var(--pg-blue-soft); color: var(--pg-blue);
  border: 0; border-radius: 999px; padding: 11px 22px; font-size: 14px; font-weight: 600;
}
#view-vocab .options { display: flex; flex-direction: column; gap: 10px; padding: 0 2px; }
#view-vocab .options button {
  background: #fff; border: 1px solid #ece7dc; border-radius: 18px;
  padding: 17px 18px; font-size: 16px; color: var(--text);
  box-shadow: 0 4px 12px rgba(23,32,54,.05); text-align: center;
}
#view-vocab .options button:active { background: #f7f4ec; }
#view-vocab .options button.right {
  background: #e8f7ef; border-color: #b9e6cd; color: #10804f; font-weight: 600;
}
#view-vocab .options button.wrong {
  background: #fdeef1; border-color: #f7c2cd; color: #c02b48; font-weight: 600;
}

/* ============ 听力训练 ============ */
#view-listen .listen-hero {
  background: linear-gradient(158deg, #1457ff 0%, #0a37c4 100%);
  border-radius: 24px; padding: 30px 20px; text-align: center;
  box-shadow: 0 16px 34px rgba(11,76,224,.26); margin: 6px 2px 14px;
}
#view-listen .listen-hero .label { color: rgba(255,255,255,.8); font-size: 12px; }
#view-listen .listen-hero .play {
  width: 92px; height: 92px; border-radius: 50%; margin: 16px auto 8px;
  background: rgba(255,255,255,.18); border: 0; color: #fff; font-size: 34px;
}
#view-listen .listen-hero .tip { color: rgba(255,255,255,.75); font-size: 13px; }
#view-listen .options { display: flex; flex-direction: column; gap: 10px; padding: 0 2px; }
#view-listen .options button {
  background: #fff; border: 1px solid #ece7dc; border-radius: 18px;
  padding: 17px; font-size: 16px; color: var(--text);
  box-shadow: 0 4px 12px rgba(23,32,54,.05);
}
#view-listen .options button.right { background: #e8f7ef; border-color: #b9e6cd; color: #10804f; }
#view-listen .options button.wrong { background: #fdeef1; border-color: #f7c2cd; color: #c02b48; }


/* ============================================================
   练习页：顶部固定、只有对话区滚动；重做说话按钮
   ============================================================ */
#view-talk {
  display: flex; flex-direction: column;
  height: 100dvh; box-sizing: border-box;
  padding: 0 12px 0 !important;
}
#view-talk .talk-head,
#view-talk .logo-dots,
#view-talk .objective-bar {
  flex: 0 0 auto;
  background: var(--bg);
  z-index: 5;
}
#view-talk .talk-head {
  position: sticky; top: 0;
  padding: 10px 2px 4px !important;
}
#view-talk .logo-dots { margin: 6px 0 8px !important; }
#view-talk .logo-dots i { width: 9px; height: 18px; }
#view-talk .logo-dots i:nth-child(3) { height: 22px; }
#view-talk .objective-bar { padding-bottom: 10px !important; }
#view-talk .can-do { font-size: 20px !important; line-height: 1.35; }

#view-talk .transcript {
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  padding: 4px 2px 12px !important;
  -webkit-overflow-scrolling: touch;
}

/* 练习页：锁住整页滚动，只让对话区滚。
   以前 body 还能滚 88px（练习页内容比一屏略高），顶栏是 sticky 却和下面的
   圆点/标题同 z-index、且后者 DOM 更靠后，滚上来就盖住「返回/结束」——
   用户看到的「圆点和每日十词之间的小缝隙挡住按键」就是这个。
   锁死后整页不动，标题和圆点也不可能滚到顶栏上面。 */
body.in-session {
  padding: 0 !important;
  overflow: hidden;
  overscroll-behavior: none;
}
#view-talk .talk-head { z-index: 6; }
#view-talk .logo-dots, #view-talk .objective-bar { z-index: 4; }

/* 说话按钮：带麦克风图标的大圆，外圈光晕 */
#view-talk .talk-foot {
  flex: 0 0 auto; padding: 10px 12px 22px !important; text-align: center;
  background: linear-gradient(180deg, rgba(247,245,239,0), var(--bg) 40%);
}
#view-talk .talk-btn {
  position: relative;
  width: 118px; height: 118px; border-radius: 50%;
  margin: 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(circle at 50% 32%, #4d86ff 0%, #0b4ce0 62%, #093cb8 100%);
  border: 0; color: #fff;
  box-shadow: 0 14px 30px rgba(11,76,224,.32), inset 0 -6px 14px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
#view-talk .talk-btn::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 2px solid rgba(11,76,224,.16);
}
#view-talk .talk-btn .mic {
  font-size: 26px; line-height: 1;
}
#view-talk .talk-btn .talk-label {
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
}
#view-talk .talk-btn:active,
#view-talk .talk-btn.recording {
  transform: scale(.94);
  background: radial-gradient(circle at 50% 32%, #ff7d92 0%, #f2506e 62%, #d93a58 100%);
  box-shadow: 0 14px 30px rgba(242,80,110,.36), inset 0 -6px 14px rgba(0,0,0,.16);
}
#view-talk .talk-btn.recording::after { border-color: rgba(242,80,110,.28); }
#view-talk .hint { margin-top: 12px !important; font-size: 12px !important; }

/* 对话气泡更紧凑一点，方便多看几轮 */
#view-talk .bubble-row { margin-bottom: 10px; }


/* 练习时隐藏设置行（用不上，专心说话） */
body.in-session .settings-row { display: none !important; }

/* 对话气泡：coach 白底深字，me 蓝底白字，sys 居中浅底 */
#view-talk .bubble-row.coach .bubble {
  background: #fff !important; color: #222 !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(23,32,54,.07) !important;
}
#view-talk .bubble-row.coach .bubble .who,
#view-talk .bubble-row.coach .bubble .muted { color: var(--muted) !important; }
#view-talk .bubble-row.me .bubble {
  background: var(--pg-blue) !important; color: #fff !important; border: 0 !important;
}
#view-talk .bubble-row.sys .bubble {
  background: #f1eee6 !important; color: #444 !important; border: 0 !important;
}
#view-talk .bubble-row.coach .bubble strong,
#view-talk .bubble-row.coach .bubble b { color: var(--pg-blue); }
#view-talk .bubble-row.coach .bubble button {
  background: var(--pg-blue-soft) !important; color: var(--pg-blue) !important;
  border: 0 !important; border-radius: 999px !important; padding: 8px 16px !important;
}


/* ============ 专注模式：只有一个会呼吸的圆 ============ */
#view-talk .focus-stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
}
#view-talk .focus-stage.hidden { display: none; }
#view-talk.focus .transcript { display: none; }
#view-talk.focus .objective-bar { opacity: .55; }

.orb { position: relative; width: 170px; height: 170px; display: grid; place-items: center; }
.orb-core {
  width: 118px; height: 118px; border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #6d9bff 0%, #0b4ce0 62%, #0836ad 100%);
  box-shadow: 0 18px 40px rgba(11,76,224,.28);
  transition: transform .18s ease;
}
.ring {
  position: absolute; inset: 8px; border-radius: 50%;
  border: 2px solid rgba(11,76,224,.18);
  opacity: 0; transform: scale(.85);
}
body.speaking .orb-core { animation: orbPulse 1.15s ease-in-out infinite; }
body.speaking .ring.r1 { animation: ringOut 1.6s ease-out infinite; }
body.speaking .ring.r2 { animation: ringOut 1.6s ease-out .55s infinite; }
@keyframes orbPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@keyframes ringOut {
  0% { opacity: .55; transform: scale(.85); }
  100% { opacity: 0; transform: scale(1.35); }
}
.orb-label { color: var(--muted); font-size: 14px; }
body.speaking .orb-label { color: var(--pg-blue); font-weight: 600; }


/* PURE-BUTTON: 纯色圆形按钮，无图标无渐变 */
#view-talk .talk-btn {
  width: 122px; height: 122px; border-radius: 50%;
  background: #0b4ce0 !important;
  background-image: none !important;
  border: 0 !important;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; letter-spacing: .5px;
  box-shadow: 0 12px 26px rgba(11,76,224,.28);
}
#view-talk .talk-btn::after { display: none !important; }
#view-talk .talk-btn .mic { display: none !important; }
#view-talk .talk-btn:active,
#view-talk .talk-btn.recording {
  background: #f2506e !important;
  background-image: none !important;
  box-shadow: 0 12px 26px rgba(242,80,110,.3);
  transform: scale(.96);
}


/* 练习页：顶栏与设置行一律不显示（不依赖 JS 的 in-session 类） */
body:has(#view-talk.active) .topbar,
body:has(#view-talk.active) .settings-row { display: none !important; }
body:has(#view-vocab.active) .settings-row { display: none !important; }
#view-talk .talk-head { padding-top: 14px !important; }


/* ================= APPLE-PASS：排版 / 间距 / 阴影精修 ================= */
:root {
  --bg: #f5f4f1;
  --text: #111114;
  --muted: #8a8a8f;
  --pg-blue: #0a57f0;
  --pg-blue-soft: #e9efff;
  --pg-shadow: 0 6px 20px rgba(17,17,20,.06), 0 1px 3px rgba(17,17,20,.04);
  --radius: 20px;
}
body {
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
}
.brand {
  font-size: 26px !important; font-weight: 700 !important;
  letter-spacing: -0.4px; color: var(--text);
}
.card, .stat, .level-card, .streak-card {
  border-radius: 20px !important;
  box-shadow: var(--pg-shadow) !important;
}
.card h3 { font-size: 17px !important; font-weight: 650 !important; letter-spacing: -0.2px; }
.muted, .sub, .stat .label { color: var(--muted) !important; font-size: 13px; }
button, .btn { font-weight: 600; letter-spacing: -0.01em; }
button.primary, .btn-primary { border-radius: 16px !important; }
#todayCard { border-radius: 22px !important; }
.today-row { padding: 14px 0 !important; }
.today-row .label { font-size: 16px; font-weight: 550; }
.today-row .sub { font-size: 12.5px; }
.stat .num { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -0.6px; }
.lvl-badge { border-radius: 12px !important; }


/* ================= 分段式首页 ================= */
#view-home { padding-bottom: 24px; }

/* 分区标题 */
#view-home .section-title {
  font-size: 20px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--text); margin: 22px 4px 10px;
}

/* 统计卡改成横向滑动的卡片流 */
#view-home .stats {
  display: flex !important; gap: 10px !important;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 2px 6px; margin-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#view-home .stats::-webkit-scrollbar { display: none; }
#view-home .stat {
  flex: 0 0 132px; scroll-snap-align: start;
  background: #fff; border-radius: 18px;
  box-shadow: var(--pg-shadow); padding: 16px 14px;
}
#view-home .stat .num { font-size: 24px !important; }
#view-home .stat .label { font-size: 12px; }

/* 等级卡与今日任务卡统一宽度感 */
#view-home .level-card { margin: 0 0 12px; }

/* 章节区：卡片流式，章节头更轻 */
#view-home .chapter { margin-bottom: 22px; }
#view-home .chapter-title { font-size: 17px; }

/* 自由练习：横向小卡片 */
#view-home .scenarios.small {
  display: flex !important; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
#view-home .scenarios.small::-webkit-scrollbar { display: none; }
#view-home .scenarios.small .scenario {
  flex: 0 0 auto; white-space: nowrap;
  background: #fff; border: 1px solid #ece8df; border-radius: 999px;
  padding: 10px 16px; font-size: 14px;
}


/* ================= 底部 Tab 栏 ================= */
body { padding-bottom: 78px; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around; align-items: center;
  height: 68px; padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(17,17,20,.06);
}
.tabbar .tab {
  flex: 1; background: transparent; border: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0; color: var(--muted); font-size: 11px;
}
.tabbar .tab span { font-size: 20px; line-height: 1; }
.tabbar .tab i { font-style: normal; letter-spacing: -0.2px; }
.tabbar .tab.active { color: var(--pg-blue); font-weight: 600; }
body:has(#view-talk.active) .tabbar { display: none; }

/* ================= 今日进度环（SVG 描边，不用 conic-gradient） ================= */
.ring-card {
  background: #fff; border-radius: 20px; box-shadow: var(--pg-shadow);
  padding: 18px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 18px;
}
.ring-card .ring-svg { flex: 0 0 auto; display: block; transform: rotate(-90deg); }
.ring-card .ring-svg circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ring-card .ring-svg .track { stroke: #ece8de; }
.ring-card .ring-svg .bar {
  stroke: var(--pg-blue);
  transition: stroke-dashoffset .85s cubic-bezier(.22,.61,.36,1);
}
.ring-card .ring-txt { min-width: 0; }
.ring-card .ring-txt .t1 { font-size: 15px; font-weight: 650; display: flex; align-items: baseline; gap: 8px; }
.ring-card .ring-txt .ring-pct { font-size: 13px; font-weight: 700; color: var(--pg-blue); }
.ring-card .ring-txt .t2 { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.ring-card .ring-txt .t3 { font-size: 12.5px; color: var(--muted); margin-top: 2px; opacity: .85; }


/* ============ 视图互斥：任何时刻只显示一个 ============ */
.view { display: none !important; }
.view.active { display: block !important; }
#view-talk.active { display: flex !important; }


/* ---------------- 骨架屏 ---------------- */
.skeleton {
  background: linear-gradient(90deg, #eeece7 25%, #f6f4ef 37%, #eeece7 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: 12px;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.sk-card {
  background: #fff; border-radius: 20px; box-shadow: var(--pg-shadow);
  padding: 18px; margin-bottom: 12px;
}
.sk-line { height: 14px; margin-bottom: 10px; }
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }

/* ---------------- 空状态 ---------------- */
.empty-state {
  text-align: center; padding: 44px 20px;
}
.empty-state .ico { font-size: 40px; margin-bottom: 12px; }
.empty-state .t { font-size: 16px; font-weight: 600; color: var(--text); }
.empty-state .d { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.empty-state button {
  margin-top: 16px; padding: 12px 24px; border-radius: 999px;
  background: var(--pg-blue); color: #fff; border: 0; font-size: 15px; font-weight: 600;
}

/* 周报大数字 */
.week-big { font-size: 30px; font-weight: 700; letter-spacing: -0.6px; }
.week-row { display: flex; gap: 10px; margin-bottom: 12px; }
.week-cell {
  flex: 1; background: #fff; border-radius: 18px; box-shadow: var(--pg-shadow);
  padding: 16px 14px; text-align: center;
}
.week-cell .v { font-size: 22px; font-weight: 700; }
.week-cell .k { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* 词库列表 */
.vocab-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 0; border-bottom: 1px solid #f2eee5;
}
.vocab-item:last-child { border-bottom: 0; }
.vocab-item .w { font-weight: 600; }
.vocab-item .m { font-size: 13px; color: var(--muted); }


/* ---------------- 词库翻卡 ---------------- */
.flip-wrap { padding: 8px 2px 0; }
.flip-card {
  background: #fff; border-radius: 24px; box-shadow: var(--pg-shadow);
  min-height: 320px; padding: 30px 22px; margin: 0 0 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px;
}
.flip-card .word { font-size: 38px; font-weight: 800; letter-spacing: -1px; }
.flip-card .phon { font-size: 14px; color: var(--muted); }
.flip-card .cn { font-size: 20px; font-weight: 600; color: var(--text); margin-top: 6px; }
.flip-card .cat { font-size: 12px; color: var(--muted); }
.flip-card .speak {
  margin-top: 14px; padding: 11px 22px; border: 0; border-radius: 999px;
  background: var(--pg-blue-soft); color: var(--pg-blue); font-size: 14px; font-weight: 600;
}
.flip-nav { display: flex; align-items: center; gap: 12px; }
.flip-nav button {
  flex: 1; padding: 16px; border: 0; border-radius: 16px;
  background: #fff; box-shadow: var(--pg-shadow);
  font-size: 16px; font-weight: 600; color: var(--text);
}
.flip-nav button:disabled { opacity: .4; }
.flip-count { text-align: center; color: var(--muted); font-size: 13px; margin-top: 10px; }


/* ================= NO-SLOP：去 AI 味 ================= */
/* 1) 英雄卡：纯色，不要大渐变 */
#todayCard {
  background: #0a57f0 !important;
  box-shadow: 0 10px 24px rgba(10,87,240,.20) !important;
}
.card.hero, .acct-hero, #view-listen .listen-hero {
  background: #0a57f0 !important;
  box-shadow: 0 10px 24px rgba(10,87,240,.20) !important;
}
/* 2) 圆球：呼吸幅度收小，去掉扩散涟漪（只关沉浸圆球的环，别误伤今日进度环） */
body.speaking .orb-core { animation: orbSoft 2.4s ease-in-out infinite !important; }
.focus-stage .ring, #focusStage .ring { display: none !important; }
@keyframes orbSoft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
/* 3) Tab 栏：实色，去掉毛玻璃 */
.tabbar {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-top: 1px solid #ece9e2 !important;
}
/* 4) 按钮统一纯色，不要发光 */
#view-talk .talk-btn {
  background: #0a57f0 !important;
  box-shadow: 0 8px 18px rgba(10,87,240,.22) !important;
}
#view-talk .talk-btn:active, #view-talk .talk-btn.recording {
  background: #e8465f !important;
  box-shadow: 0 8px 18px rgba(232,70,95,.22) !important;
}
button.primary, .btn-primary, .auth-card .auth-btn, .acct-form button, #createUserBtn {
  background: #0a57f0 !important;
  background-image: none !important;
  box-shadow: 0 6px 16px rgba(10,87,240,.18) !important;
}
/* 5) 进度条用纯色 */
.level-card .lv-bar > i { background: #0a57f0 !important; }
/* 6) 词卡、翻卡统一阴影，别层层叠 */
.flip-card, .ring-card, .week-cell { box-shadow: 0 2px 10px rgba(17,17,20,.05) !important; }


/* ============================================================
   v16：进度环 / 词库翻卡滑动 / 英雄卡角标 / 深色模式
   ============================================================ */

/* ---------- 今日任务卡：右上角标色块 ---------- */
#todayCard { position: relative; overflow: hidden; }
#todayCard .hero-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
#todayCard .hero-head h3 {
  margin: 0 !important; font-size: 16px !important; font-weight: 700 !important;
  color: #fff !important; letter-spacing: -.2px;
}
#todayCard .hero-meta { font-size: 12.5px; color: rgba(255,255,255,.72); }
#todayCard .hero-badge {
  position: absolute; top: 0; right: 0; z-index: 1;
  min-width: 78px; padding: 11px 10px 9px;
  background: var(--pg-yellow); color: #12151b;
  border-bottom-left-radius: 18px;
  text-align: center; line-height: 1;
  box-shadow: 0 2px 8px rgba(10,20,40,.10);
}
#todayCard .hero-badge b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.6px; }
#todayCard .hero-badge span { display: block; font-size: 10.5px; font-weight: 700; opacity: .62; margin-top: 3px; }


/* ---------- 词库页（翻卡，不再套一层白卡） ---------- */
.lib-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 6px 4px 12px;
}
.lib-title { font-size: 26px; font-weight: 700; letter-spacing: -.4px; color: var(--text); }
.lib-count { font-size: 12.5px; color: var(--muted); text-align: right; }
.lib-search input {
  width: 100%; box-sizing: border-box;
  padding: 13px 16px; border-radius: 16px;
  border: 1px solid #e7e3d8; background: var(--pg-card); color: var(--text);
  font-size: 15px; font-family: inherit;
}
.lib-search input:focus { outline: none; border-color: var(--pg-blue); }
.lib-cats {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 12px 2px 4px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lib-cats::-webkit-scrollbar { display: none; }
.cat-chip {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px;
  border: 1px solid #ece8de; background: var(--pg-card); color: var(--text);
  font-size: 13px; font-weight: 550;
}
.cat-chip.on { background: var(--pg-blue); border-color: var(--pg-blue); color: #fff; font-weight: 650; }
.lib-body { padding-top: 6px; }


/* ---------- 翻卡：滑动 + 翻页动画 ---------- */
.flip-card {
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  will-change: transform, opacity;
}
.flip-card .word, .flip-card .cn { word-break: break-word; }
.flip-card.dragging { transition: none !important; animation: none !important; }
@keyframes flipInLeft {
  from { opacity: 0; transform: translateX(44px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes flipInRight {
  from { opacity: 0; transform: translateX(-44px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes flipFade {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes edgeNudge {
  0%, 100% { transform: none; }
  30% { transform: translateX(-9px); }
  65% { transform: translateX(7px); }
}
.flip-card.slide-left { animation: flipInLeft .26s cubic-bezier(.22,.61,.36,1); }
.flip-card.slide-right { animation: flipInRight .26s cubic-bezier(.22,.61,.36,1); }
.flip-card.fade-in { animation: flipFade .22s ease-out; }
.flip-card.edge-nudge { animation: edgeNudge .3s ease-out; }
.flip-card .swipe-hint {
  margin-top: 6px; font-size: 11.5px; color: var(--muted); opacity: .65; letter-spacing: .2px;
}
@media (hover: hover) and (pointer: fine) {
  .flip-card .swipe-hint { opacity: .5; }
}


/* ---------- 周报柱状图 ---------- */
.week-sub { font-size: 12.5px; color: var(--muted); margin: -2px 0 14px; }
.week-block { margin-top: 16px; }
.week-block .week-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.bars { display: flex; align-items: flex-end; gap: 8px; padding: 0 2px; }
.bar-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 5px;
}
.bar-v {
  width: 100%; max-width: 26px; border-radius: 8px;
  background: #ece8de; transition: height .45s cubic-bezier(.22,.61,.36,1);
}
.bar-v.on { background: var(--pg-blue); }
.bar-tip { font-size: 10.5px; color: var(--muted); min-height: 13px; line-height: 1; }
.bar-day { font-size: 11px; color: var(--muted); }


/* ============================================================
   深色模式（data-theme=dark）
   浅色 pass 里写死了大量 #fff，这里按“表面”逐类接管，
   蓝底英雄卡上的白字白扣保持不动。
   ============================================================ */
:root {
  --surface: #ffffff;
  --surface-2: #f4f1ea;
  --line: #ece8de;
}
html[data-theme="dark"] {
  --bg: #111114;
  --panel: #1b1b20;
  --panel2: #24242b;
  --text: #f0f0f3;
  --muted: #9d9da7;
  --accent: #5b8dff;
  --good: #34c48c;
  --warn: #f2b544;
  --danger: #ff6f85;
  --pg-blue: #3f7bff;
  --pg-blue-soft: #1c2740;
  --pg-card: #1b1b20;
  --pg-shadow: 0 6px 20px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
  --surface: #1b1b20;
  --surface-2: #24242b;
  --line: #2c2c35;
  color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .topbar { background: transparent; border-bottom: 0; }
html[data-theme="dark"] .topright.navchips button,
html[data-theme="dark"] .dropdown button {
  background: var(--surface); border-color: var(--line); color: #d8d8e0;
}
html[data-theme="dark"] .dropdown {
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .ring-card,
html[data-theme="dark"] .flip-card,
html[data-theme="dark"] .flip-nav button,
html[data-theme="dark"] .sk-card,
html[data-theme="dark"] .week-cell,
html[data-theme="dark"] .level-card,
html[data-theme="dark"] .streak-card,
html[data-theme="dark"] #view-home .stat,
html[data-theme="dark"] .acct-hero,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .lib-search input,
html[data-theme="dark"] .cat-chip,
html[data-theme="dark"] #view-home .scenarios.small .scenario,
html[data-theme="dark"] .word-card,
html[data-theme="dark"] .listen-opt {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: var(--pg-shadow) !important;
}
html[data-theme="dark"] .ring-card .ring-svg .track { stroke: #2c2c35; }
html[data-theme="dark"] .bar-v { background: #2c2c35; }
html[data-theme="dark"] .bar-v.on { background: var(--pg-blue); }
html[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #24242b 25%, #2e2e37 37%, #24242b 63%);
  background-size: 400% 100%;
}
html[data-theme="dark"] .tabbar {
  background: #16161a !important;
  border-top: 1px solid #2a2a32 !important;
}
html[data-theme="dark"] .settings-row select,
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea {
  background: var(--surface); color: var(--text); border-color: var(--line);
}
html[data-theme="dark"] .cat-chip.on {
  background: var(--pg-blue) !important; border-color: var(--pg-blue) !important; color: #fff !important;
}
html[data-theme="dark"] .flip-card .speak { background: var(--pg-blue-soft); color: #9dbcff; }
html[data-theme="dark"] .vocab-item,
html[data-theme="dark"] .today-row,
html[data-theme="dark"] .acct-row { border-color: #2a2a32; }
html[data-theme="dark"] .bubble.ai,
html[data-theme="dark"] .bubble-row.coach .bubble { background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .sec-title,
html[data-theme="dark"] .section-title { color: var(--muted); }
html[data-theme="dark"] .tabbar .tab { color: #8d8d97; }
html[data-theme="dark"] .tabbar .tab.active { color: var(--pg-blue); }
html[data-theme="dark"] .modal { background: rgba(0,0,0,.72); }
html[data-theme="dark"] .empty-state .t { color: var(--text); }

/* 说明：蓝色英雄卡/主按钮在深色下保持原色，白字不动 */
html[data-theme="dark"] #todayCard { background: #1f4fd8 !important; }
html[data-theme="dark"] #todayCard .hero-badge { background: var(--pg-yellow); color: #12151b; }

/* 进度环：环心数字 */
.ring-card .ring-box { position: relative; width: 76px; height: 76px; flex: 0 0 auto; }
.ring-card .ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; pointer-events: none;
}
.ring-card .ring-center b { font-size: 21px; font-weight: 800; letter-spacing: -.6px; color: var(--text); }
.ring-card .ring-center span { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   深色模式 · 补漏（章节卡 / 练习页 / 词汇听力选项 / 时间线）
   ============================================================ */
html[data-theme="dark"] #view-home .obj,
html[data-theme="dark"] .tl-card,
html[data-theme="dark"] .streak-card,
html[data-theme="dark"] #view-vocab .word-card,
html[data-theme="dark"] #view-vocab .card,
html[data-theme="dark"] #view-listen .card,
html[data-theme="dark"] #view-listen .listen-card,
html[data-theme="dark"] #view-listen .opt,
html[data-theme="dark"] #view-vocab .options button,
html[data-theme="dark"] #view-listen .options button,
html[data-theme="dark"] #view-vocab .vocab-hero,
html[data-theme="dark"] #view-vocab button,
html[data-theme="dark"] #view-vocab .transcript .bubble,
html[data-theme="dark"] #view-vocab .transcript .msg,
html[data-theme="dark"] #view-talk .msg.assistant,
html[data-theme="dark"] #view-talk .bubble.assistant,
html[data-theme="dark"] #view-talk .bubble-row.sys .bubble,
html[data-theme="dark"] #view-talk .talk-head button,
html[data-theme="dark"] .bubble-row.sys .bubble {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] #view-home .obj::before { border-color: var(--bg) !important; }
html[data-theme="dark"] #view-home .obj-list::before { background: #2c2c35 !important; }
html[data-theme="dark"] .chip,
html[data-theme="dark"] .tag {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .obj-title,
html[data-theme="dark"] #view-home .obj .obj-title { color: var(--text); }
html[data-theme="dark"] .ring-card .ring-center b { color: var(--text); }
html[data-theme="dark"] .week-block .week-label { color: var(--muted); }
html[data-theme="dark"] .hero-badge { box-shadow: none; }
html[data-theme="dark"] .lib-search input::placeholder { color: #6f6f7a; }
html[data-theme="dark"] .acct-row { color: var(--text); }
html[data-theme="dark"] .acct-row.danger { color: var(--danger); }
html[data-theme="dark"] #view-talk .bubble-row.me .bubble { background: var(--pg-blue); color: #fff; }

/* 周报：单元格在卡片里，别再叠一层阴影 */
#weekSummary .week-cell {
  box-shadow: none !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--line);
}
html[data-theme="dark"] #weekSummary .week-cell { background: var(--surface-2) !important; }
/* 顶栏图标按钮在深色下抬一档，emoji 才有对比 */
html[data-theme="dark"] .topright.navchips button { background: var(--surface-2) !important; }

/* ---------- 练习页目标句可读性 ----------
   .drill-target 原本是给「深色渐变气泡」写的浅色字（#eaf1ff）；
   后来 coach 气泡统一成白卡，白底浅字几乎看不见。这里按白卡修正。 */
#view-talk .bubble-row.coach .bubble .drill-target { color: var(--text) !important; }
#view-talk .bubble-row.coach .bubble .drill-zh { color: var(--muted) !important; }
#view-talk .bubble-row.coach .bubble .bubble-meta { color: var(--muted) !important; }
#view-talk .bubble.coach.drill { background: #fff !important; }

/* 深色：气泡底色与文字反向（要 !important 才压得住上面的浅色 pass） */
html[data-theme="dark"] #view-talk .bubble-row.coach .bubble,
html[data-theme="dark"] #view-talk .bubble.coach.drill {
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: var(--pg-shadow) !important;
}
html[data-theme="dark"] #view-talk .bubble-row.coach .bubble .drill-target { color: var(--text) !important; }
html[data-theme="dark"] #view-talk .bubble-row.sys .bubble {
  background: var(--surface-2) !important; color: var(--text) !important;
}
html[data-theme="dark"] #view-talk .bubble-row.coach .bubble button {
  background: var(--pg-blue-soft) !important; color: #a8c4ff !important;
}

/* ---------- 周报：和上周比 ---------- */
.week-cmp {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 2px 0 4px; padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.5; color: var(--text);
}
.week-cmp .cmp-ico {
  flex: 0 0 auto; font-size: 15px; font-weight: 700; line-height: 1.3;
}
.week-cmp .cmp-txt { min-width: 0; }
.week-cmp .cmp-prev {
  display: block; margin-top: 3px;
  font-size: 12px; color: var(--muted);
}
.week-cmp.up { background: #eef8f2; border-color: #d7ecdf; }
.week-cmp.up .cmp-ico { color: #16a163; }
.week-cmp.down { background: #fdf3f5; border-color: #f4dde2; }
.week-cmp.down .cmp-ico { color: #d8556b; }
.week-cmp.flat .cmp-ico { color: var(--muted); }

html[data-theme="dark"] .week-cmp { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .week-cmp.up { background: #16281f; border-color: #24452f; }
html[data-theme="dark"] .week-cmp.up .cmp-ico { color: #4fd39a; }
html[data-theme="dark"] .week-cmp.down { background: #2a1a1e; border-color: #45262c; }
html[data-theme="dark"] .week-cmp.down .cmp-ico { color: #ff8b9e; }

/* ---------- 翻卡：已学/新词 + 难度标签 ---------- */
.flip-card .flip-tags { display: flex; gap: 8px; margin-top: 4px; }
.flip-card .flip-tag {
  font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--line);
}
.flip-card .flip-tag.on { background: var(--pg-blue-soft); color: var(--pg-blue); border-color: transparent; }
html[data-theme="dark"] .flip-card .flip-tag.on { background: #1c2740; color: #9dbcff; }

/* 词库页底部说明：牌堆顺序来自词表原始循序 */
.lib-note {
  margin: 14px 4px 0; font-size: 12px; color: var(--muted); line-height: 1.55;
}

/* ============================================================
   设置页
   ============================================================ */
#view-settings { padding-bottom: 24px; }
.set-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; }
.set-head .ghost { flex: 0 0 auto; padding: 8px 14px; border-radius: 14px; }
.set-title { font-size: 26px; font-weight: 700; letter-spacing: -.4px; color: var(--text); }

.set-group { margin: 0 0 18px; }
.set-group-title { font-size: 12.5px; font-weight: 650; color: var(--muted); margin: 0 8px 8px; }
.set-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border: 0; border-radius: 16px;
  background: var(--pg-card); box-shadow: var(--pg-shadow);
  text-align: left; color: var(--text); font: inherit;
}
.set-row + .set-row { margin-top: 8px; }
.set-row.link { cursor: pointer; }
.set-row.link:active { transform: scale(.995); }
.set-row .set-label { flex: 1; min-width: 0; font-size: 15px; font-weight: 550; line-height: 1.4; }
.set-row .set-sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 3px; }
.set-row .chev { color: var(--muted); font-size: 18px; flex: 0 0 auto; }
.set-row.col { flex-direction: column; align-items: stretch; }

.set-select {
  flex: 0 0 auto; max-width: 46%;
  padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font-size: 14px; font-weight: 550;
}

.seg { display: flex; gap: 4px; margin-top: 10px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.seg button {
  flex: 1; padding: 9px 0; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font-size: 14px; font-weight: 600;
}
.seg button.on { background: var(--pg-card); color: var(--pg-blue); box-shadow: 0 1px 4px rgba(17,17,20,.10); }

.set-foot { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 8px; }

html[data-theme="dark"] .set-row { background: var(--surface) !important; box-shadow: var(--pg-shadow); }
html[data-theme="dark"] .set-select { background: var(--surface-2) !important; border-color: var(--line) !important; color: var(--text) !important; }
html[data-theme="dark"] .seg { background: #24242b; }
html[data-theme="dark"] .seg button.on { background: #32323c; color: #9dbcff; }

/* 设置页「返回」按钮在深色下别还是白底 */
html[data-theme="dark"] #view-settings .set-head .ghost,
html[data-theme="dark"] #view-accounts .acct-row {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] #view-settings .set-head .ghost { box-shadow: var(--pg-shadow); }

/* 「只看没学过的」开关：和分类 chip 同排，用虚线边框区分 */
.cat-chip.only-new { border-style: dashed; }
.cat-chip.only-new.on {
  background: var(--pg-blue-soft); border-color: var(--pg-blue);
  border-style: solid; color: var(--pg-blue);
}
html[data-theme="dark"] .cat-chip.only-new.on { background: #1c2740 !important; color: #9dbcff !important; border-color: #33507f !important; }

/* ---------- 今日任务卡：折叠 ---------- */
#todayCard .today-more {
  width: 100%; margin-top: 6px; padding: 12px 0 2px;
  background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.18);
  border-radius: 0; color: rgba(255,255,255,.78);
  font-size: 13.5px; font-weight: 600; letter-spacing: .2px;
}
#todayCard .today-more span { font-size: 10px; opacity: .8; margin-left: 2px; }
#todayCard .today-more:active { color: #fff; }

/* ---------- 学习卡片（图片） ---------- */
.week-share {
  width: 100%; margin-top: 16px; padding: 14px;
  border: 0; border-radius: 16px;
  background: var(--pg-blue); color: #fff;
  font-size: 15px; font-weight: 650;
  box-shadow: 0 6px 16px rgba(10,87,240,.18);
}
.week-share:active { transform: scale(.99); }

.modal .img-card {
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.modal .img-card img {
  width: 100%; height: auto; border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  background: #fff;
}
.modal .img-hint { text-align: center; font-size: 12.5px; color: rgba(255,255,255,.7); }
.modal .img-actions { display: flex; gap: 10px; }
.modal .img-actions .img-save {
  flex: 1; text-align: center; padding: 14px;
  border-radius: 14px; background: var(--pg-blue); color: #fff;
  font-size: 15px; font-weight: 650; text-decoration: none;
}
.modal .img-actions .ghost {
  flex: 0 0 96px; border-radius: 14px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff;
}

/* 「只看没学过的」独立一行，右对齐 */
.lib-filter { display: flex; justify-content: flex-end; padding: 2px 2px 0; }
.lib-filter:empty { display: none; }
.lib-filter .cat-chip.only-new { font-size: 12.5px; padding: 7px 13px; }

/* ---------- 单词卡 / 音色选择器弹窗（.modal-card 之前根本没上样式，透底） ---------- */
.modal .modal-card {
  width: min(520px, 100%);
  max-height: 86vh; overflow: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 20px 54px rgba(10,16,30,.32);
  color: var(--text);
  text-align: center;
}
.modal .modal-card .word-big {
  font-size: 30px; font-weight: 800; letter-spacing: -.4px;
  color: var(--text); text-align: center;
}
.modal .modal-card .phon { font-size: 14px; color: var(--muted); text-align: center; }
.modal .modal-card #wMeaning { font-size: 16px; color: var(--text); }
.modal .modal-card .muted { font-size: 12.5px; }
.modal .modal-card h4 { text-align: left; }
.modal .modal-card button { border-radius: 14px; }
.modal .modal-card .voice-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2);
}
.modal .modal-card .voice-row.on { border-color: var(--pg-blue); background: var(--pg-blue-soft); }
.modal .modal-card .voice-row .vlabel { flex: 1; font-size: 14px; text-align: left; }
.modal .modal-card .voice-row button { flex: 0 0 auto; padding: 7px 12px; font-size: 13px; }
html[data-theme="dark"] .modal .modal-card { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .modal .modal-card .voice-row.on { background: #1c2740; border-color: #3f7bff; }

/* ============================================================
   词库 v20：统计头 + 导读目录 + 遗忘曲线双面卡
   ============================================================ */

/* ---------- 顶部三张统计卡 ---------- */
.hw-stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin: 4px 0 14px; }
.hw-stats .hcard {
  background: var(--pg-card); border-radius: 18px; box-shadow: var(--pg-shadow);
  padding: 14px 14px 12px; border: 1px solid transparent;
}
.hw-stats .hcard.wide { grid-column: span 1; }
.hw-stats .hrow { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.hw-stats .hlab { font-size: 12px; color: var(--muted); }
.hw-stats .hval { font-size: 26px; font-weight: 800; letter-spacing: -.6px; color: var(--text); }
.hw-stats .hicon { font-size: 16px; }
.hw-stats .hbar { height: 6px; border-radius: 999px; background: var(--surface-2); margin: 8px 0 6px; overflow: hidden; }
.hw-stats .hbar > i { display: block; height: 100%; background: var(--pg-blue); border-radius: 999px; transition: width .5s ease; }
.hw-stats .hsub { font-size: 11.5px; color: var(--muted); }
@media (max-width: 420px) { .hw-stats { grid-template-columns: 1fr 1fr; } .hw-stats .hcard.wide { grid-column: span 2; } }

/* ---------- 两个子 Tab ---------- */
.lib-tabs { display: flex; gap: 26px; padding: 0 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.lib-tab {
  position: relative; padding: 10px 0 12px; border: 0; background: transparent;
  color: var(--muted); font-size: 15px; font-weight: 600;
}
.lib-tab.on { color: var(--text); }
.lib-tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px;
  background: var(--text); border-radius: 2px;
}

/* ---------- 目录：子类卡片 ---------- */
.ggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
@media (max-width: 420px) { .ggrid { grid-template-columns: 1fr; } }
.gcard {
  text-align: left; padding: 14px 15px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--pg-card); box-shadow: var(--pg-shadow); color: var(--text);
}
.gcard:active { transform: scale(.995); }
.gcard .gtop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gcard .gname { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.gcard .gcat { font-size: 11.5px; color: var(--muted); }
.gcard .gbar { height: 5px; border-radius: 999px; background: var(--surface-2); margin: 10px 0 7px; overflow: hidden; }
.gcard .gbar > i { display: block; height: 100%; background: var(--pg-blue); border-radius: 999px; }
.gcard .gmeta { font-size: 12px; color: var(--muted); }

/* ---------- 目录：词行 ---------- */
.wrow-head {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 10px;
  font-size: 15px; font-weight: 650;
}
.wlist { display: flex; flex-direction: column; gap: 8px; }
.wrow {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 16px;
  background: var(--pg-card); border: 1px solid var(--line);
}
.wrow .wplay {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--pg-blue);
  font-size: 11px; line-height: 1;
}
.wrow .wmain { flex: 0 0 auto; min-width: 92px; }
.wrow .wword { font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.wrow .wmeta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.wrow .wzh { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); opacity: .85; }
.wrow .wmark {
  flex: 0 0 auto; width: 34px; height: 30px; padding: 0; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 14px;
}
.wrow .wmark.on { color: #f0a800; border-color: #f4dfa0; background: #fff8e4; }
.wmore { text-align: center; font-size: 12px; color: var(--muted); margin: 12px 0; }

/* ---------- 遗忘曲线卡片 ---------- */
.card-runbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; margin-bottom: 10px;
  background: var(--pg-card); border: 1px solid var(--line); border-radius: 14px;
  font-size: 13px; color: var(--muted);
}
.card-runbar .runlabel { font-weight: 650; color: var(--text); }
.card-banner {
  padding: 12px 14px; margin-bottom: 14px; border-radius: 14px;
  background: #fdf6e6; border: 1px solid #f4e3b8; color: #8a6a1e;
  font-size: 13px; line-height: 1.6;
}
.card-banner:empty { display: none; }

.card-stage { perspective: 1200px; }
.fc {
  position: relative; height: 320px; border-radius: 22px;
  transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,.7,.3,1);
  cursor: pointer; touch-action: pan-y;
}
.fc.flipped { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px; border-radius: 22px; text-align: center;
}
.fc-front { background: var(--pg-card); border: 1px solid var(--line); box-shadow: var(--pg-shadow); }
.fc-back { background: #1c1c22; color: #f2f2f4; transform: rotateY(180deg); box-shadow: 0 14px 34px rgba(10,16,30,.28); }
.fc-top {
  position: absolute; top: 16px; left: 20px; right: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--muted);
}
.fc-back .fc-top { color: rgba(255,255,255,.55); }
.fc-state { padding: 2px 9px; border-radius: 999px; background: var(--surface-2); font-weight: 600; }
.fc-back .fc-state { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.fc-word { font-size: 52px; font-weight: 800; letter-spacing: -1.6px; color: var(--text); }
.fc-phon { font-size: 15px; color: var(--muted); }
.fc-play {
  margin-top: 6px; padding: 9px 18px; border-radius: 999px;
  border: 0; background: var(--pg-blue-soft); color: var(--pg-blue); font-size: 13.5px; font-weight: 650;
}
/* 学过的状态 + 「我已学过」标记（对标 1368：懂的词不用再学第二遍） */
.fc-state.learned { background: #e7f6ec; color: #1f7a4d; }
.fc-state.mastered { background: #fff3d6; color: #8a5a00; }
.fc-actions { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.fc-mark {
  margin-top: 6px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
  font-size: 13px; font-weight: 650;
}
.fc-mark.on { background: #fff3d6; border-color: #f0d79a; color: #8a5a00; }
.fc-mark:active { transform: scale(.96); }
html[data-theme="dark"] .fc-state.learned { background: #17352a; color: #7fd7a8; }
html[data-theme="dark"] .fc-state.mastered { background: #3a2f14; color: #e9c97f; }
html[data-theme="dark"] .fc-mark.on { background: #3a2f14; border-color: #5a4a20; color: #e9c97f; }
.fc-hint { position: absolute; bottom: 16px; left: 0; right: 0; font-size: 12px; color: var(--muted); }
.fc-back .fc-hint { color: rgba(255,255,255,.5); }
.fc-cn { font-size: 30px; font-weight: 700; letter-spacing: -.6px; }
.fc-sub { font-size: 13px; color: #f0c65a; }

.card-grades { display: flex; gap: 10px; margin-top: 16px; }
.grade-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 6px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--pg-card); color: var(--text); font-size: 14.5px; font-weight: 700;
}
.grade-btn span { font-size: 11.5px; font-weight: 500; opacity: .7; }
.grade-btn.forgot { background: #fdeef1; border-color: #f6d5dc; color: #c0392b; }
.grade-btn.vague { background: #fdf6e6; border-color: #f3e2b6; color: #a8761a; }
.grade-btn.known { background: #ecf8f2; border-color: #cfeade; color: #157f56; }

.card-nav { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.card-nav .nav-hint { flex: 1; text-align: center; font-size: 11.5px; color: var(--muted); }
.card-nav button { flex: 0 0 auto; }

.run-summary { text-align: center; padding: 28px 20px; background: var(--pg-card); border-radius: 22px; border: 1px solid var(--line); }
.run-summary .rs-ico { font-size: 34px; }
.run-summary .rs-t { font-size: 17px; font-weight: 700; margin: 8px 0 14px; }
.run-summary .rs-rows { display: flex; flex-direction: column; gap: 8px; max-width: 260px; margin: 0 auto; }
.run-summary .rs-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.run-summary .rs-row b { font-weight: 800; }
.run-summary .rs-row b.ok { color: #157f56; }
.run-summary .rs-row b.mid { color: #a8761a; }
.run-summary .rs-row b.bad { color: #c0392b; }

/* 深色 */
html[data-theme="dark"] .hw-stats .hcard,
html[data-theme="dark"] .gcard,
html[data-theme="dark"] .wrow,
html[data-theme="dark"] .card-runbar,
html[data-theme="dark"] .fc-front,
html[data-theme="dark"] .run-summary { background: var(--surface) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .card-banner { background: #2a2317; border-color: #4a3d22; color: #e7c579; }
html[data-theme="dark"] .wrow .wmark.on { background: #2a2317; border-color: #4a3d22; color: #f0c65a; }
html[data-theme="dark"] .grade-btn.forgot { background: #2a1a1e; border-color: #45262c; color: #ff9aab; }
html[data-theme="dark"] .grade-btn.vague { background: #2a2317; border-color: #4a3d22; color: #e7c579; }
html[data-theme="dark"] .grade-btn.known { background: #16281f; border-color: #24452f; color: #6ee0a9; }

/* 目录改成「分类分组 + 子类胶囊」 */
.gsec { margin-bottom: 18px; }
.gsec-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 4px 9px; font-size: 15px; font-weight: 700; color: var(--text);
}
.gsec-h .gsec-n { font-size: 12px; font-weight: 500; color: var(--muted); }
.gchips { display: flex; flex-wrap: wrap; gap: 8px; }
.gchip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--pg-card); color: var(--text);
  font-size: 13.5px; font-weight: 600;
}
.gchip i { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.gchip em { font-style: normal; font-size: 11px; color: var(--pg-blue); font-weight: 700; }
.gchip.done { border-color: #cfeade; background: #ecf8f2; color: #157f56; }
html[data-theme="dark"] .gchip { background: var(--surface) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .gchip.done { background: #16281f !important; border-color: #24452f !important; color: #6ee0a9; }

/* 每轮数量 + 难度筛选 */
.card-runbar .runsize {
  padding: 5px 11px; margin-left: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--pg-blue);
  font-size: 12px; font-weight: 650;
}
.lib-filter { justify-content: space-between; align-items: center; gap: 8px; }
.lib-filter .lib-count { font-size: 12px; color: var(--muted); }
.lib-filter .filter-right { display: flex; gap: 8px; align-items: center; }
.lib-filter .cat-chip.diff.on { color: var(--pg-blue); }
html[data-theme="dark"] .card-runbar .runsize { background: var(--surface-2) !important; border-color: var(--line) !important; }

/* 去掉「按下瞬间那个方框」：安卓/移动端的 tap 高亮 + 按钮聚焦环 */
* { -webkit-tap-highlight-color: transparent; }
button:focus, a:focus, [role=button]:focus, .talk-btn:focus, .hold-btn:focus {
  outline: none !important;
  box-shadow: none;
}
/* 键盘用户仍然要看得到焦点 */
button:focus-visible, a:focus-visible, [role=button]:focus-visible {
  outline: 2px solid var(--pg-blue) !important;
  outline-offset: 2px;
}


/* ============================================================
   离线提示条（电脑关机 / 断网时置顶，App 与浏览器都生效）
   - 自身 position:sticky top:0，z-index 比顶栏（5）高，滚动时压在内容上面
   - body 自带 padding:10px，用负 margin 拉成通栏，不然左右各缩进 10px
   - 顶栏是 position:relative（不是 sticky），所以不需要给它让位：
     常态在条子下面，滚动时正常滚走，不会被条子挡住操作
   - --offline-h 由 app.js 按实际高度写入，保证与安全区高度一致
   ============================================================ */
:root { --offline-h: 42px; }

.offline-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  min-height: var(--offline-h);
  margin: -10px -10px 0;
  padding: calc(9px + env(safe-area-inset-top)) 14px 9px;
  background: #fff6dc;
  color: #7a5600;
  border-bottom: 1px solid #f0dcae;
  font-size: 13px; line-height: 1.35;
}
.offline-bar.hidden { display: none !important; }
.offline-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 3px rgba(240, 180, 41, .22);
}
.offline-text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.offline-retry {
  flex: 0 0 auto; padding: 3px 12px; font-size: 12.5px; font-weight: 600;
  border-radius: 999px; border: 1px solid #e2c584; background: #fff; color: #7a5600;
}
.offline-retry:active { transform: scale(.96); }

html[data-theme="dark"] .offline-bar {
  background: #2b2415; color: #e9c97f; border-bottom-color: #4a3d22;
}
html[data-theme="dark"] .offline-dot {
  background: #e9c97f; box-shadow: 0 0 0 3px rgba(233, 201, 127, .18);
}
html[data-theme="dark"] .offline-retry {
  background: #342a11; border-color: #4a3d22; color: #e9c97f;
}

/* 轻提示气泡（例：离线时评分没上传），不挡底部 Tab */
.toast-tip {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px);
  z-index: 220; max-width: 86vw;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(28, 30, 36, .94); color: #fff;
  font-size: 12.5px; line-height: 1.4; text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast-tip.on { opacity: 1; transform: translateX(-50%) translateY(0); }
html[data-theme="dark"] .toast-tip { background: rgba(52, 55, 66, .96); }


/* ============================================================
   开场场景设定（待办 C）：中文一句话告诉你「在哪、对面是谁、要干什么」
   ============================================================ */
.scene-note {
  display: flex; gap: 8px; align-items: flex-start;
  max-width: 100%;
  margin: 2px 0 10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #eef4ff;
  border: 1px dashed #c4d7fa;
  color: #2f4a75;
  font-size: 13px; line-height: 1.55;
}
.scene-note .scene-ico { flex: 0 0 auto; font-size: 14px; line-height: 1.5; }
html[data-theme="dark"] .scene-note {
  background: #16233a; border-color: #2c4468; color: #b9cdea;
}

/* ============================================================
   按住说话（待办 B）
   - touch-action:none：手指在按钮上滑动不再触发滚动/取消，pointercancel 不会来抢
   - .pressing 按下变深、松手回弹（.recording 是已经在录的红色态）
   ============================================================ */
#view-talk .talk-btn {
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#view-talk .talk-btn.pressing {
  filter: brightness(.88);
  transform: scale(.95);
  box-shadow: 0 8px 20px rgba(11, 76, 224, .28), inset 0 -4px 10px rgba(0, 0, 0, .2);
}
/* 录音失败的中文提示 + 一键去设置 */
.mic-fix {
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff4f4;
  border: 1px solid #f6cfd2;
  color: #8a2c34;
  font-size: 13px; line-height: 1.6;
}
.mic-fix-t { font-weight: 500; }
.mic-fix-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mic-fix-actions .sm { padding: 7px 14px; font-size: 12.5px; border-radius: 999px; }
html[data-theme="dark"] .mic-fix {
  background: #2b171a; border-color: #5a2b31; color: #f3b9bf;
}