/* ===================== 悦听单词 · 样式 ===================== */
:root {
  /* 默认主题：雾蓝极简（原「经典默认」移至 classic） */
  --bg: #f2f5f9;
  --panel: #ffffff;
  --ink: #17202e;
  --ink-soft: #4a5568;
  --muted: #98a4b5;
  --line: #e6ebf2;
  --accent: #3a7bff;
  --accent-soft: #eaf1fd;
  --accent-ink: #2c59d6;
  --gold: #f5a623;
  --green: #2bb673;
  --danger: #ef5b6b;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(31, 37, 51, 0.08);
  --sidebar-w: 248px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.app { display: flex; height: 100vh; overflow: hidden; }

/* ---------- 侧边栏 ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 14px 10px 24px;
}
.side-section { margin-bottom: 10px; }
.side-head {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: .04em;
  padding: 10px 10px 6px;
  text-transform: uppercase;
}
.side-head.collapsible { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.side-head.collapsible .caret { transition: transform .2s; color: var(--muted); }
.side-head.collapsible.open .caret { transform: rotate(180deg); }
.side-item, .side-sub {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  border: none; background: transparent;
  text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: 10px;
  font-size: 14px; color: var(--ink);
  transition: background .15s, color .15s;
}
.side-sub { padding-left: 24px; font-size: 13.5px; color: var(--ink-soft); }
.side-item:hover, .side-sub:hover { background: var(--accent-soft); }
.side-item.active, .side-sub.active {
  background: var(--accent); color: #fff; font-weight: 600;
}
.side-item.active .badge, .badge {
  background: var(--gold); color: #fff; font-size: 11px;
  border-radius: 10px; padding: 1px 7px; font-weight: 700;
}
.side-item.active .badge { background: rgba(255,255,255,.25); }
.badge.warn { background: var(--danger); }

/* ---------- 主区域 ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.menu-toggle { display: none; border: none; background: transparent; font-size: 22px; cursor: pointer; }
.title-block h1 { font-size: 19px; margin: 0; }
.title-block .count { font-size: 12px; color: var(--muted); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#searchInput {
  width: 240px; max-width: 42vw;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; outline: none; transition: border .15s;
}
#searchInput:focus { border-color: var(--accent); }

.content { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }

/* ---------- 焦点卡片 ---------- */
.focus-card {
  background: linear-gradient(135deg, #ffffff, #f7f9ff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px; margin-bottom: 18px;
}
.card-empty { color: var(--muted); text-align: center; padding: 30px 0; }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.card-tags .tag {
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 12px; padding: 2px 9px; border-radius: 8px; margin-right: 6px; font-weight: 600;
}
.card-idx { color: var(--muted); font-size: 13px; }
.card-word { font-size: 38px; font-weight: 800; letter-spacing: .5px; cursor: pointer; }
.card-word::after { content: "🔊"; font-size: 16px; vertical-align: middle; margin-left: 10px; opacity: .45; }
.card-ph { color: var(--accent-ink); font-size: 17px; margin: 4px 0 10px; }
.card-pos { color: var(--muted); font-weight: 500; font-size: 14px; }
.card-cn { font-size: 18px; margin-bottom: 8px; }
.card-ex { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; font-style: italic; cursor: pointer; }
.card-ex::after { content: "🔊"; font-size: 13px; vertical-align: middle; margin-left: 8px; opacity: .4; }
.card-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 单词列表 ---------- */
.word-list { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
  transition: box-shadow .15s, border-color .15s, transform .1s;
}
.row:hover { box-shadow: var(--shadow); }
.row.active { border-color: var(--accent); background: #fbfcff; }
.row.speaking { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.row-main { flex: 1; cursor: pointer; min-width: 0; }
.row-word { font-size: 17px; font-weight: 700; }
.row-pos { color: var(--muted); font-weight: 500; font-size: 13px; margin-left: 6px; }
.row-ph { color: var(--accent-ink); font-size: 13.5px; }
/* 细分分类分隔条（菜系包词列表内） */
.row-native { color: var(--sub); font-size: 12.5px; }
.sub-cat-row { padding: 12px 14px 5px; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); letter-spacing: .3px; background: var(--chip-bg, rgba(120,120,120,.08)); border-radius: 8px; margin: 8px 2px 4px; }

.row-cn { color: var(--ink-soft); font-size: 14px; }
.row-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-size: 16px; color: var(--ink-soft);
  transition: all .15s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn.on { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.icon-btn.play { color: var(--accent); border-color: var(--accent); }

.empty { text-align: center; color: var(--muted); padding: 50px 20px; line-height: 1.8; }

/* ---------- 按钮 ---------- */
.btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 9px 16px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600;
  transition: all .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-ink); color: #fff; }
.btn.on { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.btn.ghost { background: transparent; }

/* ---------- 底部播放条 ---------- */
.player {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; background: var(--panel); border-top: 1px solid var(--line);
}
.pl-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 10px;
  padding: 8px 12px; cursor: pointer; font-size: 15px; color: var(--ink);
}
.pl-btn:hover { border-color: var(--accent); color: var(--accent); }
.play-main { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; padding: 10px 20px; }
.play-main:hover { background: var(--accent-ink); color: #fff; }
.play-main.playing { background: var(--danger); border-color: var(--danger); }
.pl-progress { font-size: 13px; color: var(--ink-soft); margin-left: 6px; }
.pl-hint { margin-left: auto; font-size: 12px; color: var(--muted); }

/* ---------- 设置弹窗 ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(20, 26, 40, .45);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.modal.show { display: flex; }
.modal-box {
  background: #fff; border-radius: 16px; width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto; padding: 20px 22px 24px; box-shadow: var(--shadow);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-close { border: none; background: transparent; font-size: 20px; cursor: pointer; color: var(--muted); }
.settings-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: 14px; }
.settings-form .field span { color: var(--ink-soft); }
.settings-form .field b { color: var(--accent-ink); }
.settings-form input[type=range] { width: 100%; accent-color: var(--accent); }
.settings-form select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; }
.voice-status { font-size: 12px; color: var(--muted); margin: -6px 0 12px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; cursor: pointer; }

/* ---------- 移动端遮罩 ---------- */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 5; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .menu-toggle { display: block; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 10;
    transform: translateX(-100%); transition: transform .25s;
    box-shadow: var(--shadow);
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open .overlay { display: block; }
  .card-word { font-size: 30px; }
  .pl-hint { display: none; }
  #searchInput { width: 150px; }
}
@media (max-width: 520px) {
  .top-actions { gap: 6px; }
  #searchInput { width: 120px; }
  .card-actions .btn { flex: 1; text-align: center; }
}

/* ---------- 练习 / 复习 ---------- */
.modal-box.wide { max-width: 560px; }
.pr-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pr-modes { display: flex; gap: 6px; }
.pr-tab { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 6px 12px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.pr-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pr-meta { font-size: 12.5px; color: var(--muted); }
.pr-card { background: #fafbff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; text-align: center; }
.pr-audio { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 12px 22px; font-size: 16px; cursor: pointer; font-weight: 700; }
.pr-audio.sm { padding: 8px 14px; font-size: 13px; margin: 12px 0; }
.pr-input { display: block; width: 100%; margin: 14px 0; padding: 12px 14px; font-size: 17px; border: 1px solid var(--line); border-radius: 10px; outline: none; text-align: center; }
.pr-input:focus { border-color: var(--accent); }
.pr-result { min-height: 22px; font-size: 14.5px; font-weight: 600; margin: 6px 0; }
.pr-result .ok { color: var(--green); }
.pr-result .no { color: var(--danger); }
.pr-actions { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.pr-word { font-size: 26px; font-weight: 800; }
.pr-ph { font-size: 15px; color: var(--accent-ink); font-weight: 500; margin-left: 8px; }
.pr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0; }
.pr-opt { padding: 12px; border: 1px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer; font-size: 14.5px; transition: all .12s; }
.pr-opt:hover { border-color: var(--accent); }
.pr-opt.correct { background: #e6f7ef; border-color: var(--green); color: #14804e; font-weight: 700; }
.pr-opt.wrong { background: #fdecee; border-color: var(--danger); color: #b3273a; }
.pr-summary { text-align: center; padding: 24px 0; }
.pr-sum-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.pr-sum-score { color: var(--ink-soft); margin-bottom: 16px; }

/* ---------- 雅思子分类筛选条（听力/阅读/口语/写作/538考点词） ---------- */
.icat-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.icat-bar .chip {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.icat-bar .chip:hover { border-color: var(--accent); color: var(--accent); }
.icat-bar .chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.icat-bar .chip .chip-n { font-size: 11px; opacity: .75; margin-left: 2px; }
/* 能力域角标（不可点击，仅标识） */
.icat-bar .dom-chip {
  cursor: default;
  background: var(--accent-soft, rgba(90,140,255,.10));
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.icat-bar .dom-chip:hover { color: var(--accent); }
@media (max-width: 720px) {
  .icat-bar { padding: 8px 12px; gap: 6px; }
  .icat-bar .chip { padding: 5px 10px; font-size: 12px; }
}

/* ---------- 场景包 / 冲刺路径 ---------- */
.side-minigroup {
  font-size: 12px; color: var(--muted);
  padding: 8px 14px 2px 26px;
  font-weight: 600;
}
.path-desc {
  color: var(--ink-soft); font-size: 14px; line-height: 1.7;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px;
}
.pack-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px;
  cursor: pointer; transition: all .15s;
}
.pack-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.pack-no {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.pack-info { flex: 1; min-width: 0; }
.pack-name { font-weight: 700; font-size: 15.5px; }
.pack-meta { color: var(--muted); font-size: 12.5px; margin: 3px 0 7px; }
.pack-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pack-bar-in { height: 100%; background: var(--green); border-radius: 3px; transition: width .3s; }
.pack-pct { color: var(--green); font-weight: 700; font-size: 14px; flex: none; }
.card-word.sent { font-size: 24px; line-height: 1.5; }
.row.sent .row-word { font-size: 15px; font-weight: 600; line-height: 1.5; }
@media (max-width: 720px) {
  .card-word.sent { font-size: 19px; }
  .pack-card { padding: 12px 14px; gap: 10px; }
}

/* 雅思二级细分条（写作话题/口语Part/听力Section） */
.icat-bar.sub { padding-top: 0; border-bottom: 1px solid var(--line); }
.icat-bar.sub .chip { font-size: 12px; padding: 4px 11px; }

/* ---------- 数据中心 ---------- */
.st-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.st-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 8px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.st-num { font-size: 26px; font-weight: 800; color: var(--accent-ink); }
.st-num.fire { color: var(--gold); }
.st-cap { font-size: 12px; color: var(--muted); margin-top: 4px; }
.st-poster-btn { font-size: 13px; padding: 8px 10px; }
.st-sec { margin-top: 16px; }
.st-sec h3 { font-size: 14px; margin: 0 0 10px; color: var(--ink-soft); }
.st-chart { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.st-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.st-bars { display: flex; align-items: flex-end; gap: 3px; height: 105px; width: 100%; justify-content: center; }
.st-cbar { width: 12px; border-radius: 4px 4px 0 0; min-height: 2px; }
.st-cbar.played { background: var(--accent); }
.st-cbar.fam { background: var(--green); }
.st-day { font-size: 11px; color: var(--muted); }
.st-legend { font-size: 12px; color: var(--muted); margin-top: 8px; }
.lg.played { color: var(--accent); }
.lg.fam { color: var(--green); }
.st-srs-row, .st-bank { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.st-srs-label { width: 52px; font-size: 12px; color: var(--muted); text-align: right; }
.st-srs-n { width: 40px; font-size: 12px; color: var(--ink-soft); }
.st-bar { flex: 1; }
.st-bank-name { width: 40px; font-size: 13px; color: var(--ink-soft); }
.st-bank-n { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---------- 打卡海报 ---------- */
.poster-wrap { padding: 10px 0 4px; text-align: center; }
#posterCanvas { width: 100%; max-width: 340px; border-radius: 16px; box-shadow: var(--shadow); }
.poster-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
@media (max-width: 720px) {
  .st-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 多端同步 ---------- */
.sync-box { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.sync-head { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.sync-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sync-code {
  font-size: 22px; font-weight: 800; letter-spacing: 4px;
  color: var(--accent-ink); background: var(--accent-soft);
  padding: 6px 14px; border-radius: 10px;
}
.btn.sm { font-size: 12.5px; padding: 6px 12px; }
#syncInput {
  flex: 1; min-width: 120px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 14px;
  text-transform: uppercase; letter-spacing: 2px;
}
.sync-status { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.6; }

/* ---------- 邀请裂变 ---------- */
.invite-box { margin-top: 12px; padding: 12px; background: linear-gradient(135deg, #fff7e8, #fff1f4); border-radius: 14px; }
.invite-label { font-size: 12.5px; color: #b87700; font-weight: 600; margin-bottom: 8px; display: block; }
.invite-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#inviteInput {
  flex: 1; min-width: 110px; padding: 8px 12px;
  border: 1px solid #ffd591; border-radius: 10px; font-size: 14px;
  text-transform: uppercase; letter-spacing: 2px; background: #fff;
}
#inviteMine { margin-top: 10px; width: 100%; color: #b87700; border-color: #ffd591; }

/* ---------- 538 同义替换链 ---------- */
.card-syn { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 2; }
.syn-tag {
  display: inline-block; background: #fff7e8; color: #b87700;
  border: 1px solid #f5d9a8; border-radius: 8px;
  padding: 1px 9px; margin: 0 6px 4px 0; font-size: 13px; font-weight: 600;
}

/* 会员状态 */
.sync-member { font-size: 14px; font-weight: 700; color: var(--muted); }
.sync-member.on { color: #b87700; background: #fff7e8; padding: 6px 12px; border-radius: 10px; }

/* ---------- 会员题型 / 辨音 / 填空 ---------- */
.pr-tab .lock { font-size: 11px; }
.pr-lock { text-align: center; padding: 30px 16px; }
.pr-lock-icon { font-size: 40px; }
.pr-lock-title { font-size: 17px; font-weight: 700; margin: 10px 0 8px; }
.pr-lock-desc { color: var(--ink-soft); font-size: 13.5px; line-height: 1.8; margin-bottom: 18px; }
.pr-hint-line { color: var(--ink-soft); font-size: 14px; margin-bottom: 10px; }
.pr-cloze { font-size: 18px; line-height: 1.8; margin-bottom: 8px; font-style: italic; }
.pr-hint-cn { color: var(--muted); font-size: 13px; margin-bottom: 12px; }

/* ---------- PWA 安装横幅 ---------- */
.install-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 76px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff;
  border-radius: 999px; padding: 10px 18px;
  font-size: 13.5px; box-shadow: var(--shadow);
  max-width: 92vw;
}
.install-banner .btn.sm { background: var(--accent); border: none; color: #fff; }
.ib-close { background: transparent; border: none; color: rgba(255,255,255,.7); font-size: 15px; cursor: pointer; }

/* 分批渲染·加载更多 */
.load-more {
  text-align: center; color: var(--muted); font-size: 13px;
  padding: 14px; cursor: pointer;
}
.load-more:hover { color: var(--accent); }

/* ================= 会员中心 ================= */
.member-status-bar {
  background: linear-gradient(135deg, #fff7e8, #fff0d6);
  border: 1px solid #f0d9a8; border-radius: 14px;
  padding: 14px 18px; margin-bottom: 16px;
  font-size: 14px; color: #6b4a00; line-height: 1.6;
}
.member-status-bar b { font-size: 15px; }
.plan-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 6px;
}
.plan-card {
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 16px 14px; text-align: center; cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  background: var(--panel);
}
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.plan-card.hot { border-color: var(--accent); background: linear-gradient(180deg, #fff8e8, var(--panel)); }
.plan-card .pc-name { font-size: 15px; font-weight: 700; }
.plan-card .pc-name .hot-tag { font-size: 11px; background: #ff4d4f; color: #fff; border-radius: 6px; padding: 1px 5px; margin-left: 4px; vertical-align: 2px; }
.plan-card .pc-price { font-size: 22px; font-weight: 800; color: var(--accent); margin: 6px 0 2px; }
.plan-card .pc-price small { font-size: 12px; font-weight: 400; color: var(--muted); }
.plan-card .pc-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.plan-card.share-card { border-color: #E24B4A; background: #fff5f5; cursor: pointer; }
.plan-card.share-card:hover { border-color: #E24B4A; box-shadow: 0 0 0 2px rgba(226,75,74,0.15); }
.plan-card.worldtrip-card { border-color: #ff8c00; background: #fff8f0; cursor: pointer; }
.plan-card.worldtrip-card:hover { border-color: #ff8c00; box-shadow: 0 0 0 2px rgba(255,140,0,0.15); }
.share-body { padding: 8px 0; text-align: center; }
.share-status { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }
.share-steps { text-align: left; max-width: 280px; margin: 0 auto; }
.member-divider { border-top: 1px dashed var(--line); margin: 16px 0; }
.consult-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, #eef6ff, #e8f4ff);
  border: 1px solid #cfe4ff; border-radius: 14px; padding: 14px 18px;
}
.consult-banner-text { display: flex; flex-direction: column; gap: 2px; }
.consult-banner-text b { color: #1a4f8b; font-size: 15px; }
.consult-banner-text span { color: #4a6f96; font-size: 12.5px; }

/* ================= 支付 ================= */
.pay-body { text-align: center; }
.pay-amount { font-size: 28px; font-weight: 800; color: var(--accent); margin: 8px 0 16px; }
.pay-qr { width: 210px; height: 210px; margin: 0 auto 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.pay-qr img, .pay-qr canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.pay-tip { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.pay-status { font-size: 14px; font-weight: 600; min-height: 20px; color: var(--accent); }
.pay-no-conf { color: #d9534f; font-size: 14px; line-height: 1.7; padding: 10px 0; }

/* ================= 顶栏会员按钮（设置右侧） ================= */
.member-btn {
  background: linear-gradient(135deg, #f7b733, #f59e0b);
  color: #fff !important; border: none; font-weight: 700;
  box-shadow: 0 2px 8px rgba(245, 158, 11, .35);
  transition: transform .12s, box-shadow .12s;
}
.member-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, .45); }

/* ================= 侧边栏底部常驻入口（留学咨询） ================= */
.side-foot {
  position: sticky; bottom: -24px; /* 抵消 sidebar 底部 padding，吸底 */
  margin: 16px -10px -24px; padding: 10px 10px 12px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.side-foot-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #eef6ff, #e3f0ff);
  border: 1px solid #cfe4ff; border-radius: 12px;
  padding: 10px 12px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: #1a4f8b;
  transition: background .12s, transform .12s;
}
.side-foot-btn small { font-weight: 400; font-size: 11px; color: #4a6f96; }
.side-foot-btn:hover { background: linear-gradient(135deg, #e0eeff, #d6e9ff); transform: translateY(-1px); }

/* ================= 场景包管理编辑 ================= */
.icon-btn.del { color: #d9534f; border-color: #f0c8c8; }
.icon-btn.del:hover { background: #fdecec; border-color: #d9534f; }
.pack-add-bar {
  display: flex; gap: 8px; padding: 12px 8px; margin-top: 8px;
  border-top: 1px dashed var(--line); align-items: center;
}
.pack-add-bar input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px;
}
.admin-chip { border-color: #f59e0b !important; color: #b87700 !important; }
.grp-edit { cursor: pointer; font-size: 11px; opacity: .55; }
.grp-edit:hover { opacity: 1; }
.side-minigroup { display: flex; align-items: center; justify-content: space-between; }

/* 分组管理员工具 */
.grp-tools { display: inline-flex; gap: 6px; align-items: center; }
.grp-add { cursor: pointer; font-size: 11px; color: #1a7f37; border: 1px solid #b7e0c3; border-radius: 6px; padding: 0 5px; opacity: .75; }
.grp-add:hover { opacity: 1; background: #eefaf1; }

/* ================= 例句循环模式 ================= */
.card-ex.ex-focus {
  font-size: 17px; font-weight: 600; color: var(--accent);
  background: linear-gradient(135deg, #fff8e8, #fff2d9);
  border: 1.5px solid #f0d9a8; border-radius: 12px;
  padding: 12px 14px; margin-top: 8px; line-height: 1.7;
  box-shadow: 0 2px 10px rgba(240, 177, 60, .18);
  animation: exPulse 1.6s ease-in-out infinite;
}
@keyframes exPulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(240, 177, 60, .18); }
  50% { box-shadow: 0 4px 18px rgba(240, 177, 60, .38); }
}
.ex-loop-badge {
  font-size: 11px; font-weight: 700; color: #b87700;
  background: #ffe9bd; border-radius: 8px; padding: 2px 8px; margin-right: 4px;
}
.pl-btn.playing { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ================= 播放设置分区 ================= */
.set-section {
  font-size: 13px; font-weight: 800; color: var(--accent);
  margin: 18px 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid rgba(240, 177, 60, .25);
  letter-spacing: .5px;
}
.set-section:first-child { margin-top: 4px; }

/* ================= 单词卡 美/英双发音 ================= */
.accent-btns { margin-left: 8px; display: inline-flex; gap: 6px; vertical-align: 2px; }
.accent-btn {
  border: 1px solid var(--line); background: var(--panel); border-radius: 8px;
  font-size: 12px; padding: 3px 9px; cursor: pointer; color: var(--muted);
  transition: all .12s;
}
.accent-btn:hover { border-color: var(--accent); color: var(--accent); background: #fff8e8; }

/* ================= 例句循环：行内展开例句 ================= */
.row-ex {
  flex-basis: 100%; width: 100%;
  margin-top: 6px; padding: 8px 12px;
  font-size: 13.5px; line-height: 1.6; color: var(--accent);
  background: linear-gradient(135deg, #fff8e8, #fff2d9);
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  animation: rowExIn .25s ease;
}
@keyframes rowExIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.row.ex-open { border-color: var(--accent); flex-wrap: wrap; }

/* ================= 例句中英对照 ================= */
.card-ex { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.card-ex .ex-en { flex: 1 1 45%; min-width: 180px; }
.card-ex .ex-cn { flex: 1 1 45%; min-width: 180px; color: #8a6d1f; font-size: .92em; }
.card-ex.ex-focus .ex-cn { color: #7a5a00; font-weight: 500; }
.row-ex { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.row-ex .ex-en { flex: 1 1 48%; min-width: 160px; }
.row-ex .ex-cn { flex: 1 1 48%; min-width: 160px; color: #8a6d1f; font-size: .9em; }

/* ================= 播放栏空白可点播放 ================= */
.player { cursor: pointer; }
.player button, .player a { cursor: pointer; }

/* ================= 会员专属包锁定 ================= */
.premium-lock {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #fff7e8, #ffefd0);
  border: 1.5px dashed #f0b13c; border-radius: 14px;
  padding: 18px 20px; margin: 12px 8px;
}
.pl-lock-icon { font-size: 28px; }
.pl-lock-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pl-lock-text b { color: #8a5a00; font-size: 15px; }
.pl-lock-text span { color: #a07a20; font-size: 12.5px; }
.lock-badge { font-size: 11px; opacity: .8; }

/* ================= 高薪岗位英语（大组套子方向） ================= */
.side-head.sub-head {
  font-size: 12.5px; padding: 7px 8px 7px 18px; margin-top: 2px;
  color: #8a5a00; background: rgba(240, 177, 60, .08);
  border-radius: 8px; font-weight: 700;
}
.side-subgroup { padding-left: 14px; }
.side-subgroup .side-sub { font-size: 12.5px; }

/* ================= 主题系统（9 套，变量驱动） ================= */
/* 1 学术米白 */
:root[data-theme="academic"] {
  --bg: #f7f3ea; --panel: #fffdf7; --ink: #2e3a59; --ink-soft: #5a6a8a;
  --muted: #9a8c6a; --line: #e3d9c6; --accent: #a08c5a; --accent-soft: #efe7d5; --accent-ink: #8a6d1f;
  --shadow: 0 6px 24px rgba(90, 75, 40, 0.10);
}
/* 2 深夜专注（深色） */
:root[data-theme="midnight"] {
  --bg: #151a24; --panel: #1f2634; --ink: #eef1f6; --ink-soft: #c3cbdd;
  --muted: #7a86a0; --line: #2a3140; --accent: #f0b13c; --accent-soft: #2a3346; --accent-ink: #f5c35c;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
/* 3 清新薄荷 */
:root[data-theme="mint"] {
  --bg: #f2fbf7; --panel: #ffffff; --ink: #14443a; --ink-soft: #2a5a4c;
  --muted: #7ba899; --line: #cdeae0; --accent: #2fae8d; --accent-soft: #dcf3ea; --accent-ink: #1a7a62;
  --shadow: 0 6px 24px rgba(20, 68, 58, 0.08);
}
/* 4 牛津深蓝（深色） */
:root[data-theme="oxford"] {
  --bg: #0f1c33; --panel: #182747; --ink: #f5f7fb; --ink-soft: #c9d4ea;
  --muted: #8fa3cc; --line: #1b2a4a; --accent: #d4af5a; --accent-soft: #22345c; --accent-ink: #e8c56e;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
/* 5 樱花柔粉 */
:root[data-theme="sakura"] {
  --bg: #fdf5f7; --panel: #ffffff; --ink: #5b2f3d; --ink-soft: #7a4a58;
  --muted: #c08a9a; --line: #f2d7de; --accent: #d87d94; --accent-soft: #f8e4ea; --accent-ink: #b95a74;
  --shadow: 0 6px 24px rgba(91, 47, 61, 0.08);
}
/* 6 极简黑白 */
:root[data-theme="minimal"] {
  --bg: #ffffff; --panel: #ffffff; --ink: #111111; --ink-soft: #333333;
  --muted: #999999; --line: #e0e0e0; --accent: #e0452c; --accent-soft: #f5f5f5; --accent-ink: #b8352a;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
/* 7 森林墨绿 */
:root[data-theme="forest"] {
  --bg: #f3f7ef; --panel: #ffffff; --ink: #1e3a24; --ink-soft: #3a5a42;
  --muted: #7a9470; --line: #c9d8c5; --accent: #4a7c3f; --accent-soft: #e2edda; --accent-ink: #35612c;
  --shadow: 0 6px 24px rgba(30, 58, 36, 0.08);
}
/* 8 活力晨曦 */
:root[data-theme="sunrise"] {
  --bg: #fff8ee; --panel: #ffffff; --ink: #5a3000; --ink-soft: #7a4a10;
  --muted: #c08a3a; --line: #ffd9a8; --accent: #ff8a2a; --accent-soft: #ffe9c9; --accent-ink: #e06e10;
  --shadow: 0 6px 24px rgba(90, 48, 0, 0.10);
}
/* 9 薰衣草紫 */
:root[data-theme="lavender"] {
  --bg: #f8f5fd; --panel: #ffffff; --ink: #3d2a5e; --ink-soft: #5a4a7a;
  --muted: #9a86c0; --line: #ddd3f0; --accent: #7a5fc0; --accent-soft: #eae2f8; --accent-ink: #5f43a8;
  --shadow: 0 6px 24px rgba(61, 42, 94, 0.08);
}
/* 10 经典默认（旧版默认配色，归入展开区） */
:root[data-theme="classic"] {
  --bg: #f4f6fb; --panel: #ffffff; --ink: #1f2533; --ink-soft: #5b6478;
  --muted: #9aa3b5; --line: #e7ebf3; --accent: #4f7cff; --accent-soft: #eaf0ff; --accent-ink: #2c59d6;
}
/* 11 曜石黑金（深色） */
:root[data-theme="obsidian"] {
  --bg: #0b0e13; --panel: #10141b; --ink: #e8e6df; --ink-soft: #9aa3b0;
  --muted: #6d7686; --line: #1e2530; --accent: #d4af37; --accent-soft: #241f10; --accent-ink: #e5c86e;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
/* 12 极光玻璃（深色玻璃） */
:root[data-theme="aurora"] {
  --bg: #0e1420; --panel: rgba(255, 255, 255, .07); --ink: #e8ecf4; --ink-soft: #aab3c5;
  --muted: #7d88a0; --line: rgba(255, 255, 255, .1); --accent: #7c5cff; --accent-soft: rgba(124, 92, 255, .16); --accent-ink: #c4b5fd;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
/* 13 赛博靛夜（深色） */
:root[data-theme="cyber"] {
  --bg: #0d1026; --panel: #11142e; --ink: #dfe3f5; --ink-soft: #9ba0c8;
  --muted: #666c9c; --line: #20234a; --accent: #8b5cf6; --accent-soft: #221d4e; --accent-ink: #a78bfa;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
/* 14 极光晨雾（浅色玻璃） */
:root[data-theme="dawn"] {
  --bg: #f2f1f8; --panel: rgba(255, 255, 255, .65); --ink: #2a2440; --ink-soft: #5b5578;
  --muted: #8b86a3; --line: rgba(120, 110, 160, .16); --accent: #7c5cff; --accent-soft: rgba(124, 92, 255, .1); --accent-ink: #5b4bc4;
  --shadow: 0 10px 26px rgba(124, 92, 255, 0.1);
}
/* 15 静谧蓝极光（深色玻璃） */
:root[data-theme="calmblue"] {
  --bg: #0a1626; --panel: rgba(255, 255, 255, .06); --ink: #dce6f5; --ink-soft: #93a5c4;
  --muted: #63779a; --line: rgba(255, 255, 255, .08); --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, .12); --accent-ink: #7dd3fc;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
/* 16 紫藤夜语（深色玻璃） */
:root[data-theme="wisteria"] {
  --bg: #150f24; --panel: rgba(255, 255, 255, .06); --ink: #e6dcf5; --ink-soft: #a79cc4;
  --muted: #7d7299; --line: rgba(255, 255, 255, .08); --accent: #c084fc; --accent-soft: rgba(192, 132, 252, .13); --accent-ink: #d8b4fe;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
/* 17 青柠汽水（深色玻璃） */
:root[data-theme="lime"] {
  --bg: #0a1a16; --panel: rgba(255, 255, 255, .06); --ink: #dff2ea; --ink-soft: #8fb3a5;
  --muted: #5f8577; --line: rgba(255, 255, 255, .08); --accent: #a3e635; --accent-soft: rgba(163, 230, 53, .12); --accent-ink: #bef264;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
/* 18 冰川银辉（深色玻璃） */
:root[data-theme="glacier"] {
  --bg: #10151c; --panel: rgba(255, 255, 255, .05); --ink: #dde4ec; --ink-soft: #8b99ab;
  --muted: #5f6d80; --line: rgba(255, 255, 255, .07); --accent: #93c5fd; --accent-soft: rgba(147, 197, 253, .1); --accent-ink: #b4d3f5;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
/* 极光系主题：body 极光渐变背景 + 结构件磨砂 */
:root[data-theme="aurora"] body { background: radial-gradient(900px 500px at 15% -10%, rgba(124, 92, 255, .35), transparent 60%), radial-gradient(800px 500px at 90% 0%, rgba(45, 212, 191, .28), transparent 55%), #0e1420; }
:root[data-theme="dawn"] body { background: radial-gradient(900px 500px at 10% -10%, rgba(244, 180, 220, .45), transparent 60%), radial-gradient(800px 500px at 90% 0%, rgba(147, 197, 253, .5), transparent 55%), radial-gradient(700px 500px at 50% 110%, rgba(134, 239, 172, .4), transparent 55%), #f2f1f8; }
:root[data-theme="calmblue"] body { background: radial-gradient(900px 500px at 15% -10%, rgba(56, 189, 248, .22), transparent 60%), radial-gradient(800px 500px at 90% 0%, rgba(59, 130, 246, .2), transparent 55%), #0a1626; }
:root[data-theme="wisteria"] body { background: radial-gradient(900px 500px at 12% -10%, rgba(192, 132, 252, .3), transparent 60%), radial-gradient(800px 500px at 88% 0%, rgba(244, 114, 182, .22), transparent 55%), #150f24; }
:root[data-theme="lime"] body { background: radial-gradient(900px 500px at 15% -10%, rgba(163, 230, 53, .2), transparent 60%), radial-gradient(800px 500px at 90% 0%, rgba(45, 212, 191, .25), transparent 55%), #0a1a16; }
:root[data-theme="glacier"] body { background: radial-gradient(900px 500px at 15% -10%, rgba(147, 197, 253, .16), transparent 60%), radial-gradient(800px 500px at 90% 0%, rgba(226, 232, 240, .08), transparent 55%), #10151c; }
:root:is([data-theme="aurora"], [data-theme="dawn"], [data-theme="calmblue"], [data-theme="wisteria"], [data-theme="lime"], [data-theme="glacier"]) :is(.sidebar, .topbar, .focus-card, .player, .modal-box, .plan-bar, .goal-bar, .plan-panel) {
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* 深色主题专项适配：覆盖硬编码浅色背景 */
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]), :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) { color-scheme: dark; }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .card-ex.ex-focus,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .card-ex.ex-focus {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink);
}
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .row-ex,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .row-ex { background: var(--accent-soft); color: var(--accent-ink); border-left-color: var(--accent); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .row-ex .ex-cn, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .row-ex .ex-cn,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .card-ex .ex-cn, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .card-ex .ex-cn { color: var(--ink-soft); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .member-status-bar, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .member-status-bar,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .premium-lock, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .premium-lock {
  background: var(--accent-soft); border-color: var(--accent); color: var(--ink);
}
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .member-status-bar b, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .member-status-bar b,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pl-lock-text b, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pl-lock-text b { color: var(--accent-ink); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pl-lock-text span, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pl-lock-text span { color: var(--ink-soft); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .plan-card.hot, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .plan-card.hot { background: var(--accent-soft); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .consult-banner, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .consult-banner,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .side-foot-btn, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .side-foot-btn {
  background: var(--accent-soft); border-color: var(--line);
}
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .consult-banner-text b, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .consult-banner-text b,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .side-foot-btn, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .side-foot-btn { color: var(--accent-ink); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .consult-banner-text span, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .consult-banner-text span,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .side-foot-btn small, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .side-foot-btn small { color: var(--muted); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .ex-loop-badge, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .ex-loop-badge { background: var(--accent-soft); color: var(--accent-ink); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pack-add-bar input, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pack-add-bar input,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) input, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) input,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) select, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) select,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) textarea, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) textarea {
  background: var(--bg); color: var(--ink); border-color: var(--line);
}
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .side-head.sub-head, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .side-head.sub-head {
  background: var(--accent-soft); color: var(--accent-ink);
}
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .accent-btn:hover, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .accent-btn:hover { background: var(--accent-soft); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .grp-add, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .grp-add { color: #6fcf8f; border-color: #3a5a46; }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .grp-add:hover, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .grp-add:hover { background: #24352a; }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pay-qr, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pay-qr { background: #fff; }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .side-foot, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .side-foot { background: var(--panel); }

/* ================= 主题选择器 ================= */
.theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 8px;
}
.theme-card {
  border: 2px solid var(--line); border-radius: 12px; padding: 10px;
  cursor: pointer; transition: border-color .12s, transform .12s; background: var(--panel);
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-swatch { display: flex; gap: 4px; margin-bottom: 8px; }
.theme-swatch i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0,0,0,.08); }
.theme-card b { font-size: 13px; display: block; }
.theme-card span { font-size: 11px; color: var(--muted); line-height: 1.4; display: block; margin-top: 2px; }
/* 展开更多主题 */
.theme-more {
  grid-column: 1 / -1; border: 1px dashed var(--line); background: transparent;
  color: var(--muted); border-radius: 12px; padding: 8px; font-size: 12.5px; cursor: pointer;
}
.theme-more:hover { color: var(--accent); border-color: var(--accent); }
.theme-extra {
  grid-column: 1 / -1; display: none;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.theme-extra.show { display: grid; }

/* ================= 单词卡信息层级优化 ================= */
.card-word { font-size: 42px; letter-spacing: 1px; }
.card-ph { color: var(--muted); font-size: 15px; margin: 2px 0 8px; }
.card-cn { font-size: 19px; font-weight: 600; color: var(--ink); }
.card-ex { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 10px; }

/* ================= 深色主题：基础组件覆盖 ================= */
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .focus-card, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .focus-card {
  background: linear-gradient(135deg, var(--panel), var(--accent-soft));
}
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .row.active, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .row.active { background: var(--accent-soft); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .icon-btn, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .icon-btn,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .btn, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .btn,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pl-btn, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pl-btn,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pr-tab, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pr-tab,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pr-opt, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pr-opt,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .chip, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .chip {
  background: var(--bg); color: var(--ink); border-color: var(--line);
}
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .modal-box, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .modal-box { background: var(--panel); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .invite-box, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .invite-box { background: var(--accent-soft); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .sync-code, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .sync-code { background: var(--bg); color: var(--accent-ink); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .sync-member.on, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .sync-member.on,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .invite-code, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .invite-code { background: var(--accent-soft); color: var(--accent-ink); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .invite-label, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .invite-label { color: var(--ink-soft); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .sync-status, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .sync-status { color: var(--muted); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .load-more, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .load-more,
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .empty, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .empty { color: var(--muted); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .theme-card, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .theme-card { background: var(--bg); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .row-cn, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .row-cn { color: var(--ink-soft); }
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pay-no-conf, :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) .pay-no-conf { color: #ff8a80; }

/* ================= 设置页：毛玻璃拟态（7 号方案） ================= */
:root {
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-input: rgba(255, 255, 255, 0.7);
}
:root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]), :root:is([data-theme="midnight"],[data-theme="oxford"],[data-theme="obsidian"],[data-theme="aurora"],[data-theme="cyber"],[data-theme="wisteria"],[data-theme="lime"],[data-theme="glacier"],[data-theme="calmblue"]) {
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-input: rgba(255, 255, 255, 0.08);
}
#settingsModal .modal-box {
  max-width: 500px; border-radius: 22px;
  background: linear-gradient(150deg, var(--accent-soft) 0%, var(--bg) 45%, var(--accent-soft) 100%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 60px rgba(31, 37, 51, 0.18);
}
#settingsModal .modal-head h2 { letter-spacing: 1px; }

/* ---------- 登录/注册弹窗 ---------- */
.user-btn { font-size: 20px; padding: 6px 10px; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.auth-body { padding: 0 6px; }
.auth-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 2px solid var(--line); }
.auth-tab { flex: 1; padding: 10px 0; border: none; background: none; font-size: 15px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; }
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.auth-form .field span { color: var(--ink-soft); font-weight: 500; }
.auth-form input[type=tel], .auth-form input[type=text], .auth-form input[type=password] { padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; outline: none; transition: border-color .15s; }
.auth-form input:focus { border-color: var(--accent); }
.auth-code-row { display: flex; gap: 8px; }
.auth-code-row input { flex: 1; }
.auth-code-row button { white-space: nowrap; flex-shrink: 0; }
.auth-submit { width: 100%; padding: 12px; font-size: 16px; font-weight: 700; border-radius: 12px; margin-top: 4px; }
.auth-agree { font-size: 12px; color: var(--muted); }
.auth-agree a { color: var(--accent); text-decoration: none; }
.auth-status { font-size: 13px; text-align: center; min-height: 20px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-social { display: flex; gap: 10px; }
.auth-social .social-btn { flex: 1; padding: 10px; font-size: 14px; border-radius: 10px; justify-content: center; }

.set-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 14px 16px; margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(31, 37, 51, 0.05);
}
.set-card-head {
  font-size: 13px; font-weight: 800; color: var(--accent);
  letter-spacing: .5px; margin-bottom: 10px;
}
.set-card .field { margin-bottom: 10px; }
.set-card .field:last-child, .set-card .check:last-child, .set-card p:last-child { margin-bottom: 0; }
.set-card select, .set-card input[type="text"], .set-card input[type="password"] {
  background: var(--glass-input); border: 1px solid var(--glass-border);
  border-radius: 10px; transition: border-color .12s, box-shadow .12s;
}
.set-card select:focus, .set-card input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
.set-card .check {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 10px; border-radius: 10px; margin-bottom: 6px;
  transition: background .12s;
}
.set-card .check:hover { background: var(--glass-input); }
.set-card .check input { accent-color: var(--accent); margin-top: 2px; }
.set-card input[type="range"] { accent-color: var(--accent); }
.set-card .voice-status { color: var(--muted); font-size: 12px; }
.set-card .invite-box { background: var(--glass-input); border: 1px solid var(--glass-border); }
.set-card .sync-status { color: var(--muted); }
/* 旧分区标题样式退役（已由 set-card-head 取代） */
.set-section { display: none; }

/* ===================== 沉浸式卡流刷词 ===================== */
.swipe-view {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg); color: var(--ink);
  display: none; flex-direction: column;
}
.swipe-view.show { display: flex; }
body.swiping { overflow: hidden; }
.sw-top { display: flex; align-items: center; gap: 14px; padding: 16px 20px 6px; }
.sw-close {
  border: none; background: var(--panel); color: var(--ink-soft);
  width: 38px; height: 38px; border-radius: 50%; font-size: 16px;
  cursor: pointer; box-shadow: var(--shadow); flex: 0 0 38px;
}
.sw-bar { flex: 1; height: 8px; background: var(--line); border-radius: 6px; overflow: hidden; }
.sw-bar-in {
  height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transition: width .25s ease;
}
.sw-count { font-size: 13px; color: var(--muted); font-weight: 700; min-width: 64px; text-align: right; }
.sw-stage {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sw-card {
  position: absolute; width: min(420px, 86vw); min-height: min(480px, 58vh);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow);
  padding: 36px 28px 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: grab;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y; will-change: transform;
}
.sw-card:active { cursor: grabbing; }
.sw-card.under1 { transform: scale(.94) translateY(18px); opacity: .55; pointer-events: none; }
.sw-card.under2 { transform: scale(.88) translateY(34px); opacity: .28; pointer-events: none; }
.sw-card.anim { transition: transform .22s ease; }
.sw-card-word { font-size: 44px; font-weight: 800; letter-spacing: .5px; line-height: 1.15; word-break: break-word; }
.sw-card-ph { color: var(--accent-ink); font-size: 17px; margin-top: 10px; min-height: 22px; }
.sw-card-ph span { color: var(--muted); font-size: 14px; }
.sw-card-back { margin-top: 16px; }
.sw-card-cn { font-size: 20px; font-weight: 600; }
.sw-card-ex { margin-top: 12px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; font-style: italic; }
.sw-card-ex .ex-cn { display: block; font-style: normal; color: var(--muted); margin-top: 4px; }
.sw-card-hint { position: absolute; bottom: 14px; left: 12px; right: 12px; font-size: 12px; color: var(--muted); }
.sw-stamp {
  position: absolute; top: 24px; font-size: 22px; font-weight: 900;
  padding: 3px 14px; border: 3px solid; border-radius: 12px; opacity: 0;
  pointer-events: none; background: var(--panel);
}
.sw-stamp.yes { left: 18px; color: var(--green); border-color: var(--green); transform: rotate(-14deg); }
.sw-stamp.no { right: 18px; color: var(--danger); border-color: var(--danger); transform: rotate(14deg); }
.sw-actions { display: flex; justify-content: center; gap: 16px; padding: 8px 16px 26px; }
.sw-btn {
  border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow);
  border-radius: 18px; padding: 11px 16px; min-width: 74px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; color: var(--ink); transition: transform .12s;
}
.sw-btn:active { transform: scale(.92); }
.sw-btn b { font-size: 21px; line-height: 1.2; }
.sw-btn span { font-size: 12px; color: var(--muted); font-weight: 600; }
.sw-btn.yes b { color: var(--green); }
.sw-btn.no b { color: var(--danger); }
/* 结算页 */
.sw-summary {
  position: absolute; inset: 0; z-index: 2; background: var(--bg);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.sw-sum-box {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow);
  padding: 32px 28px; width: min(430px, 92vw); text-align: center;
}
.sw-sum-emoji { font-size: 46px; }
.sw-sum-title { font-size: 21px; font-weight: 800; margin: 8px 0 18px; }
.sw-sum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.sw-sum-grid b { display: block; font-size: 24px; }
.sw-sum-grid b.ok { color: var(--green); }
.sw-sum-grid b.no { color: var(--danger); }
.sw-sum-grid span { font-size: 12px; color: var(--muted); }
.sw-sum-time { font-size: 13px; color: var(--ink-soft); margin-bottom: 20px; line-height: 1.6; }
.sw-sum-actions { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 520px) {
  .sw-card { padding: 28px 18px 44px; min-height: 52vh; }
  .sw-card-word { font-size: 36px; }
  .sw-actions { gap: 10px; }
  .sw-btn { min-width: 64px; padding: 10px 10px; }
}

/* ===================== 备考计划条（考试倒排） ===================== */
.plan-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 20px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink);
}
.plan-bar.empty { padding: 0; background: transparent; border-bottom: none; }
.plan-cta {
  width: 100%; border: none; cursor: pointer; text-align: left;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 12.5px; font-weight: 600; padding: 8px 20px;
  border-bottom: 1px solid var(--line); transition: background .15s, color .15s;
}
.plan-cta:hover { background: var(--accent); color: #fff; }
.plan-main b { color: var(--accent-ink); }
.plan-sub { color: var(--ink-soft); }
.plan-status { font-weight: 700; margin-left: auto; }
.plan-status.ok { color: var(--green); }
.plan-status.warn { color: var(--danger); }
.plan-mini {
  border: 1px solid var(--line); background: var(--panel);
  border-radius: 8px; font-size: 12px; padding: 2px 8px;
  cursor: pointer; color: var(--ink-soft);
}
.plan-mini:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 720px) {
  .plan-bar { padding: 6px 14px; gap: 6px; font-size: 11.5px; }
  .plan-status { margin-left: 0; }
}

/* ===================== 备考计划面板（三模式） ===================== */
.plan-panel { padding: 12px 20px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
/* 模式选择卡片（计划弹窗内） */
.plan-modes { display: flex; flex-direction: column; gap: 8px; }
.pm-opt {
  display: block; border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 12px; cursor: pointer; transition: border .15s, background .15s;
}
.pm-opt input { accent-color: var(--accent); margin-right: 6px; }
.pm-opt b { font-size: 13.5px; }
.pm-opt small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.5; }
.pm-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
/* 四格任务卡 */
.pp-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.qcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow);
}
.qcard .qhead { font-size: 13.5px; font-weight: 800; }
.qcard .qwhy { font-size: 11px; color: var(--muted); margin: 3px 0 9px; line-height: 1.5; min-height: 32px; }
.qcard .qbar { height: 6px; background: var(--line); border-radius: 5px; overflow: hidden; margin-bottom: 9px; }
.qcard .qbar i { display: block; height: 100%; border-radius: 5px; background: var(--accent); transition: width .4s; }
.qcard .qfoot { display: flex; align-items: center; justify-content: space-between; }
.qcard .qnum { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.qcard.done { border-color: var(--green); }
.qcard.done .qbar i { background: var(--green); }
.qcard.done .qhead::after { content: " ✅"; }
.qbtn {
  border: none; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 13px; border-radius: 9px; cursor: pointer;
}
.qbtn.ghost { background: var(--accent-soft); color: var(--accent-ink); }
/* 波形周计划 */
.pp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.pp-week .day {
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 8px 4px; text-align: center; font-size: 12px; color: var(--ink);
}
.pp-week .day b { display: block; font-size: 12.5px; margin-bottom: 4px; }
.pp-week .day .dt { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 7px; padding: 2px 6px; }
.pp-week .day.new .dt { background: var(--accent-soft); color: var(--accent-ink); }
.pp-week .day.rev .dt { background: #fff1dc; color: #b56b00; }
.pp-week .day.sum .dt { background: #efe7fb; color: #6d43b8; }
.pp-week .day.off { opacity: .55; }
.pp-week .day.today { border: 2px solid var(--gold); box-shadow: 0 4px 14px rgba(245, 166, 35, .25); }
.pp-wave-bottom { display: flex; gap: 12px; margin-top: 10px; align-items: stretch; }
.pp-curve {
  flex: 1.2; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); min-width: 0;
}
.pp-curve-cap { font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.pp-curve-cap b { color: var(--accent-ink); }
.pp-curve-svg { width: 100%; display: block; }
.pp-tasks { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.ttask {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 13px; font-size: 13px; color: var(--ink);
}
.ttask .pill { font-size: 10.5px; font-weight: 700; border-radius: 7px; padding: 2px 8px; background: #fff1dc; color: #b56b00; flex: 0 0 auto; }
.ttask .qbtn { margin-left: auto; flex: 0 0 auto; }
/* 四维仪表盘 */
.pp-gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gauge {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 8px; text-align: center; box-shadow: var(--shadow); position: relative;
}
.gauge svg { width: 78px; height: 78px; }
.gauge .gn { font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.gauge .gr { font-size: 11px; color: var(--muted); margin-top: 2px; }
.gauge.weak { border-color: var(--danger); }
.gauge.weak::after {
  content: "⚠️ 火力倾斜"; position: absolute; top: 7px; right: 7px; font-size: 10px;
  background: #ffe9eb; color: #d43a4a; font-weight: 800; border-radius: 7px; padding: 2px 6px;
}
.pp-tilt {
  margin-top: 10px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
}
.pp-tilt-head { font-size: 13px; font-weight: 800; margin-bottom: 9px; }
.pp-tilt-head small { color: var(--muted); font-weight: 400; font-size: 11.5px; margin-left: 8px; }
.tilt-item { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; }
.tilt-item .pill { font-size: 10.5px; font-weight: 700; border-radius: 7px; padding: 2px 8px; flex: 0 0 auto; }
.pill.boost { background: #ffe9eb; color: #d43a4a; }
.pill.keep { background: var(--accent-soft); color: var(--accent-ink); }
.tilt-item .qbtn { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 900px) {
  .pp-quad { grid-template-columns: 1fr 1fr; }
  .pp-gauges { grid-template-columns: 1fr 1fr; }
  .pp-wave-bottom { flex-direction: column; }
}
@media (max-width: 720px) {
  .plan-panel { padding: 10px 12px; }
  .qcard .qwhy { min-height: 0; }
}

/* ===================== 练习/复习 · 答后学习卡 ===================== */
.pr-bar { height: 5px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.pr-bar-in { height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); transition: width .3s; }
.pr-fb {
  margin-top: 12px; border: 1px solid var(--line); border-left-width: 4px;
  border-radius: 12px; padding: 12px 14px; background: var(--panel); text-align: left;
}
.pr-fb.ok { border-left-color: var(--green); }
.pr-fb.no { border-left-color: var(--danger); }
.pr-fb-verdict { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.pr-fb-verdict b { color: var(--accent-ink); }
.pr-fb-word { font-size: 20px; font-weight: 800; display: flex; align-items: center; flex-wrap: wrap; }
.pr-fb-ph { font-size: 13px; color: var(--accent-ink); font-weight: 500; margin-left: 8px; }
.pr-fb-play {
  border: none; background: var(--accent-soft); border-radius: 8px; cursor: pointer;
  font-size: 13px; padding: 2px 8px; margin-left: 8px;
}
.pr-fb-key { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 400; }
.pr-fb-cn { margin-top: 4px; font-size: 14.5px; }
.pr-fb-ex { margin-top: 8px; font-size: 13px; color: var(--ink-soft); font-style: italic; line-height: 1.6; }
.pr-fb-ex .ex-cn { display: block; font-style: normal; color: var(--muted); margin-top: 2px; }
.pr-wrong-list { margin: 12px 0 4px; }
.pr-wrong-cap { font-size: 13px; color: var(--ink-soft); margin: 10px 0 6px; }
.pr-wrong-chip {
  display: inline-block; background: #ffe9eb; color: #d43a4a;
  border-radius: 8px; padding: 2px 9px; font-size: 12.5px; font-weight: 600; margin: 0 6px 6px 0;
}

/* ===================== 场景包频道重构：搜索/难度/体验徽章 ===================== */
.side-search { position: sticky; top: 0; z-index: 5; padding: 8px 10px 6px; background: var(--panel); }
.side-search input {
  width: 100%; box-sizing: border-box; padding: 8px 12px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink);
  outline: none; transition: border-color .15s;
}
.side-search input:focus { border-color: var(--accent); }
.chan-count { font-size: 10.5px; color: var(--muted); font-weight: 400; margin-left: 2px; }
.lvl-badge {
  display: inline-block; font-size: 9.5px; font-weight: 700; border-radius: 5px;
  padding: 1px 5px; margin-right: 6px; vertical-align: 1px; flex-shrink: 0;
}
.lvl-badge.l1 { background: #e6f4ea; color: #1e7e34; }
.lvl-badge.l2 { background: #e8f0ff; color: #2c59d6; }
.lvl-badge.l3 { background: #f3e8ff; color: #7e22ce; }
.trial-badge {
  display: inline-block; font-size: 9.5px; font-weight: 700; border-radius: 5px;
  padding: 1px 5px; margin-left: 4px; background: #fff4e0; color: #b45309; vertical-align: 1px;
}
[data-theme="midnight"] .lvl-badge.l1, [data-theme="obsidian"] .lvl-badge.l1, [data-theme="aurora"] .lvl-badge.l1,
[data-theme="cyber"] .lvl-badge.l1, [data-theme="wisteria"] .lvl-badge.l1, [data-theme="lime"] .lvl-badge.l1,
[data-theme="glacier"] .lvl-badge.l1, [data-theme="calmblue"] .lvl-badge.l1, [data-theme="oxford"] .lvl-badge.l1 {
  background: rgba(52,168,83,.25); color: #7bd88f;
}
[data-theme="midnight"] .lvl-badge.l2, [data-theme="obsidian"] .lvl-badge.l2, [data-theme="aurora"] .lvl-badge.l2,
[data-theme="cyber"] .lvl-badge.l2, [data-theme="wisteria"] .lvl-badge.l2, [data-theme="lime"] .lvl-badge.l2,
[data-theme="glacier"] .lvl-badge.l2, [data-theme="calmblue"] .lvl-badge.l2, [data-theme="oxford"] .lvl-badge.l2 {
  background: rgba(79,124,255,.25); color: #8fb0ff;
}
[data-theme="midnight"] .lvl-badge.l3, [data-theme="obsidian"] .lvl-badge.l3, [data-theme="aurora"] .lvl-badge.l3,
[data-theme="cyber"] .lvl-badge.l3, [data-theme="wisteria"] .lvl-badge.l3, [data-theme="lime"] .lvl-badge.l3,
[data-theme="glacier"] .lvl-badge.l3, [data-theme="calmblue"] .lvl-badge.l3, [data-theme="oxford"] .lvl-badge.l3 {
  background: rgba(147,52,230,.25); color: #c89aff;
}
[data-theme="midnight"] .trial-badge, [data-theme="obsidian"] .trial-badge, [data-theme="aurora"] .trial-badge,
[data-theme="cyber"] .trial-badge, [data-theme="wisteria"] .trial-badge, [data-theme="lime"] .trial-badge,
[data-theme="glacier"] .trial-badge, [data-theme="calmblue"] .trial-badge, [data-theme="oxford"] .trial-badge {
  background: rgba(245,166,35,.22); color: #f5c86e;
}

/* ===================== 分类学习进度条（词下细条+百分比） ===================== */
.side-prog { display: block; text-align: left; }
.side-prog .prog-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; }
.prog-pct { font-size: 10.5px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.prog-pct.hi { color: #34a853; }
.prog-pct.zero { color: var(--muted); font-weight: 400; }
.prog-bar { display: block; height: 4px; background: var(--line); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.prog-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .4s ease; }
.prog-bar i.hi { background: linear-gradient(90deg, var(--accent), #34a853); }
.prog-bar i.zero { background: transparent; }

/* ===================== 会员页职业价值清单 ===================== */
.member-value { margin: 4px 0; }
.mv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.mv-item {
  background: var(--glass-bg, rgba(255,255,255,.55)); border: 1px solid var(--glass-border, var(--line));
  border-radius: 12px; padding: 9px 12px; backdrop-filter: blur(12px);
}
.mv-item b { font-size: 13px; display: block; }
.mv-item span { font-size: 11px; color: var(--muted); display: block; margin-top: 2px; line-height: 1.5; }
@media (max-width: 720px) { .mv-grid { grid-template-columns: 1fr; } }

/* 打卡海报：图片化展示（支持长按保存） */
.poster-img { width: 100%; border-radius: 12px; display: block; box-shadow: var(--shadow); }
.poster-tip { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0 2px; }

/* 客服二维码 */
.cs-row { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.cs-qr { width: 108px; border-radius: 10px; border: 1px solid var(--line); flex: 0 0 108px; }
.cs-info { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cs-info b { font-size: 15px; }
.cs-info span { color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.cs-info .cs-time { color: var(--muted); font-size: 11.5px; }

/* ===================== 今日三环（每日目标） ===================== */
.goal-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 20px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.goal-rings { display: flex; gap: 10px; }
.goal-ring {
  border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  padding: 0; width: 52px;
}
.gr-svg { position: relative; width: 38px; height: 38px; display: block; }
.gr-svg svg { width: 38px; height: 38px; transform: rotate(-90deg); }
.gr-bg { fill: none; stroke: var(--line); stroke-width: 4; }
.gr-fg { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .45s ease; }
.goal-ring[data-goal="swipe"] .gr-fg { stroke: var(--gold); }
.goal-ring[data-goal="review"] .gr-fg { stroke: var(--green); }
.goal-ring.done .gr-fg { stroke: var(--green); }
.gr-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.goal-ring.done .gr-icon { color: var(--green); font-weight: 900; }
.gr-num { font-size: 10px; color: var(--muted); font-weight: 700; margin-top: 1px; }
.goal-ring:hover .gr-num { color: var(--accent); }
.goal-info { flex: 1; min-width: 0; }
.goal-hint { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-streak { font-size: 12px; color: var(--gold); font-weight: 700; }
.goal-set { border: none; background: transparent; font-size: 17px; cursor: pointer; opacity: .65; padding: 4px; }
.goal-set:hover { opacity: 1; }
/* 合环提示条 */
.goal-toast {
  position: fixed; top: 16px; left: 50%; transform: translate(-50%, -8px);
  background: var(--ink); color: var(--bg);
  padding: 10px 20px; border-radius: 12px; font-size: 14px; font-weight: 600;
  z-index: 90; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.goal-toast.show { opacity: 1; transform: translate(-50%, 0); }
#confettiCv { position: fixed; inset: 0; z-index: 89; pointer-events: none; }
@media (max-width: 720px) {
  .goal-bar { padding: 6px 14px; gap: 10px; }
  .goal-hint { font-size: 11.5px; }
  .goal-ring { width: 46px; }
}

/* ===== 人生旅程时间轴（8 站点点亮式） ===== */
.life-rail { position: relative; padding-left: 8px; }
.life-rail::before {
  content: ""; position: absolute; left: 18px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line); border-radius: 2px;
}
.life-stop { position: relative; }
.life-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 6px; border-radius: 50%;
  background: var(--panel); border: 1.5px solid var(--line);
  font-size: 12px; position: relative; z-index: 1; flex: none;
}
.life-stop.lit .life-dot {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 700;
}
.life-stop.lit { color: var(--accent); font-weight: 600; }

/* ===== 场景对话模块（气泡流 + 跟读卡） ===== */
.dlg-toolbar { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
/* ---------- 场景对话：方案 B 顶部分工条 + 底部导航栏 ---------- */
body.dlg-page .plan-bar, body.dlg-page .goal-bar, body.dlg-page .player { display: none !important; }
.dlg-footbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 8px; padding: 10px 12px;
  background: var(--panel); border-top: 1px solid var(--line);
}
.dfoot-btn {
  flex: 1; padding: 10px 6px; border-radius: 10px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer;
  white-space: nowrap; transition: transform .08s;
}
.dfoot-btn:active { transform: scale(.96); }
.dfoot-btn.nav { flex: 0 0 52px; font-size: 18px; }
.dfoot-btn.tool { flex: 0 0 48px; font-size: 16px; }
.dfoot-btn.loop { background: var(--accent); border-color: var(--accent); color: #fff; }
.dfoot-btn.loop.on { background: #c0392b; border-color: #c0392b; }
.dfoot-btn.fam { background: #e8f7ee; border-color: #b7e4c7; color: #1a7f37; }
.dfoot-btn.fam.on { background: #d3f0dd; }
/* 顶栏标熟本对话按钮 */
.chip.fam-top { margin-left: auto; background: #e8f7ee; border-color: #b7e4c7; color: #1a7f37; font-weight: 600; }
.chip.fam-top.on { background: #d3f0dd; }
/* 列表卡片上的循环播放小按钮 */
.dlg-loop-mini {
  flex: none; width: 34px; height: 34px; border-radius: 50%; font-size: 15px;
  border: 1px solid var(--line); background: var(--bg); cursor: pointer; margin-left: 6px;
}
.dlg-loop-mini:hover { background: var(--accent); border-color: var(--accent); }
/* 单句标熟折叠占位行 */
.dlg-fam-fold {
  margin: 8px 16px; padding: 8px 12px; text-align: center; font-size: 12px;
  color: #1a7f37; background: #e8f7ee; border: 1px dashed #b7e4c7; border-radius: 10px; cursor: pointer;
}
/* 主题已标熟：卡片淡化 + 徽章 */
.dlg-card.dlg-done { opacity: .55; }
.done-badge {
  display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px;
  background: #e8f7ee; color: #1a7f37; border: 1px solid #b7e4c7; vertical-align: 1px;
}
.chip.sm { font-size: 11px; padding: 2px 8px; }
/* 跟读模式：标熟按钮 + 标熟进度点 */
.ibtn.fam { color: #1a7f37; }
.imm-prog i.fam { background: #2da44e; }
/* 📖 对话词汇卡：气泡流顶部，details 折叠 */
.dlg-vocab { border-bottom: 1px solid var(--line); background: var(--panel); }
.dlg-vocab summary {
  padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; user-select: none; list-style: none;
}
.dlg-vocab summary::before { content: "▸ "; }
.dlg-vocab[open] summary::before { content: "▾ "; }
.dlg-vocab summary::-webkit-details-marker { display: none; }
.dlg-vocab-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.vocab-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: var(--bg); border: 1px solid var(--line);
}
.vocab-chip b { font-weight: 600; }
.vocab-chip i { font-style: normal; color: var(--ink-soft); font-size: 11px; }
.dlg-chat { padding: 14px 16px; }
.dlg-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; cursor: pointer; }
.dlg-row.me { flex-direction: row-reverse; }
.dlg-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: var(--panel); border: 1px solid var(--line);
}
.dlg-bubble {
  max-width: 78%; padding: 10px 34px 10px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.55; position: relative;
  background: var(--panel); border: 1px solid var(--line);
}
.dlg-row.other .dlg-bubble { border-bottom-left-radius: 4px; }
.dlg-row.me .dlg-bubble { background: var(--accent); border-color: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.dlg-en { font-weight: 600; }
.dlg-cn { color: var(--ink-soft); font-size: 12px; margin-top: 3px; }
.dlg-row.me .dlg-cn { color: rgba(255,255,255,.78); }
.dlg-play { position: absolute; right: 10px; top: 10px; font-size: 11px; opacity: .45; }
.dlg-row:hover .dlg-play { opacity: 1; }
.dlg-row.playing .dlg-bubble { outline: 2px solid var(--gold, #ffb020); }
.dlg-lock-mask {
  margin: 14px; padding: 22px; text-align: center; border-radius: 16px;
  background: var(--panel); border: 1px dashed var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* 跟读卡（v83 重排：大卡片 + 盲听占位 + 两端箭头导航） */
.dlg-imm { text-align: center; padding: 20px 16px 16px; display: flex; flex-direction: column; align-items: center; }
.imm-prog { display: flex; gap: 4px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.imm-prog i { width: 18px; height: 4px; border-radius: 3px; background: var(--line); }
.imm-prog i.done { background: var(--accent); }
.imm-role { display: inline-block; background: var(--accent-soft, rgba(106,91,255,.1)); color: var(--accent); font-size: 12px; border-radius: 8px; padding: 3px 12px; margin-bottom: 14px; font-weight: 600; }
.imm-card {
  width: 100%; max-width: 620px; min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 26px 22px; border-radius: 18px; text-align: center;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 3px 12px rgba(0,0,0,.05); transition: border-color .15s;
}
.imm-card.blind { border-style: dashed; border-width: 2px; cursor: pointer; background: var(--bg); box-shadow: none; }
.imm-card.blind:active { transform: scale(.99); }
.imm-blind-icon { font-size: 40px; line-height: 1; }
.imm-blind-txt { font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
.imm-en { font-size: 21px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.imm-cn { color: var(--ink-soft); font-size: 14px; margin-top: 10px; }
.imm-btns { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 18px; flex-wrap: nowrap; }
.ibtn {
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line); flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--panel); font-size: 17px; cursor: pointer; color: var(--ink);
}
.ibtn small { font-size: 9.5px; color: var(--ink-soft); margin-top: 1px; }
.ibtn.nav { width: 46px; height: 46px; font-size: 20px; font-weight: 700; background: var(--bg); }
.ibtn.main { width: 66px; height: 66px; background: var(--accent); border-color: var(--accent); color: #fff; font-size: 23px; }
.ibtn.main small { color: rgba(255,255,255,.85); }
.imm-next { margin-top: 14px; color: var(--accent); font-size: 13px; font-weight: 600; }
.imm-hint { margin-top: 6px; font-size: 11px; color: var(--ink-soft); opacity: .7; }

/* 新增内容红点提示 */
.new-dot {
  display: inline-block; background: #e5484d; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 8px; padding: 2.5px 5px; margin-left: 4px;
  vertical-align: middle;
}

/* ===== 例句听力库 2.0：分类选择页 + 起点设置条 ===== */
.xlib-tip { padding: 16px 16px 4px; color: var(--ink-soft); font-size: 13px; }
.xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px 16px; }
.xcard {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 10px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); cursor: pointer; transition: transform .12s;
}
.xcard:hover { transform: translateY(-2px); border-color: var(--accent); }
.xcard-icon { font-size: 26px; }
.xcard-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.xcard-n { font-size: 11.5px; color: var(--ink-soft); }
.xbar { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 12px; }
.xbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.xbar-row:last-child { margin-bottom: 0; }
.xback { border: none; background: none; color: var(--accent); font-weight: 600; cursor: pointer; font-size: 13px; padding: 4px 6px; flex: none; }
.xbar-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.xbar-ctl input {
  flex: 1; min-width: 110px; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink);
}
.xbar-ctl input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.xbar-hint { font-size: 11.5px; color: var(--ink-soft); opacity: .8; }

/* ===== 例句循环：显示模式切换（全部/只单词/只例句盲听） ===== */
.xv-toggle { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.xv-chip {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  font-size: 11px; padding: 3px 8px; border-radius: 9px; cursor: pointer;
}
.xv-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 只单词：隐藏释义/例句/同义链 */
.focus-card.xv-word .card-cn, .focus-card.xv-word .card-ex, .focus-card.xv-word .card-syn { display: none; }
/* 只例句（盲听）：隐藏单词/音标/释义/同义链，例句居中放大 */
.focus-card.xv-ex .card-word, .focus-card.xv-ex .card-ph, .focus-card.xv-ex .card-cn, .focus-card.xv-ex .card-syn { display: none; }
.focus-card.xv-ex .card-ex { font-size: 20px; line-height: 1.7; padding: 30px 10px; text-align: center; }
.focus-card.xv-ex .card-ex .ex-cn { display: none; }

/* ---------- 考点词醒目红色芯片 ---------- */
.chip.hot-chip {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
  animation: hot-pulse 2s ease-in-out infinite;
}
.chip.hot-chip.active {
  background: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5);
}
.chip.hot-chip .chip-n {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
@keyframes hot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.6); }
}

/* ---------- 维度分类翻页导航 ---------- */
.dim-pagination {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.dim-pag-info {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.dim-pag-pos {
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
  margin-left: 6px;
}
.dim-pag-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dim-pag-btn {
  min-width: 140px;
}
.dim-pag-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}