/* Science with Astronaut — CBSE science course 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: #2e86de;
  --coral-dark: #1f6fc4;
  --yellow: #ffd166;
  --yellow-dark: #f4b400;
  --sky: #22c39e;
  --sky-dark: #1aa885;
  --purple: #a685e2;
  --cream: #f7fbfd;
  --cream-soft: #eef7f5;
  --ink: #1f2937;
  --ink-soft: #616e7d;
  --gray-light: #e7edf0;
  --border: #dde8ec;
  --green: #4caf82;
  --white: #ffffff;

  --shadow-sm: 0 2px 6px rgba(31,41,55,0.08);
  --shadow-md: 0 6px 20px rgba(31,41,55,0.12);
  --shadow-lg: 0 12px 36px rgba(31,41,55,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;
}

/* ── Science discovery homepage ─────────────────────────────────── */
.science-hero,
.science-home {
  --science-navy: #082f49;
  --science-navy-deep: #041f30;
  --science-blue: #2e86de;
  --science-cyan: #5ecfe5;
  --science-mint: #22c39e;
  --science-yellow: #ffd166;
  --science-paper: #f5fafb;
  --science-line: #dce9ed;
}

.science-hero {
  position: relative;
  overflow: hidden;
  padding: 82px 0 88px;
  color: #fff;
  background:
    radial-gradient(circle at 72% 12%, rgba(94,207,229,.18), transparent 26%),
    radial-gradient(circle at 7% 95%, rgba(34,195,158,.14), transparent 28%),
    linear-gradient(128deg, #041f30 0%, #083653 52%, #0b5270 100%);
  isolation: isolate;
}

.science-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .17;
  background-image: radial-gradient(rgba(255,255,255,.72) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, #000, transparent 44%, #000);
}

.science-hero-blob {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;
  pointer-events: none;
}

.science-hero-blob-one {
  width: 420px;
  height: 420px;
  top: -290px;
  left: -135px;
  box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018);
}

.science-hero-blob-two {
  width: 300px;
  height: 300px;
  right: -180px;
  bottom: -190px;
  background: rgba(255,209,102,.06);
  box-shadow: 0 0 0 55px rgba(255,209,102,.025);
}

.science-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  gap: 72px;
  align-items: center;
}

.science-hero-copy { max-width: 680px; }

.science-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-bottom: 24px;
  padding: 6px 13px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #d7f6fb;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  backdrop-filter: blur(10px);
}

.science-pill > span { color: var(--science-yellow); }

.science-hero h1 {
  max-width: 680px;
  margin-bottom: 24px;
  font-size: clamp(3.1rem, 5.9vw, 5.35rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.science-hero h1 > span {
  display: block;
  color: var(--science-yellow);
}

.science-hero-lead {
  max-width: 620px;
  color: rgba(255,255,255,.76);
  font-size: clamp(1rem, 1.65vw, 1.14rem);
  line-height: 1.8;
}

.science-hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 32px;
}

.btn.science-btn-primary,
.btn.science-btn-dark {
  min-height: 52px;
  padding: 12px 25px;
  border-radius: 14px;
}

.btn.science-btn-primary {
  background: var(--science-yellow);
  color: var(--science-navy-deep);
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
}

.btn.science-btn-primary:hover { background: #ffe29a; }
.science-btn-primary span,
.science-btn-dark span { font-size: 1.15em; transition: transform var(--transition); }
.science-btn-primary:hover span,
.science-btn-dark:hover span { transform: translateX(4px); }

.science-text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.82);
  font-weight: 600;
}

.science-text-link:hover { color: #fff; }

.science-hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 620px;
  margin-top: 44px;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,.14);
}

.science-hero-proof > div {
  display: flex;
  min-width: 0;
  padding: 0 18px;
  flex-direction: column;
}

.science-hero-proof > div:first-child { padding-left: 0; }
.science-hero-proof > div + div { border-left: 1px solid rgba(255,255,255,.13); }
.science-hero-proof strong { color: #fff; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.1; }
.science-hero-proof span { margin-top: 4px; color: rgba(255,255,255,.55); font-size: .73rem; line-height: 1.4; }

.science-lab {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  box-shadow: 0 30px 70px rgba(0,15,25,.35);
  backdrop-filter: blur(18px);
}

.science-lab-topline,
.science-lab-footer {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 0 22px;
  color: rgba(255,255,255,.72);
  font-size: .76rem;
  font-weight: 600;
}

.science-lab-topline { border-bottom: 1px solid rgba(255,255,255,.12); }
.science-lab-topline > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.science-lab-topline > span:first-child i { width: 7px; height: 7px; border-radius: 50%; background: var(--science-mint); box-shadow: 0 0 0 5px rgba(34,195,158,.13); }
.science-lab-status { padding: 5px 9px; border-radius: 999px; background: rgba(34,195,158,.14); color: #b7f7e8; font-size: .68rem; }

.science-lab-stage {
  position: relative;
  min-height: 420px;
  background: radial-gradient(circle at 50% 46%, rgba(94,207,229,.12), transparent 34%);
}

.science-lab-stage > img {
  position: absolute;
  z-index: 3;
  width: 260px;
  top: 77px;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  filter: drop-shadow(0 22px 26px rgba(0,13,22,.28));
  animation: science-float 5s ease-in-out infinite;
}

.science-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.science-orbit-one { width: 325px; height: 325px; }
.science-orbit-two { width: 245px; height: 245px; border-style: dashed; opacity: .75; }

.science-particle {
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 18px currentColor;
}

.science-particle-one { top: 63px; left: 31%; color: var(--science-yellow); background: currentColor; }
.science-particle-two { top: 205px; right: 13%; color: var(--science-mint); background: currentColor; }
.science-particle-three { bottom: 58px; left: 21%; color: var(--science-cyan); background: currentColor; }

.science-float-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 122px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 14px;
  background: rgba(4,31,48,.7);
  box-shadow: 0 12px 28px rgba(0,15,25,.2);
  backdrop-filter: blur(10px);
}

.science-float-card > span {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.1);
  color: var(--science-yellow);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
}

