/* ===== 英语说 全局样式 ===== */
:root {
  --primary: #FF8C42;
  --primary-light: #FFB088;
  --secondary: #4ECDC4;
  --accent: #FFE66D;
  --pink: #FF6B9D;
  --blue: #5B9BD5;
  --green: #7BC96F;
  --bg: #FFF8F0;
  --card: #FFFFFF;
  --text: #2D3436;
  --text-light: #636E72;
  --shadow: 0 4px 15px rgba(255,140,66,0.15);
  --shadow-lg: 0 8px 30px rgba(255,140,66,0.2);
  --radius: 20px;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
body {
  max-width: 420px;
  margin: 0 auto;
  padding-bottom: 80px;
  position: relative;
}
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
input, textarea { font-family: inherit; outline: none; }
a { text-decoration: none; color: inherit; }

/* ===== 顶部 ===== */
.topbar {
  background: linear-gradient(135deg, var(--primary), #FF6B35);
  padding: calc(16px + env(safe-area-inset-top)) 20px 20px;
  color: #fff;
  border-radius: 0 0 28px 28px;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(255,107,53,0.3);
}
/* 有顶部栏的页面，顶部留白避免内容被遮挡 */
body.has-topbar {
  padding-top: 80px;
}
.topbar h1 { font-size: 22px; display: flex; align-items: center; gap: 8px; }
.topbar .sub { font-size: 13px; opacity: 0.9; margin-top: 4px; }

/* ===== 年级选择 ===== */
.grade-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 16px 0;
  overflow-x: auto;
}
.grade-tab {
  padding: 8px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255,255,255,0.5);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all .2s;
}
.grade-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(255,140,66,0.4);
}

