/* 彼得住英语启蒙 · learn页样式 */

:root {
  --primary: #4CAF50;
  --primary-dark: #388E3C;
  --primary-light: #81C784;
  --blue: #5B9BD5;
  --purple: #9C27B0;
  --orange: #FF9800;
  --red: #F44336;
  --green: #4CAF50;
  --bg: #FAF8F5;
  --card-bg: #ffffff;
  --text: #333;
  --text-light: #666;
  --text-muted: #999;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
}

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

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: 90px;
}

/* ========== 顶部 ========== */
.hero-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  padding: 20px 16px 50px;
  text-align: center;
}
.hero-header .icon { font-size: 38px; margin-bottom: 4px; }
.hero-header h1 { font-size: 18px; margin-bottom: 4px; }
.hero-header p { font-size: 13px; opacity: 0.9; }

/* ========== 内容区 ========== */
.main-content {
  background: var(--card-bg);
  border-radius: 24px 24px 0 0;
  margin-top: -30px;
  padding: 20px 14px 100px;
  min-height: calc(100vh - 160px);
}

/* ========== 功能入口（5个横排） ========== */
.feature-grid {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.feature-card {
  flex: 1;
  min-width: 55px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s;
}
.feature-card:active { transform: scale(0.96); }
.feature-card .icon { font-size: 20px; margin-bottom: 3px; }
.feature-card .title { font-size: 11px; font-weight: 600; margin-bottom: 2px; }
.feature-card .desc { font-size: 10px; color: var(--text-muted); }
.feature-card.active {
  border-color: var(--primary);
  background: #E8F5E9;
}

/* ========== 进度条 ========== */
.progress-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.progress-bar .track {
  flex: 1;
  height: 5px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: 3px;
  transition: width 0.3s;
}
.progress-bar .text {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 45px;
  text-align: right;
}

/* ========== 词汇卡片 ========== */
.vocab-card-wrap { text-align: center; padding: 8px 0 16px; }
.vocab-emoji {
  font-size: 130px;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
}
.vocab-word { font-size: 38px; font-weight: 700; margin-bottom: 6px; }
.vocab-phonetic { font-size: 17px; color: var(--text-muted); margin-bottom: 6px; }
.vocab-chinese { font-size: 20px; color: var(--primary); }

.audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
  margin: 10px 0;
}
.audio-btn:active { transform: scale(0.96); }

/* ========== 听音选图 ========== */
.quiz-section { padding: 8px 0; }
.quiz-num { text-align: center; margin-bottom: 4px; }
.quiz-num span {
  background: var(--blue);
  color: white;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 12px;
}
.quiz-title { text-align: center; font-size: 16px; margin-bottom: 14px; }

.listen-btn-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, var(--blue), #7BBFEA);
  color: white;
  border: none;
  padding: 20px;
  border-radius: var(--radius);
  font-size: 18px;
  cursor: pointer;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(91,155,213,0.35);
}
.listen-btn-big:active { transform: scale(0.98); }
.listen-btn-big.playing { animation: pulse-blue 0.8s infinite; }
@keyframes pulse-blue {
  0%, 100% { box-shadow: 0 4px 14px rgba(91,155,213,0.35); }
  50% { box-shadow: 0 4px 28px rgba(91,155,213,0.7); }
}