.science-float-card div { display: flex; flex-direction: column; }
.science-float-card small { color: rgba(255,255,255,.38); font-size: .58rem; line-height: 1; }
.science-float-card strong { margin-top: 3px; color: #fff; font-size: .77rem; line-height: 1.2; }
.science-float-observe { top: 48px; left: 18px; }
.science-float-question { top: 176px; right: 16px; }
.science-float-test { bottom: 35px; left: 25px; }

.science-lab-footer { border-top: 1px solid rgba(255,255,255,.12); }
.science-lab-footer > div { display: flex; flex: 1; gap: 5px; }
.science-lab-footer i { height: 4px; flex: 1; border-radius: 999px; background: var(--science-mint); }
.science-lab-footer strong { color: #fff; font-size: .7rem; }

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

.science-home { overflow: hidden; background: var(--science-paper); }
.science-intro { padding: 96px 0 104px; }
.science-section-heading > p {
  margin-bottom: 11px;
  color: #16715f;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.science-section-heading h2 {
  max-width: 780px;
  color: var(--science-navy-deep);
  font-size: clamp(2.05rem, 4vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.science-section-heading > span {
  display: block;
  max-width: 680px;
  margin-top: 20px;
  color: var(--ink-soft);
  line-height: 1.75;
}

.science-section-heading-centered { text-align: center; }
.science-section-heading-centered h2,
.science-section-heading-centered > span { margin-right: auto; margin-left: auto; }

.science-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 52px;
}

.science-benefit-card {
  --benefit-accent: var(--science-blue);
  --benefit-tint: #eaf4ff;
  position: relative;
  min-height: 335px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--science-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(8,47,73,.06);
  transition: transform var(--transition), box-shadow var(--transition);
}

.science-benefit-card::after {
  content: '';
  position: absolute;
  width: 155px;
  height: 155px;
  right: -85px;
  bottom: -90px;
  border-radius: 50%;
  background: var(--benefit-accent);
  opacity: .07;
}

.science-benefit-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(8,47,73,.1); }
.science-benefit-mint { --benefit-accent: #159a7f; --benefit-tint: #e5f8f3; }
.science-benefit-yellow { --benefit-accent: #c38709; --benefit-tint: #fff6d9; }
.science-benefit-icon { display: grid; width: 52px; height: 52px; margin-bottom: 27px; place-items: center; border-radius: 15px; background: var(--benefit-tint); color: var(--benefit-accent); font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; }
.science-benefit-tag { color: var(--benefit-accent); font-size: .73rem; font-weight: 700; }
.science-benefit-card h3 { max-width: 310px; margin: 9px 0 13px; color: var(--science-navy-deep); font-size: 1.45rem; line-height: 1.25; }
.science-benefit-card p { position: relative; z-index: 1; color: var(--ink-soft); font-size: .91rem; line-height: 1.75; }

.science-path {
  position: relative;
  padding: 96px 0 108px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 15%, rgba(94,207,229,.13), transparent 23%),
    linear-gradient(135deg, #041f30, #083653);
}

.science-path::after { content: ''; position: absolute; width: 380px; height: 380px; left: -280px; bottom: -250px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.science-path-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 34px; }
.science-path .science-section-heading > p { color: #8cebd6; }
.science-path .science-section-heading h2 { max-width: 700px; color: #fff; }
.science-arrow-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.36); color: rgba(255,255,255,.82); font-weight: 600; }
.science-arrow-link:hover { color: var(--science-yellow); border-color: var(--science-yellow); }

.science-path-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 56px;
}

.science-path-track::before { content: ''; position: absolute; z-index: 0; top: 29px; right: 8%; left: 8%; height: 1px; background: linear-gradient(90deg, #5ecfe5, #22c39e, #ffd166); opacity: .42; }
.science-level { --level-color: #5ecfe5; position: relative; z-index: 1; min-height: 285px; padding: 22px 20px 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.science-level::after { content: ''; position: absolute; width: 120px; height: 120px; right: -74px; bottom: -74px; border-radius: 50%; background: var(--level-color); opacity: .1; }
.science-level-two { --level-color: #22c39e; transform: translateY(20px); }
.science-level-three { --level-color: #ffd166; }
.science-level-four { --level-color: #a685e2; transform: translateY(20px); }
.science-level-five { --level-color: #ff8d83; }
.science-level-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 37px; }
.science-level-top span { color: rgba(255,255,255,.38); font-family: var(--font-display); font-size: .67rem; font-weight: 700; }
.science-level-top i { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: #083653; color: var(--level-color); font-size: .68rem; font-style: normal; box-shadow: 0 0 0 6px rgba(255,255,255,.035); }
.science-level > strong { color: var(--level-color); font-family: var(--font-display); font-size: 1.18rem; }
.science-level h3 { margin: 6px 0 13px; color: #fff; font-size: 1.18rem; }
.science-level p { color: rgba(255,255,255,.58); font-size: .82rem; line-height: 1.7; }

.science-method { padding: 108px 0; background: linear-gradient(180deg, #eef7f6, #f8fbfb); }
.science-method-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(450px, 1.15fr); gap: 84px; align-items: center; }
.science-method-copy > p { max-width: 520px; margin-top: 22px; color: var(--ink-soft); line-height: 1.8; }
.btn.science-btn-dark { margin-top: 30px; background: var(--science-navy); color: #fff; box-shadow: 0 12px 28px rgba(8,47,73,.17); }
.btn.science-btn-dark:hover { background: #0d4668; }
.science-method-list { position: relative; display: grid; gap: 12px; list-style: none; }
.science-method-list::before { content: ''; position: absolute; z-index: 0; top: 54px; bottom: 54px; left: 27px; width: 1px; background: #b7d9d5; }
.science-method-list li { position: relative; z-index: 1; display: grid; grid-template-columns: 38px minmax(0, 1fr) 42px; gap: 18px; align-items: center; min-height: 102px; padding: 17px 20px; border: 1px solid var(--science-line); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 10px 28px rgba(8,47,73,.055); }
.science-method-list li > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--science-navy); color: #fff; font-family: var(--font-display); font-size: .66rem; font-weight: 700; }
.science-method-list li > div strong { color: var(--science-navy-deep); font-family: var(--font-display); font-size: 1.13rem; }
.science-method-list li > div p { margin-top: 2px; color: var(--ink-soft); font-size: .83rem; }
.science-method-list li > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: #e5f8f3; color: #16715f; font-family: var(--font-display); font-size: 1.18rem; font-style: normal; font-weight: 800; }

.science-final { padding: 0 0 96px; background: #f8fbfb; }
.science-final-card { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 30px; align-items: center; min-height: 220px; padding: 38px 44px; overflow: hidden; border-radius: 28px; background: linear-gradient(120deg, #0a3d59, #11627a); color: #fff; box-shadow: 0 24px 54px rgba(8,47,73,.2); }
.science-final-card::after { content: ''; position: absolute; width: 300px; height: 300px; right: 18%; top: -245px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.025); }
.science-final-card > * { position: relative; z-index: 1; }
.science-final-orby { position: relative; display: grid; width: 126px; height: 126px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); }
.science-final-orby img { width: 108px; }
.science-final-orby span { position: absolute; top: 3px; right: 2px; color: var(--science-yellow); font-size: 1.4rem; }
.science-final-card > div:nth-child(2) p { margin-bottom: 8px; color: #a9e8f1; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.science-final-card h2 { max-width: 650px; font-size: clamp(1.65rem, 3vw, 2.45rem); line-height: 1.25; }
.science-final-card .science-btn-primary { white-space: nowrap; }
main.science-home + .site-footer { margin-top: 0; }

.science-home a:focus-visible,
.science-hero a:focus-visible { outline: 3px solid var(--science-yellow); outline-offset: 4px; }

@media (max-width: 1050px) {
  .science-hero-layout { grid-template-columns: minmax(0, 1fr) minmax(390px, .85fr); gap: 36px; }
  .science-lab-stage { min-height: 390px; }
  .science-lab-stage > img { width: 235px; }
  .science-benefit-card { padding: 26px; }
  .science-path-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .science-path-track::before { display: none; }
  .science-level-two, .science-level-four { transform: none; }
  .science-method-layout { gap: 50px; }
  .science-final-card { grid-template-columns: 105px minmax(0, 1fr) auto; padding: 34px; }
  .science-final-orby { width: 100px; height: 100px; }
  .science-final-orby img { width: 88px; }
}

@media (max-width: 820px) {
  .science-hero { padding: 68px 0 76px; }
  .science-hero-layout { grid-template-columns: 1fr; }
  .science-hero-copy { max-width: 720px; margin: 0 auto; text-align: center; }
  .science-pill { justify-content: center; }
  .science-hero-lead { margin: 0 auto; }
  .science-hero-actions { justify-content: center; }
  .science-hero-proof { margin-right: auto; margin-left: auto; text-align: left; }
  .science-lab { width: min(100%, 560px); margin: 12px auto 0; }
  .science-benefit-grid { grid-template-columns: 1fr; max-width: 650px; margin-right: auto; margin-left: auto; }
  .science-benefit-card { min-height: 0; }
  .science-path-heading { align-items: flex-start; flex-direction: column; }
  .science-path-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .science-level { min-height: 250px; }
  .science-method-layout { grid-template-columns: 1fr; }
  .science-method-copy { text-align: center; }
  .science-method-copy .science-section-heading h2,
  .science-method-copy > p { margin-right: auto; margin-left: auto; }
  .science-method-list { width: min(100%, 650px); margin: 0 auto; }
  .science-final-card { grid-template-columns: 90px minmax(0, 1fr); }
  .science-final-card .science-btn-primary { grid-column: 1 / -1; width: 100%; }
  .science-final-orby { width: 86px; height: 86px; }
  .science-final-orby img { width: 76px; }
}

@media (max-width: 580px) {
  .science-hero { padding: 52px 0 60px; }
  .science-pill { align-items: flex-start; border-radius: 14px; font-size: .7rem; }
  .science-hero h1 { font-size: clamp(2.65rem, 14vw, 3.65rem); letter-spacing: -.045em; }
  .science-hero-lead { font-size: .94rem; }
  .science-hero-actions { align-items: stretch; flex-direction: column; gap: 15px; }
  .science-hero-actions .btn { width: 100%; }
  .science-text-link { justify-content: center; }
  .science-hero-proof { gap: 0; margin-top: 34px; }
  .science-hero-proof > div { padding: 0 10px; }
  .science-hero-proof strong { font-size: 1.15rem; }
  .science-hero-proof span { font-size: .62rem; }
  .science-lab { border-radius: 22px; }
  .science-lab-topline, .science-lab-footer { min-height: 52px; padding: 0 15px; }
  .science-lab-stage { min-height: 350px; }
  .science-lab-stage > img { width: 205px; top: 70px; }
  .science-orbit-one { width: 275px; height: 275px; }
  .science-orbit-two { width: 210px; height: 210px; }
  .science-float-card { min-width: 105px; padding: 8px; }
  .science-float-card > span { width: 27px; height: 27px; }
  .science-float-observe { top: 34px; left: 8px; }
  .science-float-question { top: 159px; right: 6px; }
  .science-float-test { bottom: 27px; left: 10px; }
  .science-intro, .science-path, .science-method { padding: 72px 0 76px; }
  .science-section-heading h2 { font-size: 2.1rem; letter-spacing: -.03em; }
  .science-benefit-grid { margin-top: 38px; }
  .science-benefit-card { padding: 24px; border-radius: 20px; }
  .science-benefit-icon { margin-bottom: 20px; }
  .science-path-track { display: grid; grid-auto-columns: minmax(245px, 82vw); grid-template-columns: none; grid-auto-flow: column; gap: 12px; margin-right: -20px; margin-left: -20px; padding: 0 20px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .science-level { min-height: 270px; scroll-snap-align: start; }
  .science-method-layout { gap: 40px; }
  .science-method-list li { grid-template-columns: 35px minmax(0, 1fr) 38px; gap: 12px; min-height: 94px; padding: 14px; }
  .science-method-list li > span { width: 35px; height: 35px; }
  .science-method-list li > i { width: 38px; height: 38px; }
  .science-final { padding: 0 0 70px; }
  .science-final-card { display: flex; min-height: 0; padding: 30px 24px; flex-direction: column; gap: 20px; border-radius: 23px; text-align: center; }
  .science-final-orby { width: 90px; height: 90px; }
  .science-final-card .science-btn-primary { width: 100%; }
}

html[lang="th"] .science-hero h1 { line-height: 1.28; letter-spacing: -.02em; }
html[lang="th"] .science-section-heading h2,
html[lang="th"] .science-final-card h2 { line-height: 1.4; letter-spacing: -.015em; }
html[lang="th"] .science-benefit-card h3,
html[lang="th"] .science-level h3 { line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .science-lab-stage > img { animation: none; }
  .science-benefit-card { transition: none; }
  .science-benefit-card:hover { transform: none; }
}

* { 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; }
.cn { font-family: var(--font-cn); }

.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-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: 330px;
  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 .hero-mascot {
  flex: 0 1 360px;
  width: clamp(250px, 29vw, 360px);
  filter: drop-shadow(0 24px 30px rgba(30,18,36,0.24));
  transform: rotate(2deg);
}

.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(3, 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: 30px 28px 26px;
  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: #0f766e; --course-tint: #e8f8f5; }
.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: #4b5563; --course-tint: #f0f2f4; }
.home-page .course-card.course-color-6 { --course-accent: #b8860b; --course-tint: #fdf6e3; }
.home-page .course-card.course-color-7 { --course-accent: #be185d; --course-tint: #fdf0f6; }
.home-page .course-card.course-color-8 { --course-accent: #0284c7; --course-tint: #eaf7ff; }
.home-page .course-card.course-color-9 { --course-accent: #16a34a; --course-tint: #edfcf2; }
.home-page .course-card.course-color-10 { --course-accent: #7c3aed; --course-tint: #f5f0ff; }
.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 .hero-mascot { flex-basis: 290px; width: min(31vw, 290px); }
  .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 .hero-mascot { flex: none; width: min(58vw, 220px); }
  .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 { font-family: var(--font-cn); font-size: 2.1rem; font-weight: 700; color: var(--ink); }
.flashcard .pinyin { 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-pinyin-box { background: var(--cream-soft); }

/* ── Exam paper worksheet (HSK1 Mock Exams) ─────────────────────── */
.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(4, 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-pinyin { --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-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: center;
  justify-content: space-between;
  gap: 12px;
}
.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; }
}


/* ── HSK1 Day 1: child-friendly 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: panpanKidFloat 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 panpanKidFloat {
  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: HSK1 Day 1 and HSK2-HSK6 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: HSK1 Days 2–38 only */
.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; }

/* HSK1 vocabulary and worksheet indexes: child-friendly presentation */
:is(.vocabulary-page-kids, .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-kids, .worksheet-list-page-kids) > .container { position: relative; max-width: 1120px; }
:is(.vocabulary-page-kids, .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-kids, .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-kids, .worksheet-list-page-kids) :is(.vocabulary-panpan, .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: panpanKidFloat 3.6s ease-in-out infinite;
}
:is(.vocabulary-page-kids, .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-kids, .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-kids, .worksheet-list-page-kids) .worksheet-header .flex { position: relative; z-index: 1; }
:is(.vocabulary-page-kids, .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-kids .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-kids .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-kids .section-heading h2 { color: #40384f; font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.45; }
.vocabulary-page-kids .flashcard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vocabulary-page-kids .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-kids .flashcard:nth-child(4n+2) { --list-accent: var(--list-sky); --list-tint: #edf9ff; }
.vocabulary-page-kids .flashcard:nth-child(4n+3) { --list-accent: var(--list-purple); --list-tint: #f4f0ff; }
.vocabulary-page-kids .flashcard:nth-child(4n+4) { --list-accent: var(--list-mint); --list-tint: #ecfbf7; }
.vocabulary-page-kids .flashcard::after { content: '✦'; position: absolute; top: 12px; right: 14px; color: color-mix(in srgb, var(--list-accent) 48%, white); }
.vocabulary-page-kids .flashcard:hover { border-color: var(--list-accent); transform: translateY(-5px); }
.vocabulary-page-kids .flashcard .hanzi { color: #40384f; font-size: 2.75rem; line-height: 1.2; }
.vocabulary-page-kids .flashcard .pinyin {
  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-kids .flashcard .listen-btn { background: var(--list-yellow); box-shadow: 0 5px 0 #eeb448; }
.vocabulary-page-kids .flashcard .meaning { margin-top: 15px; color: #5d5368; line-height: 1.55; }
.vocabulary-page-kids .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-kids .vocabulary-word-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.vocabulary-page-kids .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-kids .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-kids, .worksheet-list-page-kids) { padding-top: 34px; }
  :is(.vocabulary-page-kids, .worksheet-list-page-kids) > .container { padding: 0 16px; }
  :is(.vocabulary-page-kids, .worksheet-list-page-kids) .worksheet-header { padding: 26px 18px 24px; border-radius: 27px; }
  :is(.vocabulary-page-kids, .worksheet-list-page-kids) :is(.vocabulary-panpan, .worksheet-list-panpan) { width: 112px; height: 112px; }
  :is(.vocabulary-page-kids, .worksheet-list-page-kids) .worksheet-header h1 { font-size: 1.75rem; }
  .vocabulary-page-kids .section-heading { margin-top: 36px !important; padding: 12px 14px; }
  .vocabulary-page-kids .flashcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .vocabulary-page-kids .flashcard { padding: 21px 11px 18px; }
  .vocabulary-page-kids .flashcard .hanzi { 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-kids .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-kids, .worksheet-list-page-kids) :is(.vocabulary-panpan, .worksheet-list-panpan) { animation: none; }
  .vocabulary-page-kids .flashcard { transition: none; }
  .vocabulary-page-kids .flashcard:hover { transform: none; }
}
@media print {
  :is(.vocabulary-page-kids, .worksheet-list-page-kids) { background: #fff; }
  :is(.vocabulary-page-kids, .worksheet-list-page-kids) .worksheet-header,
  .vocabulary-page-kids .section-heading,
  .vocabulary-page-kids .flashcard { box-shadow: none; }
  :is(.vocabulary-page-kids, .worksheet-list-page-kids) .worksheet-header { border-color: #ddd; background: #fff; }
  :is(.vocabulary-page-kids, .worksheet-list-page-kids) .worksheet-header h1,
  :is(.vocabulary-page-kids, .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: panpanKidFloat 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; }
}

@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 .course-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .account-page-kids .course-tab { flex: 0 0 auto; }
  .account-page-kids .roadmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .account-page-kids .day-card { min-height: 132px; padding: 17px 10px 14px; border-radius: 20px; }
  .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: child-friendly Panpan 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: coursePanpanFloat 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 coursePanpanFloat {
  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; }
}

/* HSK5: polished raster-first lesson and vocabulary experience */
.lesson-page-hsk5 {
  --hsk5-deep: #334562;
  --hsk5-gold: #efbd58;
  --hsk5-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-hsk5 > .container { max-width: 1120px; }
.lesson-page-hsk5 .flashcard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.lesson-page-hsk5 .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-hsk5 .flashcard::after { content: "✦"; }
.lesson-page-hsk5 .lesson-word-illustration-raster {
  width: calc(100% + 8px);
  height: auto;
  aspect-ratio: 1;
  margin: -12px -4px 18px;
  border: 0;
  border-radius: 20px;
  background: var(--hsk5-cream);
  box-shadow: inset 0 0 0 2px rgba(239,189,88,0.25);
}
.lesson-page-hsk5 .lesson-word-illustration-raster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lesson-page-hsk5 .flashcard:not(.flashcard-has-picture) { padding-top: 38px; }
.lesson-page-hsk5 .mascot-intro {
  border-color: rgba(255,255,255,0.95);
  background: linear-gradient(135deg, #fff 0%, var(--hsk5-cream) 100%);
}
.lesson-page-hsk5 .speech-bubble { border-color: rgba(111,181,178,0.48); }
.lesson-page-hsk5 .speech-bubble::before { border-color: rgba(111,181,178,0.48); }

.vocabulary-page-hsk5 .flashcard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vocabulary-page-hsk5 .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-hsk5 .vocabulary-word-illustration {
  border: 0;
  box-shadow: inset 0 0 0 2px rgba(239,189,88,0.26);
}
.vocabulary-page-hsk5 .flashcard:not(.flashcard-has-picture) { padding-top: 38px; }

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

/* HSK1-HSK6 lesson 0: long-form welcome from Panpan */
.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;
  }
}

/* ── Sci lesson + worksheet pages ───────────────────────────────── */
.btn-lg { padding: 14px 32px; font-size: 1.1rem; }
.lesson-wrap { max-width: 760px; }
.lesson-crumbs { display: flex; justify-content: space-between; align-items: center; color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 18px; }
.lesson-crumbs a { font-weight: 600; }
.lesson-crumbs a:hover { color: var(--coral); }
.lesson-head { margin-bottom: 22px; }
.lesson-head h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 8px 0; }
.lesson-day-badge { display: inline-block; background: var(--yellow); color: var(--ink); font-family: var(--font-display); font-weight: 700; padding: 4px 14px; border-radius: 999px; font-size: 0.85rem; }
.lesson-body { background: var(--white); border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--shadow-sm); border: 2px solid var(--border); }
.lesson-body p { font-size: 1.12rem; line-height: 1.85; margin-bottom: 18px; }
.lesson-body p:last-child { margin-bottom: 0; }
.lesson-empty { color: var(--ink-soft); font-style: italic; }
.lesson-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 26px 0; }
.lesson-action-done { background: var(--white); color: var(--green); border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.lesson-completed-pill { display: inline-flex; align-items: center; gap: 6px; background: #e8f8ee; color: #1f7a4d; font-weight: 700; padding: 10px 18px; border-radius: 999px; }
.lesson-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }

.ws-list { list-style: none; counter-reset: wsq; display: flex; flex-direction: column; gap: 16px; }
.ws-q { background: var(--white); border-radius: var(--radius-md); padding: 20px 22px; box-shadow: var(--shadow-sm); border: 2px solid var(--border); counter-increment: wsq; }
.ws-q-text { font-weight: 700; font-size: 1.08rem; margin-bottom: 12px; display: flex; gap: 10px; }
.ws-q-text::before { content: counter(wsq); flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--coral); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.9rem; }
.ws-options { display: flex; flex-direction: column; gap: 8px; }
.ws-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); border: 2px solid var(--border); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.ws-option:hover { border-color: var(--sky); }
.ws-option input { accent-color: var(--coral); }
.ws-option:has(input:checked) { border-color: var(--coral); background: #eaf3fd; }
.ws-option-letter { width: 26px; height: 26px; border-radius: 50%; background: var(--gray-light); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.ws-list-review .ws-q.is-correct { border-color: var(--green); }
.ws-list-review .ws-q.is-wrong { border-color: #e74c3c; }
.ws-option.is-answer { border-color: var(--green); background: #e8f8ee; }
.ws-option.is-answer .ws-option-letter { background: var(--green); color: var(--white); }
.ws-option.is-chosen-wrong { border-color: #e74c3c; background: #fdecea; }
.ws-option.is-chosen-wrong .ws-option-letter { background: #e74c3c; color: var(--white); }
.ws-result { text-align: center; background: linear-gradient(160deg, var(--yellow) 0%, var(--sky) 100%); color: var(--ink); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 24px; }
.ws-result-score { font-family: var(--font-display); font-size: 3rem; font-weight: 800; line-height: 1; }
.ws-result-label { font-weight: 600; opacity: 0.85; margin-top: 4px; }
.ws-result-msg { margin-top: 12px; font-weight: 600; }

/* ── Read-aloud buttons ───────────────────────────────────────────── */
.speak-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 6px; border-radius: 50%; border: 2px solid var(--border); background: var(--white); font-size: 0.95rem; line-height: 1; cursor: pointer; vertical-align: middle; transition: transform var(--transition), border-color var(--transition), background var(--transition); box-shadow: var(--shadow-sm); }
.speak-btn:hover { transform: scale(1.12); border-color: var(--sky); }
.speak-btn.is-speaking { background: var(--yellow); border-color: var(--yellow-dark); animation: speakPulse 0.9s ease-in-out infinite; }
.speak-btn-sm { width: 26px; height: 26px; font-size: 0.8rem; margin-left: auto; }
.speak-btn-title { width: 36px; height: 36px; font-size: 1.1rem; }
.speak-all-btn.is-speaking { background: var(--yellow); color: var(--ink); animation: speakPulse 0.9s ease-in-out infinite; }
@keyframes speakPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.no-tts .speak-btn, .no-tts .speak-all-btn, .no-tts .lesson-toolbar-hint { display: none !important; }

.lesson-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lesson-toolbar-hint { font-size: 0.85rem; color: var(--ink-soft); }
.lesson-para .sentence { display: inline; }
.lesson-para .sentence:hover { background: #fff6d6; border-radius: 6px; }
.lesson-para .sentence + .sentence { margin-left: 4px; }
.ws-q-text { align-items: center; }
.ws-q-label { flex: 1; }
.ws-option-text { flex: 1; }
.ws-option .speak-btn { flex-shrink: 0; }

/* ── K1 illustrated discovery journey ───────────────────────────── */
.course-page-k1 { --k1-ink: #40364f; --k1-purple: #8567db; --k1-pink: #f27fa3; --k1-sky: #63c9e8; --k1-mint: #42c8a7; }
.k1-journey { position: relative; padding: 78px 0 84px; overflow: hidden; background: linear-gradient(180deg, #fffaf0 0%, #f8f4ff 100%); }
.k1-journey::before, .k1-journey::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.k1-journey::before { width: 240px; height: 240px; top: -150px; left: -100px; background: rgba(99,201,232,.12); }
.k1-journey::after { width: 300px; height: 300px; right: -190px; bottom: -180px; border: 2px dashed rgba(133,103,219,.15); }
.k1-journey-heading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; max-width: 940px; margin: 0 auto 42px; text-align: center; }
.k1-journey-heading > div { flex: 1; }
.k1-journey-heading > img { width: 118px; filter: drop-shadow(0 12px 16px rgba(64,54,79,.14)); transform: rotate(3deg); }
.k1-journey-kicker { display: inline-block; margin-bottom: 9px; color: #8c5fc2; font-weight: 700; font-size: .82rem; letter-spacing: .04em; }
.k1-journey-heading h2 { color: var(--k1-ink); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; }
.k1-journey-heading p { max-width: 700px; margin: 14px auto 0; color: var(--ink-soft); line-height: 1.7; }
.k1-chapter-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.k1-chapter-card { --chapter-accent: #ef7297; display: block; overflow: hidden; border: 1px solid rgba(64,54,79,.09); border-radius: 28px; background: #fff; box-shadow: 0 14px 34px rgba(64,54,79,.09); transition: transform var(--transition), box-shadow var(--transition); }
.k1-chapter-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(64,54,79,.14); }
.k1-chapter-2 { --chapter-accent: #36ad81; }
.k1-chapter-3 { --chapter-accent: #e69d32; }
.k1-chapter-4 { --chapter-accent: #4eaed4; }
.k1-chapter-5 { --chapter-accent: #8266d4; }
.k1-chapter-6 { --chapter-accent: #db6b7c; }
.k1-chapter-card figure { position: relative; aspect-ratio: 3 / 1.62; overflow: hidden; background: #eaf6fa; }
.k1-chapter-card figure::after { content: ''; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(transparent, rgba(31,25,40,.3)); }
.k1-chapter-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.k1-chapter-card:hover figure img { transform: scale(1.025); }
.k1-chapter-card figure > span { position: absolute; z-index: 1; right: 16px; bottom: 14px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--chapter-accent); font-size: .73rem; font-weight: 700; box-shadow: 0 4px 14px rgba(31,25,40,.12); }
.k1-chapter-copy { display: grid; grid-template-columns: 48px minmax(0, 1fr) 30px; gap: 14px; align-items: center; padding: 22px 24px 24px; }
.k1-chapter-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: color-mix(in srgb, var(--chapter-accent) 13%, white); font-size: 1.35rem; }
.k1-chapter-copy small { color: var(--chapter-accent); font-size: .7rem; font-weight: 700; }
.k1-chapter-copy h3 { margin: 2px 0 4px; color: var(--k1-ink); font-size: 1.3rem; }
.k1-chapter-copy p { color: var(--ink-soft); font-size: .84rem; line-height: 1.55; }
.k1-chapter-copy > i { color: var(--chapter-accent); font-size: 1.25rem; font-style: normal; font-weight: 800; transition: transform var(--transition); }
.k1-chapter-card:hover .k1-chapter-copy > i { transform: translateX(4px); }

.lesson-page-k1 { padding: 42px 0 78px; background: radial-gradient(circle at 10% 10%, rgba(99,201,232,.12), transparent 19%), linear-gradient(180deg, #fffaf1, #f6fbfb); }
.lesson-page-k1 .lesson-wrap { max-width: 980px; }
.lesson-page-k1 .lesson-head { padding: 22px 26px; border: 1px solid rgba(133,103,219,.12); border-radius: 24px; background: rgba(255,255,255,.75); box-shadow: 0 10px 28px rgba(64,54,79,.06); }
.lesson-page-k1 .lesson-head h1 { color: #40364f; font-size: clamp(2rem, 4.5vw, 3.15rem); }
.lesson-page-k1 .lesson-day-badge { background: #8266d4; color: #fff; }
.lesson-page-k1 .lesson-body { padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.k1-lesson-visual { position: relative; margin-bottom: 28px; overflow: hidden; border: 8px solid #fff; border-radius: 30px; background: #eaf6fa; box-shadow: 0 18px 42px rgba(64,54,79,.13); }
.k1-lesson-visual > img { width: 100%; max-height: 540px; aspect-ratio: 3 / 2; object-fit: cover; }
.k1-lesson-visual figcaption { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; align-items: center; gap: 11px; max-width: 420px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.45); border-radius: 17px; background: rgba(31,39,63,.78); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.16); backdrop-filter: blur(9px); }
.k1-lesson-visual figcaption > span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 12px; background: rgba(255,255,255,.14); font-size: 1.2rem; }
.k1-lesson-visual figcaption div { display: flex; flex-direction: column; }
.k1-lesson-visual figcaption small { color: #b9eef6; font-size: .67rem; }
.k1-lesson-visual figcaption strong { margin-top: 1px; font-family: var(--font-display); font-size: 1.08rem; }
.k1-lesson-paragraphs { display: grid; gap: 16px; }
.k1-lesson-card { --step-accent: #ef7297; padding: 24px 26px 26px; border: 2px solid color-mix(in srgb, var(--step-accent) 22%, white); border-radius: 23px; background: #fff; box-shadow: 0 10px 28px rgba(64,54,79,.07); }
.k1-lesson-card-2 { --step-accent: #4eaed4; }
.k1-lesson-card-3 { --step-accent: #36ad81; background: linear-gradient(145deg, #fff, #effcf7); }
.k1-lesson-card > header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; margin-bottom: 15px; }
.k1-lesson-card > header > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--step-accent) 13%, white); font-size: 1.15rem; }
.k1-lesson-card > header strong { color: var(--step-accent); font-family: var(--font-display); font-size: 1.08rem; }
.k1-lesson-card > header small { color: color-mix(in srgb, var(--step-accent) 46%, white); font-family: var(--font-display); font-size: .75rem; font-weight: 800; }
.lesson-page-k1 .k1-lesson-card .lesson-para { margin: 0; color: #4f4759; font-size: 1.13rem; line-height: 1.9; }
.lesson-page-k1 .lesson-toolbar { justify-content: space-between; margin: 0 0 18px; padding: 0 4px; }
.lesson-page-k1 .lesson-actions { padding: 22px; border: 1px solid rgba(64,54,79,.09); border-radius: 22px; background: rgba(255,255,255,.82); }

@media (max-width: 760px) {
  .k1-journey { padding: 58px 0 64px; }
  .k1-journey-heading { margin-bottom: 30px; }
  .k1-journey-heading > img { display: none; }
  .k1-chapter-grid { grid-template-columns: 1fr; gap: 18px; }
  .k1-chapter-card { border-radius: 23px; }
  .lesson-page-k1 { padding: 28px 0 56px; }
  .lesson-page-k1 .lesson-head { padding: 19px 20px; }
  .k1-lesson-visual { border-width: 5px; border-radius: 23px; }
  .k1-lesson-visual figcaption { right: 10px; bottom: 10px; left: 10px; }
}

@media (max-width: 520px) {
  .k1-journey-heading h2 { font-size: 2rem; }
  .k1-chapter-copy { grid-template-columns: 42px minmax(0, 1fr) 20px; gap: 11px; padding: 18px; }
  .k1-chapter-icon { width: 42px; height: 42px; }
  .k1-chapter-copy p { font-size: .78rem; }
  .lesson-page-k1 .lesson-crumbs { align-items: flex-start; gap: 10px; }
  .lesson-page-k1 .lesson-head h1 { font-size: 2rem; }
  .k1-lesson-visual > img { min-height: 250px; }
  .k1-lesson-visual figcaption { padding: 10px 12px; }
  .k1-lesson-card { padding: 20px 18px 22px; border-radius: 20px; }
  .lesson-page-k1 .k1-lesson-card .lesson-para { font-size: 1.02rem; line-height: 1.85; }
  .lesson-page-k1 .lesson-actions > .btn, .lesson-page-k1 .lesson-actions > form { width: 100%; }
  .lesson-page-k1 .lesson-actions form .btn { width: 100%; }
}

html[lang="th"] .k1-journey-heading h2,
html[lang="th"] .lesson-page-k1 .lesson-head h1 { line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .k1-chapter-card, .k1-chapter-card figure img { transition: none; }
  .k1-chapter-card:hover, .k1-chapter-card:hover figure img { transform: none; }
}