/* ===== 册别（上/下册） ===== */
.volume-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 16px 0;
}
.volume-tab {
  flex: 1;
  padding: 8px 0;
  border-radius: 14px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255,255,255,0.5);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-light);
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all .2s;
}
.volume-tab.active {
  background: linear-gradient(135deg, #87CEFA, #38BDF8);
  color: #fff;
  box-shadow: 0 4px 12px rgba(56,189,248,0.4);
}
.volume-tab.active.vol-lower {
  background: linear-gradient(135deg, #C8F7C5, #5BC88A);
  box-shadow: 0 4px 12px rgba(91,200,138,0.4);
}

/* ===== 单元栏 ===== */
.unit-bar {
  display: flex;
  gap: 6px;
  padding: 12px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.unit-bar::-webkit-scrollbar { display: none; }
.unit-chip {
  flex: 1;
  min-width: 0;
  padding: 8px 4px;
  border-radius: 12px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all .2s;
  border: 2px solid rgba(255,255,255,0.5);
}
.unit-chip.active {
  background: linear-gradient(135deg, #87CEFA, #38BDF8);
  color: #fff;
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}
/* 单元选中色：按年级+册别 (g{年级}-upper/lower) */
.unit-chip.active.g3-upper { background: linear-gradient(135deg, #FFE66D, #FFB347); color: #5D4037; border-color: #FFB347; }
.unit-chip.active.g3-lower { background: linear-gradient(135deg, #FFD3B6, #FF8A65); color: #5D4037; border-color: #FF8A65; }
.unit-chip.active.g4-upper { background: linear-gradient(135deg, #FFB8D0, #FF6B9D); color: #fff; border-color: #FF6B9D; }
.unit-chip.active.g4-lower { background: linear-gradient(135deg, #FFEAA7, #FDCB6E); color: #5D4037; border-color: #FDCB6E; }
.unit-chip.active.g5-upper { background: linear-gradient(135deg, #C4B5FD, #8B5CF6); color: #fff; border-color: #8B5CF6; }
.unit-chip.active.g5-lower { background: linear-gradient(135deg, #99F6E4, #2DD4BF); color: #065F46; border-color: #2DD4BF; }
.unit-chip.active.g6-upper { background: linear-gradient(135deg, #FCA5A5, #F87171); color: #fff; border-color: #F87171; }
.unit-chip.active.g6-lower { background: linear-gradient(135deg, #FDA4AF, #FB7185); color: #fff; border-color: #FB7185; }
.unit-chip .u-name { font-size: 11px; font-weight: 700; white-space: nowrap; }
.unit-chip .u-icon { font-size: 20px; margin-top: 4px; line-height: 1; display:flex; justify-content:center; align-items:center; }
.unit-chip .u-icon img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; display: block; mix-blend-mode: multiply; }
.unit-chip.active .u-icon img { mix-blend-mode: normal; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }

/* ===== 卡片通用 ===== */
.card {
  background: var(--card);
  border-radius: var(--radius);
  margin: 14px 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===== 练习页 ===== */
.sentence-box { text-align: center; padding: 10px 0; }
.scene-tag {
  display: inline-block;
  background: #FFF0E0;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 14px;
}
.sentence {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 10px;
}
.sentence-cn {
  font-size: 15px;
  color: var(--text-light);
  margin-bottom: 16px;
}
.tip-box {
  background: #F0FBFA;
  border-left: 4px solid var(--secondary);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-light);
  text-align: left;
  margin-bottom: 12px;
}
.tip-box .tip-label { font-weight: 700; color: var(--secondary); }
.phonics-box {
  background: #FFF8E1;
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #B8860B;
  text-align: left;
}
.phonics-box .ph-label { font-weight: 700; }

/* 播放按钮 */
.play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary), #3DBDB5);
  color: #fff;
  font-size: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(78,205,196,0.4);
  transition: transform .15s;
  margin: 14px 0;
}
.play-btn:active { transform: scale(0.92); }
.play-btn.playing { animation: pulse 1s infinite; }
.play-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 14px 0; }
.play-btn-slow {
  width: 48px; height: 48px; border-radius: 50%;
  background: #FFF3E0; color: #E65100; font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(230,81,0,0.2);
  transition: transform .15s; border: 2px solid #FFE0B2;
}
.play-btn-slow:active { transform: scale(0.92); }
.play-btn-slow.playing { animation: pulseSlow 1s infinite; }
@keyframes pulseSlow {
  0%,100% { box-shadow: 0 4px 12px rgba(230,81,0,0.2); }
  50% { box-shadow: 0 4px 20px rgba(230,81,0,0.5); }
}
@keyframes pulse {
  0%,100% { box-shadow: 0 6px 20px rgba(78,205,196,0.4); }
  50% { box-shadow: 0 6px 30px rgba(78,205,196,0.8); }
}

/* 麦克风 */
.mic-section { text-align: center; padding: 20px 0 10px; }
.mic-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), #FF4081);
  color: #fff;
  font-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(255,107,157,0.4);
  transition: all .2s;
}
.mic-btn:active { transform: scale(0.92); }
.mic-btn.recording {
  animation: recPulse 1s infinite;
  background: linear-gradient(135deg, #FF4444, #CC0000);
}
@keyframes recPulse {
  0%,100% { box-shadow: 0 8px 25px rgba(255,68,68,0.4); transform: scale(1); }
  50% { box-shadow: 0 8px 40px rgba(255,68,68,0.8); transform: scale(1.08); }
}
.mic-hint { font-size: 13px; color: var(--text-light); margin-top: 10px; }

/* 反馈区 */
.feedback {
  display: none;
  background: #F8FFFE;
  border-radius: 16px;
  padding: 18px;
  margin-top: 16px;
  text-align: center;
  border: 2px solid #E0F7F5;
}
.feedback.show { display: block; animation: popIn .3s ease; }
@keyframes popIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.stars { font-size: 28px; margin-bottom: 6px; letter-spacing: 4px; }
.score-num { font-size: 32px; font-weight: 800; color: var(--primary); }
.score-num span { font-size: 16px; color: var(--text-light); }
.feedback-msg { font-size: 14px; color: var(--text); margin-top: 8px; line-height: 1.5; }
.replay-voice {
  margin-top: 12px;
  padding: 8px 18px;
  background: var(--accent);
  color: var(--text);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

/* 操作按钮 */
.actions {
  display: flex;
  gap: 12px;
  padding: 6px 16px 20px;
}
.btn {
  flex: 1;
  padding: 14px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  transition: all .15s;
}
.btn:active { transform: scale(0.97); }
.btn-outline {
  background: #fff;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), #FF6B35);
  color: #fff;
  box-shadow: 0 4px 15px rgba(255,107,53,0.35);
}

/* 进度条 */
.progress-bar {
  height: 8px;
  background: #FFE8D6;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 4px;
  transition: width .3s;
}
.progress-text { font-size: 12px; color: var(--text-light); margin-top: 6px; }

/* ===== 游戏页 ===== */
.game-area {
  position: relative;
  margin: 14px 16px;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, #87CEEB 0%, #98D8C8 60%, #7BC96F 100%);
  min-height: 380px;
  box-shadow: var(--shadow-lg);
}
.game-target {
  position: absolute;
  font-size: 50px;
  cursor: pointer;
  transition: transform .1s;
  user-select: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.game-target.hit {
  animation: hit .4s forwards;
}
@keyframes hit {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
.game-prompt {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.95);
  padding: 10px 20px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  z-index: 10;
  min-width: 240px;
}
.game-prompt .word { font-size: 22px; font-weight: 800; color: var(--primary); }
.game-prompt .cn { font-size: 13px; color: var(--text-light); margin-top: 2px; }
.game-score-bar {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255,255,255,0.95);
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  z-index: 10;
}
.game-level-bar {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.95);
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  z-index: 10;
}
.game-start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.95);
  z-index: 20;
  gap: 16px;
}
.game-start h2 { font-size: 24px; color: var(--primary); }
.game-start p { color: var(--text-light); font-size: 14px; }
.game-mode-select { display: flex; gap: 12px; margin-top: 10px; }
.game-mode-btn {
  padding: 20px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  text-align: center;
  min-width: 110px;
}
.game-mode-btn .icon { font-size: 36px; }
.game-mode-btn .name { font-size: 14px; font-weight: 700; margin-top: 6px; }
.game-mode-btn .desc { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.game-result {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.98);
  z-index: 20;
  gap: 10px;
}
.game-result.show { display: flex; }
.game-result .big-score { font-size: 48px; font-weight: 900; color: var(--primary); }
.game-result .stars-big { font-size: 40px; letter-spacing: 8px; }

/* ===== 聊天页 ===== */
.chat-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-item {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  padding: 16px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.chat-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary), #3DBDB5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.chat-info { flex: 1; }
.chat-info .name { font-size: 16px; font-weight: 700; }
.chat-info .last { font-size: 13px; color: var(--text-light); margin-top: 2px; }
.chat-badge {
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}

/* 聊天窗口 */
.chat-window { display: none; flex-direction: column; height: calc(100vh - 80px); }
.chat-window.active { display: flex; }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 140px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #EDEDED;
}
.msg {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.msg.bot {
  background: #fff;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.msg.user {
  background: #95EC69 !important;
  color: #1A1A1A !important;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.msg-row { display:flex; align-items:flex-start; gap:8px; max-width:85%; }
.msg-row-bot { align-self:flex-start; }
.msg-row-user { align-self:flex-end; }
.msg-avatar { width:36px; height:36px; border-radius:8px; object-fit:cover; flex-shrink:0; background:#f0f0f0; }
.msg-row .msg { max-width:100%; }

.msg .cn-hint {
  display: block;
  font-size: 12px;
  opacity: 0.7;
  margin-top: 4px;
  font-style: italic;
}
/* Tom 流式回复：思考气泡 + 打字机光标 */
.msg.bot.streaming {
  color: #999;
  font-style: italic;
}
.msg.bot.streaming .thinking-text {
  display: inline-flex;
  align-items: center;
}
.stream-cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--primary, #4A90D9);
  animation: blink 0.8s steps(2) infinite;
  font-style: normal;
  font-weight: bold;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
/* ASR识别中输入框状态 */
.chat-input-bar input:disabled {
  background: var(--theme-gradient, #f5f7fa);
  color: #999;
}
.chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #f0f0f0;
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  z-index: 150;
  box-sizing: border-box;
}
.chat-input-bar input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #eee;
  border-radius: 24px;
  font-size: 14px;
}
.chat-input-bar input:focus { border-color: var(--primary); }
.chat-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 20px;
}
.chat-mic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 20px;
}
/* new input bar */
.chat-input-bar { display:flex; align-items:center; gap:6px; padding:14px 10px calc(14px + env(safe-area-inset-bottom)); background:#f7f7f7; border-top:1px solid #e5e5e5; }
.input-toggle { width:40px; height:40px; border-radius:50%; background:transparent; color:#555; border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; }
.input-field-area { flex:1; display:flex; align-items:center; min-width:0; }
.voice-btn { width:100%; height:48px; border-radius:8px; background:#fff; border:1px solid #d9d9d9; font-size:15px; color:#333; cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; transition:background 0.15s; }
.voice-btn.pressing { background:#d9d9d9; border-color:#ccc; }
.voice-btn.cancel { background:#FF4444; color:#fff; border-color:#FF4444; }
.voice-btn.locked { opacity:0.5; cursor:not-allowed; }
.text-input-wrap { display:flex; align-items:center; gap:8px; width:100%; }
.chat-input-bar .text-input-wrap input { flex:1; height:48px; padding:0 16px; border:1px solid #d9d9d9; border-radius:8px; font-size:15px; background:#fff; box-sizing:border-box; }
.chat-input-bar .text-input-wrap input:focus { border-color:var(--primary); outline:none; }
.chat-send { width:40px; height:40px; border-radius:8px; background:linear-gradient(135deg,var(--primary),#FF6B35); color:#fff; border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; padding:0; }
.input-icon-btn { width:40px; height:40px; border-radius:50%; background:transparent; color:#555; border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; }
.recording-overlay { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.72); border-radius:16px; padding:28px 36px; display:flex; flex-direction:column; align-items:center; gap:14px; z-index:9999; pointer-events:none; }
.rec-mic-icon { color:#fff; }
.rec-hint { color:#fff; font-size:14px; white-space:nowrap; }


/* ===== 语音消息条 ===== */
.voice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 16px;
  cursor: pointer;
  user-select: none;
  min-height: 24px;
  box-sizing: border-box;
}
.msg.user .voice-bar {
  background: rgba(255,255,255,0.4);
  color: #1A1A1A;
}
.msg.bot .voice-bar {
  background: #F0F4FF;
}
.voice-icon { font-size: 18px; }
.voice-waves {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  height: 20px;
}
.voice-waves i {
  display: inline-block;
  width: 3px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.7;
}
.voice-waves i:nth-child(1) { height: 8px; }
.voice-waves i:nth-child(2) { height: 14px; }
.voice-waves i:nth-child(3) { height: 18px; }
.voice-waves i:nth-child(4) { height: 11px; }
.voice-dur {
  font-size: 12px;
  opacity: 0.8;
  min-width: 28px;
  text-align: right;
}
.voice-text {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 4px;
  line-height: 1.4;
}
/* Tom语音条样式 */
.tom-voice-msg { max-width: 75%; }
.tom-voice-bar {
  background: #fff;
  border: 1px solid #e0e0e0;
  color: #333;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.tom-voice-bar:active { background: #f0f0f0; }
.tom-voice-bar .voice-icon { font-size: 18px; min-width: 20px; text-align: center; }
.tom-voice-bar .voice-dur { font-size: 13px; color: #999; min-width: 30px; }
.tom-voice-bar .voice-waves { display: inline-flex; gap: 2px; align-items: center; flex: 1; justify-content: center; }
.tom-voice-bar .voice-waves i {
  display: inline-block; width: 2px; height: 8px; background: #07C160; border-radius: 1px;
  opacity: 0.4;
}
.tom-voice-bar.playing .voice-waves i { opacity: 1; animation: tomWave 0.8s ease-in-out infinite; }
.tom-voice-bar.playing .voice-waves i:nth-child(1) { animation-delay: 0s; }
.tom-voice-bar.playing .voice-waves i:nth-child(2) { animation-delay: 0.15s; }
.tom-voice-bar.playing .voice-waves i:nth-child(3) { animation-delay: 0.3s; }
.tom-voice-bar.playing .voice-waves i:nth-child(4) { animation-delay: 0.45s; }
@keyframes tomWave { 0%,100% { height: 6px; } 50% { height: 14px; } }
.tom-voice-text { margin-top: 6px; }
.tom-voice-text .bot-text { display: block; font-size: 15px; line-height: 1.5; }
.tom-voice-text .cn-hint { display: block; font-size: 13px; color: #999; margin-top: 2px; }

/* Tom语音条样式 */
.tom-voice-msg { max-width: 75%; }
.tom-voice-bar {
  background: #fff;
  border: 1px solid #e0e0e0;
  color: #333;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.tom-voice-bar:active { background: #f0f0f0; }
.tom-voice-bar .voice-icon { font-size: 18px; min-width: 20px; text-align: center; }
.tom-voice-bar .voice-dur { font-size: 13px; color: #999; min-width: 30px; }
.tom-voice-bar .voice-waves { display: inline-flex; gap: 2px; align-items: center; flex: 1; justify-content: center; }
.tom-voice-bar .voice-waves i {
  display: inline-block; width: 2px; height: 8px; background: #07C160; border-radius: 1px;
  opacity: 0.4;
}
.tom-voice-bar.playing .voice-waves i { opacity: 1; animation: tomWave 0.8s ease-in-out infinite; }
.tom-voice-bar.playing .voice-waves i:nth-child(1) { animation-delay: 0s; }
.tom-voice-bar.playing .voice-waves i:nth-child(2) { animation-delay: 0.15s; }
.tom-voice-bar.playing .voice-waves i:nth-child(3) { animation-delay: 0.3s; }
.tom-voice-bar.playing .voice-waves i:nth-child(4) { animation-delay: 0.45s; }
@keyframes tomWave { 0%,100% { height: 6px; } 50% { height: 14px; } }
.tom-voice-text { margin-top: 6px; }
.tom-voice-text .bot-text { display: block; font-size: 15px; line-height: 1.5; }
.tom-voice-text .cn-hint { display: block; font-size: 13px; color: #999; margin-top: 2px; }

.replay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(74,144,226,0.1);
  cursor: pointer;
  font-size: 14px;
  margin-left: 6px;
  vertical-align: middle;
}
.replay-btn:active { background: rgba(74,144,226,0.25); }
.msg.user .replay-btn { background: rgba(255,255,255,0.4); color:#1A1A1A; }

/* ===== 成就页 ===== */
.achievement-header {
  text-align: center;
  padding: 24px 20px;
}
.achievement-header .big-num {
  font-size: 42px;
  font-weight: 900;
  color: var(--primary);
}
.achievement-header .label { font-size: 14px; color: var(--text-light); }
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px;
}
.stat-card {
  background: #fff;
  padding: 16px;
  border-radius: 16px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat-card .num { font-size: 28px; font-weight: 800; color: var(--secondary); }
.stat-card .lbl { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.badge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
}
.badge-item {
  background: #fff;
  padding: 16px 8px;
  border-radius: 16px;
  text-align: center;
  box-shadow: var(--shadow);
  opacity: 0.4;
}
.badge-item.unlocked { opacity: 1; }
.badge-item .emoji { font-size: 36px; }
.badge-item .bname { font-size: 12px; font-weight: 700; margin-top: 6px; }

/* ===== 家长页 ===== */
.parent-section { padding: 16px 16px 90px; }
/* 时间范围切换标签 */
.report-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  background: #F0F4FF;
  border-radius: 14px;
  padding: 4px;
}
.report-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.report-tab.active {
  background: linear-gradient(135deg, var(--primary), #FF6B35);
  color: #fff;
  box-shadow: 0 2px 8px rgba(74,144,226,0.3);
}
.date-picker-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.date-picker-wrap input {
  padding: 10px 14px;
  border: 2px solid #eee;
  border-radius: 12px;
  font-size: 14px;
}
.report-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.report-card h3 {
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--primary);
}
/* 数据网格 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* ===== 家长页汇总：上排大数字 + 下排小卡片 ===== */
.summary-top {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  border-radius: 14px;
  padding: 18px 8px;
  margin-bottom: 12px;
}
.summary-top-item {
  flex: 1;
  text-align: center;
  position: relative;
}
.summary-top-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(255,255,255,0.3);
}
.st-num {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.st-label {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
}
.summary-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.summary-card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 4px;
  background: #FAFAFA;
  border-radius: 12px;
}
.sci-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.sci-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}
.sci-label {
  font-size: 11px;
  color: #888;
  text-align: center;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px;
  background: #FAFAFA;
  border-radius: 12px;
}
.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.stat-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}
.stat-label {
  font-size: 11px;
  color: #888;
}

/* AI私教点评 */
.ai-coach-box {
  display: flex;
  gap: 12px;
  background: linear-gradient(135deg, #FFF8F0, #FFF3E0);
  border-radius: 14px;
  padding: 16px;
}
.ai-coach-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ai-coach-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text);
}

/* 优秀录音 TOP5 */
.top-voices { display: flex; flex-direction: column; gap: 8px; }
.empty-tip { text-align: center; color: #bbb; font-size: 13px; padding: 20px 0; }
.top-voice-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #FAFAFA;
  border-radius: 12px;
}
.tv-rank {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: #fff;
}
.tv-info { flex: 1; min-width: 0; }
.tv-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-time { font-size: 11px; color: #aaa; margin-top: 2px; }
.tv-score {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}
.tv-score span { font-size: 12px; font-weight: 400; }
.play-mini {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

/* 小屏适配：数据网格改2列 */
@media (max-width: 360px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .summary-bottom { grid-template-columns: repeat(2, 1fr); }
  .st-num { font-size: 24px; }
}

/* ===== 底部导航 ===== */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  background: #fff;
  display: flex;
  justify-content: space-around;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 20px rgba(0,0,0,0.08);
  z-index: 200;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  font-size: 11px;
  color: #999;
  font-weight: 600;
}
.tab-item .ticon { font-size: 22px; }
.ticon-img { width: 24px; height: 24px; object-fit: contain; display: block; margin: 0 auto; }
.tabbar .ticon img, .tab-item .ticon img { width: 24px !important; height: 24px !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; border-radius: 6px; }


.tab-item.active { color: var(--primary); }

/* ===== Toast ===== */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.toast.show { opacity: 1; }

/* loading */
.loading-dots::after {
  content: '';
  animation: dots 1.4s infinite;
}
@keyframes dots {
  0%,20% { content: '.'; }
  40% { content: '..'; }
  60%,100% { content: '...'; }
}

/* 小屏适配 */
@media (max-height: 700px) {
  .game-area { min-height: 320px; }
  .sentence { font-size: 22px; }
  .mic-btn { width: 72px; height: 72px; font-size: 32px; }
}

/* ============================================
   新版游戏页样式
   ============================================ */

/* 游戏选择网格 */
.game-menu-card { padding: 20px; }
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.game-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 18px 12px;
  text-align: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.06);
  border: 2px solid transparent;
  transition: all .2s;
  cursor: pointer;
  overflow: hidden;
}
.game-card:active { transform: scale(0.96); border-color: var(--primary); }
.game-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.game-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
.game-card-desc { font-size: 11px; color: var(--text-light); margin-top: 4px; }
.game-card-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
}
.tag-word { background: #E3F2FD; color: #1976D2; }
.tag-sentence { background: #FFF8E1; color: #F57F17; }
.tag-pirate { background: #E3F2FD; color: #3A7BD5; }
.tag-balloon { background: #FCE4EC; color: #FF4081; }
.tag-whack { background: #E8F5E9; color: #5BAE4A; }
.tag-fish { background: #E0F7FA; color: #00838F; }

/* 游戏HUD */
.game-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin: 10px 16px 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 700;
}
.hud-item { color: var(--text-light); }
.hud-score { color: var(--primary); font-size: 15px; }

/* 游戏画布 */
.game-canvas {
  position: relative;
  margin: 12px 16px;
  border-radius: 20px;
  height: 300px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* 漂浮目标（海盗船/气球/星星） */
.g-target {
  position: absolute;
  user-select: none;
  cursor: pointer;
  z-index: 5;
}
.float-target {
  font-size: 48px;
  animation-name: floatUp;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
@keyframes floatUp {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-90px) rotate(-8deg); }
  50% { transform: translateY(-170px) rotate(8deg); }
  75% { transform: translateY(-230px) rotate(-5deg); }
  100% { transform: translateY(-300px) rotate(0deg); opacity: 0.3; }
}
.float-target.target-hit {
  animation: targetHit .5s forwards;
}
@keyframes targetHit {
  0% { transform: scale(1); }
  50% { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
.float-target.target-miss {
  animation: targetMiss .3s forwards;
}
@keyframes targetMiss {
  0% { opacity: 1; }
  100% { opacity: 0.3; transform: scale(0.8); }
}

/* 打地鼠 */
.whack-hole {
  position: absolute;
  width: 32%;
  height: 30%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.whack-hole:nth-child(1) { left: 2%; top: 5%; }
.whack-hole:nth-child(2) { left: 35%; top: 5%; }
.whack-hole:nth-child(3) { left: 68%; top: 5%; }
.whack-hole:nth-child(4) { left: 2%; top: 38%; }
.whack-hole:nth-child(5) { left: 35%; top: 38%; }
.whack-hole:nth-child(6) { left: 68%; top: 38%; }
.whack-hole:nth-child(7) { left: 2%; top: 70%; }
.whack-hole:nth-child(8) { left: 35%; top: 70%; }
.whack-hole:nth-child(9) { left: 68%; top: 70%; }

.whack-mole {
  font-size: 36px;
  transform: translateY(100%);
  opacity: 0;
  transition: all .3s ease;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
}
.whack-mole.show {
  transform: translateY(0);
  opacity: 1;
}
.whack-mole.whacked {
  font-size: 30px;
  transform: translateY(-10px) scale(1.3);
  opacity: 0;
  transition: all .4s ease;
}

/* 钓鱼 */
.fish-target {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.92);
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  animation: fishSwim 3s ease-in-out infinite;
  white-space: nowrap;
}
.fish-emoji { font-size: 24px; }
.fish-word { font-size: 14px; font-weight: 700; color: #006994; }
@keyframes fishSwim {
  0%,100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(15px) rotate(5deg); }
  75% { transform: translateX(-15px) rotate(-5deg); }
}
.fish-target.fish-caught {
  animation: fishCaught .6s forwards;
}
@keyframes fishCaught {
  0% { transform: scale(1); }
  50% { transform: scale(1.3) rotate(15deg); }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}
.fish-target.fish-wrong {
  opacity: 0.4;
  transform: scale(0.9);
}

/* 击中特效 */
.hit-effect {
  position: absolute;
  font-size: 40px;
  z-index: 20;
  pointer-events: none;
  animation: hitPop .6s forwards;
}
@keyframes hitPop {
  0% { transform: scale(0.5) translateY(0); opacity: 1; }
  50% { transform: scale(1.5) translateY(-20px); opacity: 1; }
  100% { transform: scale(1) translateY(-40px); opacity: 0; }
}

/* 题目提示 */
.game-question {
  text-align: center;
  margin: 0 16px 10px;
  padding: 14px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.gq-word {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.3;
}
.gq-cn {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 4px;
}

/* 游戏控制区 */
.game-ctrl {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
}

/* 结算卡片 */
.result-card {
  text-align: center;
  padding: 30px 24px;
}
.result-emoji { font-size: 60px; margin-bottom: 10px; }
.result-title { font-size: 24px; font-weight: 800; color: var(--primary); }
.stars-big { font-size: 36px; letter-spacing: 6px; margin: 12px 0; }
.result-score { font-size: 48px; font-weight: 900; color: var(--primary); }
.result-score span { font-size: 18px; color: var(--text-light); }
.result-msg { font-size: 14px; color: var(--text); margin-top: 8px; }
.result-detail { font-size: 13px; color: var(--text-light); margin-top: 6px; line-height: 1.5; }

/* 结算 - 本局成果展示 */
.result-review {
  margin-top: 18px;
  text-align: left;
  border-top: 1px dashed #e0e0e0;
  padding-top: 14px;
}
.review-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 14px;
}
.review-stat { text-align: center; }
.rs-num { font-size: 18px; font-weight: 800; color: var(--primary); }
.rs-label { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.review-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.review-list { max-height: 220px; overflow-y: auto; }
.review-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f8f9fb;
  border-radius: 10px;
  margin-bottom: 6px;
}
.ri-icon { font-size: 16px; flex-shrink: 0; }
.ri-body { flex: 1; min-width: 0; }
.ri-text { font-size: 13px; font-weight: 600; color: var(--text); word-break: break-word; }
.ri-cn { font-size: 11px; color: var(--text-light); margin-top: 1px; }
.ri-score {
  font-size: 12px; font-weight: 700; color: var(--primary);
  background: #fff3e0; padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
}
.attempt-tag {
  display: inline-block;
  font-size: 10px;
  color: #e65100;
  background: #fff3e0;
  padding: 0 5px;
  border-radius: 8px;
  margin-left: 4px;
  font-weight: 700;
}

/* ===== 海盗船大作战 ===== */
.pirate-waves {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 44px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0, transparent 18px,
    rgba(255,255,255,0.12) 18px, rgba(255,255,255,0.12) 36px
  );
  animation: waveMove 3s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes waveMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-36px); }
}

.pirate-ship {
  position: absolute;
  width: 64px;
  z-index: 5;
  transform: translateX(-50%);
  animation: shipBob 3s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes shipBob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  50% { transform: translateX(-50%) translateY(-4px) rotate(2deg); }
}
.pirate-ship.target-ship {
  z-index: 10;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.95));
}
.pirate-ship.target-ship .ship-word {
  background: #FFD700;
  color: #333;
  animation: wordPulse 1.2s ease-in-out infinite;
}
@keyframes wordPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.ship-flag {
  text-align: center;
  font-size: 18px;
  line-height: 1;
  margin-bottom: -2px;
}
.ship-mast {
  width: 2px;
  height: 30px;
  background: linear-gradient(90deg, #3a2510, #5a3a1a, #3a2510);
  margin: 0 auto;
  position: relative;
}
.ship-sail {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 26px;
  background: linear-gradient(180deg, #fff 0%, #dfe8f0 100%);
  border-radius: 3px 3px 14px 14px;
  box-shadow: inset -3px 0 6px rgba(0,0,0,0.08);
}
.ship-sail::before {
  content: '☠';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #333;
}
.ship-hull {
  width: 64px;
  height: 24px;
  background: linear-gradient(180deg, #b5651d 0%, #7a3e10 100%);
  border-radius: 4px 4px 20px 20px / 4px 4px 14px 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.35);
}
.ship-hull::before {
  content: '';
  position: absolute;
  left: -8px; top: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 24px 9px;
  border-color: transparent transparent #7a3e10 transparent;
}
.ship-hull::after {
  content: '';
  position: absolute;
  right: -8px; top: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 24px 9px 0 0;
  border-color: #7a3e10 transparent transparent transparent;
}
.ship-word {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,0.35);
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;
}

/* 击沉 */
.pirate-ship.sinking {
  animation: sinkShip 1.3s ease-in forwards !important;
}
@keyframes sinkShip {
  0%   { transform: translateX(-50%) translateY(0) rotate(0deg); opacity: 1; }
  25%  { transform: translateX(-50%) translateY(8px) rotate(18deg); opacity: 1; }
  60%  { transform: translateX(-50%) translateY(55px) rotate(35deg); opacity: 0.7; }
  100% { transform: translateX(-50%) translateY(140px) rotate(55deg); opacity: 0; }
}
.pirate-ship.ship-shake {
  animation: shipShake 0.4s ease !important;
}
@keyframes shipShake {
  0%, 100% { transform: translateX(-50%); }
  20% { transform: translateX(-50%) translateX(-6px) rotate(-5deg); }
  40% { transform: translateX(-50%) translateX(6px) rotate(5deg); }
  60% { transform: translateX(-50%) translateX(-4px) rotate(-3deg); }
  80% { transform: translateX(-50%) translateX(4px) rotate(3deg); }
}

/* 我方军舰 */
.our-warship {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 170px;
  height: 70px;
  z-index: 20;
  animation: ourBob 3.2s ease-in-out infinite;
}
@keyframes ourBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}
.warship-deck {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 26px;
  background: linear-gradient(180deg, #4a6fa5 0%, #2c4a7c 100%);
  border-radius: 4px 4px 26px 26px / 4px 4px 16px 16px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}
.warship-deck::before {
  content: '';
  position: absolute;
  left: -12px; top: 0;
  border-style: solid;
  border-width: 0 0 26px 13px;
  border-color: transparent transparent #2c4a7c transparent;
}
.warship-deck::after {
  content: '';
  position: absolute;
  right: -12px; top: 0;
  border-style: solid;
  border-width: 26px 13px 0 0;
  border-color: #2c4a7c transparent transparent transparent;
}
.warship-cabin {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 18px;
  background: linear-gradient(180deg, #e8eef5, #b8c6d8);
  border-radius: 6px 6px 2px 2px;
}
.warship-cabin::before {
  content: '🚩';
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
}
.warship-soldier {
  position: absolute;
  bottom: 22px;
  font-size: 20px;
  line-height: 1;
  z-index: 3;
}
.warship-soldier .gun {
  position: absolute;
  top: 4px;
  font-size: 13px;
}
.warship-soldier.left { left: 14px; }
.warship-soldier.left .gun { right: -10px; transform: scaleX(-1); }
.warship-soldier.right { right: 14px; }
.warship-soldier.right .gun { left: -10px; }

/* 舰上大炮 */
.warship-cannon {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
.wc-barrel {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 26px;
  background: linear-gradient(90deg, #2a2a2a, #5a5a5a, #2a2a2a);
  border-radius: 3px 3px 2px 2px;
  transform-origin: bottom center;
}
.wc-barrel::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: 15px;
  height: 6px;
  background: #1a1a1a;
  border-radius: 2px;
}
.wc-gunner {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
}
.wc-base {
  width: 30px;
  height: 10px;
  background: linear-gradient(180deg, #555, #222);
  border-radius: 4px;
  margin-top: 26px;
}
.our-warship.firing .wc-barrel {
  animation: cannonKick 0.25s ease-out;
}
@keyframes cannonKick {
  0% { transform: translateX(-50%) scaleY(1); }
  40% { transform: translateX(-50%) scaleY(0.8) translateY(4px); }
  100% { transform: translateX(-50%) scaleY(1); }
}

/* 炮弹 */
.cannonball {
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 30%, #777, #111);
  border-radius: 50%;
  z-index: 25;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(0,0,0,0.6);
}

/* 爆炸 & 水花 */
.ship-explosion {
  position: absolute;
  font-size: 44px;
  z-index: 15;
  animation: explode 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes explode {
  0% { transform: scale(0.3); opacity: 1; }
  50% { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
.water-splash {
  position: absolute;
  font-size: 26px;
  z-index: 12;
  animation: splash 0.9s ease-out forwards;
  pointer-events: none;
}
@keyframes splash {
  0% { transform: translateY(0) scale(0.4); opacity: 1; }
  100% { transform: translateY(-34px) scale(1.6); opacity: 0; }
}

/* ===== 通用目标高亮/抖动 ===== */
.g-target.target-active {
  z-index: 12;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.95));
  transform: scale(1.08);
  transition: transform .2s;
}
.g-target.target-shake {
  animation: targetShake .45s ease;
}
@keyframes targetShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-5deg); }
  40% { transform: translateX(6px) rotate(5deg); }
  60% { transform: translateX(-4px) rotate(-3deg); }
  80% { transform: translateX(4px) rotate(3deg); }
}
.hit-effect {
  position: absolute;
  font-size: 40px;
  z-index: 30;
  pointer-events: none;
  animation: hitPop .6s ease-out forwards;
}
@keyframes hitPop {
  0% { transform: scale(.3); opacity: 1; }
  60% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* ===== 游戏反馈弹层 ===== */
.game-feedback {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.5);
  z-index: 9999;
  padding: 28px 36px;
  border-radius: 24px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  max-width: 80vw;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
}
.game-feedback.gf-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.game-feedback.gf-correct {
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
  color: #fff;
}
.game-feedback.gf-retry {
  background: linear-gradient(135deg, #FF9800, #FFC107);
  color: #fff;
}
.gf-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 8px;
  animation: gfIconBounce .5s ease;
}
@keyframes gfIconBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.gf-score {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 6px;
}
.gf-tip {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  margin: 8px 0 4px;
  padding: 8px 12px;
  background: rgba(255,255,255,.2);
  border-radius: 12px;
  max-width: 280px;
}
.gf-msg {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.gf-hint {
  font-size: 14px;
  margin-top: 8px;
  opacity: .9;
}

/* ===== 气球 ===== */
.balloon-target {
  position: absolute;
  transform: translateX(-50%);
  animation: balloonFloat 3.5s ease-in-out infinite;
}
@keyframes balloonFloat {
  0%,100% { transform: translateX(-50%) translateY(0) rotate(-3deg); }
  50% { transform: translateX(-50%) translateY(-8px) rotate(3deg); }
}
.balloon-body {
  width: 58px;
  height: 70px;
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset -6px -8px 12px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.25);
  position: relative;
}
.balloon-body::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid rgba(0,0,0,0.35);
}
.balloon-word {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  max-width: 48px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.balloon-string {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.7);
  margin: 0 auto;
}
.balloon-target.balloon-pop {
  animation: balloonPop .5s ease-out forwards !important;
}
@keyframes balloonPop {
  0% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.5); opacity: .9; }
  100% { transform: translateX(-50%) scale(0.2); opacity: 0; }
}

/* ===== 星星 ===== */
.star-target {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  animation: starTwinkle 2.5s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,100% { transform: translateX(-50%) scale(1); filter: brightness(1); }
  50% { transform: translateX(-50%) scale(1.12); filter: brightness(1.3); }
}
.star-body { font-size: 48px; line-height: 1; }
.star-label {
  font-size: 11px;
  font-weight: 800;
  color: #FFD700;
  background: rgba(0,0,0,0.4);
  padding: 1px 6px;
  border-radius: 6px;
  margin-top: 2px;
  display: inline-block;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.star-target.star-collected {
  animation: starCollect .6s ease-out forwards !important;
}
@keyframes starCollect {
  0% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.8) rotate(20deg); opacity: 1; }
  100% { transform: translateX(-50%) scale(0) rotate(720deg); opacity: 0; }
}

/* ===== 打地鼠网格 ===== */
.whack-grid {
  position: absolute;
  inset: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
}
.whack-hole {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.whack-hole::before {
  content: '';
  position: absolute;
  bottom: 4px; left: 10%; right: 10%;
  height: 16px;
  background: radial-gradient(ellipse at center, #1a0e04 0%, #3d2b17 70%, transparent 100%);
  border-radius: 50%;
}
.whack-mole {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #c48a4a, #8b5a2b);
  border-radius: 50% 50% 40% 40%;
  width: 70%;
  max-width: 64px;
  height: 0;
  overflow: hidden;
  transition: height .25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.whack-mole.show { height: 56px; }
.whack-mole.whacked {
  background: linear-gradient(180deg, #888, #555);
  animation: whacked .4s forwards;
}
@keyframes whacked {
  0% { transform: scale(1) rotate(0); }
  100% { transform: scale(0.3) rotate(30deg) translateY(20px); opacity: 0; }
}
.mole-emoji { font-size: 22px; line-height: 1; }
.mole-word {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,0.35);
  padding: 0 4px;
  border-radius: 4px;
  margin-top: 1px;
  max-width: 52px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 鱼（新布局）===== */
.fish-target {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.15);
  padding: 4px 10px;
  border-radius: 20px;
  animation: fishSwim 3s ease-in-out infinite;
}
@keyframes fishSwim {
  0%,100% { transform: translateX(-50%) translateX(0); }
  50% { transform: translateX(-50%) translateX(10px); }
}
.fish-emoji { font-size: 28px; }
.fish-word {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.fish-target.fish-caught {
  animation: fishCaught .7s ease-out forwards !important;
}
@keyframes fishCaught {
  0% { transform: translateX(-50%) translateY(0) rotate(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(-40px) rotate(-15deg); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-90px) rotate(25deg) scale(0.3); opacity: 0; }
}

/* ===== 游戏满屏沉浸模式 ===== */
body.in-game {
  background: #f0f4f8;
  padding: 0 !important;
  max-width: 520px !important;
  height: 100vh;
  height: 100dvh;
  overflow: hidden !important;
}
body.in-game .topbar,
body.in-game .grade-tabs,
body.in-game .volume-tabs,
body.in-game .unit-bar,
body.in-game .tabbar {
  display: none !important;
}
body.in-game #gameMenu { display: none !important; }
body.in-game #gameResult { display: none !important; }
body.in-game.page-game,
body.in-game {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
body.in-game #gamePlay {
  display: flex !important;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
body.in-game .game-hud {
  flex: 0 0 auto;
  margin: 8px 12px 0;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 12px;
}
body.in-game .game-canvas {
  flex: 1 1 auto;
  margin: 8px 12px;
  height: auto;
  min-height: 0;
  border-radius: 16px;
}
body.in-game .game-question {
  flex: 0 0 auto;
  margin: 0 12px;
  padding: 8px 14px;
  border-radius: 12px;
}
body.in-game .gq-word { font-size: 22px !important; margin: 0 !important; }
body.in-game .gq-cn { font-size: 13px !important; margin: 2px 0 0 !important; }
body.in-game .game-ctrl {
  flex: 0 0 auto;
  margin: 6px 0 2px;
  gap: 14px;
}
body.in-game .game-ctrl .mic-btn { width: 64px !important; height: 64px !important; font-size: 28px !important; }
body.in-game .game-ctrl .play-btn { width: 50px !important; height: 50px !important; font-size: 22px !important; }
body.in-game .game-ctrl .replay-btn { width: 48px !important; height: 48px !important; font-size: 20px !important; }
body.in-game .mic-hint {
  flex: 0 0 auto;
  margin: 0 0 4px !important;
  font-size: 12px;
}
body.in-game .actions {
  flex: 0 0 auto;
  padding: 0 12px 10px;
  margin: 0;
}
body.in-game .actions .btn {
  width: 100%;
  margin: 0;
  padding: 8px 16px;
  font-size: 14px;
}

/* ===== 逐词评分展示 ===== */
.word-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e0e0e0;
}
.word-result-title {
  font-size: 13px;
  color: #888;
  margin-bottom: 8px;
}
.word-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.word-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
}
.word-chip small {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.7;
}
.word-chip.w-good {
  background: #E8F8EF;
  color: #2E9E5A;
  border: 1px solid #B8E8C8;
}
.word-chip.w-mid {
  background: #FFF8E1;
  color: #D89018;
  border: 1px solid #FFE0A0;
}
.word-chip.w-bad {
  background: #FFEBEE;
  color: #E53935;
  border: 1px solid #FFCDD2;
}

/* 识别中：禁用按钮并显示呼吸光圈，防止重复点击导致卡顿 */
.mic-btn.evaluating {
  pointer-events: none;
  opacity: 0.75;
  animation: mic-evaluating 1s ease-in-out infinite;
}
@keyframes mic-evaluating {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.45); transform: scale(1); }
  50% { box-shadow: 0 0 0 14px rgba(255, 152, 0, 0); transform: scale(1.04); }
}

/* ===== 语伴场景模式 ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 6px;
}
.topbar h1 { margin: 0; font-size: 20px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.clear-chat-btn {
  border: none;
  background: rgba(255,255,255,0.25);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.clear-chat-btn:active { background: rgba(255,255,255,0.45); }

.mode-switch {
  display: flex;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid var(--primary);
  background: #fff;
}
.mode-btn {
  border: none;
  background: transparent;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--primary);
  transition: all 0.2s;
  white-space: nowrap;
}
.mode-btn.active {
  background: var(--primary);
  color: #fff;
}

/* 场景选择面板 */
.scene-panel {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 12px;
  -webkit-overflow-scrolling: touch;
}
.scene-grade-group {
  margin-bottom: 14px;
}
.scene-grade-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  padding-left: 4px;
}
.scene-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.scene-card {
  background: var(--card);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  border: 2px solid transparent;
}
.scene-card:active {
  transform: scale(0.97);
}
.scene-card .sc-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 4px;
}
.scene-card .sc-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.scene-card .sc-name-cn {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
}
.scene-card .sc-stars {
  font-size: 11px;
  margin-top: 4px;
  color: #FFB800;
}
.scene-card .sc-desc {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 3px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 已完成的场景 */
.scene-card.completed {
  border-color: var(--green);
}
.scene-card.completed::after {
  content: '✅';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 16px;
}
/* 锁定的场景 */
.scene-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f0f0f0;
}
.scene-card.locked::after {
  content: '🔒';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 16px;
}

/* 场景对话中的提示栏 */
.scene-hint-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-top: 1px solid #A5D6A7;
}
.scene-hint-bar .scene-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #2E7D32;
}
.hint-btn {
  border: none;
  background: #FFB800;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 18px;
  cursor: pointer;
  white-space: nowrap;
}
.hint-btn:active { opacity: 0.8; }
.exit-scene-btn {
  border: none;
  background: rgba(0,0,0,0.08);
  color: var(--text-light);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 18px;
  cursor: pointer;
  white-space: nowrap;
}

/* 场景提示气泡 */
.hint-bubble {
  background: #FFF9E6;
  border: 1px solid #FFE082;
  border-radius: 14px;
  padding: 10px 14px;
  margin: 6px 16px;
  font-size: 13px;
  color: #795548;
  line-height: 1.5;
  position: relative;
}
.hint-bubble::before {
  content: '💡 ';
}

/* 场景完成弹层 */
.scene-complete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  animation: fadeIn 0.2s;
}
.scene-complete-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  width: 85%;
  max-width: 320px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.scene-complete-card .scc-icon {
  font-size: 52px;
  display: block;
  margin-bottom: 10px;
}
.scene-complete-card .scc-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.scene-complete-card .scc-desc {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 18px;
}
.scene-complete-card .scc-btn {
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 28px;
  border-radius: 24px;
  cursor: pointer;
  margin: 0 6px;
}
.scene-complete-card .scc-btn.secondary {
  background: #eee;
  color: var(--text);
}

/* ===== chat.html 固定栏 + 仅消息区滚动 ===== */
body.page-chat {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.page-chat .topbar {
  position: fixed;
  flex: 0 0 auto;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  z-index: 100;
}
body.page-chat .scene-hint-bar {
  flex: 0 0 auto;
  border-top: none;
  border-bottom: 1px solid #A5D6A7;
}
body.page-chat .chat-messages,
body.page-chat .scene-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-top: 80px; padding-bottom: 140px;
  -webkit-overflow-scrolling: touch;
}
body.page-chat .chat-input-bar {
  bottom: 60px; /* tabbar 上方 */
}

/* ===== 家长页：孩子语音记录 ===== */
.voice-record-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.voice-record-filter input[type="date"] {
  flex: 1;
  min-width: 120px;
  padding: 8px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  font-size: 14px;
}
.voice-record-list {
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}
.vr-date {
  font-size: 14px;
  font-weight: 700;
  color: #555;
  margin: 14px 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px dashed #eee;
}
.vr-item {
  background: #F7FAFF;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.vr-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vr-play {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #4FC3F7, #29B6F6);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(41,182,246,.3);
}
.vr-play:active { transform: scale(.95); }
.vr-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #999;
}
.vr-dur {
  background: #E3F2FD;
  color: #1976D2;
  padding: 2px 8px;
  border-radius: 10px;
}
.vr-text {
  margin-top: 8px;
  font-size: 15px;
  color: #333;
  line-height: 1.4;
  word-break: break-word;
}

/* 语音记录来源标签 */
.vr-meta { flex: 1 1 auto; }
.vr-tag {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
  font-weight: 600;
}
.vr-tag-chat {
  background: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}
.vr-tag-practice {
  background: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}
.vr-score {
  font-size: 12px;
  color: #52c41a;
  font-weight: 700;
  margin-left: 2px;
}

/* 语音记录来源切换按钮 */
.voice-source-tabs {
  display: flex;
  gap: 10px;
  margin: 10px 0 12px;
}
.vst-btn {
  flex: 1;
  padding: 9px 0;
  border-radius: 20px;
  border: 2px solid #e0e0e0;
  background: #fafafa;
  font-size: 14px;
  font-weight: 600;
  color: #999;
  cursor: pointer;
  transition: all .2s;
}
.vst-btn:active { transform: scale(.97); }
#tabChat.vst-active {
  background: linear-gradient(135deg, #4FC3F7, #29B6F6);
  border-color: #29B6F6;
  color: #fff;
  box-shadow: 0 2px 8px rgba(41,182,246,.35);
}
#tabPractice.vst-active {
  background: linear-gradient(135deg, #FFB74D, #FB8C00);
  border-color: #FB8C00;
  color: #fff;
  box-shadow: 0 2px 8px rgba(251,140,0,.35);
}

/* ===== 宠物板块 ===== */
body.page-pet {
  background: #F5F5F5;
  padding-top: 0 !important;
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.pet-sky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  z-index: 100;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-height: calc(60px + env(safe-area-inset-top)));
  padding: calc(env(safe-area-inset-top) + 10px) 10px 10px;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
  transition: background 0.8s ease;
}
.pet-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  min-height: 44px;
  height: 44px;
}
.pet-day {
  background: rgba(255,255,255,0.85);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #E07830;
  display: flex;
  align-items: center;
  letter-spacing: 1px;
}
.pet-settings {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pet-clouds { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.cloud {
  position: absolute;
  font-size: 18px;
  opacity: 0.7;
  animation: cloudFloat 20s linear infinite;
}
.cloud.c1 { top: 14px; left: -10%; animation-duration: 25s; }
.cloud.c2 { top: 36px; left: -20%; font-size: 16px; animation-duration: 30s; animation-delay: -10s; }
.cloud.c3 { top: 22px; left: -15%; font-size: 28px; animation-duration: 35s; animation-delay: -5s; }
@keyframes cloudFloat {
  from { transform: translateX(0); }
  to { transform: translateX(600px); }
}

/* 宠物展示区 */
.pet-stage {
  position: relative;
  text-align: center;
  margin: 0 8px 0;
  padding: calc(80px + env(safe-area-inset-top)) 12px 8px;
  z-index: 3;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.pet-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  max-width: 300px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  pointer-events: none;
  animation: auraPulse 3s ease-in-out infinite;
}
@keyframes auraPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.9; }
}
.pet-character {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
}
.pet-avatar-wrap {
  position: relative;
  height: auto;
  width: 65%;
  max-width: 240px;
  max-height: 240px;
  min-height: 120px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pet-avatar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
.pet-character span {
  font-size: 72px;
  display: inline-block;
  animation: petFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
}
.pet-character span.max-level {
  animation: petFloat 3s ease-in-out infinite, petGlow 2s ease-in-out infinite;
}
@keyframes petFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes petGlow {
  0%, 100% { filter: drop-shadow(0 6px 12px rgba(255,215,0,0.4)); }
  50% { filter: drop-shadow(0 6px 24px rgba(255,215,0,0.8)); }
}
.pet-bounce {
  animation: petBounce 0.5s ease !important;
}
@keyframes petBounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.2) rotate(-10deg); }
  60% { transform: scale(0.9) rotate(5deg); }
}
.pet-name-wrap {
  margin-top: 0;
  padding-top: 4px;
  flex-shrink: 0;
}
.pet-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pet-chat-mini {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB74D, #FF9800);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,152,0,0.4);
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.pet-chat-mini:active {
  transform: scale(0.9);
}
.pet-name {
  font-size: 20px;
  font-weight: 800;
  color: #333;
}
.pet-stage-name {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 12px;
  background: linear-gradient(135deg, #FFB74D, #FF9800);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.pet-desc {
  margin-top: 2px;
  font-size: 12px;
  color: #888;
  flex-shrink: 0;
}

/* 心情emoji（头像右侧按钮组顶部） */
.pet-mood-emoji {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 6;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  pointer-events: none;
}
@keyframes moodFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.pet-mood-emoji.mood-hungry { animation: moodShake 0.5s ease infinite; }
@keyframes moodShake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}
.pet-mood-emoji.mood-excited { animation: moodBounce 0.6s ease infinite; }
@keyframes moodBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.pet-mood-emoji.mood-sleepy { opacity: 0.6; }

/* 饥饿/好感状态条 */
.pet-status-bars {
  margin: 3px 0 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.psb-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.psb-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.psb-val {
  font-size: 10px;
  font-weight: 700;
  color: #555;
  width: 56px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.psb-track {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.psb-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease, background 0.5s ease;
}
.psb-text {
  font-size: 10px;
  font-weight: 600;
  width: 52px;
  text-align: right;
  flex-shrink: 0;
}

/* 互动按钮 */
.pet-actions2 {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
  flex-shrink: 0;
}
.pet-action-btn2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 12px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  min-width: 52px;
}
.pet-action-btn2:active { transform: scale(0.92); }
.pet-action-btn2.cooling { opacity: 0.5; cursor: not-allowed; }
.pab2-emoji { font-size: 22px; }
.pab2-label { font-size: 10px; color: #666; font-weight: 600; }
.pab2-cd {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff5722;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
/* 分享海报按钮特殊样式 */
.pet-action-share {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
  box-shadow: 0 2px 10px rgba(238,90,36,0.35) !important;
}
.pet-action-share .pab2-emoji {
  filter: brightness(1.1);
}
.pet-action-share .pab2-label {
  color: #fff !important;
}

/* 飘字emoji动画 */
.pet-float-emoji {
  position: absolute;
  top: 8%;
  left: 50%;
  font-size: 28px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
  animation: floatUp 1.5s ease-out forwards;
}
@keyframes floatUp {
  0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
  20% { transform: translate(-50%, -18px) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -86px) scale(0.9); opacity: 0; }
}

/* 互动动作动画 */
.pet-img {
  width: 100%;
  height: 100%;
  max-width: 240px;
  max-height: 240px;
  object-fit: contain;
  border-radius: 50%;
}
.pet-character.anim-pet .pet-img { animation: animPet 0.8s ease; }
@keyframes animPet {
  0%, 100% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.08) rotate(-3deg); }
  50% { transform: scale(1.12) rotate(2deg) translateY(-4px); }
  75% { transform: scale(1.06) rotate(-1deg); }
}
.pet-character.anim-tickle .pet-img { animation: animTickle 0.6s ease; }
@keyframes animTickle {
  0%, 100% { transform: scale(1) rotate(0); }
  20% { transform: scale(1.1) rotate(-8deg) translateX(-4px); }
  40% { transform: scale(1.08) rotate(6deg) translateX(4px); }
  60% { transform: scale(1.1) rotate(-5deg) translateX(-3px); }
  80% { transform: scale(1.06) rotate(3deg) translateX(2px); }
}
.pet-character.anim-play .pet-img { animation: animPlay 0.8s ease; }
@keyframes animPlay {
  0% { transform: scale(1) translateY(0); }
  20% { transform: scale(1.15) translateY(-20px) rotate(-10deg); }
  40% { transform: scale(0.9) translateY(0) rotate(5deg); }
  60% { transform: scale(1.1) translateY(-12px) rotate(-5deg); }
  80% { transform: scale(0.95) translateY(0) rotate(2deg); }
  100% { transform: scale(1) translateY(0) rotate(0); }
}
.pet-character.anim-call .pet-img { animation: animCall 0.5s ease; }
@keyframes animCall {
  0%, 100% { transform: scale(1) rotate(0); }
  15% { transform: scale(1.05) rotate(-8deg); }
  30% { transform: scale(1) rotate(0); }
  45% { transform: scale(1.05) rotate(8deg); }
  60% { transform: scale(1) rotate(0); }
}

/* 进度条 */
.pet-card {
  background: #fff;
  margin: 3px 0;
  border-radius: 14px;
  padding: 6px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
.pet-card:last-of-type {
  margin-bottom: 8px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pet-card .pet-tasks {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.pet-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
}
.pet-progress-track {
  height: 16px;
  background: #F0F0F0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
}
.pp-seg {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.pp-seg:first-child { border-radius: 10px 0 0 10px; }
.pp-seg:last-child { border-radius: 0 10px 10px 0; }
.pp-seg + .pp-seg { border-left: none; }
.pp-seg-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  transition: width 0.6s ease;
}
.pp-seg0 { background: rgba(255,213,79,0.1); flex: 751 1 0; }
.pp-seg0 .pp-seg-fill { background: rgba(76,175,80,0.85); }
.pp-seg1 { background: rgba(77,208,225,0.1); flex: 1250 1 0; }
.pp-seg1 .pp-seg-fill { background: rgba(76,175,80,0.85); }
.pp-seg2 { background: rgba(255,152,0,0.1); flex: 2000 1 0; }
.pp-seg2 .pp-seg-fill { background: rgba(76,175,80,0.85); }
.pp-seg3 { background: rgba(149,117,205,0.1); flex: 3000 1 0; }
.pp-seg3 .pp-seg-fill { background: rgba(76,175,80,0.85); }
.pp-seg4 { background: rgba(255,193,7,0.1); flex: 2999 1 0; }
.pp-seg4 .pp-seg-fill { background: rgba(76,175,80,0.85); }
/* pet-progress-fill replaced by pp-seg */
/* shine removed for multi-segment */
  100% { transform: translateX(100%); }
}
.pet-evolve-hint {
  text-align: center;
  margin-top: 12px;
}
.pet-evolve-btn {
  background: linear-gradient(135deg, #FFD54F, #FF9800);
  color: #fff;
  border: none;
  padding: 10px 32px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255,152,0,0.4);
  animation: evolvePulse 1s infinite;
}
@keyframes evolvePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 今日任务 */
.pet-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}
.pet-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #F5F5F5;
}
.pet-task:last-child { border-bottom: none; }
.pt-icon { font-size: 20px; flex: 0 0 auto; }
.pt-body { flex: 1; min-width: 0; }
.pt-label {
  font-size: 13px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pt-xp { font-size: 11px; color: #FF9800; font-weight: 600; }
.pt-bar {
  height: 5px;
  background: #F0F0F0;
  border-radius: 3px;
  margin-top: 3px;
  overflow: hidden;
}
.pt-fill {
  height: 100%;
  background: linear-gradient(90deg, #81C784, #66BB6A);
  border-radius: 3px;
  transition: width 0.4s;
}
.pet-task.done .pt-fill {
  background: linear-gradient(90deg, #FFD54F, #FF9800);
}
.pt-count {
  font-size: 12px;
  color: #999;
  font-weight: 600;
  flex: 0 0 auto;
  min-width: 38px;
  text-align: right;
}
.pet-tasks {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 底部操作按钮 */
.pet-actions {
  display: flex;
  gap: 10px;
  margin: 16px;
}
.pet-action-btn {
  flex: 1;
  background: #fff;
  border-radius: 16px;
  padding: 14px 6px;
  text-align: center;
  text-decoration: none;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform 0.15s;
}
.pet-action-btn:active { transform: scale(0.96); }
.pet-action-btn.primary {
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  color: #fff;
}
.pa-icon {
  display: block;
  font-size: 28px;
  margin-bottom: 4px;
}

/* 设置菜单 */
.pet-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 5000;
  display: none;
}
.pet-menu-overlay.show { display: block; }
.pet-menu {
  position: fixed;
  top: 60px;
  right: 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 5001;
  min-width: 180px;
  overflow: hidden;
  transform: scale(0.9) translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s;
}
.pet-menu.show {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.pet-menu-item {
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #F5F5F5;
}
.pet-menu-item:last-child { border-bottom: none; }
.pet-menu-item:active { background: #F5F5F5; }
.pet-menu-item.disabled {
  color: #BBB;
  cursor: not-allowed;
}
/* 桌面端：应用max-width:420px居中，菜单位置需相对容器右边缘而非视口 */
@media (min-width: 421px) {
  .pet-menu {
    right: calc(50vw - 194px);
  }
}

/* 进化动画 */
.evolve-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,200,100,0.8));
}
.evolve-overlay.show { display: flex; }
.evolve-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  animation: evolveFlash 0.6s ease;
}
@keyframes evolveFlash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}
.evolve-pet {
  font-size: 120px;
  animation: evolvePop 1.5s ease;
  z-index: 2;
}
@keyframes evolvePop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.evolve-text {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 800;
  color: #FF6B35;
  z-index: 2;
  animation: evolveText 1.5s ease;
}
@keyframes evolveText {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Toast */
.pet-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 8000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  white-space: nowrap;
}
.pet-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 领养层 */
.adopt-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #FFF8F0 0%, #FFE8C8 100%);
  z-index: 9000;
  display: flex;
  animation: adoptFadeIn 0.4s ease;
}
@keyframes adoptFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.adopt-card {
  background: #fff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: center;
  animation: adoptPop 0.5s cubic-bezier(.34,1.56,.64,1);
  -webkit-overflow-scrolling: touch;
}
.adopt-top {
  flex-shrink: 0;
  padding: 24px 20px 12px;
  background: linear-gradient(180deg, #FFF8F0, #FFFEF8);
}
.adopt-middle {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 16px;
}
.adopt-bottom {
  flex-shrink: 0;
  padding: 12px 20px 28px;
  background: linear-gradient(0deg, #fff 80%, rgba(255,255,255,0));
  border-top: 1px solid #f5f0e8;
}
@keyframes adoptPop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.adopt-emoji {
  font-size: 56px;
  margin-bottom: 6px;
  animation: adoptWiggle 2s ease-in-out infinite;
}
@keyframes adoptWiggle {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
.adopt-title {
  font-size: 24px;
  font-weight: 800;
  color: #5D4037;
  margin-bottom: 10px;
}
.adopt-desc {
  font-size: 14px;
  color: #888;
  line-height: 1.6;
  margin-bottom: 18px;
}
.adopt-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 22px;
  margin-bottom: 20px;
  opacity: 0.8;
}
.adopt-preview span {
  animation: adoptFloat 2s ease-in-out infinite;
}
.adopt-preview span:nth-child(2n) {
  font-size: 14px;
  color: #ccc;
  animation: none;
}
@keyframes adoptFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.adopt-pet-pick {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.adopt-pet {
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  border: 3px solid #FFB74D;
  border-radius: 18px;
  padding: 12px 18px;
  min-width: 80px;
}
.adopt-pet-emoji {
  font-size: 36px;
}
.adopt-pet-name {
  font-size: 12px;
  color: #E65100;
  font-weight: 600;
  margin-top: 4px;
}
.adopt-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 2px solid #FFE0B2;
  border-radius: 14px;
  font-size: 15px;
  outline: none;
  margin-bottom: 14px;
  text-align: center;
  transition: border-color 0.2s;
}
.adopt-name-input:focus {
  border-color: #FFB74D;
}
.adopt-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #FFB74D, #FF9800);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255,152,0,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.adopt-btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 10px rgba(255,152,0,0.4);
}
.adopt-bank-hint {
  margin-top: 14px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-radius: 12px;
  font-size: 12px;
  color: #8D6E63;
  line-height: 1.6;
}
.adopt-bank-hint b {
  color: #E65100;
  font-size: 14px;
}

/* ============ P1: 宠物图片 ============ */
.pet-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255,255,255,0.8);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s;
}
.pet-character.pet-tap .pet-img {
  animation: petBounce 0.5s ease;
}
.pet-character.pet-happy .pet-img {
  animation: petHappy 0.6s ease;
}
@keyframes petBounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.15) rotate(-5deg); }
  60% { transform: scale(0.95) rotate(3deg); }
}
@keyframes petHappy {
  0%, 100% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.1) rotate(-8deg); }
  50% { transform: scale(1.05) rotate(5deg); }
  75% { transform: scale(1.08) rotate(-3deg); }
}
.pet-character.pet-eating .pet-img {
  animation: petEating 0.3s ease-in-out 3;
}
@keyframes petEating {
  0%, 100% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.08) rotate(-3deg); }
  50% { transform: scale(0.95) translateY(3px); }
  75% { transform: scale(1.08) rotate(3deg); }
}


/* 食物飞出动画 */
.pet-food-emoji {
  position: absolute;
  font-size: 36px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.pet-food-emoji.feed-anim {
  animation: foodFly 1.2s ease forwards;
}
@keyframes foodFly {
  0% { transform: translate(-50%, -80%) scale(0); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  60% { transform: translate(-50%, -30%) scale(0.8); opacity: 1; }
  100% { transform: translate(-50%, 10%) scale(0.3); opacity: 0; }
}

/* 喂食信息 */
.pet-feed-info {
  text-align: center;
  font-size: 11px;
  color: #999;
  margin-top: 4px;
}

/* ============ P1: 食物背包 ============ */
.pet-food-bag {
  display: flex;
  gap: 10px;
  justify-content: space-around;
}
.food-item {
  flex: 1;
  text-align: center;
  padding: 12px 6px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  border: 2px solid transparent;
}
.food-item:active {
  transform: scale(0.95);
}
.food-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.food-item:not(.disabled):hover {
  border-color: #ffb74d;
}
.food-emoji {
  font-size: 32px;
  line-height: 1.2;
}
.food-name {
  font-size: 13px;
  color: #5d4037;
  font-weight: 600;
  margin-top: 4px;
}
.food-xp {
  font-size: 11px;
  color: #e65100;
  margin-top: 2px;
}
.food-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ff7043;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  padding: 0 5px;
}

/* ============ P1: 兑换商店 ============ */
.pet-shop {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shop-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fafafa;
  gap: 12px;
}
.shop-emoji {
  font-size: 32px;
}
.shop-info {
  flex: 1;
}
.shop-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.shop-desc {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}
.shop-buy-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffb74d 0%, #ff7043 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.shop-buy-btn:active {
  transform: scale(0.95);
}
.shop-buy-btn.disabled {
  background: #ddd;
  color: #999;
  cursor: not-allowed;
}
.pet-card-extra {
  font-weight: normal;
}

/* 进化层图片 */
.evolve-pet-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 40px rgba(255,203,110,0.8);
  animation: evolvePop 1s ease;
}
@keyframes evolvePop {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ============ P1: 宠物聊天 ============ */
.pet-chat-fab {
  position: fixed;
  right: 16px;
  bottom: 90px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ff8a65 0%, #ff5722 100%);
  color: #fff;
  font-size: 24px;
  box-shadow: 0 4px 16px rgba(255,87,34,0.4);
  cursor: pointer;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.pet-chat-fab:active { transform: scale(0.92); }
.pcf-tip {
  position: absolute;
  right: 62px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 10px;
  white-space: nowrap;
  display: none;
}
.pet-chat-fab:hover .pcf-tip { display: block; }

.pet-chat-overlay {
  position: fixed;
  inset: 0;
  background: #f5f5f5;
  z-index: 9999;
  display: none;
}
.pet-chat-overlay.show { display: flex; }
.pet-chat-panel {
  width: 100%;
  max-width: 420px;
  height: 100vh;
  height: 100dvh;
  background: #f5f5f5;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@keyframes chatSlideUp {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pet-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #ff8a65 0%, #ff7043 100%);
  color: #fff;
  flex-shrink: 0;
}
.pet-chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.6);
}
.pet-chat-title { flex: 1; }
.pct-name { font-size: 16px; font-weight: 700; }
.pct-status { font-size: 11px; opacity: 0.85; }
.pet-chat-close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
}
.pet-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pcm-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 85%;
}
.pcm-msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.pcm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pcm-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.pcm-msg.pet .pcm-bubble {
  background: #fff;
  color: #333;
  border-bottom-left-radius: 4px;
}
.pcm-msg.user .pcm-bubble {
  background: linear-gradient(135deg, #ff8a65 0%, #ff7043 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.pcm-bubble.typing {
  color: #999;
  font-style: italic;
}
.typing-dots i {
  animation: typingDot 1.2s infinite;
  display: inline-block;
}
.typing-dots i:nth-child(2) { animation-delay: 0.2s; }
.typing-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.2; }
  30% { opacity: 1; }
}
.pet-chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  align-items: center;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}
.pci-voice {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fff3e0;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.pci-voice.recording {
  background: #ef5350;
  color: #fff;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,83,80,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(239,83,80,0); }
}
.pci-input {
  flex: 1;
  height: 40px;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 0 16px;
  font-size: 14px;
  outline: none;
}
.pci-input:focus { border-color: #ff8a65; }
.pci-send {
  padding: 0 16px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #ff8a65 0%, #ff7043 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pet-chat-hint {
  text-align: center;
  font-size: 11px;
  color: #bbb;
  padding: 4px 0 8px;
  background: #fff;
  flex-shrink: 0;
}

/* ===== 银行储备徽章（P1修复） ===== */
.pet-bank-wrap{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,0.85);border-radius:20px;padding:6px 14px;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,0.08);height:36px;box-sizing:border-box;}
.pbw-icon{font-size:16px;}
.pbw-label{color:#888;font-size:11px;}
.pbw-value{color:#FF8C42;font-size:16px;font-weight:800;}
.pet-bank{display:none;}

/* ===== 食物可点击提示（P1修复） ===== */
.food-item.has-food {
  border-color: #ffb74d;
  background: linear-gradient(135deg,#fff8e1 0%,#ffe0b2 100%);
  box-shadow: 0 2px 8px rgba(255,152,0,0.2);
}
.food-item.has-food:active {
  transform: scale(0.92);
}
.feed-hint {
  font-size: 10px;
  color: #e65100;
  font-weight: 700;
  margin-top: 3px;
  animation: feedPulse 1.5s ease infinite;
}
@keyframes feedPulse {
  0%,100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ===== 练习页单屏自适应 ===== */
body.page-practice {
  min-height: 100dvh;
  padding-bottom: 80px;
}
body.page-practice .topbar {
  position: fixed;
  padding: calc(10px + env(safe-area-inset-top)) 16px 12px;
}
body.page-practice .topbar h1 { font-size: 18px; }
body.page-practice .topbar .sub { font-size: 11px; margin-top: 2px; }
.ledou-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid rgba(255,255,255,0.7);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  flex-shrink: 0;
  animation: ledouBounce 2s ease-in-out infinite;
}
@keyframes ledouBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-3deg); }
  75% { transform: translateY(-3px) rotate(3deg); }
}
body.page-practice .grade-tabs {
  flex-shrink: 0;
  padding: 8px 12px 0;
  gap: 6px;
}
body.page-practice .grade-tab {
  padding: 5px 14px;
  font-size: 13px;
}
body.page-practice .volume-tabs {
  flex-shrink: 0;
  padding: 6px 12px 0;
  gap: 6px;
}
body.page-practice .volume-tab {
  padding: 5px 0;
  font-size: 13px;
}
body.page-practice .unit-bar {
  flex-shrink: 0;
  padding: 6px 8px;
  gap: 4px;
}
body.page-practice .unit-chip {
  padding: 5px 2px;
}
body.page-practice .unit-chip .u-name { font-size: 10px; }
body.page-practice .unit-chip .u-icon { font-size: 16px; }
body.page-practice .unit-chip .u-icon img { width: 32px; height: 32px; mix-blend-mode: multiply; }
body.page-practice .unit-chip.active .u-icon img { mix-blend-mode: normal; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }

