/* ==========================================================================
   Kids Listening Lab - New Concept English Book 2
   Multi-Theme System & Big-Button Audio Player
   Color schemes: Warm Editorial | Cyber Slate | Ocean Breeze | Forest Zen
   ========================================================================== */

:root,
[data-theme="editorial"] {
  --theme-name: "暖阳社论 · Warm Editorial";
  --bg-primary: #FAF6F0;
  --bg-secondary: #F2ECE1;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFFDFB;
  --bg-audio: #F7F2E9;
  --text-primary: #1F1A17;
  --text-secondary: #5C5346;
  --text-muted: #8C8273;
  --accent: #D95D39;
  --accent-hover: #BF4B28;
  --accent-soft: rgba(217, 93, 57, 0.12);
  --border-color: #E6DEC8;
  --shadow-card: 0 10px 30px -10px rgba(31, 26, 23, 0.08);
  --shadow-hover: 0 18px 36px -12px rgba(217, 93, 57, 0.18);
  --badge-bg: #EFE7DA;
  --btn-text: #FFFFFF;
}

[data-theme="cyber"] {
  --theme-name: "暗夜极客 · Cyber Slate";
  --bg-primary: #0B0F19;
  --bg-secondary: #131B2E;
  --bg-card: #161F33;
  --bg-card-hover: #1C2740;
  --bg-audio: #0F1626;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --accent: #38BDF8;
  --accent-hover: #0EA5E9;
  --accent-soft: rgba(56, 189, 248, 0.15);
  --border-color: #26334D;
  --shadow-card: 0 12px 32px -8px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 18px 40px -10px rgba(56, 189, 248, 0.22);
  --badge-bg: #1E293B;
  --btn-text: #0B0F19;
}

[data-theme="ocean"] {
  --theme-name: "蔚蓝海风 · Ocean Breeze";
  --bg-primary: #F0F7FF;
  --bg-secondary: #E0EFFE;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FBFF;
  --bg-audio: #EDF5FF;
  --text-primary: #0C2340;
  --text-secondary: #3B5B82;
  --text-muted: #6E8CA8;
  --accent: #0284C7;
  --accent-hover: #0369A1;
  --accent-soft: rgba(2, 132, 199, 0.12);
  --border-color: #CBE2FA;
  --shadow-card: 0 10px 30px -10px rgba(2, 132, 199, 0.08);
  --shadow-hover: 0 18px 36px -12px rgba(2, 132, 199, 0.18);
  --badge-bg: #E1F0FF;
  --btn-text: #FFFFFF;
}

[data-theme="forest"] {
  --theme-name: "森系禅意 · Forest Zen";
  --bg-primary: #F2F6F3;
  --bg-secondary: #E3ECE6;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F9FCFA;
  --bg-audio: #EBF2EE;
  --text-primary: #162A22;
  --text-secondary: #435E52;
  --text-muted: #738F82;
  --accent: #2D6A4F;
  --accent-hover: #1B4332;
  --accent-soft: rgba(45, 106, 79, 0.13);
  --border-color: #CDE0D5;
  --shadow-card: 0 10px 30px -10px rgba(22, 42, 34, 0.07);
  --shadow-hover: 0 18px 36px -12px rgba(45, 106, 79, 0.16);
  --badge-bg: #DFECE4;
  --btn-text: #FFFFFF;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
}

/* Card Styling */
.lesson-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lesson-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
}

/* BIG AUDIO PLAYER CONTROLS (Kid & Parent Friendly) */
.btn-play-large {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--btn-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  box-shadow: 0 8px 20px -3px var(--accent-soft);
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  outline: none;
}
.btn-play-large:hover {
  transform: scale(1.08);
  background-color: var(--accent-hover);
}
.btn-play-large:active {
  transform: scale(0.94);
}

.btn-seek {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--bg-card);
  color: var(--text-secondary);
  border: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.2s ease;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-seek:hover {
  background-color: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.btn-seek:active {
  transform: scale(0.92);
}

.btn-rate {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 9999px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-secondary);
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn-rate:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-rate.active {
  background-color: var(--accent);
  color: var(--btn-text);
  border-color: var(--accent);
}

/* Scrub Range Bar */
input[type="range"] {
  accent-color: var(--accent);
}

/* Transcript Blind Listening Mode - Hidden by Default */
.transcript-box {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, padding 0.3s ease;
  border-radius: 0.875rem;
  background-color: var(--bg-audio);
  border: 1px solid transparent;
}
.transcript-box.revealed {
  max-height: 900px;
  opacity: 1;
  padding: 1.25rem;
  border-color: var(--border-color);
  overflow-y: auto;
}

.reveal-prompt {
  border: 2px dashed var(--border-color);
  background-color: var(--bg-audio);
  color: var(--text-secondary);
  border-radius: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.reveal-prompt:hover {
  border-color: var(--accent);
  color: var(--accent);
  background-color: var(--accent-soft);
}

/* Active Audio Playing Glow */
.lesson-card.playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-hover);
}

/* Sentence hover highlight */
.sentence-item {
  transition: background-color 0.15s ease, color 0.15s ease;
  border-radius: 0.375rem;
  padding: 0.2rem 0.4rem;
  margin-left: -0.4rem;
  margin-right: -0.4rem;
}
.sentence-item:hover {
  background-color: var(--accent-soft);
}