* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, #e8f0ff 0%, #fff5e6 100%);
  color: #333;
  -webkit-tap-highlight-color: transparent;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
}

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.btn-back { border: none; background: #eef4ff; color: #4facfe; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.btn-back[hidden] { display: none; }
.btn-back:active { transform: scale(.94); }
.title { font-size: 20px; font-weight: 700; color: #2c3e50; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.btn-sound {
  border: none; background: #eef4ff; color: #4facfe;
  width: 32px; height: 32px; border-radius: 50%; font-size: 16px; line-height: 1;
  cursor: pointer; transition: transform .08s ease, background .15s;
}
.btn-sound:active { transform: scale(.88); }
.btn-sound.on { background: linear-gradient(135deg, #4facfe, #00c6fb); color: #fff; }
.progress-text { font-size: 14px; color: #7f8c8d; }

/* 积分徽章 */
.score-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 14px; font-weight: 700; color: #b8860b;
  background: linear-gradient(135deg, #fff3cd, #ffe08a);
  border: 1px solid #ffd86f;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(255, 200, 40, .35);
}
.score-badge.bump { animation: score-bump .55s cubic-bezier(.2,1.5,.4,1); }
@keyframes score-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.5) rotate(-6deg); }
  70% { transform: scale(1.35) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* PWA 安装引导条：安静静态，最小干扰，可关闭 */
.pwa-hint {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 4px; padding: 8px 12px;
  background: #eef6ff; border: 1px solid #cfe3ff; border-radius: 12px;
  font-size: 13px; color: #2c5282; line-height: 1.4;
}
.pwa-hint[hidden] { display: none; }
.pwa-hint-icon { font-size: 16px; flex-shrink: 0; }
.pwa-hint-text { flex: 1; }
.pwa-hint-action {
  border: none; cursor: pointer; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, #4facfe, #00c6fb);
  border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 700;
}
.pwa-hint-action:active { transform: scale(.94); }
.pwa-hint-action[hidden] { display: none; }
.pwa-hint-close {
  border: none; background: transparent; color: #9aa5b1;
  width: 24px; height: 24px; border-radius: 50%; font-size: 18px; line-height: 1;
  cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.pwa-hint-close:hover { background: #dde6f0; color: #555; }

.progress-bar { height: 8px; background: #e0e6ed; border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #4facfe, #43e97b); transition: width .3s ease; }

.card-stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 380px; }

.card {
  width: 100%;
  min-height: 380px;
  position: relative;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f0f6ff 100%);
  border: 2px solid #d6e4ff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 20px;
}

.view { display: flex; flex-direction: column; align-items: center; text-align: center; }
.view[hidden] { display: none; }

/* 学习会话 HUD：组进度 / 阶段 / 词状态点 */
.session-hud {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid #d6e4ff; border-radius: 14px;
  padding: 8px 14px; margin-bottom: 10px; font-size: 13px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
/* 学习阶段/进度信息条整块隐藏，避免分散专注力（学习数据照常记录） */
.session-hud { display: none !important; }
/* 学习卡片左上的「🆕 初次学习（…遍）」小胶囊同样隐藏 */
.phase-tag { display: none !important; }
.hud-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 11px; font-weight: 800;
  background: #e3e8ef; color: #9aa5b1;
}
.hud-dot.state-learning { background: #d6eaff; color: #1976d2; }
.hud-dot.state-learned { background: #fff3cd; color: #b58900; }
.hud-dot.state-relearning { background: #ffe0e0; color: #d32f2f; }
.hud-dot.state-reviewing { background: #e6dcff; color: #6a35d6; }
.hud-dot.state-passed { background: linear-gradient(135deg, #43e97b, #38d976); color: #fff; }

/* 学习页阶段提示条 */
.phase-tag {
  font-size: 12px; font-weight: 700; color: #1976d2;
  background: #e3f2fd; border: 1px solid #90caf9;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
}
.phase-tag.relearn { color: #d32f2f; background: #ffebee; border-color: #ef9a9a; }
.phase-tag[hidden] { display: none; }

/* 倒计时：安静的环形进度条，不显数字，避免跳动秒数分散注意力；
   平时蓝色，临近结束变黄（timer-warn）、变红（timer-urgent） */
.timer {
  align-self: flex-end;
  width: 30px; height: 30px;
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
}
.timer-ring { width: 30px; height: 30px; }
.ring-track { fill: none; stroke: #e3eaf2; stroke-width: 3; }
.ring-prog {
  fill: none; stroke: #4facfe; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 75.4;
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
  transition: stroke-dashoffset .22s linear;
}
.timer.timer-warn .ring-prog { stroke: #f5a623; }
.timer.timer-urgent .ring-prog { stroke: #ff5252; animation: ringPulse 1s infinite; }
@keyframes ringPulse { 50% { stroke-width: 4.6; } }

.word { font-size: 40px; font-weight: 800; color: #2c3e50; letter-spacing: 1px; }
.phonetic-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.phonetic { font-size: 18px; color: #6c7a89; }
.btn-speak { border: none; background: linear-gradient(135deg, #4facfe, #00c6fb); color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; transition: transform .08s ease; }
.btn-speak:active { transform: scale(.85); }
/* 学习页自动朗读开关：开启=绿色脉动，暂停=灰色 */
.btn-auto-speak {
  border: none; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s;
  background: #e6f9ee; color: #2e7d32;
}
.btn-auto-speak.on {
  background: linear-gradient(135deg, #43e97b, #38d976); color: #fff;
  animation: speak-pulse 1.6s ease-in-out infinite;
}
.btn-auto-speak.paused { background: #f0f2f5; color: #95a5b3; }
@keyframes speak-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(67, 233, 123, .5); }
  50% { box-shadow: 0 0 0 6px rgba(67, 233, 123, 0); }
}
.mnemonic { margin-top: 12px; padding: 8px 12px; background: #fff3cd; border: 1px dashed #ffc107; border-radius: 10px; font-size: 13px; color: #856404; max-width: 90%; }
/* 变形词库学习卡：突出 原形 → 变形（如 go → went），静态无动画 */
.transform-row {
  margin-top: 8px; display: flex; align-items: center; gap: 8px;
  font-size: 26px; font-weight: 700; color: #2c3e50; max-width: 90%;
}
.transform-row .tr-tag {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: #e8f4fd; color: #2471a3; border: 1px solid #aed6f1;
}
.transform-row .tr-form { color: #e67e22; }
.meaning-small { margin-top: 10px; font-size: 18px; font-weight: 600; color: #e67e22; }
.example { margin-top: 8px; font-size: 14px; color: #555; line-height: 1.5; }
.example-cn { font-size: 12px; color: #999; margin-top: 4px; }

/* 跳过学习页 / 恢复学习页 小按钮：不抢眼，放角落 */
.btn-skip-study, .btn-show-study {
  border: none; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s;
  background: #f0f2f5; color: #7f8c9b; margin-top: 12px;
}
.btn-skip-study:hover { background: #e0e4e9; color: #555; }
.btn-show-study { margin-top: 8px; }
.btn-show-study:hover { background: #e0e4e9; color: #555; }

/* 跟读打分（体验版）：安静的绿色小按钮，录音中轻微脉动提示在听 */
.pronounce-box { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.btn-pronounce {
  border: none; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #43e97b, #38d976);
  border-radius: 999px; padding: 9px 26px; font-size: 15px; font-weight: 700;
  box-shadow: 0 3px 10px rgba(67,233,123,.35); transition: transform .08s ease;
}
.btn-pronounce:active { transform: scale(.94); }
.btn-pronounce.recording {
  background: linear-gradient(135deg, #ffa726, #fb8c00);
  box-shadow: 0 3px 10px rgba(251,140,0,.4);
  animation: speak-pulse 1.4s ease-in-out infinite;
  max-width: 92%;
}
.pronounce-footnote { font-size: 11px; color: #aab4c0; line-height: 1.4; }
.pronounce-result {
  width: 100%; max-width: 320px; margin-top: 4px;
  border-radius: 14px; padding: 12px 14px; text-align: center;
  background: #eafaf1; border: 1.5px solid #b7eccb;
}
.pronounce-result.warn { background: #fff6e8; border-color: #ffd9a0; color: #a0620c; font-size: 13px; }
.pr-score { font-size: 40px; font-weight: 800; color: #1f9d57; line-height: 1; }
.pr-score span { font-size: 15px; font-weight: 700; margin-left: 2px; }
.pr-stars { font-size: 19px; margin: 4px 0 2px; letter-spacing: 2px; }
.pr-msg { font-size: 14px; font-weight: 700; color: #2c3e50; }
.pr-heard { font-size: 11px; color: #8a97a5; margin-top: 5px; word-break: break-word; }

.write-hint { font-size: 13px; color: #a0a8b3; margin-bottom: 8px; line-height: 1.5; }
/* 默写页手动重播：纯听音题（听音选中/选中文）唯一的输入通道，按钮加大 */
.btn-write-speak {
  display: block; margin: 0 auto 10px;
  border: none; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #4facfe, #00c6fb);
  border-radius: 999px; padding: 8px 22px; font-size: 15px; font-weight: 700;
  box-shadow: 0 3px 10px rgba(79,172,254,.4); transition: transform .08s ease;
}
.btn-write-speak:active { transform: scale(.92); }
.btn-write-speak.big { padding: 14px 40px; font-size: 20px; margin: 14px auto 18px; }
.streak-badge {
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #43e97b, #38d976);
  padding: 4px 14px; border-radius: 999px; margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(67,233,123,.35);
}
.streak-badge.streak-warn { background: linear-gradient(135deg, #ffd86f, #ffa726); box-shadow: 0 2px 8px rgba(255,167,38,.35); }

/* 答案槽：用户已选字母排到这里 */
.answer-slot {
  width: 100%; min-height: 52px; margin-bottom: 14px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  padding: 8px; border: 2px dashed #d6e4ff; border-radius: 12px; background: #fbfdff;
}
.answer-slot.empty::before { content: none; }
.answer-slot[hidden], .letter-grid[hidden] { display: none; }
.answer-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 40px; border-radius: 8px;
  background: #4facfe; color: #fff; font-size: 20px; font-weight: 700;
  cursor: pointer; transition: transform .08s ease, background .15s;
}
.answer-letter.blank {
  background: #f4f8ff; border: 2px dashed #c4d8f7; cursor: default;
}
.answer-letter:not(.blank):active { transform: scale(.9); }
.answer-letter.filled-correct { background: #38d976; }
.answer-letter.filled-wrong { background: #ff5252; }

/* 字母乱序按钮 */
.letter-grid {
  width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 18px;
}
.letter-btn {
  width: 42px; height: 48px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #ffffff, #eaf2ff);
  border: 1.5px solid #b9d2ff; color: #2c3e50;
  font-size: 22px; font-weight: 700; cursor: pointer;
  transition: transform .08s ease, opacity .15s;
  box-shadow: 0 2px 4px rgba(79,172,254,.18);
}
.letter-btn:active { transform: scale(.92); }
.letter-btn.used { opacity: .25; pointer-events: none; }

/* 中文 4 选项 */
.meaning-options {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 6px;
}
.option-btn {
  border: 2px solid #d6e4ff; border-radius: 12px; padding: 12px 8px;
  background: #fff; color: #2c3e50; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: transform .08s ease, background .15s, border-color .15s;
}
.option-btn:active { transform: scale(.95); }
.option-btn.selected { background: #eef4ff; border-color: #4facfe; }
.option-btn.correct { background: #d4f8e0; border-color: #38d976; color: #1e8e4a; }
.option-btn.wrong { background: #ffe0e0; border-color: #ff5252; color: #c0392b; }
.option-btn.disabled { pointer-events: none; opacity: .6; }

/* 主动回忆模式：英文单词显示在选项上方，建立"看英文→想中文"视觉联系 */
.recall-area {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  margin-bottom: 10px;
}
.recall-area[hidden] { display: none; }
.recall-word {
  font-size: 36px; font-weight: 800; color: #2c3e50; letter-spacing: 1px;
}
/* recall cn2en 子模式：题面是中文释义，字号稍小 */
.recall-word.prompt-cn {
  font-size: 26px; font-weight: 700; letter-spacing: 0;
}
/* recall abcd 子模式：题面是例句挖空（可能含中文翻译多行），紧凑显示 */
.recall-word.prompt-abcd {
  font-size: 17px; font-weight: 500; letter-spacing: 0;
  line-height: 1.6; white-space: pre-line; max-width: 92%; text-align: center;
}
.btn-recall-ready[hidden] { display: none; }

/* 音标词库（phonics）：题面符号与符号选项加大，静态无动画 */
.recall-word.phonics-sym { font-size: 52px; color: #2471a3; }
.option-btn.phonics-opt { font-size: 30px; font-weight: 700; letter-spacing: 1px; }

/* ===== 游戏子模式：消消乐 + 连线 ===== */
.game-area {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  margin-bottom: 12px;
}
.game-area[hidden] { display: none; }

/* 消消乐：3 对 6 张卡片，2 列 3 行布局（手机一屏可见） */
.cards-grid {
  width: 100%; max-width: 240px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.xms-card {
  aspect-ratio: 1 / 0.85; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #4facfe, #667eea);
  color: #fff; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; padding: 2px; text-align: center;
  transition: transform .15s ease, background .2s, border-color .15s;
  box-shadow: 0 2px 6px rgba(79,172,254,.3);
  -webkit-tap-highlight-color: transparent;
  word-break: break-word; overflow: hidden;
}
.xms-card:active { transform: scale(.95); }
.xms-card.flipped {
  background: #fff; color: #2c3e50;
  border: 2px solid #b9d2ff;
}
.xms-card.matched {
  background: #d4f8e0; color: #1e8e4a; border: 2px solid #38d976;
  pointer-events: none; opacity: .65;
  animation: card-pop .4s ease;
}
.xms-card.wrong {
  background: #ffe0e0; color: #c0392b; border: 2px solid #ff5252;
}
@keyframes card-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* 连线：左右两列（4 对，手机一屏可见） */
.match-cols {
  width: 100%; max-width: 340px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.match-col { display: flex; flex-direction: column; gap: 8px; }
.match-item {
  padding: 8px 6px; border: 2px solid #d6e4ff; border-radius: 10px;
  background: #fff; color: #2c3e50; font-size: 13px; font-weight: 600;
  text-align: center; cursor: pointer; min-height: 38px;
  transition: transform .08s ease, background .15s, border-color .15s;
  word-break: break-word;
  -webkit-tap-highlight-color: transparent;
}
.match-item:active { transform: scale(.95); }
.match-item.selected { background: #eef4ff; border-color: #4facfe; }
.match-item.matched {
  background: #d4f8e0; border-color: #38d976; color: #1e8e4a;
  pointer-events: none;
}
.match-item.wrong { background: #ffe0e0; border-color: #ff5252; color: #c0392b; }

.write-feedback { margin-top: 10px; font-size: 16px; font-weight: 600; min-height: 22px; white-space: pre-line; line-height: 1.6; }
.write-feedback.correct { color: #38d976; }
.write-feedback.wrong { color: #ff5252; }
/* 答后正确答案醒目展示：置顶大字+鲜艳红色，吸引孩子注意，加深音形义印象（无动画） */
.answer-reveal {
  margin: 4px auto 8px; padding: 10px 16px; max-width: 560px;
  font-size: 26px; font-weight: 800; line-height: 1.4; text-align: center;
  color: #e8003d; background: #fff3f5; border: 2px solid #ffb3c2; border-radius: 12px;
  word-break: break-word;
}
.answer-reveal .ar-meaning { display: block; margin-top: 4px; font-size: 18px; font-weight: 700; color: #b27800; }
@media (max-width: 560px) {
  .answer-reveal { font-size: 22px; padding: 8px 12px; }
  .answer-reveal .ar-meaning { font-size: 16px; }
}
.btn-replay { border: none; background: linear-gradient(135deg, #4facfe, #00c6fb); color: #fff; padding: 10px 20px; border-radius: 999px; font-size: 14px; cursor: pointer; margin-bottom: 14px; transition: transform .08s ease; }
.btn-replay:active { transform: scale(.92); }

/* ===== 大奖励特效层（连续 3 遍全对）===== */
.reward-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden;
}
.reward-overlay[hidden] { display: none; }
.reward-pop {
  display: flex; flex-direction: column; align-items: center;
  animation: reward-pop-in .9s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.reward-emoji {
  font-size: 76px; line-height: 1;
  filter: drop-shadow(0 6px 16px rgba(245,159,0,.5));
  animation: reward-trophy-bounce 1s ease infinite alternate;
}
.reward-word {
  margin-top: 6px;
  font-size: 60px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(90deg, #ff6b9d, #ffa94d, #ffd43b, #69db7c, #4dabf7, #b197fc, #ff6b9d);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: reward-gradient-flow 1.2s linear infinite;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.15));
}
.reward-points {
  margin-top: 10px;
  font-size: 30px; font-weight: 800; color: #f59f00;
  text-shadow: 0 2px 12px rgba(245,159,0,.45);
  animation: reward-points-rise 1.7s ease forwards;
}
@keyframes reward-pop-in {
  0% { transform: scale(0) rotate(-12deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes reward-trophy-bounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-10px) scale(1.06); }
}
@keyframes reward-gradient-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes reward-points-rise {
  0% { opacity: 0; transform: translateY(24px) scale(.6); }
  20% { opacity: 1; transform: translateY(0) scale(1.2); }
  65% { opacity: 1; transform: translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateY(-64px) scale(.95); }
}
/* 彩带粒子：从屏幕中心向四周爆开 */
.confetti {
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px;
  background: var(--color);
  animation: confetti-burst 1.5s ease-out forwards;
}
@keyframes confetti-burst {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(720deg) scale(.4); opacity: 0; }
}

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.actions[hidden] { display: none; }
.btn { border: none; border-radius: 14px; padding: 14px 6px; font-size: 15px; font-weight: 600; cursor: pointer; color: #fff; transition: transform .08s ease; }
.btn:active { transform: scale(.95); }
.btn-unknown { background: linear-gradient(135deg, #ff8a80, #ff5252); }
.btn-known { background: linear-gradient(135deg, #43e97b, #38d976); }

.summary { text-align: center; padding: 40px 0; }
.summary-title { font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.summary-stat { font-size: 15px; color: #555; margin-bottom: 22px; line-height: 2; }
.stat-line { white-space: nowrap; }
.btn-restart { background: linear-gradient(135deg, #4facfe, #00c6fb); padding: 14px 28px; margin: 0 auto; }
.btn-next-group {
  display: block; background: linear-gradient(135deg, #43e97b, #38d976);
  color: #fff; font-weight: 800; padding: 14px 28px; margin: 0 auto 12px;
  border-radius: 14px; font-size: 16px;
}
.btn-next-group[hidden] { display: none; }
.btn-back-lib { display: block; margin: 12px auto 0; background: #eef4ff; color: #4facfe; padding: 10px 24px; }

/* ===== 单词库：选册 ===== */
.library { width: 100%; }
.library[hidden] { display: none; }
.library-head { text-align: center; margin: 6px 0 18px; }
.library-title { font-size: 22px; font-weight: 800; color: #2c3e50; }
.library-sub { font-size: 13px; color: #95a5a6; margin-top: 6px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.library-body { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.stage-tabs {
  display: flex; flex-direction: row; gap: 8px;
  position: sticky; top: 8px; z-index: 5;
  background: #eef4ff; padding: 6px; border-radius: 14px;
}
.stage-tab {
  flex: 1; min-height: 42px; border: 1.5px solid #dce6f0; border-radius: 10px;
  background: #f5f8fb; color: #5b6b7b; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
  display: flex; align-items: center; justify-content: center;
}
.stage-tab:active { transform: scale(.94); }
.stage-tab.active {
  border-color: #4facfe; background: linear-gradient(135deg, #4facfe, #00c6fb);
  color: #fff; box-shadow: 0 4px 12px rgba(79,172,254,.3);
}
.library-main { flex: 1; min-width: 0; }
.library-empty {
  text-align: center; color: #95a5a6; font-size: 14px; line-height: 1.6;
  padding: 40px 12px; border: 2px dashed #dce6f0; border-radius: 14px; background: #fbfdff;
}
.book-card {
  border: 2px solid #d6e4ff; border-radius: 18px; padding: 18px 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f0f6ff 100%);
  cursor: pointer; text-align: center;
  box-shadow: 0 6px 18px rgba(79,172,254,.10);
  transition: transform .1s ease, box-shadow .2s, border-color .2s;
}
.book-card:active { transform: scale(.96); }
.book-card:hover { border-color: #4facfe; box-shadow: 0 8px 22px rgba(79,172,254,.22); }
.book-emoji { font-size: 34px; }
.book-name { font-size: 17px; font-weight: 700; color: #2c3e50; margin-top: 6px; }
.book-semester { font-size: 12px; color: #8fa3b8; margin-top: 2px; }
.book-progress { margin-top: 10px; height: 6px; background: #e6edf5; border-radius: 999px; overflow: hidden; }
.book-progress-fill { height: 100%; background: linear-gradient(90deg, #43e97b, #38d976); width: 0%; transition: width .4s; }
.book-progress-text { font-size: 12px; color: #7f8c8d; margin-top: 5px; }

/* 手机端：左侧学段标签占约 64px，auto-fill 会退化成 1 列；强制 2 列并压缩卡片 */
@media (max-width: 560px) {
  /* 顶栏两行：标题独占第一行横排居中并更靠近顶部，返回+控件在第二行，
     避免一行元素太多把「单词速记」挤成竖排 */
  .app { padding-top: 10px; }
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .title {
    order: -1; width: 100%; text-align: center;
    font-size: 17px; line-height: 1.2; white-space: nowrap;
  }
  .topbar-right { gap: 8px; margin-left: auto; }
  .book-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .book-card { padding: 12px 8px; border-radius: 14px; }
  .book-emoji { font-size: 26px; }
  .book-name { font-size: 14px; margin-top: 4px; line-height: 1.35; }
  .book-semester { font-size: 11px; }
  .book-progress { margin-top: 8px; }
  .book-progress-text { font-size: 11px; margin-top: 4px; }
}

/* ===== 单词库：选单元 ===== */
.unit-picker { width: 100%; }
.unit-picker[hidden] { display: none; }
.unit-picker-head { text-align: center; margin: 6px 0 14px; }
.units-head-row { display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; }
.units-head-row .deck-tool-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.units-head-row .deck-tool-btn:active { transform: translateY(-50%) scale(.94); }
.unit-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.unit-row {
  border: 2px solid #d6e4ff; border-radius: 14px;
  background: #fff; overflow: hidden; transition: border-color .15s, background .15s;
}
.unit-row.checked { border-color: #4facfe; background: #f0f7ff; }
.unit-row.some { border-color: #9cc7ff; background: #f7fbff; }
.unit-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer;
}
.unit-head:active { transform: scale(.99); }
.unit-chevron {
  width: 18px; flex: none; text-align: center;
  color: #8fa3b8; font-size: 10px; transition: transform .18s ease;
}
.unit-row.expanded .unit-chevron { transform: rotate(90deg); }
.unit-check {
  width: 22px; height: 22px; border-radius: 7px; border: 2px solid #b9cdea;
  flex: none; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800;
}
.unit-row.checked .unit-check { background: linear-gradient(135deg, #4facfe, #00c6fb); border-color: #4facfe; }
.unit-row.some .unit-check { background: #9cc7ff; border-color: #9cc7ff; }
.unit-info { flex: 1; min-width: 0; }
.unit-no { font-size: 12px; color: #8fa3b8; font-weight: 600; }
.unit-name { font-size: 15px; font-weight: 700; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-meta { font-size: 12px; color: #95a5a6; flex: none; }

/* 展开后的单词胶囊 */
.unit-words {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 2px 14px 14px 42px;
}
.words-loading { font-size: 12px; color: #b0bec5; padding: 2px 0; }
.word-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1.5px solid #d6e4ff; border-radius: 999px;
  padding: 4px 8px 4px 7px; background: #fff;
  font-size: 13px; cursor: pointer; max-width: 100%;
  transition: border-color .12s, background .12s;
}
.word-chip:active { transform: scale(.96); }
.word-chip.checked { border-color: #4facfe; background: #eaf4ff; }
.chip-check {
  width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #b9cdea;
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; line-height: 1;
}
.word-chip.checked .chip-check { background: #4facfe; border-color: #4facfe; }
.chip-en { font-weight: 700; color: #2c3e50; }
.chip-cn { color: #8fa3b8; font-size: 12px; }
.chip-known { font-size: 11px; }
.chip-speak {
  flex: none; padding: 0 1px; font-size: 12px; opacity: .7;
  border-radius: 50%;
}
.chip-speak:active { opacity: 1; transform: scale(1.15); }
/* 默写方式选择：选中文意思 / 拼写单词 */
.mode-select { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
.mode-select[hidden] { display: none; }
.mode-label { font-size: 14px; font-weight: 600; color: #5b6b7b; white-space: nowrap; }
.mode-btns { display: flex; gap: 8px; flex: 1; }
.mode-btn {
  flex: 1; height: 40px; border: 1.5px solid #dce6f0; border-radius: 10px;
  background: #f5f8fb; color: #5b6b7b; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.mode-btn.active {
  border-color: #43e97b; background: #43e97b; color: #fff;
  box-shadow: 0 4px 12px rgba(67, 233, 123, .3);
}

.unit-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.btn-select-all { background: #eef4ff; color: #4facfe; }
.btn-start { background: linear-gradient(135deg, #43e97b, #38d976); }
.btn-start:disabled { opacity: .5; filter: grayscale(.4); }

/* 短语答案槽：单词间间隙与固定标点 */
.ans-gap { display: inline-block; width: 14px; }
.ans-fixed { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 40px; font-size: 20px; font-weight: 700; color: #b08a4a; }

/* ===== 词库：我的单词本分区 ===== */
.library-section { margin-top: 22px; }
.library-section-title {
  font-size: 15px; font-weight: 800; color: #2c3e50;
  margin: 0 2px 12px; display: flex; align-items: center; gap: 8px;
}
.library-section-title::before {
  content: ""; width: 4px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, #b197fc, #845ef7);
}
.custom-card {
  border-color: #e0d3ff;
  background: linear-gradient(135deg, #ffffff 0%, #f4f0ff 100%);
  box-shadow: 0 6px 18px rgba(132,94,247,.10);
}
.custom-card:hover { border-color: #845ef7; box-shadow: 0 8px 22px rgba(132,94,247,.22); }
.custom-card .book-progress-fill { background: linear-gradient(90deg, #b197fc, #845ef7); }
.deck-new-card {
  border-style: dashed; border-color: #b9a8f0;
  background: #faf8ff; box-shadow: none;
  display: flex; flex-direction: column; justify-content: center;
}
.deck-new-card .book-emoji { font-size: 30px; }

/* ===== 我的单词本：管理页 ===== */
.deck-manage { width: 100%; }
.deck-manage[hidden] { display: none; }
.deck-head {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 6px 0 14px; position: relative; flex-wrap: wrap;
}
.deck-head .library-title { font-size: 20px; }
.deck-tools { display: flex; gap: 8px; }
.deck-tool-btn {
  border: none; background: #eef4ff; color: #4facfe;
  font-size: 12px; font-weight: 600; padding: 6px 12px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.deck-tool-btn:active { transform: scale(.94); }
.deck-tool-btn.danger { background: #ffecec; color: #ff5252; }

.deck-add-card, .deck-bulk-card {
  border: 2px solid #e0d3ff; border-radius: 16px; background: #fff;
  padding: 14px; margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(132,94,247,.08);
}
.deck-add-title {
  font-size: 14px; font-weight: 700; color: #2c3e50; margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.deck-bulk-hint { font-size: 11px; font-weight: 400; color: #95a5a6; }
.deck-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.deck-input {
  border: 1.5px solid #d9e2f2; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; color: #2c3e50;
  background: #fbfdff; outline: none; min-width: 0;
  transition: border-color .15s;
}
.deck-input:focus { border-color: #845ef7; background: #fff; }
.deck-add-btn {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #b197fc, #845ef7);
  padding: 11px; font-size: 15px; border-radius: 10px;
}
.deck-bulk-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1.5px solid #d9e2f2; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; line-height: 1.6;
  color: #2c3e50; background: #fbfdff; outline: none;
}
.deck-bulk-input:focus { border-color: #845ef7; background: #fff; }
.deck-bulk-btn {
  width: 100%; margin-top: 8px; padding: 10px;
  background: linear-gradient(135deg, #b197fc, #845ef7);
  border-radius: 10px; font-size: 14px;
}
.deck-bulk-result {
  margin-top: 8px; font-size: 12px; color: #7048e8;
  background: #f4f0ff; border-radius: 8px; padding: 8px 10px; line-height: 1.5;
}

.deck-words-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 4px 2px 8px; font-size: 13px; font-weight: 700; color: #2c3e50;
}
.deck-tip { font-size: 11px; font-weight: 400; color: #95a5a6; }
.deck-word-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px; max-height: 42vh; overflow-y: auto; padding: 2px;
}
.deck-empty {
  text-align: center; color: #b0bec5; font-size: 13px;
  border: 1.5px dashed #d9e2f2; border-radius: 14px; padding: 26px 12px;
}
.deck-word-row {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid #e4e9f5; border-radius: 12px;
  background: #fff; padding: 9px 10px;
}
.deck-word-row.editing { display: block; border-color: #845ef7; background: #faf8ff; }
.dw-speak { flex: none; font-size: 15px; cursor: pointer; opacity: .75; }
.dw-speak:active { opacity: 1; transform: scale(1.15); }
.dw-main { flex: 1; min-width: 0; }
.dw-line1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dw-word { font-size: 15px; font-weight: 700; color: #2c3e50; }
.dw-phonetic { font-size: 12px; color: #8fa3b8; }
.dw-meaning { font-size: 13px; color: #546e7a; margin-top: 1px; }
.dw-note { font-size: 12px; color: #7048e8; margin-top: 2px; word-break: break-word; }
.dw-btn {
  flex: none; border: none; background: #f2f4fa; border-radius: 8px;
  width: 32px; height: 32px; font-size: 14px; cursor: pointer;
}
.dw-btn:active { transform: scale(.9); }
.dw-del { background: #ffecec; }
.dw-edit-form { display: flex; flex-direction: column; gap: 8px; }
.dw-edit-actions { display: flex; gap: 8px; }
.dw-save, .dw-cancel {
  flex: 1; border: none; border-radius: 8px; padding: 9px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.dw-save { background: linear-gradient(135deg, #b197fc, #845ef7); color: #fff; }
.dw-cancel { background: #eef1f8; color: #546e7a; }
.deck-actions { grid-template-columns: 1fr 2fr; }
.deck-actions .btn-start:disabled { opacity: .5; filter: grayscale(.4); }

/* ===== 登录入口与弹窗 ===== */
.btn-auth {
  border: 1px solid #cfe3ff; background: #f4f9ff; color: #2b7fd4;
  height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px;
  cursor: pointer; white-space: nowrap; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis;
  transition: transform .08s ease, background .15s;
}
.btn-auth:active { transform: scale(.94); }
.auth-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(30, 42, 60, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.auth-mask[hidden] { display: none; }
.auth-dialog {
  position: relative; width: 100%; max-width: 330px;
  background: #fff; border-radius: 18px; padding: 26px 22px 22px;
  box-shadow: 0 18px 50px rgba(20, 60, 110, .25);
  animation: authPop .18s ease;
}
@keyframes authPop {
  from { transform: translateY(14px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.auth-close {
  position: absolute; top: 8px; right: 12px;
  border: none; background: none; font-size: 24px; line-height: 1;
  color: #aab4bd; cursor: pointer; padding: 4px;
}
.auth-title { font-size: 19px; font-weight: 700; color: #2c3e50; text-align: center; }
.auth-sub { font-size: 13px; color: #8a97a3; text-align: center; margin: 6px 0 18px; }
.auth-input {
  width: 100%; height: 44px; padding: 0 14px; font-size: 16px;
  border: 1.5px solid #dce6f0; border-radius: 10px; box-sizing: border-box;
  outline: none; transition: border-color .15s;
}
.auth-input:focus { border-color: #4facfe; }
.auth-code-row { display: flex; gap: 10px; margin-top: 12px; }
.auth-code-row .auth-input { flex: 1; }
.btn-send-code {
  flex: 0 0 104px; height: 44px; border: none; border-radius: 10px;
  background: #eef4ff; color: #2b7fd4; font-size: 13px; cursor: pointer;
  white-space: nowrap;
}
.btn-send-code:disabled { color: #95a5b3; cursor: default; }
.auth-dev-hint {
  margin-top: 12px; padding: 9px 12px; border-radius: 10px;
  background: #fff7e6; color: #b27a1c; font-size: 13px; font-weight: 600;
  letter-spacing: .5px;
}
.auth-msg { min-height: 18px; margin: 10px 2px 2px; font-size: 13px; color: #27ae60; }
.auth-msg.err { color: #e74c3c; }
.btn-login {
  width: 100%; height: 46px; margin-top: 12px;
  border: none; border-radius: 23px; font-size: 16px; font-weight: 700;
  color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #4facfe, #00c6fb);
  box-shadow: 0 6px 16px rgba(79, 172, 254, .35);
}
.btn-login:disabled { opacity: .65; cursor: default; }

/* 登录方式 tab 切换 */
.auth-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.auth-tab {
  flex: 1; height: 38px; border: 1.5px solid #dce6f0; border-radius: 10px;
  background: #f5f8fb; color: #5b6b7b; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.auth-tab.active {
  border-color: #4facfe; background: #4facfe; color: #fff;
  box-shadow: 0 4px 12px rgba(79, 172, 254, .3);
}
.auth-panel { display: flex; flex-direction: column; gap: 10px; }
.auth-panel[hidden] { display: none; }
/* 用户名面板内「去注册 / 去登录」切换链接：低调小字，不抢主按钮 */
.auth-switch {
  align-self: center; border: none; background: none;
  font-size: 13px; color: #2b7fd4; cursor: pointer; padding: 2px 4px;
}
.auth-switch:hover { text-decoration: underline; }

/* A 方案复习弹窗：单词列表（chip 流式排列） */
.review-words {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 8px 0 16px; max-height: 240px; overflow-y: auto;
  padding: 4px 2px;
}
.review-word-chip {
  padding: 6px 12px; border-radius: 14px; font-size: 13px;
  background: #eef4ff; color: #2b7fd4; font-weight: 600;
  border: 1px solid #d8e6f5;
}
.review-word-chip.more { background: #f5f8fb; color: #8a97a3; border-color: #e3e9ef; }