/* 主内容区 */
body.page-practice .card,
body.page-practice .actions {
  flex-shrink: 1;
  min-height: 0;
}
body.page-practice #practiceCard {
  margin: 8px 12px 6px;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
body.page-practice #practiceCard .sentence-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
}
body.page-practice .scene-tag {
  font-size: 11px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
body.page-practice .sentence {
  font-size: 20px;
  margin-bottom: 6px;
  line-height: 1.3;
}
body.page-practice .sentence-cn {
  font-size: 13px;
  margin-bottom: 8px;
}
body.page-practice .tip-box {
  padding: 7px 10px;
  font-size: 12px;
  margin-bottom: 6px;
}
body.page-practice .phonics-box {
  padding: 6px 10px;
  font-size: 12px;
}
body.page-practice .play-row {
  margin: 6px 0 0;
  gap: 12px;
}
body.page-practice .play-btn {
  width: 44px;
  height: 44px;
  font-size: 20px;
  margin: 0;
  box-shadow: 0 4px 12px rgba(78,205,196,0.35);
}
body.page-practice .play-btn-slow {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

/* 麦克风卡片 */
body.page-practice .card:nth-of-type(2) {
  margin: 4px 12px;
  padding: 10px 16px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.page-practice .mic-section {
  padding: 4px 0;
  flex-shrink: 0;
}
body.page-practice .mic-btn {
  width: 56px;
  height: 56px;
  font-size: 26px;
  box-shadow: 0 4px 14px rgba(255,107,157,0.35);
}
body.page-practice .mic-hint {
  font-size: 12px;
  margin-top: 4px;
}
body.page-practice .feedback {
  padding: 8px 10px;
  margin-top: 6px;
  max-height: 32vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #F8FFFE;
  border-radius: 14px;
  border: 2px solid #E0F7F5;
  text-align: center;
}
body.page-practice .feedback.show {
  display: flex;
  flex-direction: column;
  animation: popIn .3s ease;
}
body.page-practice .stars { font-size: 22px; margin-bottom: 2px; }
body.page-practice .score-num { font-size: 24px; }
body.page-practice .feedback-msg { font-size: 13px; margin-top: 4px; line-height: 1.4; }
body.page-practice .replay-voice { margin-top: 6px; padding: 6px 14px; font-size: 12px; }
body.page-practice .word-result { font-size: 12px; margin-top: 6px; line-height: 1.4; }

/* 操作按钮固定底部 */
body.page-practice .actions {
  padding: 6px 12px 4px;
  gap: 10px;
  flex-shrink: 0;
  background: var(--bg);
}
body.page-practice .btn {
  padding: 10px;
  font-size: 14px;
}

/* 进度条卡片 */
body.page-practice #progressCard {
  margin: 0 12px 8px;
  padding: 8px 16px;
  flex-shrink: 0;
}

/* 点评出现时：隐藏进度卡 + 底部导航，释放空间给点评，确保按钮可见 */
body.page-practice.has-feedback {
  padding-bottom: 4px;
}
body.page-practice.has-feedback .tabbar {
  display: none;
}
body.page-practice.has-feedback #progressCard {
  display: none;
}
body.page-practice.has-feedback #practiceCard {
  flex: 0 1 auto;
}
body.page-practice.has-feedback #practiceCard .sentence-box {
  padding: 10px 18px;
}
body.page-practice #progressCard .card-title {
  font-size: 13px;
  margin-bottom: 6px;
}
body.page-practice .progress-bar {
  height: 6px;
  margin-top: 4px;
}
body.page-practice .progress-text {
  font-size: 11px;
  margin-top: 4px;
}

