/* Lee English — friendly theme */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Sarabun:wght@300;400;500;600;700&display=swap');

:root {
  --coral: #ff6b6b;
  --coral-dark: #ee5253;
  --yellow: #ffd166;
  --yellow-dark: #f4b400;
  --sky: #4ecdc4;
  --sky-dark: #2eb5ab;
  --purple: #a685e2;
  --cream: #fffdf7;
  --cream-soft: #fff6e5;
  --ink: #3a3042;
  --ink-soft: #6b6275;
  --gray-light: #efe9de;
  --border: #eee3d0;
  --green: #4caf82;
  --white: #ffffff;

  --shadow-sm: 0 2px 6px rgba(58,48,66,0.08);
  --shadow-md: 0 6px 20px rgba(58,48,66,0.12);
  --shadow-lg: 0 12px 36px rgba(58,48,66,0.16);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --transition: 0.22s ease;

  --font: 'Sarabun', sans-serif;
  --font-display: 'Baloo 2', 'Sarabun', sans-serif;
  --container: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; }
.english-word { font-family: var(--font-display); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.text-center { text-align: center; }
.d-none { display: none !important; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; border: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--sky) 68%, white); outline-offset: 3px; }
.btn-primary { background: var(--coral); color: var(--white); }
.btn-primary:hover { background: var(--coral-dark); }
.btn-secondary { background: var(--sky); color: var(--white); }
.btn-secondary:hover { background: var(--sky-dark); }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: var(--yellow-dark); }
.btn-outline { background: transparent; color: var(--coral); border: 2px solid var(--coral); box-shadow: none; }
.btn-outline:hover { background: var(--coral); color: var(--white); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 18px; font-size: 0.9rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }

/* ── Navbar ──────────────────────────────────────────────────────── */
.navbar {
  background: var(--white); border-bottom: 3px solid var(--yellow);
  position: sticky; top: 0; z-index: 100;
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; }
.navbar-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--coral); }
.navbar-brand .mascot-mini { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; }
.navbar-nav { display: flex; align-items: center; gap: 22px; font-weight: 600; }
.navbar-nav a { color: var(--ink-soft); transition: color var(--transition); }
.navbar-nav a:hover, .navbar-nav a.active { color: var(--coral); }
.lang-switch { display: flex; gap: 6px; }
.lang-switch a { padding: 4px 10px; border-radius: 999px; background: var(--gray-light); font-size: 0.85rem; font-weight: 700; }
.lang-switch a.active { background: var(--sky); color: var(--white); }
.navbar-toggle { display: none; background: none; border: none; font-size: 1.6rem; color: var(--ink); }

@media (max-width: 820px) {
  .navbar-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--white);
    flex-direction: column; align-items: flex-start; padding: 16px 20px; gap: 14px;
    box-shadow: var(--shadow-md); display: none; }
  .navbar-nav.open { display: flex; }
  .navbar-toggle { display: block; }
}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, var(--yellow) 0%, var(--coral) 100%);
  color: var(--white); padding: 60px 0 80px; position: relative; overflow: hidden;
}
.hero .container { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.hero-text { flex: 1 1 340px; }
.hero-text h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; text-shadow: 0 2px 0 rgba(0,0,0,0.08); }
.hero-text p { font-size: 1.05rem; margin-bottom: 26px; opacity: 0.95; }
.hero-mascot { flex: 1 1 260px; max-width: 320px; margin: 0 auto; }

/* ── Section headings ───────────────────────────────────────────── */
.section { padding: 56px 0; }
.section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.section-heading h2 { font-size: 1.6rem; color: var(--ink); }
.section-heading::before { content: ''; width: 8px; height: 32px; background: var(--sky); border-radius: 4px; }

