/* ============================================================
 * 词汇生长 Vocabulary Growth — 样式 (css/style.css)
 * 移动优先 · 清新绿主色 · 深度徽章 🟢🟡🔴
 * ============================================================ */
:root {
  --green: #2E7D32; --green-light: #E8F5E9; --green-mid: #43A047;
  --yellow: #F9A825; --red: #E53935;
  --ink: #1B2B22; --ink-2: #5C6B62; --line: #E3E8E4;
  --bg: #F6F8F6; --card: #FFFFFF;
  --radius: 14px; --shadow: 0 2px 10px rgba(27, 43, 34, .07);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* 横向溢出钳制：任何内容都不允许把布局视口撑宽（手机上曾致底部导航/悬浮球/弹窗被切出屏幕） */
html, body { overflow-x: hidden; max-width: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 15px;
}
button { font-family: inherit; cursor: pointer; }
#app { max-width: 860px; margin: 0 auto; padding-bottom: 24px; min-height: 100vh; display: flex; flex-direction: column; }
#main { flex: 1; padding: 16px 14px 0; }

/* ---------- 顶栏 ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 860px; margin: 0 auto; padding: 10px 14px 6px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.brand-logo { font-size: 26px; }
.brand-name { font-weight: 700; font-size: 17px; color: var(--green); display: block; line-height: 1.2; }
.brand-sub { font-size: 11px; color: var(--ink-2); letter-spacing: .5px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.streak-pill { background: #FFF3E0; color: #E65100; font-size: 13px; padding: 4px 10px; border-radius: 99px; font-weight: 600; }
.icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 4px 12px; font-size: 13px; color: var(--ink-2); }
.icon-btn:hover { border-color: var(--green-mid); color: var(--green); }

/* ---------- 导航 ---------- */
.nav { max-width: 860px; margin: 0 auto; padding: 0 8px 8px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-btn { flex: 1; white-space: nowrap; border: none; background: transparent; padding: 8px 6px; font-size: 14px; color: var(--ink-2); border-radius: 10px; position: relative; }
.nav-btn.active { background: var(--green-light); color: var(--green); font-weight: 700; }
.nav-btn .nav-badge { position: absolute; top: 2px; right: 8px; background: var(--red); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-weight: 700; }

/* ---------- 通用组件 ---------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; }
.card-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.card-title .hint { font-weight: 400; font-size: 12px; color: var(--ink-2); margin-left: auto; }
.btn { border: none; border-radius: 10px; padding: 10px 18px; font-size: 15px; font-weight: 600; background: var(--green); color: #fff; transition: .15s; }
.btn:hover { background: #256428; }
.btn:disabled { background: #B0BEC5; cursor: not-allowed; }
.btn-outline { background: #fff; color: var(--green); border: 1.5px solid var(--green); }
.btn-outline:hover { background: var(--green-light); }
.btn-ghost { background: transparent; color: var(--ink-2); border: none; padding: 6px 10px; font-size: 13px; }
.btn-ghost:hover { color: var(--green); }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.badge { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 99px; font-weight: 600; }
.badge-green { background: #E8F5E9; color: #2E7D32; }
.badge-yellow { background: #FFF8E1; color: #B28704; }
.badge-red { background: #FFEBEE; color: #C62828; }
.badge-gray { background: #ECEFF1; color: #607D8B; }
.empty { text-align: center; color: var(--ink-2); padding: 26px 0; font-size: 14px; }
input, textarea, select {
  font-family: inherit; font-size: 14px; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 9px 12px; width: 100%; background: #fff; color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green-mid); }
label.fld { display: block; font-size: 13px; color: var(--ink-2); margin: 10px 0 4px; font-weight: 600; }

/* ---------- Toast / 横幅 ---------- */
#toastWrap { position: fixed; left: 50%; transform: translateX(-50%); bottom: 76px; z-index: 460; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); }
.toast { background: #263238; color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.25); animation: rise .25s ease; text-align: center; }
.toast.ok { background: var(--green); }
.toast.warn { background: var(--yellow); color: #3E2723; }
.toast.err { background: var(--red); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }

/* ---------- 今日 ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.stat { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 6px; text-align: center; }
.stat b { display: block; font-size: 22px; color: var(--green); line-height: 1.2; }
.stat span { font-size: 12px; color: var(--ink-2); }
.stat.warn b { color: var(--red); }
.usage-banner { background: #FFF8E1; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; font-size: 13px; border: 1px dashed var(--yellow); }
.usage-banner span { display: flex; align-items: center; gap: 4px; }
.usage-banner span b { color: var(--yellow); font-size: 15px; }
.hero-review { background: linear-gradient(135deg, #2E7D32, #43A047); border-radius: var(--radius); color: #fff; padding: 20px; margin-bottom: 14px; }
.hero-review h2 { font-size: 17px; margin-bottom: 6px; }
.hero-review p { font-size: 13px; opacity: .92; margin-bottom: 14px; }
.hero-review .btn { background: #fff; color: var(--green); }
.chart-wrap { overflow-x: auto; }
.chart-svg { width: 100%; min-width: 320px; height: 160px; display: block; }
.milestone-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; align-items: baseline; }
.milestone-item:last-child { border-bottom: none; }
.milestone-item .ms-date { color: var(--ink-2); white-space: nowrap; font-size: 12px; }
.today-use-list { display: flex; flex-wrap: wrap; gap: 8px; }
.use-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--green-light); color: var(--green); border-radius: 99px; padding: 5px 12px; font-size: 13px; font-weight: 600; border: none; }
.use-chip.used { background: #ECEFF1; color: #90A4AE; text-decoration: line-through; }

/* ---------- 学新词 ---------- */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.group-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; cursor: pointer; border: 2px solid transparent; transition: .15s; }
.group-card:hover { border-color: var(--green-mid); transform: translateY(-2px); }
.group-card .gc-art { display: block; width: calc(100% + 32px); margin: -16px -16px 12px; border-radius: var(--radius) var(--radius) 0 0; }
.group-card h3 { font-size: 16px; margin-bottom: 6px; }
.group-card .g-story { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; min-height: 38px; }
.group-card .g-meta { font-size: 12px; color: var(--green); font-weight: 600; }
.lock-banner { background: #FFF8E1; border: 1.5px dashed var(--yellow); color: #795548; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; font-size: 14px; }
.wordcard { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 12px; }
.wordcard .wc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wordcard .wc-word { font-size: 26px; font-weight: 800; color: var(--ink); }
.wordcard .wc-ipa { color: var(--ink-2); font-size: 14px; }
.wordcard .wc-pos { color: var(--ink-2); font-size: 13px; }
.speak-btn { border: none; background: var(--green-light); color: var(--green); border-radius: 99px; padding: 6px 14px; font-size: 14px; font-weight: 700; }
.speak-btn:hover { background: #C8E6C9; }
.wc-row { margin-top: 10px; font-size: 14px; }
.wc-row .lbl { color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.wc-simple { font-size: 15px; color: var(--ink); font-style: italic; }
.wc-chunk { background: var(--green-light); border-radius: 8px; padding: 7px 12px; display: inline-block; font-weight: 600; color: #1B5E20; }
.wc-note { background: #FFF8E1; border-left: 3px solid var(--yellow); padding: 6px 10px; border-radius: 0 8px 8px 0; font-size: 13px; color: #795548; }
.wc-ex { font-size: 14px; }
.wc-ex .en { font-weight: 600; }
.wc-ex .zh { color: var(--ink-2); font-size: 13px; }

/* ---------- 复习：分层抢救 ---------- */
.review-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; color: var(--ink-2); }
.review-progress .bar { flex: 1; height: 8px; background: #ECEFF1; border-radius: 99px; overflow: hidden; }
.review-progress .bar i { display: block; height: 100%; background: var(--green-mid); border-radius: 99px; transition: width .3s; }
.rescue-card { text-align: center; padding: 26px 18px; }
.rescue-zh { font-size: 24px; font-weight: 800; margin: 6px 0 4px; }
.rescue-scene { color: var(--ink-2); font-size: 14px; margin-bottom: 8px; }
.rescue-timer { font-size: 15px; color: var(--green); font-weight: 700; margin: 12px 0; font-variant-numeric: tabular-nums; }
.hint-layers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 16px 0; }
.hint-btn { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 8px; font-size: 13.5px; color: var(--ink); text-align: left; transition: .15s; }
.hint-btn:hover:not(:disabled) { border-color: var(--green-mid); color: var(--green); }
.hint-btn:disabled { opacity: .45; cursor: not-allowed; }
.hint-btn .h-idx { font-size: 11px; color: var(--ink-2); display: block; }
.hint-reveal { background: var(--green-light); border-radius: 10px; padding: 12px 14px; margin: 10px 0; font-size: 16px; font-weight: 600; text-align: center; }
.answer-box { background: var(--green-light); border-radius: var(--radius); padding: 18px; margin: 14px 0; }
.answer-box .aw { font-size: 30px; font-weight: 800; }
.answer-box .aw-phon { color: var(--ink-2); font-size: 14px; margin-left: 8px; }
.answer-box .aw-simple { font-size: 14px; color: var(--ink); font-style: italic; margin-top: 4px; }
.answer-box .aw-chunk { margin-top: 8px; font-size: 14px; font-weight: 600; color: #1B5E20; }
.layer-pick { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.layer-pick button { flex: 1; min-width: 120px; border: none; border-radius: 10px; padding: 12px 8px; font-size: 14px; font-weight: 700; }
.lp-green { background: #43A047; color: #fff; }
.lp-yellow { background: #F9A825; color: #fff; }
.lp-red { background: #E53935; color: #fff; }
.session-summary { text-align: center; padding: 30px 18px; }
.session-summary h2 { font-size: 20px; color: var(--green); margin-bottom: 8px; }
.summary-rows { text-align: left; max-width: 420px; margin: 14px auto; }
.summary-rows .milestone-item { font-size: 14px; }

/* ---------- 造句工坊 ---------- */
.ws-word-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ws-chip { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 14px; font-size: 14px; font-weight: 600; }
.ws-chip.on { background: var(--green); border-color: var(--green); color: #fff; }
.ws-prompt { background: var(--green-light); border-radius: 10px; padding: 12px 16px; margin: 12px 0; font-size: 15px; }
.ref-box { border: 1.5px solid var(--green-mid); border-radius: var(--radius); padding: 16px; margin-top: 14px; background: #FAFDF9; }
.ref-box h4 { color: var(--green); font-size: 13px; letter-spacing: 1px; margin-bottom: 6px; }
.ref-en { font-size: 18px; font-weight: 700; }
.ref-tip { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; }

/* ---------- 说法库 ---------- */
.scene-h { font-size: 16px; font-weight: 700; margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.chunk-card { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chunk-zh { flex: 1; min-width: 200px; font-size: 14.5px; }
.chunk-en { flex: 2; min-width: 220px; font-size: 15.5px; font-weight: 700; color: #1B5E20; }
.chunk-en.masked { color: transparent; text-shadow: 0 0 10px rgba(27,94,32,.75); cursor: pointer; }
.chunk-ops { display: flex; gap: 6px; }
.quiz-toggle { font-size: 13px; color: var(--ink-2); margin-left: auto; }

/* ---------- 我的词汇 ---------- */
.tabbar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabbar button { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 14px; font-size: 13.5px; color: var(--ink-2); }
.tabbar button.on { border-color: var(--green); color: var(--green); background: var(--green-light); font-weight: 700; }
table.vtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vtable th { text-align: left; color: var(--ink-2); font-size: 12px; padding: 8px 6px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.vtable td { padding: 9px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vtable tr:hover td { background: #FAFDF9; }
.vtable .vw { font-weight: 700; font-size: 14.5px; cursor: pointer; }
.weak-guide { background: #FFF8E1; border-radius: 10px; padding: 12px 16px; font-size: 13.5px; color: #795548; margin-bottom: 12px; }
.weak-guide b { color: #B28704; }
.filter-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filter-row select { width: auto; flex: 0 0 auto; }

/* ---------- 页脚 ---------- */
.footer { text-align: center; color: var(--ink-2); font-size: 12px; padding: 26px 16px 12px; }
.footer-tip { opacity: .75; margin-top: 3px; }

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4), .stat:nth-child(5) { grid-column: span 1; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid .stat:last-child { grid-column: span 3; }
  .nav-btn { font-size: 13px; padding: 8px 4px; }
  .rescue-zh { font-size: 21px; }
  .wordcard .wc-word { font-size: 22px; }
  #toastWrap { bottom: 66px; }
  .vtable td:nth-child(5), .vtable th:nth-child(5) { display: none; }
}
@media (max-width: 400px) {
  .brand-sub { display: none; }
}

/* ---------- 反馈按钮 ---------- */
.feedback-float-btn {
  position: fixed;
  bottom: 80px;
  right: 14px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-mid));
  color: #fff;
  border: none;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.4);
  cursor: pointer;
  z-index: 999;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(46, 125, 50, 0.5);
}

/* ---------- 反馈弹窗 ---------- */
.feedback-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.feedback-modal.active {
  display: flex;
}

.feedback-modal-content {
  background: #fff;
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.feedback-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.feedback-modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
  margin: 0;
}

.feedback-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.feedback-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 0 20px 20px;
}

.feedback-modal-actions .btn {
  flex: 1;
}

/* ---------- 星级评分 ---------- */
.star-rating {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

.star {
  background: transparent;
  border: none;
  font-size: 28px;
  color: #B0BEC5;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.1s, color 0.2s;
}

.star:hover,
.star.active {
  color: #FFC107;
  transform: scale(1.1);
}

.star.active {
  color: #FFC107;
}

/* ---------- 微信提示 ---------- */
#wechat-alert {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #FFC107;
  color: #000;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  animation: slideDown 0.3s ease-out;
}

#wechat-alert a {
  color: #000;
  text-decoration: underline;
  font-weight: bold;
}

/* ---------- 反馈弹窗 ---------- */
.feedback-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.feedback-modal.active {
  display: flex;
}

.feedback-modal-content {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 90%;
  width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

.feedback-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.feedback-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.feedback-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}

.feedback-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
}

.feedback-modal-actions .btn {
  flex: 1;
  max-width: 120px;
}

.feedback-modal-actions .btn-outline {
  max-width: 120px;
}

.feedback-modal form {
  padding: 20px;
}

.feedback-modal label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 12px 0 6px;
}

.feedback-modal select,
.feedback-modal input,
.feedback-modal textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: var(--ink);
}

.feedback-modal select:focus,
.feedback-modal input:focus,
.feedback-modal textarea:focus {
  outline: none;
  border-color: var(--green-mid);
}

.feedback-modal textarea {
  resize: vertical;
  min-height: 100px;
}

.feedback-modal-actions .btn {
  flex: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* ============================================================
 * 开口练：难度/模式选词 chips + 评分反馈面板 + 语音 + 成就
 * ============================================================ */
.ws-row-label { font-size: 12px; color: var(--ink-2); margin: 10px 0 6px; letter-spacing: 1px; }
.ws-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 13.5px; transition: all .15s; }
.ws-chip.on { background: var(--green); color: #fff; border-color: var(--green); font-weight: 600; }
.ws-chip:disabled { opacity: .45; cursor: not-allowed; }
.ws-diff-hint { font-size: 12.5px; color: var(--ink-2); background: var(--green-light); border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
.ws-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }

/* 评分反馈面板 */
.fb-box { margin-top: 16px; border: 2px solid var(--green); border-radius: 14px; padding: 14px; background: #F6FBF6; animation: slideUp .25s ease; }
.fb-head { display: flex; align-items: center; gap: 12px; }
.fb-score { width: 58px; height: 58px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex-shrink: 0; }
.fb-title b { font-size: 15.5px; }
.fb-sub { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.fb-bars { margin-top: 10px; display: grid; gap: 6px; }
.fb-dim { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.fb-dim-name { width: 32px; color: var(--ink-2); flex-shrink: 0; }
.fb-bar { flex: 1; height: 8px; border-radius: 99px; background: #E3E8E4; overflow: hidden; }
.fb-bar i { display: block; height: 100%; border-radius: 99px; transition: width .4s ease; }
.fb-dim-num { width: 26px; text-align: right; font-weight: 600; }
.fb-sec { margin-top: 10px; font-size: 13.5px; }
.fb-sec ul { margin: 4px 0 0 18px; }
.fb-sec li { margin: 3px 0; }
.fb-good { color: #1B5E20; }
.fb-ref { margin-top: 12px; background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.fb-ref .ref-en { font-weight: 600; margin: 4px 0; }
/* 用户自己的句子区块：绿色左边线与"老外会说"区分 */
.fb-mine { border-left: 3px solid var(--green-mid); }

/* ============================================================
 * 发音地基（#sounds）：48 音标卡
 * ============================================================ */
.snd-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; }
.snd-progress .bar { flex: 1; height: 10px; border-radius: 5px; background: #E8EFE8; overflow: hidden; }
.snd-progress .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green-mid), var(--green)); border-radius: 5px; transition: width .3s; }
.snd-pct { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; font-weight: 600; }
.snd-group { margin-top: 6px; }
.sound-card { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.sound-card.done { background: var(--green-light); border-color: var(--green-mid); }
.snd-head { display: flex; align-items: flex-start; gap: 10px; }
.snd-sym { font-size: 20px; font-weight: 700; color: var(--green); min-width: 52px; line-height: 1.3; font-family: Georgia, 'Times New Roman', serif; }
.sound-card.done .snd-sym { color: #1B5E20; }
.snd-tip { flex: 1; font-size: 13px; color: var(--ink); line-height: 1.5; }
.snd-done-btn { flex-shrink: 0; }
.snd-words { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.snd-word { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: var(--green-light); border: 1px solid transparent; border-radius: 10px; padding: 6px 10px; cursor: pointer; transition: .15s; text-align: left; }
.snd-word:hover { border-color: var(--green-mid); transform: translateY(-1px); }
.snd-word b { font-size: 14px; color: var(--ink); }
.snd-word span { font-size: 11px; color: var(--ink-2); font-family: Georgia, serif; }
.snd-word i { font-style: normal; font-size: 10px; position: absolute; }
.snd-word { position: relative; }
.snd-word.inlib i { top: 4px; right: 6px; }

/* 三步用法引导：让用户一眼知道怎么学 */
.snd-how { display: flex; flex-direction: column; gap: 6px; background: var(--green-light); border-radius: 12px; padding: 12px 14px; margin-top: 10px; font-size: 13.5px; color: var(--ink); }
.snd-how b { color: var(--green); }
.snd-how span { display: flex; align-items: center; gap: 8px; }
.snd-how i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* 聚焦学习弹层：一次只学一个音 */
.snd-fc { z-index: 300; }
.snd-fc-content { max-width: 420px; }
.snd-fc-body { padding: 10px 20px 0; text-align: center; }
.snd-fc-sym { font-size: 56px; font-weight: 700; color: var(--green); font-family: Georgia, 'Times New Roman', serif; line-height: 1.2; }
.snd-fc-tip { font-size: 15px; color: var(--ink); margin: 6px 0 14px; line-height: 1.6; }
.snd-fc-step { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.snd-fc-body .snd-words { justify-content: center; gap: 10px; }
.snd-word.big { padding: 12px 16px; }
.snd-word.big b { font-size: 17px; }
.snd-word.big span { font-size: 12.5px; }
.snd-fc-actions { justify-content: center; }
.snd-fc-actions .btn { white-space: nowrap; flex: none; }
.snd-fc-actions .btn[disabled] { opacity: .6; cursor: default; }
.fb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* 句型填空 / 关键词 */
.fill-blank-box { font-size: 17px; line-height: 1.6; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 8px 0; }
.fill-blank-box .blank { color: var(--green); font-weight: 700; letter-spacing: 1px; }
.kw-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.kw { background: var(--green-light); color: #1B5E20; border-radius: 8px; padding: 6px 12px; font-weight: 600; font-size: 14.5px; }

/* 开口说（语音识别） */
.mic-zone { text-align: center; padding: 14px 0 6px; }
.mic-btn { width: 110px; height: 110px; border-radius: 50%; border: none; background: var(--green); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; box-shadow: 0 6px 18px rgba(46,125,50,.35); transition: transform .15s; }
.mic-btn:active { transform: scale(.95); }
.mic-btn:disabled { background: #9E9E9E; cursor: wait; }
.mic-tip { font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.mic-heard { margin-top: 8px; font-size: 14px; color: var(--ink-2); min-height: 20px; word-break: break-all; }
.speak-zh { font-size: 16.5px; font-weight: 600; margin-top: 6px; }

/* 成就页 */
.achv-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.achv-points { font-size: 16px; }
.achv-level { font-weight: 700; }
.level-progress { margin-top: 12px; }
.level-progress .bar { height: 10px; background: #E3E8E4; border-radius: 99px; overflow: hidden; }
.level-progress .bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width .3s; }
.lp-text { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.achv-meta { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 10px; margin-top: 8px; }
.badge-cell { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 8px; text-align: center; opacity: .5; }
.badge-cell.on { border-color: var(--green); background: #F6FBF6; opacity: 1; }
.b-ic { font-size: 26px; }
.b-name { font-weight: 700; font-size: 12.5px; margin-top: 4px; }
.b-desc { font-size: 11px; color: var(--ink-2); margin-top: 2px; }

@media (max-width: 375px) {
  .fb-score { width: 48px; height: 48px; font-size: 18px; }
  .mic-btn { width: 96px; height: 96px; }
}

/* ============================================================
 * v2.1：每日目标卡片 + OPD3 图解词库 + 新手引导
 * ============================================================ */
.goals-card { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.goals-card.done { border-color: var(--green); background: #F6FBF6; }
.goals-head { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; justify-content: space-between; }
.goals-hint { font-size: 11px; color: var(--ink-2); font-weight: 400; }
.goals-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.goal-item { background: var(--bg); border-radius: 10px; padding: 8px 6px; text-align: center; font-size: 12px; color: var(--ink-2); }
.goal-item.done { background: var(--green-light); color: #1B5E20; font-weight: 600; }
.goal-item .g-ic { display: block; font-size: 18px; margin-bottom: 2px; }
.goal-item .g-num { display: block; font-weight: 700; margin-top: 2px; }

.opd-card { border-left: 3px solid var(--green-mid); }
.opd-tip { font-size: 12.5px; color: var(--ink-2); background: var(--green-light); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.opd-word-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; border-bottom: 1px dashed var(--line); }
.opd-word-row:last-child { border-bottom: none; }
.opd-word-row.owned { opacity: .65; }
.opd-word-main { display: flex; flex-direction: column; min-width: 0; }
.opd-word-main b { font-size: 15.5px; }
.opd-zh { font-size: 12.5px; color: var(--ink-2); }
.opd-word-ops { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

#onboard-overlay { position: fixed; inset: 0; background: rgba(27,43,34,.55); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.onboard-card { background: #fff; border-radius: 18px; padding: 22px 20px; max-width: 400px; width: 100%; max-height: 86vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.25); animation: slideUp .3s ease; }
.onboard-card h2 { color: var(--green); font-size: 20px; }
.onboard-sub { font-size: 13px; color: var(--ink-2); margin: 4px 0 14px; }
.onboard-step { display: flex; gap: 10px; background: var(--bg); border-radius: 12px; padding: 12px; margin-top: 10px; font-size: 13.5px; line-height: 1.55; }
.os-ic { font-size: 20px; flex-shrink: 0; }

/* ============================================================
 * v2.3：苏不倦 IP 反馈区 + 今日主题
 * ============================================================ */
.fb-ip-row { display: flex; gap: 10px; align-items: center; background: var(--bg); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.fb-ip-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--green-light); }
.fb-ip-text { display: flex; flex-direction: column; font-size: 13px; line-height: 1.5; }
.fb-ip-text b { font-size: 14.5px; }
.fb-ip-text span { color: var(--ink-2); font-size: 12px; }
.fb-ip-wechat { color: var(--green) !important; font-weight: 600; cursor: pointer; margin-top: 2px; }
.goals-theme { margin-top: 10px; background: var(--green-light); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; cursor: pointer; color: var(--ink); }
.goals-theme b { color: var(--green); }
.goals-theme span { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.onboard-sign { margin-top: 12px; text-align: center; font-size: 11.5px; color: var(--ink-2); }

/* ============================================================
 * 页面级新手引导卡片
 * ============================================================ */
.guide-banner { background: linear-gradient(135deg, var(--green-light), #E8F5E9); border: 1.5px solid var(--green-mid); border-radius: 14px; padding: 14px 16px; margin: 0 auto 14px; max-width: 420px; animation: slideUp .3s ease; }
.guide-head { display: flex; align-items: center; gap: 8px; }
.guide-icon { font-size: 20px; }
.guide-head b { font-size: 15px; color: var(--green); flex: 1; }
.guide-close { background: none; border: none; color: var(--ink-2); font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.guide-close:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.guide-body { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin: 8px 0 10px; }
.guide-cta { margin-top: 2px; }

/* 今日一句卡片：首页每日地道说法 + 跟读 */
.daily-chunk { background: linear-gradient(135deg, var(--green-light), #E8F5E9); border: 1.5px solid var(--green-mid); }
.daily-chunk .card-title { color: var(--green); }
.dc-scene { display: inline-block; font-size: 11px; color: var(--green); background: rgba(255,255,255,.6); padding: 2px 10px; border-radius: 10px; margin-bottom: 8px; }
.dc-zh { font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.dc-en { font-size: 16px; color: var(--ink); margin-bottom: 10px; line-height: 1.5; }
.dc-en b { color: var(--green); font-weight: 600; }
.dc-ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dc-done { font-size: 12px; color: var(--green); font-weight: 500; }

/* ============================================================
 * 头像评分（点亮小苏）：未选灰色，点亮彩色 + 弹跳
 * ============================================================ */
.rate-row { display: flex; gap: 10px; margin: 10px 0 4px; }
.rate-btn { background: transparent; border: none; padding: 2px; cursor: pointer; transition: transform .15s ease; }
.rate-btn img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; filter: grayscale(1); opacity: .35; transition: all .15s ease; }
.rate-btn:hover img { opacity: .6; }
.rate-btn.on img { filter: none; opacity: 1; box-shadow: 0 0 0 2.5px var(--green-mid), 0 3px 10px rgba(67,160,71,.35); animation: ratePop .25s ease; }
@keyframes ratePop { 0% { transform: scale(.8); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (max-width: 375px) { .rate-btn img { width: 38px; height: 38px; } }

/* 小苏感谢气泡（集齐 5 个评分时出现） */
.rate-thanks { display: none; margin-top: 10px; background: var(--green); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 16px 16px 16px 4px; width: fit-content; }
.rate-thanks.show { display: inline-block; animation: bubbleIn .3s ease; }
@keyframes bubbleIn { from { transform: translateY(6px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================
 * 情绪价值语音字幕条（小苏说英文 + 中对照）
 * ============================================================ */
#praiseSub { position: fixed; left: 14px; right: 14px; bottom: 88px; z-index: 200; background: rgba(27,43,34,.92); color: #fff; border-radius: 14px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; opacity: 0; transform: translateY(12px); transition: all .3s ease; pointer-events: none; max-width: 500px; margin: 0 auto; }
#praiseSub.show { opacity: 1; transform: none; }
#praiseSub img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--green-mid); flex-shrink: 0; }
#praiseSub .ps-text { display: flex; flex-direction: column; line-height: 1.45; min-width: 0; }
#praiseSub .ps-text b { font-size: 13.5px; font-weight: 600; }
#praiseSub .ps-text span { font-size: 11.5px; color: #C8E6C9; }

/* 复习页拼写输入 */
.rescue-input-row { display: flex; gap: 8px; margin: 12px 0 4px; }
.rescue-input-row input { flex: 1; min-width: 0; border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 16px; }
.rescue-input-row input:focus { outline: none; border-color: var(--green-mid); }
.rescue-ok { background: var(--green-light); color: #1B5E20; border-radius: 10px; padding: 8px 12px; font-size: 14px; margin-top: 8px; }
.rescue-no { background: #FFF3E0; color: #B28704; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-top: 8px; }

/* M3: TTS 播放 loading 态 */
.speak-btn.loading { opacity: 0.5; pointer-events: none; animation: speakPulse 0.6s ease-in-out infinite; }
@keyframes speakPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 0.85; } }
.hero-avatar { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--green-mid); display: block; margin: 0 auto 10px; object-fit: cover; }
.summary-avatar { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--green-mid); display: block; margin: 0 auto 8px; object-fit: cover; }
.onboard-avatar { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--green-mid); display: block; margin: 0 auto 10px; object-fit: cover; }
.onboard-sign-avatar { width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; margin-right: 3px; object-fit: cover; }
.footer-avatar { width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; margin-right: 4px; object-fit: cover; }

/* 安装到桌面引导 */
.install-guide { display: flex; flex-direction: column; gap: 6px; background: var(--green-light); border-radius: 12px; padding: 12px 14px; margin-top: 14px; font-size: 13px; color: var(--ink); }

.install-guide b { color: var(--green); }

/* ============================================================
 * 应用内更新（js/update.js）：更新对话框 + 进度条
 * ============================================================ */
.up-modal { z-index: 300; }
.up-content { font-size: 14px; }
.up-body { padding: 6px 20px 0; }
.up-meta { color: var(--ink-2); font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.up-meta .up-dot { color: var(--line); }
.up-current { font-size: 12.5px; color: var(--ink-2); margin: 4px 0 6px; }
.up-force-tag { color: var(--red); }
.up-notes-title { font-weight: 600; margin: 10px 0 4px; }
.up-notes { margin: 0 0 10px; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; }
.up-notes li { margin: 3px 0; }
.up-progress-wrap { margin: 10px 0 6px; }
.up-stage { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.up-bar { height: 8px; border-radius: 4px; background: #E8EFE8; overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green-mid), var(--green)); border-radius: 4px; transition: width .3s ease; }
/* 阶段不确定时（下载启动/校验/启用）：滑动条纹，不假装有精确进度 */
.up-bar.up-indeterminate i { width: 34% !important; animation: upSlide 1.1s ease-in-out infinite; }
@keyframes upSlide { 0% { margin-left: -34%; } 100% { margin-left: 100%; } }
.up-bar.up-bar-err i { background: var(--red); animation: none; width: 100% !important; }
.up-pct { font-size: 12px; color: var(--ink-2); margin-top: 4px; text-align: right; min-height: 14px; }
.up-err { margin-top: 8px; font-size: 13px; color: var(--red); }
.up-apk-tip { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.up-content .feedback-modal-actions .btn { white-space: nowrap; }

/* ============================================================
 * 日常高频（牛津 3000）收词列表
 * ============================================================ */
.oxf-toolbar { display: flex; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.oxf-toolbar input { flex: 1; min-width: 140px; border: 2px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 15px; }
.oxf-toolbar input:focus { outline: none; border-color: var(--green-mid); }
.oxf-toolbar select { border: 2px solid var(--line); border-radius: 10px; padding: 9px 10px; font-size: 14px; background: #fff; color: var(--ink); }
.oxf-row { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.oxf-row.owned { background: var(--green-light); border-color: var(--green-mid); }
.oxf-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oxf-main b { font-size: 16.5px; }
.oxf-pos { font-size: 12px; color: var(--ink-2); }
.oxf-ipa { font-size: 13px; color: var(--green-mid); font-family: Georgia, serif; }
.oxf-cefr { font-size: 11px; background: var(--green-light); color: var(--green); border-radius: 6px; padding: 1px 7px; font-weight: 700; }
.oxf-def { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.oxf-ex { font-size: 13px; color: var(--ink); margin-top: 3px; font-style: italic; }
.oxf-ops { margin-top: 6px; }

/* OPD 主题卡渐变横幅 */
.opd-card .opd-art { display: flex; align-items: center; justify-content: space-between; width: calc(100% + 32px); margin: -16px -16px 12px; height: 84px; padding: 0 20px; border-radius: var(--radius) var(--radius) 0 0; }
.opd-art-emoji { font-size: 46px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.opd-art-en { font-size: 24px; font-weight: 800; color: rgba(255,255,255,.92); letter-spacing: 2px; text-shadow: 0 2px 6px rgba(0,0,0,.3); }

/* ============================================================
 * 深色模式（html.dark 切换）
 * 审计说明：:root 变量覆盖大部分场景，以下追加规则处理硬编码色值
 * ============================================================ */
html.dark {
  --green: #66BB6A; --green-light: #1B3A1F; --green-mid: #81C784;
  --yellow: #FFD54F; --red: #EF5350;
  --ink: #E0E0E0; --ink-2: #9E9E9E; --line: #333340;
  --bg: #0D1117; --card: #161B22;
  --shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
html.dark body { background: var(--bg); color: var(--ink); }
html.dark .card, html.dark .group-card, html.dark .sound-card { background: var(--card); border-color: var(--line); }
html.dark .card-title, html.dark .brand-text { color: var(--ink); }
html.dark .topbar { background: var(--card); border-color: var(--line); }
html.dark .nav-btn.active { background: var(--green-light); color: var(--green-mid); }
html.dark .nav-btn { color: var(--ink-2); }
html.dark .btn { background: var(--green); color: #fff; }
html.dark .btn-outline { background: transparent; color: var(--green-mid); border-color: var(--green-mid); }
html.dark .btn-outline:hover { background: var(--green-light); }
html.dark #toastWrap .toast { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
html.dark #toastWrap .toast.ok { border-color: var(--green-mid); }
html.dark #toastWrap .toast.warn { border-color: var(--yellow); }
html.dark #toastWrap .toast.err { border-color: var(--red); }
html.dark input, html.dark textarea, html.dark select { background: var(--card); color: var(--ink); border-color: var(--line); }
html.dark .empty { color: var(--ink-2); }
html.dark .install-guide { background: var(--green-light); }
html.dark .opd-art-en { color: rgba(255,255,255,.9); }
html.dark .footer { color: var(--ink-2); }
html.dark .footer-tip { color: var(--ink-2); }
html.dark .feedback-modal-content { background: var(--card); color: var(--ink); }
html.dark .snd-word { background: var(--green-light); border-color: var(--line); }
html.dark .snd-word b { color: var(--ink); }
html.dark .snd-how { background: var(--green-light); }
html.dark .snd-how i { background: var(--green-mid); }
html.dark .chart-svg text { fill: var(--ink-2); }
html.dark .stat { color: var(--ink); }
html.dark .stat b { color: var(--green-mid); }
html.dark .guide-banner { background: var(--green-light); color: var(--ink); }
html.dark .rescue-card, html.dark .session-summary { background: var(--card); }
html.dark .rescue-zh { color: var(--ink); }
html.dark .opd-art-en { color: rgba(255,255,255,.85); }
html.dark .g-story { color: var(--ink-2); }
html.dark .g-meta { color: var(--green-mid); }
html.dark .ws-prompt { color: var(--ink); }
html.dark .ws-diff-hint { color: var(--ink-2); }
html.dark .fb-box { background: var(--card); border-color: var(--line); }
html.dark .fb-ref { background: var(--card); border-color: var(--line); }
html.dark .fb-ref .ref-en { color: var(--ink); }
html.dark .fb-mine { border-color: var(--green-mid); }
html.dark .dc-zh, html.dark .dc-en { color: var(--ink); }
html.dark .badge-cell, html.dark .badge-cell.on { background: var(--card); border-color: var(--line); }
html.dark .milestone-item { border-color: var(--line); }
html.dark .vtable th { background: var(--green-light); color: var(--ink); }
html.dark .vtable td { border-color: var(--line); color: var(--ink); }
html.dark .ws-chip { background: var(--card); color: var(--ink-2); border-color: var(--line); }
html.dark .ws-chip.on { background: var(--green-light); color: var(--green-mid); border-color: var(--green-mid); }
html.dark .daily-chunk { background: var(--green-light); }
html.dark .dc-zh, html.dark .dc-en { color: var(--ink); }
html.dark .hero-title { color: var(--ink); }
html.dark #praiseSub { background: rgba(0,0,0,.85); }
html.dark .rescue-timer { color: var(--ink-2); }
html.dark .hint { color: var(--ink-2); }
html.dark .snd-fc-tip { color: var(--ink); }
html.dark .snd-fc-step { color: var(--ink-2); }
html.dark .up-stage, html.dark .up-pct { color: var(--ink-2); }
html.dark .oxf-row { border-color: var(--line); background: var(--card); }
html.dark .oxf-row.owned { background: var(--green-light); }
html.dark .oxf-def, html.dark .oxf-ex { color: var(--ink-2); }
html.dark .oxf-ipa { color: var(--green-mid); }
html.dark .oxf-cefr { background: var(--green-light); color: var(--green-mid); }
html.dark .snd-progress .bar { background: var(--line); }
html.dark .quiz-toggle { color: var(--ink-2); }
html.dark .opd-word-row { border-color: var(--line); }
html.dark .opd-zh { color: var(--ink-2); }
html.dark .chart-svg { background: var(--card); }

/* ---------- 深色模式补充覆盖（修复白底白字） ---------- */
html.dark .icon-btn { background: var(--card); color: var(--ink-2); border-color: var(--line); }
html.dark .btn-outline { background: var(--card); color: var(--green-mid); }
html.dark .hint-btn { background: var(--card); color: var(--ink); border-color: var(--line); }
html.dark .ws-chip { background: var(--card); color: var(--ink-2); border-color: var(--line); }
html.dark .ws-chip.on { background: var(--green); color: #fff; border-color: var(--green); }
html.dark .tabbar button { background: var(--card); color: var(--ink-2); border-color: var(--line); }
html.dark .tabbar button.on { background: var(--green-light); color: var(--green-mid); border-color: var(--green-mid); }
html.dark .fb-ref { background: var(--card); border: 1px solid var(--line); }
html.dark .sound-card { background: var(--card); border-color: var(--line); }
html.dark .fill-blank-box { background: var(--card); border-color: var(--line); color: var(--ink); }
html.dark .rescue-input-row input { background: var(--card); color: var(--ink); border-color: var(--line); }
html.dark .opd-word-row { background: var(--card); border-color: var(--line); }
html.dark .group-card { background: var(--card); border-color: var(--line); }
html.dark .group-card h3 { color: var(--ink); }
html.dark .g-story { color: var(--ink-2); }
html.dark .g-meta { color: var(--green-mid); }
html.dark .opd-card h3 { color: var(--ink); }
html.dark .opd-card .g-story { color: var(--ink-2); }
html.dark .brand-name { color: var(--green-mid); }
html.dark .brand-sub { color: var(--ink-2); }
html.dark .topbar { background: var(--card); }
html.dark .topbar-inner { border-color: var(--line); }
html.dark .nav { background: var(--card); border-color: var(--line); }
html.dark .streak-pill { background: var(--card); color: var(--ink); border-color: var(--line); }
html.dark .stat { background: var(--card); color: var(--ink); border-color: var(--line); }
html.dark .stat b { color: var(--green-mid); }
html.dark .stat span { color: var(--ink-2); }
html.dark .hero-review { background: linear-gradient(135deg, #1B5E20, #2E7D32); }
html.dark .hero-review .btn { background: var(--green-mid); color: #fff; }
html.dark .goals-grid .goal-item { background: var(--card); border-color: var(--line); color: var(--ink); }
html.dark .goal-item .goal-num { color: var(--green-mid); }
html.dark .daily-chunk { background: var(--green-light); }
html.dark .daily-chunk .dc-zh { color: var(--ink); }
html.dark .daily-chunk .dc-en { color: var(--green-mid); }
html.dark .chunk-card { background: var(--card); border-color: var(--line); }
html.dark .chunk-zh { color: var(--ink); }
html.dark .chunk-en { color: var(--green-mid); }
html.dark .scene-h { color: var(--ink); }
html.dark .quiz-toggle { color: var(--ink-2); }
html.dark .opd-tip { background: var(--green-light); color: var(--ink); }
html.dark .ws-prompt { color: var(--ink); }
html.dark .ws-prompt b { color: var(--green-mid); }
html.dark .ws-actions { background: transparent; }
html.dark textarea, html.dark .ws-input { background: var(--card); color: var(--ink); border-color: var(--line); }
html.dark .fb-head { color: var(--ink); }
html.dark .fb-sub { color: var(--ink-2); }
html.dark .fb-dim-name { color: var(--ink-2); }
html.dark .fb-sec b { color: var(--ink); }
html.dark .fb-sec li { color: var(--ink-2); }
html.dark .fb-good b { color: var(--green-mid); }
html.dark .fb-good li { color: var(--ink-2); }
html.dark .fb-ref .ref-en { color: var(--ink); }
html.dark .fb-ref .ref-tip { color: var(--ink-2); }
html.dark .fb-mine .ref-en { color: var(--ink); }
html.dark .fb-actions .btn-outline { background: var(--card); color: var(--green-mid); }
html.dark .milestone-item { color: var(--ink); border-color: var(--line); }
html.dark .weak-guide { color: var(--ink-2); }
html.dark .vtable { background: var(--card); }
html.dark .vtable th { background: var(--green-light); color: var(--green-mid); }
html.dark .vtable td { color: var(--ink); border-color: var(--line); }
html.dark .empty { color: var(--ink-2); }
html.dark .badge-cell, html.dark .badge-cell.on { background: var(--card); border-color: var(--line); }
html.dark .badge-cell .b-name { color: var(--ink); }
html.dark .badge-cell .b-desc { color: var(--ink-2); }
html.dark .achv-points { color: var(--ink); }
html.dark .achv-level { color: var(--ink); }
html.dark .level-progress .bar { background: var(--line); }
html.dark .lp-text { color: var(--ink-2); }
html.dark .achv-meta { color: var(--ink-2); }
html.dark .snd-progress .bar { background: var(--line); }
html.dark .snd-pct { color: var(--ink-2); }
html.dark .snd-how { background: var(--green-light); color: var(--ink); }
html.dark .snd-how span { color: var(--ink); }
html.dark .snd-how b { color: var(--green-mid); }
html.dark .snd-word b { color: var(--ink); }
html.dark .snd-word span { color: var(--ink-2); }
html.dark .sound-card .snd-tip { color: var(--ink); }
html.dark .snd-fc-tip { color: var(--ink); }
html.dark .snd-fc-step { color: var(--ink-2); }
html.dark .snd-fc-sym { color: var(--green-mid); }
html.dark .install-guide { background: var(--green-light); color: var(--ink); }
html.dark .install-guide b { color: var(--green-mid); }
html.dark .install-guide span { color: var(--ink-2); }
html.dark .feedback-modal-content { background: var(--card); color: var(--ink); }
html.dark .feedback-modal-content label { color: var(--ink-2); }
html.dark .feedback-modal-content select, html.dark .feedback-modal-content input, html.dark .feedback-modal-content textarea { background: var(--bg); color: var(--ink); }
html.dark .rate-thanks { color: var(--green-mid); }
html.dark .fb-ip-text b { color: var(--ink); }
html.dark .fb-ip-wechat { color: var(--green-mid); }
html.dark .up-content { color: var(--ink); }
html.dark .up-notes li { color: var(--ink-2); }
html.dark .up-current { color: var(--ink-2); }
html.dark .up-meta { color: var(--ink-2); }
html.dark .rescue-card { background: var(--card); }
html.dark .rescue-zh { color: var(--ink); }
html.dark .rescue-scene { color: var(--ink-2); }
html.dark .session-summary h2 { color: var(--ink); }
html.dark .session-summary p { color: var(--ink-2); }
html.dark .summary-rows .milestone-item { color: var(--ink); }
html.dark .chart-svg { background: transparent; }
html.dark .stats-grid .stat { background: var(--card); }
html.dark .goal-progress { background: var(--line); }
html.dark .goal-progress .bar { background: var(--green-mid); }
html.dark .empty-icon { opacity: .5; }
html.dark .dc-scene { color: var(--green-mid); }
html.dark .dc-done { color: var(--green-mid); }
html.dark .oxf-toolbar input { background: var(--card); color: var(--ink); border-color: var(--line); }
html.dark .oxf-toolbar select { background: var(--card); color: var(--ink); border-color: var(--line); }
html.dark .oxf-row { background: var(--card); border-color: var(--line); }
html.dark .oxf-row.owned { background: var(--green-light); border-color: var(--green-mid); }
html.dark .oxf-main b { color: var(--ink); }
html.dark .oxf-pos { color: var(--ink-2); }
html.dark .oxf-ipa { color: var(--green-mid); }
html.dark .oxf-cefr { background: var(--green-light); color: var(--green-mid); }
html.dark .oxf-def { color: var(--ink-2); }
html.dark .oxf-ex { color: var(--ink); opacity: .7; }
html.dark .sound-card.done { background: var(--green-light); border-color: var(--green-mid); }
html.dark .sound-card .snd-sym { color: var(--green-mid); }
html.dark .sound-card.done .snd-sym { color: #81C784; }
html.dark .sound-card .snd-tip { color: var(--ink); }
html.dark .snd-words .snd-word { background: var(--green-light); }

/* ============================================================
 * 底部导航栏 + 顶部二级子导航
 * ============================================================ */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; display: flex; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0); }
.bn-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 4px; border: none; background: transparent; color: var(--ink-2); position: relative; transition: color .15s; }
.bn-btn.active { color: var(--green); }
.bn-btn .bn-ic { font-size: 22px; line-height: 1; }
.bn-btn .bn-tx { font-size: 11px; font-weight: 600; }
.bn-btn .nav-badge { position: absolute; top: 2px; right: calc(50% - 20px); background: var(--red); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-weight: 700; }
.bn-btn.active .bn-ic { transform: scale(1.1); transition: transform .15s; }
#app { padding-bottom: 64px; }
.sub-nav { display: flex; overflow-x: auto; scrollbar-width: none; gap: 0; background: var(--card); border-bottom: 1px solid var(--line); padding: 0 8px; }
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav .sn-btn { flex-shrink: 0; border: none; background: transparent; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--ink-2); position: relative; transition: color .15s; white-space: nowrap; }
.sub-nav .sn-btn.on { color: var(--green); }
.sub-nav .sn-btn.on::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 3px; background: var(--green); border-radius: 3px 3px 0 0; }
html.dark .bottom-nav { background: rgba(22,27,34,.95); border-color: var(--line); }
html.dark .bn-btn { color: var(--ink-2); }
html.dark .bn-btn.active { color: var(--green-mid); }
html.dark .sub-nav { background: var(--card); border-color: var(--line); }
html.dark .sub-nav .sn-btn { color: var(--ink-2); }
html.dark .sub-nav .sn-btn.on { color: var(--green-mid); }
html.dark .sub-nav .sn-btn.on::after { background: var(--green-mid); }

/* ============================================================
 * 按钮统一胶囊形 + 防溢出
 * ============================================================ */
.btn, .btn-outline, .btn-ghost, .btn-sm, .icon-btn,
.tabbar button, .nav-btn, .bn-btn, .sn-btn,
.oxf-ops .btn, .oxf-ops .btn-sm, .feedback-modal-actions .btn,
.snd-fc-actions .btn, .fb-actions .btn, .fb-actions .btn-sm,
.ws-actions .btn, .ws-actions .btn-outline,
.cta, .sns-cta, .goal-cta {
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100%;
}
.btn-sm { padding: 8px 18px !important; font-size: 13px !important; }
.btn { padding: 10px 22px !important; }
/* 修复可能导致溢出的内联按钮 */
.oxf-ops .btn { min-width: auto; }
.ws-actions { flex-wrap: wrap; gap: 8px; }
.feedback-modal-actions { flex-wrap: wrap; gap: 8px; }
.snd-fc-actions { flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ============================================================
 * 新用户引导增强（streak < 3 天时显示）
 * ============================================================ */
/* 主 CTA 脉冲动画引导眼球 */
@keyframes ctaPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(46,125,50,.4); } 50% { box-shadow: 0 0 0 14px rgba(46,125,50,0); } }
.hero-review .btn, .goals-card + .card .btn { animation: ctaPulse 2s ease-in-out 3; }
/* 新用户简化提示条（连续 < 3 天时 JS 添加 class） */
.newuser-tip { background: linear-gradient(135deg, #E8F5E9, #C8E6C9); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; font-size: 14.5px; color: var(--ink); line-height: 1.6; }
.newuser-tip b { color: var(--green); }
.newuser-tip .step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; margin-right: 6px; flex-shrink: 0; }
.newuser-tip .step-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
/* 首次造句输入框引导 */
.ws-input::placeholder { color: var(--green-mid); font-style: italic; }

/* ============================================================
 * 全新更新弹窗设计（v1.0.27）
 * ============================================================ */
.up-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .3s ease; }
.up-overlay.show { opacity: 1; }
.up-card { background: #fff; border-radius: 24px; width: 100%; max-width: 380px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25); transform: translateY(30px) scale(.95); transition: transform .3s ease; }
.up-overlay.show .up-card { transform: translateY(0) scale(1); }
.up-head { background: linear-gradient(135deg, #2E7D32, #43A047); padding: 28px 24px 20px; display: flex; align-items: center; gap: 16px; position: relative; }
.up-icon { width: 52px; height: 52px; border-radius: 14px; border: 2px solid rgba(255,255,255,.4); flex-shrink: 0; }
.up-head-tx { flex: 1; }
.up-new { font-size: 22px; font-weight: 800; color: #fff; }
.up-ver { font-size: 15px; color: rgba(255,255,255,.85); margin-top: 2px; }
.up-ver b { color: #FFD54F; font-size: 17px; }
.up-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.2); border: none; color: #fff; font-size: 16px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.up-close:hover { background: rgba(255,255,255,.3); }
.up-body { padding: 18px 24px 6px; }
.up-notes-label { font-size: 14px; font-weight: 700; color: #2E7D32; margin-bottom: 8px; }
.up-notes { list-style: none; padding: 0; margin: 0; }
.up-notes li { font-size: 13.5px; color: #444; padding: 4px 0 4px 16px; position: relative; line-height: 1.5; }
.up-notes li::before { content: '•'; position: absolute; left: 2px; color: var(--green-mid, #66BB6A); font-weight: bold; }
.up-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.up-tag { font-size: 12px; color: #78909C; background: #F0F4F0; border-radius: 6px; padding: 3px 10px; }
.up-progress-wrap { padding: 14px 24px 6px; }
.up-stage { font-size: 14px; font-weight: 600; color: #2E7D32; margin-bottom: 8px; }
.up-pct { font-size: 13px; color: #78909C; text-align: right; margin-top: 4px; }
.up-err { font-size: 13px; color: #E53935; margin-top: 6px; }
.up-actions { padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.up-btn-main { width: 100%; padding: 16px; border: none; border-radius: 16px; background: linear-gradient(135deg, #2E7D32, #43A047); color: #fff; font-size: 17px; font-weight: 800; cursor: pointer; letter-spacing: 1px; transition: transform .1s, box-shadow .1s; box-shadow: 0 6px 20px rgba(46,125,50,.35); }
.up-btn-main:active { transform: scale(.97); }
.up-btn-main:disabled { opacity: .6; }
.up-btn-sub { width: 100%; padding: 12px; border: none; background: transparent; color: #78909C; font-size: 14px; cursor: pointer; text-align: center; }
.up-btn-sub:hover { color: var(--green, #2E7D32); }
.up-hint { text-align: center; font-size: 12px; color: #78909C; padding: 0 24px 18px; }
/* 深色模式 */
html.dark .up-card { background: #1E1E2E; }
html.dark .up-notes-label { color: #81C784; }
html.dark .up-notes li { color: #CCC; }
html.dark .up-tag { background: #2A2A3A; color: #999; }
html.dark .up-stage { color: #81C784; }
html.dark .up-btn-main { background: linear-gradient(135deg, #43A047, #66BB6A); }
html.dark .up-btn-sub { color: #888; }
html.dark .up-hint { color: #666; }
/* 设置页检查更新醒目化 */
.settings-update-section { background: linear-gradient(135deg, #E8F5E9, #C8E6C9); border-radius: 16px; padding: 20px; margin: 12px 0; }
html.dark .settings-update-section { background: linear-gradient(135deg, #1B3A1F, #2E7D32); }
.settings-update-section .su-title { font-size: 16px; font-weight: 700; color: #1B5E20; margin-bottom: 4px; }
html.dark .settings-update-section .su-title { color: #A5D6A7; }
.settings-update-section .su-btn { display: inline-flex; align-items: center; gap: 8px; background: #2E7D32; color: #fff; border: none; border-radius: 999px; padding: 12px 28px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 10px; }
.settings-update-section .su-btn:active { transform: scale(.97); }

/* ============================================================
 * AI 学伴浮动窗（js/ai-assistant.js）
 * 层级约定：bottom-nav 200 / praise 200 < 球 400 < 面板 450 < 更新弹窗 500 < 引导 9999
 * ============================================================ */
#aiBall { position: fixed; z-index: 400; width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85); background: linear-gradient(135deg, #43A047, #66BB6A);
  box-shadow: 0 4px 14px rgba(46,125,50,.4); font-size: 24px; cursor: grab; touch-action: none;
  display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; }
#aiBall:active { cursor: grabbing; transform: scale(1.08); }
#aiPanel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 450; height: 72vh; max-width: 560px; margin: 0 auto;
  background: var(--card); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 30px rgba(0,0,0,.18);
  display: flex; flex-direction: column; transform: translateY(105%); transition: transform .28s ease;
  padding-bottom: env(safe-area-inset-bottom, 0); }
#aiWrap.open #aiPanel { transform: translateY(0); }
.ai-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; }
.ai-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.ai-headbtns button { border: none; background: transparent; font-size: 17px; cursor: pointer; padding: 4px 6px; opacity: .75; }
.ai-headbtns button:active { transform: scale(.92); }
.ai-chips { display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; }
.ai-chips button { flex-shrink: 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.ai-chips button.on { background: #2E7D32; border-color: #2E7D32; color: #fff; font-weight: 600; }
.ai-msgs { flex: 1; overflow-y: auto; padding: 6px 16px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.ai-row { display: flex; }
.ai-row.me { justify-content: flex-end; }
.ai-row.ai { justify-content: flex-start; }
.ai-bubble { max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.55;
  word-break: break-word; position: relative; }
.ai-row.me .ai-bubble { background: #2E7D32; color: #fff; border-bottom-right-radius: 4px; }
.ai-row.ai .ai-bubble { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ai-typing { color: var(--ink-2); }
.ai-caret { display: inline-block; width: 2px; height: 14px; background: #2E7D32; margin-left: 2px; vertical-align: text-bottom; animation: aiBlink 1s steps(2) infinite; }
@keyframes aiBlink { 50% { opacity: 0; } }
.ai-speak { border: none; background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; padding: 2px 9px; margin-left: 8px; cursor: pointer; vertical-align: middle; }
.ai-empty { text-align: center; color: var(--ink-2); font-size: 14px; margin: 12vh auto 14px; line-height: 1.9; }
.ai-empty span { font-size: 12.5px; opacity: .8; }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-bottom: 10px; }
.ai-suggest button { border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.ai-suggest button:active { background: #E8F5E9; }
.ai-inputrow { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--card); }
.ai-inputrow textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 12px; font-size: 14px; font-family: inherit; background: var(--bg); color: var(--ink); max-height: 96px; }
.ai-inputrow textarea:focus { outline: none; border-color: #66BB6A; }
.ai-inputrow button { border: none; background: #2E7D32; color: #fff; border-radius: 12px; padding: 0 18px;
  font-size: 14px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.ai-inputrow button:disabled { opacity: .55; }
/* 深色模式适配（颜色变量随 html.dark 自动切换，硬编码色单独覆盖） */
html.dark .ai-chips button.on, html.dark .ai-inputrow button, html.dark .ai-row.me .ai-bubble { background: #43A047; border-color: #43A047; }
html.dark .ai-suggest button:active { background: #1B3A1F; }
/* AI 语音输入：麦克风按钮 */
.ai-mic { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 12px;
  width: 46px; flex-shrink: 0; font-size: 18px; cursor: pointer; }
.ai-mic.rec { background: #E53935; border-color: #E53935; color: #fff; animation: aiRecPulse 1.2s ease infinite; }
@keyframes aiRecPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,57,53,.45); } 50% { box-shadow: 0 0 0 7px rgba(229,57,53,0); } }
html.dark .ai-mic { background: #1E2430; }
html.dark .ai-mic.rec { background: #C62828; border-color: #C62828; }
/* AI 语音状态条 */
.ai-recstatus { display: none; align-items: center; gap: 8px; padding: 8px 14px; font-size: 12.5px;
  color: var(--ink-2); background: var(--bg); border-top: 1px dashed var(--line); }

/* ============================================================
 * 额度拦截弹窗（js/quota.js）层级：面板 450 < 本弹窗 490 < 更新弹窗 500
 * ============================================================ */
#quotaOverlay { position: fixed; inset: 0; z-index: 490; background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .25s ease; }
#quotaOverlay.open { opacity: 1; }
.q-card { background: var(--card); border-radius: 18px; max-width: 400px; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 22px 20px 18px; text-align: center; }
.q-badge { display: inline-block; background: #FFF3E0; color: #E65100; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; }
.q-title { font-size: 18px; font-weight: 800; color: var(--ink); margin: 4px 0 6px; }
.q-sub { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.q-steps { text-align: left; background: var(--bg); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.q-step { font-size: 13.5px; color: var(--ink); padding: 5px 0; line-height: 1.6; }
.q-step b { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; background: #2E7D32;
  color: #fff; border-radius: 50%; font-size: 12px; margin-right: 8px; }
.q-wx { font-weight: 800; color: #2E7D32; letter-spacing: .5px; }
.q-copy { border: 1px solid #2E7D32; color: #2E7D32; background: transparent; border-radius: 999px;
  font-size: 12px; padding: 2px 10px; margin-left: 6px; cursor: pointer; }
.q-qr { width: 148px; height: 148px; border-radius: 12px; border: 1px solid var(--line); margin: 4px auto 10px; display: block; }
.q-btn { background: #2E7D32; color: #fff; border: none; border-radius: 12px; padding: 12px 22px;
  font-size: 15px; font-weight: 700; cursor: pointer; }
.q-btn:active { transform: scale(.97); }
.q-dl { display: block; text-decoration: none; margin: 6px auto 4px; }
.q-coderow { display: flex; gap: 8px; margin-top: 12px; }
.q-coderow input { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  font-size: 14px; background: var(--bg); color: var(--ink); }
.q-coderow input:focus { outline: none; border-color: #66BB6A; }
.q-coderow .q-btn { padding: 10px 18px; }
.q-alt { font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }
.q-alt a { color: #2E7D32; font-weight: 600; }
.q-close { background: transparent; border: none; color: var(--ink-2); font-size: 13.5px;
  margin-top: 14px; cursor: pointer; text-decoration: underline; }
html.dark .q-badge { background: #3A2A10; color: #FFB74D; }

/* ============================================================
 * 深色模式对比度修复（v1.0.41）
 * 根因：深色下 --green 被调成浅绿 #66BB6A，所有"var(--green)底+白字"
 * 组合（按钮/选中芯片/步骤徽章/提示圆点）对比度仅 ~2.4（低于 3.0 下限）
 * ============================================================ */
html.dark .btn, html.dark .btn-sm, html.dark .ws-chip.on,
html.dark .newuser-tip .step-num, html.dark .snd-how i,
html.dark .ai-mic, html.dark .ai-inputrow button,
html.dark .ai-chips button.on, html.dark .ai-row.me .ai-bubble,
html.dark .q-btn, html.dark .su-btn { background: #2E7D32; color: #fff; border-color: #2E7D32; }
html.dark .wc-chunk { background: var(--green-light); color: var(--green-mid); }
html.dark .goals-card { background: var(--card); border-color: var(--line); }
html.dark .goals-card.done { background: var(--green-light); border-color: var(--green-mid); }
html.dark .goals-hint { color: var(--ink-2); }
html.dark #aiBall { color: #E8F5E9; }
html.dark .ai-headbtns button, html.dark .ai-speak { color: var(--ink); }
html.dark .settings-update-section .su-title { color: #A5D6A7; }

/* 深色对比度补丁②：--green-mid 深色下是 #81C784 浅绿，白字不可读的收尾修复 */
html.dark .hero-review .btn, html.dark .snd-how i,
html.dark .feedback-float-btn, html.dark .fab-feedback { background: #2E7D32; color: #fff; }
html.dark .snd-word.inlib i { color: var(--ink); }
html.dark .badge-yellow { background: rgba(255, 213, 79, .14); color: #FFD54F; }

/* 深色补丁③：新手引导卡浅绿渐变底 → 深色卡 */
html.dark .newuser-tip { background: var(--green-light); color: var(--ink); }
html.dark .newuser-tip b { color: var(--green-mid); }

/* ============================================================
 * 书架与阅读器 (js/shelf.js)
 * ============================================================ */
.sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-top: 12px; }
.sf-card { cursor: pointer; position: relative; }
.sf-cover { border-radius: 12px; border: 1px solid var(--line); padding: 14px 12px 12px; min-height: 170px;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  box-shadow: 0 3px 10px rgba(27,43,34,.1); transition: transform .15s; }
.sf-card:active .sf-cover { transform: scale(.97); }
.sf-fmt { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.35); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 6px; padding: 2px 7px; letter-spacing: 1px; }
.sf-title { font-size: 14px; font-weight: 800; color: #2B2B26; line-height: 1.45; margin-top: 22px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.sf-author { font-size: 11px; color: rgba(43,43,38,.6); margin-top: 6px; }
.sf-pbar { margin-top: auto; height: 4px; background: rgba(0,0,0,.12); border-radius: 99px; overflow: hidden; }
.sf-pbar i { display: block; height: 100%; background: #2E7D32; border-radius: 99px; }
.sf-pct { font-size: 10px; color: rgba(43,43,38,.55); margin-top: 4px; text-align: right; }
.sf-ops { display: flex; justify-content: center; margin-top: 6px; }
.sf-ops button { border: none; background: transparent; color: var(--ink-2); font-size: 12px; cursor: pointer;
  padding: 3px 10px; border-radius: 8px; }
.sf-ops button:active { background: var(--bg); }
.sf-tip { font-size: 12px; color: var(--ink-2); margin-top: 8px; line-height: 1.7; }
.sf-empty { text-align: center; color: var(--ink-2); font-size: 14px; padding: 40px 0 20px; line-height: 2; }
.sf-empty span { font-size: 12.5px; opacity: .8; }

/* 阅读器全屏层 */
#sfReader { position: fixed; inset: 0; z-index: 800; background: #F5ECD8; display: flex; flex-direction: column; }
.sr-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(0,0,0,.06);
  color: inherit; z-index: 2; }
.sr-top button { border: none; background: transparent; font-size: 18px; cursor: pointer; padding: 4px 10px;
  border-radius: 8px; }
.sr-top #srTitle { flex: 1; font-size: 14px; font-weight: 700; text-align: center; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sr-body { flex: 1; overflow: hidden; position: relative; }
.sr-body foliate-view { width: 100%; height: 100%; display: block; }
.sr-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0));
  background: rgba(0,0,0,.06); }
.sr-bar button { border: none; background: transparent; font-size: 22px; cursor: pointer; padding: 2px 14px; }
.sr-bar input[type=range] { flex: 1; accent-color: #2E7D32; }
.sr-progress { position: absolute; right: 16px; bottom: 64px; background: rgba(0,0,0,.45); color: #fff;
  font-size: 11px; border-radius: 999px; padding: 3px 10px; pointer-events: none; }
.sr-settings { position: absolute; top: 52px; right: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 30px rgba(0,0,0,.18); z-index: 3; }
.sr-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.sr-row span { font-size: 12.5px; color: var(--ink-2); width: 32px; }
.sr-row button { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px;
  font-size: 13px; padding: 5px 11px; cursor: pointer; }
.sr-row button.on { background: #2E7D32; border-color: #2E7D32; color: #fff; font-weight: 700; }
/* 自渲染文档分页 */
.sr-docpager { height: 100%; overflow: hidden; padding: 16px 0 24px; }
.sr-inner { height: 100%; column-fill: auto; box-sizing: content-box; padding: 0 22px;
  transition: transform .22s ease; overflow-wrap: break-word; }
.sr-inner h1, .sr-inner h2, .sr-inner h3 { line-height: 1.4; margin: 1.2em 0 .5em; }
.sr-inner h2 { border-bottom: 1px solid rgba(0,0,0,.12); padding-bottom: 6px; }
.sr-inner p { margin: .55em 0; text-align: justify; }
.sr-inner ul { margin: .5em 0; padding-left: 1.4em; }
.sr-inner li { margin: .3em 0; }
.sr-inner code { background: rgba(0,0,0,.07); border-radius: 4px; padding: 1px 5px; font-size: .9em; }
html.dark .sf-cover { border-color: var(--line); }
html.dark .sf-title { color: var(--ink); }
html.dark .sf-row button, html.dark .sr-row button { background: #1E2430; }
/* 阅读器全屏时隐藏应用层浮动件 */
body:has(#sfReader) .feedback-float-btn,
body:has(#sfReader) #aiBall,
body:has(#sfReader) #aiWrap,
body:has(#sfReader) #toastWrap { display: none !important; }

/* ============================================================
 * 全局查词卡 (js/lookup.js) — 层级 900（阅读器 800 之上）
 * ============================================================ */
#lkCard { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; max-width: 560px; margin: 0 auto;
  background: var(--card); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 34px rgba(0,0,0,.25);
  transform: translateY(108%); transition: transform .25s ease; max-height: 62vh; overflow-y: auto;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0)); }
#lkCard.open { transform: translateY(0); }
.lk-head { display: flex; align-items: center; gap: 10px; }
.lk-head > div { flex: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lk-word { font-size: 22px; font-weight: 900; color: var(--ink); }
.lk-cefr { background: #E8F5E9; color: #2E7D32; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 8px; }
.lk-speak, .lk-close { border: none; background: var(--bg); border: 1px solid var(--line); width: 34px; height: 34px;
  border-radius: 50%; font-size: 15px; cursor: pointer; flex-shrink: 0; }
.lk-ipa { color: #2E7D32; font-size: 14px; margin-top: 6px; }
.lk-pos { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; font-style: italic; }
.lk-sec { font-size: 11.5px; color: var(--ink-2); font-weight: 700; margin: 10px 0 3px; letter-spacing: 1px; }
.lk-def { font-size: 14px; color: var(--ink); line-height: 1.6; }
.lk-zh { font-size: 14.5px; color: var(--ink); font-weight: 600; line-height: 1.6; }
.lk-ex { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; font-style: italic; }
.lk-remote { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; padding: 4px 0; }
.lk-acts { display: flex; gap: 10px; margin-top: 14px; }
.lk-acts button { flex: 1; border: none; border-radius: 12px; padding: 11px 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.lk-collect { background: #2E7D32; color: #fff; }
.lk-ask { background: var(--bg); color: var(--ink); border: 1.5px solid var(--line); }
html.dark .lk-cefr { background: #1B3A1F; color: #A5D6A7; }

/* 目录抽屉（阅读器内） */
.sr-toc { position: absolute; left: 0; top: 0; bottom: 0; width: min(78vw, 320px); z-index: 3;
  background: var(--card); box-shadow: 6px 0 24px rgba(0,0,0,.2); display: none; flex-direction: column; }
.sr-toc-head { padding: 14px 16px 10px; font-weight: 800; font-size: 15px; color: var(--ink);
  border-bottom: 1px solid var(--line); }
.sr-toc-list { flex: 1; overflow-y: auto; padding: 6px 0 20px; }
.sr-toc-item { padding: 9px 14px; font-size: 13.5px; color: var(--ink); line-height: 1.5; cursor: pointer;
  border-bottom: 1px dashed var(--line); }
.sr-toc-item:active { background: var(--bg); }
.sr-toc-empty { padding: 24px 16px; color: var(--ink-2); font-size: 13px; text-align: center; }
.lk-src { font-size: 11px; color: var(--ink-2); margin-top: 8px; }
.lk-dlpack { background: #2E7D32; color: #fff; border: none; border-radius: 10px; padding: 10px 14px;
  font-size: 13px; font-weight: 700; cursor: pointer; margin-top: 8px; width: 100%; }
.lk-dlpack:disabled { opacity: .6; }

/* ============================================================
 * 阅读器 v1.3.1+ 样式补齐（章节名/亮度层/目录全宽背景/仿真卷页）
 * ============================================================ */
.sr-chap { position: absolute; top: 40px; left: 0; right: 0; text-align: center; font-size: 11px;
  color: var(--ink-2); pointer-events: none; z-index: 2; opacity: .85; padding: 0 30px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-dim { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sr-toc { position: absolute; inset: 0; z-index: 3; background: rgba(0,0,0,.35); display: none; flex-direction: column; }
.sr-toc-inner { width: min(78vw, 320px); height: 100%; background: var(--card); box-shadow: 6px 0 24px rgba(0,0,0,.2);
  display: flex; flex-direction: column; }
html.dark .sr-toc-inner { background: #1E2430; }

/* 仿真翻页：斜切剥离 + 折痕阴影带 + 页面微弯曲 */
.sr-curl { position: absolute; inset: 0; z-index: 5; overflow: hidden; }
.curl-front { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; background: #F5ECD8; }
.sr-curl.next .curl-front { animation: curlNextFront .44s ease-in forwards; }
@keyframes curlNextFront {
  0%   { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: translateX(0) skewY(0deg); filter: none; }
  55%  { clip-path: polygon(0% 0%, 46% 0%, 32% 100%, 0% 100%); transform: translateX(-4%) skewY(1.4deg); filter: brightness(.96); }
  100% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); transform: translateX(-8%) skewY(0deg); filter: brightness(.9); }
}
.sr-curl.prev .curl-front { animation: curlPrevFront .44s ease-out forwards; }
@keyframes curlPrevFront {
  0%   { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); transform: translateX(-8%) skewY(0deg); filter: brightness(.9); }
  55%  { clip-path: polygon(0% 0%, 46% 0%, 32% 100%, 0% 100%); transform: translateX(-4%) skewY(-1.4deg); filter: brightness(.96); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: translateX(0) skewY(0deg); filter: none; }
}
.curl-fold { position: absolute; top: 0; bottom: 0; width: 20%; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 55%, rgba(0,0,0,.26) 88%, rgba(0,0,0,.14) 100%); }
.sr-curl.next .curl-fold { animation: foldNext .44s ease-in forwards; }
@keyframes foldNext { 0% { left: 84%; opacity: 0; } 25% { opacity: 1; } 100% { left: -18%; opacity: 0; } }
.sr-curl.prev .curl-fold { animation: foldPrev .44s ease-out forwards; }
@keyframes foldPrev { 0% { left: -18%; opacity: 0; } 25% { opacity: 1; } 100% { left: 84%; opacity: 0; } }

/* 书架分组 tabs + 已读徽章 + 封面图 */
.sf-tabs { display: flex; gap: 8px; margin: 10px 0 4px; }
.sf-tabs button { border: 1.5px solid var(--line); background: var(--bg); color: var(--ink-2);
  border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.sf-tabs button.on { background: #2E7D32; border-color: #2E7D32; color: #fff; }
.sf-card { position: relative; }
.sf-fin { position: absolute; top: 10px; left: 10px; background: rgba(46,125,50,.92); color: #fff;
  font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 2px 8px; z-index: 2; letter-spacing: 1px; }
.sf-coverimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  border-radius: 12px; }
.sf-cover { position: relative; }
.sf-cover .sf-title, .sf-cover .sf-author, .sf-cover .sf-pct { position: relative; z-index: 1; }
.sf-cover.has-img .sf-title { background: rgba(0,0,0,.45); color: #fff; margin: 0 -12px; padding: 6px 12px; }
.sf-cover.has-img .sf-author { color: rgba(255,255,255,.85); margin: 4px -12px 0; padding: 0 12px; }
.sf-cover.has-img .sf-fmt { z-index: 2; }
.sf-cover.has-img .sf-pbar, .sf-cover.has-img .sf-pct { z-index: 2; }
.sf-cover.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55) 70%); }
.sf-cover.has-img .sf-title, .sf-cover.has-img .sf-author { z-index: 3; }
/* 听书按钮态 */
#srListen.on { background: #2E7D32; color: #fff; border-radius: 8px; }
/* 读完标记条 */
#srFinBar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #FFF8E1;
  color: #5D4037; font-size: 13px; flex-wrap: wrap; }
#srFinBar button { border: none; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
#srFinBar button:first-of-type { background: #2E7D32; color: #fff; }
#srFinBar button:last-of-type { background: transparent; color: #8D6E63; }
html.dark #srFinBar { background: #3A3020; color: #D7CCC8; }

/* 听书模式页（全屏，阅读器主题色之上） */
#listenMode { position: fixed; inset: 0; z-index: 860; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #173B1C, #0D2412); color: #E8F5E9;
  padding: 14px 18px calc(24px + env(safe-area-inset-bottom, 0)); }
.lm-head { display: flex; align-items: center; justify-content: space-between; }
.lm-head button { border: 1px solid rgba(255,255,255,.3); background: transparent; color: #C8E6C9;
  border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.lm-cap { font-size: 14px; font-weight: 800; letter-spacing: 2px; color: #A5D6A7; }
.lm-book { text-align: center; font-size: 13px; color: #81C784; margin: 8px 0 4px; font-weight: 600; }
.lm-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 4px; }
.lm-sent { font-size: 21px; line-height: 2; text-align: center; color: #fff; font-weight: 600;
  max-width: 480px; transition: opacity .2s; }
.lm-sent.paused { color: #9E9E9E; }
.lm-meta { text-align: center; font-size: 12px; color: #81C784; padding: 8px 0; }
.lm-ctrl { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 6px 0 10px; }
.lm-ctrl button { border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 20px;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer; }
.lm-ctrl .lm-playbtn { width: 76px; height: 76px; font-size: 30px; background: linear-gradient(135deg, #43A047, #66BB6A);
  box-shadow: 0 6px 20px rgba(67,160,71,.45); }
.lm-ctrl button:active { transform: scale(.94); }
.lm-speed { display: flex; justify-content: center; gap: 12px; padding-bottom: 6px; }
.lm-speed button { border: 1px solid rgba(255,255,255,.25); background: transparent; color: #C8E6C9;
  border-radius: 999px; padding: 5px 16px; font-size: 12.5px; cursor: pointer; }
.lm-speed button.on { background: #43A047; border-color: #43A047; color: #fff; font-weight: 700; }
.lm-engine { text-align: center; font-size: 12px; color: #FFB74D; min-height: 18px; padding: 4px 10px 0; }

/* AI 今日计划卡 + 周报卡 */
.ai-plan-card { background: linear-gradient(135deg, #EDE7F6, #E8EAF6); border: 1px solid #B39DDB;
  border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; }
.ai-plan-head { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px;
  font-weight: 800; color: #4527A0; margin-bottom: 6px; }
.ai-plan-head button { border: 1px solid #B39DDB; background: transparent; color: #5E35B1;
  border-radius: 999px; font-size: 11.5px; padding: 3px 10px; cursor: pointer; }
.ai-plan-focus { font-size: 14px; font-weight: 700; color: #311B92; margin-bottom: 6px; }
.ai-plan-items { margin: 4px 0 6px; padding-left: 18px; }
.ai-plan-items li { font-size: 13px; color: #37474F; line-height: 1.75; }
.ai-plan-tip { font-size: 12px; color: #5E35B1; background: rgba(255,255,255,.6); border-radius: 8px; padding: 6px 10px; }
.ai-weekly-btn { background: #5E35B1; color: #fff; border: none; border-radius: 999px;
  padding: 10px 22px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 6px; }
.ai-weekly-btn:active { transform: scale(.97); }
html.dark .ai-plan-card { background: #23203A; border-color: #5E35B1; }
html.dark .ai-plan-head { color: #B39DDB; }
html.dark .ai-plan-focus { color: #D1C4E9; }
html.dark .ai-plan-items li { color: #B0BEC5; }
html.dark .ai-plan-tip { background: rgba(255,255,255,.06); color: #B39DDB; }

/* 阅读器已学词高亮 */
.vw-known { background: rgba(102,187,106,.18); border-bottom: 1.5px dotted #66BB6A; cursor: pointer; }
.vw-known:hover { background: rgba(102,187,106,.3); }

/* 词族展开 */
.word-family { margin-top: 8px; padding: 6px 0; }
.wf-cap { font-size: 11.5px; color: #2E7D32; font-weight: 700; margin-right: 6px; }
.wf-tag { display: inline-block; background: #E8F5E9; color: #2E7D32; border-radius: 6px;
  padding: 2px 8px; font-size: 12px; margin: 2px 4px 2px 0; }
html.dark .wf-tag { background: #1B3A1F; color: #81C784; }

/* 书架内置书下载 */
.sf-builtin { margin: 8px 0 4px; }
.sf-dl-btn { background: linear-gradient(135deg, #43A047, #66BB6A); color: #fff; border: none;
  border-radius: 12px; padding: 12px 20px; font-size: 14px; font-weight: 700; cursor: pointer;
  width: 100%; box-shadow: 0 3px 12px rgba(67,160,71,.3); }
.sf-dl-btn:active { transform: scale(.97); }
.sf-dl-btn:disabled { opacity: .6; }
.sf-dl-status { font-size: 12px; color: var(--ink-2); margin-top: 6px; text-align: center; }

/* ---------- 词汇量测试 ---------- */
.vt-modal { position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; flex-direction:column; padding:20px 18px calc(24px + env(safe-area-inset-bottom)); overflow-y:auto; }
.vt-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.vt-progress-num { font-size:13px; color:var(--ink-2); font-weight:700; }
.vt-cefr { font-size:12px; font-weight:800; color:var(--green); background:#E8F5E9; border-radius:999px; padding:4px 14px; }
.vt-progress { height:8px; background:var(--line); border-radius:99px; overflow:hidden; margin-bottom:30px; }
.vt-progress i { display:block; height:100%; background:linear-gradient(90deg,#2E7D32,#43A047); border-radius:99px; transition:width .35s ease; }
.vt-word-card { background:var(--card); border:1px solid var(--line); border-radius:22px; text-align:center; padding:46px 16px 40px; margin-bottom:32px; box-shadow:0 10px 28px rgba(27,43,34,.07); }
.vt-word { font-size:42px; font-weight:900; letter-spacing:1px; color:var(--ink); }
.vt-ipa { margin-top:10px; color:var(--ink-2); font-size:16px; font-family:Georgia,"Times New Roman",serif; }
.vt-opts { display:flex; flex-direction:column; gap:12px; }
.vt-opt { display:flex; align-items:center; gap:14px; width:100%; background:var(--card); border:2px solid var(--line); border-radius:16px; padding:15px 18px; font-size:16.5px; font-weight:600; color:var(--ink); text-align:left; transition:border-color .15s, background .15s, transform .08s; }
.vt-opt:active { transform:scale(.985); }
.vt-letter { flex-shrink:0; width:34px; height:34px; border-radius:11px; background:#E8F5E9; color:var(--green); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; }
.vt-opt.is-right { border-color:#2E7D32; background:#E8F5E9; }
.vt-opt.is-right .vt-letter { background:#2E7D32; color:#fff; }
.vt-opt.is-wrong { border-color:#E53935; background:#FDECEA; }
.vt-opt.is-wrong .vt-letter { background:#E53935; color:#fff; }
.vt-opt:disabled { cursor:default; }
.vt-fb { text-align:center; font-weight:800; font-size:16px; margin-top:20px; min-height:24px; }
.vt-fb.ok { color:#2E7D32; } .vt-fb.no { color:#E53935; }
.vt-result { text-align:center; padding:80px 20px 40px; }
.vt-result-num { font-size:76px; font-weight:900; color:#2E7D32; line-height:1.2; }
.vt-result-lbl { color:var(--ink-2); font-size:14px; margin:8px 0 38px; }
.vt-result-actions { display:flex; flex-direction:column; gap:12px; align-items:center; max-width:320px; margin:0 auto; }
.vt-band-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 22px; max-width:340px; margin:0 auto 8px; text-align:left; }
.vt-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.vt-topbtns { display:flex; gap:10px; }
.vt-close, .vt-speak { width:40px; height:40px; border-radius:13px; border:1px solid var(--line); background:var(--card); font-size:16px; cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(27,43,34,.06); }
.vt-speak { color:var(--green); }
.vt-close { color:var(--ink-2); }
.vt-close:active, .vt-speak:active { transform:scale(.92); }

/* ---------- B2+ 进阶词库 ---------- */
.b2-card { border-left: 4px solid #FF7043; }
.b2-card .card-title { color: #E64A19; }
.b2-bar-wrap { display: flex; align-items: center; gap: 14px; margin: 10px 0 8px; }
.b2-bar { flex: 1; height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.b2-bar i { display: block; height: 100%; border-radius: 99px; transition: width .4s; }
.b2-count { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.b2-count b { font-size: 20px; color: #E64A19; }
.b2-hint { font-size: 14px; color: var(--ink-2); margin: 8px 0; }