/* 底部导航栏预留空间已在body padding-bottom定义 */

/* 超小屏适配（高度<640px） */
@media (max-height: 640px) {
  body.page-practice .sentence { font-size: 17px; }
  body.page-practice .mic-btn { width: 44px; height: 44px; font-size: 20px; }
  body.page-practice .play-btn { width: 34px; height: 34px; font-size: 15px; }
  body.page-practice .stars { font-size: 18px; }
  body.page-practice .score-num { font-size: 20px; }
  body.page-practice .feedback-msg { font-size: 12px; }
  body.page-practice .word-result { font-size: 11px; }
}

/* ===== 8只宠物领养网格（P2） ===== */
.adopt-pet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 8px 0;
}
.adopt-pet-card {
  background: #fff;
  border: 2px solid #f0f0f0;
  border-radius: 16px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.adopt-pet-card.selected {
  border-color: #FF8C42;
  background: linear-gradient(135deg, #fff8e1 0%, #ffe0b2 100%);
  box-shadow: 0 4px 12px rgba(255,140,66,0.3);
  transform: translateY(-2px);
}
.apc-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}
.adopt-pet-card.selected .apc-img {
  box-shadow: 0 0 0 3px rgba(255,140,66,0.2);
}
.apc-name {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-top: 8px;
}
.apc-species {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.adopt-pet-card.selected .apc-name { color: #e65100; }

/* 更换宠物弹层 */
.pet-switch-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #FFF8F0 0%, #FFE8C8 100%);
  z-index: 1000;
  display: flex;
}
.pet-switch-card {
  background: #fff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.psw-top {
  flex-shrink: 0;
  padding: 24px 20px 12px;
  background: linear-gradient(180deg, #FFF8F0, #FFFEF8);
}
.psw-middle {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 16px;
}
.psw-bottom {
  flex-shrink: 0;
  padding: 12px 20px 28px;
  background: #fff;
  border-top: 1px solid #f5f0e8;
}
.psw-title {
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 8px;
}
.psw-warn {
  background: #fff3cd;
  color: #856404;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.psw-cancel {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: #f5f5f5;
  color: #666;
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

/* ===== 家长页 - 更多服务 ===== */
.more-service-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.more-service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #F7FAFF 0%, #EEF4FF 100%);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.more-service-item:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(102,126,234,0.15);
}
.msi-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.msi-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.msi-title {
  font-size: 16px;
  font-weight: 700;
  color: #2d3436;
}
.msi-desc {
  font-size: 12px;
  color: #888;
}
.msi-arrow {
  font-size: 24px;
  color: #b2bec3;
  flex-shrink: 0;
  line-height: 1;
}
.more-service-footer {
  text-align: center;
  font-size: 12px;
  color: #999;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}
.more-service-footer a {
  color: #667eea;
  text-decoration: none;
}
.more-service-footer a:hover {
  text-decoration: underline;
}
.msf-sep {
  margin: 0 8px;
  color: #ddd;
}

/* ===== 主题切换按钮 ===== */
.theme-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.theme-btn:active {
  transform: scale(0.88) rotate(15deg);
  background: rgba(255,255,255,0.4);
}

/* 练习页顶部布局 */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* 醒目换皮肤胶囊按钮 */
.skin-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 20px;
  background: linear-gradient(135deg, #ff6b9d 0%, #ffa726 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(255,107,157,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: all 0.2s;
  animation: skinPulse 2.5s ease-in-out infinite;
}
.skin-btn-icon {
  font-size: 16px;
  line-height: 1;
}
.skin-btn-text {
  line-height: 1;
  white-space: nowrap;
}
.skin-btn:active {
  transform: scale(0.92);
  box-shadow: 0 1px 4px rgba(255,107,157,0.3);
}
@keyframes skinPulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(255,107,157,0.4), inset 0 1px 0 rgba(255,255,255,0.3); }
  50% { box-shadow: 0 3px 16px rgba(255,107,157,0.7), inset 0 1px 0 rgba(255,255,255,0.3); }
}

/* 主题背景下，内容卡片增加可读性 */
body[class*="theme-"] .card {
  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body[class*="theme-"] .grade-tabs,
body[class*="theme-"] .volume-tabs,
body[class*="theme-"] .unit-bar {
  position: relative;
  z-index: 1;
}

/* 底部导航在主题背景上的可读性 */
body[class*="theme-"] .bottom-nav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 星空主题：深色背景下未选中tab文字增强可读性 */
body.theme-C .grade-tab:not(.active),
body.theme-C .volume-tab:not(.active) {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.45);
}
body.theme-C .unit-chip:not(.active) .u-name {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

/* ===== 游戏分类两级菜单 ===== */
.game-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--primary, #4a90d9), #3a7bd5);
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(74,144,217,0.35);
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  z-index: 5;
  position: relative;
}
.game-back-btn:active { transform: scale(0.95); box-shadow: 0 1px 4px rgba(74,144,217,0.3); }

/* 引擎类游戏题目面板：布局与普通面板完全一致 */
.engine-panel .game-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.engine-panel .ctrl-left,
.engine-panel .ctrl-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.engine-panel .mic-hint {
  display: block;
}
#gameMenu .category-card {
  position: relative;
}
#gameMenu .category-card .game-card-icon {
  width: 64px !important;
  height: 64px !important;
  font-size: 32px !important;
  border-radius: 20px !important;
}
#gameMenu .category-card .game-card-name {
  font-size: 16px !important;
}
#gameMenu .category-card .game-card-desc {
  font-size: 12px !important;
}
#gameMenu .category-card::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -20%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
/* 星空主题下游戏菜单文字可读性 */
body.theme-C #gameMenu .game-card-name,
body.theme-C #gameMenu .card-title {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
body.theme-C #gameMenu .game-card-desc {
  color: rgba(255,255,255,0.8) !important;
}
body.theme-C #gameMenu .game-card {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}
body.theme-C .game-back-btn {
  color: #fff !important;
  background: linear-gradient(135deg, #4a90d9, #3a7bd5) !important;
  border: none !important;
}

/* =========================================================
   游戏页（game.html）单屏布局：顶部固定 + 列表独立滚动
   仅作用于 body.page-game（游戏菜单状态）
   body.in-game 由原规则隐藏 topbar/tabs/unit-bar，互不冲突
   ========================================================= */
html body.page-game {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;          /* 解除全局 body padding-bottom:80px，避免双白边 */
  max-width: 420px;
}
/* 顶部整块：topbar + 年级 + 册别 + 单元，固定不滚动 */
body.page-game .topbar,
body.page-game .grade-tabs,
body.page-game .volume-tabs,
body.page-game .unit-bar {
  flex-shrink: 0;
}
body.page-game .topbar {
  position: relative;         /* 父级已 overflow:hidden，不再依赖 sticky */
  z-index: 10;
}
/* 游戏列表容器：占满剩余高度并独立滚动 */
body.page-game #gameMenu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* 顶部紧挨 unit-bar，底部留出 tabbar(约60px) + 安全区 */
  padding: 4px 0 calc(68px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
/* 菜单卡片去掉左右 margin，跟随滚动容器，避免双重滚动/留白 */
body.page-game #gameMenu .game-menu-card.card {
  margin: 8px 12px 0;
  padding: 16px;
}
/* 游戏进行/结算界面由 in-game 接管，不套用此布局 */
body.page-game #gamePlay,
body.page-game #gameResult { display: none; }

/* =========================================================
   游戏卡片视觉增强（菜单两级通用）
   ========================================================= */
body.page-game #gameMenu .game-grid {
  gap: 12px;
}
body.page-game #gameMenu .game-card {
  position: relative;
  background: rgba(255,255,255,0.96);
  border-radius: 20px;
  padding: 16px 10px 14px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  border: 2px solid rgba(255,255,255,0.8);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.page-game #gameMenu .game-card::after {
  /* 顶部一条活泼的彩条，增强卡片感，不影响点击 */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--pink), var(--secondary));
  opacity: 0.9;
}
body.page-game #gameMenu .game-card:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border-color: var(--primary);
}
/* emoji 图标：更大更清晰，自带圆角投影 */
body.page-game #gameMenu .game-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  margin: 4px auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.35);
}
/* 游戏名字：醒目、加粗、放大、强对比 */
body.page-game #gameMenu .game-card-name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: #1f2937;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  padding: 2px 4px;
  /* 防止个别主题把 --text 设成浅色 */
  word-break: keep-all;
}
body.page-game #gameMenu .game-card-desc {
  font-size: 12px;
  line-height: 1.35;
  color: #4b5563;
  margin-top: 5px;
  padding: 0 2px;
}
body.page-game #gameMenu .game-card-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 大类卡：图标略大、名字更醒目（覆盖原 !important 规则） */
body.page-game #gameMenu .category-card .game-card-icon {
  width: 68px !important;
  height: 68px !important;
  font-size: 36px !important;
  border-radius: 20px !important;
}
body.page-game #gameMenu .category-card .game-card-name {
  font-size: 18px !important;
}
body.page-game #gameMenu .category-card .game-card-desc {
  font-size: 12px !important;
}

/* ===== 主题皮肤适配：保证卡片名字在各种背景下清晰可读 ===== */
/* 通用：任何主题下卡片本体用不透明白底，名字用深色 */
body[class*="theme-"].page-game #gameMenu .game-card {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(255,255,255,0.85) !important;
}
body[class*="theme-"].page-game #gameMenu .game-card-name {
  color: #1f2937 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6) !important;
}
body[class*="theme-"].page-game #gameMenu .game-card-desc {
  color: #4b5563 !important;
}
/* 星空主题(theme-C)原规则把卡片做成半透明、名字白色；这里覆盖为白底深字以保证清晰 */
body.theme-C.page-game #gameMenu .game-card {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
}
body.theme-C.page-game #gameMenu .game-card-name,
body.theme-C.page-game #gameMenu .card-title {
  color: #1f2937 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6) !important;
}
body.theme-C.page-game #gameMenu .game-card-desc {
  color: #4b5563 !important;
}

/* ===== 练习页纠错列表（全量纠错，手机直接可见） ===== */
.corr-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.corr-item {
  font-size: 12px;
  line-height: 1.4;
  color: #b45309;
  background: #fef3c7;
  border-radius: 8px;
  padding: 5px 8px;
  text-align: left;
}

/* 当局进度药丸 */
.session-progress {
  align-self: center;
  font-size: 12px;
  font-weight: 700;
  color: #0d9488;
  background: linear-gradient(135deg, #ccfbf1, #99f6e4);
  padding: 3px 14px;
  border-radius: 20px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 4px rgba(13,148,136,0.18);
}

/* ===== 弹窗移动端适配（max-width:420px） ===== */
@media (max-width: 420px) {
  .adopt-overlay,
  .pet-switch-overlay {
    padding: 0;
  }
  .adopt-card {
    border-radius: 0;
  }
  .adopt-top {
    padding: 20px 16px 10px;
  }
  .adopt-bottom {
    padding: 10px 16px 24px;
  }
  .adopt-emoji {
    font-size: 48px;
    margin-bottom: 6px;
  }
  .adopt-title {
    font-size: 20px;
    margin-bottom: 8px;
  }
  .adopt-desc {
    font-size: 13px;
    margin-bottom: 14px;
  }
  .adopt-pet-grid {
    gap: 6px;
    margin: 10px 0;
  }
  .adopt-pet-card {
    padding: 6px 2px;
    border-radius: 12px;
  }
  .apc-img {
    width: 72px;
    height: 72px;
  }
  .apc-name {
    font-size: 13px;
    margin-top: 6px;
  }
  .apc-species {
    font-size: 11px;
  }
  .adopt-name-input {
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 12px;
  }
  .adopt-btn {
    padding: 12px;
    font-size: 15px;
  }
  .pet-switch-card {
    border-radius: 0;
  }
  .psw-top {
    padding: 20px 16px 10px;
  }
  .psw-bottom {
    padding: 10px 16px 24px;
  }
  .psw-title {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .psw-warn {
    font-size: 11px;
    padding: 7px 10px;
    margin-bottom: 10px;
  }
  .psw-cancel {
    padding: 11px;
    font-size: 14px;
    margin-top: 10px;
  }
}

/* ===== 隐藏引擎游戏内部重复的播放/录音/回放按钮，统一使用全局面板 ===== */
/* 第一批：xxx-btn-play / xxx-btn-mic / xxx-btn-replay / xxx-btn-next 模式 */
body.in-game #gameCanvas [class*="-btn-play"],
body.in-game #gameCanvas [class*="-btn-mic"],
body.in-game #gameCanvas [class*="-btn-replay"],
body.in-game #gameCanvas [class*="-btn-next"],
/* 大转盘 w- 前缀 */
body.in-game #gameCanvas .w-play,
body.in-game #gameCanvas .w-mic,
body.in-game #gameCanvas .w-replay,
/* 射击/投篮：短前缀 xxx-play / xxx-mic */
body.in-game #gameCanvas .shooter-play,
body.in-game #gameCanvas .shooter-mic,
body.in-game #gameCanvas .bk-play,
body.in-game #gameCanvas .bk-mic,
/* 飞行冒险 */
body.in-game #gameCanvas .flyer-play,
body.in-game #gameCanvas .flyer-mic,
/* 火箭发射 */
body.in-game #gameCanvas .er-replay,
body.in-game #gameCanvas .er-mic,
/* 泡泡消除 */
body.in-game #gameCanvas .eb-mic,
body.in-game #gameCanvas .eb-replay,
/* 律动节拍 */
body.in-game #gameCanvas .rhythm-mic-btn,
/* 律动节拍的重播按钮：无class，用inline style定位 */
body.in-game #gameCanvas div[style*="right:24px"][style*="bottom:32px"],
/* 小厨师/单词叠高塔：无class的mic按钮，用inline style定位 */
body.in-game #gameCanvas div[style*="bottom:14px"][style*="border-radius:50%"][style*="font-size:28px"] {
  display: none !important;
}

/* HUD 玩法帮助按钮 */
.game-hud { position: relative; }
.hud-help-btn {
  flex: 0 0 auto;
  margin-left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.hud-help-btn:active { background: rgba(255,255,255,0.45); }

/* 玩法说明弹层 */
.game-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.game-help-card {
  background: linear-gradient(160deg, #fff8e8, #fff);
  border-radius: 24px;
  padding: 28px 24px 20px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 50px rgba(0,0,0,0.3);
  border: 3px solid rgba(255,200,50,0.4);
  animation: helpPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes helpPop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.ghc-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15));
}
.ghc-title {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 12px;
}
.ghc-body {
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
  text-align: left;
  background: rgba(255,250,235,0.8);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  white-space: pre-line;
}
.ghc-btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #FFD93D, #FF8C00);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,140,0,0.35);
  -webkit-tap-highlight-color: transparent;
}
.ghc-btn:active { transform: scale(0.96); }
@media (max-width: 420px) {
  .game-help-card { padding: 22px 18px 16px; }
  .ghc-emoji { font-size: 48px; }
  .ghc-title { font-size: 18px; }
  .ghc-body { font-size: 14px; padding: 12px 14px; }
}
/* ===== 伙伴乐园 ===== */
.paradise-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #FFF8F0 0%, #FFE8D6 100%);
  z-index: 9998;
  display: none;
  flex-direction: column;
  max-width: 420px;
  margin: 0 auto;
  animation: paradiseFadeIn 0.3s ease;
}
.paradise-overlay.show {
  display: flex;
}
@keyframes paradiseFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.paradise-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 2px 12px rgba(255,107,53,0.3);
  flex-shrink: 0;
}
.paradise-back {
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.paradise-back:active { transform: scale(0.92); }
.paradise-header-placeholder {
  width: 36px;
}
.paradise-title {
  flex: 1;
  text-align: center;
}
.paradise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  align-content: start;
}
.paradise-card {
  background: #fff;
  border-radius: 16px;
  padding: 12px 8px 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(255,140,66,0.1);
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 2px solid transparent;
  align-self: start;
}
.paradise-card:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(255,140,66,0.2);
  border-color: #FFB088;
}
.paradise-card-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #FFE0C2;
  display: block;
  margin: 0 auto 6px;
  background: #FFF3E8;
}
.paradise-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #2D3436;
  margin-bottom: 1px;
}
.paradise-card-species {
  font-size: 11px;
  color: #999;
  margin-bottom: 4px;
}
.paradise-card-growth {
  font-size: 12px;
  color: #FF6B35;
  font-weight: 700;
}
.paradise-card-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #B0BEC5, #78909C);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.paradise-card-btn {
  margin-top: 8px;
  width: 100%;
  padding: 6px 0;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.paradise-card-btn:active {
  transform: scale(0.95);
  opacity: 0.85;
}
.paradise-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 20px;
  text-align: center;
}
.paradise-empty-emoji {
  font-size: 48px;
  margin-bottom: 16px;
}
.paradise-empty-text {
  font-size: 14px;
  color: #999;
  line-height: 1.8;
}

/* ===== 成长日记弹层 ===== */
.paradise-diary-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  max-width: 420px;
  margin: 0 auto;
}
.paradise-diary-overlay.show {
  display: flex;
}
.paradise-diary-card {
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  animation: diaryPopIn 0.3s ease;
}
@keyframes diaryPopIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.pdc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #4ECDC4, #44B0A8);
  color: #fff;
  flex-shrink: 0;
}
.pdc-back {
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pdc-back:active { transform: scale(0.92); }
.pdc-title {
  font-size: 17px;
  font-weight: 800;
}
.pdc-placeholder {
  width: 32px;
}
.pdc-pet-info {
  text-align: center;
  padding: 20px 16px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.pdc-pet-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #E0F7F5;
  margin-bottom: 8px;
}
.pdc-pet-name {
  font-size: 18px;
  font-weight: 800;
  color: #2D3436;
}
.pdc-pet-species {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}
.pdc-pet-growth {
  font-size: 14px;
  color: #FF6B35;
  font-weight: 700;
  margin-top: 6px;
}
.diary-timeline {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.diary-timeline::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: linear-gradient(180deg, #4ECDC4, #E0F7F5);
  border-radius: 1px;
}
.diary-entry {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  position: relative;
}
.diary-entry:last-child {
  margin-bottom: 0;
}
.diary-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #4ECDC4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 12px;
  z-index: 1;
  margin-left: 18px;
}
.diary-content {
  flex: 1;
  background: #F8FFFE;
  border-radius: 12px;
  padding: 8px 12px;
  border: 1px solid #E0F7F5;
}
.diary-text {
  font-size: 14px;
  color: #2D3436;
  line-height: 1.5;
}
.diary-time {
  font-size: 11px;
  color: #aaa;
  margin-top: 4px;
}
.diary-empty {
  text-align: center;
  color: #bbb;
  font-size: 14px;
  padding: 30px 0;
}
.pdc-chat-btn {
  margin: 12px 16px 16px;
  padding: 13px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,107,53,0.35);
  flex-shrink: 0;
}
.pdc-chat-btn:active {
  transform: scale(0.97);
}
@media (max-width: 420px) {
  .paradise-diary-card {
    max-height: 90vh;
    border-radius: 20px;
  }
  .pdc-pet-img {
    width: 64px;
    height: 64px;
  }
}