/* ── Course picker ───────────────────────────────────────────────── */
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.course-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow-sm); border: 2px solid var(--border); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sky); }
.course-card-badge {
  font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--white);
  background: var(--coral); padding: 8px 26px; border-radius: 999px;
}
.course-card-desc { color: var(--ink-soft); font-size: 0.95rem; min-height: 44px; }
.course-card-progress { width: 100%; }
.course-card-progress-bar { width: 100%; height: 10px; background: var(--gray-light); border-radius: 999px; overflow: hidden; }
.course-card-progress-bar span { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.course-card-progress-label { font-size: 0.8rem; color: var(--ink-soft); margin-top: 6px; }

/* ── Homepage visual refresh ────────────────────────────────────── */
.home-hero {
  background:
    radial-gradient(circle at 86% 20%, rgba(255,209,102,0.38) 0, rgba(255,209,102,0) 28%),
    linear-gradient(135deg, #2f2539 0%, #65406f 52%, #d75b67 100%);
  padding: 72px 0 82px;
  isolation: isolate;
}
.home-hero::before,
.home-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.home-hero::before {
  width: 260px;
  height: 260px;
  top: -150px;
  left: -90px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 0 44px rgba(255,255,255,0.035);
}
.home-hero::after {
  width: 190px;
  height: 190px;
  right: 8%;
  bottom: -125px;
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 38px rgba(255,255,255,0.035);
}
.home-hero .container {
  position: relative;
  z-index: 1;
  min-height: 390px;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.home-hero .hero-text { max-width: 650px; }
.home-hero .hero-text h1 {
  font-size: clamp(2.8rem, 5.8vw, 4.8rem);
  letter-spacing: -0.035em;
  margin-bottom: 18px;
  text-shadow: 0 3px 18px rgba(20,12,26,0.24);
}
.home-hero .hero-text p {
  max-width: 610px;
  margin-bottom: 0;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.75;
  color: rgba(255,255,255,0.9);
}
.home-hero-art {
  position: relative;
  flex: 0 1 500px;
  width: clamp(360px, 43vw, 520px);
  margin: -20px -12px -26px 0;
}
.home-hero-art img {
  width: 100%;
  max-height: 470px;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(30,18,36,0.24));
}

.home-page { overflow: hidden; }
.home-courses {
  padding: 76px 0 84px;
  background:
    radial-gradient(circle at 10% 15%, rgba(78,205,196,0.1), transparent 22%),
    linear-gradient(180deg, var(--cream) 0%, #f8f5ef 100%);
}
.home-page .home-section-heading {
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  margin-bottom: 38px;
  text-align: center;
}
.home-page .home-section-heading::before {
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: var(--coral);
}
.home-page .home-section-heading h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.55rem);
  letter-spacing: -0.02em;
}
.home-page .course-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
.home-page .course-card {
  --course-accent: #c2414e;
  --course-tint: #fff0f1;
  position: relative;
  overflow: hidden;
  min-height: 286px;
  padding: 26px 22px 24px;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  border: 1px solid rgba(58,48,66,0.1);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(58,48,66,0.08);
  background: rgba(255,255,255,0.96);
}
.home-page .course-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--course-accent);
}
.home-page .course-card.course-color-0 { --course-accent: #2e8b7d; --course-tint: #eafaf7; }
.home-page .course-card.course-color-1 { --course-accent: #c2414e; --course-tint: #fff0f1; }
.home-page .course-card.course-color-2 { --course-accent: #a34f08; --course-tint: #fff5e7; }
.home-page .course-card.course-color-3 { --course-accent: #6d4cc7; --course-tint: #f3efff; }
.home-page .course-card.course-color-4 { --course-accent: #2563a7; --course-tint: #edf5ff; }
.home-page .course-card.course-color-5 { --course-accent: #7a5c1e; --course-tint: #fbf6e9; }
.home-page .course-card.course-color-6 { --course-accent: #4f7a3d; --course-tint: #f1f9ec; }
.home-page .course-card.course-color-7 { --course-accent: #8c2f5c; --course-tint: #fbeef4; }
.home-page .course-card.course-color-8 { --course-accent: #e0651f; --course-tint: #fff3ea; }
.home-page .course-card:hover {
  transform: translateY(-6px);
  border-color: var(--course-accent);
  box-shadow: 0 20px 42px rgba(58,48,66,0.14);
}
.home-page .course-card:focus-visible,
.home-signup-button:focus-visible {
  outline: 3px solid var(--sky-dark);
  outline-offset: 4px;
}
.home-page .course-card-badge {
  padding: 7px 16px;
  border-radius: 10px;
  background: var(--course-tint);
  color: var(--course-accent);
  font-size: 1.45rem;
  letter-spacing: -0.015em;
}
.home-page .course-card-desc {
  flex: 1 1 auto;
  min-height: 0;
  color: #655d6e;
  font-size: 0.96rem;
  line-height: 1.7;
}
.home-page .course-card-progress-bar { height: 8px; }
.home-page .course-card-progress-bar span { background: var(--course-accent); }
.home-page .course-card-progress-label { margin-top: 8px; }
.home-page .course-card > .btn {
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--course-accent);
  color: var(--white);
  box-shadow: none;
}
.home-page .course-card:hover > .btn {
  box-shadow: 0 8px 18px rgba(58,48,66,0.16);
}

.home-signup {
  padding: 0 0 80px;
  background: #f8f5ef;
}
.home-signup .home-signup-inner {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  overflow: hidden;
  padding: 34px 42px;
  border-radius: 28px;
  background: linear-gradient(125deg, #2f2539 0%, #4c354f 100%);
  color: var(--white);
  text-align: left;
  box-shadow: 0 18px 44px rgba(47,37,57,0.2);
}
.home-signup .home-signup-inner::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  right: 80px;
  bottom: -170px;
  border-radius: 50%;
  background: rgba(255,209,102,0.14);
  pointer-events: none;
}
.home-signup-mascot,
.home-signup-title,
.home-signup-button { position: relative; z-index: 1; }
.home-signup-mascot { width: 104px; }
.home-signup-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
  line-height: 1.3;
}
.home-signup .home-signup-button {
  min-width: 150px;
  margin: 0;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(0,0,0,0.16);
}
.home-signup .home-signup-button:hover { background: #ffe196; }
main.home-page + .site-footer { margin-top: 0; }

@media (max-width: 920px) {
  .home-hero .container { min-height: 290px; }
  .home-hero-art { flex-basis: 360px; width: min(42vw, 390px); margin-right: 0; }
  .home-page .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-signup .home-signup-inner { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 22px; padding: 30px; }
  .home-signup-mascot { width: 88px; }
}

@media (max-width: 680px) {
  .home-hero { padding: 48px 0 56px; }
  .home-hero .container { min-height: 0; flex-direction: column; flex-wrap: nowrap; gap: 28px; text-align: center; }
  .home-hero .hero-text h1 { font-size: clamp(2.35rem, 12vw, 3.25rem); }
  .home-hero .hero-text p { margin: 0 auto; font-size: 1rem; }
  .home-hero-art { flex: none; width: min(92vw, 470px); margin: -8px auto -20px; }
  .home-courses { padding: 56px 0 62px; }
  .home-page .home-section-heading { margin-bottom: 28px; }
  .home-page .course-grid { grid-template-columns: 1fr; gap: 16px; }
  .home-page .course-card { min-height: 0; padding: 26px 22px 22px; }
  .home-page .course-card-desc { flex: none; }
  .home-signup { padding: 0 0 56px; }
  .home-signup .home-signup-inner { display: flex; flex-direction: column; gap: 16px; padding: 32px 24px; text-align: center; }
  .home-signup-mascot { width: 90px; }
  .home-signup .home-signup-button { width: 100%; max-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .course-card,
  .home-page .course-card > .btn { transition: none; }
  .home-page .course-card:hover { transform: none; }
}

/* ── Roadmap / day grid ─────────────────────────────────────────── */
.roadmap-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px;
}
.day-card {
  background: var(--white); border-radius: var(--radius-md); padding: 18px 14px;
  text-align: center; box-shadow: var(--shadow-sm); border: 2px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
}
.day-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.day-card .day-num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--coral); }
.day-card .day-title { font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; min-height: 34px; }
.day-card.is-review { border-color: var(--purple); background: #f6f1ff; }
.day-card.is-exam { border-color: var(--coral); background: #fff0ee; }
.day-card.is-completed { border-color: var(--green); }
.day-card.is-completed::after { content: '✓'; position: absolute; top: -10px; right: -10px;
  width: 28px; height: 28px; background: var(--green); color: var(--white); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: var(--shadow-sm); }
.day-card.is-locked { opacity: 0.55; filter: grayscale(0.4); pointer-events: none; }
.day-card.is-vocab-list { border-color: var(--sky); background: #eafbf9; }
.day-card.is-vocab-list .day-num { font-size: 1.6rem; }
.day-card.is-intro { border-color: var(--yellow-dark); background: #fffbea; }
.day-card.is-intro .day-num { font-size: 1.6rem; }
.day-card .badge { display: inline-block; margin-top: 6px; font-size: 0.7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; background: var(--yellow); color: var(--ink); }

/* ── Flashcards ──────────────────────────────────────────────────── */
.flashcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.flashcard {
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  border: 2px solid var(--border); padding: 22px 16px; text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.flashcard:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow-md); }
.flashcard .icon-wrap { width: 84px; height: 84px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
  background: var(--cream-soft); border-radius: 50%; }
.flashcard .icon-wrap svg { width: 56px; height: 56px; }
.flashcard .hanzi,
.flashcard .vocab-word { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--ink); }
.flashcard .pinyin,
.flashcard .vocab-phonetic { color: var(--sky-dark); font-weight: 600; margin: 4px 0; }
.flashcard .meaning { font-size: 0.9rem; color: var(--ink-soft); margin-top: 10px; justify-content: center; }
.flashcard .meaning .en { display: block; font-style: italic; opacity: 0.85; }
.flashcard .listen-btn {
  margin-top: 6px; background: var(--yellow); border: none; border-radius: 999px;
  width: 36px; height: 36px; font-size: 1rem; box-shadow: var(--shadow-sm);
}
.flashcard .listen-btn:hover { background: var(--yellow-dark); }
.flashcard .example { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 0.82rem; color: var(--ink-soft); }
.listen-btn-sm { flex-shrink: 0; background: var(--yellow); border: none; border-radius: 999px;
  width: 24px; height: 24px; font-size: 0.75rem; box-shadow: none; padding: 0; line-height: 1; }
.listen-btn-sm:hover { background: var(--yellow-dark); }

/* ── Grammar box ─────────────────────────────────────────────────── */
.grammar-box { background: var(--white); border-radius: var(--radius-md); padding: 26px; box-shadow: var(--shadow-sm); border-left: 6px solid var(--sky); }
.grammar-box h3 { color: var(--sky-dark); margin-bottom: 10px; }
.grammar-examples { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.grammar-example { background: var(--cream-soft); border-radius: var(--radius-sm); padding: 12px 16px; }
.grammar-example .cn { font-size: 1.2rem; font-weight: 700; }
.grammar-example .pinyin { color: var(--sky-dark); font-size: 0.9rem; }
.grammar-example .tr { font-size: 0.85rem; color: var(--ink-soft); margin-top: 2px; }

/* ── Lesson intro / mascot bubble ───────────────────────────────── */
.mascot-intro { display: flex; align-items: flex-start; gap: 16px; background: var(--white);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); margin-bottom: 30px; }
.mascot-intro .mascot-icon { width: 72px; flex-shrink: 0; }
.speech-bubble { background: var(--cream-soft); border-radius: var(--radius-md); padding: 14px 18px; position: relative; flex: 1; }
.lesson-video-wrap { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 30px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: #000; }
.lesson-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Quiz ────────────────────────────────────────────────────────── */
.quiz-question { background: var(--white); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm);
  margin-bottom: 20px; border: 2px solid var(--border); }
.quiz-question .qnum { display: inline-block; background: var(--sky); color: var(--white); font-weight: 700;
  border-radius: 999px; width: 28px; height: 28px; text-align: center; line-height: 28px; margin-right: 8px; }
.quiz-question .qtext { font-size: 1.1rem; font-weight: 600; margin: 10px 0 16px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.quiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.quiz-option { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--cream-soft); border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; text-align: center; font-weight: 600; transition: all var(--transition); }
.quiz-option:hover { border-color: var(--sky); }
.quiz-option input { display: none; }
.quiz-option input:checked + span { color: var(--coral); }
.quiz-option.selected { border-color: var(--coral); background: #fff0ee; }
.quiz-option.correct { border-color: var(--green); background: #eafaf1; }
.quiz-option.wrong { border-color: var(--coral-dark); background: #ffe8e6; }
.quiz-fill input[type=text] { width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); border: 2px solid var(--border); font-size: 1rem; }
.quiz-result { text-align: center; background: var(--white); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); }
.quiz-result .score { font-family: var(--font-display); font-size: 3rem; color: var(--coral); font-weight: 800; }

/* ── Forms ───────────────────────────────────────────────────────── */
.auth-wrap { max-width: 440px; margin: 60px auto; background: var(--white); border-radius: var(--radius-lg);
  padding: 36px; box-shadow: var(--shadow-md); }
.auth-wrap h1 { text-align: center; margin-bottom: 24px; color: var(--coral); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
.form-group input { width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 2px solid var(--border);
  font-size: 1rem; font-family: var(--font); transition: border-color var(--transition); }
.form-group input:focus { outline: none; border-color: var(--sky); }
.form-error { background: #ffe8e6; color: var(--coral-dark); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.9rem; }
.form-success { background: #eafaf1; color: #2f8a5f; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.9rem; }
.auth-switch { text-align: center; margin-top: 18px; font-size: 0.9rem; color: var(--ink-soft); }
.auth-switch a { color: var(--sky-dark); font-weight: 700; }

/* ── Account dashboard ──────────────────────────────────────────── */
.account-layout { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.account-sidebar { flex: 0 0 220px; background: var(--white); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); }
.account-sidebar .avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--yellow); margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; color: var(--white); }
.account-nav { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.account-nav a { padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 600; color: var(--ink-soft); }
.account-nav a.active, .account-nav a:hover { background: var(--cream-soft); color: var(--coral); }
.account-content { flex: 1 1 460px; }
.course-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.course-tab { background: var(--white); border-radius: var(--radius-md); padding: 10px 18px; box-shadow: var(--shadow-sm);
  font-weight: 700; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.course-tab .course-tab-frac { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); background: var(--cream-soft); border-radius: 999px; padding: 2px 9px; }
.course-tab.active { background: var(--sky-dark); color: var(--white); }
.course-tab.active .course-tab-frac { background: rgba(255,255,255,0.25); color: var(--white); }
.progress-stats { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.stat-pill { background: var(--white); border-radius: var(--radius-md); padding: 16px 22px; box-shadow: var(--shadow-sm); text-align: center; }
.stat-pill .num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--sky-dark); }
.stat-pill .label { font-size: 0.8rem; color: var(--ink-soft); }
table.quiz-history { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
table.quiz-history th, table.quiz-history td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
table.quiz-history th { background: var(--cream-soft); font-family: var(--font-display); }

/* ── Worksheet ───────────────────────────────────────────────────── */
.worksheet-header { text-align: center; margin-bottom: 30px; }
.worksheet-list { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.worksheet-list-row { display: flex; align-items: center; gap: 16px; background: var(--white); border-radius: var(--radius-sm);
  padding: 12px 16px; box-shadow: var(--shadow-sm); border: 2px solid var(--border); }
.worksheet-list-row.is-completed { border-color: var(--green); }
.worksheet-list-row .wl-day { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--coral);
  width: 34px; flex-shrink: 0; text-align: center; }
.worksheet-list-row .wl-title { flex: 1; font-weight: 600; }
.worksheet-list-row .wl-title .badge { display: inline-block; margin-left: 8px; font-size: 0.7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; background: var(--yellow); color: var(--ink); }
.worksheet-list-row .wl-actions { display: flex; gap: 8px; flex-shrink: 0; }
.worksheet-content { position: relative; }
.tracing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; margin: 12px 0 20px; }
.tracing-box { aspect-ratio: 1; border: 2px solid var(--ink-soft); position: relative; background: var(--white); border-radius: 6px; }
.tracing-box::before, .tracing-box::after { content: ''; position: absolute; background: var(--border); }
.tracing-box::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.tracing-box::after { left: 0; right: 0; top: 50%; height: 1px; }
.tracing-box .ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-cn); font-size: 2.4rem; color: var(--border); z-index: 0; }
.tracing-box svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.stroke-practice-block { margin-bottom: 22px; }
.stroke-step-label { font-size: 0.8rem; color: var(--ink-soft); margin: 10px 0 6px; font-weight: 600; }
.match-row { display: flex; align-items: center; justify-content: space-between; background: var(--white); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.word-chip { display: inline-block; background: var(--cream-soft); border: 2px solid var(--sky);
  border-radius: var(--radius-sm); padding: 8px 14px; font-size: 1.2rem; font-weight: 600; }
.write-from-phonetics-box { background: var(--cream-soft); }

/* ── Printable mock-exam worksheet ──────────────────────────────── */
.exam-paper { margin-top: 10px; }
.exam-instructions { background: var(--cream-soft); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 22px; font-size: 0.92rem; color: var(--ink-soft); }
.exam-section-title { margin: 24px 0 14px; font-family: var(--font-display); color: var(--coral); }
.exam-section-break { page-break-before: always; }
.exam-question { display: flex; gap: 12px; background: var(--white); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow-sm); break-inside: avoid; }
.exam-q-num { font-weight: 800; color: var(--coral); flex-shrink: 0; min-width: 26px; }
.exam-q-body { flex: 1; }
.exam-q-prompt { font-weight: 600; margin-bottom: 10px; }
.exam-q-prompt.cn { font-size: 1.15rem; }
.exam-q-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.exam-option { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.exam-option-letter { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 2px solid var(--ink-soft); border-radius: 50%; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.exam-answer-key { margin-top: 30px; }
.exam-answer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px 4px;
  background: var(--cream-soft); border-radius: var(--radius-sm); padding: 16px; }
.exam-answer-cell { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: 60px;
  padding: 58px 0 22px;
  border-top: 4px solid var(--yellow);
  background: linear-gradient(145deg, #22253b 0%, #302a46 58%, #243747 100%);
  color: rgba(255,255,255,0.78);
  font-size: 0.93rem;
}
.site-footer::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  right: -130px;
  top: -170px;
  border-radius: 50%;
  background: rgba(255,216,92,0.08);
  pointer-events: none;
}
.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1.25fr) minmax(220px, 1fr) minmax(160px, 0.72fr);
  gap: 52px;
  align-items: start;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 800;
}
.footer-brand:hover { color: var(--yellow); }
.site-footer .footer-brand .mascot-mini {
  width: 58px;
  height: 58px;
  margin: 0;
  object-fit: contain;
  flex-shrink: 0;
}
.footer-description {
  max-width: 430px;
  margin: 17px 0 18px;
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
}
.footer-course-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(255,216,92,0.42);
  border-radius: 999px;
  color: var(--yellow);
  font-weight: 700;
  transition: color var(--transition), background var(--transition), transform var(--transition);
}
.footer-course-cta:hover {
  color: var(--ink);
  background: var(--yellow);
  transform: translateY(-2px);
}
.footer-nav h2 {
  margin: 4px 0 18px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
}
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.footer-nav li + li { margin-top: 11px; }
.footer-nav a {
  display: inline-block;
  color: rgba(255,255,255,0.68);
  line-height: 1.5;
  transition: color var(--transition), transform var(--transition);
}
.footer-nav a:hover {
  color: var(--yellow);
  transform: translateX(3px);
}
.footer-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  font-size: 0.82rem;
}
.footer-bottom p { margin: 0; }

@media (max-width: 840px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px 46px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-description { max-width: 620px; }
}

@media (max-width: 560px) {
  .site-footer { padding: 46px 0 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-about { grid-column: auto; }
  .footer-nav h2 { margin-bottom: 14px; }
  .footer-nav li + li { margin-top: 9px; }
  .footer-bottom { flex-direction: column; margin-top: 34px; }
}

@media (max-width: 600px) {
  .account-layout { flex-direction: column; }
  .account-sidebar { width: 100%; }
}

/* ── Admin panel ─────────────────────────────────────────────────── */
.admin-subnav { background: var(--ink); }
.admin-subnav .container { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-subnav a { color: rgba(255,255,255,0.7); padding: 12px 16px; font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.admin-subnav a:hover, .admin-subnav a.active { color: #fff; background: rgba(255,255,255,0.1); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 20px; }
.admin-stat-card { background: var(--white); border-radius: var(--radius-md); padding: 20px; text-align: center; box-shadow: var(--shadow-sm); border: 2px solid var(--border); }
.admin-stat-card .num { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--coral); }
.admin-stat-card .label { font-size: 0.85rem; color: var(--ink-soft); margin-top: 4px; }
.admin-table-wrap { overflow-x: auto; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 2px solid var(--border); margin-top: 10px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th, .admin-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table th { background: var(--cream-soft); font-weight: 700; color: var(--ink); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--cream-soft); }
.admin-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: capitalize; }
.admin-badge-pending { background: #fff3cd; color: #7a5c00; }
.admin-badge-approved, .admin-badge-paid { background: #e8f8ee; color: #1f7a4d; }
.admin-badge-rejected, .admin-badge-failed { background: #fde8e8; color: #c0392b; }
.admin-badge-refunded { background: #e6e6fa; color: #4b0082; }
.admin-form-row { margin-bottom: 14px; }
.admin-form-row label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; }
.admin-form-row input[type="text"], .admin-form-row input[type="email"], .admin-form-row input[type="number"],
.admin-form-row input[type="date"], .admin-form-row select, .admin-form-row textarea {
  width: 100%; padding: 9px 12px; border-radius: 8px; border: 2px solid var(--border); font-family: inherit; font-size: 0.95rem;
}
.admin-search { padding: 9px 14px; border-radius: 999px; border: 2px solid var(--border); width: 100%; max-width: 320px; margin-bottom: 14px; }
.admin-card { background: var(--white); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); border: 2px solid var(--border); margin-bottom: 20px; }


/* ── New landing homepage ────────────────────────────────────────── */
.landing-hero,
.landing-page {
  --landing-deep: #2d2235;
  --landing-plum: #604064;
  --landing-coral: #dc5e67;
  --landing-gold: #ffd166;
  --landing-paper: #fbf8f1;
  --landing-mint: #dff5f0;
}
.landing-hero {
  position: relative;
  overflow: hidden;
  padding: 86px 0 96px;
  color: var(--white);
  background:
    radial-gradient(circle at 83% 16%, rgba(255,209,102,0.22), transparent 24%),
    radial-gradient(circle at 10% 100%, rgba(78,205,196,0.16), transparent 28%),
    linear-gradient(135deg, #251c2d 0%, #4a304e 48%, #aa4d5e 100%);
}
.landing-hero::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  top: -330px;
  left: -170px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 50%;
  box-shadow: 0 0 0 78px rgba(255,255,255,0.025), 0 0 0 156px rgba(255,255,255,0.02);
  pointer-events: none;
}
.landing-hero::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  right: -130px;
  bottom: -170px;
  border-radius: 50%;
  background: rgba(255,209,102,0.08);
  pointer-events: none;
}
.landing-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(350px, 0.88fr);
  align-items: center;
  gap: 66px;
}
.landing-hero-copy { max-width: 690px; }
.landing-eyebrow,
.landing-section-kicker {
  font-weight: 700;
  letter-spacing: 0.035em;
  color: var(--coral-dark);
}
.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 22px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  color: #ffe7b0;
  font-size: 0.88rem;
  backdrop-filter: blur(8px);
}
.landing-hero-copy h1 {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: clamp(2.7rem, 5.3vw, 4.7rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
  text-shadow: 0 4px 24px rgba(18,10,22,0.25);
}
.landing-hero-lead {
  max-width: 650px;
  color: rgba(255,255,255,0.84);
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
  line-height: 1.85;
}
.landing-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.landing-btn-primary,
.landing-btn-dark,
.landing-btn-ghost {
  min-height: 50px;
  padding: 12px 25px;
}
.landing-btn-primary {
  background: var(--landing-gold);
  color: var(--landing-deep);
  box-shadow: 0 12px 26px rgba(17,10,21,0.2);
}
.landing-btn-primary:hover { background: #ffe19a; }
.landing-btn-ghost {
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.07);
  color: var(--white);
  box-shadow: none;
}
.landing-btn-ghost:hover { background: rgba(255,255,255,0.15); }
.landing-btn-dark {
  background: var(--landing-deep);
  color: var(--white);
}
.landing-btn-dark:hover { background: #47334d; }

.landing-hero-visual {
  position: relative;
  min-height: 540px;
}
.landing-orbit {
  position: absolute;
  width: 420px;
  height: 420px;
  top: 14px;
  left: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow:
    0 0 0 36px rgba(255,255,255,0.025),
    inset 0 0 90px rgba(255,209,102,0.07);
}
.landing-hero-visual > img {
  position: absolute;
  z-index: 2;
  width: 300px;
  top: 58px;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  filter: drop-shadow(0 28px 32px rgba(20,12,25,0.3));
}
.landing-skill {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  background: rgba(45,34,53,0.68);
  color: rgba(255,255,255,0.88);
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(20,12,25,0.16);
  backdrop-filter: blur(10px);
}
.landing-skill b {
  color: var(--landing-gold);
  font-size: 1.18rem;
}
.landing-skill-listen { top: 42px; left: 0; }
.landing-skill-read { top: 178px; right: -5px; }
.landing-skill-write { top: 292px; left: 8px; }
.landing-quote {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: min(100%, 390px);
  padding: 22px 24px 20px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
  box-shadow: 0 18px 42px rgba(19,11,23,0.2);
  backdrop-filter: blur(14px);
}
.landing-quote p { color: rgba(255,255,255,0.78); font-size: 0.9rem; }
.landing-quote .landing-quote-cn {
  margin-bottom: 5px;
  color: var(--white);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.landing-quote cite {
  display: block;
  margin-top: 8px;
  color: #ffe7b0;
  font-size: 0.8rem;
  font-style: normal;
}

.landing-page { overflow: hidden; background: var(--landing-paper); }
.landing-intro {
  padding: 96px 0 82px;
  text-align: center;
  background:
    radial-gradient(circle at 8% 20%, rgba(78,205,196,0.09), transparent 20%),
    var(--landing-paper);
}
.landing-section-kicker {
  margin-bottom: 12px;
  font-size: 0.88rem;
}
.landing-intro h2,
.landing-path-intro h2 {
  max-width: 880px;
  margin: 0 auto;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.landing-section-lead {
  max-width: 820px;
  margin: 24px auto 0;
  color: var(--ink-soft);
  font-size: 1.06rem;
  line-height: 1.85;
}
.landing-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 980px;
  margin: 52px auto 0;
  overflow: hidden;
  border: 1px solid rgba(58,48,66,0.09);
  border-radius: 22px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 14px 36px rgba(58,48,66,0.07);
}
.landing-fact {
  display: flex;
  min-height: 150px;
  padding: 26px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.landing-fact + .landing-fact { border-left: 1px solid rgba(58,48,66,0.09); }
.landing-fact strong {
  color: var(--landing-plum);
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1.1;
}
.landing-fact span {
  max-width: 220px;
  margin-top: 9px;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

.landing-method {
  position: relative;
  padding: 92px 0 100px;
  color: var(--white);
  background:
    radial-gradient(circle at 85% 15%, rgba(220,94,103,0.16), transparent 24%),
    var(--landing-deep);
}
.landing-method::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  left: -240px;
  bottom: -220px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 50%;
}
.landing-method .landing-section-kicker { color: #ffd986; }
.landing-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 70px;
  align-items: end;
}
.landing-section-heading h2 {
  max-width: 760px;
  font-size: clamp(2rem, 3.7vw, 3rem);
  line-height: 1.22;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.landing-section-heading > p {
  color: rgba(255,255,255,0.66);
  line-height: 1.75;
}
.landing-method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 52px;
}
.landing-method-card {
  position: relative;
  min-height: 310px;
  padding: 28px 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 20px;
  background: rgba(255,255,255,0.055);
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.landing-method-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,209,102,0.45);
  background: rgba(255,255,255,0.09);
}
.landing-method-num {
  color: rgba(255,255,255,0.38);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
}
.landing-method-char {
  display: block;
  margin: 28px 0 20px;
  color: var(--landing-gold);
  font-size: 3.15rem;
  font-weight: 700;
  line-height: 1;
}
.landing-method-card h3 { margin-bottom: 10px; font-size: 1.35rem; }
.landing-method-card p { color: rgba(255,255,255,0.66); font-size: 0.9rem; line-height: 1.75; }

.landing-path {
  padding: 96px 0 100px;
  background:
    radial-gradient(circle at 92% 12%, rgba(255,209,102,0.14), transparent 20%),
    linear-gradient(180deg, #fffdf8 0%, #f7f1e7 100%);
}
.landing-path-intro { text-align: center; }
.landing-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 52px;
}
.landing-path-card {
  --path-color: var(--coral);
  position: relative;
  min-height: 285px;
  padding: 28px 24px;
  overflow: hidden;
  border: 1px solid rgba(58,48,66,0.1);
  border-radius: 20px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 12px 30px rgba(58,48,66,0.07);
}
.landing-path-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--path-color);
}
.landing-path-card::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  right: -65px;
  bottom: -65px;
  border-radius: 50%;
  background: var(--path-color);
  opacity: 0.07;
}
.landing-path-pronunciation { --path-color: #0f766e; }
.landing-path-foundation { --path-color: #c2414e; }
.landing-path-growth { --path-color: #6d4cc7; }
.landing-path-fluency { --path-color: #374151; }
.landing-path-mastery { --path-color: #b8860b; }
.landing-path-practice { --path-color: #b45309; }
.landing-path-songs { --path-color: #b83280; }
.landing-path-level {
  color: var(--path-color);
  font-size: 0.78rem;
  font-weight: 700;
}
.landing-path-card h3 {
  margin: 26px 0 16px;
  color: var(--path-color);
  font-size: 2rem;
}
.landing-path-card p {
  position: relative;
  z-index: 1;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.75;
}
.landing-path-action { margin-top: 42px; text-align: center; }

.landing-final {
  padding: 0 0 92px;
  background: #f7f1e7;
}
.landing-final-card {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  overflow: hidden;
  padding: 38px 44px;
  border-radius: 28px;
  color: var(--white);
  background:
    radial-gradient(circle at 85% 110%, rgba(255,209,102,0.2), transparent 28%),
    linear-gradient(125deg, #302338 0%, #573b5b 100%);
  box-shadow: 0 20px 48px rgba(45,34,53,0.2);
}
.landing-final-card::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  top: -165px;
  right: 18%;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
}
.landing-final-card > * { position: relative; z-index: 1; }
.landing-final-card img { width: 112px; }
.landing-final-card .landing-section-kicker { color: #ffe098; }
.landing-final-card h2 {
  max-width: 720px;
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  line-height: 1.35;
}
main.landing-page + .site-footer { margin-top: 0; }

.landing-page a:focus-visible,
.landing-hero a:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 4px;
}

@media (max-width: 1020px) {
  .landing-hero-layout { grid-template-columns: minmax(0, 1fr) minmax(310px, 0.75fr); gap: 30px; }
  .landing-hero-visual { min-height: 510px; }
  .landing-orbit { width: 360px; height: 360px; }
  .landing-hero-visual > img { width: 265px; }
  .landing-method-grid,
  .landing-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-method-card,
  .landing-path-card { min-height: 270px; }
  .landing-final-card { grid-template-columns: 90px minmax(0, 1fr) auto; padding: 34px; }
  .landing-final-card img { width: 90px; }
}

@media (max-width: 820px) {
  .landing-hero { padding: 68px 0 78px; }
  .landing-hero-layout { grid-template-columns: 1fr; }
  .landing-hero-copy { max-width: 720px; margin: 0 auto; text-align: center; }
  .landing-hero-lead { margin: 0 auto; }
  .landing-hero-actions { justify-content: center; }
  .landing-hero-visual { width: min(100%, 520px); min-height: 530px; margin: 10px auto 0; }
  .landing-section-heading { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .landing-section-heading h2 { margin: 0 auto; }
  .landing-section-heading > p { max-width: 620px; margin: 0 auto; }
  .landing-facts { grid-template-columns: 1fr; max-width: 560px; }
  .landing-fact { min-height: 125px; }
  .landing-fact + .landing-fact { border-top: 1px solid rgba(58,48,66,0.09); border-left: none; }
  .landing-final-card { grid-template-columns: 82px minmax(0, 1fr); text-align: left; }
  .landing-final-card img { width: 82px; }
  .landing-final-card > .btn { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 620px) {
  .landing-hero { padding: 52px 0 62px; }
  .landing-eyebrow { margin-bottom: 18px; font-size: 0.76rem; }
  .landing-hero-copy h1 { font-size: clamp(2.2rem, 11vw, 2.85rem); letter-spacing: -0.035em; }
  .landing-hero-lead { font-size: 0.98rem; line-height: 1.75; }
  .landing-hero-actions { flex-direction: column; align-items: stretch; }
  .landing-hero-actions .btn { width: 100%; }
  .landing-hero-visual { min-height: 475px; }
  .landing-orbit { width: 310px; height: 310px; top: 18px; }
  .landing-hero-visual > img { width: 220px; top: 62px; }
  .landing-skill { padding: 7px 10px; }
  .landing-skill-listen { top: 36px; left: 0; }
  .landing-skill-read { top: 164px; right: 0; }
  .landing-skill-write { top: 262px; left: 4px; }
  .landing-quote { right: 50%; width: calc(100% - 12px); padding: 18px 20px; transform: translateX(50%); }
  .landing-quote .landing-quote-cn { font-size: 1.4rem; }
  .landing-intro,
  .landing-method,
  .landing-path { padding: 68px 0 72px; }
  .landing-intro h2,
  .landing-path-intro h2,
  .landing-section-heading h2 { font-size: 2rem; }
  .landing-section-lead { font-size: 0.98rem; }
  .landing-facts { margin-top: 36px; }
  .landing-method-grid,
  .landing-path-grid { grid-template-columns: 1fr; margin-top: 36px; }
  .landing-method-card,
  .landing-path-card { min-height: 0; }
  .landing-method-card { padding: 24px 22px; }
  .landing-method-char { margin: 20px 0 14px; }
  .landing-path-card { padding: 26px 22px; }
  .landing-path-card h3 { margin: 20px 0 12px; }
  .landing-final { padding: 0 0 64px; }
  .landing-final-card { display: flex; flex-direction: column; gap: 18px; padding: 32px 24px; text-align: center; }
  .landing-final-card img { width: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-method-card { transition: none; }
  .landing-method-card:hover { transform: none; }
}

/* Thai display type needs extra vertical room for combining marks. */
html[lang="th"] .landing-hero-copy h1 {
  line-height: 1.34;
  letter-spacing: -0.018em;
}

html[lang="th"] .landing-intro h2,
html[lang="th"] .landing-path-intro h2,
html[lang="th"] .landing-section-heading h2,
html[lang="th"] .landing-final-card h2 {
  line-height: 1.45;
  letter-spacing: -0.012em;
}

html[lang="th"] .landing-method-card h3 {
  line-height: 1.5;
}


/* ── Course card learning details ────────────────────────────────── */
.home-page .course-duration-note {
  max-width: 520px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}
.home-page .course-card-head {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.home-page .course-level-art {
  width: 82px;
  height: 62px;
  flex: 0 0 82px;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(58,48,66,0.10));
  transition: transform var(--transition);
}
.home-page .course-card:hover .course-level-art { transform: translateY(-2px) rotate(2deg); }
.home-page .course-card-duration {
  display: inline-flex;
  flex-shrink: 0;
  align-items: baseline;
  gap: 4px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--course-tint);
  color: var(--course-accent);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.home-page .course-card-duration strong {
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1;
}
.home-page .course-card-requirement {
  width: 100%;
  padding: 12px 14px;
  border-left: 3px solid var(--course-accent);
  border-radius: 10px;
  background: var(--course-tint);
}
.home-page .course-card-requirement span {
  display: block;
  color: var(--course-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}
.home-page .course-card-requirement strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.55;
}

@media (max-width: 680px) {
  .home-page .course-card-head { align-items: flex-start; }
  .home-page .course-card-desc { flex: 1 1 auto; }
}


/* ── Friendly guided-lesson theme ───────────────────────────────── */
.lesson-page-kids {
  --kid-coral: #ff7183;
  --kid-sky: #6dcff6;
  --kid-mint: #68d6c1;
  --kid-yellow: #ffd467;
  --kid-purple: #a992ef;
  --kid-ink: #40384f;
  position: relative;
  overflow: hidden;
  padding: 54px 0 86px;
  background:
    radial-gradient(circle at 7% 2%, rgba(255,212,103,0.32) 0 100px, transparent 101px),
    radial-gradient(circle at 96% 7%, rgba(109,207,246,0.22) 0 130px, transparent 131px),
    linear-gradient(180deg, #fffaf0 0%, #f8fcff 48%, #fff9f4 100%);
  color: var(--kid-ink);
}
.lesson-page-kids::before,
.lesson-page-kids::after {
  position: absolute;
  z-index: 0;
  color: rgba(255,113,131,0.24);
  font-size: 4rem;
  line-height: 1;
  pointer-events: none;
}
.lesson-page-kids::before { content: '★'; top: 310px; left: 3vw; transform: rotate(-12deg); }
.lesson-page-kids::after { content: '✦'; top: 760px; right: 3vw; color: rgba(109,207,246,0.28); }
.lesson-page-kids > .container { position: relative; z-index: 1; max-width: 1080px; }

.lesson-page-kids > .container > .section-heading:first-child {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 138px;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  padding: 30px 34px;
  border: 3px solid rgba(255,255,255,0.9);
  border-radius: 30px;
  background: linear-gradient(125deg, #7764d8 0%, #9e7ce8 54%, #f08ba5 100%);
  box-shadow: 0 18px 38px rgba(99,76,155,0.2);
}
.lesson-page-kids > .container > .section-heading:first-child::before {
  content: '★';
  display: flex;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--kid-yellow);
  color: #8e6415;
  box-shadow: 0 8px 18px rgba(90,58,10,0.18);
  font-size: 1.55rem;
  transform: rotate(-5deg);
}
.lesson-page-kids > .container > .section-heading:first-child::after {
  content: '';
  position: absolute;
  right: -30px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border: 28px solid rgba(255,255,255,0.11);
  border-radius: 50%;
  pointer-events: none;
}
.lesson-page-kids > .container > .section-heading:first-child h2 {
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.45rem);
  line-height: 1.35;
  text-shadow: 0 2px 0 rgba(64,56,79,0.12);
}
.lesson-page-kids > .container > .section-heading:first-child .listen-btn-sm {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  background: #fff;
  color: var(--kid-ink);
  box-shadow: 0 7px 16px rgba(64,56,79,0.18);
  font-size: 1rem;
}

.lesson-page-kids .mascot-intro {
  align-items: center;
  gap: 28px;
  margin-bottom: 44px;
  padding: 26px 30px;
  border: 3px solid #fff;
  border-radius: 30px;
  background: linear-gradient(135deg, #fff 0%, #fff4dc 100%);
  box-shadow: 0 14px 34px rgba(91,72,48,0.12);
}
.lesson-page-kids .mascot-intro .mascot-icon {
  width: 128px;
  filter: drop-shadow(0 10px 10px rgba(64,56,79,0.13));
  animation: leeMascotFloat 3.6s ease-in-out infinite;
}
.lesson-page-kids .speech-bubble {
  padding: 20px 24px;
  border: 2px solid rgba(104,214,193,0.65);
  border-radius: 22px;
  background: #fff;
  color: #544b60;
  font-size: 1.05rem;
  line-height: 1.8;
  box-shadow: 0 8px 20px rgba(62,133,122,0.08);
}
.lesson-page-kids .speech-bubble::before {
  content: '';
  position: absolute;
  left: -11px;
  top: 36px;
  width: 18px;
  height: 18px;
  border-left: 2px solid rgba(104,214,193,0.65);
  border-bottom: 2px solid rgba(104,214,193,0.65);
  background: #fff;
  transform: rotate(45deg);
}
.lesson-page-kids .speech-bubble .listen-btn-sm {
  width: 30px;
  height: 30px;
  margin-left: 6px;
  background: var(--kid-yellow);
}

.lesson-page-kids > .container > .section-heading:not(:first-child) {
  gap: 13px;
  margin: 48px 0 22px;
}
.lesson-page-kids > .container > .section-heading:not(:first-child)::before {
  content: '★';
  display: flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--kid-mint);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 6px 14px rgba(53,149,132,0.2);
  transform: rotate(-4deg);
}
.lesson-page-kids > .container > .section-heading:not(:first-child) h2 {
  color: var(--kid-ink);
  font-size: clamp(1.65rem, 3vw, 2rem);
  line-height: 1.4;
}

.lesson-page-kids .flashcard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.lesson-page-kids .flashcard {
  --kid-card-accent: var(--kid-coral);
  --kid-card-tint: #fff0f3;
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 28px 20px 24px;
  border: 3px solid var(--kid-card-accent);
  border-radius: 28px;
  background: linear-gradient(155deg, #fff 36%, var(--kid-card-tint) 100%);
  box-shadow: 0 12px 0 color-mix(in srgb, var(--kid-card-accent) 20%, transparent), 0 18px 30px rgba(64,56,79,0.08);
}
.lesson-page-kids .flashcard:nth-child(2) { --kid-card-accent: var(--kid-sky); --kid-card-tint: #edf9ff; }
.lesson-page-kids .flashcard:nth-child(3) { --kid-card-accent: var(--kid-purple); --kid-card-tint: #f4f0ff; }
.lesson-page-kids .flashcard:nth-child(4) { --kid-card-accent: var(--kid-mint); --kid-card-tint: #ecfbf7; }
.lesson-page-kids .flashcard:nth-child(5) { --kid-card-accent: #f3b84b; --kid-card-tint: #fff8e8; }
.lesson-page-kids .flashcard:nth-child(6) { --kid-card-accent: #ee8fc4; --kid-card-tint: #fff1f8; }
.lesson-page-kids .flashcard::after {
  content: '★';
  position: absolute;
  top: 14px;
  right: 16px;
  color: color-mix(in srgb, var(--kid-card-accent) 48%, white);
  font-size: 1.35rem;
  transform: rotate(10deg);
}
.lesson-page-kids .flashcard:hover {
  border-color: var(--kid-card-accent);
  transform: translateY(-7px) rotate(-1deg);
  box-shadow: 0 13px 0 color-mix(in srgb, var(--kid-card-accent) 24%, transparent), 0 22px 34px rgba(64,56,79,0.12);
}
.lesson-page-kids .flashcard .hanzi {
  color: var(--kid-ink);
  font-size: 3.15rem;
  line-height: 1.2;
}
.lesson-page-kids .flashcard .pinyin {
  display: inline-block;
  margin: 8px 0 5px;
  padding: 4px 13px;
  border-radius: 999px;
  background: #fff;
  color: color-mix(in srgb, var(--kid-card-accent) 75%, #324);
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(64,56,79,0.08);
}
.lesson-page-kids .flashcard .listen-btn {
  width: 44px;
  height: 44px;
  margin-top: 9px;
  background: var(--kid-yellow);
  box-shadow: 0 6px 0 #eeb448, 0 9px 16px rgba(119,79,17,0.13);
  font-size: 1.05rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.lesson-page-kids .flashcard .listen-btn:hover {
  background: #ffe397;
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #eeb448, 0 12px 18px rgba(119,79,17,0.15);
}
.lesson-page-kids .flashcard .listen-btn-sm {
  width: 32px;
  height: 32px;
  margin: 0;
  font-size: 0.78rem;
  box-shadow: 0 4px 0 #eeb448;
}
.lesson-page-kids .flashcard .meaning {
  min-height: 38px;
  margin-top: 16px;
  color: #5d5368;
  font-size: 1rem;
  line-height: 1.55;
}
.lesson-page-kids .flashcard .example {
  margin-top: 16px;
  padding: 14px 10px 2px;
  border-top: 2px dashed color-mix(in srgb, var(--kid-card-accent) 26%, white);
  color: #665d70;
  font-size: 0.88rem;
  line-height: 1.65;
}

.lesson-page-kids .grammar-box {
  padding: 28px;
  border: 3px solid var(--kid-purple);
  border-left-width: 3px;
  border-radius: 28px;
  background: linear-gradient(145deg, #fff 0%, #f4f0ff 100%);
  box-shadow: 0 14px 30px rgba(96,76,150,0.11);
}
.lesson-page-kids .grammar-box h3 {
  color: #745fc4;
  font-size: 1.3rem;
  line-height: 1.55;
}
.lesson-page-kids .grammar-example {
  padding: 16px 18px;
  border: 2px solid rgba(169,146,239,0.22);
  border-radius: 17px;
  background: #fff;
}
.lesson-page-kids .grammar-example .cn { font-size: 1.35rem; }
.lesson-page-kids > .container > .flex .btn { border-radius: 999px; }

@keyframes leeMascotFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@media (max-width: 880px) {
  .lesson-page-kids .flashcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .lesson-page-kids { padding: 34px 0 64px; }
  .lesson-page-kids::before,
  .lesson-page-kids::after { display: none; }
  .lesson-page-kids > .container { padding: 0 16px; }
  .lesson-page-kids > .container > .section-heading:first-child {
    min-height: 0;
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px 20px;
    border-radius: 24px;
  }
  .lesson-page-kids > .container > .section-heading:first-child::before {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 14px;
    font-size: 1.2rem;
  }
  .lesson-page-kids > .container > .section-heading:first-child h2 {
    min-width: calc(100% - 62px);
    font-size: 1.65rem;
    line-height: 1.45;
  }
  .lesson-page-kids > .container > .section-heading:first-child .listen-btn-sm { margin-left: 56px; }
  .lesson-page-kids .mascot-intro {
    flex-direction: column;
    gap: 8px;
    padding: 22px 18px;
    text-align: center;
  }
  .lesson-page-kids .mascot-intro .mascot-icon { width: 112px; }
  .lesson-page-kids .speech-bubble { width: 100%; padding: 18px; font-size: 1rem; text-align: left; }
  .lesson-page-kids .speech-bubble::before {
    top: -10px;
    left: calc(50% - 9px);
    border: 0;
    border-left: 2px solid rgba(104,214,193,0.65);
    border-top: 2px solid rgba(104,214,193,0.65);
  }
  .lesson-page-kids > .container > .section-heading:not(:first-child) { margin-top: 40px; }
  .lesson-page-kids .flashcard-grid { grid-template-columns: 1fr; gap: 22px; }
  .lesson-page-kids .flashcard { padding: 26px 18px 22px; border-radius: 24px; }
  .lesson-page-kids .flashcard .hanzi { font-size: 3rem; }
  .lesson-page-kids .grammar-box { padding: 22px 18px; border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-page-kids .mascot-intro .mascot-icon { animation: none; }
  .lesson-page-kids .flashcard,
  .lesson-page-kids .flashcard .listen-btn { transition: none; }
  .lesson-page-kids .flashcard:hover { transform: none; }
}

/* Generated vocabulary illustrations for lesson words */
.lesson-page-kids .lesson-word-illustration {
  display: flex;
  width: 100%;
  height: 156px;
  align-items: center;
  justify-content: center;
  margin: -8px auto 8px;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(255,255,255,0.92) 0 42%, rgba(255,255,255,0) 72%);
}
.lesson-page-kids .lesson-word-illustration img {
  width: 156px;
  height: 156px;
  object-fit: contain;
  filter: drop-shadow(0 10px 9px rgba(64,56,79,0.13));
  transition: transform var(--transition);
}
.lesson-page-kids .flashcard:hover .lesson-word-illustration img {
  transform: translateY(-3px) scale(1.035);
}

.lesson-page-kids .lesson-word-illustration-raster {
  height: 180px;
  margin-top: -10px;
  overflow: hidden;
  background: #fffaf0;
  border: 3px solid rgba(255,212,103,0.38);
}

.lesson-page-kids .lesson-word-illustration-raster img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  filter: none;
}

@media (max-width: 600px) {
  .lesson-page-kids .lesson-word-illustration { height: 176px; margin-top: -4px; }
  .lesson-page-kids .lesson-word-illustration img { width: 176px; height: 176px; }
  .lesson-page-kids .lesson-word-illustration-raster { height: 190px; }
  .lesson-page-kids .lesson-word-illustration-raster img { width: 190px; height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-page-kids .lesson-word-illustration img { transition: none; }
  .lesson-page-kids .flashcard:hover .lesson-word-illustration img { transform: none; }
}

/* Generated picture stories for supported lessons */
.lesson-page-kids .lesson-story-visual {
  position: relative;
  max-width: 650px;
  margin: 0 auto 46px;
  padding: 14px 14px 18px;
  border: 3px solid #fff;
  border-radius: 34px;
  background: linear-gradient(145deg, #fff 0%, #fff3da 100%);
  box-shadow: 0 16px 0 rgba(255,212,103,0.32), 0 24px 42px rgba(64,56,79,0.13);
}
.lesson-page-kids .lesson-story-visual::before,
.lesson-page-kids .lesson-story-visual::after {
  position: absolute;
  z-index: 2;
  font-size: 2rem;
  line-height: 1;
  pointer-events: none;
}
.lesson-page-kids .lesson-story-visual::before { content: '★'; top: 24px; left: 24px; color: var(--kid-yellow); transform: rotate(-12deg); }
.lesson-page-kids .lesson-story-visual::after { content: '✦'; top: 28px; right: 26px; color: var(--kid-sky); transform: rotate(12deg); }
.lesson-page-kids .lesson-story-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 24px;
  background: #fff9ef;
}
.lesson-page-kids .lesson-story-visual figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  color: #6d5d3f;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}
.lesson-page-kids .lesson-story-visual figcaption span { color: #e8aa35; }

/* Vocabulary and worksheet indexes: friendly presentation */
:is(.vocabulary-page, .worksheet-list-page-kids) {
  --list-coral: #ff7183;
  --list-sky: #6dcff6;
  --list-mint: #68d6c1;
  --list-yellow: #ffd467;
  --list-purple: #a992ef;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 4% 3%, rgba(255,212,103,0.35) 0 95px, transparent 96px),
    radial-gradient(circle at 97% 8%, rgba(109,207,246,0.25) 0 130px, transparent 131px),
    linear-gradient(180deg, #fffaf0 0%, #f7fcff 48%, #fff8f3 100%);
}
:is(.vocabulary-page, .worksheet-list-page-kids) > .container { position: relative; max-width: 1120px; }
:is(.vocabulary-page, .worksheet-list-page-kids) .worksheet-header {
  position: relative;
  overflow: hidden;
  padding: 34px 32px 30px;
  border: 3px solid #fff;
  border-radius: 34px;
  background: linear-gradient(130deg, #7663d6 0%, #9a79e5 52%, #ee8da8 100%);
  box-shadow: 0 18px 40px rgba(90,71,146,0.2);
}
:is(.vocabulary-page, .worksheet-list-page-kids) .worksheet-header::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border: 34px solid rgba(255,255,255,0.11);
  border-radius: 50%;
  pointer-events: none;
}
:is(.vocabulary-page, .worksheet-list-page-kids) :is(.vocabulary-mascot, .worksheet-list-panpan) {
  position: relative;
  z-index: 1;
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto 8px;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(50,37,82,0.2));
  animation: leeMascotFloat 3.6s ease-in-out infinite;
}
:is(.vocabulary-page, .worksheet-list-page-kids) .worksheet-header h1 {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.35;
  text-shadow: 0 2px 0 rgba(64,56,79,0.13);
}
:is(.vocabulary-page, .worksheet-list-page-kids) .worksheet-header p {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 700;
}
:is(.vocabulary-page, .worksheet-list-page-kids) .worksheet-header .flex { position: relative; z-index: 1; }
:is(.vocabulary-page, .worksheet-list-page-kids) .worksheet-header .btn {
  border: 2px solid rgba(255,255,255,0.82);
  border-radius: 999px;
  background: #fff;
  color: #6553bb;
  box-shadow: 0 7px 15px rgba(52,38,94,0.16);
}
.vocabulary-page .section-heading {
  gap: 12px;
  margin: 44px 0 20px !important;
  padding: 14px 20px;
  border: 3px solid #fff;
  border-radius: 22px;
  background: linear-gradient(110deg, #e9fbf7 0%, #eef9ff 100%);
  box-shadow: 0 10px 24px rgba(64,56,79,0.08);
}
.vocabulary-page .section-heading::before {
  content: '★';
  display: flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--list-mint);
  color: #fff;
  box-shadow: 0 5px 12px rgba(53,149,132,0.2);
}
.vocabulary-page .section-heading h2 { color: #40384f; font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.45; }
.vocabulary-page .flashcard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vocabulary-page .flashcard {
  --list-accent: var(--list-coral);
  --list-tint: #fff0f3;
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 24px 16px 20px;
  border: 3px solid var(--list-accent);
  border-radius: 25px;
  background: linear-gradient(155deg, #fff 38%, var(--list-tint) 100%);
  box-shadow: 0 9px 0 color-mix(in srgb, var(--list-accent) 18%, transparent), 0 15px 25px rgba(64,56,79,0.07);
}
.vocabulary-page .flashcard:nth-child(4n+2) { --list-accent: var(--list-sky); --list-tint: #edf9ff; }
.vocabulary-page .flashcard:nth-child(4n+3) { --list-accent: var(--list-purple); --list-tint: #f4f0ff; }
.vocabulary-page .flashcard:nth-child(4n+4) { --list-accent: var(--list-mint); --list-tint: #ecfbf7; }
.vocabulary-page .flashcard::after { content: '✦'; position: absolute; top: 12px; right: 14px; color: color-mix(in srgb, var(--list-accent) 48%, white); }
.vocabulary-page .flashcard:hover { border-color: var(--list-accent); transform: translateY(-5px); }
.vocabulary-page .flashcard .vocab-word { color: #40384f; font-size: 2.75rem; line-height: 1.2; }
.vocabulary-page .flashcard .vocab-phonetic {
  display: inline-block;
  margin: 7px 0 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  color: color-mix(in srgb, var(--list-accent) 76%, #324);
  font-weight: 800;
  box-shadow: 0 3px 9px rgba(64,56,79,0.08);
}
.vocabulary-page .flashcard .listen-btn { background: var(--list-yellow); box-shadow: 0 5px 0 #eeb448; }
.vocabulary-page .flashcard .meaning { margin-top: 15px; color: #5d5368; line-height: 1.55; }
.vocabulary-page .vocabulary-word-illustration {
  width: calc(100% + 8px);
  aspect-ratio: 1;
  margin: -8px -4px 15px;
  overflow: hidden;
  border: 3px solid rgba(255,212,103,0.42);
  border-radius: 20px;
  background: #fffaf0;
}
.vocabulary-page .vocabulary-word-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.vocabulary-page .flashcard:hover .vocabulary-word-illustration img { transform: scale(1.035); }
.worksheet-list-page-kids .worksheet-list { max-width: 880px; gap: 15px; }
.worksheet-list-page-kids .worksheet-list-row {
  padding: 17px 18px;
  border: 3px solid #fff;
  border-radius: 23px;
  background: linear-gradient(110deg, #fff 0%, #eefaf7 100%);
  box-shadow: 0 9px 0 rgba(104,214,193,0.18), 0 15px 25px rgba(64,56,79,0.07);
}
.worksheet-list-page-kids .worksheet-list-row:nth-child(3n+2) { background: linear-gradient(110deg, #fff 0%, #eef8ff 100%); box-shadow: 0 9px 0 rgba(109,207,246,0.18), 0 15px 25px rgba(64,56,79,0.07); }
.worksheet-list-page-kids .worksheet-list-row:nth-child(3n+3) { background: linear-gradient(110deg, #fff 0%, #f5f1ff 100%); box-shadow: 0 9px 0 rgba(169,146,239,0.18), 0 15px 25px rgba(64,56,79,0.07); }
.worksheet-list-page-kids .worksheet-list-row .wl-day {
  display: flex;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  background: var(--list-yellow);
  color: #74521a;
  box-shadow: 0 5px 0 #eeb448;
}
.worksheet-list-page-kids .worksheet-list-row .wl-title { color: #40384f; font-size: 1.02rem; }
.worksheet-list-page-kids .worksheet-list-row .btn { border-radius: 999px; background: #fff; }

@media (max-width: 900px) {
  .vocabulary-page .flashcard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .lesson-page-kids .lesson-story-visual { margin-bottom: 38px; padding: 10px 10px 15px; border-radius: 27px; box-shadow: 0 11px 0 rgba(255,212,103,0.28), 0 18px 30px rgba(64,56,79,0.11); }
  .lesson-page-kids .lesson-story-visual img { border-radius: 20px; }
  :is(.vocabulary-page, .worksheet-list-page-kids) { padding-top: 34px; }
  :is(.vocabulary-page, .worksheet-list-page-kids) > .container { padding: 0 16px; }
  :is(.vocabulary-page, .worksheet-list-page-kids) .worksheet-header { padding: 26px 18px 24px; border-radius: 27px; }
  :is(.vocabulary-page, .worksheet-list-page-kids) :is(.vocabulary-mascot, .worksheet-list-panpan) { width: 112px; height: 112px; }
  :is(.vocabulary-page, .worksheet-list-page-kids) .worksheet-header h1 { font-size: 1.75rem; }
  .vocabulary-page .section-heading { margin-top: 36px !important; padding: 12px 14px; }
  .vocabulary-page .flashcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .vocabulary-page .flashcard { padding: 21px 11px 18px; }
  .vocabulary-page .flashcard .vocab-word { font-size: 2.45rem; }
  .worksheet-list-page-kids .worksheet-list-row { flex-wrap: wrap; padding: 15px; }
  .worksheet-list-page-kids .worksheet-list-row .wl-title { min-width: calc(100% - 72px); }
  .worksheet-list-page-kids .worksheet-list-row .wl-actions { width: 100%; padding-left: 66px; }
}
@media (max-width: 390px) {
  .vocabulary-page .flashcard-grid { grid-template-columns: 1fr; }
  .worksheet-list-page-kids .worksheet-list-row .wl-actions { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.vocabulary-page, .worksheet-list-page-kids) :is(.vocabulary-mascot, .worksheet-list-panpan) { animation: none; }
  .vocabulary-page .flashcard { transition: none; }
  .vocabulary-page .flashcard:hover { transform: none; }
}
@media print {
  :is(.vocabulary-page, .worksheet-list-page-kids) { background: #fff; }
  :is(.vocabulary-page, .worksheet-list-page-kids) .worksheet-header,
  .vocabulary-page .section-heading,
  .vocabulary-page .flashcard { box-shadow: none; }
  :is(.vocabulary-page, .worksheet-list-page-kids) .worksheet-header { border-color: #ddd; background: #fff; }
  :is(.vocabulary-page, .worksheet-list-page-kids) .worksheet-header h1,
  :is(.vocabulary-page, .worksheet-list-page-kids) .worksheet-header p { color: #222 !important; }
}
/* ── Child-friendly account dashboard ───────────────────────────── */
.account-page-kids {
  --account-coral: #ff7183;
  --account-sky: #6dcff6;
  --account-mint: #68d6c1;
  --account-yellow: #ffd467;
  --account-purple: #9277e5;
  --account-ink: #40384f;
  position: relative;
  overflow: hidden;
  padding: 42px 0 82px;
  background:
    radial-gradient(circle at 4% 3%, rgba(255,212,103,0.3) 0 110px, transparent 111px),
    radial-gradient(circle at 98% 13%, rgba(109,207,246,0.2) 0 150px, transparent 151px),
    linear-gradient(180deg, #fffaf1 0%, #f8fcff 55%, #fff8f5 100%);
  color: var(--account-ink);
}
.account-page-kids::before,
.account-page-kids::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  line-height: 1;
}
.account-page-kids::before {
  content: '★';
  top: 380px;
  left: 2.5vw;
  color: rgba(255,113,131,0.22);
  font-size: 4.4rem;
  transform: rotate(-12deg);
}
.account-page-kids::after {
  content: '✦';
  top: 720px;
  right: 3vw;
  color: rgba(109,207,246,0.28);
  font-size: 4rem;
}
.account-page-kids > .container { position: relative; z-index: 1; }

.account-kids-hero {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  overflow: hidden;
  margin-bottom: 28px;
  padding: 26px 36px;
  border: 3px solid rgba(255,255,255,0.92);
  border-radius: 32px;
  background: linear-gradient(125deg, #7160d6 0%, #9579e5 52%, #f187a5 100%);
  color: #fff;
  box-shadow: 0 18px 42px rgba(89,69,145,0.2);
}
.account-kids-hero::before,
.account-kids-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  pointer-events: none;
}
.account-kids-hero::before { width: 210px; height: 210px; right: 80px; bottom: -150px; }
.account-kids-hero::after { width: 96px; height: 96px; right: 24px; top: -48px; }
.account-kids-hero img {
  position: relative;
  z-index: 1;
  width: 112px;
  filter: drop-shadow(0 9px 10px rgba(48,37,82,0.2));
  animation: leeMascotFloat 3.6s ease-in-out infinite;
}
.account-kids-hero-copy { position: relative; z-index: 1; }
.account-kids-eyebrow {
  margin: 0 0 5px;
  color: var(--account-yellow);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.045em;
}
.account-kids-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.85rem, 4vw, 2.65rem);
  line-height: 1.3;
}
.account-kids-hero-copy > p:last-child {
  max-width: 620px;
  margin: 7px 0 0;
  color: rgba(255,255,255,0.86);
  font-size: 1rem;
  line-height: 1.65;
}

.account-page-kids .account-layout {
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 28px;
}
.account-page-kids .account-sidebar {
  position: sticky;
  top: 20px;
  flex-basis: 248px;
  padding: 25px;
  border: 3px solid #fff;
  border-radius: 28px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 16px 34px rgba(64,56,79,0.11);
}
.account-page-kids .account-sidebar::before {
  content: '★';
  position: absolute;
  top: 17px;
  right: 19px;
  color: var(--account-yellow);
  font-size: 1.35rem;
  transform: rotate(10deg);
}
.account-page-kids .account-sidebar .avatar {
  width: 84px;
  height: 84px;
  margin-bottom: 13px;
  border: 5px solid #fff;
  outline: 3px solid rgba(255,212,103,0.62);
  background: linear-gradient(145deg, var(--account-yellow), #ff9d73);
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 9px 20px rgba(154,98,35,0.18);
  transform: rotate(-3deg);
}
.account-page-kids .account-sidebar .text-center strong {
  display: block;
  color: var(--account-ink);
  font-size: 1.08rem;
  line-height: 1.45;
}
.account-page-kids .account-sidebar .text-center div {
  margin-top: 3px;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.account-page-kids .account-nav { gap: 8px; margin-top: 21px; }
.account-page-kids .account-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 13px;
  border: 2px solid transparent;
  border-radius: 15px;
  color: #665d70;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}
.account-page-kids .account-nav a::before {
  display: inline-flex;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #f5f1ff;
  font-size: 0.95rem;
}
.account-page-kids .account-nav a:nth-child(1)::before { content: '📚'; }
.account-page-kids .account-nav a:nth-child(2)::before { content: '⭐'; }
.account-page-kids .account-nav a:nth-child(3)::before { content: '🐼'; }
.account-page-kids .account-nav a:hover {
  border-color: rgba(146,119,229,0.22);
  background: #f8f5ff;
  color: var(--account-purple);
  transform: translateX(3px);
}
.account-page-kids .account-nav a.active {
  border-color: rgba(146,119,229,0.28);
  background: linear-gradient(135deg, #f0ebff, #fff0f5);
  color: #765bc8;
}
.account-page-kids .account-content {
  min-width: 0;
  flex-basis: 0;
}

.account-page-kids .course-tabs {
  gap: 10px;
  margin-bottom: 22px;
}
.account-page-kids .course-tab {
  min-height: 46px;
  padding: 9px 16px;
  border: 2px solid rgba(109,207,246,0.3);
  border-radius: 16px;
  background: rgba(255,255,255,0.94);
  color: #5f5769;
  box-shadow: 0 8px 18px rgba(64,56,79,0.07);
}
.account-page-kids .course-tab:hover {
  border-color: var(--account-sky);
  color: #347f9c;
  transform: translateY(-2px);
}
.account-page-kids .course-tab.active {
  border-color: transparent;
  background: linear-gradient(135deg, #5bc6ed, #7f8be8);
  color: #fff;
  box-shadow: 0 10px 22px rgba(82,146,197,0.22);
}
.account-page-kids .course-tab .course-tab-frac {
  background: #f0f9fc;
  color: #43829a;
}
.account-page-kids .course-tab.active .course-tab-frac {
  background: rgba(255,255,255,0.24);
  color: #fff;
}

.account-page-kids .progress-stats { margin-bottom: 22px; }
.account-page-kids .stat-pill {
  min-width: 150px;
  padding: 18px 26px;
  border: 3px solid rgba(255,212,103,0.72);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff 0%, #fff7d9 100%);
  box-shadow: 0 11px 24px rgba(104,83,37,0.1);
}
.account-page-kids .stat-pill .num {
  color: #e08a4d;
  font-size: 2.1rem;
  line-height: 1.15;
}
.account-page-kids .stat-pill .label {
  margin-top: 4px;
  color: #675d6e;
  font-size: 0.84rem;
  font-weight: 700;
}

.account-page-kids .roadmap-grid {
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 17px;
}
.account-page-kids .day-card {
  --account-card-accent: var(--account-coral);
  --account-card-tint: #fff0f3;
  min-height: 142px;
  padding: 20px 14px 17px;
  border: 3px solid var(--account-card-accent);
  border-radius: 23px;
  background: linear-gradient(150deg, #fff 34%, var(--account-card-tint) 100%);
  box-shadow: 0 9px 0 rgba(255,113,131,0.13), 0 14px 23px rgba(64,56,79,0.07);
}
.account-page-kids .day-card:nth-child(4n+2) { --account-card-accent: var(--account-sky); --account-card-tint: #edf9ff; }
.account-page-kids .day-card:nth-child(4n+3) { --account-card-accent: var(--account-purple); --account-card-tint: #f3efff; }
.account-page-kids .day-card:nth-child(4n+4) { --account-card-accent: var(--account-mint); --account-card-tint: #ebfbf7; }
.account-page-kids .day-card:hover {
  border-color: var(--account-card-accent);
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 11px 0 rgba(146,119,229,0.13), 0 19px 27px rgba(64,56,79,0.11);
}
.account-page-kids .day-card .day-num {
  color: var(--account-card-accent);
  font-size: 2rem;
}
.account-page-kids .day-card .day-title {
  color: #655c6e;
  font-size: 0.82rem;
  line-height: 1.45;
}
.account-page-kids .day-card.is-intro {
  border-color: var(--account-yellow);
  background: linear-gradient(150deg, #fff 30%, #fff6ce 100%);
}
.account-page-kids .day-card.is-review {
  border-color: var(--account-purple);
  background: linear-gradient(150deg, #fff 30%, #f1edff 100%);
}
.account-page-kids .day-card.is-exam {
  border-color: var(--account-coral);
  background: linear-gradient(150deg, #fff 30%, #ffecef 100%);
}
.account-page-kids .day-card.is-completed {
  border-color: var(--account-mint);
  background: linear-gradient(150deg, #fff 30%, #e8faf4 100%);
}
.account-page-kids .day-card.is-locked {
  opacity: 0.5;
  filter: grayscale(0.28);
}
.account-page-kids .day-card .badge {
  background: var(--account-yellow);
  color: #655018;
}

.account-page-kids .account-table-wrap {
  overflow-x: auto;
  border: 3px solid rgba(109,207,246,0.34);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(64,56,79,0.09);
}
.account-page-kids table.quiz-history {
  min-width: 580px;
  border-radius: 0;
  box-shadow: none;
}
.account-page-kids table.quiz-history th {
  background: linear-gradient(135deg, #eaf9ff, #f2efff);
  color: #554c64;
}
.account-page-kids table.quiz-history th,
.account-page-kids table.quiz-history td {
  padding: 14px 17px;
}
.account-page-kids table.quiz-history tbody tr:hover td { background: #fffbf3; }
.account-page-kids table.quiz-history .btn { border-radius: 999px; }

.account-page-kids .account-profile-card {
  padding: 28px !important;
  border: 3px solid rgba(109,207,246,0.36);
  border-radius: 28px !important;
  background: linear-gradient(145deg, #fff 0%, #f2fbff 100%) !important;
  box-shadow: 0 14px 30px rgba(64,56,79,0.09) !important;
}
.account-page-kids .account-profile-security {
  border-color: rgba(146,119,229,0.34);
  background: linear-gradient(145deg, #fff 0%, #f5f1ff 100%) !important;
}
.account-page-kids .account-profile-card h2 {
  margin: 0 0 22px;
  color: var(--account-ink);
  font-size: 1.45rem;
}
.account-page-kids .account-profile-card h2::before {
  content: '★';
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  margin-right: 9px;
  border-radius: 11px;
  background: var(--account-yellow);
  color: #8e6415;
  font-size: 0.9rem;
  vertical-align: middle;
  transform: rotate(-4deg);
}
.account-page-kids .account-profile-security h2::before {
  content: '🔐';
  background: #ece6ff;
}
.account-page-kids .account-profile-card .form-group label { color: #5f5669; }
.account-page-kids .account-profile-card .form-group input {
  min-height: 48px;
  border: 2px solid rgba(109,207,246,0.32);
  border-radius: 15px;
  background: rgba(255,255,255,0.9);
}
.account-page-kids .account-profile-security .form-group input { border-color: rgba(146,119,229,0.3); }
.account-page-kids .account-profile-card .form-group input:focus {
  border-color: var(--account-purple);
  box-shadow: 0 0 0 4px rgba(146,119,229,0.11);
}
.account-page-kids .account-profile-card .btn { min-width: 130px; border-radius: 999px; }
.account-page-kids .form-success,
.account-page-kids .form-error {
  border-radius: 16px;
  font-weight: 700;
}
.account-page-kids .account-content > .text-center {
  padding: 38px 24px !important;
  border: 3px solid #fff;
  border-radius: 28px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 30px rgba(64,56,79,0.09);
}

@media (max-width: 900px) {
  .account-page-kids .account-layout { flex-wrap: wrap; }
  .account-page-kids .account-sidebar {
    position: static;
    display: grid;
    width: 100%;
    flex-basis: 100%;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 0 18px;
  }
  .account-page-kids .account-sidebar .avatar { margin: 0; }
  .account-page-kids .account-sidebar .text-center { text-align: left; }
  .account-page-kids .account-nav {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 20px;
  }
  .account-page-kids .account-nav a { justify-content: center; }
  .account-page-kids .account-content {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
  }
}

@media (max-width: 620px) {
  .account-page-kids { padding: 28px 0 62px; }
  .account-page-kids::before,
  .account-page-kids::after { display: none; }
  .account-page-kids > .container { padding: 0 16px; }
  .account-kids-hero {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 15px;
    padding: 22px 18px;
    border-radius: 26px;
  }
  .account-kids-hero img { width: 86px; }
  .account-kids-hero h1 { font-size: 1.65rem; line-height: 1.4; }
  .account-kids-hero-copy > p:last-child { font-size: 0.9rem; }
  .account-page-kids .account-sidebar {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 21px 18px;
    border-radius: 24px;
  }
  .account-page-kids .account-sidebar .avatar {
    width: 70px;
    height: 70px;
    font-size: 1.65rem;
  }
  .account-page-kids .account-nav { gap: 6px; }
  .account-page-kids .account-nav a {
    display: block;
    min-height: 64px;
    padding: 8px 5px;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .account-page-kids .account-nav a::before { margin: 0 auto 5px; }
  .account-page-kids .account-layout,
  .account-page-kids .account-content,
  .account-page-kids .progress-stats,
  .account-page-kids .roadmap-grid {
    width: 100%;
    max-width: 100%;
  }
  .account-page-kids .course-tabs {
    width: 100%;
    max-width: calc(100vw - 32px);
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 2px 9px;
    scroll-padding-inline: 12px;
    scroll-snap-type: inline proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(127,139,232,0.55) transparent;
  }
  .account-page-kids .course-tab {
    min-width: min(210px, calc(100vw - 52px));
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
  .account-page-kids .roadmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .account-page-kids .day-card { min-width: 0; min-height: 132px; padding: 17px 10px 14px; border-radius: 20px; }
  .account-page-kids .day-card .day-title { overflow-wrap: anywhere; }
  .account-page-kids .account-profile-card { padding: 22px 18px !important; border-radius: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .account-kids-hero img { animation: none; }
  .account-page-kids .account-nav a,
  .account-page-kids .course-tab,
  .account-page-kids .day-card { transition: none; }
  .account-page-kids .account-nav a:hover,
  .account-page-kids .course-tab:hover,
  .account-page-kids .day-card:hover { transform: none; }
}
/* ── Course roadmap pages: friendly Lee mascot theme ───────────── */
.course-hero-kids,
.course-page-kids {
  --course-kid-pink: #ff7c91;
  --course-kid-purple: #8d6bdb;
  --course-kid-sky: #65c9f2;
  --course-kid-mint: #55c9ad;
  --course-kid-gold: #f4ba3f;
  --course-kid-ink: #3f3451;
}

.course-hero-kids {
  isolation: isolate;
  padding: 64px 0 72px;
  background:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,0.19) 0 7px, transparent 8px),
    radial-gradient(circle at 92% 22%, rgba(255,220,120,0.32) 0 70px, transparent 71px),
    radial-gradient(circle at 78% 94%, rgba(101,201,242,0.30) 0 120px, transparent 121px),
    linear-gradient(135deg, #7660d2 0%, #a967cc 48%, #f37494 100%);
}

.course-hero-kids::before,
.course-hero-kids::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.course-hero-kids::before {
  width: 250px;
  height: 250px;
  top: -175px;
  left: 11%;
  border: 2px solid rgba(255,255,255,0.16);
  box-shadow: 0 0 0 38px rgba(255,255,255,0.045);
}

.course-hero-kids::after {
  width: 180px;
  height: 180px;
  right: -95px;
  bottom: -80px;
  background: rgba(255,209,102,0.18);
}

.course-hero-kids .course-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  align-items: center;
  gap: 56px;
}

.course-hero-kids .hero-text { max-width: 680px; }

.course-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 17px;
  padding: 7px 15px;
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  color: #fff5c9;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
}

.course-hero-kicker::before {
  content: '★';
  color: #ffde78;
}

.course-hero-kids .hero-text h1 {
  max-width: 720px;
  margin-bottom: 17px;
  font-size: clamp(2.55rem, 5.4vw, 4.35rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-shadow: 0 5px 22px rgba(55,35,90,0.22);
  text-wrap: balance;
}

html[lang="th"] .course-hero-kids .hero-text h1 {
  line-height: 1.34;
  letter-spacing: -0.012em;
}

.course-hero-kids .hero-text p {
  max-width: 650px;
  margin-bottom: 28px;
  color: rgba(255,255,255,0.91);
  font-size: 1.08rem;
  line-height: 1.82;
}

.course-hero-kids .btn-yellow {
  min-height: 50px;
  padding-inline: 30px;
  border: 2px solid rgba(255,255,255,0.34);
  box-shadow: 0 10px 24px rgba(61,38,91,0.22);
}

.course-hero-mascot-wrap {
  position: relative;
  display: grid;
  width: min(100%, 370px);
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
}

.course-hero-mascot-wrap::before {
  content: '';
  position: absolute;
  inset: 10%;
  border: 2px solid rgba(255,255,255,0.34);
  border-radius: 45% 55% 50% 48%;
  background: rgba(255,255,255,0.18);
  box-shadow: 0 20px 46px rgba(50,30,83,0.18);
  transform: rotate(-5deg);
}

.course-hero-kids .hero-mascot {
  position: relative;
  z-index: 1;
  width: 86%;
  max-width: none;
  margin: 0;
  filter: drop-shadow(0 18px 20px rgba(56,34,82,0.22));
  animation: courseMascotFloat 3.8s ease-in-out infinite;
}

.course-hero-sparkle {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #ffdf74;
  line-height: 1;
  text-shadow: 0 3px 10px rgba(56,34,82,0.24);
}

.course-hero-sparkle.sparkle-one { top: 7%; left: 5%; font-size: 2rem; transform: rotate(-12deg); }
.course-hero-sparkle.sparkle-two { top: 17%; right: 2%; font-size: 2.45rem; color: #fff; }
.course-hero-sparkle.sparkle-three { right: 6%; bottom: 13%; font-size: 1.25rem; color: #71e2cf; }

.course-page-kids {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 3% 16%, rgba(255,124,145,0.08) 0 85px, transparent 86px),
    radial-gradient(circle at 97% 55%, rgba(101,201,242,0.10) 0 120px, transparent 121px),
    #fffaf2;
}

.course-page-kids .course-roadmap-section {
  position: relative;
  padding: 64px 0 76px;
}

.course-roadmap-heading {
  align-items: center;
  max-width: 760px;
  margin-bottom: 34px;
}

.course-page-kids .course-roadmap-heading::before { display: none; }

.course-heading-icon {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border: 2px solid #eddcff;
  border-radius: 19px;
  background: #f6efff;
  font-size: 1.75rem;
  box-shadow: 0 8px 18px rgba(89,67,126,0.10);
  transform: rotate(-4deg);
}

.course-roadmap-heading h2 {
  margin: 0;
  color: var(--course-kid-ink);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
}

.course-roadmap-heading p {
  margin-top: 3px;
  color: #786d84;
  font-size: 0.96rem;
  line-height: 1.65;
}

.course-page-kids .roadmap-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 19px;
}

.course-page-kids .day-card {
  --lesson-accent: var(--course-kid-pink);
  --lesson-tint: #fff0f4;
  min-height: 156px;
  overflow: visible;
  padding: 22px 15px 17px;
  border: 2px solid color-mix(in srgb, var(--lesson-accent) 32%, white);
  border-radius: 24px;
  background: linear-gradient(155deg, #fff 0 54%, var(--lesson-tint) 100%);
  box-shadow: 0 8px 18px rgba(71,55,87,0.08);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.course-page-kids .day-card:nth-child(5n + 2) { --lesson-accent: var(--course-kid-sky); --lesson-tint: #edf9ff; }
.course-page-kids .day-card:nth-child(5n + 3) { --lesson-accent: var(--course-kid-purple); --lesson-tint: #f4efff; }
.course-page-kids .day-card:nth-child(5n + 4) { --lesson-accent: var(--course-kid-mint); --lesson-tint: #eafaf6; }
.course-page-kids .day-card:nth-child(5n + 5) { --lesson-accent: var(--course-kid-gold); --lesson-tint: #fff8e6; }

.course-page-kids .day-card::before {
  content: '✦';
  position: absolute;
  top: 12px;
  right: 13px;
  color: color-mix(in srgb, var(--lesson-accent) 58%, white);
  font-size: 0.82rem;
}

.course-page-kids .day-card:hover {
  z-index: 2;
  border-color: var(--lesson-accent);
  box-shadow: 0 15px 28px rgba(71,55,87,0.14);
  transform: translateY(-6px) rotate(-0.6deg);
}

.course-page-kids .day-card:focus-visible {
  outline: 3px solid var(--lesson-accent);
  outline-offset: 4px;
}

.course-page-kids .day-card .day-num {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 11px;
  place-items: center;
  border-radius: 20px;
  background: var(--lesson-tint);
  color: var(--lesson-accent);
  font-size: 1.7rem;
  line-height: 1;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lesson-accent) 18%, transparent);
  transform: rotate(-3deg);
}

.course-page-kids .day-card .day-title {
  min-height: 42px;
  margin-top: 0;
  color: #584e63;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.48;
}

.course-page-kids .day-card .badge {
  margin-top: 8px;
  padding: 4px 10px;
  background: var(--lesson-accent);
  color: #fff;
  font-size: 0.69rem;
}

.course-page-kids .day-card.is-intro {
  --lesson-accent: #e8a91f;
  --lesson-tint: #fff8de;
}

.course-page-kids .day-card.is-review {
  --lesson-accent: #8864d6;
  --lesson-tint: #f3edff;
}

.course-page-kids .day-card.is-exam {
  --lesson-accent: #f06b78;
  --lesson-tint: #fff0f2;
}

.course-page-kids .day-card.is-vocab-list {
  --lesson-accent: #1cae9e;
  --lesson-tint: #e8faf6;
}

.course-page-kids .day-card.is-intro .day-num,
.course-page-kids .day-card.is-vocab-list .day-num { font-size: 1.65rem; }

.course-page-kids .day-card.is-completed {
  --lesson-accent: #39a979;
  --lesson-tint: #eaf9f2;
  border-color: #71cea6;
}

.course-page-kids .day-card.is-completed::after {
  top: -11px;
  right: -9px;
  width: 31px;
  height: 31px;
  border: 3px solid #fff;
  background: #39a979;
  box-shadow: 0 5px 12px rgba(57,169,121,0.25);
}

.course-page-kids .day-card.is-locked {
  opacity: 0.55;
  filter: grayscale(0.28);
}

.course-signup-section {
  padding: 0 0 72px;
  background: transparent;
}

.course-signup-card {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  padding: 30px 38px;
  border: 2px solid #f0defb;
  border-radius: 30px;
  background: linear-gradient(125deg, #f7efff 0%, #fff2f5 58%, #fff8de 100%);
  box-shadow: 0 14px 34px rgba(74,55,92,0.10);
  text-align: left;
}

.course-signup-card::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  right: 16%;
  bottom: -145px;
  border-radius: 50%;
  background: rgba(255,255,255,0.58);
  pointer-events: none;
}

.course-signup-card > * { position: relative; z-index: 1; }
.course-signup-card > img { width: 112px; filter: drop-shadow(0 8px 10px rgba(83,57,99,0.12)); }
.course-signup-copy { text-align: left; }
.course-signup-copy > span { float: left; margin: 2px 8px 0 0; font-size: 1.1rem; }
.course-signup-copy h2 { margin: 0; color: var(--course-kid-ink); font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.course-signup-copy p { margin-top: 5px; color: #756a80; }
.course-signup-card .btn { min-width: 150px; box-shadow: 0 9px 18px rgba(238,82,83,0.18); }

@keyframes courseMascotFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-9px) rotate(1deg); }
}

@media (max-width: 850px) {
  .course-hero-kids { padding: 54px 0 62px; }
  .course-hero-kids .course-hero-layout { grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr); gap: 28px; }
  .course-hero-mascot-wrap { width: min(100%, 300px); }
  .course-signup-card { grid-template-columns: 92px minmax(0, 1fr); gap: 20px; padding: 28px 30px; }
  .course-signup-card > img { width: 92px; }
  .course-signup-card .btn { grid-column: 2; justify-self: start; }
}

@media (max-width: 640px) {
  .course-hero-kids { padding: 42px 0 52px; }
  .course-hero-kids .course-hero-layout {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 25px;
    text-align: center;
  }
  .course-hero-kicker { margin-bottom: 14px; font-size: 0.8rem; }
  .course-hero-kids .hero-text h1 { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .course-hero-kids .hero-text p { margin-inline: auto; font-size: 1rem; }
  .course-hero-mascot-wrap { width: min(68vw, 245px); order: -1; }
  .course-hero-sparkle.sparkle-one { font-size: 1.5rem; }
  .course-hero-sparkle.sparkle-two { font-size: 1.85rem; }
  .course-page-kids .course-roadmap-section { padding: 44px 0 58px; }
  .course-roadmap-heading { align-items: flex-start; margin-bottom: 26px; }
  .course-heading-icon { width: 50px; height: 50px; flex-basis: 50px; border-radius: 16px; font-size: 1.45rem; }
  .course-roadmap-heading p { font-size: 0.88rem; }
  .course-page-kids .roadmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .course-page-kids .day-card { min-height: 149px; padding: 18px 10px 14px; border-radius: 20px; }
  .course-page-kids .day-card .day-num { width: 52px; height: 52px; margin-bottom: 9px; border-radius: 17px; font-size: 1.55rem; }
  .course-page-kids .day-card .day-title { font-size: 0.79rem; }
  .course-signup-section { padding-bottom: 54px; }
  .course-signup-card { display: flex; flex-direction: column; gap: 13px; padding: 28px 22px; text-align: center; }
  .course-signup-card > img { width: 96px; }
  .course-signup-copy { text-align: center; }
  .course-signup-copy > span { float: none; display: inline-block; margin: 0 0 5px; }
  .course-signup-card .btn { width: 100%; max-width: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  .course-hero-kids .hero-mascot { animation: none; }
  .course-page-kids .day-card { transition: none; }
  .course-page-kids .day-card:hover { transform: none; }
}

/* English raster: polished raster-first lesson and vocabulary experience */
.lesson-page-english-raster {
  --english-raster-deep: #334562;
  --english-raster-gold: #efbd58;
  --english-raster-cream: #fff9ed;
  background:
    radial-gradient(circle at 8% 8%, rgba(239,189,88,0.16), transparent 26%),
    radial-gradient(circle at 92% 18%, rgba(111,181,178,0.14), transparent 25%),
    #f8faf9;
}
.lesson-page-english-raster > .container { max-width: 1120px; }
.lesson-page-english-raster .flashcard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.lesson-page-english-raster .flashcard {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--kid-card-accent) 72%, white);
  border-radius: 24px;
  box-shadow: 0 10px 0 color-mix(in srgb, var(--kid-card-accent) 15%, transparent), 0 18px 32px rgba(51,69,98,0.09);
}
.lesson-page-english-raster .flashcard::after { content: "✦"; }
.lesson-page-english-raster .lesson-word-illustration-raster {
  width: calc(100% + 8px);
  height: auto;
  aspect-ratio: 1;
  margin: -12px -4px 18px;
  border: 0;
  border-radius: 20px;
  background: var(--english-raster-cream);
  box-shadow: inset 0 0 0 2px rgba(239,189,88,0.25);
}
.lesson-page-english-raster .lesson-word-illustration-raster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lesson-page-english-raster .flashcard:not(.flashcard-has-picture) { padding-top: 38px; }
.lesson-page-english-raster .mascot-intro {
  border-color: rgba(255,255,255,0.95);
  background: linear-gradient(135deg, #fff 0%, var(--english-raster-cream) 100%);
}
.lesson-page-english-raster .speech-bubble { border-color: rgba(111,181,178,0.48); }
.lesson-page-english-raster .speech-bubble::before { border-color: rgba(111,181,178,0.48); }

.vocabulary-page-english-raster .flashcard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vocabulary-page-english-raster .flashcard {
  border-width: 2px;
  box-shadow: 0 8px 0 color-mix(in srgb, var(--list-accent) 15%, transparent), 0 15px 28px rgba(51,69,98,0.08);
}
.vocabulary-page-english-raster .vocabulary-word-illustration {
  border: 0;
  box-shadow: inset 0 0 0 2px rgba(239,189,88,0.26);
}
.vocabulary-page-english-raster .flashcard:not(.flashcard-has-picture) { padding-top: 38px; }

 (max-width: 940px) {
  .lesson-page-english-raster .flashcard-grid,
  .vocabulary-page-english-raster .flashcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
 (max-width: 560px) {
  .lesson-page-english-raster .flashcard-grid,
  .vocabulary-page-english-raster .flashcard-grid { grid-template-columns: 1fr; }
  .lesson-page-english-raster .lesson-word-illustration-raster {
    width: 100%;
    max-width: 360px;
    margin: -8px auto 18px;
  }
}

/* Lesson introduction: long-form welcome from the mascot */
.lesson-page-introduction .mascot-intro {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: start;
  gap: 34px;
  padding: 36px;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,212,103,0.20) 0 70px, transparent 71px),
    linear-gradient(135deg, #fff 0%, #fff7e8 100%);
}

.lesson-page-introduction .mascot-intro .mascot-icon {
  position: sticky;
  top: 110px;
  width: 170px;
  margin-top: 18px;
}

.lesson-page-introduction .speech-bubble {
  padding: 30px 34px;
  border-color: rgba(169,146,239,0.58);
  color: #51475f;
  font-size: 1.04rem;
  line-height: 1.96;
  text-align: left;
  box-shadow: 0 10px 24px rgba(91,72,126,0.08);
}

.lesson-page-introduction .speech-bubble::before {
  border-color: rgba(169,146,239,0.58);
}

.lesson-intro-story-label {
  display: table;
  margin: 0 0 20px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #f1ebff;
  color: #705ab8;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
}

.lesson-intro-story-label::before {
  content: '💌';
  margin-right: 7px;
}

html[lang="th"] .lesson-page-introduction .speech-bubble {
  line-height: 2.05;
}

@media (max-width: 720px) {
  .lesson-page-introduction .mascot-intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 18px;
  }

  .lesson-page-introduction .mascot-intro .mascot-icon {
    position: static;
    width: 126px;
    margin: 0 auto;
  }

  .lesson-page-introduction .speech-bubble {
    padding: 22px 20px;
    font-size: 0.98rem;
    line-height: 1.9;
  }

  html[lang="th"] .lesson-page-introduction .speech-bubble {
    line-height: 2;
  }

  .lesson-intro-story-label {
    margin-bottom: 16px;
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-page-introduction .mascot-intro .mascot-icon {
    animation: none;
  }
}

/* Course access-duration labels */
.home-page .course-card-access-note {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: -2px;
  padding: 8px 11px;
  border-radius: 11px;
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.home-page .course-card-access-note.is-active {
  background: #eaf8f1;
  color: #28795a;
}

.home-page .course-card-access-note.is-enroll {
  background: var(--course-tint);
  color: var(--course-accent);
}

.account-page-kids .course-tab {
  min-width: 205px;
  flex-wrap: wrap;
  justify-content: center;
}

.account-page-kids .course-tab-access {
  display: block;
  flex: 1 0 100%;
  margin-top: 2px;
  color: #6b7d84;
  font-size: 0.71rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.account-page-kids .course-tab.active .course-tab-access {
  color: rgba(255,255,255,0.88);
}

.account-page-kids .stat-pill {
  min-width: 245px;
}

.account-page-kids .stat-access-days {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed rgba(224,138,77,0.32);
  color: #746978;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Course link inside every lesson heading */
.lesson-course-link {
  color: var(--coral-dark);
  text-decoration: underline;
  text-decoration-color: rgba(238,82,83,0.34);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

.lesson-course-link:hover {
  color: var(--sky-dark);
  text-decoration-color: currentColor;
}

.lesson-course-link:focus-visible {
  outline: 3px solid var(--yellow-dark);
  outline-offset: 4px;
  border-radius: 5px;
}

.lesson-page-kids > .container > .section-heading:first-child .lesson-course-link {
  color: #fff;
  text-decoration-color: rgba(255,221,116,0.72);
}

.lesson-page-kids > .container > .section-heading:first-child .lesson-course-link:hover {
  color: #fff1a8;
  text-decoration-color: #fff1a8;
}

@media (max-width: 620px) {
  .home-page .course-card-access-note {
    min-height: 34px;
    font-size: 0.76rem;
  }

  .account-page-kids .course-tab {
    min-width: 210px;
  }

  .account-page-kids .stat-pill {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-course-link {
    transition: none;
  }
}

/* Back-to-course navigation on lesson pages */
.lesson-back-course-nav {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
}

.lesson-back-course-nav .btn {
  min-height: 42px;
  background: var(--white);
}

.lesson-page-kids .lesson-back-course-nav .btn {
  border-color: var(--kid-coral);
  color: #d94f68;
  box-shadow: 0 7px 16px rgba(89,67,103,0.09);
}

.lesson-page-kids .lesson-back-course-nav .btn:hover {
  background: var(--kid-coral);
  color: #fff;
}

@media (max-width: 600px) {
  .lesson-back-course-nav {
    justify-content: flex-start;
    margin-bottom: 16px;
  }

  .lesson-back-course-nav .btn {
    min-height: 40px;
    padding: 9px 17px;
    font-size: 0.9rem;
  }
}

/* ── Pronunciation sound lab: illustrated course map and lesson scenes ── */
.course-hero-pronunciation,
.course-page-pronunciation,
.lesson-page-pronunciation {
  --pronunciation-coral: #f2767c;
  --pronunciation-violet: #735fd1;
  --pronunciation-cyan: #57c6d9;
  --pronunciation-mint: #65cfb2;
  --pronunciation-gold: #f2bb4a;
  --pronunciation-cream: #fff9ef;
  --pronunciation-ink: #443b59;
}

.course-hero-pronunciation {
  background:
    radial-gradient(circle at 10% 12%, rgba(255,255,255,0.18) 0 8px, transparent 9px),
    radial-gradient(circle at 90% 15%, rgba(255,222,120,0.24) 0 92px, transparent 93px),
    linear-gradient(132deg, #5549b8 0%, #7463d2 42%, #d76f9d 100%);
}

.course-hero-pronunciation .course-hero-layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: 46px;
}

.course-hero-pronunciation .hero-text h1 { font-size: clamp(2.65rem, 5vw, 4.15rem); }

.course-hero-pronunciation .pronunciation-hero-art-wrap {
  width: min(100%, 560px);
  aspect-ratio: 3 / 2;
}

.course-hero-pronunciation .pronunciation-hero-art-wrap::before {
  inset: -10px;
  border-radius: 38px;
  background: rgba(255,255,255,0.16);
  transform: rotate(-1.5deg);
}

.course-hero-pronunciation .pronunciation-hero-art {
  width: 100%;
  height: 100%;
  border: 4px solid rgba(255,255,255,0.88);
  border-radius: 30px;
  object-fit: cover;
  filter: drop-shadow(0 18px 24px rgba(50,30,83,0.24));
  animation: none;
}

.course-page-pronunciation {
  background:
    radial-gradient(circle at 2% 12%, rgba(242,118,124,0.09) 0 100px, transparent 101px),
    radial-gradient(circle at 98% 42%, rgba(87,198,217,0.11) 0 150px, transparent 151px),
    linear-gradient(180deg, #fffaf3 0%, #f8fbff 52%, #fff9f1 100%);
}

.course-page-pronunciation .course-heading-icon {
  border-color: rgba(87,198,217,0.32);
  background: #eafafd;
}

.pronunciation-phase-stack { display: grid; gap: 42px; }

.pronunciation-phase {
  padding: 24px;
  border: 2px solid rgba(115,95,209,0.13);
  border-radius: 30px;
  background: rgba(255,255,255,0.74);
  box-shadow: 0 15px 34px rgba(68,59,89,0.07);
}

.pronunciation-phase:nth-child(2n) {
  border-color: rgba(87,198,217,0.18);
  background: rgba(246,253,255,0.84);
}

.pronunciation-phase-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.pronunciation-phase-icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #f2edff, #fff1f5);
  font-size: 1.55rem;
  box-shadow: 0 7px 15px rgba(78,62,126,0.10);
}

.pronunciation-phase-heading h3 {
  margin: 0;
  color: var(--pronunciation-ink);
  font-size: clamp(1.25rem, 2.2vw, 1.62rem);
}

.pronunciation-phase-heading p {
  margin: 3px 0 0;
  color: #756b80;
  font-size: 0.9rem;
  line-height: 1.55;
}

.course-page-pronunciation .pronunciation-roadmap-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.course-page-pronunciation .pronunciation-day-card {
  display: grid;
  grid-template-columns: minmax(130px, 42%) minmax(0, 1fr);
  min-height: 138px;
  overflow: hidden;
  align-items: stretch;
  padding: 8px;
  text-align: left;
}

.course-page-pronunciation .pronunciation-day-card::before { z-index: 3; }

.pronunciation-day-thumb {
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #f3eef9;
}

.pronunciation-day-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 122px;
  object-fit: cover;
  transition: transform var(--transition);
}

.pronunciation-day-card:hover .pronunciation-day-thumb img { transform: scale(1.035); }

.pronunciation-day-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 12px;
}

.course-page-pronunciation .pronunciation-day-card .day-num {
  width: 42px;
  height: 42px;
  margin: 0 0 8px;
  border-radius: 14px;
  font-size: 1.2rem;
}

.course-page-pronunciation .pronunciation-day-card .day-title {
  display: block;
  min-height: 0;
  color: #534960;
  font-size: 0.88rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.course-page-pronunciation .pronunciation-resource-grid {
  max-width: 580px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 38px auto 0;
}

.lesson-page-pronunciation {
  background:
    radial-gradient(circle at 4% 4%, rgba(242,187,74,0.22) 0 95px, transparent 96px),
    radial-gradient(circle at 96% 13%, rgba(87,198,217,0.19) 0 130px, transparent 131px),
    linear-gradient(180deg, #fffaf1 0%, #f4fbff 48%, #fff8f2 100%);
}

.lesson-page-pronunciation > .container > .section-heading:first-child {
  background: linear-gradient(125deg, #5549b8 0%, #7665d4 52%, #db719c 100%);
}

.lesson-page-pronunciation > .container > .section-heading:first-child::before {
  content: '♪';
  background: #ffd978;
}

.lesson-page-pronunciation .mascot-intro {
  background: linear-gradient(135deg, #fff 0%, #fff4e5 54%, #eefbff 100%);
}

.lesson-page-pronunciation .lesson-story-visual {
  max-width: 860px;
  border-color: rgba(255,255,255,0.96);
  background: linear-gradient(145deg, #fff 0%, #f3f0ff 52%, #eafafd 100%);
  box-shadow: 0 14px 0 rgba(115,95,209,0.16), 0 24px 42px rgba(68,59,89,0.13);
}

.lesson-page-pronunciation .lesson-story-visual img { aspect-ratio: 3 / 2; }

.lesson-page-pronunciation .lesson-story-visual figcaption { color: #5d5073; }
.lesson-page-pronunciation .lesson-story-visual figcaption span { color: var(--pronunciation-coral); }

.lesson-page-pronunciation .flashcard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lesson-page-pronunciation .flashcard {
  padding-inline: 16px;
  box-shadow: 0 9px 0 color-mix(in srgb, var(--kid-card-accent) 17%, transparent), 0 16px 26px rgba(64,56,79,0.07);
}

@media (max-width: 960px) {
  .course-hero-pronunciation .course-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.92fr);
    gap: 30px;
  }
  .course-page-pronunciation .pronunciation-roadmap-grid { grid-template-columns: 1fr; }
  .lesson-page-pronunciation .flashcard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .course-hero-pronunciation .pronunciation-hero-art-wrap {
    width: min(88vw, 430px);
    order: -1;
  }
  .course-hero-pronunciation .hero-text h1 { font-size: clamp(2.15rem, 10vw, 3rem); }
  .pronunciation-phase-stack { gap: 28px; }
  .pronunciation-phase { padding: 16px; border-radius: 24px; }
  .pronunciation-phase-heading { align-items: flex-start; gap: 12px; }
  .pronunciation-phase-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; font-size: 1.25rem; }
  .pronunciation-phase-heading p { font-size: 0.82rem; }
  .course-page-pronunciation .pronunciation-day-card {
    grid-template-columns: minmax(112px, 38%) minmax(0, 1fr);
    min-height: 126px;
    padding: 7px;
  }
  .pronunciation-day-thumb { border-radius: 15px; }
  .pronunciation-day-thumb img { min-height: 112px; }
  .pronunciation-day-copy { padding: 8px 9px; }
  .course-page-pronunciation .pronunciation-day-card .day-num { width: 36px; height: 36px; margin-bottom: 6px; border-radius: 12px; font-size: 1.02rem; }
  .course-page-pronunciation .pronunciation-day-card .day-title { font-size: 0.78rem; }
  .course-page-pronunciation .pronunciation-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-page-pronunciation .lesson-story-visual { border-radius: 27px; }
  .lesson-page-pronunciation .flashcard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .course-page-pronunciation .pronunciation-day-card { grid-template-columns: 104px minmax(0, 1fr); }
  .course-page-pronunciation .pronunciation-resource-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pronunciation-day-thumb img { transition: none; }
  .pronunciation-day-card:hover .pronunciation-day-thumb img { transform: none; }
}

/* ── Lee English mascot and lesson finishing touches ────────────── */
.mascot-mini { object-position: center; }
.course-signup-mascot { width: 112px; filter: drop-shadow(0 8px 10px rgba(83,57,99,0.12)); }

.lesson-page {
  background:
    radial-gradient(circle at 4% 18%, rgba(78,205,196,0.08), transparent 18rem),
    radial-gradient(circle at 96% 62%, rgba(166,133,226,0.08), transparent 20rem),
    var(--cream);
}
.lesson-page .lesson-back-course-nav { margin-bottom: 26px; }
.lesson-page > .container > .section-heading { margin-top: 44px; }
.lesson-page .lesson-back-course-nav + .section-heading { margin-top: 0; }
.lesson-page .mascot-intro {
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  border: 1px solid rgba(78,205,196,0.34);
  background: linear-gradient(135deg, #fff 0%, #fff9ea 100%);
  box-shadow: 0 14px 34px rgba(58,48,66,0.09);
}
.lesson-page .mascot-intro .mascot-icon {
  width: 112px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 9px 10px rgba(58,48,66,0.12));
}
.lesson-page .speech-bubble {
  padding: 18px 22px;
  border: 1px solid rgba(78,205,196,0.36);
  background: #fff;
  color: #554b60;
  line-height: 1.8;
  box-shadow: 0 7px 18px rgba(58,48,66,0.06);
}
.lesson-page .speech-bubble::before {
  content: '';
  position: absolute;
  top: 42px;
  left: -9px;
  width: 16px;
  height: 16px;
  border-left: 1px solid rgba(78,205,196,0.36);
  border-bottom: 1px solid rgba(78,205,196,0.36);
  background: #fff;
  transform: rotate(45deg);
}
.lesson-page .flashcard-grid { gap: 24px; }
.lesson-page .flashcard {
  position: relative;
  overflow: hidden;
  padding: 24px 18px 20px;
  border: 1px solid rgba(58,48,66,0.10);
  background: linear-gradient(160deg, #fff 62%, #fffaf0 100%);
  box-shadow: 0 10px 24px rgba(58,48,66,0.08);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.lesson-page .flashcard::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--sky);
}
.lesson-page .flashcard:nth-child(4n + 2)::before { background: var(--coral); }
.lesson-page .flashcard:nth-child(4n + 3)::before { background: var(--yellow-dark); }
.lesson-page .flashcard:nth-child(4n + 4)::before { background: var(--purple); }
.lesson-page .flashcard:hover {
  border-color: rgba(78,205,196,0.55);
  box-shadow: 0 17px 34px rgba(58,48,66,0.13);
  transform: translateY(-5px);
}
.lesson-page .flashcard .icon-wrap {
  width: 88px;
  height: 88px;
  background: linear-gradient(145deg, var(--cream-soft), #fff);
  box-shadow: inset 0 0 0 1px rgba(58,48,66,0.06);
}
.lesson-page .flashcard .vocab-word {
  color: var(--ink);
  font-size: 2.15rem;
  line-height: 1.2;
}
.lesson-page .flashcard .vocab-phonetic {
  display: inline-block;
  margin: 8px 0 3px;
  padding: 3px 11px;
  border-radius: 999px;
  background: #eaf9f7;
  font-size: 0.92rem;
}
.lesson-page .flashcard .example {
  margin-top: 15px;
  padding-top: 14px;
  border-top-color: rgba(78,205,196,0.34);
  line-height: 1.65;
  text-align: left;
}
.lesson-page .flashcard .example .flex-center { justify-content: flex-start; }
.lesson-page .listen-btn { transition: transform var(--transition), background var(--transition), box-shadow var(--transition); }
.lesson-page .listen-btn:hover { transform: translateY(-1px) scale(1.04); }
.lesson-page .grammar-box {
  padding: 28px;
  border: 1px solid rgba(166,133,226,0.28);
  border-left: 6px solid var(--purple);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #fff 0%, #f7f3ff 100%);
  box-shadow: 0 13px 30px rgba(58,48,66,0.09);
}
.lesson-page .grammar-box h3 { color: #7157b9; }
.lesson-page .grammar-examples { gap: 12px; }
.lesson-page .grammar-example {
  padding: 15px 17px;
  border: 1px solid rgba(166,133,226,0.18);
  background: rgba(255,255,255,0.88);
  transition: border-color var(--transition), transform var(--transition);
}
.lesson-page .grammar-example:hover { border-color: rgba(166,133,226,0.55); transform: translateX(3px); }
.lesson-locked {
  max-width: 680px;
  margin: 0 auto;
  padding: 46px 24px 58px;
}
.lesson-locked-mascot {
  width: min(310px, 72vw);
  margin: 0 auto 16px;
  filter: drop-shadow(0 14px 18px rgba(58,48,66,0.13));
}
.lesson-locked p { color: var(--ink-soft); margin: 10px 0 24px; }

/* Legacy glyph fallbacks retained for auxiliary templates not yet illustrated. */
.account-kids-hero-emoji { font-size: 5rem; line-height: 1; }
.vocabulary-mascot-emoji { font-size: 4.5rem; line-height: 1; margin: 0 auto 8px; }
@media (max-width: 640px) {
  .course-signup-mascot { width: 96px; }
  .lesson-page .mascot-intro { flex-direction: column; gap: 12px; padding: 22px 18px; text-align: center; }
  .lesson-page .mascot-intro .mascot-icon { width: 96px; height: 112px; }
  .lesson-page .speech-bubble { width: 100%; padding: 17px 16px; }
  .lesson-page .speech-bubble::before { top: -9px; left: calc(50% - 8px); transform: rotate(135deg); }
  .lesson-page .flashcard-grid { grid-template-columns: 1fr; gap: 17px; }
  .lesson-page .grammar-box { padding: 22px 17px; }
  .account-kids-hero-emoji { font-size: 3.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .course-card:hover .course-level-art,
  .lesson-page .flashcard:hover,
  .lesson-page .grammar-example:hover,
  .lesson-page .listen-btn:hover { transform: none; }
}
/* Kids Vocabulary 100 image-first cards */
.vocabulary-page .flashcard { display:flex; min-height:284px; flex-direction:column; align-items:center; justify-content:flex-start; }
.vocabulary-page .flashcard .icon-wrap { flex:0 0 auto; width:78px; height:78px; margin-bottom:14px; background:linear-gradient(145deg,#fffdf5,var(--list-tint)); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--list-accent) 18%,transparent); }
.vocabulary-page .flashcard :is(.vocabulary-word-illustration,.word-picture,.vocab-picture) { width:100%; max-width:178px; aspect-ratio:4 / 3; margin:-4px auto 14px; overflow:hidden; border:2px solid color-mix(in srgb,var(--list-accent) 24%,white); border-radius:18px; background:var(--list-tint); }
.vocabulary-page .flashcard :is(.vocabulary-word-illustration,.word-picture,.vocab-picture) img { width:100%; height:100%; object-fit:cover; }
.vocabulary-page .flashcard .vocab-word { max-width:100%; overflow-wrap:anywhere; text-wrap:balance; }
.vocabulary-page .flashcard :is(.vocab-sentence,.example-sentence,.word-sentence) { width:100%; margin-top:auto; padding:11px 12px; border-top:1px dashed color-mix(in srgb,var(--list-accent) 35%,transparent); color:#5d5368; font-size:.9rem; line-height:1.5; text-align:left; }
.vocabulary-page .flashcard .listen-btn:focus-visible,.vocabulary-page .flashcard .listen-btn-sm:focus-visible { outline:3px solid color-mix(in srgb,var(--list-accent) 65%,white); outline-offset:3px; }
@media (max-width:680px) { .vocabulary-page .flashcard { min-height:265px; } .vocabulary-page .flashcard :is(.vocabulary-word-illustration,.word-picture,.vocab-picture) { max-width:150px; } }
/* Kids Vocabulary 100 picture panels */
:is(.lesson-page-kids100,.vocabulary-page-kids100) .kids100-picture { display:block; width:100%; max-width:320px; aspect-ratio:4 / 3; margin:0 auto 14px; overflow:hidden; border:3px solid rgba(255,212,103,.55); border-radius:20px; background:#fffaf0; box-shadow:0 8px 0 rgba(255,212,103,.18); }
:is(.lesson-page-kids100,.vocabulary-page-kids100) .kids100-picture img { display:block; width:100%; height:100%; object-fit:cover; }
:is(.lesson-page-kids100,.vocabulary-page-kids100) .kids100-sentence { margin-top:12px; padding:11px 13px; border-top:1px dashed rgba(104,214,193,.55); color:#5d5368; font-size:.92rem; line-height:1.55; text-align:left; }
@media (max-width:560px) { :is(.lesson-page-kids100,.vocabulary-page-kids100) .kids100-picture { max-width:260px; } }
@media (prefers-reduced-motion:reduce) { :is(.lesson-page-kids100,.vocabulary-page-kids100) .kids100-picture img { transition:none; } }