.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.opt {
  background: #f8f8f8;
  border: 3px solid #e8e8e8;
  border-radius: var(--radius-sm);
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.opt:active { transform: scale(0.97); }
.opt.selected { border-color: var(--blue); background: #E8F4FD; }
.opt.correct { border-color: var(--green); background: #E8F5E9; }
.opt.wrong { border-color: var(--red); background: #FFEBEE; }
.opt .opt-emoji {
  font-size: 60px;
  line-height: 1;
  margin-bottom: 6px;
}
.opt .opt-word { font-size: 15px; font-weight: 600; }
.opt .opt-hint { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.feedback {
  display: none;
  text-align: center;
  padding: 12px;
  margin-top: 12px;
  border-radius: var(--radius-sm);
  font-size: 15px;
}
.feedback.show { display: block; }
.feedback.correct { background: #E8F5E9; color: #2E7D32; }
.feedback.wrong { background: #FFEBEE; color: #C62828; }

/* ========== 跟读练习 ========== */
.record-section { padding: 8px 0; }
.record-hint {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.record-emoji {
  font-size: 120px;
  line-height: 1;
  display: block;
  text-align: center;
  margin: 0 auto 14px;
}
.record-word {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 4px;
}
.record-phonetic {
  text-align: center;
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.record-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: linear-gradient(135deg, var(--purple), #BA68C8);
  color: white;
  border: none;
  padding: 16px;
  border-radius: var(--radius);
  font-size: 15px;
  cursor: pointer;
  margin-bottom: 10px;
}
.record-btn.recording { animation: pulse-purple 0.8s infinite; }
@keyframes pulse-purple {
  0%, 100% { box-shadow: 0 4px 14px rgba(156,39,176,0.35); }
  50% { box-shadow: 0 4px 28px rgba(156,39,176,0.7); }
}
.playback-btn, .replay-native-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: #f0f0f0;
  color: var(--text-light);
  border: none;
  padding: 12px;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 10px;
}
.playback-btn:disabled, .replay-native-btn:disabled { opacity: 0.5; }

/* ========== 句型练习 ========== */
.sentence-section { padding: 8px 0; }
.sentence-hint {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.sentence-card {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 20px 16px;
  margin-bottom: 14px;
  text-align: center;
}
.sentence-pattern {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}
.sentence-example {
  font-size: 16px;
  color: var(--text);
  background: white;
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 8px;
  border: 2px solid #f0f0f0;
}
.sentence-chinese {
  font-size: 13px;
  color: var(--text-muted);
}
.sentence-listen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: linear-gradient(135deg, var(--orange), #FFB74D);
  color: white;
  border: none;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
  margin: 10px 0;
}
.sentence-listen-btn:active { transform: scale(0.98); }
.sentence-record-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: linear-gradient(135deg, var(--purple), #BA68C8);
  color: white;
  border: none;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 10px;
}
.sentence-record-btn.recording { animation: pulse-purple 0.8s infinite; }
.sentence-playback-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: #f0f0f0;
  color: var(--text-light);
  border: none;
  padding: 12px;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
}

/* ========== 导航按钮 ========== */
.nav-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.nav-row .btn {
  flex: 1;
  padding: 11px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
}
.nav-row .btn-prev { background: #f0f0f0; color: var(--text-light); }
.nav-row .btn-next { background: var(--blue); color: white; }
.nav-row .idx {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
  padding: 11px;
  min-width: 45px;
}
.nav-row .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ========== 完成页 ========== */
.complete-page {
  text-align: center;
  padding: 40px 16px;
  display: none;
}
.complete-icon { font-size: 60px; margin-bottom: 16px; }
.complete-title { font-size: 24px; font-weight: 600; margin-bottom: 6px; }
.complete-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
.complete-score { font-size: 44px; font-weight: 700; color: var(--primary); margin: 14px 0; }

/* ========== 底部导航 ========== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border-top: 1px solid #eee;
  display: flex;
  padding: 8px 0;
  z-index: 100;
}
.bottom-nav a {
  flex: 1;
  text-align: center;
  padding: 6px;
  text-decoration: none;
  color: var(--text-light);
  font-size: 11px;
}
.bottom-nav a span { display: block; font-size: 20px; margin-bottom: 2px; }
.bottom-nav a.active { color: var(--primary); }

/* ========== Toast ========== */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 200;
  display: none;
}
.toast.show { display: block; }

/* 隐藏/显示 */
.hidden { display: none !important; }

/* ========== 徽章 ========== */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.badge-s1 { background: #e8f5e9; color: #388E3C; }
.badge-s2 { background: #fff3e0; color: #F57C00; }
.badge-done { background: #e8f5e9; color: #388E3C; }

/* ========== 原版音频 ========== */
.episode-audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  padding: 16px;
  border-radius: var(--radius);
  font-size: 15px;
  cursor: pointer;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(76,175,80,0.3);
}
.episode-audio-btn:active { transform: scale(0.98); }