/* ===== v3 分层纠错：折叠发音细节 ===== */
.corr-detail-toggle {
  margin-top: 6px;
  font-size: 12px;
}
.corr-detail-hint {
  display: inline-block;
  color: #FF8C42;
  cursor: pointer;
  padding: 4px 10px;
  background: #FFF5EC;
  border-radius: 12px;
  border: 1px dashed #FFD0A8;
}
.corr-detail-toggle .corr-detail-list {
  display: none;
  margin-top: 6px;
  padding: 8px 10px;
  background: #FFFBF7;
  border-radius: 10px;
  max-height: 120px;
  overflow-y: auto;
}
.corr-detail-toggle.open .corr-detail-list {
  display: block;
}
.corr-detail-item {
  font-size: 11px;
  color: #999;
  line-height: 1.6;
  padding: 2px 0;
}
.word-chip small {
  font-size: 10px;
}

/* ===== 宠物视频启动层 ===== */
.pet-video-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 99999;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity .25s ease;
}
.pet-video-overlay.show {
  opacity: 1;
}
.pet-video-inner {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pet-video-el {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  background: #000;
  display: block;
}
.pet-video-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 18px;
  line-height: 36px;
  text-align: center;
  padding: 0;
  z-index: 2;
  cursor: pointer;
}
.pet-video-close:active {
  background: rgba(0, 0, 0, 0.7);
}
.pet-video-hint {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  pointer-events: none;
  z-index: 2;
}

/* ===== 今日任务行内"去"按钮（替代底部固定按钮） ===== */
.pet-task {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pet-task .pt-body {
  flex: 1;
  min-width: 0;
}
.pt-go-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  background: #f0f0f0;
  color: #888;
  border: none;
  cursor: pointer;
  transition: transform .1s, box-shadow .15s;
}
.pt-go-btn:active {
  transform: scale(0.94);
}
.pt-go-btn.primary {
  background: linear-gradient(135deg, #FF8C42 0%, #ff6b3d 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,107,61,0.3);
}
.pet-task.done .pt-go-btn {
  background: #E8F5E9;
  color: #4CAF50;
}

/* 任务进度条（实际JS使用的class） */
.pt-progress-track {
  height: 6px;
  background: #F0F0F0;
  border-radius: 3px;
  margin-top: 5px;
  overflow: hidden;
}
.pt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #81C784, #66BB6A);
  border-radius: 3px;
  transition: width 0.4s;
}
.pet-task.done .pt-progress-fill {
  background: linear-gradient(90deg, #FFD54F, #FF9800);
}
.pt-meta {
  font-size: 11px;
  color: #999;
  margin-top: 3px;
}

/* ============ 宠物页快捷食物按钮 + 弹出面板 ============ */
.pet-quick-btns {
  display: flex;
  gap: 8px;
  margin-top: 3px;
  padding: 0 4px;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}
.pqb-btn {
  flex: 1;
  max-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  border: none;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--primary, #FF8C42), #FF6B35);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255,107,53,0.35);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.pqb-btn:active {
  transform: scale(0.96);
}
.pqb-btn .pqb-icon {
  font-size: 16px;
}
.pet-quick-btns .pqb-btn.active {
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  color: #fff;
  box-shadow: 0 3px 12px rgba(255,107,53,0.35);
}

/* 食物/商店居中弹窗 */
.pet-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pet-modal-overlay.show {
  opacity: 1;
}
.pet-modal {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 380px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  transform: scale(0.92) translateY(10px);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.pet-modal-overlay.show .pet-modal {
  transform: scale(1) translateY(0);
}
.pet-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  flex-shrink: 0;
}
.pet-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}
.pet-modal-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #F5F5F5;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.pet-modal-close:active {
  background: #E0E0E0;
}
.pet-modal-body {
  padding: 4px 16px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============ 家长页顶部会员横幅 ============ */
.parent-member-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FFD54F 0%, #FF8A65 100%);
  color: #fff;
  text-decoration: none;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(255,138,101,0.35);
  transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.parent-member-banner:active {
  transform: scale(0.98);
}
.pmb-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.pmb-icon {
  font-size: 30px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.pmb-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pmb-title {
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.pmb-desc {
  font-size: 11px;
  opacity: 0.9;
}
.pmb-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  background: rgba(255,255,255,0.95);
  color: #E65100;
  font-size: 13px;
  font-weight: 700;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* ============ 家长页：趋势图 ============ */
.chart-panel {
  background: linear-gradient(180deg, #FFF8F0 0%, #FFF1E0 100%);
  border-radius: 14px;
  padding: 16px 12px 10px;
  border: 1px solid #FFE8CC;
}
.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 130px;
  gap: 4px;
  padding-bottom: 4px;
}
.chart-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.chart-bar {
  width: 100%;
  max-width: 22px;
  background: linear-gradient(180deg, #FFB74D 0%, #FF7043 100%);
  border-radius: 6px 6px 3px 3px;
  min-height: 4px;
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.chart-bar.zero {
  background: #FFE8D0;
  min-height: 4px;
}
.chart-bar.today {
  background: linear-gradient(180deg, #FF6B35 0%, #E53935 100%);
  box-shadow: 0 2px 8px rgba(255,107,53,0.4);
}
.chart-bar-value {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: #E65100;
  white-space: nowrap;
}
.chart-labels {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 8px;
}
.chart-labels span {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: #B8860B;
}
.chart-labels span.today {
  color: #E65100;
  font-weight: 700;
}

/* 宠物成长迷你卡（保留样式以备后用） */
.pet-growth-mini {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pgm-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255,152,0,0.2);
}
.pgm-info {
  flex: 1;
  min-width: 0;
}
.pgm-name {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.pgm-level {
  font-size: 12px;
  color: #FF9800;
  font-weight: 600;
  margin-bottom: 6px;
}
.pgm-bar-wrap {
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}
.pgm-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD54F 0%, #FF9800 100%);
  border-radius: 4px;
  transition: width 0.6s ease;
}
.pgm-text {
  font-size: 11px;
  color: #999;
}

.play-mini--muted {
  opacity: 0.35;
  cursor: default;
}
.top-voice-item.is-demo .tv-text {
  color: #999;
}

/* ============================================================
   家长页视觉升级 v2 (2026-08-15)
   统一配色、卡片质感、间距与层次
   ============================================================ */

/* 整页暖米背景，让卡片浮起来 */
body.page-parent,
body:has(.parent-section) {
  background: linear-gradient(180deg, #FFF6EE 0%, #FFF1E6 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
.parent-section {
  padding: 14px 14px 100px;
}

/* —— 顶部栏：更深的暖橙渐变 + 更柔阴影 —— */
.topbar {
  background: linear-gradient(135deg, #FF7A45 0%, #FF5722 60%, #F4511E 100%);
  padding: calc(18px + env(safe-area-inset-top)) 20px 24px;
  border-radius: 0 0 32px 32px;
  box-shadow: 0 6px 24px rgba(244,81,30,0.25);
}
.topbar h1 { font-size: 22px; letter-spacing: 0.5px; }
.topbar .sub { font-size: 13px; opacity: 0.92; margin-top: 6px; }

/* —— 会员横幅：金黄渐变更突出 —— */
.parent-member-banner {
  background: linear-gradient(135deg, #FFC107 0%, #FF9800 50%, #FF7043 100%);
  border-radius: 18px;
  padding: 14px 18px;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(255,152,0,0.3);
  position: relative;
  overflow: hidden;
}
.parent-member-banner::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -20px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
  border-radius: 50%;
}
.pmb-btn {
  background: #fff;
  color: #E65100;
  padding: 9px 18px;
  border-radius: 22px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

/* —— 时间标签：浅色胶囊容器 + 白色滑块 —— */
.report-tabs {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 5px;
  gap: 4px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(255,107,53,0.08);
  border: 1px solid rgba(255,255,255,0.6);
}
.report-tab {
  padding: 9px 0;
  font-size: 14px;
  font-weight: 600;
  color: #8D6E63;
  border-radius: 12px;
  transition: all 0.25s;
}
.report-tab.active {
  background: linear-gradient(135deg, #FF8C42, #FF5722);
  color: #fff;
  box-shadow: 0 3px 12px rgba(255,87,34,0.35);
}

/* —— 日期选择 —— */
.date-picker-wrap {
  background: #fff;
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  border: 1px solid #FFE8D6;
}
.date-picker-wrap input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid #FFE0C2;
  border-radius: 10px;
  font-size: 14px;
  background: #FFFBF7;
  color: #5D4037;
}
.date-picker-wrap input:focus {
  outline: none;
  border-color: #FF8C42;
}
.date-picker-wrap .btn-primary {
  background: linear-gradient(135deg, #FF8C42, #FF5722) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255,87,34,0.25);
}

/* —— 通用卡片：更圆润、更柔阴影、细边框 —— */
.report-card {
  background: #fff;
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(215,140,80,0.08),
              0 1px 3px rgba(0,0,0,0.03);
  border: 1px solid rgba(255,224,178,0.5);
}
.report-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #5D4037;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* —— 汇总：上排渐变数字 —— */
.summary-top {
  background: linear-gradient(135deg, #FF8C42 0%, #FF5722 100%);
  border-radius: 16px;
  padding: 20px 8px 18px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(255,87,34,0.25),
              inset 0 1px 0 rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}
.summary-top-item:not(:last-child)::after {
  background: rgba(255,255,255,0.25);
  width: 1px;
}
.st-num {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.st-label {
  font-size: 12px;
  color: rgba(255,255,255,0.92);
  margin-top: 4px;
  font-weight: 500;
}

/* —— 汇总：下排三小卡 —— */
.summary-bottom { gap: 10px; }
.summary-card-item {
  background: linear-gradient(180deg, #FFFBF7 0%, #FFF4EA 100%);
  border-radius: 14px;
  padding: 14px 6px 12px;
  border: 1px solid #FFE8D0;
  gap: 6px;
}
.sci-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(255,140,66,0.12);
}
.sci-num {
  font-size: 19px;
  font-weight: 800;
  color: #E65100;
}
.sci-label {
  font-size: 11px;
  color: #8D6E63;
  font-weight: 500;
}

/* —— 趋势图 panel —— */
.chart-panel {
  background: linear-gradient(180deg, #FFFAF3 0%, #FFF1E0 100%);
  border-radius: 16px;
  padding: 18px 14px 12px;
  border: 1px solid #FFE0B8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.chart-bars { height: 130px; gap: 5px; }
.chart-bar {
  max-width: 22px;
  background: linear-gradient(180deg, #FFB74D 0%, #FF7043 100%);
  border-radius: 7px 7px 4px 4px;
  box-shadow: 0 2px 4px rgba(255,112,67,0.2);
}
.chart-bar.zero {
  background: #F5E4D0;
  box-shadow: none;
}
.chart-bar.today {
  background: linear-gradient(180deg, #FF6B35 0%, #D84315 100%);
  box-shadow: 0 3px 10px rgba(216,67,21,0.4);
}
.chart-bar-value {
  font-size: 10px;
  color: #BF360C;
  font-weight: 700;
  top: -17px;
}
.chart-labels span {
  font-size: 10px;
  color: #A1887F;
}
.chart-labels span.today {
  color: #D84315;
  font-weight: 700;
}

/* —— AI私教点评 —— */
.ai-coach-box {
  background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
  border-radius: 16px;
  padding: 16px 18px;
  border: 1px solid #FFE082;
  gap: 14px;
  position: relative;
}
.ai-coach-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #FFF8E1 100%);
  font-size: 26px;
  box-shadow: 0 3px 10px rgba(255,193,7,0.25);
  border: 2px solid #fff;
}
.ai-coach-text {
  font-size: 13.5px;
  line-height: 1.85;
  color: #4E342E;
}

/* —— TOP5 跟读小明星 —— */
.top-voices { gap: 8px; }
.top-voice-item {
  background: linear-gradient(180deg, #FFFBF7 0%, #FFF5EC 100%);
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid #FFE8D0;
  gap: 12px;
  transition: transform 0.15s;
}
.top-voice-item:active { transform: scale(0.99); }
.tv-rank {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.tv-text {
  font-size: 13.5px;
  color: #4E342E;
  font-weight: 600;
}
.tv-time { font-size: 11px; color: #BCAAA4; }
.tv-score {
  font-size: 22px;
  color: #E65100;
  font-weight: 800;
}
.play-mini {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C42, #FF5722);
  color: #fff;
  font-size: 16px;
  box-shadow: 0 3px 8px rgba(255,87,34,0.3);
  border: none;
  cursor: pointer;
}
.play-mini:active { transform: scale(0.92); }
.play-mini--muted {
  background: #E0E0E0 !important;
  box-shadow: none !important;
  opacity: 0.6;
}
.top-voice-item.is-demo .tv-text { color: #9E9E9E; }

/* —— 语音记录 —— */
.voice-record-filter {
  background: #FFFBF7;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid #FFE8D0;
  gap: 8px;
  margin-bottom: 10px;
}
.voice-record-filter input[type="date"] {
  border: 1.5px solid #FFE0C2;
  border-radius: 8px;
  padding: 7px 10px;
  background: #fff;
  font-size: 13px;
  color: #5D4037;
}
.voice-source-tabs {
  display: flex;
  gap: 6px;
  background: #FFF4EA;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 12px;
}
.vst-btn {
  flex: 1;
  padding: 9px 0;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #8D6E63;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
#tabChat.vst-active {
  background: linear-gradient(135deg, #81D4FA, #29B6F6);
  color: #fff;
  box-shadow: 0 2px 8px rgba(41,182,246,0.3);
}
#tabPractice.vst-active {
  background: linear-gradient(135deg, #FF8C42, #FF5722);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,87,34,0.3);
}
.voice-record-list { display: flex; flex-direction: column; gap: 10px; }
.vr-date {
  font-size: 13px;
  font-weight: 700;
  color: #5D4037;
  padding: 6px 4px;
  border-bottom: 1px dashed #FFE0C2;
}
.vr-item {
  background: #FFFBF7;
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid #FFE8D0;
}
.vr-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C42, #FF5722);
  color: #fff;
  border: none;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(255,87,34,0.25);
}
.vr-time { font-size: 12px; color: #8D6E63; font-weight: 600; }
.vr-dur { font-size: 11px; color: #BCAAA4; }
.vr-score {
  font-size: 13px;
  font-weight: 700;
  color: #E65100;
  background: #FFF3E0;
  padding: 2px 8px;
  border-radius: 10px;
}
.vr-text {
  font-size: 13px;
  color: #4E342E;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #FFE0C2;
  line-height: 1.6;
}
.vr-tag-practice {
  background: #FFE0B2 !important;
  color: #E65100 !important;
}
.vr-tag-chat {
  background: #B3E5FC !important;
  color: #0277BD !important;
}

/* —— 页脚 —— */
.more-service-footer {
  text-align: center;
  font-size: 11px;
  color: #BCAAA4;
  padding: 18px 0 8px;
}
.more-service-footer a { color: #A1887F; }

/* 小屏微调 */
@media (max-width: 360px) {
  .st-num { font-size: 26px; }
  .sci-num { font-size: 17px; }
  .report-card { padding: 16px; }
  .pmb-title { font-size: 14px; }
  .pmb-btn { padding: 7px 12px; font-size: 12px; }
}

/* ===== 头像+召唤预览按钮布局 ===== */
/* 按钮组绝对定位在头像右侧 */
.pet-side-btns {
  position: absolute;
  right: 1%;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 5;
}

/* ===== 召唤/预览按钮（小胶囊+微倾斜+轻呼吸） ===== */
.pet-summon-btn,
.pet-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 12px;
  height: 32px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 24px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  will-change: transform;
  white-space: nowrap;
}
.pet-summon-btn {
  background: linear-gradient(135deg, #a29bfe, #6c5ce7);
  box-shadow: 0 2px 8px rgba(108,92,231,0.4), 0 0 10px rgba(162,155,254,0.2), inset 0 1px 0 rgba(255,255,255,0.4);
  animation: btnBreathePurple 2.6s ease-in-out infinite;
}
.pet-preview-btn {
  background: linear-gradient(135deg, #fdcb6e, #e17055);
  box-shadow: 0 2px 8px rgba(225,112,85,0.4), 0 0 10px rgba(253,203,110,0.2), inset 0 1px 0 rgba(255,255,255,0.4);
  animation: btnBreatheOrange 2.6s ease-in-out infinite;
  animation-delay: -1.3s;
}
@keyframes btnBreathePurple {
  0%, 100% { transform: rotate(-3deg) scale(1); box-shadow: 0 2px 8px rgba(108,92,231,0.4), 0 0 10px rgba(162,155,254,0.2), inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { transform: rotate(-3deg) scale(1.04); box-shadow: 0 3px 12px rgba(108,92,231,0.5), 0 0 14px rgba(162,155,254,0.35), inset 0 1px 0 rgba(255,255,255,0.45); }
}
@keyframes btnBreatheOrange {
  0%, 100% { transform: rotate(3deg) scale(1); box-shadow: 0 3px 10px rgba(225,112,85,0.4), 0 0 14px rgba(253,203,110,0.25), inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { transform: rotate(3deg) scale(1.04); box-shadow: 0 4px 14px rgba(225,112,85,0.5), 0 0 18px rgba(253,203,110,0.4), inset 0 1px 0 rgba(255,255,255,0.45); }
}
.pet-summon-btn:active {
  animation: none !important;
  transform: rotate(0deg) scale(0.9) !important;
  transition: transform 0.12s cubic-bezier(.34,1.56,.64,1);
}
.pet-preview-btn:active {
  animation: none !important;
  transform: rotate(0deg) scale(0.9) !important;
  transition: transform 0.12s cubic-bezier(.34,1.56,.64,1);
}
.pet-preview-btn.active {
  animation: none !important;
  transform: rotate(3deg) scale(0.95) !important;
  filter: brightness(1.05);
}
.psb-icon { font-size: 15px; line-height: 1; }
.psb-label { line-height: 1; }

/* ===== 预览面板（浮层，纵向列表） ===== */
.pet-preview-panel {
  position: fixed;
  top: 50%;
  left: 0;
  right: 64px;
  bottom: auto;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-50%) translateX(0) scale(0.95);
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  border: 1.5px solid rgba(255,255,255,0.9);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transform-origin: center right;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(.34,1.56,.64,1);
}
.pet-preview-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0) scale(1);
}
.ppp-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  z-index: 2;
  transition: all 0.2s;
}
.ppp-close:hover {
  background: rgba(0,0,0,0.1);
  color: #666;
}
.ppp-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color: transparent;
}
.pet-preview-panel.show .ppp-item {
  animation: pppFadeIn 0.3s ease backwards;
}
.pet-preview-panel.show .ppp-item:nth-child(1) { animation-delay: 0.04s; }
.pet-preview-panel.show .ppp-item:nth-child(2) { animation-delay: 0.08s; }
.pet-preview-panel.show .ppp-item:nth-child(3) { animation-delay: 0.12s; }
.pet-preview-panel.show .ppp-item:nth-child(4) { animation-delay: 0.16s; }
.pet-preview-panel.show .ppp-item:nth-child(5) { animation-delay: 0.20s; }
@keyframes pppFadeIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ppp-item:active {
  transform: scale(0.96);
}
.ppp-item.current {
  background: linear-gradient(135deg, rgba(253,203,110,0.28), rgba(225,112,85,0.18));
  box-shadow: inset 0 0 0 1.5px rgba(253,203,110,0.7);
}
.ppp-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.6);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.ppp-item.current .ppp-thumb {
  border-color: #fdcb6e;
  box-shadow: 0 0 0 2px rgba(253,203,110,0.45), 0 3px 10px rgba(253,203,110,0.35);
  transform: scale(1.08);
}
.ppp-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}
.ppp-stage-num {
  font-size: 9px;
  font-weight: 600;
  color: #a0a0a0;
  line-height: 1;
}
.ppp-label {
  font-size: 12px;
  font-weight: 700;
  color: #4a4a4a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.ppp-item.current .ppp-label {
  color: #c0522f;
}
.ppp-item.current .ppp-stage-num {
  color: #e17055;
}

/* ===== 储备规则弹窗 ===== */
.pet-popup-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 500;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.pet-popup-mask.show { opacity: 1; }
.pet-popup-card {
  position: relative;
  width: 86%;
  max-width: 340px;
  background: linear-gradient(160deg, #fff9f0 0%, #fff 50%, #f0f7ff 100%);
  border-radius: 22px;
  padding: 24px 20px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  text-align: center;
  transform: scale(0.88) translateY(12px);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.pet-popup-mask.show .pet-popup-card {
  transform: scale(1) translateY(0);
}
.ppc-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #aaa;
  background: rgba(0,0,0,0.05);
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s;
}
.ppc-close:hover { background: rgba(0,0,0,0.1); color: #666; }
.ppc-icon { font-size: 44px; margin-bottom: 6px; }
.ppc-title {
  font-size: 19px; font-weight: 700; color: #5a3e2b;
  margin-bottom: 8px;
}
.ppc-desc {
  font-size: 13px; color: #8a7a6d; line-height: 1.6;
  margin-bottom: 16px; padding: 0 4px;
}
.bank-rule-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}
.brl-item {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.75);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.brl-emoji { font-size: 28px; flex-shrink: 0; }
.brl-info { text-align: left; flex: 1; }
.brl-name { font-size: 14px; font-weight: 600; color: #5a3e2b; }
.brl-detail { font-size: 12px; color: #9a8a7d; margin-top: 2px; }
.brl-detail b { color: #e67e22; font-weight: 700; }
.ppc-tip {
  font-size: 12px; color: #b0a090;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.ppc-tip b { color: #e67e22; font-size: 14px; }

/* ===== 领回确认弹窗 ===== */
.retrieve-confirm-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.retrieve-confirm-mask.show {
  display: flex;
}
.retrieve-confirm-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px 20px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  animation: rcPop 0.2s ease;
}
@keyframes rcPop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.rc-icon {
  font-size: 40px;
  margin-bottom: 8px;
}
.rc-title {
  font-size: 18px;
  font-weight: 700;
  color: #2D3436;
  margin-bottom: 10px;
}
.rc-desc {
  font-size: 14px;
  color: #636E72;
  line-height: 1.6;
  margin-bottom: 20px;
}
.rc-desc b {
  color: #FF6B35;
}
.rc-btns {
  display: flex;
  gap: 12px;
}
.rc-btn-cancel,
.rc-btn-ok {
  flex: 1;
  padding: 11px 0;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.rc-btn-cancel {
  background: #F0F0F0;
  color: #636E72;
}
.rc-btn-ok {
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  color: #fff;
}
.rc-btn-cancel:active,
.rc-btn-ok:active {
  transform: scale(0.96);
  opacity: 0.85;
}

/* ===== 宠物加速卡状态 ===== */
#petCardBuff {
  margin: 8px 0;
}
.pet-card-buff {
  border-radius: 14px;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.pet-card-buff .pcb-label {
  font-weight: 700;
  margin-bottom: 6px;
}
.pet-card-buff .pcb-cap-bar {
  height: 6px;
  background: rgba(255,255,255,0.35);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.pet-card-buff .pcb-cap-fill {
  height: 100%;
  background: rgba(255,255,255,0.9);
  border-radius: 3px;
  transition: width 0.3s;
}
.pet-card-buff .pcb-cap-text {
  font-size: 11px;
  opacity: 0.9;
}
.buff-none {
  background: linear-gradient(135deg, #b2bec3, #636e72);
}
.buff-newbie {
  background: linear-gradient(135deg, #fdcb6e, #e17055);
  box-shadow: 0 2px 12px rgba(253,203,110,0.5);
}
.buff-invite {
  background: linear-gradient(135deg, #a29bfe, #6c5ce7);
  box-shadow: 0 2px 12px rgba(108,92,231,0.5);
}
.buff-member {
  background: linear-gradient(135deg, #fd9644, #fc5c65);
  box-shadow: 0 2px 12px rgba(252,92,101,0.5);
}
.pcb-invite-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 7px;
  border: 1px dashed #b2bec3;
  background: #f5f6fa;
  color: #b2bec3;
  border-radius: 10px;
  font-size: 12px;
  cursor: not-allowed;
}
.pcb-invite-btn:disabled {
  opacity: 0.8;
}

/* ===== 家长页 AI私教对话 ===== */
.advisor-notice {
  background: #F3E5F5;
  color: #6A1B9A;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  margin-bottom: 10px;
  text-align: center;
  border: 1px solid #CE93D8;
}
.advisor-messages {
  max-height: 360px;
  min-height: 120px;
  overflow-y: auto;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}
.advisor-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  animation: advisorFadeIn 0.25s ease;
}
@keyframes advisorFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.advisor-msg-user {
  flex-direction: row-reverse;
}
.advisor-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.advisor-msg-avatar-user {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
}
.advisor-msg-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
}
.advisor-msg-ai .advisor-msg-bubble {
  background: #F5F5F5;
  color: #333;
  border-top-left-radius: 4px;
}
.advisor-msg-user .advisor-msg-bubble {
  background: linear-gradient(135deg, #42A5F5, #1E88E5);
  color: #fff;
  border-top-right-radius: 4px;
}
.advisor-msg-loading {
  display: flex;
  align-items: center;
  gap: 6px;
}
.advisor-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #999;
  display: inline-block;
  animation: advisorBounce 1.2s infinite ease-in-out;
}
.advisor-dot:nth-child(2) { animation-delay: 0.2s; }
.advisor-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes advisorBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.advisor-loading-text {
  font-size: 12px;
  color: #999;
  margin-left: 4px;
}
.advisor-quick-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.advisor-quick-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #BBDEFB;
  background: #E3F2FD;
  color: #1565C0;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.advisor-quick-btn:active {
  transform: scale(0.95);
  background: #BBDEFB;
}
.advisor-input-bar {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #F0F0F0;
  margin-top: 6px;
}
.advisor-input-bar input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 22px;
  border: 1px solid #E0E0E0;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.advisor-input-bar input:focus {
  border-color: #42A5F5;
}
.advisor-input-bar button {
  padding: 10px 20px;
  border-radius: 22px;
  border: none;
  background: linear-gradient(135deg, #42A5F5, #1E88E5);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.advisor-input-bar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== 设置项开关 ===== */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.setting-info {
  flex: 1;
}
.setting-label {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}
.setting-desc {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #ccc;
  border-radius: 28px;
  transition: 0.3s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--primary, #FF6B35);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}


/* ===== 练习页选择栏fixed固定 ===== */
.practice-tabs-fixed {
  position: fixed;
  top: calc(72px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  z-index: 99;
  background: #FFF8F5;
}
.practice-tabs-fixed .grade-tabs,
.practice-tabs-fixed .volume-tabs,
.practice-tabs-fixed .unit-bar {
  flex-shrink: 0;
}
body.page-practice {
  padding-top: calc(195px + env(safe-area-inset-top)) !important;
}
@media (max-height: 700px) {
  body.page-practice {
    padding-top: calc(175px + env(safe-area-inset-top)) !important;
  }
}

/* ===== 录音按钮按住说话样式 ===== */
.mic-btn.pressing,
.mic-btn-modern.pressing,
.chat-mic.pressing {
  transform: scale(1.15);
  transition: transform 0.1s ease;
}
.mic-btn.recording,
.mic-btn-modern.recording {
  animation: micPulse 0.8s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.5); }
  50% { box-shadow: 0 0 0 12px rgba(255, 68, 68, 0); }
}
.mic-btn, .mic-btn-modern, .chat-mic {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ===== 游戏页选择栏fixed固定 ===== */
.game-tabs-fixed {
  position: fixed;
  top: calc(76px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  z-index: 99;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-shrink: 0;
}
body.page-game {
  padding-top: calc(260px + env(safe-area-inset-top)) !important;
}

/* 游戏页topbar去圆角，与年级栏直接衔接 */
body.page-game .topbar {
  border-radius: 0 !important;
}
/* 游戏页年级栏上移，消除与topbar的间隙 */
.game-tabs-fixed {
  top: calc(64px + env(safe-area-inset-top)) !important;
}
@media (max-height: 700px) {
  body.page-game { padding-top: calc(240px + env(safe-area-inset-top)) !important; }
}

/* ===== 宠物页顶部栏fixed固定 ===== */
body.page-pet .pet-topbar {
  position: relative;
  padding: 0;
  min-height: 44px;
  height: 44px;
  width: 100%;
}
body.page-pet .pet-sky {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  min-height: calc(60px + env(safe-area-inset-top)));
  padding-top: calc(env(safe-area-inset-top) + 10px) !important;
  padding-bottom: 10px !important;
}

/* ===== 个人中心 topbar ===== */
.profile-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: calc(14px + env(safe-area-inset-top)) 20px 16px !important;
  cursor: pointer;
  border-radius: 0 0 24px 24px;
}
.profile-topbar * { cursor: pointer; }
.profile-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.5);
}
.profile-topbar-info { flex: 1; min-width: 0; }
.profile-topbar-name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-topbar-member {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-topbar-arrow {
  font-size: 24px;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
  line-height: 1;
}

/* ===== 个人中心弹窗 ===== */
.profile-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: none;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.profile-overlay.show { opacity: 1; }
.profile-sheet {
  background: #fff;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 12px 20px 32px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  -webkit-overflow-scrolling: touch;
}
.profile-overlay.show .profile-sheet { transform: translateY(0); }
.profile-sheet-handle {
  width: 40px;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  margin: 0 auto 12px;
}
.profile-sheet-title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}
.profile-avatar-section {
  text-align: center;
  margin-bottom: 20px;
}
.profile-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 8px;
  cursor: pointer;
  overflow: hidden;
  border: 3px solid #FF7A45;
  box-shadow: 0 4px 12px rgba(255,122,69,0.2);
}
.profile-avatar-tip {
  font-size: 12px;
  color: #999;
}
.profile-field {
  margin-bottom: 16px;
}
.profile-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}
.profile-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #eee;
  border-radius: 12px;
  font-size: 15px;
  box-sizing: border-box;
  background: #fafafa;
  outline: none;
  transition: border-color 0.2s;
}
.profile-field input:focus {
  border-color: #FF7A45;
  background: #fff;
}
.profile-field input:disabled {
  color: #999;
  background: #f5f5f5;
}
.profile-member-card {
  background: linear-gradient(135deg, #FFC107, #FF9800);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(255,152,0,0.2);
}
.profile-member-card.pmc-active {
  background: linear-gradient(135deg, #FFD700, #FFA000);
}
.pmc-left { display: flex; align-items: center; gap: 10px; flex: 1; }
.pmc-icon { font-size: 28px; }
.pmc-info { flex: 1; min-width: 0; }
.pmc-title { font-size: 15px; font-weight: 700; color: #fff; }
.pmc-desc { font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 2px; }
.pmc-btn {
  background: #fff;
  color: #FF6B35;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.profile-actions { display: flex; flex-direction: column; gap: 10px; }
.profile-btn {
  width: 100%;
  padding: 13px 0;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fafafa;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  font-weight: 500;
}
.profile-btn-primary {
  background: linear-gradient(135deg, #FF7A45, #FF5722);
  color: #fff;
  border: none;
  font-weight: 700;
}
.profile-btn-danger {
  color: #f44336;
  border-color: #ffcdd2;
  background: #fff5f5;
}

body.page-parent.has-topbar {
  padding-top: calc(72px + env(safe-area-inset-top)) !important;
}

/* ===== App Loading Overlay with Mascot ===== */
.app-loading-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.92);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.app-loading-mask.show { opacity: 1; }
.app-loading-box { text-align: center; padding: 30px; }
.app-loading-mascot {
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: 24px;
  animation: loadingBounce 1.2s ease-in-out infinite;
  box-shadow: 0 8px 30px rgba(255,107,53,0.15);
}
@keyframes loadingBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.03); }
}
.app-loading-text {
  margin-top: 20px;
  font-size: 17px;
  font-weight: 600;
  color: #FF6B35;
  letter-spacing: 1px;
}
.app-loading-dots { margin-top: 12px; display: flex; justify-content: center; gap: 6px; }
.app-loading-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FFB088;
  animation: loadingDot 1.4s ease-in-out infinite both;
}
.app-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.app-loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.app-loading-dots span:nth-child(3) { animation-delay: 0s; }
@keyframes loadingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ===== 练习页模块化工作流改造 v20260821a ===== */

/* --- 第一步：练习首页 --- */

/* ===== 练习首页 v2: flex列布局，三层垂直选择器，视频撑满 ===== */
body.page-practice {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-top: 0 !important;
  overflow: hidden;
}
.practice-home-v2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.practice-fixed-top {
  flex-shrink: 0;
  background: linear-gradient(180deg, #FF9800 0%, #FFF8F0 100%);
  z-index: 10;
}
.practice-topbar-inner {
  display: flex;
  align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 14px 8px;
  gap: 8px;
}
.practice-topbar-inner .topbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.practice-topbar-inner h1 {
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  margin: 0;
}
.practice-topbar-inner .ledou-logo { width: 32px; height: 32px; }
.practice-topbar-inner .skin-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 10px;
  border-radius: 16px;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.practice-topbar-inner .skin-btn .skin-btn-icon { font-size: 14px; }

.practice-selector-area { padding: 4px 12px 6px; }

.practice-grade-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0;
  overflow: visible;
}
.practice-grade-row .grade-tab {
  flex: 1;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 700;
  border-radius: 16px;
  background: #fff;
  color: #999;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  white-space: nowrap;
}
.practice-grade-row .grade-tab.active {
  background: #FF9800;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,152,0,0.3);
}

.practice-volume-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  padding: 0;
}
.practice-volume-row .volume-tab {
  flex: 1;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
  background: #fff;
  color: #999;
  border: 2px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.practice-volume-row .volume-tab.active {
  background: #42A5F5;
  color: #fff;
  border-color: #42A5F5;
  box-shadow: 0 2px 8px rgba(66,165,245,0.3);
}

.practice-unit-row {
  display: flex;
  gap: 6px;
  padding: 2px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.practice-unit-row::-webkit-scrollbar { display: none; }
.practice-unit-row .unit-chip {
  flex-shrink: 0;
  width: 58px;
  padding: 5px 3px 7px;
  border-radius: 12px;
  background: #fff;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 2px solid transparent;
}
.practice-unit-row .unit-chip .u-name {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  color: #666;
}
.practice-unit-row .unit-chip .u-icon {
  font-size: 18px;
  margin-top: 3px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.practice-unit-row .unit-chip .u-icon img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.practice-progress-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 8px;
  background: #fff;
}
.practice-progress-inline .pp-label {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  font-weight: 600;
}
.practice-progress-inline .progress-bar {
  flex: 1;
  height: 6px;
  background: #ffe8d9;
  border-radius: 3px;
  overflow: hidden;
}
.practice-progress-inline .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff8c42, #ff6b35);
  border-radius: 3px;
  transition: width 0.3s;
}
.practice-progress-inline .pp-text {
  font-size: 11px;
  color: #ff6b35;
  font-weight: bold;
  white-space: nowrap;
}

.practice-video-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: linear-gradient(180deg, #FFF8F0 0%, #FFE8C8 100%);
}
.practice-guide-banner {
  text-align: center;
  padding: 6px 14px;
  font-size: 12px;
  color: #E65100;
  font-weight: 600;
  background: rgba(255,248,225,0.8);
  flex-shrink: 0;
}
.practice-video-area {
  flex: 1;
  margin: 0;
  border-radius: 0;
  background: transparent;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px 16px;
}
.practice-video {
  max-width: 85%;
  max-height: 78%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(255,152,0,0.2);
}
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  z-index: 5;
  border: none;
  cursor: pointer;
  transition: opacity 0.35s ease, transform 0.2s;
}
.video-play-btn:active { transform: translate(-50%, -50%) scale(0.92); }
.video-play-btn.playing { opacity: 0; pointer-events: none; }
.video-play-triangle {
  width: 0;
  height: 0;
  border-left: 20px solid #ff6b35;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px;
}
body.practice-mode .tabbar { display: none; }

/* --- 首页模式隐藏练习内容 --- */
body.practice-mode #practiceHome { display: none; }
body:not(.practice-mode) #practiceOverlay { display: none; }

/* --- 第二步：全屏练习弹窗 --- */
.practice-overlay {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  height: 100vh;
  height: 100dvh;
  background: #f5f7fa;
  z-index: 200;
  display: flex;
  flex-direction: column;
  animation: practiceSlideUp 0.25s ease-out;
}
@keyframes practiceSlideUp {
  from { transform: translateX(-50%) translateY(100%); }
  to { transform: translateX(-50%) translateY(0); }
}
.practice-overlay::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: var(--theme-bg-url, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

.practice-overlay-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: env(safe-area-inset-top);
}

/* 精简顶栏（无X按钮） */
.practice-overlay-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  flex-shrink: 0;
}
.practice-overlay-topbar .session-progress {
  background: linear-gradient(135deg, #4ecdc4, #44b8b0);
  color: #fff;
  padding: 5px 18px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: bold;
}

/* 题目卡 */
.practice-card-overlay {
  margin: 12px 14px 6px;
  padding: 0;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.practice-card-overlay .sentence-box {
  padding: 18px 16px;
}
.practice-card-overlay .sentence {
  font-size: 26px;
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 6px;
  line-height: 1.3;
}
.practice-card-overlay .sentence-cn {
  font-size: 15px;
  color: #888;
  margin-bottom: 12px;
}

/* 录音卡 */
.practice-mic-card {
  margin: 0 14px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}
.practice-mic-card .mic-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}
.practice-mic-card .mic-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff8c42, #ff6b35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(255,107,53,0.3);
  border: none;
  margin-bottom: 12px;
}
.practice-mic-card .mic-hint {
  font-size: 14px;
  color: #999;
}
.practice-mic-card .feedback {
  padding: 0 16px 16px;
}
.practice-mic-card .feedback.show {
  display: block;
}

/* 本局总结大按钮 */
.session-summary-btn {
  margin: 10px 14px 0;
  padding: 16px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(102,126,234,0.4);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
}
.session-summary-btn.visible { display: flex; }
.session-summary-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: summaryShimmer 2.5s infinite;
}
@keyframes summaryShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}
.session-summary-btn.playing {
  background: linear-gradient(135deg, #4ecdc4, #44b8b0);
}
.session-summary-btn.playing::after { animation: none; }
.ssu-icon { font-size: 20px; position: relative; z-index: 1; }
.ssu-text { position: relative; z-index: 1; }
.ssu-badge {
  position: absolute;
  top: 6px; right: 10px;
  background: #ff3b30;
  color: #fff;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: bold;
  z-index: 2;
}

/* 底部操作栏 */
.practice-actions-overlay {
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
}
.practice-actions-overlay .btn {
  flex: 1;
  padding: 13px;
  border-radius: 26px;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.practice-actions-overlay .btn-outline {
  border: 2.5px solid #ff6b35;
  background: #fff;
  color: #ff6b35;
}
.practice-actions-overlay .btn-primary {
  border: none;
  background: linear-gradient(135deg, #ff8c42, #ff6b35);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,107,53,0.35);
}
.practice-actions-overlay .btn-primary.btn-replay {
  background: linear-gradient(135deg, #4ecdc4, #44b8b0);
  box-shadow: 0 4px 14px rgba(78,205,196,0.35);
}

/* 小屏适配 */
@media (max-height: 700px) {
  body.page-practice {
    padding-top: calc(160px + env(safe-area-inset-top)) !important;
  }
  .practice-progress-fixed {
    top: calc(128px + env(safe-area-inset-top));
  }
  .practice-video-area {
    aspect-ratio: 16 / 9;
  }
}

/* ===== 引导文案横幅（视频上方，紧凑） ===== */
.practice-guide-banner {
  margin: 8px 14px 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #fff6e5, #ffe8cc);
  border-radius: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #e07b39;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 6px rgba(255,140,66,0.15);
}

/* ===== 五档点评系统 v20260822 ===== */
.replay-comment{margin:10px auto 0;padding:12px 28px;background:linear-gradient(135deg,#e0f7fa,#b2ebf2);color:#00838f;border:1px solid #80deea;border-radius:20px;font-size:16px;font-weight:600;display:inline-block;min-width:160px}
.replay-comment:active{transform:scale(.95)}
.focus-card{margin:8px 0 4px;padding:12px;background:linear-gradient(135deg,#fff8e1,#ffecb3);border:2px solid #ffd54f;border-radius:14px;text-align:center}
.fc-header{font-size:13px;font-weight:700;color:#e65100;margin-bottom:4px}
.fc-word{font-size:22px;font-weight:800;color:#bf360c;letter-spacing:1px}
.fc-ipa{font-size:14px;color:#6d4c41;margin:2px 0;font-style:italic}
.fc-tip{font-size:12px;color:#5d4037;margin:4px 0 8px;line-height:1.4}
.fc-play-btn{padding:6px 16px;background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;border:none;border-radius:16px;font-size:12px;font-weight:600}
.fc-play-btn:active{transform:scale(.95)}
.demo-card{margin:8px 0 4px;padding:12px;background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border:2px solid #81c784;border-radius:14px;text-align:center}
.dc-header{font-size:13px;font-weight:700;color:#2e7d32;margin-bottom:4px}
.dc-text{font-size:16px;font-weight:700;color:#1b5e20;margin-bottom:8px;line-height:1.4}
.dc-btns{display:flex;gap:8px;justify-content:center}
.dc-play{padding:6px 14px;background:linear-gradient(135deg,#66bb6a,#43a047);color:#fff;border:none;border-radius:16px;font-size:12px;font-weight:600}
.dc-play.dc-slow{background:linear-gradient(135deg,#42a5f5,#1e88e5)}
.dc-play:active{transform:scale(.95)}
.pooled-tips{margin:6px 0;padding:6px 12px;background:#f3e5f5;border-radius:12px;font-size:11px;color:#7b1fa2;line-height:1.4;text-align:center}
.feedback.tier-celebrate{border-color:#81c784!important;background:#f1f8e9!important}
.feedback.tier-encourage{border-color:#4fc3f7!important;background:#e1f5fe!important}
.feedback.tier-challenge{border-color:#ffb74d!important;background:#fff8e1!important}
.feedback.tier-demonstrate{border-color:#ff8a65!important;background:#fbe9e7!important}
.feedback.tier-protect{border-color:#f48fb1!important;background:#fce4ec!important}
#confettiContainer{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99999;overflow:hidden}
.confetti-piece{position:absolute;width:10px;height:10px;top:-20px;opacity:.9;animation:confettiFall linear forwards}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
body.page-practice .focus-card{padding:8px;margin:4px 0}
body.page-practice .fc-word{font-size:18px}
body.page-practice .fc-tip{font-size:11px;margin:2px 0 6px}
body.page-practice .demo-card{padding:8px;margin:4px 0}
body.page-practice .dc-text{font-size:14px;margin-bottom:6px}
body.page-practice .pooled-tips{font-size:10px;padding:4px 8px}
/* _BTN_LABEL_V2: 跟读页按钮图标+文字标签+字号放大 (高优先级选择器) */

/* 播放/慢放按钮行 */
#practiceCard .play-row {
  gap: 28px !important;
  margin: 10px 0 6px !important;
}

/* 播放按钮：圆形渐变青底，图标+文字纵向排列 */
#playBtn {
  width: 68px !important;
  height: 68px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #4ecdc4, #3DBDB5) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(78,205,196,0.45) !important;
  border: none !important;
  line-height: 1 !important;
  transition: transform 0.15s ease;
}
#playBtn:active { transform: scale(0.92); }
#playBtn .pb-icon {
  font-size: 26px !important;
  line-height: 1 !important;
  display: block !important;
}
#playBtn .pb-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-top: 1px !important;
  line-height: 1 !important;
  display: block !important;
  letter-spacing: 0.5px;
}

/* 慢放按钮：米黄底深橙字，图标+文字纵向排列 */
#playSlowBtn {
  width: clamp(50px, 14vw, 60px) !important;
  height: clamp(50px, 14vw, 60px) !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #FFF3E0 !important;
  color: #E65100 !important;
  border: 2px solid #FFE0B2 !important;
  box-shadow: 0 4px 12px rgba(230,81,0,0.2) !important;
  line-height: 1 !important;
  transition: transform 0.15s ease;
}
#playSlowBtn:active { transform: scale(0.92); }
#playSlowBtn .pb-icon {
  font-size: 24px !important;
  line-height: 1 !important;
  display: block !important;
}
#playSlowBtn .pb-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #E65100 !important;
  margin-top: 1px !important;
  line-height: 1 !important;
  display: block !important;
  letter-spacing: 0.5px;
}

/* 题目英文句子放大加粗 — 用#practiceCard提高优先级 */
#practiceCard .sentence {
  font-size: 34px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}
#practiceCard .sentence-cn {
  font-size: 16px !important;
  margin-bottom: 6px !important;
}

/* 录音按钮适度放大 */
#micBtn {
  width: 76px !important;
  height: 76px !important;
  font-size: 34px !important;
}

/* 回放按钮 */
#practiceCard .replay-voice,
body.page-practice .replay-voice {
  font-size: 14px !important;
  padding: 8px 18px !important;
  border-radius: 20px !important;
}

/* 超小屏适配（高度<640px）等比缩小但仍比原来大 */
@media (max-height: 640px) {
  #playBtn { width: 54px !important; height: 54px !important; }
  #playBtn .pb-icon { font-size: 22px !important; }
  #playBtn .pb-label { font-size: 10px !important; }
  #playSlowBtn { width: 48px !important; height: 48px !important; }
  #playSlowBtn .pb-icon { font-size: 20px !important; }
  #playSlowBtn .pb-label { font-size: 10px !important; }
  #practiceCard .sentence { font-size: 26px !important; }
  #micBtn { width: 60px !important; height: 60px !important; font-size: 26px !important; }
}

/* _BTN_LABEL_V2 end */

/* ===== _fix24 宠物板块修复 ===== */
@keyframes petSummonPop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* 预览面板纵向项 */
.pet-preview-panel .ppp-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  margin-bottom: 4px;
}
.pet-preview-panel .ppp-thumb {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px;
  flex-shrink: 0;
  object-fit: cover;
}
.pet-preview-panel .ppp-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pet-preview-panel .ppp-stage-num {
  font-size: 11px;
  color: #999;
}
.pet-preview-panel .ppp-label {
  font-size: 15px !important;
  font-weight: 700;
  color: #333;
}
/* 食物按钮active态 */
.pqb-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(255,107,53,0.3);
}
.pqb-btn.active {
  background: linear-gradient(135deg, #FF6B35, #E55A2B);
  box-shadow: 0 2px 8px rgba(255,107,53,0.5);
}
/* pqb-icon放大 */
.pqb-icon { font-size: 20px; }

/* Tom语音条慢放 */
.tom-voice-row { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.tom-voice-row .tom-voice-bar { flex-shrink:0; }
.tom-rate-select {
  font-size:11px; padding:2px 4px; border:1px solid #ddd; border-radius:6px;
  background:#fff; color:#666; height:28px; line-height:28px; outline:none;
  -webkit-appearance:none; appearance:none; padding-right:16px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><path d='M0 0l4 5 4-5z' fill='%23999'/></svg>");
  background-repeat:no-repeat; background-position:right 4px center; cursor:pointer; flex-shrink:0;
}
.tom-rate-select:active { border-color:var(--primary); }

/* ===== 孩子录音回访栏 ===== */
.voice-tabs {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.vt-btn {
  flex: 1; padding: 8px 0; border: 1px solid #e0e0e0; background: #f8f9fa;
  border-radius: 8px; font-size: 14px; color: #666; cursor: pointer; transition: all .2s;
}
.vt-btn.vt-active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff; border-color: transparent; font-weight: 600;
}
.voice-replay-list {
  max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid #f0f0f0; border-radius: 10px; background: #fafbfc;
}
.vr-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.vr-item:last-child { border-bottom: none; }
.vr-play-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; flex-shrink: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.vr-info { flex: 1; min-width: 0; }
.vr-text {
  font-size: 14px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vr-meta { font-size: 12px; color: #999; margin-top: 2px; }
.vr-score {
  font-size: 13px; font-weight: 600; color: #ff9800; flex-shrink: 0;
}
/* ===== K-G2 学段年级标签两行布局（游戏页复用练习页kg2-前缀类名） ===== */
.kg2-grade-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 12px;
}
.kg2-grade-row:first-child {
  padding-top: 8px;
}
.kg2-grade-row:last-child {
  padding-bottom: 6px;
}
.kg2-row-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 3px 7px;
  border-radius: 8px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.kg2-tag-enlighten {
  background: linear-gradient(135deg, #AF52DE, #8B5CF6);
}
.kg2-tag-textbook {
  background: linear-gradient(135deg, #5B9BD5, #3A7BD5);
}
/* 年级按钮基础样式（覆盖游戏页原有grade-tab的flex布局） */
.grade-tabs .kg2-grade-row .grade-tab {
  flex: 1;
  padding: 7px 4px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  color: #999;
  border: 2px solid transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  position: relative;
  overflow: visible;
  white-space: nowrap;
  text-align: center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-width: 0;
}
.kg2-tab-label {
  display: block;
  line-height: 1.3;
}
/* 角标通用 */
.kg2-badge {
  position: absolute;
  top: -7px;
  right: -4px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  padding: 1px 5px;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1.4;
  z-index: 2;
}
.kg2-badge-purple {
  background: #AF52DE;
}
.kg2-badge-red {
  background: #FF3B30;
}
/* 选中态 */
.grade-tabs .kg2-grade-row .grade-tab.kg2-k.active {
  background: linear-gradient(135deg, #AF52DE, #8B5CF6);
  color: #fff;
  border-color: #AF52DE;
  box-shadow: 0 2px 10px rgba(175,82,222,0.35);
}
.grade-tabs .kg2-grade-row .grade-tab.kg2-ledou.active {
  background: linear-gradient(135deg, #FF9500, #FF7800);
  color: #fff;
  border-color: #FF9500;
  box-shadow: 0 2px 10px rgba(255,149,0,0.35);
}
.grade-tabs .kg2-grade-row .grade-tab.kg2-textbook.active {
  background: linear-gradient(135deg, #5B9BD5, #3A7BD5);
  color: #fff;
  border-color: #5B9BD5;
  box-shadow: 0 2px 10px rgba(91,155,213,0.35);
}
/* K段单元chip选中色 */
.unit-chip.active.gk-upper { background: linear-gradient(135deg, #E9D5FF, #C084FC); color: #581C87; border-color: #C084FC; }
.unit-chip.active.gk-lower { background: linear-gradient(135deg, #DDD6FE, #A78BFA); color: #312E81; border-color: #A78BFA; }
.unit-chip.active.g1-upper { background: linear-gradient(135deg, #FFE0B2, #FFB74D); color: #5D4037; border-color: #FFB74D; }
.unit-chip.active.g1-lower { background: linear-gradient(135deg, #FFCCBC, #FF8A65); color: #4E342E; border-color: #FF8A65; }
.unit-chip.active.g2-upper { background: linear-gradient(135deg, #B2EBF2, #4DD0E1); color: #006064; border-color: #4DD0E1; }
.unit-chip.active.g2-lower { background: linear-gradient(135deg, #B2DFDB, #4DB6AC); color: #004D40; border-color: #4DB6AC; }

/* 游戏页年级标签容器：两行布局时改为纵向排列 */
body.page-game .grade-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: visible;
}
/* 两行布局时增加游戏页顶部留白 */
body.page-game {
  padding-top: calc(290px + env(safe-area-inset-top)) !important;
}
@media (max-height: 700px) {
  body.page-game { padding-top: calc(270px + env(safe-area-inset-top)) !important; }
}

/* ===== KG2 Adapter: 练习页特有样式 (v1.1) ===== */
/* 注：.kg2-grade-row/.kg2-row-tag/.kg2-badge等共享类名由分身C统一定义，此处不重复 */

/* 年级标签容器：练习页两行布局（覆盖原flex横向排列） */
#gradeTabs.kg2-loaded {
  flex-direction: column;
  gap: 6px;
}

/* 练习页行内边距（覆盖C的padding:4px 12px，练习页已有外层padding） */
#gradeTabs.kg2-loaded .kg2-grade-row {
  padding: 0;
}

/* 练习页年级按钮（橙色顶栏内，半透明白底白字） */
.kg2-grade-tab {
  flex: 1;
  padding: 7px 4px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 14px;
  background: rgba(255,255,255,0.35);
  color: #fff;
  border: none;
  white-space: nowrap;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  overflow: visible;
  line-height: 1.3;
}

/* 练习页选中态 */
.kg2-grade-tab.active {
  background: #fff;
  color: #FF9800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* K按钮active态用紫色 */
.kg2-grade-tab.kg2-grade-k.active {
  color: #AF52DE;
}

/* ===== 数据未就绪提示 ===== */
.kg2-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 24px 16px;
  gap: 8px;
}
.kg2-cs-icon {
  font-size: 36px;
}
.kg2-cs-text {
  font-size: 13px;
  color: #999;
  font-weight: 600;
}

/* ===== K模式：纯图片无文字提示 ===== */
body.kg2-mode-k #practiceCard .scene-tag,
body.kg2-mode-k #practiceCard .sentence,
body.kg2-mode-k #practiceCard .sentence-cn,
body.kg2-mode-k #practiceCard .tip-box,
body.kg2-mode-k #practiceCard .phonics-box {
  display: none !important;
}

/* K模式：图片容器（默认隐藏，仅K模式显示） */
.kg2-k-image,
.kg2-k-emoji {
  display: none;
}
body.kg2-mode-k .kg2-k-image {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto 12px;
  border-radius: 16px;
  object-fit: cover;
  aspect-ratio: 4/3;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
body.kg2-mode-k .kg2-k-emoji {
  display: block;
  font-size: 72px;
  text-align: center;
  margin: 10px auto 16px;
  line-height: 1;
}

/* K模式：播放区域间距微调 */
body.kg2-mode-k #practiceCard .sentence-box {
  padding-top: 16px;
}
body.kg2-mode-k #practiceCard .play-row {
  margin-top: 8px;
}

/* ===== 练习页小屏适配（360px以下） ===== */
@media (max-width: 360px) {
  .kg2-grade-tab {
    font-size: 12px;
    padding: 6px 2px;
  }
}

/* ============================================================
   K-G2 练习页专属UI（2026-08-26 老板确认预览图）
   大字单词 + 大图 + 大按钮 + 大弹窗，适合低龄儿童
   仅在 body.kg2-mode-k / kg2-mode-g1 / kg2-mode-g2 下生效
   G3-G6 完全不受影响
   ============================================================ */

/* --- 核心单词大字容器 --- */
.kg2-word-display {
  text-align: center;
  margin: 8px auto 12px;
  padding: 0 8px;
}
.kg2-word-main {
  font-size: 48px;
  font-weight: 800;
  color: #333;
  letter-spacing: 2px;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.06);
  word-break: break-word;
}
.kg2-word-vowel {
  color: #FF8C42;
}
.kg2-word-cn {
  font-size: 22px;
  color: #888;
  margin-top: 6px;
  font-weight: 500;
}
.kg2-word-hint {
  font-size: 15px;
  color: #bbb;
  margin-top: 8px;
}

/* K段：隐藏完整英文句子，只显示大字单词 */
body.kg2-mode-k #practiceCard .sentence {
  display: none !important;
}
/* K-G2：中文翻译由kg2-word-cn显示，隐藏原始sentence-cn（避免重复）*/
body.kg2-mode-k #practiceCard .sentence-cn,
body.kg2-mode-g1 #practiceCard .sentence-cn,
body.kg2-mode-g2 #practiceCard .sentence-cn {
  display: none !important;
}
/* G1/G2：保留句子但放大字号 */
body.kg2-mode-g1 #practiceCard .sentence,
body.kg2-mode-g2 #practiceCard .sentence {
  font-size: 22px;
  line-height: 1.5;
}
body.kg2-mode-g1 #practiceCard .sentence-cn,
body.kg2-mode-g2 #practiceCard .sentence-cn {
  font-size: 17px;
}

/* K/G1/G2：隐藏tip-box和phonics-box（低龄不需要发音技巧文字） */
body.kg2-mode-k #practiceCard .tip-box,
body.kg2-mode-k #practiceCard .phonics-box,
body.kg2-mode-g1 #practiceCard .tip-box,
body.kg2-mode-g1 #practiceCard .phonics-box,
body.kg2-mode-g2 #practiceCard .tip-box,
body.kg2-mode-g2 #practiceCard .phonics-box {
  display: none !important;
}

/* K/G1/G2：场景标签保留但缩小淡化 */
body.kg2-mode-k #practiceCard .scene-tag,
body.kg2-mode-g1 #practiceCard .scene-tag,
body.kg2-mode-g2 #practiceCard .scene-tag {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 6px;
}

/* --- 大图占C位 --- */
body.kg2-mode-k .kg2-k-image,
body.kg2-mode-g1 .kg2-k-image,
body.kg2-mode-g2 .kg2-k-image {
  display: block;
  width: 85%;
  max-width: 340px;
  margin: 4px auto 14px;
  border-radius: 20px;
  object-fit: cover;
  aspect-ratio: 1/1;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  background: #fff;
}
body.kg2-mode-k .kg2-k-emoji,
body.kg2-mode-g1 .kg2-k-emoji,
body.kg2-mode-g2 .kg2-k-emoji {
  display: block;
  font-size: 96px;
  text-align: center;
  margin: 8px auto 16px;
  line-height: 1;
}

/* --- 播放按钮放大 --- */
body.kg2-mode-k #practiceCard .play-btn,
body.kg2-mode-g1 #practiceCard .play-btn,
body.kg2-mode-g2 #practiceCard .play-btn {
  font-size: 18px;
  padding: 12px 28px;
  border-radius: 16px;
}
body.kg2-mode-k #practiceCard .play-btn .pb-icon,
body.kg2-mode-g1 #practiceCard .play-btn .pb-icon,
body.kg2-mode-g2 #practiceCard .play-btn .pb-icon {
  font-size: 24px;
}

/* --- 录音按钮放大 + 呼吸光晕 --- */
.kg2-mic-btn {
  width: 96px !important;
  height: 96px !important;
  font-size: 42px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 20px rgba(255,140,66,0.35) !important;
  animation: kg2MicPulse 2s ease-in-out infinite;
}
@keyframes kg2MicPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(255,140,66,0.35); }
  50% { box-shadow: 0 4px 32px rgba(255,140,66,0.6), 0 0 0 8px rgba(255,140,66,0.08); }
}
body.kg2-mode-k #micHint,
body.kg2-mode-g1 #micHint,
body.kg2-mode-g2 #micHint {
  font-size: 16px;
  color: #666;
  margin-top: 10px;
}

/* --- K/G1/G2：进度文字放大 --- */
body.kg2-mode-k #sessionProgress,
body.kg2-mode-g1 #sessionProgress,
body.kg2-mode-g2 #sessionProgress {
  font-size: 16px;
  font-weight: 600;
  color: #FF8C42;
}

/* --- K/G1/G2：点评反馈弹窗放大 --- */
body.kg2-mode-k .feedback.show,
body.kg2-mode-g1 .feedback.show,
body.kg2-mode-g2 .feedback.show {
  padding: 24px 20px;
  border-radius: 20px;
}
body.kg2-mode-k .feedback-msg,
body.kg2-mode-g1 .feedback-msg,
body.kg2-mode-g2 .feedback-msg {
  font-size: 20px;
  font-weight: 700;
}
body.kg2-mode-k .score-num,
body.kg2-mode-g1 .score-num,
body.kg2-mode-g2 .score-num {
  font-size: 42px;
}
body.kg2-mode-k .stars,
body.kg2-mode-g1 .stars,
body.kg2-mode-g2 .stars {
  font-size: 32px;
  letter-spacing: 4px;
}

/* --- K/G1/G2：底部按钮放大 --- */
body.kg2-mode-k .practice-actions-overlay .btn,
body.kg2-mode-g1 .practice-actions-overlay .btn,
body.kg2-mode-g2 .practice-actions-overlay .btn {
  font-size: 17px;
  padding: 14px 20px;
  border-radius: 14px;
}

/* --- K/G1/G2：本局总结按钮放大 --- */
body.kg2-mode-k .session-summary-btn,
body.kg2-mode-g1 .session-summary-btn,
body.kg2-mode-g2 .session-summary-btn {
  font-size: 18px;
  padding: 16px 24px;
  border-radius: 16px;
}

/* --- K/G1/G2：练习卡片圆角加大 --- */
body.kg2-mode-k #practiceCard,
body.kg2-mode-g1 #practiceCard,
body.kg2-mode-g2 #practiceCard {
  border-radius: 20px;
}

/* --- 小屏适配 --- */
@media (max-width: 360px) {
  .kg2-word-main { font-size: 40px; }
  .kg2-word-cn { font-size: 19px; }
  body.kg2-mode-k .kg2-k-image,
  body.kg2-mode-g1 .kg2-k-image,
  body.kg2-mode-g2 .kg2-k-image {
    width: 90%;
  }
  .kg2-mic-btn {
    width: 84px !important;
    height: 84px !important;
    font-size: 36px !important;
  }
}

/* ============================================================
   K-G2 练习页 UI V2（2026-08-26 老板确认预览图V2）
   宽幅图+单元标签 / 超大单词 / 三按钮横排（喇叭|大麦克风|慢放）
   ============================================================ */

/* 图片容器：宽幅圆角横图 */
body.kg2-mode-k .kg2-img-wrap,
body.kg2-mode-g1 .kg2-img-wrap,
body.kg2-mode-g2 .kg2-img-wrap {
  position: relative;
  width: 92%;
  max-width: 360px;
  margin: 4px auto 14px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  background: #fff;
}
body.kg2-mode-k .kg2-k-image,
body.kg2-mode-g1 .kg2-k-image,
body.kg2-mode-g2 .kg2-k-image {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  aspect-ratio: 16/10;
  box-shadow: none !important;
  background: #fff;
}

/* 左上角橙色单元名标签 */
.kg2-unit-label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: linear-gradient(135deg, #FF9500, #FF6B35);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(255,107,53,0.35);
}

/* 超大单词 */
.kg2-word-main {
  font-size: clamp(40px, 12vw, 60px) !important;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1.15;
}
.kg2-word-cn {
  font-size: 24px !important;
  margin-top: 8px !important;
}
.kg2-word-hint {
  font-size: 16px !important;
  color: #FF8C42 !important;
  margin-top: 10px !important;
  font-weight: 600;
}

/* 三按钮横排容器 */
body.kg2-mode-k #practiceCard .play-row,
body.kg2-mode-g1 #practiceCard .play-row,
body.kg2-mode-g2 #practiceCard .play-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 16px !important;
}

/* 左右侧按钮：圆角方形图标按钮 */
body.kg2-mode-k #practiceCard .kg2-side-btn,
body.kg2-mode-g1 #practiceCard .kg2-side-btn,
body.kg2-mode-g2 #practiceCard .kg2-side-btn {
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  font-size: 28px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  flex-shrink: 0;
}
body.kg2-mode-k #practiceCard .play-btn.kg2-side-btn,
body.kg2-mode-g1 #practiceCard .play-btn.kg2-side-btn,
body.kg2-mode-g2 #practiceCard .play-btn.kg2-side-btn {
  background: linear-gradient(135deg, #FF9500, #FF6B35);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,107,53,0.4);
}
body.kg2-mode-k #practiceCard .play-btn-slow.kg2-side-btn,
body.kg2-mode-g1 #practiceCard .play-btn-slow.kg2-side-btn,
body.kg2-mode-g2 #practiceCard .play-btn-slow.kg2-side-btn {
  background: linear-gradient(135deg, #AF52DE, #8B5CF6);
  color: #fff;
  box-shadow: 0 4px 14px rgba(175,82,222,0.4);
}
body.kg2-mode-k #practiceCard .kg2-side-btn .pb-icon,
body.kg2-mode-g1 #practiceCard .kg2-side-btn .pb-icon,
body.kg2-mode-g2 #practiceCard .kg2-side-btn .pb-icon {
  font-size: 28px !important;
  margin: 0;
}

/* 中间大麦克风：绿色发光英雄按钮 */
.kg2-mic-btn {
  width: clamp(80px, 24vw, 108px) !important;
  height: clamp(80px, 24vw, 108px) !important;
  font-size: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7BC96F, #4CAF50) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 24px rgba(76,175,80,0.5) !important;
  animation: kg2MicPulseGreen 2s ease-in-out infinite;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes kg2MicPulseGreen {
  0%, 100% { box-shadow: 0 6px 24px rgba(76,175,80,0.5); }
  50% { box-shadow: 0 6px 36px rgba(76,175,80,0.75), 0 0 0 12px rgba(76,175,80,0.1); }
}

/* K/G1/G2：mic-section 隐藏（麦克风已移入play-row） */
body.kg2-mode-k .practice-mic-card .mic-section,
body.kg2-mode-g1 .practice-mic-card .mic-section,
body.kg2-mode-g2 .practice-mic-card .mic-section {
  display: none !important;
}

/* 小屏适配 */
@media (max-width: 360px) {
  .kg2-word-main { font-size: 48px !important; }
  .kg2-word-cn { font-size: 21px !important; }
  body.kg2-mode-k .kg2-img-wrap,
  body.kg2-mode-g1 .kg2-img-wrap,
  body.kg2-mode-g2 .kg2-img-wrap {
    width: 95%;
  }
  body.kg2-mode-k #practiceCard .kg2-side-btn,
  body.kg2-mode-g1 #practiceCard .kg2-side-btn,
  body.kg2-mode-g2 #practiceCard .kg2-side-btn {
    width: 52px !important;
    height: 52px !important;
    font-size: 24px !important;
  }
  .kg2-mic-btn {
    width: 92px !important;
    height: 92px !important;
    font-size: 40px !important;
  }
  body.kg2-mode-k #practiceCard .play-row,
  body.kg2-mode-g1 #practiceCard .play-row,
  body.kg2-mode-g2 #practiceCard .play-row {
    gap: 14px;
  }
}

/* ============================================================
   K-G2 答题页 V3（2026-08-26 老板确认）
   题目卡撑满 / 点评区改为弹窗 / 关闭按钮
   ============================================================ */

/* K/G1/G2：隐藏底部录音卡片（麦克风已移入题目卡play-row） */
body.kg2-mode-k .practice-mic-card,
body.kg2-mode-g1 .practice-mic-card,
body.kg2-mode-g2 .practice-mic-card {
  display: none !important;
}

/* K/G1/G2：题目卡撑满中间区域 */
body.kg2-mode-k #practiceCard,
body.kg2-mode-g1 #practiceCard,
body.kg2-mode-g2 #practiceCard {
  flex: 1 1 auto !important;
  margin: 8px 12px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* K/G1/G2：覆盖 has-feedback 收缩行为（点评已改为弹窗，不收缩题目卡） */
body.kg2-mode-k.has-feedback #practiceCard,
body.kg2-mode-g1.has-feedback #practiceCard,
body.kg2-mode-g2.has-feedback #practiceCard {
  flex: 1 1 auto !important;
}
body.kg2-mode-k.has-feedback #practiceCard .sentence-box,
body.kg2-mode-g1.has-feedback #practiceCard .sentence-box,
body.kg2-mode-g2.has-feedback #practiceCard .sentence-box {
  padding: 16px 18px !important;
}

/* ===== 点评弹窗遮罩 ===== */
.kg2-feedback-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: kg2FbFadeIn 0.25s ease;
}
.kg2-feedback-popup.show {
  display: flex;
}
@keyframes kg2FbFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 弹窗卡片 */
.kg2-feedback-card {
  position: relative;
  background: linear-gradient(180deg, #FFFEF8 0%, #FFFFFF 100%);
  border-radius: 28px;
  padding: 32px 24px 28px;
  width: 100%;
  max-width: 360px;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 4px rgba(255,140,66,0.15);
  animation: kg2FbPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 3px solid rgba(255,200,100,0.4);
}
@keyframes kg2FbPopIn {
  from { transform: scale(0.75); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 关闭按钮 */
.kg2-fb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #FFD0A8;
  background: #FFF5EC;
  color: #FF8C42;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.15s;
  line-height: 1;
}
.kg2-fb-close:active {
  transform: scale(0.9);
  background: #FFE8D0;
}

/* 弹窗内点评区域：重置内联布局样式 */
.kg2-feedback-card #feedback {
  display: none;
  text-align: center;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: none !important;
}
.kg2-feedback-card #feedback.show {
  display: block;
}
.kg2-feedback-card .stars {
  font-size: 36px !important;
  letter-spacing: 6px !important;
  margin-bottom: 8px !important;
}
.kg2-feedback-card .score-num {
  font-size: 52px !important;
  font-weight: 900 !important;
  color: #FF8C42 !important;
  line-height: 1.1 !important;
}
.kg2-feedback-card .feedback-msg {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #333 !important;
  margin-top: 10px !important;
  line-height: 1.5 !important;
}
.kg2-feedback-card .word-result {
  font-size: 14px !important;
  margin-top: 10px !important;
  line-height: 1.6 !important;
  color: #666 !important;
}
.kg2-feedback-card .replay-voice {
  margin-top: 14px !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #4ECDC4, #3DB8B0) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(78,205,196,0.35);
}
.kg2-feedback-card .replay-voice:active {
  transform: scale(0.96);
}

/* ============================================================
   K-G2 答题页 V3.2（2026-08-26）
   按钮尺寸恢复V3（喇叭60/麦克风108），仅保留录音红色脉冲+识别橙色呼吸
   ============================================================ */

/* ===== 录音中：红色脉冲（复用G3的recPulse效果，覆盖绿色） ===== */
.kg2-mic-btn.recording,
.kg2-mic-btn.pressing {
  background: linear-gradient(135deg, #FF4444, #CC0000) !important;
  animation: kg2RecPulse 0.8s infinite !important;
  transform: scale(1);
}
@keyframes kg2RecPulse {
  0%, 100% {
    box-shadow: 0 6px 24px rgba(255,68,68,0.5), 0 0 0 0 rgba(255,68,68,0.4) !important;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 6px 36px rgba(255,68,68,0.9), 0 0 0 18px rgba(255,68,68,0) !important;
    transform: scale(1.08);
  }
}

/* ===== 识别中：橙色呼吸光圈（复用G3的evaluating效果） ===== */
.kg2-mic-btn.evaluating {
  pointer-events: none !important;
  opacity: 0.85 !important;
  animation: kg2MicEvaluating 1s ease-in-out infinite !important;
  background: linear-gradient(135deg, #FF9800, #F57C00) !important;
}
@keyframes kg2MicEvaluating {
  0%, 100% {
    box-shadow: 0 6px 24px rgba(255,152,0,0.45), 0 0 0 0 rgba(255,152,0,0.4) !important;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 6px 30px rgba(255,152,0,0.7), 0 0 0 16px rgba(255,152,0,0) !important;
    transform: scale(1.04);
  }
}

/* 小屏适配（V3.2恢复V2尺寸） */
@media (max-width: 360px) {
  body.kg2-mode-k #practiceCard .kg2-side-btn,
  body.kg2-mode-g1 #practiceCard .kg2-side-btn,
  body.kg2-mode-g2 #practiceCard .kg2-side-btn {
    width: 52px !important;
    height: 52px !important;
    font-size: 24px !important;
  }
  .kg2-mic-btn {
    width: 92px !important;
    height: 92px !important;
    font-size: 40px !important;
  }
  body.kg2-mode-k #practiceCard .play-row,
  body.kg2-mode-g1 #practiceCard .play-row,
  body.kg2-mode-g2 #practiceCard .play-row {
    gap: 14px;
  }
}

/* ============================================================
   K-G2 答题页 V4（2026-08-26）
   改造点②：图片完整显示不裁切 + 按钮栏下移，给图和单词更大空间
   改造点③：答完题显示"查看点评"按钮，手动点开点评
   改造点④：答对/答错自动鼓励弹窗（星星+游戏点评库语音）
   仅在 body.kg2-mode-k / kg2-mode-g1 / kg2-mode-g2 下生效，G3-G6 不受影响
   ============================================================ */

/* --- ② 图片完整显示（contain 不裁切），放大并占满上部空间 --- */
body.kg2-mode-k .kg2-img-wrap,
body.kg2-mode-g1 .kg2-img-wrap,
body.kg2-mode-g2 .kg2-img-wrap {
  width: 96% !important;
  max-width: 400px !important;
  margin: 2px auto 10px !important;
  aspect-ratio: 4 / 3;
  background: #FFF9F2;
}
body.kg2-mode-k .kg2-k-image,
body.kg2-mode-g1 .kg2-k-image,
body.kg2-mode-g2 .kg2-k-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  /* contain 保证图片完整显示，顶部不再被裁切 */
  object-fit: contain !important;
  aspect-ratio: auto !important;
  box-shadow: none !important;
  background: #FFF9F2;
}

/* --- ② sentence-box 纵向布局：图片+单词在上，按钮栏靠下 --- */
body.kg2-mode-k #practiceCard .sentence-box,
body.kg2-mode-g1 #practiceCard .sentence-box,
body.kg2-mode-g2 #practiceCard .sentence-box {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 14px 16px 10px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 单词显示区给足间距，成为图片后的视觉主体 */
body.kg2-mode-k .kg2-word-display,
body.kg2-mode-g1 .kg2-word-display,
body.kg2-mode-g2 .kg2-word-display {
  margin: 6px auto 10px !important;
}

/* --- ② 按钮栏下移：用 margin-top:auto 顶到题目卡底部 --- */
body.kg2-mode-k #practiceCard .play-row,
body.kg2-mode-g1 #practiceCard .play-row,
body.kg2-mode-g2 #practiceCard .play-row {
  margin-top: auto !important;
  padding-top: 14px !important;
  gap: 22px !important;
}

/* --- ③ "查看点评"按钮（答完题显示，点击打开详细点评弹窗） --- */
.kg2-view-fb-btn {
  display: block;
  width: 86%;
  max-width: 320px;
  margin: 14px auto 4px;
  padding: 13px 18px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #4ECDC4, #3DB8B0);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(78,205,196,0.4);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s;
}
.kg2-view-fb-btn:active {
  transform: scale(0.96);
}

/* --- ④ 答题鼓励弹窗遮罩 --- */
.kg2-cheer-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: kg2CheerFade 0.2s ease;
}
@keyframes kg2CheerFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 鼓励弹窗卡片 */
.kg2-cheer-card {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: linear-gradient(180deg, #FFFDF7 0%, #FFFFFF 100%);
  border-radius: 28px;
  padding: 28px 22px 24px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
  border: 4px solid #FFE2A8;
  animation: kg2CheerPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kg2-cheer-correct {
  border-color: #FFD66B;
  background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
}
.kg2-cheer-wrong {
  border-color: #FFC9A8;
  background: linear-gradient(180deg, #FFF6F0 0%, #FFFFFF 100%);
}
@keyframes kg2CheerPop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 大表情 */
.kg2-cheer-emoji {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 8px;
  animation: kg2CheerBounce 0.6s ease;
}
@keyframes kg2CheerBounce {
  0% { transform: translateY(-10px) scale(0.8); }
  60% { transform: translateY(4px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}

/* 星星（带依次出现动画） */
.kg2-cheer-stars {
  font-size: 44px;
  letter-spacing: 6px;
  margin: 4px 0 10px;
  line-height: 1;
}
.kg2-cheer-stars span {
  display: inline-block;
  animation: kg2StarPop 0.45s ease both;
}
.kg2-cheer-stars span:nth-child(1) { animation-delay: 0.1s; }
.kg2-cheer-stars span:nth-child(2) { animation-delay: 0.28s; }
.kg2-cheer-stars span:nth-child(3) { animation-delay: 0.46s; }
@keyframes kg2StarPop {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  70% { transform: scale(1.3) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* 鼓励文字 */
.kg2-cheer-title {
  font-size: 28px;
  font-weight: 900;
  color: #FF8C42;
  margin-bottom: 6px;
}
.kg2-cheer-wrong .kg2-cheer-title {
  color: #FF7043;
}
.kg2-cheer-sub {
  font-size: 17px;
  color: #666;
  font-weight: 600;
  margin-bottom: 20px;
}

/* 继续按钮 */
.kg2-cheer-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #FF9500, #FF6B35);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(255,107,53,0.4);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s;
}
.kg2-cheer-btn:active {
  transform: scale(0.96);
}

/* 小屏适配 */
@media (max-width: 360px) {
  body.kg2-mode-k .kg2-img-wrap,
  body.kg2-mode-g1 .kg2-img-wrap,
  body.kg2-mode-g2 .kg2-img-wrap {
    width: 98% !important;
  }
  .kg2-cheer-title { font-size: 24px; }
  .kg2-cheer-stars { font-size: 38px; }
  .kg2-cheer-emoji { font-size: 56px; }
}

/* ============================================================
   === V5 练习页布局调整（K-G6全学段生效）===
   1. 顶栏与年级栏视觉区分
   4. 单元栏下移到提示栏与视频之间
   5. 视频点击弹窗全屏播放
   ============================================================ */

/* --- 改造1：顶栏与年级栏视觉区分 --- */
/* 顶栏底部加分隔线，明确边界 */
.practice-topbar-inner {
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* 选择器区域使用与顶栏不同的背景色，形成层次区分 */
.practice-selector-area {
  background: linear-gradient(180deg, #FFF3E0 0%, #FFF8F0 60%, #FFF8F0 100%);
  padding-top: 8px;
}

/* --- 改造4：单元栏下移后样式调整 --- */
/* 单元栏从固定顶部移出后，选择器区域不再包含unit-bar */
.practice-selector-area .unit-bar,
.practice-selector-area #unitBar {
  /* 保险：如果还在选择器内则隐藏（正常已被JS移走） */
}

/* 下移后的单元栏：在视频区域内，提示栏下方 */
.practice-video-section .unit-bar,
.practice-video-section #unitBar {
  display: flex;
  gap: 6px;
  padding: 6px 12px 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 152, 0, 0.12);
}
.practice-video-section .unit-bar::-webkit-scrollbar,
.practice-video-section #unitBar::-webkit-scrollbar {
  display: none;
}
.practice-video-section .unit-bar .unit-chip,
.practice-video-section #unitBar .unit-chip {
  flex-shrink: 0;
  width: 58px;
  padding: 5px 3px 7px;
  border-radius: 12px;
  background: #fff;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 2px solid transparent;
  cursor: pointer;
}
.practice-video-section .unit-bar .unit-chip .u-name,
.practice-video-section #unitBar .unit-chip .u-name {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  color: #666;
}
.practice-video-section .unit-bar .unit-chip .u-icon,
.practice-video-section #unitBar .unit-chip .u-icon {
  font-size: 18px;
  margin-top: 3px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.practice-video-section .unit-bar .unit-chip .u-icon img,
.practice-video-section #unitBar .unit-chip .u-icon img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
/* 选中态保持与各年级配色一致 */
.practice-video-section .unit-bar .unit-chip.active,
.practice-video-section #unitBar .unit-chip.active {
  border-color: #FF9800;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.25);
}

/* 视频区域压缩padding，给下移的单元栏腾空间 */
.practice-video-section .practice-video-area {
  padding: 4px 16px 12px;
}

/* 进度条紧贴选择器区域底部 */
.practice-progress-inline {
  border-top: 1px solid rgba(255, 152, 0, 0.1);
}

/* --- 改造5：视频全屏弹窗 --- */
.v5-video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.v5-video-modal.show {
  display: flex;
  animation: v5ModalFadeIn 0.25s ease;
}
@keyframes v5ModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.v5-video-modal-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v5-modal-video {
  width: 100%;
  max-height: 75vh;
  border-radius: 12px;
  background: #000;
  outline: none;
}
.v5-video-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s;
  line-height: 1;
}
.v5-video-close:active {
  background: rgba(255, 255, 255, 0.4);
}

/* 小屏适配：关闭按钮移到视频右上角内侧 */
@media (max-height: 600px) {
  .v5-video-close {
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.5);
  }
  .v5-modal-video {
    max-height: 70vh;
  }
}

/* ============================================================
   === V6 练习页布局优化（2026-08-27）===
   1. 年级/册未选中项醒目显示（填充色+字体色区分）
   2. 单元栏3列网格布局，左右占满屏幕
   3. 单元栏+视频区域包入可滚动框，其他栏固定
   ============================================================ */

/* --- V6-1：年级未选中项醒目显示 --- */
.kg2-grade-tab {
  background: rgba(255,255,255,0.9);
  color: #b45309;
  border: 1.5px solid rgba(255,255,255,0.7);
  font-weight: 700;
}
.kg2-grade-tab.active {
  background: #fff;
  color: #FF9800;
  border-color: #FF9800;
  box-shadow: 0 2px 10px rgba(255,152,0,0.35);
  transform: translateY(-1px);
}
.kg2-grade-tab.kg2-grade-k.active {
  color: #AF52DE;
  border-color: #AF52DE;
  box-shadow: 0 2px 10px rgba(175,82,222,0.35);
}

/* --- V6-1：册别未选中项醒目显示 --- */
.volume-tab {
  background: rgba(255,255,255,0.9);
  color: #b45309;
  border: 1.5px solid rgba(255,255,255,0.7);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-weight: 700;
}
.volume-tab.active {
  color: #fff;
  border-color: transparent;
}

/* --- V6-2：单元栏3列网格 --- */
.practice-video-section .unit-bar,
.practice-video-section #unitBar {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 12px;
  overflow: visible;
  background: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.practice-video-section .unit-bar .unit-chip,
.practice-video-section #unitBar .unit-chip {
  width: auto;
  min-width: 0;
  padding: 8px 4px 10px;
  border-radius: 12px;
  background: #fff;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.practice-video-section .unit-bar .unit-chip .u-name,
.practice-video-section #unitBar .unit-chip .u-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: #555;
}
.practice-video-section .unit-bar .unit-chip .u-icon,
.practice-video-section #unitBar .unit-chip .u-icon {
  font-size: 20px;
  margin-top: 4px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.practice-video-section .unit-bar .unit-chip .u-icon img,
.practice-video-section #unitBar .unit-chip .u-icon img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
.practice-video-section .unit-bar .unit-chip.active,
.practice-video-section #unitBar .unit-chip.active {
  border-color: #FF9800;
  background: #FFF8E1;
  box-shadow: 0 2px 8px rgba(255,152,0,0.2);
}

/* --- V6-3：单元栏+视频可滚动容器 --- */
.v6-unit-video-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.v6-unit-video-scroll::-webkit-scrollbar {
  width: 3px;
}
.v6-unit-video-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}

/* video-section变为flex列布局，guideBanner固定不滚 */
.practice-video-section.v6-scroll-ready {
  display: flex;
  flex-direction: column;
  max-height: 58vh;
  overflow: hidden;
}
.practice-video-section.v6-scroll-ready .practice-guide-banner {
  flex-shrink: 0;
}
.practice-video-section.v6-scroll-ready .v6-unit-video-scroll .practice-video-area {
  padding: 4px 12px 16px;
}

/* 小屏适配 */
@media (max-width: 360px) {
  .kg2-grade-tab {
    font-size: 12px;
    padding: 6px 2px;
  }
  .practice-video-section .unit-bar .unit-chip .u-name,
  .practice-video-section #unitBar .unit-chip .u-name {
    font-size: 11px;
  }
}
.summary-top-item{display:flex;flex-direction:column;align-items:center}
.detail-btn{padding:4px 14px;background:linear-gradient(135deg,#FF8C42,#FFB088);color:#fff;border:none;border-radius:14px;font-size:12px;cursor:pointer;margin-top:4px;-webkit-tap-highlight-color:transparent;display:inline-block}
.detail-btn:active{opacity:.8}
.detail-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:10000;display:flex;align-items:center;justify-content:center}
.detail-modal-content{background:#fff;border-radius:16px;width:92%;max-width:480px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden}
.detail-modal-header{background:linear-gradient(135deg,#FF8C42,#FFB088);color:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.detail-modal-header h4{font-size:16px;font-weight:600}
.detail-modal-close{font-size:26px;cursor:pointer;line-height:1;padding:0 4px}
.detail-modal-body{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
.detail-grade{margin-bottom:18px}
.detail-grade-title{font-size:15px;font-weight:600;color:#FF8C42;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid #f0f0f0}
.detail-volume{margin-left:4px;margin-bottom:10px}
.detail-volume-title{font-size:14px;font-weight:600;color:#333;margin-bottom:6px}
.detail-unit{margin-left:8px;margin-bottom:10px}
.detail-unit-title{font-size:13px;font-weight:500;color:#555;margin-bottom:4px}
.detail-chips{display:flex;flex-wrap:wrap;gap:6px}
.detail-chip{background:#f5f5f5;padding:5px 12px;border-radius:14px;font-size:13px;color:#333;line-height:1.4}

/* ============================================================
   === V7 练习页优化（2026-08-27）===
   1. 修复K/G1/G2答题页底部按钮被遮挡（box-sizing修复）
   2. 单元栏图标和名字放大，单元格撑满更醒目
   3. 视频区域添加logo封面+指引文字
   ============================================================ */

/* --- V7-1：修复答题页底部按钮被遮挡 --- */
.practice-overlay-inner {
  box-sizing: border-box !important;
  padding-bottom: 0 !important;
}
.practice-actions-overlay {
  padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
}

/* --- V7-2：单元栏放大，图标和名字撑满单元格 --- */
.practice-video-section .unit-bar,
.practice-video-section #unitBar {
  gap: 10px !important;
  padding: 10px 12px !important;
}
.practice-video-section .unit-bar .unit-chip,
.practice-video-section #unitBar .unit-chip {
  min-height: 72px !important;
  padding: 8px 4px 8px !important;
  border-radius: 14px !important;
  transition: transform 0.12s, box-shadow 0.12s;
}
.practice-video-section .unit-bar .unit-chip:active,
.practice-video-section #unitBar .unit-chip:active {
  transform: scale(0.95);
}
.practice-video-section .unit-bar .unit-chip .u-name,
.practice-video-section #unitBar .unit-chip .u-name {
  font-size: 13px !important;
  font-weight: 700;
  color: #444;
}
.practice-video-section .unit-bar .unit-chip .u-icon,
.practice-video-section #unitBar .unit-chip .u-icon {
  font-size: 26px !important;
  margin-top: 5px !important;
}
.practice-video-section .unit-bar .unit-chip .u-icon img,
.practice-video-section #unitBar .unit-chip .u-icon img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
}
.practice-video-section .unit-bar .unit-chip.active .u-name,
.practice-video-section #unitBar .unit-chip.active .u-name {
  color: #E65100;
}

/* --- V7-3：视频logo封面 --- */
.v7-video-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFF8E1 0%, #FFE0B2 50%, #FFCC80 100%);
  border-radius: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.v7-video-cover:active {
  opacity: 0.9;
}
.v7-cover-inner {
  text-align: center;
  padding: 16px;
}
.v7-cover-logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  margin: 0 auto 10px;
  display: block;
}
.v7-cover-title {
  font-size: 22px;
  font-weight: 900;
  color: #E65100;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.v7-cover-sub {
  font-size: 13px;
  color: #BF360C;
  font-weight: 600;
  margin-bottom: 10px;
}
.v7-cover-play {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(255,107,53,0.4);
  padding-left: 4px;
}

/* 确保practice-video-area是relative定位以承载封面 */
.practice-video-area {
  position: relative;
}

/* 小屏适配 */
@media (max-width: 360px) {
  .practice-video-section .unit-bar .unit-chip,
  .practice-video-section #unitBar .unit-chip {
    min-height: 64px !important;
  }
  .practice-video-section .unit-bar .unit-chip .u-name,
  .practice-video-section #unitBar .unit-chip .u-name {
    font-size: 12px !important;
  }
  .practice-video-section .unit-bar .unit-chip .u-icon img,
  .practice-video-section #unitBar .unit-chip .u-icon img {
    width: 36px !important;
    height: 36px !important;
  }
  .v7-cover-logo {
    width: 60px;
    height: 60px;
  }
  .v7-cover-title {
    font-size: 19px;
  }
}

/* ===== V9: 2026-08-27 ===== */
.practice-video-section .unit-bar .unit-chip,.practice-video-section #unitBar .unit-chip{width:78px;padding:7px 4px 9px;}
.practice-video-section .unit-bar .unit-chip .u-name,.practice-video-section #unitBar .unit-chip .u-name{font-size:12px;}
.practice-video-section .unit-bar .unit-chip .u-icon,.practice-video-section #unitBar .unit-chip .u-icon{font-size:22px;margin-top:4px;}
.practice-video-section .unit-bar .unit-chip .u-icon img,.practice-video-section #unitBar .unit-chip .u-icon img{width:50px;height:50px;}
.practice-unit-row .unit-chip{width:78px;padding:7px 4px 9px;}
.practice-unit-row .unit-chip .u-name{font-size:12px;}
.practice-unit-row .unit-chip .u-icon{font-size:22px;margin-top:4px;}
.practice-unit-row .unit-chip .u-icon img{width:50px;height:50px;}
body.page-practice .unit-chip .u-icon img{width:50px;height:50px;}
body.page-practice .unit-chip .u-name{font-size:12px;}
body.page-practice .unit-chip .u-icon{font-size:22px;}
.practice-video{max-width:92%;max-height:66%;}
.practice-video-area{padding:4px 10px 6px;}

/* ===== V9.1 fix: 2026-08-27 ===== */
/* 网格布局(K-G2)单元卡片放大 */
.practice-video-section .unit-bar.unit-bar,.practice-video-section #unitBar.unit-bar{grid-template-columns:repeat(3,1fr);gap:10px;padding:10px 12px;}
.practice-video-section .unit-bar .unit-chip,.practice-video-section #unitBar .unit-chip{width:auto!important;min-width:0!important;padding:10px 4px 12px!important;min-height:90px;}
.practice-video-section .unit-bar .unit-chip .u-name,.practice-video-section #unitBar .unit-chip .u-name{font-size:13px!important;}
.practice-video-section .unit-bar .unit-chip .u-icon,.practice-video-section #unitBar .unit-chip .u-icon{font-size:24px!important;margin-top:6px;}
.practice-video-section .unit-bar .unit-chip .u-icon img,.practice-video-section #unitBar .unit-chip .u-icon img{width:56px!important;height:56px!important;}
/* 横向滚动布局(G3-G6)单元卡片放大 */
.practice-unit-row .unit-chip{width:82px!important;padding:8px 4px 10px!important;}
.practice-unit-row .unit-chip .u-name{font-size:13px!important;}
.practice-unit-row .unit-chip .u-icon{font-size:24px!important;margin-top:5px;}
.practice-unit-row .unit-chip .u-icon img{width:56px!important;height:56px!important;}
body.page-practice .unit-chip .u-icon img{width:56px!important;height:56px!important;}
body.page-practice .unit-chip .u-name{font-size:13px!important;}
body.page-practice .unit-chip .u-icon{font-size:24px!important;}
/* 小屏适配同步放大 */
@media(max-width:360px){.practice-video-section .unit-bar .unit-chip .u-icon img,.practice-video-section #unitBar .unit-chip .u-icon img{width:48px!important;height:48px!important;}.practice-video-section .unit-bar .unit-chip,.practice-video-section #unitBar .unit-chip{min-height:80px!important;}}
/* 视频区域：封面完整显示 */
.practice-video{max-width:90%;max-height:60vh;width:auto;height:auto;}
.practice-video-area{padding:6px 12px 10px!important;min-height:0;}
.v7-video-cover{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:16px;}
.v7-cover-logo{width:64px;height:64px;}
.v7-cover-title{font-size:20px;}

/* ===== K-G2游戏页单元栏横向滚动修复（新增单元不挤压，2026-08-28） ===== */
body.page-game .unit-bar .unit-chip[class*="gk-"],
body.page-game .unit-bar .unit-chip[class*="g1-"],
body.page-game .unit-bar .unit-chip[class*="g2-"] {
  flex: none !important;
  width: 64px !important;
  min-width: 64px;
  padding: 8px 4px !important;
}
body.page-game .unit-bar .unit-chip[class*="gk-"] .u-icon img,
body.page-game .unit-bar .unit-chip[class*="g1-"] .u-icon img,
body.page-game .unit-bar .unit-chip[class*="g2-"] .u-icon img {
  width: 36px !important;
  height: 36px !important;
}
body.page-game .unit-bar .unit-chip[class*="gk-"] .u-name,
body.page-game .unit-bar .unit-chip[class*="g1-"] .u-name,
body.page-game .unit-bar .unit-chip[class*="g2-"] .u-name {
  font-size: 11px !important;
}