@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@600;700&display=swap");

:root {
  --cream: #fff6e6;
  --parchment: #f4e4c5;
  --paper: #fffaf0;
  --beige: #d8bd91;
  --red: #b94436;
  --orange: #dc7d34;
  --gold: #c89b3c;
  --sage: #8fa37a;
  --brown: #7b5c43;
  --ink: #3c2b20;
  --shadow: var(--ll-elev-3);
  --ll-page-max: 78rem;
  --ll-page-padding: clamp(1.35rem, 2.5vw, 2rem);
  --ll-page-padding-bottom: clamp(1.7rem, 3vw, 2.35rem);
  --ll-section-gap: clamp(1rem, 2vw, 1.35rem);
  --ll-card-padding: clamp(0.95rem, 1.8vw, 1.15rem);
  --ll-radius: var(--ll-r-12);
  --ll-radius-soft: var(--ll-r-12);
  --ll-border-soft: 1px solid rgba(123, 92, 67, 0.18);
  --ll-shadow-soft: var(--ll-elev-2);
  --ll-shadow-button: 0 0.18rem 0 rgba(104, 66, 42, 0.16);
  --ll-lined-paper: repeating-linear-gradient(0deg, transparent, transparent 36px, rgba(77, 116, 156, 0.1) 37px), var(--paper);
  --ll-card-paper: repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.08) 32px), var(--paper);
  --scrapbook-cloud: url("assets/scrapbook/cloud.png");
  --scrapbook-ribbon-vertical: url("assets/scrapbook/ribbon-vertical.png");
  --scrapbook-wide-lantern: url("assets/scrapbook/wide-lantern-decoration.png");
  --scrapbook-circle-pattern: url("assets/scrapbook/circle-pattern.png");
  --scrapbook-tag-right: url("assets/scrapbook/tag-right.png");
  --scrapbook-deck-card-paper: url("assets/scrapbook/deck-card-paper.png");
  --scrapbook-corner-page-opening: url("assets/scrapbook/corner-page-opening.png");
  /* CSS-generated washi tape (replaces the old raster tape images). Warm muted
     mustard-cream from the palette, flat/illustrated with only a whisper of
     grain, softly torn edges via clip-path, and a very soft brown shadow. */
  --washi-fill: rgba(214, 184, 101, 0.5);
  --washi-bg:
    repeating-linear-gradient(90deg, rgba(255, 252, 240, 0.12) 0 1px, transparent 1px 6px),
    rgba(214, 184, 101, 0.5);
  --washi-clip: polygon(2% 8%, 98% 1%, 97% 92%, 3% 100%, 0% 83%, 2% 66%, 0% 47%, 3% 27%);
  --washi-shadow: 0 2px 4px rgba(73, 53, 35, 0.08);
  --scrapbook-binder: url("assets/scrapbook/binder.png");
  --scrapbook-notebook: url("assets/scrapbook/notebook.png");
  --word-new: transparent;
  --word-new-hover: #d8c3a5;
  --word-needs-practice: #e8917f;
  --word-needs-practice-bg: rgba(232, 145, 127, 0.28);
  --word-needs-practice-selected-bg: rgba(232, 145, 127, 0.42);
  --word-learning: #f2b33d;
  --word-learning-bg: rgba(242, 179, 61, 0.32);
  --word-learning-selected-bg: rgba(242, 179, 61, 0.48);
  --word-known: #9ba15a;
  --word-underline-thickness: 3px;
  --word-known-bg: rgba(155, 161, 90, 0.2);
  --word-known-selected-bg: rgba(155, 161, 90, 0.34);
  --word-selected-bg: #fff3cf;
  --word-selected-border: rgba(91, 70, 54, 0.16);
  --ll-ink: #3c2b20;
  --ll-muted: #7f654d;
  --ll-coral: #bd483a;
  --ll-marigold: #f2b33d;
  --ll-olive: #8E965A; /* aligned to design-foundation palette (was #9ba15a; unused elsewhere) */
  --ll-paper: #fffaf0;
  --ll-paper-warm: #fff3dc;
  --ll-panel: rgba(255, 250, 240, 0.96);
  --ll-border: #E3D7C6; /* aligned to design-foundation palette (was rgba(123,92,67,.16); renders near-identically on cream) */
  --ll-shadow-panel: var(--ll-elev-3);
  --ll-shadow-card: var(--ll-elev-2);
  --ll-button-shadow: 0 3px 0 rgba(88, 58, 32, 0.18);

  /* ==== Design-system tokens (2026 overhaul) ==================== */
  /* Typography roles: warm editorial serif for headings, humanist
     sans for UI/body, Noto for Simplified Chinese + pinyin. */
  --ll-font-display: "Baloo 2", "Noto Sans SC", system-ui, sans-serif;
  --ll-font-sans: "Nunito", "Noto Sans SC", system-ui, "Segoe UI", sans-serif;
  --ll-font-zh: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* Type scale (desktop → mobile via clamp at point of use) */
  --ll-text-display: clamp(2.4rem, 4.4vw, 3.6rem);   /* marketing display */
  --ll-text-h1: clamp(2rem, 3.2vw, 2.75rem);          /* product page H1  */
  --ll-text-h2: clamp(1.5rem, 2.4vw, 1.95rem);
  --ll-text-h3: clamp(1.2rem, 1.8vw, 1.4rem);
  --ll-text-body: 1rem;
  --ll-text-meta: 0.85rem;                            /* never below 13px */
  /* ==== Elevation + radius: ONE scale each ======================
     Every other radius/shadow token below is an alias onto these, so there
     is never a choice to make about which scale to use. */

  /* Elevation — 4 steps, picked by how far the surface floats.
     0 hairline · 1 card · 2 raised panel · 3 overlay/modal.
     Pressed-button and sticker shadows are a separate family (0 blur) and
     accent-coloured glows stay bespoke; neither belongs on this ladder. */
  --ll-elev-0: 0 2px 4px rgba(88, 58, 32, 0.07);
  --ll-elev-1: 0 4px 14px rgba(88, 58, 32, 0.07);
  --ll-elev-2: 0 10px 26px rgba(88, 58, 32, 0.1);
  --ll-elev-3: 0 20px 48px rgba(88, 58, 32, 0.14);

  /* Radius — 4 chips · 8 controls · 12 buttons/inputs · 16 cards · 20 panels.
     Pills stay 999px and avatars stay 50%; those are shapes, not radii. */
  --ll-r-4: 4px;
  --ll-r-8: 8px;
  --ll-r-12: 12px;
  --ll-r-16: 16px;
  --ll-r-20: 20px;
  --ll-r-pill: 999px;
  --ll-r-sm: var(--ll-r-8);
  --ll-r-md: var(--ll-r-12);
  --ll-r-lg: var(--ll-r-16);
  /* Spacing — aliases onto the --ll-space-* scale below, which is the
     canonical one (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64). Same values as
     before, so nothing moves; there is now just one ladder, not two. */
  --ll-sp-1: var(--ll-space-2);
  --ll-sp-2: var(--ll-space-4);
  --ll-sp-3: var(--ll-space-5);
  --ll-sp-4: var(--ll-space-6);
  --ll-sp-6: var(--ll-space-7);
  /* Focus ring + motion */
  --ll-focus-ring: 0 0 0 3px rgba(185, 68, 54, 0.4);
  --ll-motion-fast: 150ms ease;
  --ll-motion-base: 220ms ease;

  /* ===============================================================
     DESIGN FOUNDATION — Pass 1 (pre-release consistency)
     Canonical, named tokens the whole learner site standardises on.
     Additive: existing rules keep working; later passes migrate
     components onto these names. Values are the agreed palette.
     =============================================================== */

  /* Surfaces & background */
  --ll-bg: #F7F1E5;
  --ll-surface: #FFFDF8;
  --ll-surface-soft: #FAF5EA;

  /* Text */
  --ll-text: #35271F;
  --ll-text-muted: #756454;
  --ll-text-soft: #998675;

  /* Terracotta (primary) */
  --ll-primary: #B6513E;
  --ll-primary-hover: #A74635;
  --ll-primary-soft: #F3DDD5;

  /* Olive accent (--ll-olive is set above to #8E965A) */
  --ll-olive-soft: #EEF0DF;

  /* Gold accent */
  --ll-gold: #D4AF55;
  --ll-gold-soft: #F5E7B6;

  /* Borders (--ll-border set above to #E3D7C6) */
  --ll-border-strong: #CFBEA7;

  /* Corner radii — sm chips/controls, md buttons/inputs, lg panels/heroes */
  --ll-radius-sm: var(--ll-r-8);
  --ll-radius-md: var(--ll-r-12);
  --ll-radius-lg: var(--ll-r-20);

  /* Shadows — borders do most separation; keep elevation restrained */
  --ll-shadow-sm: var(--ll-elev-0);
  --ll-shadow-md: var(--ll-elev-2);

  /* Spacing scale (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64) */
  --ll-space-1: 4px;
  --ll-space-2: 8px;
  --ll-space-3: 12px;
  --ll-space-4: 16px;
  --ll-space-5: 24px;
  --ll-space-6: 32px;
  --ll-space-7: 48px;
  --ll-space-8: 64px;

  /* Page widths + gutters */
  --ll-max-product: 1240px;   /* main product content */
  --ll-max-reading: 860px;    /* long-form / reading */
  --ll-max-form: 680px;       /* forms / narrow settings */
  --ll-gutter: 24px;          /* desktop horizontal gutter (min) */
  --ll-gutter-tablet: 20px;
  --ll-gutter-mobile: 16px;

  /* Accessible focus ring for form controls (soft primary) */
  --ll-focus-ring-soft: 0 0 0 3px rgba(182, 81, 62, 0.14);
}

/* Gutter responds to viewport; consumers can use var(--ll-gutter). */
@media (max-width: 1024px) { :root { --ll-gutter: 20px; } }
@media (max-width: 640px) { :root { --ll-gutter: 16px; } }

/* Manga Reader integrated layout */
.manga-shell .tool-page {
  width: 100%;
  max-width: 1800px;
}

.manga-reader-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  align-items: start;
}

.manga-reader-layout .manga-reader-panel {
  min-width: 0;
}

.manga-dictionary-panel {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 6rem);
  overflow: auto;
  padding: 0.9rem;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.08) 32px),
    rgba(255, 250, 240, 0.96);
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: var(--ll-r-20);
  box-shadow: var(--shadow);
}

.script-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin: 0.35rem 0 0.85rem;
  padding: 0.25rem;
  background: rgba(255, 242, 214, 0.72);
  border: 1px solid rgba(123, 92, 67, 0.14);
  border-radius: 999px;
}

.script-toggle button {
  min-height: 2rem;
  cursor: pointer;
  color: var(--brown);
  font-weight: 800;
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.script-toggle button.is-selected {
  color: #fffaf0;
  background: var(--red);
  box-shadow: 0 6px 14px rgba(185, 61, 44, 0.18);
}

/* The manga reader's dictionary sentence now reuses the shared flowing story-reader
   renderer (.story-text / .story-word); the old raised "token board" tile styles
   (.sentence-token-board / .sentence-token / .token-pinyin / .token-hanzi /
   .sentence-punctuation) were removed in the Chinese-rendering consistency pass. */

.known-legend {
  margin: 0.35rem 0 0.8rem;
  color: #8067b7;
  font-size: 0.78rem;
  font-weight: 800;
}

.dictionary-placeholder {
  margin: 0.35rem 0 0.9rem;
  padding: 0.75rem;
  color: var(--brown);
  background: rgba(255, 242, 214, 0.62);
  border: 1px solid rgba(123, 92, 67, 0.14);
  border-radius: var(--ll-r-12);
  line-height: 1.45;
}

.dictionary-placeholder p {
  margin: 0;
}

.dictionary-placeholder dl {
  display: grid;
  gap: 0.45rem;
  margin: 0.55rem 0 0;
}

.dictionary-placeholder dt {
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dictionary-placeholder dd {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

.mine-status {
  margin: 0.6rem 0 0;
  color: var(--sage);
  font-weight: 800;
}

.dictionary-edit-tools {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.dictionary-edit-tools summary {
  cursor: pointer;
  color: var(--red);
  font-weight: 800;
}

.dictionary-edit-tools textarea {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem;
  color: var(--ink);
  background: rgba(255, 246, 230, 0.82);
  border: 1px solid rgba(123, 92, 67, 0.22);
  border-radius: var(--ll-r-12);
}

.manga-deck-picker {
  display: grid;
  gap: 0.55rem;
  margin: 0.8rem 0;
}

.deck-picker-button {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.75rem;
  cursor: pointer;
  color: var(--ink);
  text-align: left;
  background: rgba(255, 246, 230, 0.82);
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-12);
}

.deck-picker-button span {
  color: var(--brown);
  font-size: 0.82rem;
  font-weight: 800;
}

.manga-stage {
  min-height: min(76vh, 58rem);
}

#manga-canvas {
  width: auto;
  max-width: none;
}

@media (max-width: 980px) {
  .manga-reader-layout {
    grid-template-columns: 1fr;
  }

  .manga-dictionary-panel {
    position: sticky;
    bottom: 0;
    top: auto;
    z-index: 20;
    max-height: 52vh;
    border-radius: 18px 18px 0 0;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  background:
    radial-gradient(circle at 10% 5%, rgba(220, 125, 52, 0.18), transparent 24rem),
    linear-gradient(90deg, rgba(123, 92, 67, 0.05) 1px, transparent 1px),
    linear-gradient(var(--cream), #f2ddbb);
  background-size: auto, 42px 42px, auto;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: var(--cream);
  animation: lift 1.25s ease 0.8s forwards;
}

@keyframes lift {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem clamp(1rem, 3vw, 2.5rem);
  background: rgba(255, 246, 230, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(123, 92, 67, 0.16);
  box-shadow: var(--ll-elev-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 13rem;
}

.brand strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 1.1rem;
}

.brand small {
  display: block;
  color: rgba(60, 43, 32, 0.7);
  font-size: 0.72rem;
}


.paper-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.42rem;
  max-width: 58rem;
}

.paper-tabs a {
  position: relative;
  padding: 0.62rem 0.9rem;
  color: var(--ink);
  background: rgba(255, 250, 240, 0.86);
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(123, 92, 67, 0.08);
  font-weight: 700;
  font-size: 0.88rem;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.paper-tabs a:nth-child(2n) {
  background: rgba(246, 232, 201, 0.82);
}

.paper-tabs a:nth-child(3n) {
  background: rgba(233, 236, 215, 0.8);
}

.paper-tabs a:hover,
.paper-tabs a:focus-visible {
  background: #ffe8c4;
  box-shadow: var(--ll-elev-1);
  transform: translateY(-1px);
  outline: none;
}

/* The Admin tab is styled with the redesigned header rules further down, next to
   the other `.site-header .paper-tabs a` styles — putting it here would lose to
   them on specificity. Search: admin-nav-link. */

.auth-widget {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 12rem;
}

.auth-status {
  color: rgba(60, 43, 32, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.auth-button {
  min-height: 2.35rem;
  padding: 0.52rem 0.82rem;
  color: #fffaf0;
  background: var(--red);
  border-color: rgba(123, 53, 40, 0.18);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(123, 53, 40, 0.16);
  font-size: 0.78rem;
}

.glow-balance-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 2.35rem;
  padding: 0.52rem 0.86rem;
  color: #7b4e19;
  background: rgba(255, 231, 159, 0.82);
  border: 1px solid rgba(200, 155, 60, 0.42);
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(123, 92, 67, 0.1);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.glow-balance-link::after {
  display: inline-grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  color: #8b5419;
  background: rgba(255, 250, 232, 0.72);
  border: 1px solid rgba(171, 122, 42, 0.28);
  border-radius: 999px;
  box-shadow: inset 0 -1px 0 rgba(123, 92, 67, 0.08);
  content: "?";
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
}

.glow-balance-link::before {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 30;
  width: min(16rem, 72vw);
  padding: 0.68rem 0.78rem;
  color: var(--brown);
  background: rgba(255, 250, 239, 0.98);
  border: 1px solid rgba(133, 91, 54, 0.18);
  border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-2);
  content: attr(data-glow-tooltip);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateY(-0.2rem);
  transition: opacity 160ms ease, transform 160ms ease;
  white-space: normal;
}

.glow-balance-link:hover,
.glow-balance-link:focus-visible {
  background: rgba(255, 222, 125, 0.92);
  box-shadow: var(--ll-elev-1);
  outline: none;
  transform: translateY(-1px);
}

.glow-balance-link:hover::before,
.glow-balance-link:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}

.auth-button.quiet {
  color: var(--ink);
  background: rgba(255, 250, 240, 0.86);
  box-shadow: 0 2px 0 rgba(123, 92, 67, 0.08);
}

.profile-auth-line {
  margin-top: 0.45rem;
  color: rgba(83, 61, 43, 0.76);
  font-size: 0.92rem;
  font-weight: 800;
}

.name-prompt-modal {
  width: min(92vw, 28rem);
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.name-prompt-modal::backdrop {
  background: rgba(60, 43, 32, 0.28);
  backdrop-filter: blur(4px);
}

.name-prompt-card {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.35rem, 4vw, 1.8rem);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 32px, rgba(143, 112, 72, 0.08) 33px),
    var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.2);
  border-radius: var(--ll-r-20);
  box-shadow: var(--ll-elev-3);
}

.name-prompt-card::before {
  content: "";
  position: absolute;
  top: -0.65rem;
  left: 50%;
  width: 8.5rem;
  height: 1.35rem;
  background: rgba(244, 207, 116, 0.52);
  border: 1px solid rgba(201, 155, 60, 0.18);
  border-radius: var(--ll-r-4);
  transform: translateX(-50%) rotate(-2deg);
}

.name-prompt-card h2 {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: clamp(1.55rem, 4vw, 2rem);
  line-height: 1.05;
}

.name-prompt-card p {
  margin: 0;
  color: rgba(83, 61, 43, 0.78);
  line-height: 1.55;
}

.name-prompt-card label {
  display: grid;
  gap: 0.4rem;
  color: var(--brown);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.name-prompt-card input {
  width: 100%;
  min-height: 2.8rem;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  color: var(--ink);
  background: rgba(255, 250, 240, 0.9);
  border: 1px solid rgba(123, 92, 67, 0.24);
  border-radius: var(--ll-r-12);
  box-shadow: inset 0 2px 0 rgba(123, 92, 67, 0.04);
  font: inherit;
}

.name-prompt-card input:focus {
  border-color: rgba(185, 68, 54, 0.55);
  outline: 3px solid rgba(185, 68, 54, 0.12);
}

.name-prompt-error {
  color: var(--red) !important;
  font-size: 0.85rem;
  font-weight: 800;
}

.paper-tabs a.is-active {
  background: #f7dc83;
  border-color: rgba(185, 68, 54, 0.28);
  box-shadow: 0 4px 0 rgba(185, 68, 54, 0.16);
}

/* Active state must not rely on colour alone (a11y). */
.paper-tabs a.is-active::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.26rem;
  height: 2px;
  border-radius: var(--ll-r-4);
  background: rgba(185, 68, 54, 0.55);
}

.paper-tabs a:focus-visible,
.section-tab:focus-visible,
.button:focus-visible {
  outline: 2px solid rgba(185, 68, 54, 0.65);
  outline-offset: 2px;
}

/* ---- Section navigation: notebook tabs below the header ---- */
.section-navigation {
  position: sticky;
  /* Stack under the sticky site header. glow-nav.js publishes the header's
     measured height as --ll-header-h (0 on pages that hide the header), so the
     tabs stay visible instead of sliding beneath it while scrolling. */
  top: var(--ll-header-h, 0px);
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-end;
  padding: 0.65rem clamp(1rem, 3vw, 2.5rem) 0;
  background: rgba(255, 248, 235, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(123, 92, 67, 0.16);
}

.section-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.9rem;
  color: var(--ink);
  background: rgba(255, 250, 240, 0.72);
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transform: translateY(1px);
  transition: background 160ms ease, transform 160ms ease;
}

.section-tab:nth-child(2n) {
  background: rgba(246, 232, 201, 0.7);
}

.section-tab:hover,
.section-tab:focus-visible {
  background: #ffe8c4;
  transform: translateY(0);
  outline-offset: 2px;
}

.section-tab.is-active {
  background: #f7dc83;
  border-color: rgba(185, 68, 54, 0.28);
  transform: translateY(0);
}

.section-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: -1px;
  height: 2px;
  background: rgba(185, 68, 54, 0.6);
}

.section-tab__badge {
  display: inline-flex;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.32rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(185, 68, 54, 0.92);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 720px) {
  /* Wrap the section tabs onto multiple rows so every tab is visible without a
     horizontal swipe. The base .section-navigation already wraps; keep that on
     phones instead of the old single scrolling row (which pushed the active tab
     half off-screen). */
  .section-navigation {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
  .section-tab {
    flex: 0 1 auto;
    white-space: nowrap;
  }
}

.brand-mark {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(123, 92, 67, 0.18));
}

.brand-mark-nav {
  width: 12.25rem;
  height: auto;
  max-height: 6.65rem;
}

/* Splash lockup: lantern icon + the wordmark as text in the SAME font as the
   header brand (.brand-wordmark), so the two match. */
.loading-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  animation: logoPulse 1.4s ease-in-out infinite alternate;
}
.loading-icon {
  width: min(9.5rem, 42vw);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(123, 92, 67, 0.18));
}
.loading-wordmark {
  font-family: var(--ll-font-sans);
  font-weight: 800;
  color: var(--brown, #5b4433);
  letter-spacing: 0.005em;
  font-size: clamp(1.19rem, 3.85vw, 1.82rem); /* 30% smaller than the header wordmark size (2026-09-27) */
  line-height: 1;
}

@keyframes logoPulse {
  from {
    transform: scale(0.98) rotate(-1deg);
    filter: drop-shadow(0 12px 18px rgba(185, 68, 54, 0.18));
  }

  to {
    transform: scale(1.02) rotate(1deg);
    filter: drop-shadow(0 18px 28px rgba(220, 125, 52, 0.34));
  }
}

.hero {
  position: relative;
  min-height: clamp(39rem, calc(100vh - 5rem), 48rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: clamp(1.2rem, 3vw, 2.3rem) clamp(1rem, 5vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(123, 92, 67, 0.18);
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}

.paper-grain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 24%, rgba(220, 125, 52, 0.16), transparent 20rem),
    linear-gradient(rgba(255, 250, 240, 0.52), rgba(255, 246, 230, 0.7)),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.14) 32px);
}

.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(18rem, 0.92fr) minmax(20rem, 0.78fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  width: min(78rem, 100%);
  margin: 0 auto;
  padding-bottom: 6.5rem;
}

.hero-copy {
  position: relative;
  width: min(39rem, 100%);
  max-width: 39rem;
  padding: clamp(1.25rem, 3.2vw, 2.35rem);
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(185, 68, 54, 0.1) 0 0.4rem, transparent 0.4rem),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.1) 32px),
    rgba(255, 250, 240, 0.96);
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: 12px 18px 13px 20px;
  box-shadow: 0 28px 65px rgba(79, 51, 28, 0.2), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transform: rotate(-0.7deg);
}

.hero-copy::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  z-index: -1;
  pointer-events: none;
  border: 1px dashed rgba(185, 68, 54, 0.14);
  border-radius: 10px 16px 11px 18px;
}

.hero-tape {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  width: 9rem;
  height: 2rem;
  margin-left: -4.5rem;
  transform: rotate(1.5deg);
  opacity: 0.85;
  background: var(--washi-bg);
  clip-path: var(--washi-clip);
  box-shadow: var(--washi-shadow);
}

/* Existing lantern + "Little Lantern" artwork, integrated so it reads as if it
   were scanned and printed onto the notebook page — not a raised sticker.
   The wrapper owns the size/placement; the image itself is graded and blended. */
.notebook-art {
  position: relative;
  display: inline-block;
  width: min(20rem, 62vw);
  margin: -0.25rem 0 0.35rem;
  transform: rotate(1.5deg);
  isolation: isolate;
}

.hero-lantern {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  transform: none;
  /* Faded, warm tones + no glow/shadow. `multiply` lets the cream paper (and
     the cream card behind the small logo) affect the colours naturally so the
     artwork sits in the paper instead of on top of it. */
  filter: saturate(0.82) contrast(0.94) brightness(1.03);
  mix-blend-mode: multiply;
  opacity: 0.9;
  box-shadow: none;
}

/* Extremely subtle paper grain, masked to the artwork silhouette so it only
   falls on the ink, never on the transparent area around it. */
.notebook-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(120, 92, 60, 0.5) 3px),
    repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(120, 92, 60, 0.4) 4px);
  opacity: 0.05;
  mix-blend-mode: multiply;
  -webkit-mask: url("assets/hero-lantern-illustration-notext.png") center / contain no-repeat;
  mask: url("assets/hero-lantern-illustration-notext.png") center / contain no-repeat;
}

.hero-copy h1 {
  max-width: 10ch;
  font-size: var(--ll-text-display, clamp(2.4rem, 4.4vw, 3.6rem));
}

.hero-copy .handwritten {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.05;
}

h1 {
  max-width: 16ch;
  font-size: var(--ll-text-display, clamp(2.4rem, 4.4vw, 3.6rem));
  letter-spacing: 0;
}

h2 {
  font-size: var(--ll-text-h2, clamp(1.5rem, 2.4vw, 1.95rem));
}

h3 {
  font-size: var(--ll-text-h3, 1.35rem);
}

.handwritten {
  margin: 1rem 0 1.4rem;
  color: var(--red);
  font-family: var(--ll-font-display, Georgia, serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: 0.58rem 0.88rem;
  border: 1px solid rgba(123, 92, 67, 0.22);
  border-radius: var(--ll-radius);
  font-weight: 800;
  box-shadow: var(--ll-shadow-button);
}

.button.primary {
  color: #fffaf0;
  background: var(--red);
}

.button.primary:hover,
.button.primary:focus-visible {
  background: #c84f3c;
  box-shadow: 0 0.28rem 0 rgba(104, 66, 42, 0.18), 0 0.85rem 1.6rem rgba(185, 68, 54, 0.18);
  transform: translateY(-1px);
  outline: none;
}

.hero-cta {
  min-height: 3.35rem;
  padding: 0.95rem 1.28rem;
  border-color: rgba(123, 92, 67, 0.54);
  font-size: 1rem;
  gap: 0.5rem;
}

.hero-cta span {
  font-size: 1.3rem;
  line-height: 1;
}

.hero-scrapbook {
  position: relative;
  display: grid;
  gap: 1rem;
  min-height: 24rem;
  padding: clamp(0.4rem, 2vw, 1rem);
}

.hero-scrapbook::before {
  content: "";
  position: absolute;
  inset: 1.2rem 0.4rem 0.4rem;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 240, 0.78), transparent 14rem),
    url("assets/postcards/postcard-5.png") right bottom / min(26rem, 80%) auto no-repeat;
  opacity: 0.68;
  filter: saturate(1.06);
}

.hero-feature-card {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.35rem 0.8rem;
  width: min(18.5rem, 100%);
  padding: 1rem 1.05rem;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 45%),
    var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-12);
  box-shadow: var(--ll-elev-2);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.hero-feature-card::before {
  content: "";
  position: absolute;
  top: -0.65rem;
  left: 2rem;
  width: 5.8rem;
  height: 1.45rem;
  opacity: 0.85;
  background: var(--washi-bg);
  clip-path: var(--washi-clip);
  box-shadow: var(--washi-shadow);
  transform: rotate(-2deg);
}

.hero-feature-card:hover,
.hero-feature-card:focus-visible {
  transform: rotate(0deg) translateY(-0.18rem);
  box-shadow: var(--ll-elev-3);
  outline: none;
}

.hero-feature-card strong {
  align-self: end;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
}

.hero-feature-card small {
  grid-column: 2;
  color: rgba(60, 43, 32, 0.72);
  font-weight: 700;
  line-height: 1.35;
}

.mini-paper-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--red);
  background: #fff2c8;
  border: 1px solid rgba(185, 68, 54, 0.22);
  border-radius: 50%;
  font-weight: 800;
  box-shadow: 0 5px 0 rgba(123, 92, 67, 0.08);
}

/* Shared hand-drawn icon artwork (assets/icons/icon-*.png). One rule for every
   icon: the circular pale backgrounds above stay as they are and centre it via
   place-items, so this only sizes the artwork. `contain` keeps each icon's own
   proportions — never stretched. Sizes are set per context below so the icons
   sit comfortably inside their circle without touching the edge. */
.ll-icon {
  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
/* Large navigation cards: ~40px of artwork inside the 3rem (48px) circle. */
.mini-paper-icon .ll-icon {
  width: 2.5rem;
  height: 2.5rem;
}
/* Small feature strip: ~32px of artwork inside the 2.75rem (44px) circle. */
.feature-avatar .ll-icon {
  width: 2rem;
  height: 2rem;
}

.hero-card-flashcards {
  justify-self: start;
  margin-top: 1.2rem;
  transform: rotate(1.2deg);
}

.hero-card-practice {
  justify-self: end;
  transform: rotate(-1.4deg);
}

.hero-card-vocab {
  justify-self: center;
  transform: rotate(0.8deg);
}

.hero-feature-strip {
  grid-column: 1 / -1;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  padding: 0.72rem;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.07) 32px),
    rgba(255, 250, 240, 0.92);
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-20);
  box-shadow: var(--ll-elev-3);
}

.hero-feature-strip div {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.7rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
}

.hero-feature-strip div + div {
  border-left: 1px dashed rgba(123, 92, 67, 0.22);
}

.feature-avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--red);
  background: #f7dc83;
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: none;
  opacity: 1;
}

.hero-feature-strip p {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  line-height: 1.25;
}

.hero-feature-strip strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.hero-feature-strip small {
  color: rgba(60, 43, 32, 0.74);
  font-size: 0.78rem;
}

.button.secondary {
  background: #f8e9c7;
}

button.button {
  cursor: pointer;
  font: inherit;
}

.sticky-note {
  position: absolute;
  right: clamp(1rem, 5vw, 5rem);
  bottom: 3rem;
  width: min(18rem, calc(100% - 2rem));
  padding: 1.15rem;
  background: #f7dc83;
  box-shadow: var(--shadow);
  transform: rotate(2.5deg);
}

.sticky-note strong,
.sticky-note span {
  display: block;
}

.sticky-note span {
  margin-top: 0.45rem;
  line-height: 1.5;
}

.section {
  padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1rem, 5vw, 5rem);
}

.section-heading {
  max-width: 52rem;
  margin-bottom: 2rem;
}

.section-heading.compact {
  margin-bottom: 1.4rem;
}

.stamp {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 0.8rem;
  padding: 0.35rem 0.65rem;
  color: var(--red);
  border: 2px solid currentColor;
  border-radius: var(--ll-r-4);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  transform: rotate(-2deg);
}

.scrapbook-spread {
  background: rgba(255, 250, 240, 0.55);
}

.lesson-grid,
.exercise-grid,
.journal-grid,
.universe-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.scrapbook-card,
.exercise-card,
.journal-stat,
.quiz-page,
.quiz-card,
.quiz-complete,
.universe-grid article {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  box-shadow: var(--shadow);
}

.scrapbook-card {
  min-height: 18rem;
  padding: 2.25rem 1.3rem 1.25rem;
}

.exercise-card {
  display: grid;
  min-height: 19rem;
  align-content: start;
  gap: 0.65rem;
  padding: 2.85rem 1.25rem 1.25rem 1.7rem;
  transition: transform 180ms ease, box-shadow 180ms ease;
  overflow: hidden;
}

.exercise-card:hover,
.exercise-card:focus-visible {
  transform: rotate(0deg) translateY(-0.25rem);
  box-shadow: var(--ll-elev-3);
  outline: none;
}

.exercise-card .button {
  width: fit-content;
  margin-top: 0.5rem;
}

.exercise-card p {
  line-height: 1.5;
}

.refreshed-exercise-grid .exercise-card {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(255, 188, 190, 0.32), transparent 5rem),
    linear-gradient(180deg, #fffdf7, #fff5e6);
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: var(--ll-r-4);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 18px 36px rgba(79, 51, 28, 0.16);
}

.refreshed-exercise-grid .exercise-card::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(185, 68, 54, 0.12);
  background:
    linear-gradient(90deg, rgba(185, 68, 54, 0.12) 0 0.55rem, transparent 0.55rem),
    linear-gradient(rgba(123, 92, 67, 0.08) 1px, transparent 1px);
  background-size: auto, 100% 2.15rem;
}

.refreshed-exercise-grid .exercise-card::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  bottom: 1.05rem;
  width: 5.3rem;
  height: 4.4rem;
  opacity: 0.95;
  pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(123, 92, 67, 0.12));
}

.refreshed-exercise-grid .exercise-card:nth-child(1)::after {
  background:
    radial-gradient(circle at 46% 36%, #fff8ec 0 0.62rem, transparent 0.64rem),
    radial-gradient(circle at 64% 34%, #fff8ec 0 0.58rem, transparent 0.6rem),
    radial-gradient(circle at 50% 43%, #4a3227 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 68% 41%, #4a3227 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 49% 55%, #eaa0a1 0 0.16rem, transparent 0.18rem),
    radial-gradient(circle at 67% 53%, #eaa0a1 0 0.16rem, transparent 0.18rem),
    linear-gradient(#b98248 0 0) 18% 62% / 68% 25% no-repeat,
    linear-gradient(#d4a36a 0 0) 14% 43% / 76% 32% no-repeat;
  border-radius: 0 0 48% 48%;
}

.refreshed-exercise-grid .exercise-card:nth-child(2)::after {
  background:
    radial-gradient(circle at 45% 38%, #fff 0 1.15rem, transparent 1.18rem),
    radial-gradient(circle at 32% 28%, #2f2925 0 0.48rem, transparent 0.5rem),
    radial-gradient(circle at 58% 28%, #2f2925 0 0.48rem, transparent 0.5rem),
    radial-gradient(circle at 39% 40%, #2f2925 0 0.22rem, transparent 0.24rem),
    radial-gradient(circle at 54% 40%, #2f2925 0 0.22rem, transparent 0.24rem),
    radial-gradient(circle at 46% 52%, #eaa0a1 0 0.16rem, transparent 0.18rem),
    radial-gradient(circle at 42% 58%, #2f2925 0 0.07rem, transparent 0.09rem),
    linear-gradient(#f6a7aa 0 0) 20% 76% / 58% 0.62rem no-repeat;
}

.refreshed-exercise-grid .exercise-card:nth-child(3)::after {
  background:
    radial-gradient(circle at 32% 38%, #bfe0bd 0 1.24rem, transparent 1.27rem),
    radial-gradient(circle at 66% 42%, #f4c9ca 0 1.08rem, transparent 1.11rem),
    radial-gradient(circle at 26% 36%, #4a3227 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 42% 36%, #4a3227 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 58% 40%, #4a3227 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 74% 40%, #4a3227 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 34% 48%, #eaa0a1 0 0.14rem, transparent 0.16rem),
    radial-gradient(circle at 67% 52%, #eaa0a1 0 0.14rem, transparent 0.16rem);
}

.refreshed-exercise-grid .exercise-card:nth-child(4)::after {
  background:
    radial-gradient(circle at 50% 45%, #f07d4f 0 1.35rem, transparent 1.38rem),
    radial-gradient(circle at 50% 45%, #ffe8a9 0 0.56rem, transparent 0.6rem),
    linear-gradient(#7b5c43 0 0) 32% 12% / 36% 0.42rem no-repeat,
    linear-gradient(#7b5c43 0 0) 42% 74% / 16% 0.82rem no-repeat,
    linear-gradient(90deg, transparent 46%, rgba(123, 92, 67, 0.55) 47% 50%, transparent 51%) 0 0 / 100% 100% no-repeat;
}

.refreshed-exercise-grid .exercise-card:nth-child(5)::after {
  background:
    linear-gradient(#ffffff 0 0) 22% 18% / 56% 58% no-repeat,
    linear-gradient(#f29d61 0 0) 27% 29% / 46% 34% no-repeat,
    linear-gradient(#fff3d8 0 0) 30% 34% / 40% 10% no-repeat,
    radial-gradient(circle at 44% 50%, #b94436 0 0.13rem, transparent 0.15rem),
    linear-gradient(#4a3227 0 0) 40% 10% / 30% 0.12rem no-repeat;
  transform: rotate(4deg);
}

.refreshed-exercise-grid .exercise-card:nth-child(6)::after {
  background:
    linear-gradient(#f6a7aa 0 0) 18% 22% / 64% 0.8rem no-repeat,
    linear-gradient(#f6a7aa 0 0) 18% 68% / 64% 0.8rem no-repeat,
    radial-gradient(circle at 50% 48%, #ffffff 0 1.3rem, transparent 1.34rem),
    radial-gradient(circle at 36% 35%, #2f2925 0 0.52rem, transparent 0.54rem),
    radial-gradient(circle at 64% 35%, #2f2925 0 0.52rem, transparent 0.54rem),
    radial-gradient(circle at 42% 48%, #2f2925 0 0.2rem, transparent 0.22rem),
    radial-gradient(circle at 58% 48%, #2f2925 0 0.2rem, transparent 0.22rem),
    radial-gradient(circle at 50% 58%, #eaa0a1 0 0.15rem, transparent 0.17rem);
}

.refreshed-exercise-grid .exercise-card:nth-child(7)::after {
  background:
    radial-gradient(circle at 24% 24%, #f6a7aa 0 0.22rem, transparent 0.24rem),
    radial-gradient(circle at 74% 30%, #f6a7aa 0 0.18rem, transparent 0.2rem),
    radial-gradient(circle at 58% 74%, #f6a7aa 0 0.2rem, transparent 0.22rem),
    linear-gradient(#7b5c43 0 0) 34% 22% / 0.16rem 2.9rem no-repeat,
    linear-gradient(135deg, transparent 42%, #b94436 43% 57%, transparent 58%) 42% 26% / 2.8rem 2.8rem no-repeat,
    radial-gradient(circle at 62% 40%, #f7dc83 0 0.8rem, transparent 0.84rem);
}

.refreshed-exercise-grid .exercise-card h3 {
  max-width: 9.5rem;
}

.refreshed-exercise-grid .exercise-card p {
  max-width: 13.5rem;
}

.refreshed-exercise-grid .exercise-card .button,
.refreshed-exercise-grid .exercise-source-picker,
.refreshed-exercise-grid .coming-soon {
  max-width: calc(100% - 5.25rem);
}

.refreshed-exercise-grid .exercise-card {
  background-color: #fffaf0;
  background-position: center, right bottom;
  background-size: 100% 100%, auto 100%;
  background-repeat: no-repeat;
}

.refreshed-exercise-grid .exercise-card::before {
  inset: 0.7rem;
  border: 1px solid rgba(185, 68, 54, 0.11);
  background: repeating-linear-gradient(0deg, transparent, transparent 2.15rem, rgba(123, 92, 67, 0.08) 2.2rem);
  background-size: 100% 2.2rem;
}

.refreshed-exercise-grid .exercise-card::after {
  content: none;
}

.refreshed-exercise-grid .exercise-card:nth-child(1) {
  background-image: linear-gradient(90deg, rgba(255, 250, 240, 0.96) 0 44%, rgba(255, 250, 240, 0.54) 70%, rgba(255, 250, 240, 0.04)), url("assets/postcards/postcard-1.png");
}

.refreshed-exercise-grid .exercise-card:nth-child(2) {
  background-image: linear-gradient(90deg, rgba(255, 250, 240, 0.96) 0 44%, rgba(255, 250, 240, 0.54) 70%, rgba(255, 250, 240, 0.04)), url("assets/postcards/postcard-2.png");
}

.refreshed-exercise-grid .exercise-card:nth-child(3) {
  background-image: linear-gradient(90deg, rgba(255, 250, 240, 0.96) 0 44%, rgba(255, 250, 240, 0.54) 70%, rgba(255, 250, 240, 0.04)), url("assets/postcards/postcard-3.png");
}

.refreshed-exercise-grid .exercise-card:nth-child(4) {
  background-image: linear-gradient(90deg, rgba(255, 250, 240, 0.96) 0 44%, rgba(255, 250, 240, 0.54) 70%, rgba(255, 250, 240, 0.04)), url("assets/postcards/postcard-4.png");
}

.refreshed-exercise-grid .exercise-card:nth-child(5) {
  background-image: linear-gradient(90deg, rgba(255, 250, 240, 0.96) 0 44%, rgba(255, 250, 240, 0.54) 70%, rgba(255, 250, 240, 0.04)), url("assets/postcards/postcard-5.png");
}

.refreshed-exercise-grid .exercise-card:nth-child(6) {
  background-image: linear-gradient(90deg, rgba(255, 250, 240, 0.96) 0 44%, rgba(255, 250, 240, 0.54) 70%, rgba(255, 250, 240, 0.04)), url("assets/postcards/postcard-6.png");
}

.refreshed-exercise-grid .exercise-card:nth-child(7) {
  background-image: linear-gradient(90deg, rgba(255, 250, 240, 0.96) 0 44%, rgba(255, 250, 240, 0.54) 70%, rgba(255, 250, 240, 0.04)), url("assets/postcards/postcard-7.png");
}

.refreshed-exercise-grid .exercise-card .washi-tape {
  top: -0.78rem;
  width: 8.7rem;
  height: 1.65rem;
}

.tilt-left {
  transform: rotate(-1.4deg);
}

.tilt-right {
  transform: rotate(1.2deg);
}

.washi-tape {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: clamp(96px, 30vw, 116px);
  height: 22px;
  opacity: 0.85;
  transform: translateX(-50%) rotate(var(--tape-rotation, -0.5deg));
  background: var(--washi-bg);
  clip-path: var(--washi-clip);
  box-shadow: var(--washi-shadow);
  border: 0;
  pointer-events: none;
}

/* Colour variants kept for existing markup, but all share the one mustard-cream
   washi look now (no raster images). */
.tape-red,
.tape-gold,
.tape-sage,
.tape-floral {
  background: var(--washi-bg);
}

/* Deterministic per-position tilt so tapes in a grid don't look copy-pasted. */
.library-card:nth-child(3n + 1) .washi-tape,
.deck-card:nth-child(3n + 1) .washi-tape,
.course-folder:nth-child(3n + 1) .washi-tape,
.refreshed-exercise-grid .exercise-card:nth-child(3n + 1) .washi-tape {
  --tape-rotation: -0.8deg;
}

.library-card:nth-child(3n + 2) .washi-tape,
.deck-card:nth-child(3n + 2) .washi-tape,
.course-folder:nth-child(3n + 2) .washi-tape,
.refreshed-exercise-grid .exercise-card:nth-child(3n + 2) .washi-tape {
  --tape-rotation: 0.5deg;
}

.library-card:nth-child(3n) .washi-tape,
.deck-card:nth-child(3n) .washi-tape,
.course-folder:nth-child(3n) .washi-tape,
.refreshed-exercise-grid .exercise-card:nth-child(3n) .washi-tape {
  --tape-rotation: -0.3deg;
}

/* Context size overrides keep the CSS tape (no raster background, torn edges). */
.refreshed-exercise-grid .washi-tape,
.practice-tabs-card .washi-tape,
.course-folder .washi-tape,
.deck-card .washi-tape {
  width: clamp(96px, 30vw, 120px);
  height: 22px;
  opacity: 0.85;
  border: 0;
}

.refreshed-exercise-grid .exercise-card .washi-tape {
  top: -0.7rem;
  z-index: 2;
  width: clamp(96px, 30vw, 120px);
  height: 22px;
  opacity: 0.85;
  pointer-events: none;
}

.lesson-icon,
.lantern-badge {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 1rem;
  color: #fffaf0;
  background: var(--red);
  border-radius: 999px;
  font-family: Georgia, serif;
  font-size: 1.45rem;
  font-weight: 800;
}

.lesson-icon.sage,
.lantern-badge.sage {
  background: var(--sage);
}

.lesson-icon.orange {
  background: var(--orange);
}

.eyebrow {
  margin: 0 0 0.4rem;
  color: rgba(60, 43, 32, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.scrapbook-card p:not(.eyebrow) {
  line-height: 1.55;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.3rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(123, 92, 67, 0.3);
  color: var(--brown);
  font-size: 0.85rem;
  font-weight: 800;
}

.practice-spread,
.pinyin-shell,
.quiz-shell,
.tool-shell,
.profile-shell {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 36px, rgba(77, 116, 156, 0.1) 37px),
    linear-gradient(180deg, #fff6e6, #f1dfc0);
}

.exercise-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.refreshed-exercise-grid {
  align-items: stretch;
}

.practice-tabs-card {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 20%, rgba(246, 167, 170, 0.28), transparent 5rem),
    radial-gradient(circle at 78% 88%, rgba(143, 163, 122, 0.18), transparent 6rem),
    linear-gradient(180deg, #fffdf7, #fff5e6);
  border: 1px solid rgba(123, 92, 67, 0.16);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.92) inset,
    var(--shadow);
}

.practice-tabs-card::before,
.practice-tabs-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.practice-tabs-card::before {
  top: -0.55rem;
  left: 50%;
  width: 9rem;
  height: 1.35rem;
  transform: translateX(-50%) rotate(-1.4deg);
  opacity: 0.74;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.55), rgba(255, 241, 190, 0.34), rgba(255,255,255,0.22)),
    repeating-linear-gradient(90deg, rgba(123, 92, 67, 0.08) 0 1px, transparent 1px 12px);
  border: 1px solid rgba(255,255,255,0.42);
  clip-path: polygon(0 18%, 5% 7%, 10% 18%, 15% 7%, 20% 18%, 25% 7%, 30% 18%, 35% 7%, 40% 18%, 45% 7%, 50% 18%, 55% 7%, 60% 18%, 65% 7%, 70% 18%, 75% 7%, 80% 18%, 85% 7%, 90% 18%, 95% 7%, 100% 18%, 100% 82%, 95% 93%, 90% 82%, 85% 93%, 80% 82%, 75% 93%, 70% 82%, 65% 93%, 60% 82%, 55% 93%, 50% 82%, 45% 93%, 40% 82%, 35% 93%, 30% 82%, 25% 93%, 20% 82%, 15% 93%, 10% 82%, 5% 93%, 0 82%);
}

.practice-tabs-card::after {
  right: 1.25rem;
  bottom: 1.1rem;
  width: 7.4rem;
  height: 5.2rem;
  opacity: 0.38;
  background:
    radial-gradient(circle at 42% 42%, #ffffff 0 1.1rem, transparent 1.14rem),
    radial-gradient(circle at 30% 31%, #2f2925 0 0.42rem, transparent 0.44rem),
    radial-gradient(circle at 54% 31%, #2f2925 0 0.42rem, transparent 0.44rem),
    radial-gradient(circle at 36% 45%, #2f2925 0 0.16rem, transparent 0.18rem),
    radial-gradient(circle at 50% 45%, #2f2925 0 0.16rem, transparent 0.18rem),
    linear-gradient(#f6a7aa 0 0) 20% 76% / 50% 0.55rem no-repeat;
}

.practice-tab-list,
.deck-create-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.practice-tab,
.deck-create-tab,
.exercise-source-picker button {
  cursor: pointer;
  padding: 0.55rem 0.75rem;
  color: var(--brown);
  background: #f8e9c7;
  border: 1px solid rgba(123, 92, 67, 0.25);
  border-radius: var(--ll-r-8);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
}

.practice-tab.is-active,
.deck-create-tab.is-active,
.exercise-source-picker button.is-selected {
  color: #fffaf0;
  background: var(--red);
}

.practice-tab-panel,
.deck-create-panel {
  display: none;
}

.practice-tab-panel.is-active,
.deck-create-panel.is-active {
  display: block;
}

.practice-tab-panel p {
  max-width: 48rem;
  line-height: 1.55;
}

.exercise-source-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.latest-grid,
.recommendation-grid,
.source-step {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.today-practice {
  margin-bottom: 1.85rem;
}

.today-practice-heading {
  margin-bottom: 1rem;
  max-width: min(100%, 46rem);
  overflow-wrap: anywhere;
}

.today-practice-heading h2 {
  font-size: var(--ll-text-h2, clamp(1.5rem, 2.4vw, 1.95rem));
}

.today-practice-heading .handwritten {
  margin-bottom: 0;
  max-width: 46rem;
  color: var(--red);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.28;
}

.practice-divider {
  display: grid;
  place-items: center;
  margin: clamp(1.4rem, 4vw, 2.4rem) 0 clamp(1.5rem, 4vw, 2.7rem);
}

.practice-divider span {
  display: block;
  width: min(42rem, 82vw);
  height: 1.25rem;
  opacity: 0.86;
  background:
    linear-gradient(90deg, transparent, rgba(185, 68, 54, 0.16) 8%, rgba(220, 125, 52, 0.2) 50%, rgba(185, 68, 54, 0.16) 92%, transparent);
  transform: rotate(-0.4deg);
}

.practice-exercises-heading {
  margin-bottom: 1.35rem;
}

.practice-exercises-heading h2 {
  font-size: var(--ll-text-h2, clamp(1.5rem, 2.4vw, 1.95rem));
}

.practice-exercises-heading .handwritten {
  margin-bottom: 0;
}

.today-practice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.home-duo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.start-here-cta {
  justify-self: start;
  margin-top: 0.35rem;
}

.today-section .glow-home-preview {
  max-width: none;
  margin: 0 0 1.25rem;
}

.latest-tile,
.source-tile,
.recommendation-tile,
.get-started-card {
  position: relative;
  padding: 1.15rem;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.08) 32px),
    var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.2);
  border-radius: var(--ll-r-8);
  box-shadow: var(--shadow);
}

.latest-tile,
.source-tile,
.recommendation-tile {
  display: grid;
  min-height: 10rem;
  align-content: start;
  gap: 0.7rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.source-tile {
  min-height: 13rem;
  justify-items: center;
  align-content: center;
  gap: 0.55rem;
  padding: 1.25rem 1rem;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 42%),
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(143, 112, 72, 0.055) 29px),
    #fff8ea;
  border: 1px solid rgba(123, 92, 67, 0.15);
  border-radius: var(--ll-r-20);
  box-shadow: 0 14px 30px rgba(79, 51, 28, 0.11), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.source-tile:hover,
.source-tile:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), transparent 42%),
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(143, 112, 72, 0.065) 29px),
    #fff1d8;
  border-color: rgba(185, 68, 54, 0.22);
  box-shadow: 0 18px 36px rgba(79, 51, 28, 0.15), 0 1px 0 rgba(255, 255, 255, 0.92) inset;
  transform: translateY(-2px) rotate(-0.4deg);
  outline: none;
}

.source-icon {
  width: 6.2rem;
  height: 5.8rem;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(123, 92, 67, 0.12));
}

.today-tile {
  min-height: 13rem;
  overflow: hidden;
  padding: 1.2rem 1rem 1rem 1.15rem;
}

.today-tile strong,
.today-tile small,
.today-tile .tile-cta,
.today-tile .latest-stats,
.today-tile .deck-preview,
.today-tile .latest-empty-message,
.today-tile .latest-item-preview,
.today-tile .chengyu-demo {
  position: relative;
  z-index: 1;
}

.today-tile strong {
  color: var(--ink);
}

.today-tile small {
  font-size: 0.96rem;
}

.daily-line-icon {
  position: relative;
  z-index: 0;
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: end;
  width: 4.25rem;
  height: 4.25rem;
  color: var(--red);
  opacity: 0.86;
}

.daily-line-icon::before,
.daily-line-icon::after {
  content: "";
  position: absolute;
  border-color: currentColor;
}

.icon-review::before {
  inset: 0.45rem 0.2rem 0.55rem;
  border: 0.18rem solid currentColor;
  border-radius: var(--ll-r-4);
  transform: skewY(-5deg);
  box-shadow: -1.45rem 0.22rem 0 -0.18rem rgba(185, 68, 54, 0.26);
}

.icon-review::after {
  left: 2.05rem;
  top: 0.72rem;
  bottom: 0.72rem;
  border-left: 0.16rem solid currentColor;
  box-shadow:
    -1rem 0.85rem 0 -0.04rem currentColor,
    0.92rem 0.85rem 0 -0.04rem currentColor;
}

.icon-latest::before {
  inset: 0.35rem 0.9rem 0.6rem 0.55rem;
  border: 0.18rem solid currentColor;
  border-radius: var(--ll-r-4);
  background:
    linear-gradient(135deg, transparent 0 72%, rgba(220, 125, 52, 0.28) 73%);
}

.icon-latest::after {
  right: 0.25rem;
  top: 0.15rem;
  width: 1.55rem;
  height: 1.55rem;
  background:
    linear-gradient(currentColor 0 0) 50% 0 / 0.16rem 100% no-repeat,
    linear-gradient(currentColor 0 0) 0 50% / 100% 0.16rem no-repeat;
  transform: rotate(45deg);
  border: 0;
}

.icon-chengyu::before {
  inset: 1rem 0.3rem 0.95rem;
  border-top: 0.18rem solid currentColor;
  border-bottom: 0.18rem solid currentColor;
  border-radius: 999px;
  box-shadow:
    inset 0.7rem 0 0 rgba(220, 125, 52, 0.2),
    inset -0.7rem 0 0 rgba(220, 125, 52, 0.2);
}

.icon-chengyu::after {
  right: 0.2rem;
  bottom: 0.2rem;
  width: 2rem;
  height: 0.18rem;
  background: currentColor;
  border: 0;
  transform: rotate(-38deg);
  box-shadow: -0.15rem -0.45rem 0 -0.02rem currentColor;
}

.tile-cta {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  margin-top: 0.25rem;
  padding: 0.55rem 0.8rem;
  color: #fffaf0;
  background: var(--red);
  border: 2px solid rgba(123, 92, 67, 0.52);
  border-radius: var(--ll-r-8);
  box-shadow: 3px 3px 0 rgba(123, 92, 67, 0.16);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.chengyu-tile {
  min-height: 20rem;
}

.chengyu-demo {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.chengyu-demo div {
  display: grid;
  gap: 0.1rem;
}

.chengyu-demo dt {
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.chengyu-demo dd {
  margin: 0;
  color: rgba(60, 43, 32, 0.83);
}

.chengyu-demo .chengyu-main dd:nth-of-type(1) {
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 1.45rem;
  font-weight: 800;
}

.chengyu-demo .chengyu-main dd:nth-of-type(2) {
  color: var(--ink);
  font-weight: 800;
}

.today-practice-grid .today-tile {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  min-height: 23rem;
  gap: 0.65rem;
  padding: 1.25rem;
}

.today-practice-grid .daily-line-icon {
  grid-row: 1 / span 4;
  align-self: start;
  margin-top: 1.2rem;
}

.today-practice-grid .tile-cta {
  align-self: end;
  margin-top: 0.75rem;
}

.latest-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.25rem;
}

.latest-stats div {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem;
  background: rgba(248, 233, 199, 0.72);
  border: 1px dashed rgba(123, 92, 67, 0.25);
  border-radius: var(--ll-r-8);
}

.latest-stats span,
.deck-preview,
.latest-empty-message,
.latest-item-preview p {
  color: rgba(60, 43, 32, 0.72);
  font-size: 0.88rem;
  line-height: 1.4;
}

.latest-stats b {
  color: var(--red);
  font-family: Georgia, serif;
  font-size: 2rem;
  line-height: 1;
}

.deck-preview,
.latest-empty-message,
.latest-item-preview {
  position: relative;
  z-index: 1;
}

.deck-preview {
  display: grid;
  gap: 0;
  align-self: start;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(123, 92, 67, 0.14);
}

.deck-preview span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.15rem;
  border-bottom: 1px solid rgba(123, 92, 67, 0.12);
}

.deck-preview p {
  margin: 0 0 0.15rem;
  color: rgba(123, 92, 67, 0.8);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.deck-preview b {
  color: var(--ink);
  font-size: 0.9rem;
}

.deck-preview em {
  color: var(--red);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 800;
}

.latest-empty-message {
  margin: 0.2rem 0 0;
  padding: 0.7rem;
  background: rgba(233, 236, 215, 0.72);
  border-radius: var(--ll-r-8);
  font-weight: 800;
}

.latest-item-preview {
  display: grid;
  grid-template-columns: 7.3rem minmax(0, 1fr);
  gap: 0.75rem;
  align-self: start;
  padding: 0.1rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.latest-item-preview .exercise-type {
  grid-column: 1 / -1;
  width: fit-content;
  font-size: 0.68rem;
}

.latest-item-preview img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: right bottom;
  border: 1px solid rgba(123, 92, 67, 0.22);
  border-radius: var(--ll-r-8);
  box-shadow: 3px 3px 0 rgba(123, 92, 67, 0.12);
}

.latest-item-preview h3 {
  margin: 0 0 0.12rem;
  font-size: 1.55rem;
}

.latest-item-preview p {
  margin: 0;
}

.latest-item-preview .library-title-en {
  margin-bottom: 0.9rem;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 800;
}

.today-practice-grid .chengyu-tile {
  min-height: 23rem;
}

.today-practice-grid .chengyu-demo {
  gap: 0.36rem;
  font-size: 0.82rem;
  line-height: 1.28;
}

.today-practice-grid .chengyu-demo div {
  gap: 0.04rem;
}

.today-practice-grid .chengyu-demo dt {
  font-size: 0.62rem;
}

.today-practice-grid .chengyu-demo .chengyu-main dd:nth-of-type(1) {
  font-size: 1.35rem;
}

.latest-tile strong,
.source-tile strong,
.recommendation-tile strong {
  font-family: Georgia, serif;
  font-size: 1.35rem;
}

.latest-tile small,
.source-tile small,
.recommendation-tile small,
.get-started-card small {
  color: rgba(60, 43, 32, 0.7);
  line-height: 1.45;
}

.source-modal::backdrop,
.recommendation-modal::backdrop,
.deck-modal::backdrop {
  background: rgba(60, 43, 32, 0.26);
  backdrop-filter: blur(4px);
}

.source-modal,
.recommendation-modal {
  width: min(48rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  background: transparent;
}

.source-modal-card {
  position: relative;
  padding: clamp(1.65rem, 4vw, 2.55rem);
  background:
    radial-gradient(circle at 90% 8%, rgba(220, 125, 52, 0.1), transparent 12rem),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.08) 32px),
    linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(255, 246, 230, 0.98));
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: var(--ll-r-20);
  box-shadow: 0 26px 70px rgba(79, 51, 28, 0.18), 0 1px 0 rgba(255, 255, 255, 0.86) inset;
}

.source-modal-card h2,
.deck-modal-card h2 {
  color: var(--ink);
  font-size: clamp(1.75rem, 3.4vw, 2.55rem);
  font-weight: 500;
}

.source-modal-card .stamp,
.deck-modal-card .stamp {
  background: rgba(255, 250, 240, 0.72);
  border-color: rgba(185, 68, 54, 0.82);
  box-shadow: 2px 2px 0 rgba(123, 92, 67, 0.08);
}

.source-step {
  display: none;
  margin: 1.35rem 0 0;
  gap: 0.9rem;
}

.source-step.is-active {
  display: grid;
}

.hsk-level-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hsk-level-grid .source-tile {
  min-height: 5.2rem;
  place-items: center;
  font-weight: 800;
}

.modal-close {
  /* Plain ✕ in the corner — no beige circle, no border, glyph centred. */
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(123, 92, 67, 0.86);
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.modal-close:hover,
.modal-close:focus-visible {
  background: transparent;
  color: var(--ink);
  outline: none;
}

.source-back {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.7rem;
}

.modal-intro {
  max-width: 38rem;
  color: rgba(60, 43, 32, 0.76);
  line-height: 1.55;
}

.get-started-card {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr) minmax(10rem, 16rem) auto;
  gap: 1rem;
  align-items: end;
}

.get-started-card label,
.get-started-card fieldset {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  color: var(--brown);
  font-weight: 800;
}

.get-started-card fieldset {
  padding: 0;
  border: 0;
}

.get-started-card legend {
  margin-bottom: 0.45rem;
}

.get-started-card select {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid rgba(123, 92, 67, 0.32);
  border-radius: var(--ll-r-8);
  font: inherit;
}

.focus-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.focus-options label {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.45rem 0.7rem;
  background: #f8e9c7;
  border: 1px dashed rgba(123, 92, 67, 0.3);
  border-radius: var(--ll-r-8);
}

.panda-peek-placeholder {
  position: absolute;
  right: 4.2rem;
  top: -2.1rem;
  width: 5.4rem;
  height: 3rem;
  background:
    radial-gradient(circle at 28% 20%, #2f2925 0 0.42rem, transparent 0.44rem),
    radial-gradient(circle at 72% 20%, #2f2925 0 0.42rem, transparent 0.44rem),
    radial-gradient(circle at 50% 65%, #fff 0 2.4rem, transparent 2.45rem);
}

.review-page-card {
  min-height: 16rem;
}

.exercise-type,
.coming-soon {
  display: inline-flex;
  width: fit-content;
  padding: 0.35rem 0.55rem;
  color: var(--brown);
  background: #f7dc83;
  border: 1px dashed rgba(123, 92, 67, 0.38);
  border-radius: var(--ll-r-4);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.coming-soon {
  margin-top: 0.5rem;
  color: rgba(60, 43, 32, 0.7);
  background: #e9ecd7;
}

.journal-board {
  background: #efe4cc;
}

.learning-map-section,
.progression-section,
.badge-shell,
.vocabulary-shell,
.reader-shell,
.course-shell,
.about-shell {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 36px, rgba(77, 116, 156, 0.1) 37px),
    linear-gradient(180deg, #fff6e6, #f1dfc0);
}

.learning-map,
.progression-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.map-unit,
.progression-card,
.achievement-badge,
.vocab-card,
.reader-preview {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  box-shadow: var(--shadow);
}

.reader-controls,
.flashcard-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem) auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1.25rem;
}

.reader-controls label,
.manual-card-form {
  display: grid;
  gap: 0.5rem;
  color: var(--brown);
  font-weight: 800;
}

.reader-controls textarea,
.manual-card-form input {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid rgba(123, 92, 67, 0.38);
  border-radius: var(--ll-r-8);
  font: inherit;
}

.reader-controls textarea {
  min-height: 8rem;
  resize: vertical;
}

.compact-file-drop {
  min-height: 8rem;
}

.reader-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
  gap: 1rem;
}

.reading-paper {
  min-height: 22rem;
  padding: 1.35rem;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  box-shadow: var(--shadow);
  font-family: Georgia, serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.9;
}

.reader-word {
  margin: 0 0.08rem;
  cursor: pointer;
  border: 0;
  border-radius: var(--ll-r-4);
  font: inherit;
}

.reader-word.status-fresh,
.reader-word.status-new {
  color: #6f4bb5;
  background: rgba(111, 75, 181, 0.12);
}

.reader-word.status-learning {
  color: #486d36;
  background: rgba(143, 163, 122, 0.22);
}

.reader-word.status-known,
.reader-word.status-mastered {
  color: var(--ink);
  background: transparent;
}

.word-status-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.18rem 0.52rem;
  color: var(--brown);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.8);
}

.word-status-badge.status-not-known,
.story-word.status-not-known {
  border-bottom-color: color-mix(in srgb, var(--word-needs-practice) 68%, transparent);
  text-decoration: underline dotted color-mix(in srgb, var(--word-needs-practice) 62%, transparent);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.16em;
}

.word-status-badge.status-not-known {
  color: #974233;
  background: color-mix(in srgb, var(--word-needs-practice) 20%, transparent);
}

.word-status-badge.status-new,
.word-status-badge.status-unseen {
  color: #7b5c43;
  background: rgba(255, 250, 240, 0.92);
  border-color: rgba(123, 92, 67, 0.22);
}

.word-status-badge.status-learning,
.story-word.status-learning {
  border-bottom-color: color-mix(in srgb, var(--word-learning) 66%, transparent);
}

/* Narration word-by-word highlight (karaoke), matched to the podcast reader. */
.story-word.is-active {
  color: #7a241c;
  background: rgba(247, 220, 131, 0.82);
  border-radius: var(--ll-r-4);
  box-shadow: 0 0.16rem 0 rgba(185, 68, 54, 0.18);
}

.word-status-badge.status-learning {
  color: #7a5520;
  background: color-mix(in srgb, var(--word-learning) 28%, transparent);
}

.word-status-badge.status-known,
.story-word.status-known {
  border-bottom-color: color-mix(in srgb, var(--word-known) 42%, transparent);
}

.word-status-badge.status-known {
  color: #4c663d;
  background: color-mix(in srgb, var(--word-known) 22%, transparent);
}

.deck-word-stats,
.word-knowledge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.review-rate-not-known {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--word-needs-practice) 46%, rgba(123, 92, 67, 0.2));
  background: color-mix(in srgb, var(--word-needs-practice) 32%, var(--paper));
  box-shadow: 0 0.2rem 0 rgba(232, 145, 127, 0.18);
}

.review-rate-learning {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--word-learning) 52%, rgba(123, 92, 67, 0.2));
  background: color-mix(in srgb, var(--word-learning) 42%, var(--paper));
  box-shadow: 0 0.2rem 0 rgba(242, 179, 61, 0.18);
}

.review-rate-known {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--word-known) 48%, rgba(123, 92, 67, 0.2));
  background: color-mix(in srgb, var(--word-known) 38%, var(--paper));
  box-shadow: 0 0.2rem 0 rgba(155, 161, 90, 0.16);
}

.review-rate-not-known:hover,
.review-rate-not-known.is-active-status {
  background: color-mix(in srgb, var(--word-needs-practice) 48%, var(--paper));
}

.review-rate-learning:hover,
.review-rate-learning.is-active-status {
  background: color-mix(in srgb, var(--word-learning) 56%, var(--paper));
}

.review-rate-known:hover,
.review-rate-known.is-active-status {
  background: color-mix(in srgb, var(--word-known) 52%, var(--paper));
}

.reader-popup {
  align-self: start;
  padding: 1rem;
  background: #fff2c8;
  border: 1px dashed rgba(123, 92, 67, 0.46);
  box-shadow: var(--shadow);
}

.popup-hanzi {
  cursor: pointer;
  color: var(--red);
  background: transparent;
  border: 0;
  font-family: Georgia, serif;
  font-size: 3rem;
  font-weight: 800;
}

.popup-actions,
.deck-actions,
.review-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.manga-shell {
  background: rgba(255, 250, 240, 0.52);
}

.manga-page {
  display: grid;
  gap: 1.25rem;
}

.manga-page h1 {
  max-width: none;
  color: var(--ink);
  font-size: var(--ll-text-h1, clamp(2rem, 3.2vw, 2.75rem));
}

.manga-upload-panel,
.manga-reader-panel {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.45rem);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.07) 32px),
    rgba(255, 250, 240, 0.92);
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: var(--ll-r-20);
  box-shadow: var(--ll-elev-3);
}

.manga-upload-panel {
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem);
  align-items: center;
}

.manga-upload-panel h2 {
  font-size: clamp(1.6rem, 3vw, 2.45rem);
}

.manga-upload-panel p,
.manga-upload-panel small {
  color: rgba(60, 43, 32, 0.72);
  line-height: 1.5;
}

.manga-file-drop {
  min-height: 7rem;
}

.manga-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem;
  background: rgba(248, 233, 199, 0.58);
  border: 1px solid rgba(123, 92, 67, 0.12);
  border-radius: var(--ll-r-16);
}

.manga-toolbar #manga-page-status {
  min-width: 9.5rem;
  color: var(--brown);
  font-weight: 800;
}

.manga-toolbar #manga-zoom-label {
  color: var(--red);
}

.manga-toggle {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  margin-left: auto;
  color: var(--brown);
  font-weight: 800;
}

.manga-stage {
  display: grid;
  place-items: center;
  min-height: 32rem;
  overflow: auto;
  padding: clamp(0.8rem, 2vw, 1.25rem);
  background:
    linear-gradient(45deg, rgba(123, 92, 67, 0.045) 25%, transparent 25% 75%, rgba(123, 92, 67, 0.045) 75%),
    linear-gradient(45deg, rgba(123, 92, 67, 0.045) 25%, transparent 25% 75%, rgba(123, 92, 67, 0.045) 75%),
    #f7ead2;
  background-position: 0 0, 14px 14px, 0 0;
  background-size: 28px 28px, 28px 28px, auto;
  border: 1px solid rgba(123, 92, 67, 0.14);
  border-radius: var(--ll-r-16);
}

.manga-empty {
  color: rgba(60, 43, 32, 0.72);
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
}

.manga-page-frame {
  position: relative;
  width: fit-content;
  max-width: 100%;
  background: #fffaf0;
  box-shadow: var(--ll-elev-3);
}

#manga-canvas {
  display: block;
  width: min(100%, 72rem);
  max-width: 100%;
  height: auto;
}

#manga-pdf-embed {
  display: block;
  width: 100%;
  height: min(82vh, 62rem);
  min-height: 42rem;
  border: 0;
}

.manga-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --- Continuous vertical-scroll reader -----------------------------------
   Every page is stacked top-to-bottom in one column. Each page frame fits the
   container width (canvas width:100%; height:auto) and carries its own absolutely
   positioned overlay of percent-placed tap hit-boxes, so word taps stay aligned at
   any width. The .manga-stage scrolls (or, in full screen, the whole page scrolls). */
.manga-continuous {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.1rem);
  width: 100%;
  /* The stage is a centering grid; a stack taller than the stage would clip its top
     (and become unscrollable) if centered — pin it to the top and let it scroll. */
  align-self: start;
  justify-self: center;
}

.manga-continuous-frame {
  position: relative;
  width: min(100%, 72rem);
  max-width: 100%;
  background: #fffaf0;
  box-shadow: var(--ll-elev-3);
}

.manga-continuous-canvas {
  display: block;
  width: 100%;
  height: auto; /* intrinsic canvas w/h set in JS gives each frame its aspect ratio */
}

.manga-ocr-box {
  position: absolute;
  border: 2px solid rgba(120, 100, 255, 0.35);
  background: rgba(120, 100, 255, 0.08);
  border-radius: var(--ll-r-8);
  cursor: pointer;
  pointer-events: auto;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.manga-ocr-box:hover,
.manga-ocr-box:focus-visible {
  background: rgba(120, 100, 255, 0.18);
  border-color: rgba(120, 100, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(120, 100, 255, 0.12);
  outline: none;
}

.manga-dictionary-popup {
  position: absolute;
  z-index: 30;
  width: min(20rem, calc(100vw - 2rem));
  padding: 1rem;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.08) 32px),
    #fffaf0;
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-20);
  box-shadow: var(--ll-elev-3);
}

.manga-dictionary-popup h2 {
  max-width: none;
  font-size: 2rem;
}

.manga-popup-pinyin {
  margin: 0.2rem 0 0.8rem;
  color: var(--red);
  font-weight: 800;
}

.manga-dictionary-popup dl {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1rem;
}

.manga-dictionary-popup div {
  display: grid;
  gap: 0.12rem;
}

.manga-dictionary-popup dt {
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.manga-dictionary-popup dd {
  margin: 0;
  color: rgba(60, 43, 32, 0.78);
  line-height: 1.35;
}

.manual-card-form,
.review-panel {
  padding: 1rem;
  background: #fff2c8;
  border: 1px dashed rgba(123, 92, 67, 0.42);
  box-shadow: 5px 5px 0 rgba(123, 92, 67, 0.1);
}

.review-card {
  display: grid;
  gap: 0.5rem;
  min-height: 12rem;
  padding: 1.25rem;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  box-shadow: var(--shadow);
}

.review-card strong {
  font-family: Georgia, serif;
  font-size: 2.5rem;
}

.review-page-card {
  min-height: clamp(17rem, 35vw, 24rem);
  margin-top: 1.2rem;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 12% 14%, rgba(242, 179, 61, 0.11), transparent 8rem),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.08) 32px),
    linear-gradient(180deg, rgba(255, 253, 247, 0.96), rgba(255, 246, 230, 0.96));
  border-radius: var(--ll-r-20);
  box-shadow: var(--ll-elev-3);
}

.review-card-front,
.review-card-back,
.review-empty-state {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}

.review-card-front small,
.review-card-back small {
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-card-front strong {
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
}

.review-card-back strong {
  font-size: clamp(3rem, 8vw, 5.75rem);
  line-height: 1;
}

.review-pinyin {
  color: var(--red);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 800;
}

.review-card-back p {
  max-width: 34rem;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.2rem, 2.6vw, 1.75rem);
  font-weight: 800;
}

.review-example {
  display: grid;
  gap: 0.18rem;
  max-width: 34rem;
  color: rgba(60, 43, 32, 0.72);
  font-size: 0.95rem;
  line-height: 1.45;
}

.review-show-answer {
  display: block;
  width: fit-content;
  margin: 1rem auto 0;
}

.review-buttons {
  justify-content: center;
}

.review-buttons[hidden],
.review-empty-actions[hidden],
.review-show-answer[hidden] {
  display: none;
}

/* Multi-format review */
.review-card-shell {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  width: 100%;
}

.review-task-line {
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-task-chip {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: rgba(77, 116, 156, 0.14);
  color: var(--ink);
}

.review-task-prompt {
  margin: 0;
  color: rgba(60, 43, 32, 0.7);
  font-size: 0.95rem;
  font-weight: 700;
}

.review-meaning {
  font-family: Georgia, serif;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.2;
  text-align: center;
  max-width: 34rem;
}

.review-choices {
  display: grid;
  gap: 0.5rem;
  width: min(22rem, 100%);
  margin-top: 0.5rem;
}

.review-choice {
  font-family: Georgia, serif;
  font-size: 1.4rem;
  font-weight: 800;
}

.review-choice.is-correct {
  background: #2f7d4f;
  border-color: #2f7d4f;
  color: #fff;
}

.review-choice.is-wrong {
  background: #b4452f;
  border-color: #b4452f;
  color: #fff;
}

.review-choice-result {
  margin: 0;
  font-weight: 800;
  color: var(--red);
}

.review-write-target {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  border: 2px dashed rgba(77, 116, 156, 0.35);
  border-radius: var(--ll-r-12);
  background: var(--paper);
}

.review-write-progress {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(60, 43, 32, 0.6);
}

.review-write-score {
  margin: 0;
  font-weight: 800;
  color: var(--red);
}

.review-write-fallback {
  max-width: 18rem;
  text-align: center;
  color: rgba(60, 43, 32, 0.72);
}

.review-reveal {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.review-reveal[hidden] {
  display: none;
}

.review-settings {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.85rem;
  background: var(--paper);
  border: 1px solid rgba(143, 112, 72, 0.2);
  border-radius: var(--ll-r-12);
  font-size: 0.9rem;
}

.review-settings > summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--ink);
}

.review-settings-grid {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.review-setting {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 700;
}

.review-setting-select {
  gap: 0.6rem;
}

/* Learn tabs + Write Hanzi practice */
.learn-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.25rem 0 1.25rem;
}

.learn-tab {
  padding: 0.45rem 1rem;
  border: 1px solid rgba(123, 92, 67, 0.2);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.learn-tab.is-active {
  background: var(--gold);
  border-color: transparent;
}

.write-hanzi-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.write-hanzi-set {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  color: var(--brown);
  font-size: 0.9rem;
}

.write-hanzi-set select {
  border-radius: var(--ll-r-8);
  border: 1px solid rgba(123, 92, 67, 0.3);
  padding: 0.25rem 0.5rem;
  background: var(--paper);
  color: var(--ink);
}

.write-hanzi-progress {
  font-weight: 800;
  color: var(--red);
}

.write-hanzi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.write-hanzi-prompt {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  text-align: center;
}

.write-hanzi-pinyin {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
}

.write-hanzi-meaning {
  color: var(--brown);
  font-size: 1rem;
  max-width: 26rem;
}

.write-hanzi-grid-wrap {
  position: relative;
}

.write-hanzi-grid {
  width: 280px;
  height: 280px;
  border: 1px solid rgba(123, 92, 67, 0.25);
  border-radius: var(--ll-r-16);
  background:
    linear-gradient(rgba(143, 112, 72, 0.18) 1px, transparent 1px) 0 50% / 100% 50%,
    linear-gradient(90deg, rgba(143, 112, 72, 0.18) 1px, transparent 1px) 50% 0 / 50% 100%,
    var(--paper);
}

.write-hanzi-fallback {
  max-width: 18rem;
  margin: 0 auto;
  padding: 1.5rem 0.75rem;
  text-align: center;
  color: var(--brown);
}

.write-hanzi-tick {
  position: absolute;
  top: 8px;
  right: 12px;
  color: var(--sage);
  font-size: 1.6rem;
  font-weight: 800;
}

.write-hanzi-status {
  min-height: 1.3rem;
  margin: 0;
  font-weight: 800;
  color: var(--brown);
}

.write-hanzi-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.write-hanzi-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(123, 92, 67, 0.2);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.3rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.write-hanzi-icon:hover {
  background: var(--cream);
}

.write-hanzi-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.write-hanzi-complete {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

.write-hanzi-complete-title {
  font-size: 1.6rem;
}

.review-buttons .button {
  min-width: 6rem;
  min-height: 2.75rem;
  color: var(--ink);
  border: 1px solid rgba(123, 92, 67, 0.2);
  box-shadow: var(--ll-shadow-button);
}

.review-rate-again,
.review-rate-not-known {
  background: color-mix(in srgb, var(--word-needs-practice) 44%, var(--paper));
}

.review-rate-hard {
  background: linear-gradient(135deg, color-mix(in srgb, var(--word-needs-practice) 32%, var(--paper)), color-mix(in srgb, var(--word-learning) 34%, var(--paper)));
}

.review-rate-good,
.review-rate-known {
  background: color-mix(in srgb, var(--word-known) 44%, var(--paper));
}

.review-rate-easy {
  background: linear-gradient(135deg, #fff9e8, color-mix(in srgb, var(--word-known) 22%, var(--paper)));
}

.course-grid,
.teacher-model-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.course-card,
.teacher-card {
  position: relative;
  padding: 1rem;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  box-shadow: var(--shadow);
}

.teacher-card {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.course-label {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0.75rem;
  padding: 0.32rem 0.55rem;
  color: var(--brown);
  background: #f7dc83;
  border: 1px dashed rgba(123, 92, 67, 0.4);
  border-radius: var(--ll-r-4);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.course-label.premium {
  color: #fffaf0;
  background: var(--red);
}

.course-label.future {
  background: #e9ecd7;
}

.course-page,
.course-detail-page {
  position: relative;
  overflow: visible;
}

.course-hero {
  display: grid;
  grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  margin-bottom: 2rem;
}

.course-level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.35rem);
}

.course-folder {
  display: grid;
  min-height: 17rem;
  align-content: start;
  gap: 0.75rem;
  padding: 2.25rem 1.25rem 1.2rem;
  border-radius: 4px 4px 8px 8px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.course-folder::before {
  content: "";
  position: absolute;
  top: -0.65rem;
  left: 1.1rem;
  width: 7.2rem;
  height: 1.2rem;
  background: inherit;
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.course-folder:nth-child(2n) {
  transform: rotate(0.8deg);
}

.course-folder:nth-child(2n + 1) {
  transform: rotate(-0.7deg);
}

.active-course:hover,
.active-course:focus-visible {
  transform: rotate(0deg) translateY(-0.25rem);
  box-shadow: var(--ll-elev-3);
  outline: none;
}

.locked-course {
  color: rgba(60, 43, 32, 0.68);
  background:
    repeating-linear-gradient(-8deg, rgba(143, 163, 122, 0.1), rgba(143, 163, 122, 0.1) 8px, transparent 8px, transparent 18px),
    var(--paper);
}

.course-notebook-icon {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.8rem;
  color: #fffaf0;
  background: var(--red);
  border: 2px solid rgba(123, 92, 67, 0.22);
  border-radius: var(--ll-r-4);
  box-shadow: 5px 5px 0 rgba(123, 92, 67, 0.12);
  font-family: Georgia, serif;
  font-size: 1.75rem;
  font-weight: 800;
}

.locked-course .course-notebook-icon {
  background: var(--sage);
}

.course-folder p {
  margin: 0;
  line-height: 1.55;
}

.course-folder small {
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px dashed rgba(123, 92, 67, 0.3);
  color: var(--brown);
  font-weight: 800;
}

.back-link {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 1rem;
  color: var(--brown);
  font-weight: 800;
}

.course-note {
  display: grid;
  gap: 0.25rem;
  max-width: 36rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #fff2c8;
  border: 1px dashed rgba(123, 92, 67, 0.42);
  box-shadow: 5px 5px 0 rgba(123, 92, 67, 0.1);
}

.chapter-stack {
  display: grid;
  gap: 0.85rem;
}

.chapter-accordion {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.2);
  box-shadow: var(--ll-elev-2);
}

.chapter-accordion:nth-child(3n + 1) {
  transform: rotate(-0.35deg);
}

.chapter-accordion:nth-child(3n + 2) {
  transform: rotate(0.35deg);
}

.chapter-accordion summary {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 4.8rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
}

.chapter-accordion summary::-webkit-details-marker {
  display: none;
}

.chapter-number,
.chapter-toggle {
  color: var(--brown);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.chapter-accordion summary strong {
  font-family: Georgia, serif;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
}

.chapter-toggle {
  padding: 0.35rem 0.55rem;
  background: #f7dc83;
  border: 1px dashed rgba(123, 92, 67, 0.4);
  border-radius: var(--ll-r-4);
}

.chapter-accordion[open] .chapter-toggle {
  color: #fffaf0;
  background: var(--red);
}

.chapter-accordion[open] .chapter-toggle::before {
  content: "Close";
  font-size: 0.78rem;
}

.chapter-accordion[open] .chapter-toggle {
  font-size: 0;
}

.chapter-body {
  padding: 0 1.15rem 1.15rem;
}

/* Lesson content embedded inline when a lesson accordion is opened */
.lesson-embed-frame {
  display: block;
  width: 100%;
  min-height: 6rem;
  border: 0;
  overflow: hidden;
}

.learning-point-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 1rem;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 29px, rgba(77, 116, 156, 0.1) 30px),
    #fffaf0;
  border-top: 1px dashed rgba(123, 92, 67, 0.3);
  list-style: none;
}

.learning-point-list a {
  display: block;
  padding: 0.65rem 0.75rem;
  background: rgba(247, 220, 131, 0.32);
  border: 1px dashed rgba(123, 92, 67, 0.24);
  border-radius: var(--ll-r-8);
  line-height: 1.45;
}

.lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
  gap: 1rem;
}

.lesson-main,
.lesson-media > div {
  padding: 1rem;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  box-shadow: var(--shadow);
}

.lesson-main p,
.lesson-main li {
  line-height: 1.6;
}

.lesson-vocab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.lesson-vocab-list span {
  padding: 0.35rem 0.55rem;
  background: #fff2c8;
  border: 1px dashed rgba(123, 92, 67, 0.38);
  border-radius: var(--ll-r-4);
  font-weight: 800;
}

.lesson-media {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.video-placeholder,
.audio-placeholder {
  display: grid;
  place-items: center;
  min-height: 11rem;
  text-align: center;
  color: var(--brown);
  font-weight: 800;
}

.map-unit,
.progression-card {
  padding: 1.2rem;
}

.map-unit:nth-child(2n),
.progression-card:nth-child(2n) {
  transform: rotate(0.7deg);
}

.map-unit:nth-child(2n + 1),
.progression-card:nth-child(2n + 1) {
  transform: rotate(-0.7deg);
}

.map-path {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 1rem 0;
}

.map-node {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  color: #fffaf0;
  background: var(--red);
  border: 3px solid #fffaf0;
  border-radius: 999px;
  box-shadow: var(--ll-elev-1);
  font-family: Georgia, serif;
  font-weight: 800;
}

.map-node.current {
  color: var(--ink);
  background: #f7dc83;
}

.map-node.locked {
  color: rgba(60, 43, 32, 0.45);
  background: #ded0b8;
}

.map-line {
  flex: 1;
  min-width: 1rem;
  height: 0.28rem;
  background: var(--gold);
  border-radius: 999px;
}

.map-line.locked {
  background: rgba(123, 92, 67, 0.22);
}

.progression-card {
  display: block;
  min-height: 11rem;
}

.progression-card p,
.map-unit p {
  line-height: 1.5;
}

.journal-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.journal-stat {
  padding: 1.35rem;
  background:
    linear-gradient(rgba(255,255,255,0.58), rgba(255,255,255,0.58)),
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(143, 112, 72, 0.16) 29px);
}

.journal-stat strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 2.7rem;
}

.journal-stat p {
  margin: 0.2rem 0 0;
  color: var(--brown);
  font-weight: 800;
}

/* Remove the little letter/character tiles from the profile stat cards. */
.progression-profile-grid .lantern-badge { display: none; }

/* Vocabulary milestone chart (Profile → Overview). Known words vs real Chinese
   vocabulary sizes; the nearest few goals show as bars and shift up over time. */
.vocab-progress-head { margin: 0.2rem 0 0.1rem; font-size: 1.05rem; color: var(--ink); }
.vocab-progress-head strong { font-family: Georgia, serif; font-size: 2rem; color: var(--red); margin-right: 0.35rem; }
.vocab-progress-goal { margin: 0.1rem 0 0.95rem; color: rgba(123, 92, 67, 0.82); font-size: 0.95rem; }
.vocab-progress-goal strong, .vocab-progress-goal b { color: var(--red); }
.vocab-milestone-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.vocab-ms { display: grid; grid-template-columns: minmax(8.5rem, 1.1fr) 2.4fr auto; align-items: center; gap: 0.7rem; }
.vocab-ms-label { font-weight: 700; color: var(--brown); font-size: 0.9rem; }
.vocab-ms-track { height: 0.55rem; background: rgba(123, 92, 67, 0.14); border-radius: 999px; overflow: hidden; }
.vocab-ms-fill { display: block; height: 100%; background: var(--word-learning, #f2b33d); border-radius: 999px; min-width: 0.5rem; }
.vocab-ms-count { font-variant-numeric: tabular-nums; color: rgba(123, 92, 67, 0.72); font-size: 0.82rem; white-space: nowrap; }
.vocab-ms.is-next .vocab-ms-label { color: var(--red); }
.vocab-ms.is-next .vocab-ms-fill { background: var(--red); }
.vocab-progress-reached { margin: 0.9rem 0 0; color: rgba(123, 92, 67, 0.72); font-size: 0.85rem; }
@media (max-width: 560px) {
  .vocab-ms { grid-template-columns: 1fr auto; }
  .vocab-ms-label { order: 1; }
  .vocab-ms-count { order: 2; }
  .vocab-ms-track { order: 3; grid-column: 1 / -1; }
}

.lantern-badge.gold {
  background: var(--gold);
}

.lantern-badge.brown {
  background: var(--brown);
}

.collection {
  background: rgba(255, 250, 240, 0.72);
}

.sticker-book {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.sticker {
  display: grid;
  place-items: center;
  width: clamp(5rem, 13vw, 8rem);
  aspect-ratio: 1;
  background: var(--paper);
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-family: Georgia, serif;
  font-size: clamp(1.3rem, 4vw, 2.4rem);
  font-weight: 800;
}

.cat-sticker {
  background: #f6d6c4;
}

.lantern-sticker {
  color: #fffaf0;
  background: var(--red);
}

.theme-sticker {
  background: #e5d8a7;
}

.stamp-sticker {
  color: #fffaf0;
  background: var(--sage);
}

.note-sticker {
  background: #f7dc83;
}

.universe {
  background: #ead8b9;
}

.universe-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.universe-grid article {
  padding: 1.1rem;
}

.universe-grid p {
  line-height: 1.5;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1rem, 5vw, 5rem);
  color: #fff7e6;
  background: var(--brown);
}

.site-footer p {
  max-width: 42rem;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 0.86;
}

.tool-page,
.profile-page {
  position: relative;
  max-width: var(--ll-page-max);
  margin: 0 auto;
  padding: var(--ll-page-padding) var(--ll-page-padding) var(--ll-page-padding-bottom);
  background: var(--ll-lined-paper);
  border: var(--ll-border-soft);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow-soft);
}

.tool-page h1,
.profile-page h1 {
  max-width: 20ch;
  font-size: var(--ll-text-h1, clamp(2rem, 3.2vw, 2.75rem));
  line-height: 1.08;
}

.tool-page > .section-heading.compact,
.profile-page > .section-heading.compact,
.flashcard-hero,
.course-hero,
.profile-hero {
  margin-bottom: var(--ll-section-gap);
}

.tool-page > .section-heading.compact .stamp,
.profile-page .stamp,
.tool-page .stamp {
  margin-bottom: 0.55rem;
}

.tool-page > .section-heading.compact .handwritten,
.profile-page .handwritten,
.flashcard-hero .handwritten,
.course-hero .handwritten {
  max-width: 62rem;
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
}

.vocab-tools,
.mapping-form,
.inline-mapping,
.reader-controls,
.flashcard-actions {
  padding: 0.85rem;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.88), rgba(255, 246, 230, 0.82)),
    var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.17);
  border-radius: var(--ll-radius-soft);
  box-shadow: var(--ll-elev-1);
}

label,
.mini-label {
  color: var(--brown);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

input,
select,
textarea {
  color: var(--ink);
  background: rgba(255, 252, 244, 0.96);
  border: 1px solid rgba(123, 92, 67, 0.26);
  border-radius: var(--ll-r-8);
  box-shadow: none;
}

.deck-card,
.vocab-card,
.journal-stat,
.profile-note,
.teacher-card,
.universe-grid > article,
.course-folder,
.review-card,
.badge-preview,
.saved-decks,
.review-panel {
  background: var(--ll-card-paper);
  border: var(--ll-border-soft);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow-soft);
}

.deck-card,
.vocab-card,
.journal-stat,
.profile-note,
.teacher-card,
.universe-grid > article,
.course-folder {
  padding: var(--ll-card-padding);
}

.library-card-tags span,
.story-tags span,
.level-pill,
.status-pill,
.stamp-sticker,
.course-status,
.badge-rarity {
  border: 1px solid rgba(123, 92, 67, 0.2);
  border-radius: var(--ll-r-4);
  box-shadow: none;
}

.upload-card,
.profile-note {
  padding: 1.15rem;
  background: #fff2c8;
  border: 1px dashed rgba(123, 92, 67, 0.46);
  box-shadow: 5px 5px 0 rgba(123, 92, 67, 0.1);
}

.file-drop {
  display: grid;
  place-items: center;
  min-height: 7rem;
  padding: 1rem;
  cursor: pointer;
  background: rgba(255, 250, 240, 0.7);
  border: 3px dashed rgba(123, 92, 67, 0.42);
  border-radius: var(--ll-r-8);
  font-weight: 800;
}

.file-drop input {
  width: 100%;
  max-width: 18rem;
  margin-top: 0.75rem;
}

.flashcards-page {
  min-height: 45rem;
}

.flashcard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-left: clamp(1rem, 3vw, 2.4rem);
}

.flashcard-hero h1 {
  max-width: none;
  font-size: var(--ll-text-h1, clamp(2rem, 3.2vw, 2.75rem));
}

.flashcard-hero > div {
  margin-left: clamp(0.5rem, 2vw, 1.5rem);
}

.create-deck-button {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  width: 11rem;
  min-height: 9rem;
  cursor: pointer;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), transparent 45%),
    #fff2c8;
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-20);
  box-shadow: var(--ll-elev-2);
  font: inherit;
}

.create-deck-button span {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: #fffaf0;
  background: var(--red);
  border-radius: 999px;
  font-size: 2rem;
  font-weight: 800;
}

.deck-modal {
  width: min(42rem, calc(100vw - 2rem));
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.deck-modal::backdrop {
  background: rgba(60, 43, 32, 0.26);
  backdrop-filter: blur(4px);
}

.deck-modal-card {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.5rem, 4vw, 2.35rem);
  background:
    radial-gradient(circle at 92% 6%, rgba(220, 125, 52, 0.1), transparent 11rem),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.08) 32px),
    linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(255, 246, 230, 0.98));
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: var(--ll-r-20);
  box-shadow: 0 26px 70px rgba(79, 51, 28, 0.18), 0 1px 0 rgba(255, 255, 255, 0.86) inset;
}

.deck-modal-card label {
  display: grid;
  gap: 0.35rem;
  color: var(--brown);
  font-weight: 800;
}

.deck-modal-card input,
.deck-modal-card textarea,
.deck-modal-card select,
.vocab-tools select,
.vocab-tools input {
  width: 100%;
  min-height: 2.65rem;
  padding: 0.6rem 0.7rem;
  color: var(--ink);
  background: rgba(255, 250, 240, 0.88);
  border: 1px solid rgba(123, 92, 67, 0.2);
  border-radius: var(--ll-r-12);
  font: inherit;
}

.deck-modal-card textarea {
  min-height: 8rem;
  resize: vertical;
}

.modal-close {
  /* see the shared plain-✕ rule above */
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.modal-intro {
  margin: 0;
  line-height: 1.5;
}

.inline-mapping {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mapping-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 1rem;
  align-items: end;
  margin: 1.25rem 0 2rem;
}

.mapping-form label {
  display: grid;
  gap: 0.35rem;
  color: var(--brown);
  font-weight: 800;
}

.mapping-form input,
.mapping-form select {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.6rem 0.7rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid rgba(123, 92, 67, 0.38);
  border-radius: var(--ll-r-8);
  font: inherit;
}

.preview-board,
.saved-decks {
  margin-top: 1.6rem;
}

.flashcard-grid,
.deck-list,
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.mini-flashcard,
.deck-card {
  min-height: 9rem;
  padding: 1rem;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.2);
  box-shadow: var(--shadow);
}

.mini-flashcard {
  display: grid;
  align-content: center;
  gap: 0.35rem;
  text-align: center;
  transform: rotate(-0.7deg);
}

.mini-flashcard:nth-child(2n),
.deck-card:nth-child(2n) {
  transform: rotate(0.8deg);
}

.mini-flashcard strong {
  font-family: Georgia, serif;
  font-size: 1.8rem;
}

.mini-flashcard span,
.deck-card p {
  color: var(--brown);
  font-weight: 800;
}

.mini-flashcard small,
.deck-card small,
.empty-note {
  color: rgba(60, 43, 32, 0.68);
  font-weight: 800;
}

.profile-hero {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: clamp(1rem, 4vw, 2rem);
  align-items: center;
  margin-bottom: 1.5rem;
}

/* Lantern avatar removed — single column, text sits to the right. */
.profile-hero--no-lantern {
  grid-template-columns: 1fr;
  justify-items: end;
  text-align: right;
}

.profile-logo {
  width: 100%;
  filter: drop-shadow(0 14px 22px rgba(123, 92, 67, 0.18));
}

/* Per-user lantern avatar (replaces the logo on the profile). Click to customize. */
.profile-lantern {
  width: min(100%, 7rem);
  aspect-ratio: 100 / 132;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}
.profile-lantern svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(123, 92, 67, 0.2));
  transition: transform 0.16s ease;
}
.profile-lantern:hover svg,
.profile-lantern:focus-visible svg { transform: translateY(-3px) scale(1.04); }
.profile-lantern:focus-visible { outline: none; }

/* Lantern customizer modal */
.lantern-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(60, 43, 32, 0.45);
}
.lantern-modal__panel {
  position: relative;
  width: min(24rem, 94vw);
  padding: 1.5rem 1.3rem 1.2rem;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.2);
  border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-3);
}
.lantern-preview { width: 8rem; height: 10.5rem; margin: 0.4rem auto 1rem; }
.lantern-opt { margin: 0.75rem 0; }
.lantern-opt > span {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--brown);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lantern-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.lantern-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid rgba(123, 92, 67, 0.25);
  cursor: pointer;
}
.lantern-swatch.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--word-learning, #f2b33d);
}
.lantern-chip {
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(123, 92, 67, 0.28);
  border-radius: var(--ll-r-8);
  background: #fffdf7;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: #5b4636;
  cursor: pointer;
  text-transform: capitalize;
}
.lantern-chip.is-active {
  background: var(--word-learning, #f2b33d);
  border-color: var(--word-learning, #f2b33d);
  color: #4a3a12;
}
.lantern-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.lantern-actions .button { flex: 1; }

.profile-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 1.5rem;
}

.profile-note {
  margin-top: 1.5rem;
}

.profile-note p:last-child {
  max-width: 48rem;
  line-height: 1.55;
}

.badge-preview {
  margin-top: 1.75rem;
  padding: 1.15rem;
  background: rgba(255, 250, 240, 0.72);
  border: 1px dashed rgba(123, 92, 67, 0.34);
  box-shadow: 5px 5px 0 rgba(123, 92, 67, 0.08);
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.compact-badge-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.achievement-badge {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  min-height: 13rem;
  padding: 1rem;
  text-align: center;
}

.achievement-badge::before {
  content: "";
  position: absolute;
  top: -0.55rem;
  left: 50%;
  width: 5rem;
  height: 1rem;
  background: rgba(143, 163, 122, 0.8);
  transform: translateX(-50%) rotate(-2deg);
}

.badge-emblem {
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  margin: 0 auto;
  color: #fffaf0;
  background: radial-gradient(circle, #d85f45, var(--red));
  border: 4px double #fff2c8;
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px rgba(123, 92, 67, 0.16), 0 10px 20px rgba(123, 92, 67, 0.18);
  font-family: Georgia, serif;
  font-size: 1.35rem;
  font-weight: 800;
}

.achievement-badge.is-locked {
  opacity: 0.58;
  filter: grayscale(0.65);
}

.achievement-badge p {
  margin: 0;
  color: var(--brown);
  font-weight: 800;
  line-height: 1.4;
}

.reader-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
  gap: 1rem;
  padding: 1rem;
}

.reader-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  line-height: 1.8;
}

.reader-text button {
  cursor: pointer;
  color: var(--ink);
  background: #fff2c8;
  border: 1px dashed rgba(123, 92, 67, 0.4);
  border-radius: var(--ll-r-8);
  font: inherit;
}

.reader-text button:hover,
.reader-text button:focus-visible {
  background: #f7dc83;
  outline: 2px solid var(--gold);
}

.word-popup {
  align-self: start;
  padding: 1rem;
  background: var(--paper);
  border: 2px solid rgba(123, 92, 67, 0.26);
  box-shadow: 5px 5px 0 rgba(123, 92, 67, 0.12);
}

.word-popup strong,
.word-popup span {
  display: block;
}

.word-popup strong {
  font-family: Georgia, serif;
  font-size: 2rem;
}

.word-popup span {
  color: var(--red);
  font-weight: 800;
}

.vocab-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem) auto;
  gap: 0.75rem;
  align-items: center;
  margin: 1.25rem 0;
}

.vocab-tools input,
.vocab-tools select,
.vocab-card select {
  min-height: 2.8rem;
  padding: 0.6rem 0.7rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid rgba(123, 92, 67, 0.38);
  border-radius: var(--ll-r-8);
  font: inherit;
}

.vocab-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.vocab-card {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
}

.vocab-card strong {
  font-family: Georgia, serif;
  font-size: 1.9rem;
}

.vocab-card span {
  color: var(--red);
  font-weight: 800;
}

.vocab-card p {
  margin: 0;
  line-height: 1.45;
}

.library-page h1,
.story-page h1 {
  max-width: none;
}

.library-shell.section {
  /* Pass 3: horizontal gutter aligned to the base .section so Library/Podcasts
     match the other product pages' gutters (was 4vw,3rem). */
  padding: clamp(1.35rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem);
}

.library-page {
  max-width: 78rem;
  padding: clamp(1.35rem, 2.5vw, 2rem) clamp(1.35rem, 2.5vw, 2rem) clamp(1.7rem, 3vw, 2.35rem);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 36px, rgba(77, 116, 156, 0.1) 37px),
    var(--paper);
}

.library-page .stamp {
  margin-bottom: 0.55rem;
}

.library-page h1 {
  margin-bottom: 0.35rem;
  font-size: var(--ll-text-h1, clamp(2rem, 3.2vw, 2.75rem));
}

.library-page > .handwritten {
  max-width: 62rem;
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

.library-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0.9rem 0 1.4rem;
  /* Pass 4A: secondary to the stories — lighter surface, no standalone card feel. */
  padding: 0.6rem 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.library-filters label {
  display: grid;
  gap: 0.35rem;
  color: var(--brown);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.library-filters select {
  height: 44px;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  color: var(--ll-text);
  background: var(--ll-surface);
  border: 1px solid var(--ll-border-strong);
  border-radius: var(--ll-radius-md);
  font: inherit;
}
.library-filters select:focus {
  outline: none;
  border-color: var(--ll-primary);
  box-shadow: var(--ll-focus-ring-soft);
}

.library-own-reader {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  margin: 0 0 1.25rem;
  padding: clamp(1.05rem, 2.4vw, 1.45rem);
  overflow: visible;
  background:
    radial-gradient(circle at 86% 18%, rgba(247, 220, 131, 0.28), transparent 8rem),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.08) 32px),
    var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-12);
  box-shadow: var(--ll-elev-2);
}

.library-own-reader .washi-tape {
  top: -0.85rem;
  left: 4.8rem;
  width: 11.4rem;
  height: 2rem;
  opacity: 1;
  transform: rotate(-1.6deg);
  filter: saturate(1.08) drop-shadow(0 0.18rem 0.18rem rgba(123, 92, 67, 0.1));
}

.library-own-copy {
  display: grid;
  gap: 0.55rem;
}

.library-own-copy .stamp {
  margin: 0 0 0.05rem;
}

.library-own-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.9rem, 3vw, 2.45rem);
  line-height: 1.04;
}

.library-own-copy p:not(.stamp) {
  max-width: 46rem;
  margin: 0;
  color: rgba(60, 43, 32, 0.76);
  line-height: 1.45;
}

.library-own-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.35rem;
}

.library-own-actions small {
  color: rgba(60, 43, 32, 0.66);
  font-weight: 800;
}

.library-own-illustration {
  display: grid;
  place-items: center;
  min-height: 12rem;
  padding: 0.8rem;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 242, 214, 0.78), transparent 8rem);
}

.manga-book {
  position: relative;
  width: min(18rem, 100%);
  aspect-ratio: 1.45;
  transform: rotate(1deg);
}

.manga-page-left,
.manga-page-right {
  position: absolute;
  top: 14%;
  bottom: 8%;
  width: 47%;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 1.05rem, rgba(123, 92, 67, 0.08) 1.1rem),
    #fff8eb;
  border: 1px solid rgba(123, 92, 67, 0.2);
  box-shadow: var(--ll-elev-1);
}

.manga-page-left {
  left: 5%;
  border-radius: 12px 4px 4px 12px;
  transform: skewY(2deg);
}

.manga-page-right {
  right: 5%;
  border-radius: 4px 12px 12px 4px;
  transform: skewY(-2deg);
}

.manga-page-left::before,
.manga-page-right::before {
  content: "";
  position: absolute;
  inset: 14% 14% auto;
  height: 28%;
  border: 1px solid rgba(185, 68, 54, 0.16);
  border-radius: var(--ll-r-8);
  background: rgba(247, 220, 131, 0.18);
}

.speech-bubble {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 3.1rem;
  min-height: 2rem;
  padding: 0.25rem 0.45rem;
  color: var(--red);
  background: rgba(255, 250, 240, 0.92);
  border: 1px solid rgba(185, 68, 54, 0.22);
  border-radius: 999px;
  box-shadow: var(--ll-elev-1);
  font-family: Georgia, serif;
  font-weight: 800;
}

.bubble-one {
  top: 5%;
  left: 14%;
}

.bubble-two {
  right: 16%;
  bottom: 2%;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.library-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;               /* shrink to the grid track instead of content width */
  gap: 0.42rem;
  padding: 0.9rem 0.95rem 0.85rem;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.09) 32px),
    var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-12);
  box-shadow: var(--ll-elev-2);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.library-card:hover,
.library-card:focus-within {
  box-shadow: var(--ll-elev-2);
  transform: translateY(-3px);
}

.library-card.is-premium-locked {
  background:
    linear-gradient(rgba(255, 248, 235, 0.68), rgba(255, 248, 235, 0.68)),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.09) 32px),
    var(--paper);
}

/* Pass 4A: access state now lives once in the metadata row, so the artwork
   corner overlay is removed (no duplicated access signal over the illustration). */
.library-card.is-premium-locked::after { content: none; display: none; }

.library-card .washi-tape {
  top: -0.38rem;
  z-index: 2;
  width: 8.5rem;
  height: 1.45rem;
  opacity: 1;
  filter: saturate(1.08) drop-shadow(0 0.18rem 0.18rem rgba(123, 92, 67, 0.1));
}

.library-cover {
  display: grid;
  place-items: center;
  grid-template-rows: minmax(0, 1fr);
  min-height: 11.25rem;
  height: 11.25rem;
  margin-bottom: 0.5rem;
  /* Pass 4A follow-up: quiet the frame — small breathing space, almost-invisible
     border, near-card cream, no decorative pattern/dots. The artwork keeps its
     own rounded corners. Reads as card → space → artwork, not box-in-box. */
  padding: 0.3rem;
  overflow: hidden;
  background: #fdf7ea;
  border: 1px solid rgba(123, 92, 67, 0.07);
  border-radius: var(--ll-r-12);
}

.library-cover img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  border-radius: var(--ll-r-8);
}

.library-card:has([src*="xiao-mings-home"]) .library-cover img {
  transform: scale(0.92);
}

/* ============================================================
   Phones (≤620px): the Library is a browsable FEED, not shrunk-down desktop
   cards. One lean cream card per item — a short full-width cover banner, a
   single compact metadata row, a tight title + one-line description, and a
   small "Read →" affordance (the whole card is tappable, wired in library.js).
   Compact page header (lantern + "Library" + filter pills); the standalone
   floating site-header lantern is removed since the bottom nav is present.
   Desktop multi-column cards are untouched. Shared CSS → live site matches app.
   ============================================================ */
@media (max-width: 620px) {
  /* Drop the lone floating lantern header — the bottom nav handles navigation.
     The section-nav (Stories/Podcasts/Videos/My Content) then becomes the top
     bar, so pad it past the status bar / notch so it isn't clipped. */
  body.library-body .site-header { display: none; }
  body.library-body .section-navigation {
    padding-top: calc(0.65rem + env(safe-area-inset-top, 0px));
  }

  /* Single ~16px screen margin: remove the nested section + page padding. */
  .library-body .library-shell.section { padding: 0; }
  .library-body .library-page {
    padding: calc(env(safe-area-inset-top, 0px) + 0.9rem) 1rem 1.4rem;
  }

  /* Compact header (just the section title); hide the stamp + handwritten blurb. */
  .library-body .library-page > .stamp,
  .library-body .library-page > .handwritten { display: none; }
  .library-body .library-page h1 {
    margin: 0 0 0.7rem;
    font-size: 1.95rem;
  }

  /* Filters → one compact row of pills (never the enormous full-width boxes).
     nowrap keeps them on a single line; overflow-x is a safety valve if a long
     value (e.g. "HSK 3+") makes them exceed the width. */
  .library-body .library-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .library-body .library-filters::-webkit-scrollbar { display: none; }
  .library-body .library-filters label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.28rem 0.5rem;
    background: rgba(255, 252, 244, 0.96);
    border: 1px solid rgba(123, 92, 67, 0.22);
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--brown);
    white-space: nowrap;
  }
  .library-body .library-filters select {
    height: auto;
    min-height: 0;
    max-width: 5.2rem;
    padding: 0.05rem 0.05rem;
    border: 0;
    background: none;
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink);
  }

  .library-grid { gap: 0.9rem; }

  /* One lean card. flex-wrap + a 100% basis on the block rows lets the tags
     and the access pill share ONE row with no wrapper element. */
  .library-card {
    display: flex;
    flex-direction: row;   /* reset the desktop column direction for the mobile feed */
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.26rem;
    column-gap: 0.4rem;
    min-height: 0;
    padding: 0.85rem;
    background: var(--paper);
    border: 1px solid rgba(123, 92, 67, 0.16);
    border-radius: var(--ll-r-16);
    box-shadow: var(--ll-elev-1);
    cursor: pointer;
  }
  .library-card .washi-tape { display: none; }

  /* Cover: short full-width banner (~170px), image fills it. */
  .library-card > .library-cover {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
    margin: 0 0 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--ll-r-12);
    overflow: hidden;
  }
  .library-card > .library-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
  }

  /* Metadata: HSK · Type · Free on one compact line. */
  .library-card > .library-card-tags {
    flex: 0 0 auto;
    gap: 0.3rem;
  }
  .library-card > .library-card-tags span { font-size: 0.62rem; }
  /* Access is a standardised die-cut corner STICKER (top-right), not an inline
     pill. Free → free badge; premium / unlocked / glow → premium badge. */
  .library-body .library-card > .access-summary {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 3;
    width: 5.6rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: center / contain no-repeat;
    font-size: 0 !important;   /* beat the base .access-summary font-size !important */
    transform: rotate(-4deg);
    filter: drop-shadow(0 2px 3px rgba(79, 51, 28, 0.22));
    pointer-events: none;
  }
  .library-body .library-card > .access-summary.access-free {
    background-image: url("assets/stickers/badge-free.png");
  }
  .library-body .library-card > .access-summary.access-premium,
  .library-body .library-card > .access-summary.access-unlocked,
  .library-body .library-card > .access-summary.access-glow {
    background-image: url("assets/stickers/badge-premium.png");
  }
  /* The premium sticker already signals locked state; drop the lock-label pill. */
  .library-body .library-card.is-premium-locked::after { display: none; }

  /* Tight title block. */
  .library-card > h3 {
    flex: 0 0 100%;
    margin: 0.35rem 0 0;
    font-size: 1.45rem;
    line-height: 1.15;
  }
  .library-card > .library-title-en {
    flex: 0 0 100%;
    margin: 0.05rem 0 0;
    font-size: 1rem;
  }
  /* Extra specificity (.library-body .library-page …) to beat the base
     .library-card p:not(…) rule that clamps to 3 lines + min-height. */
  .library-body .library-page .library-card > .library-desc {
    flex: 1 1 100%;
    min-height: 0;
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: rgba(60, 43, 32, 0.78);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* CTA → a tiny "Read →" text link, bottom-right. The whole card is tappable.
     Scoped with .library-body to override the global .button.primary styles. */
  .library-body .library-card > .library-cta {
    align-self: center;
    width: auto;
    margin: 0.35rem 0 0 auto;
    padding: 0;
    background: none;
    box-shadow: none;
    border: 0;
    color: var(--red);
    font-weight: 800;
    font-size: 0;                 /* hide the long "Open story" label */
  }
  .library-body .library-card > .library-cta::after {
    content: attr(data-cta-mini) " →";
    font-size: 0.95rem;
  }

  .library-card.is-premium-locked::after { top: 0.7rem; right: 0.7rem; }

  /* Slightly shorter active highlight in the bottom nav. */
  .mobile-nav-link { padding-block: 0.25rem; }
}

.library-cover-mark {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  color: var(--red);
  background: rgba(255, 250, 240, 0.82);
  border: 1px solid rgba(185, 68, 54, 0.2);
  border-radius: 999px;
  box-shadow: var(--ll-elev-1);
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 800;
}

.library-card-tags,
.story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.library-card-tags span,
.story-tags span {
  width: fit-content;
  padding: 0.25rem 0.45rem;
  color: var(--brown);
  background: #f7dc83;
  border: 1px solid rgba(123, 92, 67, 0.2);
  border-radius: var(--ll-r-4);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.library-card-tags .premium-tag,
.story-tags .premium-tag {
  color: #7c2f25;
  background: #f6c7b8;
  border-color: rgba(185, 68, 54, 0.22);
}

.library-card-tags .free-tag,
.story-tags .free-tag {
  color: #4f5a2f;
  background: #dfe5bf;
  border-color: rgba(98, 112, 58, 0.22);
}

.library-card-tags .glow-tag,
.story-tags .glow-tag {
  color: #8f541e;
  background: #f5e7b6;
  border-color: rgba(207, 137, 43, 0.32);
}

.access-summary {
  width: fit-content;
  margin: -0.1rem 0 0.05rem;
  padding: 0.28rem 0.56rem;
  color: var(--brown);
  background: rgba(255, 248, 235, 0.84);
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: 999px;
  box-shadow: var(--ll-elev-0);
  font-size: 0.74rem !important;
  font-weight: 800;
  line-height: 1;
}

.access-summary.access-free,
.access-summary.access-unlocked {
  color: #59602f;
  background: rgba(224, 231, 194, 0.78);
  border-color: rgba(129, 142, 75, 0.3);
}

.access-summary.access-glow {
  color: #8f541e;
  background: rgba(255, 233, 169, 0.82);
  border-color: rgba(207, 137, 43, 0.32);
}

.access-summary.access-premium {
  color: #7c2f25;
  background: rgba(246, 199, 184, 0.76);
  border-color: rgba(185, 68, 54, 0.22);
}

.library-card h3 {
  margin: 0.1rem 0 0;
  color: var(--ink);
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  line-height: 1;
}

.library-title-en {
  margin: 0;
  color: var(--red);
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 1.05rem;
  line-height: 1.2;
}

.library-card p:not(.library-title-en):not(.access-summary) {
  display: -webkit-box;
  min-height: 0;
  margin: 0.15rem 0 0;
  overflow: hidden;
  color: rgba(60, 43, 32, 0.75);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Pass 4A: quiet tertiary CTA (Read story → / Unlock →), pinned to the card
   bottom so actions align across a row without a grid of red buttons. */
.library-card .library-cta--text {
  align-self: flex-start;
  margin-top: auto;
  width: fit-content;
  padding: 0.4rem 0.1rem 0.1rem;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ll-primary, #b6513e);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.98rem;
  cursor: pointer;
  text-decoration: none;
}
.library-card .library-cta--text:hover { color: var(--ll-primary-hover, #a74635); text-decoration: underline; }
.library-card .library-cta--text:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); border-radius: var(--ll-r-8); }

/* Podcast cards: "Listen →" / "Unlock →" read as the same plain text link as the
   stories' "Read story →" (no button chrome — the global button rule would
   otherwise give the Unlock <button> a shadow, border and padding). */
.pod-ep__cta,
.podcast-solo__cta {
  align-self: flex-start;
  width: fit-content;
  min-height: 0;
  padding: 0.4rem 0.1rem 0.1rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ll-primary, #b6513e);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.pod-ep__cta:hover,
.podcast-solo__cta:hover { color: var(--ll-primary-hover, #a74635); text-decoration: underline; background: none; box-shadow: none; }
.pod-ep__cta:focus-visible,
.podcast-solo__cta:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); border-radius: var(--ll-r-8); }

.library-lock-button {
  color: #3c2b20;
  background: #f2b33d;
}

.premium-locked-panel {
  max-width: 42rem;
  padding: clamp(1.1rem, 3vw, 1.7rem);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.08) 32px),
    #fff8eb;
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: var(--ll-r-12);
  box-shadow: var(--ll-elev-2);
}

.premium-locked-panel h1 {
  margin: 0.35rem 0 0.25rem;
}

.upgrade-modal .source-modal-card {
  max-width: 34rem;
}

.upgrade-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.story-page {
  max-width: 70rem;
}

.story-page .handwritten {
  max-width: 42rem;
}

.story-text {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  background:
    linear-gradient(90deg, rgba(185, 68, 54, 0.12) 1px, transparent 1px 4.6rem, transparent 4.6rem),
    repeating-linear-gradient(0deg, transparent, transparent 37px, rgba(77, 116, 156, 0.12) 38px),
    #fffdf7;
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: var(--ll-r-8);
}

.story-text p {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.9;
}

.story-word {
  cursor: pointer;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--ll-r-8);
  font: inherit;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.story-word.status-unseen {
  border-bottom-color: var(--word-new);
}

.story-word.status-not-known {
  background: rgba(232, 145, 127, 0.34);
  border-bottom: 3px solid var(--word-needs-practice);
}

.story-word.status-learning {
  background: rgba(242, 179, 61, 0.36);
  border-bottom: 3px solid var(--word-learning);
}

.story-word.status-known {
  background: rgba(155, 161, 90, 0.32);
  border-bottom: 3px solid var(--word-known);
}

.story-word:hover,
.story-word:focus-visible {
  color: var(--ink);
  outline: 2px solid rgba(91, 70, 54, 0.08);
}

.story-word.status-unseen:hover,
.story-word.status-unseen:focus-visible {
  background: rgba(255, 250, 240, 0.72);
  border-bottom: 2px dotted var(--word-new-hover);
}

.story-word.status-learning:hover,
.story-word.status-learning:focus-visible {
  background: var(--word-learning-selected-bg);
}

.story-word.status-not-known:hover,
.story-word.status-not-known:focus-visible {
  background: var(--word-needs-practice-selected-bg);
}

.story-word.status-known:hover,
.story-word.status-known:focus-visible {
  background: var(--word-known-bg);
}

/* The selection tint + ring go on the HANZI span, not the whole word button, so
   a trailing punctuation mark glued inside the button (e.g. the 。 kept with 了
   to stop it wrapping to a line start) is never swept into the highlight. */
.story-word.is-selected .story-word__hanzi {
  border-radius: var(--ll-r-8);
  box-shadow: 0 0 0 0.16rem var(--word-selected-border);
}

.story-word.status-not-known.is-selected .story-word__hanzi {
  background: var(--word-needs-practice-selected-bg);
  box-shadow:
    0 0 0 0.16rem var(--word-selected-border),
    0 0.2rem 0.85rem rgba(232, 145, 127, 0.14);
}

.story-word.status-learning.is-selected .story-word__hanzi {
  background: var(--word-learning-selected-bg);
  box-shadow:
    0 0 0 0.16rem var(--word-selected-border),
    0 0.2rem 0.85rem rgba(242, 179, 61, 0.16);
}

.story-word.status-known.is-selected .story-word__hanzi {
  background: var(--word-known-selected-bg);
  box-shadow:
    0 0 0 0.16rem var(--word-selected-border),
    0 0.2rem 0.85rem rgba(155, 161, 90, 0.12);
}

.story-word.status-unseen.is-selected .story-word__hanzi {
  background: rgba(216, 195, 165, 0.22);
  box-shadow:
    0 0 0 0.16rem var(--word-selected-border),
    0 0.2rem 0.85rem rgba(91, 70, 54, 0.08);
}

.story-questions {
  padding: 1rem;
  background: #fff2c8;
  border: 1px dashed rgba(123, 92, 67, 0.32);
  border-radius: var(--ll-r-8);
}

.story-questions h2 {
  font-size: clamp(1.7rem, 3vw, 2.7rem);
}

.story-questions li {
  margin: 0.45rem 0;
  line-height: 1.45;
}

.story-popover {
  position: absolute;
  z-index: 30;
  width: min(21.5rem, calc(100vw - 2rem));
  padding: 1.1rem;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.07) 32px),
    linear-gradient(180deg, rgba(255, 250, 240, 0.98), rgba(255, 246, 230, 0.96));
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-3);
}

/* Word popover close: drop the beige circle, enlarge the glyph, nudge it up so
   it reads as a plain ✕ in the corner (overrides the shared .modal-close look). */
.story-popover .story-popover-close {
  top: 0.3rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(123, 92, 67, 0.72);
}
.story-popover .story-popover-close:hover,
.story-popover .story-popover-close:focus-visible {
  background: transparent;
  color: var(--ink);
  outline: none;
}

.story-popover[data-word-status="learning"] {
  border-color: color-mix(in srgb, var(--word-learning) 42%, rgba(123, 92, 67, 0.18));
  box-shadow: 0 1.1rem 2.4rem rgba(242, 179, 61, 0.16);
}

.story-popover[data-word-status="not_known"] {
  border-color: color-mix(in srgb, var(--word-needs-practice) 48%, rgba(123, 92, 67, 0.18));
  box-shadow: 0 1.1rem 2.4rem rgba(232, 145, 127, 0.16);
}

.story-popover[data-word-status="known"] {
  border-color: color-mix(in srgb, var(--word-known) 42%, rgba(123, 92, 67, 0.18));
  box-shadow: 0 1.1rem 2.4rem rgba(155, 161, 90, 0.14);
}

.word-state-badge.status-unseen {
  color: #7a6047;
  background: rgba(255, 250, 240, 0.82);
  border-color: rgba(123, 92, 67, 0.26);
}

.word-state-badge.status-learning {
  color: #74511d;
  background: var(--word-learning-bg);
  border-color: var(--word-learning);
}

.word-state-badge.status-not_known {
  color: #8f3f31;
  background: var(--word-needs-practice-bg);
  border-color: var(--word-needs-practice);
}

.word-state-badge.status-known {
  color: #56612e;
  background: var(--word-known-bg);
  border-color: var(--word-known);
}

.story-popover strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 2.18rem;
  line-height: 1.02;
}

.story-popover > span {
  display: block;
  color: var(--red);
  font-weight: 800;
}

.story-popover small {
  display: block;
  margin-bottom: 0.75rem;
  color: rgba(60, 43, 32, 0.72);
  line-height: 1.45;
}

.dictionary-definition-list {
  margin: 0.55rem 0 0.85rem;
  padding-left: 1.1rem;
  color: rgba(60, 43, 32, 0.86);
  line-height: 1.45;
}

.friendly-definition {
  margin: 0.55rem 0 0.75rem;
  color: rgba(60, 43, 32, 0.88);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.35;
}

.word-card-example {
  display: grid;
  gap: 0.18rem;
  margin: 0 0 0.85rem;
  padding: 0.72rem 0.78rem;
  background: rgba(255, 252, 244, 0.9);
  border: 1px solid rgba(123, 92, 67, 0.14);
  border-radius: var(--ll-r-12);
}

.word-card-example b {
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 1.2rem;
}

.word-card-example span {
  color: var(--red);
  font-size: 0.88rem;
  font-weight: 800;
}

.word-card-example small {
  margin: 0;
}

.more-meanings {
  margin: 0.35rem 0 0.75rem;
}

.more-meanings summary {
  cursor: pointer;
  width: fit-content;
  color: var(--brown);
  font-size: 0.8rem;
  font-weight: 800;
}

.word-knowledge-actions {
  margin-top: 0.85rem;
}

.word-knowledge-actions .button {
  min-height: 2.15rem;
  padding: 0.42rem 0.62rem;
  font-size: 0.82rem;
}

/* My Content / manga reader — dictionary word card in the clean reader style
   (matches the video reader + extension: large headword + audio + HSK pill,
   terracotta pinyin, one clean row of status buttons). */
.manga-dictionary-panel .dictionary-placeholder {
  margin: 0.6rem 0 0; padding: 1rem 1.05rem 0.95rem;
  background: #fffaf0; border: 1px solid #ecdcc0; border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-1);
}
.manga-dictionary-panel .reader-word-top { display: flex; align-items: center; gap: 0.5rem; }
.manga-dictionary-panel .reader-word-top .dictionary-audio-slot { display: inline-flex; align-items: center; }
.manga-dictionary-panel .reader-word-hanzi { font-size: 1.95rem; line-height: 1.1; font-weight: 700; color: var(--ink, #3a2a1c); }
.manga-dictionary-panel .reader-word-hsk { margin-left: auto; align-self: flex-start; font-size: 0.68rem; font-weight: 800; color: #6f8256; background: rgba(143, 163, 122, 0.22); border-radius: 999px; padding: 0.12rem 0.5rem; white-space: nowrap; }
.manga-dictionary-panel .reader-word-pinyin { display: block; margin: 0.15rem 0 0.5rem; color: #b94436; font-weight: 700; font-size: 1.02rem; }
.manga-dictionary-panel .friendly-definition { margin: 0 0 0.55rem; font-size: 0.98rem; font-weight: 700; color: #4a3626; }
.manga-dictionary-panel .more-meanings { margin: 0 0 0.55rem; }
.manga-dictionary-panel .dictionary-source { display: block; margin: 0 0 0.7rem; color: #8a7358; font-size: 0.72rem; }
.manga-dictionary-panel .word-knowledge-actions { margin-top: 0.35rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.manga-dictionary-panel .word-knowledge-actions .button { min-height: 0; padding: 0.45rem 0.3rem; font-size: 0.78rem; line-height: 1.15; border-radius: var(--ll-r-8); }

.word-status-note {
  margin-top: 0.55rem;
  margin-bottom: 0;
  font-size: 0.78rem;
}

.word-action-confirmation {
  margin-top: 0.28rem;
  margin-bottom: 0;
  color: var(--brown);
  font-size: 0.78rem;
  font-weight: 800;
}

.dictionary-definition-list li + li {
  margin-top: 0.25rem;
}

.dictionary-source {
  font-size: 0.72rem;
}

.dictionary-sources-page {
  max-width: 68rem;
}

.source-credit-card {
  margin-top: 1.35rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.07) 32px),
    rgba(255, 250, 240, 0.86);
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: var(--ll-radius-soft);
  box-shadow: var(--ll-shadow-soft);
}

.source-credit-card h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.source-credit-card dl {
  display: grid;
  gap: 0.7rem;
  margin: 0 0 1rem;
}

.source-credit-card dl div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.35fr) 1fr;
  gap: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(123, 92, 67, 0.1);
}

.source-credit-card dt {
  color: var(--brown);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.source-credit-card dd,
.source-credit-card p {
  margin: 0;
  color: rgba(60, 43, 32, 0.78);
  line-height: 1.5;
}

.source-credit-card a,
.site-footer a {
  color: var(--red);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.dictionary-segment-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.55rem 0 0.9rem;
}

.dictionary-segment-chip,
.dictionary-segment-missing {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.28rem 0.62rem;
  color: var(--red);
  font-weight: 800;
  background: rgba(255, 246, 222, 0.92);
  border: 1px solid rgba(185, 68, 54, 0.22);
  border-radius: 999px;
}

.dictionary-segment-chip {
  cursor: pointer;
  box-shadow: 0 0.12rem 0 rgba(123, 92, 67, 0.12);
}

.dictionary-segment-chip:hover,
.dictionary-segment-chip:focus-visible {
  background: rgba(247, 220, 131, 0.7);
  transform: translateY(-1px);
}

.dictionary-segment-missing {
  color: rgba(60, 43, 32, 0.48);
}

.stamp-collection {
  margin-top: 1.75rem;
  padding: 1.15rem;
  background: rgba(255, 250, 240, 0.72);
  border: 1px dashed rgba(123, 92, 67, 0.34);
  box-shadow: 5px 5px 0 rgba(123, 92, 67, 0.08);
}

.profile-stamp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.profile-stamp-card {
  position: relative;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-height: 18rem;
  padding: 0.8rem;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.2);
  box-shadow: var(--shadow);
}

.profile-stamp-card:nth-child(2n) {
  transform: rotate(0.7deg);
}

.profile-stamp-card:nth-child(2n + 1) {
  transform: rotate(-0.7deg);
}

.profile-stamp-card::before {
  content: "";
  position: absolute;
  top: -0.55rem;
  left: 50%;
  width: 5.2rem;
  height: 1rem;
  background: rgba(143, 163, 122, 0.8);
  transform: translateX(-50%) rotate(-2deg);
}

.profile-stamp-image-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 11.5rem;
  background: #fff6e6;
  border: 1px solid rgba(123, 92, 67, 0.13);
  overflow: hidden;
}

.profile-stamp-card img {
  width: 100%;
  max-height: 12rem;
  object-fit: contain;
  filter: saturate(1.04) contrast(0.98);
}

.profile-stamp-card h3 {
  font-size: 1.1rem;
}

.profile-stamp-card p {
  margin: 0.3rem 0 0;
  color: var(--brown);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.4;
}

.profile-stamp-card.is-locked img {
  filter: grayscale(1) opacity(0.38);
}

.profile-stamp-card.is-locked .profile-stamp-image-wrap::after {
  content: "Locked";
  position: absolute;
  padding: 0.35rem 0.55rem;
  color: #fffaf0;
  background: rgba(123, 92, 67, 0.82);
  border-radius: var(--ll-r-4);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: rotate(-6deg);
}

.profile-stamp-card.is-unlocked {
  background: #fffaf0;
}

.lesson-note {
  max-width: 43rem;
  margin-top: 1rem;
  padding: 1rem;
  background: #fff2c8;
  border: 1px dashed rgba(123, 92, 67, 0.46);
  box-shadow: 5px 5px 0 rgba(123, 92, 67, 0.1);
}

.lesson-note strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--red);
  font-family: Georgia, serif;
  font-size: 1.25rem;
}

.lesson-note p {
  margin: 0;
  line-height: 1.55;
}

.pinyin-page {
  position: relative;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(1.35rem, 4vw, 2.5rem);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 36px, rgba(77, 116, 156, 0.11) 37px),
    linear-gradient(90deg, rgba(185,68,54,0.14) 1px, transparent 1px 5rem, var(--paper) 5rem);
  border: 1px solid rgba(123, 92, 67, 0.18);
  box-shadow: var(--shadow);
}

.pinyin-page h1 {
  max-width: 12ch;
  font-size: var(--ll-text-h1, clamp(2rem, 3.2vw, 2.75rem));
}

.pinyin-status {
  margin: 0.85rem 0;
  padding: 0.65rem 0.85rem;
  color: var(--brown);
  background: #f7dc83;
  border: 1px dashed rgba(123, 92, 67, 0.42);
  border-radius: var(--ll-r-8);
  font-weight: 800;
}

.pinyin-table {
  display: grid;
  grid-template-columns: 1.75rem repeat(36, 2.15rem);
  gap: 0;
  overflow-x: auto;
  padding: 0.45rem;
  background: #fffdf7;
  border: 2px solid rgba(60, 43, 32, 0.72);
  box-shadow: 6px 6px 0 rgba(123, 92, 67, 0.1);
}

.pinyin-cell {
  position: relative;
  min-height: 1.38rem;
  padding: 0.12rem 0.16rem;
  color: var(--ink);
  background: #fbfbfb;
  border-right: 1px solid rgba(60, 43, 32, 0.54);
  border-bottom: 1px solid rgba(60, 43, 32, 0.54);
  border-radius: 0;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
}

.pinyin-head {
  color: var(--ink);
  background: #fff8e8;
  border-color: rgba(60, 43, 32, 0.72);
  font-weight: 800;
}

.pinyin-initial {
  color: var(--red);
  background: #fff2c8;
}

.pinyin-corner {
  background: #f7dc83;
}

.pinyin-empty {
  background: #fcfbf6;
}

.pinyin-gap {
  min-height: 0.58rem;
  background: #f0e1c5;
  border-bottom: 1px solid rgba(60, 43, 32, 0.64);
}

.pinyin-syllable-wrap {
  padding: 0;
  z-index: 1;
}

.pinyin-syllable-wrap:hover,
.pinyin-syllable-wrap:focus-within {
  z-index: 4;
}

.pinyin-main {
  width: 100%;
  min-height: 1.38rem;
  padding: 0.15rem 0.1rem;
  cursor: pointer;
  color: #3c5260;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
}

.pinyin-main:hover,
.pinyin-main:focus-visible {
  background: #fff2c8;
  outline: 2px solid var(--gold);
}

.tone-menu {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.2rem);
  z-index: 5;
  display: none;
  grid-template-columns: repeat(2, minmax(2.8rem, 1fr));
  gap: 0.25rem;
  width: max-content;
  padding: 0.35rem;
  background: #fffaf0;
  border: 1px solid rgba(123, 92, 67, 0.24);
  border-radius: var(--ll-r-8);
  box-shadow: var(--ll-elev-2);
  transform: translateX(-50%);
}

.pinyin-syllable-wrap:hover .tone-menu,
.pinyin-syllable-wrap:focus-within .tone-menu {
  display: grid;
}

.tone-menu button {
  min-height: 1.8rem;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  color: var(--ink);
  background: #f7dc83;
  border: 1px solid rgba(123, 92, 67, 0.22);
  border-radius: var(--ll-r-4);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
}

.tone-menu button:hover,
.tone-menu button:focus-visible {
  color: #fffaf0;
  background: var(--red);
  outline: none;
}

.pronunciation-tabs {
  margin-top: 1.5rem;
}

.sound-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.sound-tab {
  min-height: 2.7rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  color: var(--brown);
  background: var(--paper);
  border: 2px solid rgba(123, 92, 67, 0.28);
  border-radius: 8px 8px 0 0;
  font: inherit;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(123, 92, 67, 0.08);
}

.sound-tab.is-active {
  color: #fffaf0;
  background: var(--red);
  border-color: var(--red);
}

.sound-panel {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 1rem;
  align-items: stretch;
  padding: 1rem;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  box-shadow: var(--shadow);
}

.sound-panel.is-active {
  display: grid;
}

.tongue-text {
  padding: 0.75rem;
}

.tongue-text p {
  line-height: 1.6;
}

.tongue-picture {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 14rem;
  overflow: hidden;
  background: #f6d6c4;
  border: 3px solid #fffaf0;
  border-radius: var(--ll-r-8);
  box-shadow: inset 0 0 0 2px rgba(123, 92, 67, 0.12);
}

.mouth-line {
  position: absolute;
  width: 12rem;
  height: 6rem;
  border: 0.35rem solid var(--brown);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(8deg);
}

.tongue {
  position: absolute;
  bottom: 3.2rem;
  width: 8rem;
  height: 2.4rem;
  background: #d76f66;
  border: 0.2rem solid #9d4b43;
  border-radius: 999px;
}

.tongue-front {
  left: 3rem;
  transform: rotate(-4deg);
}

.tongue-curled {
  right: 3.2rem;
  border-top-right-radius: 2rem;
  transform: rotate(-16deg);
}

.air-puff {
  position: absolute;
  right: 2rem;
  top: 4rem;
  width: 4rem;
  height: 4rem;
  border-top: 0.25rem dashed rgba(255, 250, 240, 0.9);
  border-right: 0.25rem dashed rgba(255, 250, 240, 0.9);
  border-radius: 50%;
}

.tongue-picture small {
  position: absolute;
  bottom: 0.8rem;
  color: var(--brown);
  font-weight: 800;
}

.quiz-page {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 36px, rgba(77, 116, 156, 0.13) 37px),
    linear-gradient(90deg, rgba(185,68,54,0.18) 1px, transparent 1px 5rem, var(--paper) 5rem);
}

.quiz-heading h1 {
  max-width: 14ch;
  font-size: var(--ll-text-h1, clamp(2rem, 3.2vw, 2.75rem));
}

.back-link {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 1rem;
  color: var(--brown);
  font-weight: 800;
}

.quiz-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: var(--brown);
  font-weight: 800;
}

.quiz-status span {
  display: inline-flex;
  padding: 0.45rem 0.7rem;
  background: #f7dc83;
  border-radius: var(--ll-r-8);
  box-shadow: 3px 3px 0 rgba(123, 92, 67, 0.14);
}

.quiz-card,
.quiz-complete {
  padding: clamp(1.25rem, 4vw, 2rem);
  transform: rotate(-0.6deg);
}

.quiz-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
  font-family: Georgia, serif;
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 800;
}

.blank-line {
  min-width: clamp(5.5rem, 18vw, 9rem);
  text-align: center;
  color: rgba(60, 43, 32, 0.55);
}

.drop-zone {
  display: grid;
  place-items: center;
  min-height: 5.25rem;
  margin: 1rem 0;
  padding: 1rem;
  color: rgba(60, 43, 32, 0.68);
  background: #fff2c8;
  border: 3px dashed rgba(123, 92, 67, 0.42);
  border-radius: var(--ll-r-8);
  font-family: Georgia, serif;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 800;
}

.drop-zone.is-hovered {
  background: #f7dc83;
  border-color: var(--gold);
}

.drop-zone.is-correct {
  color: #334325;
  background: #e9ecd7;
  border-color: var(--sage);
}

.drop-zone.is-incorrect {
  color: #7d3129;
  background: #f6d6c4;
  border-color: var(--red);
}

.option-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

.drag-option {
  min-height: 3rem;
  padding: 0.7rem 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid rgba(123, 92, 67, 0.55);
  border-radius: var(--ll-r-8);
  box-shadow: 4px 4px 0 rgba(123, 92, 67, 0.14);
  cursor: grab;
  font: inherit;
  font-weight: 800;
}

.drag-option:active {
  cursor: grabbing;
}

.feedback {
  min-height: 1.7rem;
  margin: 0.8rem 0;
  font-weight: 800;
}

.feedback.correct {
  color: #4e6a38;
}

.feedback.incorrect {
  color: var(--red);
}

.quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.quiz-actions .button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.quiz-complete {
  margin-top: 1.5rem;
  background: #fff2c8;
}

.quiz-complete p:not(.stamp) {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .site-header,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .paper-tabs {
    justify-content: flex-start;
    max-width: 100%;
  }

  .library-page > .handwritten {
    white-space: normal;
  }

  .library-own-reader {
    grid-template-columns: 1fr;
  }

  .library-own-illustration {
    min-height: 10rem;
    order: -1;
  }

  .hero {
    min-height: auto;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding-bottom: 0;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-scrapbook {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: auto;
    padding: 0.75rem 0 0;
  }

  .hero-scrapbook::before {
    inset: 0;
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 250, 240, 0.68), transparent 14rem),
      url("assets/postcards/postcard-5.png") right bottom / 18rem auto no-repeat;
  }

  .hero-feature-card,
  .hero-card-flashcards,
  .hero-card-practice,
  .hero-card-vocab {
    justify-self: stretch;
    width: 100%;
    margin-top: 0;
    transform: rotate(0deg);
  }

  .hero-feature-strip {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-feature-strip div + div {
    border-left: 0;
  }

  .hero-feature-strip div:nth-child(even) {
    border-left: 1px dashed rgba(123, 92, 67, 0.22);
  }

  .hero-feature-strip div:nth-child(n + 3) {
    border-top: 1px dashed rgba(123, 92, 67, 0.22);
  }

  .lesson-grid,
  .exercise-grid,
  .learning-map,
  .progression-grid,
  .journal-grid,
  .flashcard-grid,
  .deck-list,
  .profile-grid,
  .badge-grid,
  .vocab-list,
  .library-grid,
  .course-grid,
  .course-level-grid,
  .teacher-model-grid,
  .profile-stamp-grid,
  .universe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reader-preview,
  .manga-upload-panel,
  .vocab-tools,
  .reader-controls,
  .flashcard-actions,
  .reader-workspace,
  .teacher-card,
  .lesson-layout,
  .library-filters {
    grid-template-columns: 1fr;
  }

  .mapping-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sticky-note {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 2;
    margin-top: 1rem;
  }

  .sound-panel {
    grid-template-columns: 1fr;
  }

  .course-hero {
    grid-template-columns: 1fr;
  }

  .chapter-accordion summary {
    grid-template-columns: 1fr auto;
  }

  .chapter-number {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .hero {
    min-height: auto;
    padding-top: 1rem;
  }

  .hero-copy {
    transform: rotate(0deg);
  }

  .hero-copy h1 {
    font-size: clamp(2.6rem, 17vw, 4.6rem);
  }

  .notebook-art {
    width: min(18rem, 72vw);
  }

  .hero-scrapbook {
    grid-template-columns: 1fr;
  }

  .hero-scrapbook::before {
    opacity: 0.42;
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 250, 240, 0.68), transparent 12rem),
      url("assets/postcards/postcard-5.png") right bottom / 16rem auto no-repeat;
  }

  .hero-feature-strip {
    grid-template-columns: 1fr;
  }

  .hero-feature-strip div,
  .hero-feature-strip div:nth-child(even),
  .hero-feature-strip div:nth-child(n + 3) {
    border-left: 0;
    border-top: 0;
  }

  .hero-feature-strip div + div {
    border-top: 1px dashed rgba(123, 92, 67, 0.22);
  }

  .paper-tabs {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }

  .paper-tabs a {
    flex: 0 0 auto;
    padding: 0.58rem 0.72rem;
    font-size: 0.82rem;
  }

  .brand-mark-nav {
    width: auto;
    height: 4rem;
    max-height: 4rem;
  }

  .lesson-grid,
  .exercise-grid,
  .learning-map,
  .progression-grid,
  .journal-grid,
  .flashcard-grid,
  .deck-list,
  .profile-grid,
  .badge-grid,
  .compact-badge-grid,
  .vocab-list,
  .library-grid,
  .library-filters,
  .course-grid,
  .course-level-grid,
  .teacher-model-grid,
  .profile-stamp-grid,
  .universe-grid {
    grid-template-columns: 1fr;
  }

  .profile-hero {
    grid-template-columns: 1fr;
  }

  .profile-logo {
    max-width: 12rem;
  }

  .mapping-form {
    grid-template-columns: 1fr;
  }

  .quiz-prompt {
    gap: 0.5rem;
  }

  .pinyin-page,
  .quiz-page,
  .tool-page,
  .profile-page {
    padding: 1.1rem;
  }

  /* Declutter the reader controls on phones. They were forced to width:100%, so
     each became a huge full-width block (very clunky). Pack them into a compact
     centered row, and hide the noise — zoom, the pinyin toggle, edit-scan and
     the status line — leaving the view toggle, page nav, Full screen and the
     Highlight picker. */
  .manga-toolbar {
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
  }
  .manga-toolbar #manga-zoom-out,
  .manga-toolbar #manga-zoom-in,
  .manga-toolbar #manga-zoom-label,
  .manga-toolbar #manga-reading-pinyin,
  .manga-toolbar #manga-edit-scan-toggle,
  .manga-toolbar .manga-scan-status {
    display: none;
  }
  .manga-toolbar .button,
  .manga-toggle,
  .manga-toolbar #manga-page-status {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
    margin-left: 0;
  }
  .manga-toolbar #manga-page-status {
    min-width: 0;
    font-size: 0.85rem;
  }

  .manga-stage {
    min-height: 24rem;
    padding: 0.55rem;
  }

  .manga-dictionary-popup {
    left: 1rem !important;
    right: 1rem;
    width: auto;
  }

  .pinyin-table {
    grid-template-columns: 1.75rem repeat(36, 2.15rem);
  }

  .tongue-picture {
    min-height: 12rem;
  }

  .chapter-accordion summary {
    grid-template-columns: 1fr;
  }

  .chapter-toggle {
    width: fit-content;
  }

  .latest-grid,
  .today-practice-grid,
  .recommendation-grid,
  .source-step,
  .hsk-level-grid,
  .get-started-card {
    grid-template-columns: 1fr;
  }

  .today-tile {
    grid-template-columns: 1fr;
  }

  .latest-item-preview {
    grid-template-columns: 5.75rem minmax(0, 1fr);
  }

  .flashcard-hero {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .flashcard-hero > div {
    margin-left: 0;
  }
}

.manga-reader-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  align-items: start;
}

.manga-stage {
  min-height: min(76vh, 58rem);
}

.manga-toolbar {
  gap: 0.55rem;
  flex-wrap: wrap;
}

.manga-toolbar #manga-scan-page {
  box-shadow: 0 0.18rem 0 rgba(104, 66, 42, 0.18);
}

.manga-scan-status {
  color: var(--brown);
  font-size: 0.82rem;
  font-weight: 800;
  min-width: 12rem;
}

.manga-dictionary-panel {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 6rem);
  overflow: auto;
}

@media (max-width: 980px) {
  .manga-reader-layout {
    grid-template-columns: 1fr;
  }

  .manga-dictionary-panel {
    position: sticky;
    bottom: 0;
    top: auto;
    max-height: 52vh;
  }
}

/* Shared Library-inspired system pass */
.tool-page:not(.manga-page),
.profile-page,
.course-detail-page,
.pinyin-page,
.quiz-page {
  max-width: var(--ll-page-max);
  padding: var(--ll-page-padding) var(--ll-page-padding) var(--ll-page-padding-bottom);
  background: var(--ll-lined-paper);
  border: var(--ll-border-soft);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow-soft);
}

.tool-page:not(.manga-page) h1,
.profile-page h1,
.course-detail-page h1,
.pinyin-page h1,
.quiz-page h1 {
  font-size: var(--ll-text-h1, clamp(2rem, 3.2vw, 2.75rem));
  line-height: 1.08;
}

.tool-page:not(.manga-page) .section-heading.compact,
.profile-page .section-heading.compact {
  margin-bottom: var(--ll-section-gap);
}

.tool-page:not(.manga-page) .handwritten,
.profile-page .handwritten,
.course-detail-page .handwritten,
.pinyin-page .handwritten,
.quiz-page .handwritten {
  max-width: 62rem;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
}

/* Story/podcast intro description ("A story exploring…"): soften it so it sits
   quietly under the title instead of competing — normal weight (was 500) and a
   muted warm tone at a calmer size. Podcast reader pages also carry
   .story-page, so this one rule covers both. */
.tool-page.story-page .handwritten {
  max-width: 44rem;
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  font-weight: 400;
  color: rgba(123, 92, 67, 0.66);
  line-height: 1.55;
}

.button:not(.hero-cta) {
  min-height: 2.45rem;
  padding: 0.58rem 0.88rem;
  border: 1px solid rgba(123, 92, 67, 0.22);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow-button);
}

.vocab-tools,
.mapping-form,
.inline-mapping,
.reader-controls,
.flashcard-actions,
.deck-create-tabs,
.source-modal-card,
.deck-modal-card {
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.9), rgba(255, 246, 230, 0.84)),
    var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.17);
  border-radius: var(--ll-radius-soft);
  box-shadow: var(--ll-elev-1);
}

.deck-card,
.vocab-card,
.journal-stat,
.profile-note,
.teacher-card,
.universe-grid > article,
.course-folder,
.review-card,
.badge-preview,
.saved-decks,
.review-panel,
.quiz-card,
.sound-panel {
  background: var(--ll-card-paper);
  border: var(--ll-border-soft);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow-soft);
}

.deck-card,
.vocab-card,
.journal-stat,
.profile-note,
.teacher-card,
.universe-grid > article,
.course-folder,
.quiz-card,
.sound-panel {
  padding: var(--ll-card-padding);
}

input,
select,
textarea {
  min-height: 2.45rem;
  color: var(--ink);
  background: rgba(255, 252, 244, 0.96);
  border: 1px solid rgba(123, 92, 67, 0.26);
  border-radius: var(--ll-r-8);
  box-shadow: none;
}

label,
.mini-label {
  color: var(--brown);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.deck-card,
.course-folder,
.library-card,
.refreshed-exercise-grid .exercise-card {
  overflow: visible;
}

.deck-card .washi-tape,
.course-folder .washi-tape,
.library-card .washi-tape,
.refreshed-exercise-grid .exercise-card .washi-tape {
  opacity: 1;
  filter: saturate(1.08) drop-shadow(0 0.18rem 0.18rem rgba(123, 92, 67, 0.1));
}

@media (max-width: 620px) {
  .tool-page:not(.manga-page),
  .profile-page,
  .course-detail-page,
  .pinyin-page,
  .quiz-page {
    padding: 1.1rem;
  }
}

/* Flashcards decks page focused polish */
.flashcards-page {
  padding-bottom: clamp(2rem, 3.4vw, 2.7rem);
}

.flashcards-page.scrapbook-paper-panel::before,
.flashcards-page.scrapbook-paper-panel::after {
  display: none;
}

.scrapbook-paper-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.scrapbook-paper-panel::before {
  content: "";
  position: absolute;
  top: -1.1rem;
  left: 50%;
  z-index: 2;
  width: min(34rem, 58vw);
  height: 5.2rem;
  pointer-events: none;
  background: var(--washi-bg);
  clip-path: var(--washi-clip);
  box-shadow: var(--washi-shadow);
  opacity: 0.85;
  transform: translateX(-50%) rotate(-0.8deg);
}

.scrapbook-paper-panel::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  z-index: -1;
  width: min(20rem, 32vw);
  aspect-ratio: 1;
  pointer-events: none;
  background: url("assets/scrapbook/torn-paper-corner-collage-effect.png") right bottom / contain no-repeat;
  opacity: 0.22;
}

.scrapbook-paper-card {
  position: relative;
}

.scrapbook-paper-card::after {
  content: "";
  position: absolute;
  right: -0.15rem;
  bottom: -0.15rem;
  width: 3.3rem;
  height: 3.3rem;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 50%, rgba(123, 92, 67, 0.08) 51%),
    linear-gradient(135deg, transparent 0 48%, rgba(255, 250, 240, 0.88) 49%);
  border-bottom-right-radius: var(--ll-radius);
  opacity: 0.72;
}

.scrapbook-tape-top::before {
  content: "";
  position: absolute;
  top: -1.45rem;
  left: 50%;
  width: min(18rem, 45vw);
  height: 3.8rem;
  pointer-events: none;
  background: var(--washi-bg);
  clip-path: var(--washi-clip);
  box-shadow: var(--washi-shadow);
  opacity: 0.85;
  transform: translateX(-50%) rotate(0.6deg);
}

.flashcards-page .flashcard-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.flashcards-page .flashcard-hero > div {
  margin-left: 0;
}

.flashcards-page .flashcard-hero h1 {
  max-width: 16ch;
  margin-bottom: 0.35rem;
  font-size: var(--ll-text-h1, clamp(2rem, 3.2vw, 2.75rem));
  line-height: 0.98;
}

.flashcards-page .flashcard-hero .handwritten {
  max-width: 39rem;
  font-size: clamp(1.05rem, 1.8vw, 1.38rem);
}

.flashcards-page .create-deck-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: auto;
  min-width: 9.25rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  color: #fffaf0;
  background: var(--red);
  border: 1px solid rgba(123, 92, 67, 0.22);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow-button);
}

.flashcards-page .create-deck-button span {
  width: 1.65rem;
  height: 1.65rem;
  color: var(--red);
  background: #fffaf0;
  border-radius: 999px;
  font-size: 1.05rem;
  line-height: 1;
}

.flashcards-page .create-deck-button strong {
  font-size: 0.9rem;
  line-height: 1;
}

.flashcards-page .saved-decks {
  margin-top: 1.15rem;
  padding: 1rem;
}

.flashcards-page .saved-decks .section-heading.compact {
  margin-bottom: 0.85rem;
}

.flashcards-page .saved-decks h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  line-height: 1.05;
}

.flashcards-page .deck-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.15rem;
}

.flashcards-page .deck-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(2.8rem, auto) auto auto 1fr auto;
  min-height: 14.25rem;
  gap: 0.45rem;
  align-content: start;
  padding: 2.2rem 1.1rem 1rem;
  transform: none;
}

.flashcards-page .deck-card:nth-child(2n) {
  transform: none;
}

.flashcards-page .deck-card .washi-tape {
  top: -0.62rem;
  left: 50%;
  z-index: 2;
  width: clamp(96px, 30vw, 120px);
  height: 22px;
  transform: translateX(-50%) rotate(-1.2deg);
}

.flashcards-page .deck-card:nth-child(2n) .washi-tape {
  transform: translateX(-50%) rotate(1.1deg);
}

.flashcards-page .deck-card .stamp {
  max-width: 100%;
  margin: 0;
  padding: 0.22rem 0.45rem;
  overflow: hidden;
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flashcards-page .deck-card h3 {
  display: -webkit-box;
  margin: 0.15rem 0 0;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(1.28rem, 2.1vw, 1.65rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.flashcards-page .deck-card p {
  margin: 0.2rem 0 0;
  color: var(--brown);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
}

.flashcards-page .deck-card small {
  color: rgba(60, 43, 32, 0.62);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.25;
}

.flashcards-page .deck-actions {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.flashcards-page .deck-actions .button {
  min-height: 2.2rem;
  padding: 0.48rem 0.68rem;
  font-size: 0.82rem;
  box-shadow: var(--ll-shadow-button);
}

.flashcards-page .deck-actions .button.secondary {
  color: var(--brown);
  background: #f8e9c7;
}

.flashcards-page .deck-actions [data-action="delete"] {
  color: rgba(60, 43, 32, 0.68);
  background: rgba(255, 250, 240, 0.72);
  border-color: rgba(123, 92, 67, 0.16);
  box-shadow: none;
}

@media (max-width: 900px) {
  .flashcards-page .flashcard-hero {
    grid-template-columns: 1fr;
  }

  .flashcards-page .create-deck-button {
    justify-self: start;
  }

  .flashcards-page .deck-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .flashcards-page .deck-list {
    grid-template-columns: 1fr;
  }
}

/* Flashcards v2 polish */
.flashcards-page .flashcard-hero {
  margin-bottom: 1rem;
}

.flashcards-page .flashcard-hero h1 {
  max-width: 19ch;
  font-size: var(--ll-text-h1, clamp(2rem, 3.2vw, 2.75rem));
  line-height: 1;
}

.flashcards-page .flashcard-hero .handwritten {
  font-size: clamp(1rem, 1.45vw, 1.22rem);
}

.flashcards-page .saved-decks {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: clamp(0.9rem, 1.7vw, 1.1rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 250, 240, 0.9)),
    #fff6e4;
  border: 1px solid rgba(123, 92, 67, 0.16);
  box-shadow: var(--ll-elev-2);
}

.flashcards-page .saved-decks::before {
  content: "";
  position: absolute;
  top: -1.7rem;
  left: 50%;
  z-index: 0;
  width: min(21rem, 46vw);
  height: 4.1rem;
  pointer-events: none;
  background: var(--washi-bg);
  clip-path: var(--washi-clip);
  box-shadow: var(--washi-shadow);
  opacity: 0.85;
  transform: translateX(-50%) rotate(-1.1deg);
}

.flashcards-page .saved-decks::after {
  content: "";
  position: absolute;
  right: -3.3rem;
  bottom: -3.6rem;
  z-index: 0;
  display: block;
  width: min(12rem, 24vw);
  aspect-ratio: 1;
  pointer-events: none;
  background: url("assets/scrapbook/torn-paper-corner-collage-effect.png") right bottom / contain no-repeat;
  opacity: 0.16;
}

.flashcards-page .saved-decks > * {
  position: relative;
  z-index: 1;
}

.flashcards-page .deck-card {
  grid-template-rows: auto minmax(2.6rem, auto) auto auto 1fr auto auto;
  min-height: clamp(15.4rem, 18.7vw, 16.6rem);
  gap: 0.24rem;
  padding: 3.15rem 1.42rem 0.9rem;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.12), rgba(255, 250, 240, 0.08)),
    url("assets/scrapbook/deck-card-paperclip-bg.png") center / 100% 100% no-repeat;
  border-color: transparent;
  border-radius: var(--ll-r-20);
  box-shadow:
    0 12px 20px rgba(79, 51, 28, 0.07),
    0 3px 0 rgba(190, 150, 93, 0.04);
}

.flashcards-page .deck-card .washi-tape {
  display: none;
}

.flashcards-page .deck-card.scrapbook-paper-card::after {
  display: none;
}

.flashcards-page .deck-card:nth-child(3n + 2) {
  transform: rotate(-0.25deg);
}

.flashcards-page .deck-card:nth-child(3n) {
  transform: rotate(0.2deg);
}

.deck-type-label {
  width: fit-content;
  margin: 0.5rem 0 0.06rem 2.5rem;
  padding: 0.14rem 0.36rem;
  color: var(--red);
  background: rgba(255, 250, 240, 0.9);
  border: 1px solid rgba(185, 68, 54, 0.3);
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flashcards-page .deck-card h3 {
  margin: 0;
  font-size: clamp(0.97rem, 1.34vw, 1.14rem);
  line-height: 1.02;
}

.deck-primary-stat {
  display: flex;
  gap: 0.42rem;
  align-items: baseline;
  margin-top: 0;
  color: var(--red);
}

.deck-primary-stat strong {
  font-family: Georgia, serif;
  font-size: clamp(1.72rem, 2.55vw, 2.15rem);
  line-height: 0.95;
}

.deck-primary-stat span {
  color: var(--brown);
  font-size: 0.76rem;
  font-weight: 800;
}

.flashcards-page .deck-card .deck-secondary-stat {
  margin: -0.06rem 0 0;
  color: rgba(60, 43, 32, 0.68);
  font-size: 0.7rem;
}

.flashcards-page .deck-word-stats {
  gap: 0.14rem;
}

.flashcards-page .word-status-badge {
  padding: 0.08rem 0.24rem;
  font-size: 0.5rem;
  line-height: 1.05;
  white-space: nowrap;
}

.flashcards-page .deck-card small {
  font-size: 0.72rem;
}

.flashcards-page .deck-actions {
  display: grid;
  grid-template-columns: minmax(4.6rem, 1fr) repeat(3, minmax(3.25rem, auto));
  align-items: center;
  gap: 0.18rem;
  width: 100%;
  padding: 0.18rem 0.18rem 0.16rem;
  margin-top: 0.12rem;
  background: linear-gradient(180deg, rgba(255, 249, 236, 0.98), rgba(243, 227, 192, 0.94));
  border: 1px solid rgba(123, 92, 67, 0.1);
  border-radius: var(--ll-r-12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 0.14rem 0 rgba(123, 92, 67, 0.08);
}

.flashcards-page .deck-actions .button.primary {
  justify-content: center;
  min-width: 4.8rem;
  min-height: 1.72rem;
  padding: 0.28rem 0.44rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

.flashcards-page .deck-actions .button.secondary {
  min-height: 1.56rem;
  padding: 0.2rem 0.34rem;
  font-size: 0.64rem;
  white-space: nowrap;
  box-shadow: 0 0.12rem 0 rgba(123, 92, 67, 0.1);
}

.deck-modal-card {
  gap: 0.95rem;
}

.deck-create-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0.35rem;
  margin-bottom: 0.2rem;
}

.deck-create-tab {
  border-radius: var(--ll-r-12);
  background: rgba(255, 250, 240, 0.78);
  box-shadow: none;
}

.deck-create-tab.is-active {
  color: var(--ink);
  background: #f7dc83;
  border-color: rgba(185, 68, 54, 0.3);
  box-shadow: 0 0.18rem 0 rgba(123, 92, 67, 0.1);
}

.deck-create-panel {
  padding: 0.85rem;
  background: rgba(255, 250, 240, 0.58);
  border: 1px solid rgba(123, 92, 67, 0.12);
  border-radius: var(--ll-r-16);
}

.deck-mode-note {
  margin: 0 0 0.75rem;
  color: rgba(60, 43, 32, 0.72);
  font-weight: 800;
}

.deck-example {
  display: block;
  margin: -0.2rem 0 0.75rem;
  color: rgba(60, 43, 32, 0.62);
  line-height: 1.45;
}

.csv-preview-card {
  display: grid;
  gap: 0.45rem;
  max-width: 100%;
  overflow-x: auto;
  padding: 0.75rem;
  background: rgba(255, 250, 240, 0.7);
  border: 1px solid rgba(123, 92, 67, 0.14);
  border-radius: var(--ll-r-12);
}

.csv-preview-card[hidden] {
  display: none;
}

.csv-preview-card small {
  color: var(--red);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.csv-preview-card table {
  width: 100%;
  min-width: 24rem;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.csv-preview-card th,
.csv-preview-card td {
  max-width: 12rem;
  padding: 0.38rem 0.45rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(123, 92, 67, 0.12);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csv-preview-card th {
  color: var(--brown);
  font-weight: 800;
}

.empty-decks-card {
  position: relative;
  grid-column: 1 / -1;
  min-height: 17rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.98), rgba(255, 250, 240, 0.76)),
    #fff8ea;
  border: 1px solid rgba(123, 92, 67, 0.15);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow-soft);
}

.empty-decks-card::after {
  content: "";
  position: absolute;
  right: clamp(-2rem, -2vw, -0.8rem);
  bottom: -2.5rem;
  width: min(25rem, 42vw);
  aspect-ratio: 4 / 3;
  pointer-events: none;
  background: url("assets/scrapbook/minimal-stationery-paperclip.png") center / contain no-repeat;
  opacity: 0.42;
}

.empty-decks-card > div {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 28rem;
  gap: 0.65rem;
}

.empty-decks-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
}

.empty-decks-card p,
.empty-decks-card small {
  margin: 0;
  color: rgba(60, 43, 32, 0.72);
  line-height: 1.45;
}

.flashcard-review-page {
  max-width: min(68rem, calc(100vw - 2rem));
  padding: clamp(1rem, 2.5vw, 1.6rem);
}

.flashcard-review-page.scrapbook-paper-panel::after {
  width: min(16rem, 25vw);
  opacity: 0.16;
}

.flashcard-review-page.scrapbook-paper-panel::before {
  display: none;
}

.flashcard-review-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.flashcard-review-header .stamp {
  margin-bottom: 0.32rem;
}

.flashcard-review-header strong {
  display: block;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.1;
}

.review-progress {
  margin: 0;
  padding: 0.4rem 0.7rem;
  color: var(--red);
  background: rgba(255, 250, 240, 0.72);
  border: 1px solid rgba(123, 92, 67, 0.15);
  border-radius: 999px;
  font-weight: 800;
}

.review-back-button {
  white-space: nowrap;
}

.flashcard-review-page .review-page-card {
  position: relative;
  min-height: clamp(18rem, 42vw, 26rem);
  margin-top: 0;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), transparent 42%),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.06) 32px),
    #fff8ea;
  box-shadow: var(--ll-elev-3);
}

.flashcard-review-page .review-page-card::before {
  content: "";
  position: absolute;
  top: -1.15rem;
  left: 50%;
  width: min(15rem, 48vw);
  height: 3.4rem;
  pointer-events: none;
  background: var(--washi-bg);
  clip-path: var(--washi-clip);
  box-shadow: var(--washi-shadow);
  opacity: 0.85;
  transform: translateX(-50%) rotate(-0.4deg);
}

.flashcard-review-page .review-show-answer {
  margin-top: 0.95rem;
}

@media (max-width: 760px) {
  .flashcards-page .deck-actions {
    grid-template-columns: 1fr 1fr;
  }

  .deck-create-tabs,
  .flashcard-review-header {
    grid-template-columns: 1fr;
  }

  .review-progress {
    width: fit-content;
  }
}

.ll-app-preview-shell {
  display: grid;
  min-height: calc(100vh - 5.5rem);
  grid-template-columns: minmax(16rem, 29rem) minmax(22rem, 27rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vw, 4rem);
}

.ll-app-preview-copy h1 {
  max-width: 9ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--ll-text-display, clamp(2.4rem, 4.4vw, 3.6rem));
  line-height: 0.95;
}

.ll-phone-frame {
  width: min(100%, 25rem);
  margin: 0 auto;
  padding: 0.75rem;
  background: linear-gradient(145deg, #4a3428, #241913);
  border: 1px solid rgba(255, 250, 240, 0.45);
  border-radius: 3.25rem;
  box-shadow: var(--ll-elev-3);
}

.ll-phone-screen {
  position: relative;
  display: flex;
  min-height: 48rem;
  max-height: 52rem;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  padding: 1rem 1rem 5.7rem;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(123, 92, 67, 0.08) 31px),
    linear-gradient(#fffaf0, #faecd6);
  border-radius: 2.55rem;
}

.ll-phone-screen::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: 50%;
  width: 5.4rem;
  height: 0.38rem;
  border-radius: 999px;
  background: rgba(60, 43, 32, 0.22);
  transform: translateX(-50%);
}

.ll-app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
}

.ll-app-topbar p,
.ll-app-kicker {
  margin: 0;
  color: var(--lantern-red);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ll-app-topbar h2 {
  margin: 0.1rem 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.7rem;
}

.ll-app-topbar img {
  width: 4.8rem;
  height: 4.8rem;
  object-fit: contain;
  filter: drop-shadow(0 0.35rem 0.45rem rgba(123, 92, 67, 0.16));
}

.ll-app-hero-card,
.ll-app-story-card,
.ll-app-map-card,
.ll-app-practice-tile {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent),
    rgba(255, 250, 240, 0.94);
  border: 1px solid rgba(123, 92, 67, 0.16);
  box-shadow: var(--ll-elev-2);
}

.ll-app-hero-card {
  padding: 1.3rem 1rem 1rem;
  border-radius: var(--ll-r-20);
}

.ll-app-tape {
  position: absolute;
  top: -0.78rem;
  left: 50%;
  width: 9.3rem;
  height: 1.8rem;
  background: var(--washi-bg);
  clip-path: var(--washi-clip);
  box-shadow: var(--washi-shadow);
  transform: translateX(-50%) rotate(-1.5deg);
}

.ll-app-hero-card h3,
.ll-app-section-title h3,
.ll-app-map-card h3 {
  margin: 0.25rem 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.35rem;
}

.ll-app-progress-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: center;
  margin-top: 1rem;
  color: var(--dusty-brown);
  font-size: 0.78rem;
  font-weight: 800;
}

.ll-app-progress-track {
  height: 0.55rem;
  overflow: hidden;
  background: #f2dfbd;
  border-radius: 999px;
}

.ll-app-progress-track span {
  display: block;
  width: 58%;
  height: 100%;
  background: linear-gradient(90deg, var(--lantern-red), var(--warm-orange));
  border-radius: inherit;
}

.ll-app-section {
  display: grid;
  gap: 0.65rem;
}

.ll-app-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.ll-app-section-title a {
  color: var(--lantern-red);
  font-size: 0.78rem;
  font-weight: 800;
}

.ll-app-practice-list {
  display: grid;
  gap: 0.55rem;
}

.ll-app-practice-tile {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.75rem;
  align-items: center;
  min-height: 4.6rem;
  padding: 0.65rem;
  border-radius: var(--ll-r-16);
}

.ll-app-practice-tile > span {
  width: 2.5rem;
  height: 2.5rem;
  background: #fde2a0;
  border: 1px solid rgba(123, 92, 67, 0.14);
  border-radius: var(--ll-r-12);
  box-shadow: inset 0 -0.2rem rgba(123, 92, 67, 0.08);
}

.ll-app-practice-tile.red > span {
  background: #f7b5a5;
}

.ll-app-practice-tile.sage > span {
  background: #cfd9b6;
}

.ll-app-practice-tile h4,
.ll-app-story-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
}

.ll-app-practice-tile p,
.ll-app-story-card p,
.ll-app-map-card p {
  margin: 0.15rem 0 0;
  color: var(--dusty-brown);
  font-size: 0.78rem;
  line-height: 1.35;
}

.ll-app-story-card {
  display: grid;
  grid-template-columns: 5.9rem 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.6rem;
  border-radius: var(--ll-r-16);
}

.ll-app-story-card img {
  width: 5.9rem;
  height: 4.7rem;
  padding: 0.3rem;
  object-fit: contain;
  background: #fff2d8;
  border: 1px solid rgba(123, 92, 67, 0.12);
  border-radius: var(--ll-r-16);
}

.ll-app-story-card span {
  color: var(--lantern-red);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ll-app-map-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem;
  border-radius: var(--ll-r-16);
}

.ll-app-map-nodes {
  display: grid;
  grid-template-columns: repeat(3, 1.45rem);
  gap: 0.25rem;
  align-items: center;
}

.ll-app-map-nodes span {
  width: 1.45rem;
  height: 1.45rem;
  background: #f0dcc0;
  border: 2px solid rgba(123, 92, 67, 0.18);
  border-radius: 999px;
}

.ll-app-map-nodes .done {
  background: var(--sage-green);
}

.ll-app-map-nodes .current {
  background: var(--muted-gold);
  border-color: var(--lantern-red);
}

.ll-app-bottom-tabs {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  left: 0.8rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.2rem;
  padding: 0.45rem;
  background: rgba(255, 250, 240, 0.96);
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: 1.45rem;
  box-shadow: var(--ll-elev-1);
}

.ll-app-bottom-tabs button {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  padding: 0.45rem 0.15rem;
  color: var(--dusty-brown);
  background: transparent;
  border: 0;
  border-radius: var(--ll-r-16);
  font-size: 0.68rem;
  font-weight: 800;
}

.ll-app-bottom-tabs button span {
  width: 1rem;
  height: 1rem;
  background: currentColor;
  border-radius: var(--ll-r-4);
  opacity: 0.45;
}

.ll-app-bottom-tabs .is-active {
  color: var(--lantern-red);
  background: #fff0cc;
}

@media (max-width: 820px) {
  .ll-app-preview-shell {
    grid-template-columns: 1fr;
  }

  .ll-app-preview-copy {
    max-width: 32rem;
    margin: 0 auto;
    text-align: center;
  }

  .ll-app-preview-copy .stamp {
    margin-inline: auto;
  }
}

.podcast-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.podcast-card .library-cover {
  min-height: 12rem;
  height: 12rem;
}

.podcast-card h3 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.08;
}

.podcast-detail-page {
  max-width: 78rem;
}

.podcast-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 28rem);
  gap: clamp(1.2rem, 4vw, 2.4rem);
  align-items: center;
}

.podcast-hero-copy h1 {
  margin: 0.55rem 0 0;
  color: var(--ink);
  font-size: var(--ll-text-h1, clamp(2rem, 3.2vw, 2.75rem));
  line-height: 0.98;
}

.podcast-hero-image {
  position: relative;
  padding: 0.8rem;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.08) 32px),
    #fff8eb;
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-2);
}

.podcast-hero-image .washi-tape {
  top: -0.75rem;
  width: 10.5rem;
  height: 1.8rem;
}

.podcast-hero-image img {
  display: block;
  width: 100%;
  border-radius: var(--ll-r-12);
}

.podcast-player-card,
.podcast-transcript-card {
  margin-top: 1.3rem;
  padding: clamp(1rem, 3vw, 1.35rem);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.08) 32px),
    var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: var(--ll-r-12);
  box-shadow: var(--ll-elev-2);
}

.podcast-player-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 27rem);
  gap: 1rem;
  align-items: center;
}

.podcast-player-card h2,
.podcast-transcript-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.7rem, 3vw, 2.25rem);
}

.podcast-player-card p:not(.stamp) {
  margin: 0.35rem 0 0;
  color: rgba(60, 43, 32, 0.74);
}

.podcast-player-card audio {
  width: 100%;
}

.podcast-transcript-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.podcast-transcript {
  display: block;
  max-height: 32rem;
  padding: 1rem;
  overflow: auto;
  background:
    linear-gradient(90deg, rgba(185, 68, 54, 0.12) 1px, transparent 1px 4.6rem, transparent 4.6rem),
    repeating-linear-gradient(0deg, transparent, transparent 37px, rgba(77, 116, 156, 0.12) 38px),
    #fffdf7;
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: var(--ll-r-12);
}

.podcast-transcript p {
  margin: 0 0 0.75rem;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 2.05;
}

.podcast-word {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  margin: 0 0.04rem;
  padding: 0.08rem 0.1rem;
  border-bottom: 3px solid transparent;
  border-radius: var(--ll-r-8);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.podcast-word-pinyin {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.12rem);
  min-width: max-content;
  transform: translateX(-50%);
  color: rgba(185, 68, 54, 0.78);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.05;
  pointer-events: none;
  white-space: nowrap;
}

.podcast-transcript.show-pinyin .podcast-word.has-pinyin {
  margin-top: 1.1rem;
}

.podcast-transcript.show-pinyin .podcast-word.has-pinyin .podcast-word-pinyin {
  display: block;
}

.podcast-word-hanzi {
  display: block;
}

/* Per-character pinyin: each syllable sits directly above its own character
   (zǎo over 早, fàn over 饭) rather than one string centred over the whole word. */
.podcast-word .pw-char {
  position: relative;
  display: inline-block;
}
.podcast-char-pinyin {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.12rem);
  min-width: max-content;
  transform: translateX(-50%);
  color: rgba(185, 68, 54, 0.78);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.05;
  pointer-events: none;
  white-space: nowrap;
}
.podcast-transcript.show-pinyin .podcast-word.has-pinyin .podcast-char-pinyin {
  display: block;
}

.podcast-punctuation {
  display: inline;
  margin: 0 0.12rem 0 0;
  padding: 0;
  color: var(--ink);
}

.podcast-word:hover,
.podcast-word:focus-visible {
  color: #7a241c;
  background: rgba(247, 220, 131, 0.56);
  box-shadow: 0 0.14rem 0 rgba(185, 68, 54, 0.12);
}

.podcast-word.status-unseen:hover,
.podcast-word.status-unseen:focus-visible {
  border-bottom-color: var(--word-new-hover, #D8C3A5);
  border-bottom-style: dotted;
}

/* Word status shows as a coloured underline only — no full-word background fill
   (matches the story reader). The temporary tap highlight (.is-selected) below
   still uses a background, which is a separate, momentary interaction. */
.podcast-word.status-learning {
  border-bottom-color: var(--word-learning, #F2B33D);
}

.podcast-word.status-not-known {
  border-bottom-color: var(--word-needs-practice, #E8917F);
  border-bottom-style: solid;
}

.podcast-word.status-known {
  border-bottom-color: var(--word-known, #9BA15A);
}

/* Every word gets the SAME solid highlight box when selected, regardless of
   saved status — the status still reads via its coloured underline underneath.
   (Previously status words got only a faint tint here, so they looked like they
   had no background next to a plain word's solid box.) */
.podcast-word.is-selected.status-learning,
.podcast-word.is-selected.status-not-known,
.podcast-word.is-selected.status-known,
.podcast-word.is-selected.status-unseen {
  background: var(--word-selected-bg, #FFF3CF);
  box-shadow: inset 0 0 0 1px var(--word-selected-border, rgba(91, 70, 54, 0.16));
}

.podcast-word.is-active {
  color: #7a241c;
  background: rgba(247, 220, 131, 0.82);
  box-shadow: 0 0.18rem 0 rgba(185, 68, 54, 0.18);
}

.reader-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: flex-end;
  margin: 0.75rem 0 0.85rem;
}

.word-state-legend {
  position: relative;
  color: rgba(60, 43, 32, 0.78);
  font-size: 0.82rem;
  font-weight: 800;
}

.word-state-legend summary {
  cursor: pointer;
  width: fit-content;
  padding: 0.42rem 0.7rem;
  background: rgba(255, 250, 240, 0.76);
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: 999px;
  box-shadow: 0 0.18rem 0 rgba(123, 92, 67, 0.08);
  list-style-position: inside;
}

.word-state-legend[open] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  padding: 0.38rem 0.55rem;
  background: rgba(255, 250, 240, 0.72);
  border: 1px solid rgba(123, 92, 67, 0.14);
  border-radius: var(--ll-r-16);
}

.word-state-legend[open] summary {
  box-shadow: none;
}

.word-state-legend span {
  display: inline-flex;
  gap: 0.28rem;
  align-items: center;
  white-space: nowrap;
}

.legend-swatch {
  display: inline-block;
  width: 1rem;
  height: 0.45rem;
  border-radius: 999px;
}

.legend-swatch.learning {
  background: var(--word-learning-bg);
  border-bottom: 3px solid var(--word-learning);
}

.legend-swatch.needs-practice {
  background: var(--word-needs-practice-bg);
  border-bottom: 3px dotted var(--word-needs-practice);
}

.legend-swatch.known {
  background: rgba(155, 161, 90, 0.07);
  border-bottom: 2px solid color-mix(in srgb, var(--word-known) 72%, transparent);
}

.story-text.show-pinyin .story-word.has-pinyin {
  position: relative;
  margin-top: 1.1rem;
}

.story-text.show-pinyin .story-word.has-pinyin::before {
  content: attr(data-pinyin);
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.08rem);
  min-width: max-content;
  color: rgba(185, 68, 54, 0.78);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.05;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

/* Pinyin scaffolding fades as the learner masters each word:
   needs-practice / new = full, learning = faded, known = no pinyin.
   The margin-top above is kept in every case so the baseline stays even. */
.story-text.show-pinyin .story-word.status-learning.has-pinyin::before {
  color: rgba(185, 68, 54, 0.34);
}
.story-text.show-pinyin .story-word.status-known.has-pinyin::before {
  content: none;
}

@media (max-width: 860px) {
  .podcast-grid,
  .podcast-hero,
  .podcast-player-card {
    grid-template-columns: 1fr;
  }
}

/* Glow and premium access MVP */
.glow-tag,
.unlocked-tag,
.exercise-sheet-tag {
  border-color: rgba(207, 137, 43, 0.38) !important;
  background: rgba(255, 233, 169, 0.72) !important;
  color: #8f541e !important;
}

.unlocked-tag {
  border-color: rgba(129, 142, 75, 0.45) !important;
  background: rgba(224, 231, 194, 0.8) !important;
  color: #59602f !important;
}

.exercise-sheet-tag {
  border-color: rgba(192, 72, 54, 0.26) !important;
  background: rgba(255, 247, 224, 0.88) !important;
  color: var(--red) !important;
}

.access-modal-card {
  max-width: 500px;
}

/* Email sign-in (magic link) block inside the sign-in modal */
.sign-in-or { display: flex; align-items: center; gap: 0.6rem; margin: 0.95rem 0 0.75rem; color: var(--brown, #7b5c43); font-size: 0.82rem; font-weight: 700; }
.sign-in-or::before, .sign-in-or::after { content: ""; height: 1px; flex: 1; background: rgba(123, 92, 67, 0.2); }
.sign-in-email { text-align: left; }
.sign-in-email-label { display: block; font-weight: 800; font-size: 0.85rem; color: var(--brown, #7b5c43); margin: 0 0 0.35rem; }
.sign-in-email-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: stretch; }
.sign-in-email-row input { flex: 1 1 12rem; min-width: 0; padding: 0.55rem 0.7rem; border: 1px solid rgba(123, 92, 67, 0.3); border-radius: var(--ll-r-8); font: inherit; background: #fff; }
.sign-in-email-row .button { flex: 0 0 auto; }
.sign-in-email-status { margin: 0.55rem 0 0; font-size: 0.85rem; font-weight: 600; color: #4f5a2f; }
.sign-in-email-status.is-error { color: #a8432f; }
.sign-in-keep { margin-top: 0.85rem; width: 100%; }

.glow-unlock-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid rgba(133, 91, 54, 0.18);
  border-radius: var(--ll-r-20);
  background: rgba(255, 242, 203, 0.72);
  color: var(--brown);
  font-weight: 800;
}

.glow-unlock-balance strong {
  color: var(--red);
  font-family: var(--font-serif);
  font-size: 2rem;
}

.access-modal-note {
  display: block;
  margin-top: 0.75rem;
  color: var(--brown);
  font-weight: 800;
}

.premium-feature-preview {
  padding-top: 3rem;
}

.premium-feature-card {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem);
}

.premium-feature-card h1 {
  max-width: 760px;
}

.premium-feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.3rem 0 0.5rem;
}

.glow-home-preview-section {
  padding-top: clamp(1rem, 2vw, 1.35rem);
  padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

.glow-home-preview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 1fr) auto;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 1.4rem);
  overflow: visible;
}

.glow-home-preview .washi-tape {
  top: -0.55rem;
  left: 50%;
  width: 9rem;
  transform: translateX(-50%) rotate(-1.5deg);
}

.glow-home-preview h2 {
  margin: 0.15rem 0 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.02;
}

.glow-home-preview .handwritten {
  margin: 0.35rem 0 0;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
}

.glow-home-list {
  display: grid;
  gap: 0.42rem;
  margin: 0;
  padding: 0;
  color: var(--brown);
  font-weight: 700;
  list-style: none;
}

.glow-home-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.42rem 0.58rem;
  border: 1px solid rgba(123, 92, 67, 0.12);
  border-radius: var(--ll-r-12);
  background: rgba(255, 246, 224, 0.72);
}

.glow-home-list span {
  color: #8f541e;
  font-weight: 750;
  white-space: nowrap;
}

.glow-quests-page {
  max-width: 1120px;
}

.glow-balance-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(133, 91, 54, 0.18);
  border-radius: var(--ll-r-20);
  background: linear-gradient(135deg, rgba(255, 243, 208, 0.95), rgba(255, 251, 240, 0.88));
  box-shadow: var(--soft-shadow);
}

.glow-balance-panel span,
.quest-reward {
  display: block;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.glow-balance-panel strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--ll-text-h1, clamp(2rem, 3.2vw, 2.75rem));
  line-height: 0.95;
}

.glow-balance-panel p {
  margin: 0;
  color: var(--brown);
  font-weight: 700;
}

.quest-section {
  margin-top: 1.5rem;
}

.quest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.quest-card {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.2rem;
  border: 1px solid rgba(133, 91, 54, 0.16);
  border-radius: var(--ll-r-20);
  background:
    linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12)),
    var(--paper);
  box-shadow: var(--ll-elev-2);
}

.quest-card.is-claimed {
  border-color: rgba(155, 161, 90, 0.38);
  background:
    linear-gradient(rgba(245, 250, 218, 0.56), rgba(255, 255, 255, 0.1)),
    var(--paper);
}

.quest-card.is-capped {
  opacity: 0.78;
}

.quest-card h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.35rem;
}

.quest-card p {
  flex: 1;
  margin: 0;
  color: var(--brown);
}

.quest-card .button {
  align-self: flex-start;
}

.quest-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

@media (max-width: 850px) {
  .glow-home-preview {
    grid-template-columns: 1fr;
  }

  .glow-home-preview .button {
    width: fit-content;
  }

  .quest-grid {
    grid-template-columns: 1fr;
  }

  .glow-balance-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Professional Little Lantern polish layer
   Keeps the existing static pages and behaviours, but gives shared UI a calmer,
   more adult scrapbook system. */
html {
  scroll-padding-top: 6.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  color: var(--ll-ink);
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(90deg, rgba(133, 99, 58, 0.035) 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(80, 60, 42, 0.04) 0 1px, transparent 1px 40px),
    #fbedd3;
  background-size: 48px 48px, auto, auto;
}

body,
p,
li,
button,
input,
select,
textarea {
  letter-spacing: 0;
}

.site-header {
  min-height: 5.4rem;
  padding: 0.75rem clamp(1rem, 3vw, 3rem);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  background: rgba(255, 246, 230, 0.94);
  border-bottom: 1px solid rgba(123, 92, 67, 0.14);
  box-shadow: var(--ll-elev-2);
}

.brand,
.brand-mark,
.brand-mark-nav {
  flex: 0 0 auto;
}

.brand-mark-nav {
  width: auto;
  height: clamp(3.5rem, 4.6vw, 4.35rem);
  max-height: 4.35rem;
  object-fit: contain;
}

.paper-tabs {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.paper-tabs a,
.glow-balance-link,
.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: 999px;
  color: var(--ll-ink);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 0.96rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(255, 250, 240, 0.82);
  box-shadow: 0 3px 0 rgba(88, 58, 32, 0.08);
  white-space: nowrap;
}

.paper-tabs a:hover,
.glow-balance-link:hover,
.auth-button:hover {
  transform: translateY(-1px);
  border-color: rgba(189, 72, 58, 0.28);
  background: rgba(255, 243, 220, 0.94);
}

.paper-tabs a.is-active,
.paper-tabs a[aria-current="page"],
.glow-balance-link {
  border-color: rgba(189, 72, 58, 0.18);
  background: rgba(242, 179, 61, 0.22);
}

main,
.section,
.tool-shell,
.profile-shell,
.course-shell,
.about-shell {
  min-height: auto !important;
}

.section {
  padding: clamp(1.8rem, 4vw, 3.4rem) clamp(1rem, 3vw, 2rem);
}

.tool-page,
.profile-page,
.library-page,
.course-detail-page,
.reader-page,
.flashcard-shell,
.practice-page,
.about-shell .tool-page,
.latest-page,
.chengyu-page {
  width: min(calc(100vw - 2rem), var(--ll-page-max));
  margin-inline: auto;
  padding: clamp(1.35rem, 3vw, 2.2rem);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-16);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(123, 92, 67, 0.055) 39px),
    rgba(255, 250, 240, 0.94);
  box-shadow: var(--ll-shadow-panel);
}

.tool-page > :first-child,
.profile-page > :first-child,
.library-page > :first-child {
  margin-top: 0;
}

/* One mature heading voice site-wide: warm editorial serif, calm
   weight, connected to the marketing pages. (Replaces the previous
   ultra-heavy rounded display treatment.) */
h1,
h2,
h3,
.section-heading h1,
.section-heading h2,
.profile-hero h1,
.story-header h1,
.library-hero h1,
.flashcard-shell h1,
.tool-page h1,
.course-detail-page h1 {
  color: var(--ll-ink);
  font-family: var(--ll-font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

h1,
.section-heading h1,
.tool-page h1,
.profile-hero h1,
.flashcard-shell h1 {
  max-width: 20ch;
  font-size: var(--ll-text-h1);
}

.library-hero h1,
.course-detail-page h1,
.story-header h1 {
  font-size: var(--ll-text-h1);
}

h2,
.section-heading h2 {
  font-size: var(--ll-text-h2);
}

h3 {
  font-size: var(--ll-text-h3);
}

.handwritten {
  max-width: 44rem;
  color: var(--ll-coral);
  font-family: var(--ll-font-sans);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 650;
  line-height: 1.5;
}

.stamp,
.eyebrow,
.tag,
.lantern-badge,
.source-chip,
.story-tag,
.course-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.55rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(189, 72, 58, 0.42);
  border-radius: var(--ll-r-4);
  color: var(--ll-coral);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255, 250, 240, 0.78);
  box-shadow: 0 2px 0 rgba(123, 92, 67, 0.08);
}

.button,
button,
input[type="button"],
input[type="submit"],
.primary-button,
.tile-cta,
.lesson-button,
.review-button {
  border-radius: var(--ll-r-8);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  min-height: 2.55rem;
  padding: 0.62rem 1rem;
  box-shadow: var(--ll-button-shadow);
}

.button.primary,
.primary-button,
.tile-cta,
.review-button,
button.primary {
  border: 1px solid rgba(119, 48, 36, 0.2);
  color: #fffaf0;
  background: var(--ll-coral);
}

.button.secondary,
.button.quiet,
.secondary,
.quiet {
  color: var(--ll-ink);
  background: rgba(255, 243, 220, 0.92);
  border: 1px solid rgba(123, 92, 67, 0.18);
}

input,
select,
textarea {
  border: 1px solid rgba(123, 92, 67, 0.2);
  border-radius: var(--ll-r-8);
  color: var(--ll-ink);
  background: rgba(255, 250, 240, 0.9);
}

label,
.form-label {
  color: var(--ll-muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.paper-card,
.content-card,
.story-card,
.course-card,
.latest-tile,
.practice-card,
.journal-stat,
.badge-card,
.teacher-card,
.source-credit-card,
.latest-feed-card,
.chengyu-feature-card,
.profile-note,
.course-note,
.locked-story-card,
.glow-home-preview,
.quest-card {
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-12);
  color: var(--ll-ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(0deg, transparent, transparent 33px, rgba(123, 92, 67, 0.045) 34px),
    rgba(255, 250, 240, 0.94);
  box-shadow: var(--ll-shadow-card);
}

.story-card,
.course-card,
.latest-feed-card,
.practice-card,
.badge-card {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.story-card:hover,
.course-card:hover,
.latest-feed-card:hover,
.practice-card:hover,
.badge-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ll-elev-2);
}

.latest-feed-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}

.latest-feed-card {
  display: flex;
  min-height: 15rem;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem;
}

.latest-feed-card h2 {
  margin: 0.15rem 0 0;
  font-size: 1.55rem;
}

.latest-feed-card p,
.latest-feed-card span {
  margin: 0;
  color: var(--ll-muted);
}

.latest-feed-card .button {
  width: fit-content;
  margin-top: auto;
}

.chengyu-feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: end;
  margin-top: 1.3rem;
  padding: clamp(1rem, 2.2vw, 1.5rem);
}

.chengyu-feature-card h2 {
  margin: 0.25rem 0 0;
  font-family: "Noto Sans SC", sans-serif;
  font-size: clamp(2.3rem, 5vw, 4rem);
}

.pinyin-line {
  color: var(--ll-coral);
  font-weight: 800;
}

/* Chengyu of the day — home-page card */
.cotd-section { margin-top: 1.4rem; }
.cotd-card {
  display: block;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--paper, #fffdf7);
  border: 1px solid rgba(123, 92, 67, 0.2);
  border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-2);
  text-decoration: none;
  color: var(--ink, #3c2b20);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.cotd-card:hover { transform: translateY(-3px); box-shadow: var(--ll-elev-2); }
.cotd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cotd-head .stamp { margin: 0; }
.cotd-date { color: var(--brown, #7b5c43); font-size: 0.82rem; font-weight: 700; }
.cotd-hanzi {
  margin: 0.5rem 0 0.1rem;
  font-family: "Noto Sans SC", sans-serif;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.1;
}
.cotd-pinyin { margin: 0; color: var(--ll-coral, #c8402f); font-weight: 800; font-size: 1.05rem; }
.cotd-meaning { margin: 0.5rem 0 0; font-size: 1.02rem; }
.cotd-example {
  margin: 0.9rem 0 0.15rem;
  padding: 0.65rem 0.85rem;
  background: #fbf1d6;
  border-left: 3px solid var(--ll-coral, #c8402f);
  border-radius: var(--ll-r-8);
  font-family: "Noto Sans SC", sans-serif;
  font-size: 1.15rem;
}
.cotd-example-en { margin: 0 0 0; padding: 0 0.85rem; color: rgba(60, 43, 32, 0.75); font-size: 0.92rem; }
.cotd-more { display: inline-block; margin-top: 0.9rem; color: var(--ll-coral, #c8402f); font-weight: 800; font-size: 0.9rem; }
.chengyu-example { font-size: 1.1rem; }
.chengyu-example-en { color: rgba(60, 43, 32, 0.75); margin-top: 0.15rem; }
.chengyu-actions { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; }
.cotd-saved-msg { color: #4f5a2f; font-weight: 800; font-size: 0.9rem; text-align: center; }

/* Chengyu of the day — horizontal torn-paper strip (foot of the home page) */
.cotd-strip {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  background: #f7edd3; border-color: #e5d5ae;
  box-shadow: var(--ll-elev-1);
}
.cotd-strip:hover { transform: translateY(-2px); box-shadow: var(--ll-elev-2); }
.cotd-strip__main { min-width: 0; }
.cotd-hanzi-line { margin: 0.4rem 0 0; display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.cotd-strip .cotd-hanzi { margin: 0; font-size: clamp(2rem, 4vw, 2.9rem); }
.cotd-strip .cotd-pinyin { font-size: clamp(1rem, 1.6vw, 1.2rem); }
.cotd-strip__meaning { min-width: 0; padding-left: clamp(1rem, 3vw, 2.4rem); border-left: 1px solid rgba(123, 92, 67, 0.2); }
.cotd-strip .cotd-meaning { margin: 0; font-size: 0.98rem; color: rgba(60, 43, 32, 0.82); line-height: 1.5; }
.cotd-strip .cotd-more { margin-top: 0.5rem; }
@media (max-width: 640px) {
  .cotd-strip { grid-template-columns: 1fr; gap: 0.7rem; }
  .cotd-strip__meaning { border-left: 0; border-top: 1px solid rgba(123, 92, 67, 0.2); padding-left: 0; padding-top: 0.7rem; }
}

/* Weekly streak row beside the "Welcome back" greeting */
.dash__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.4rem); flex-wrap: wrap;
}
.dash__head-text { min-width: 0; flex: 1 1 22rem; }
.dash__week { flex: 0 0 auto; width: auto; max-width: 22rem; margin: 0; }
.dash__week .hp-day { flex: 0 0 auto; width: 2rem; }

/* Streak widget — the week row and the day count in one small paper card, so
   the dots read as a thing rather than floating beside the greeting. Matches
   .journey-card below it (same tokens, smaller radius). */
.dash__streakcard {
  flex: 0 0 auto;
  display: grid; gap: 0.45rem; justify-items: start;
  padding: 0.7rem 1rem 0.8rem;
  background: var(--home-card-bg, #fffaf0);
  border: 1px solid var(--home-border, rgba(123, 92, 67, 0.16));
  border-radius: var(--ll-r-16);
  box-shadow: var(--home-shadow, 0 4px 14px rgba(88, 58, 32, 0.07));
}
.dash__streakcard .dash__week { width: 100%; max-width: none; gap: 0.3rem; margin: 0; }
.dash__streakcard .dash__week .hp-day { width: 1.6rem; }

.teacher-card {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1.1rem;
}

.teacher-card .profile-logo {
  width: 8rem;
  height: auto;
  object-fit: contain;
}

.universe-grid,
.teacher-model-grid,
.profile-grid,
.progression-profile-grid {
  gap: 1rem;
}

.dictionary-placeholder,
.empty-state,
.locked-story-card {
  color: var(--ll-muted);
}

.dictionary-placeholder p,
.empty-state p {
  margin: 0;
}

.video-placeholder,
.audio-placeholder {
  min-height: 7rem;
  border: 1px dashed rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-12);
  color: var(--ll-muted);
  background: rgba(255, 243, 220, 0.55);
}

.story-text,
.story-word,
.hanzi,
.zh,
[lang="zh"],
.chapter-stack {
  font-family: "Noto Sans SC", "Nunito", sans-serif;
}

/* Focused practice route polish */
.practice-intro {
  max-width: 46rem;
  margin: 0.35rem 0 1.2rem;
  color: var(--ll-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.practice-session-card,
.locked-preview-card {
  position: relative;
  margin-top: 1.25rem;
  padding: clamp(1rem, 2.3vw, 1.55rem);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 250, 239, 0.2)),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(123, 92, 67, 0.045) 32px),
    rgba(255, 251, 242, 0.96);
  box-shadow: var(--ll-elev-2);
}

.practice-progress-row,
.practice-result-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  color: var(--ll-muted);
  font-weight: 800;
}

.practice-score-pill,
.practice-result-row span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.28rem 0.75rem;
  border: 1px solid rgba(123, 92, 67, 0.14);
  border-radius: 999px;
  background: rgba(255, 241, 210, 0.78);
  color: var(--ll-coral);
  font-size: 0.92rem;
}

/* "Practising <word>" chip above the English prompt in Sentence Builder. */
.practice-focus {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem;
  margin: 0.9rem 0 0; padding: 0.5rem 0.9rem; max-width: 100%;
  background: rgba(232, 145, 127, 0.12);
  border: 1px solid rgba(232, 145, 127, 0.4); border-radius: var(--ll-r-16);
}
.practice-focus-label {
  font-family: "Nunito", system-ui, sans-serif; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ll-muted, #8a7a63);
}
.practice-focus-word { font-family: "Noto Sans SC", sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--red, #b04a34); }
.practice-focus-py { font-style: italic; color: var(--brown, #7b5c43); }
.practice-focus-en { flex-basis: 100%; color: var(--ll-muted, #8a7a63); font-size: 0.92rem; line-height: 1.45; }

.practice-prompt {
  margin: 1rem 0 0.4rem;
  color: var(--ll-ink);
  font-family: "Noto Sans SC", "Nunito", sans-serif;
  font-size: clamp(1.8rem, 4.3vw, 3.2rem);
  font-weight: 800;
  line-height: 1.25;
}

.practice-translation,
.question-help,
.audio-placeholder-note {
  margin: 0.25rem 0 1rem;
  color: var(--ll-muted);
  line-height: 1.55;
}

.answer-tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1rem 0;
}

.answer-tile {
  min-height: 2.8rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(123, 92, 67, 0.2);
  border-radius: var(--ll-r-12);
  background: rgba(255, 243, 220, 0.92);
  box-shadow: 0 5px 0 rgba(123, 92, 67, 0.08);
  color: var(--ll-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.answer-tile:hover,
.answer-tile:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 232, 181, 0.98);
  box-shadow: 0 7px 0 rgba(123, 92, 67, 0.1);
}

.answer-tile[draggable="true"] {
  touch-action: manipulation;
}

.answer-tile.is-dragging {
  opacity: 0.55;
  transform: rotate(-1deg) scale(0.98);
}

.answer-tile.is-placed {
  margin: 0.2rem;
  background: rgba(242, 179, 61, 0.22);
}

.sentence-build-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  min-height: 4.2rem;
  margin: 1rem 0;
  padding: 0.75rem;
  border: 1px dashed rgba(123, 92, 67, 0.22);
  border-radius: var(--ll-r-12);
  background: rgba(255, 248, 235, 0.8);
}

.sentence-build-area.is-drop-target,
.answer-tile-grid.is-drop-target {
  outline: 2px dashed rgba(193, 68, 52, 0.32);
  outline-offset: 4px;
  background: rgba(255, 232, 181, 0.34);
}

.feedback-panel {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--ll-r-16);
  background: rgba(245, 232, 200, 0.55);
  color: var(--ll-ink);
}

.feedback-panel.is-correct {
  border: 1px solid rgba(155, 161, 90, 0.28);
  background: rgba(155, 161, 90, 0.12);
}

.feedback-panel.is-wrong {
  border: 1px solid rgba(232, 145, 127, 0.28);
  background: rgba(232, 145, 127, 0.12);
}

.practice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.results-summary h2,
.locked-preview-card h2 {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(2rem, 4vw, 3rem);
}

.practice-result-row {
  justify-content: flex-start;
  margin: 1rem 0;
}

.locked-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}

.locked-preview-card .button {
  white-space: nowrap;
}

.pinyin-chart-preview {
  overflow-x: auto;
  margin-top: 1.2rem;
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-16);
  background: rgba(255, 251, 242, 0.94);
  box-shadow: var(--ll-shadow-card);
}

.pinyin-chart-preview table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-family: "Noto Sans SC", "Nunito", sans-serif;
}

.pinyin-chart-preview th,
.pinyin-chart-preview td {
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(123, 92, 67, 0.12);
  text-align: center;
}

.pinyin-chart-preview th {
  background: rgba(191, 67, 52, 0.11);
  color: var(--ll-coral);
  font-size: 0.82rem;
  text-transform: uppercase;
}

.pinyin-cell-button {
  border: 0;
  background: transparent;
  color: var(--ll-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.pinyin-cell-button:hover {
  color: var(--ll-coral);
  text-decoration: underline;
  text-decoration-style: dotted;
}

@media (max-width: 1100px) {
  .paper-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.2rem;
  }

  .latest-feed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .paper-tabs {
    width: 100%;
  }

  .tool-page,
  .profile-page,
  .library-page,
  .course-detail-page,
  .reader-page,
  .flashcard-shell,
  .practice-page {
    width: min(calc(100vw - 1rem), var(--ll-page-max));
    padding: 1rem;
  }

  h1,
  .section-heading h1,
  .tool-page h1,
  .profile-hero h1,
  .flashcard-shell h1 {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .latest-feed-grid,
  .teacher-card,
  .chengyu-feature-card {
    grid-template-columns: 1fr;
  }

  .story-page,
  .story-shell,
  .story-text {
    max-width: 100%;
    overflow-x: hidden;
  }

  .story-page h1,
  .story-header h1 {
    max-width: 100%;
    font-size: clamp(2.15rem, 13vw, 3.2rem);
  }

  .story-controls,
  .word-colour-legend,
  .story-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .story-text {
    font-size: clamp(1.35rem, 7vw, 1.9rem);
    line-height: 2.05;
  }

  .story-word {
    white-space: normal;
  }
}

/* ---- Practice landing ---- */
.practice-source-card,
.practice-continue-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.5vw, 1.6rem);
}

.practice-source-current {
  margin: 0.15rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--ink);
}

.practice-continue-card[hidden] {
  display: none;
}

.practice-continue-text h2 {
  margin: 0.1rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
}

.practice-continue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.practice-group {
  margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}

.practice-group .section-heading {
  margin-bottom: 1rem;
}

.exercise-card.is-coming-soon {
  opacity: 0.78;
}

.coming-soon-pill {
  align-self: flex-start;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(123, 92, 67, 0.12);
  color: rgba(60, 43, 32, 0.75);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.practice-reference-link {
  margin: 0.9rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}

.practice-reference-link a {
  font-weight: 800;
  color: var(--red);
}

.practice-reference-note {
  color: rgba(60, 43, 32, 0.65);
  font-size: 0.9rem;
}

.practice-review-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* ---- Home: next-step card + progress summary ---- */
.home-start-section {
  display: block;
}

.next-step-card {
  position: relative;
  max-width: 1120px;
  margin: 0 auto 1.1rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  text-align: left;
}

.next-step-card h2 {
  margin: 0.25rem 0 0.4rem;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.06;
}

.next-step-card .handwritten {
  margin: 0 0 1.1rem;
  max-width: 42rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.home-progress-summary {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.home-progress-summary[hidden] {
  display: none;
}

.home-progress-summary div {
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-12);
  text-align: center;
}

.home-progress-summary dt {
  color: rgba(60, 43, 32, 0.65);
  font-size: 0.85rem;
  font-weight: 700;
}

.home-progress-summary dd {
  margin: 0.2rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--ink);
}

@media (max-width: 640px) {
  .home-progress-summary {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Breadcrumb (content detail pages) ---- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.breadcrumb a {
  color: var(--red);
  font-weight: 700;
}
.breadcrumb [aria-current="page"] {
  color: rgba(60, 43, 32, 0.7);
  font-weight: 700;
}
.breadcrumb-sep {
  color: rgba(60, 43, 32, 0.4);
}

/* ---- Library: compact own-reader promo below the story grid ---- */
.library-own-reader.is-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  min-height: 0;
}
.library-own-reader.is-compact .library-own-copy {
  flex: 1 1 20rem;
}
.library-own-reader.is-compact .library-own-copy h2 {
  font-size: 1.2rem;
  margin: 0.1rem 0;
}
.library-own-reader.is-compact .library-own-copy p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(60, 43, 32, 0.7);
}

/* ---- Reusable centred locked / "being prepared" state ---- */
.locked-state {
  max-width: 40rem;
  margin: clamp(1rem, 4vw, 3rem) auto;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.locked-state h1 {
  font-family: var(--font-serif);
}
.locked-lead {
  color: rgba(60, 43, 32, 0.78);
  font-size: 1.05rem;
  max-width: 34rem;
  margin: 0.6rem auto 1.2rem;
}
.locked-benefits {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.4rem;
  display: grid;
  gap: 0.5rem;
  max-width: 26rem;
  text-align: left;
}
.locked-benefits li {
  position: relative;
  padding-left: 1.6rem;
}
.locked-benefits li::before {
  content: "\2726";
  position: absolute;
  left: 0;
  color: var(--red);
}
.locked-preview {
  margin: 0 auto 1.3rem;
  max-width: 30rem;
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  border: 1px dashed rgba(123, 92, 67, 0.35);
  border-radius: var(--ll-r-12);
  font-family: var(--font-serif);
  color: rgba(60, 43, 32, 0.85);
}
.locked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}

/* ---- Reusable "What next?" panel on content pages ---- */
.learning-next-steps {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-16);
}
.learning-next-steps__eyebrow {
  margin: 0;
  color: var(--red);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.learning-next-steps h2 {
  margin: 0.2rem 0 0.9rem;
  font-family: var(--font-serif);
}
.learning-next-steps__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* ---- Mobile / tablet bottom navigation (<=5 destinations) ---- */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 1160px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    justify-content: space-around;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 248, 235, 0.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(123, 92, 67, 0.2);
    box-shadow: var(--ll-elev-1);
  }

  .mobile-nav-link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.35rem 0.2rem;
    border-radius: var(--ll-r-12);
    color: rgba(60, 43, 32, 0.66);
    font-size: 0.68rem;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-nav-link svg {
    width: 22px;
    height: 22px;
  }

  .mobile-nav-link.is-active {
    color: var(--red);
    background: rgba(247, 220, 131, 0.55);
  }

  .mobile-nav-link:focus-visible {
    outline: 2px solid rgba(185, 68, 54, 0.65);
    outline-offset: 2px;
  }

  /* On mobile the bottom bar is the primary nav; hide the wrapped top tabs. */
  .site-header .paper-tabs {
    display: none;
  }

  body {
    padding-bottom: 4.2rem;
  }
}

/* ---- Getting-started orientation page ---- */
.onboarding {
  max-width: 52rem;
  margin: 0 auto;
}
.onboarding-intro {
  position: relative;
  max-width: 40rem;
  margin: 0 auto clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
}
.onboarding-intro .washi-tape {
  top: -0.7rem;
  left: 50%;
  width: 9rem;
  transform: translateX(-50%) rotate(-1.5deg);
}
.onboarding-intro h1 {
  margin: 0.3rem 0 0.5rem;
  font-family: var(--font-serif);
}
.onboarding-intro .handwritten {
  margin: 0 auto;
  max-width: 34rem;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
}
.onboarding-steps {
  list-style: none;
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem);
  padding: 0;
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.25rem);
}
.onboarding-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.1rem, 2.5vw, 1.5rem);
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-16);
  box-shadow: var(--shadow);
}
.onboarding-step__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #f7dc83;
  border: 1px solid rgba(185, 68, 54, 0.28);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--ink);
}
.onboarding-step h2 {
  margin: 0.1rem 0 0.35rem;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
}
.onboarding-step p {
  margin: 0 0 0.5rem;
  color: rgba(60, 43, 32, 0.82);
  line-height: 1.5;
}
.onboarding-step__link {
  font-weight: 800;
  color: var(--red);
}
.onboarding-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-align: center;
}
.onboarding-reassure {
  flex-basis: 100%;
  margin: 0.4rem 0 0;
  color: rgba(60, 43, 32, 0.6);
  font-size: 0.92rem;
}

/* ===========================================================================
   Interactive podcast exercise sheet
   =========================================================================== */
.podcast-exercise { display: block; }
.podcast-exercise-loading,
.px-empty { color: var(--brown); }

/* zh always visible; pinyin / english are toggled on the container */
.px-pinyin,
.px-en { display: none; }
.podcast-exercise.show-pinyin .px-pinyin { display: revert; }
.podcast-exercise.show-english .px-en { display: revert; }
.px-zh { font-family: "Noto Sans SC", "Nunito", sans-serif; }

/* Header / controls */
.px-header { margin-bottom: 1.4rem; }
.px-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.px-header-top h1 { margin: 0.1rem 0 0.2rem; }
.px-subtitle { margin: 0; color: var(--brown); }
.px-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: var(--ll-border-soft);
}
.px-toggles {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brown);
  font-weight: 700;
  font-size: 0.92rem;
}
.px-toggle { padding: 0.3rem 0.85rem; font-size: 0.88rem; opacity: 0.62; }
.px-toggle.is-on { opacity: 1; background: var(--sage); color: #fff; border-color: var(--sage); }
.px-score { display: flex; align-items: center; gap: 0.65rem; }
.px-score-label { font-weight: 800; color: var(--ink); white-space: nowrap; }
.px-score-bar {
  display: inline-block;
  width: 130px;
  height: 9px;
  border-radius: 999px;
  background: rgba(123, 92, 67, 0.18);
  overflow: hidden;
}
.px-score-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--sage));
  transition: width 0.35s ease;
}
/* Standalone exercise sheet: the score is a direct child of the sheet (not the
   header) so it can stick. Phones pin it under the section tabs while the
   worksheet scrolls; overflow-x: clip keeps the wrappers' horizontal clipping
   without turning them into scroll containers (which defeats sticky). */
.px-score--sheet { margin: -1.1rem 0 1.4rem; } /* pulls it back under the title, past .px-header's 1.4rem bottom margin */
@media (max-width: 640px) {
  .podcast-exercise-shell, .podcast-exercise-page { overflow-x: clip; overflow-y: visible; }
  .px-score--sheet {
    position: sticky;
    top: calc(var(--ll-header-h, 0px) + 44px); /* under the sticky header + the 44px section tabs */
    z-index: 5;
    padding: 0.45rem 0;
    margin: -1.1rem 0 1.2rem;
    background: var(--paper, #fffdf7);
    box-shadow: var(--ll-elev-1);
  }
}

/* Sections + cards */
.px-section { margin: 1.6rem 0; }
.px-section-head { margin-bottom: 0.7rem; }
.px-section-head h2 { margin: 0.1rem 0; }
.px-section-intro { margin: 0; color: var(--brown); font-size: 0.95rem; }
.px-card {
  background: var(--paper);
  border: var(--ll-border-soft);
  border-radius: var(--ll-radius-soft);
  box-shadow: var(--ll-shadow-soft);
  padding: var(--ll-card-padding);
  margin-bottom: 0.85rem;
}
.px-question-no {
  margin: 0 0 0.35rem;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--gold);
}
.px-prompt p { margin: 0.1rem 0; }
.px-prompt .px-zh { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.px-prompt .px-pinyin { color: var(--brown); font-style: italic; }
.px-prompt .px-en { color: rgba(60, 43, 32, 0.72); }
.px-warmup .px-zh,
.px-personal .px-zh { font-size: 1.1rem; }

/* Key words */
.px-keyword-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
}
.px-keyword { margin: 0; }
.px-keyword-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.px-keyword-hanzi { font-family: "Noto Sans SC", sans-serif; font-size: 1.45rem; font-weight: 800; color: var(--ink); }
.px-keyword-pinyin { color: var(--brown); font-style: italic; }
.px-keyword-en { margin: 0.15rem 0 0.4rem; font-weight: 700; color: var(--red); }
.px-keyword-example { border-top: 1px dashed rgba(123, 92, 67, 0.2); padding-top: 0.4rem; }
.px-keyword-example p { margin: 0.1rem 0; font-size: 0.92rem; }
.px-keyword-example .px-zh { font-weight: 600; }

/* Options (fill-blank + comprehension) */
.px-options { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.px-options-col { flex-direction: column; }
.px-option {
  border: 1.5px solid rgba(123, 92, 67, 0.25);
  background: var(--cream);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
.px-option:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--gold); }
.px-option:disabled { cursor: default; }
.px-option-multi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  text-align: left;
  border-radius: var(--ll-radius);
  width: 100%;
}
.px-option-multi .px-zh { font-family: "Noto Sans SC", sans-serif; font-size: 1.05rem; }
.px-option-multi .px-pinyin { font-weight: 600; font-style: italic; color: var(--brown); }
.px-option-multi .px-en { font-weight: 600; color: rgba(60, 43, 32, 0.7); }
.px-option.is-correct { background: var(--sage); border-color: var(--sage); color: #fff; }
.px-option.is-wrong { background: rgba(185, 68, 54, 0.14); border-color: var(--red); color: var(--red); }

/* Sentence builder */
.px-builder-goal { margin: 0 0 0.6rem; font-weight: 700; color: var(--ink); }
.podcast-exercise:not(.show-english) .px-builder-goal { display: block; color: var(--brown); }
.px-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 2.7rem;
  align-items: center;
  padding: 0.5rem 0.6rem;
  border: 1.5px dashed rgba(123, 92, 67, 0.35);
  border-radius: var(--ll-radius);
  background: rgba(255, 246, 230, 0.6);
  margin-bottom: 0.6rem;
}
.px-tray-empty { color: rgba(123, 92, 67, 0.6); font-style: italic; }
.px-wordbank { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.px-chip {
  font-family: "Noto Sans SC", "Nunito", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  border: 1.5px solid rgba(123, 92, 67, 0.3);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--ll-r-8);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}
.px-chip:hover:not(:disabled) { transform: translateY(-1px); background: var(--cream); }
.px-chip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.px-chip-chosen { background: var(--gold); border-color: var(--gold); color: #fff; touch-action: none; cursor: grab; }
/* Press-and-hold feedback: the tile lifts the instant you hold it, so it's
   obvious it can be picked up and dragged (podcast Build-it reorder). */
.px-chip-held {
  transform: scale(1.05);
  box-shadow: var(--ll-elev-1);
  cursor: grabbing;
  z-index: 3;
}
/* Active drag: a bigger lift. */
.px-chip-dragging {
  transform: scale(1.09);
  box-shadow: var(--ll-elev-2);
  opacity: 0.97;
  z-index: 4;
}
/* One-time wiggle so users discover the tiles can be dragged to reorder. */
@keyframes px-chip-wiggle {
  0%, 100% { transform: rotate(0deg); }
  22% { transform: rotate(-4deg); }
  44% { transform: rotate(3.4deg); }
  66% { transform: rotate(-2.4deg); }
  85% { transform: rotate(1.3deg); }
}
.px-chip-hint { animation: px-chip-wiggle 0.5s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .px-chip-hint { animation: none; } }
.px-builder-controls { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.px-check, .px-reset { padding: 0.4rem 1.1rem; }

/* Feedback + explanation */
.px-feedback { margin: 0.55rem 0 0; font-weight: 700; min-height: 1.2em; }
.px-feedback.is-correct { color: var(--sage); }
.px-feedback.is-wrong { color: var(--red); }
.px-explanation {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.8rem;
  background: rgba(143, 163, 122, 0.14);
  border-left: 3px solid var(--sage);
  border-radius: var(--ll-r-8);
  color: var(--ink);
  font-size: 0.95rem;
}

/* Personal response */
.px-textarea {
  width: 100%;
  margin-top: 0.6rem;
  border: var(--ll-border-soft);
  border-radius: var(--ll-radius);
  padding: 0.6rem 0.7rem;
  font: inherit;
  resize: vertical;
  background: var(--paper);
  color: var(--ink);
}
.px-empty { text-align: center; padding: 1.5rem; }

@media (max-width: 640px) {
  .px-controls { flex-direction: column; align-items: stretch; }
  .px-score { justify-content: space-between; }
  .px-score-bar { width: 100%; flex: 1; }
}

/* Grammar focus */
.px-grammar-pattern {
  display: inline-block;
  margin: 0 0 0.55rem;
  padding: 0.35rem 0.65rem;
  font-family: "Noto Sans SC", ui-monospace, monospace;
  font-weight: 700;
  color: var(--ink);
  background: rgba(200, 155, 60, 0.16);
  border: 1px dashed rgba(200, 155, 60, 0.55);
  border-radius: var(--ll-r-8);
}
.px-grammar-explain { margin: 0 0 0.7rem; color: var(--ink); }
.px-grammar-examples { display: grid; gap: 0.5rem; margin-bottom: 0.7rem; }
.px-grammar-example { border-left: 3px solid var(--sage); padding-left: 0.6rem; }
.px-grammar-example p { margin: 0.1rem 0; }
.px-grammar-example .px-zh { font-weight: 600; }
.px-grammar-practice { background: rgba(143, 163, 122, 0.12); border-radius: var(--ll-r-8); padding: 0.6rem 0.7rem; }
.px-grammar-practice-label { margin: 0 0 0.3rem; font-weight: 800; color: var(--sage); }
.px-grammar-answer { margin-top: 0.45rem; }
.px-grammar-answer summary { cursor: pointer; font-weight: 700; color: var(--brown); }

/* Collapsible key-word example sentences */
.px-keyword-details { margin-top: 0.4rem; border-top: 1px dashed rgba(123, 92, 67, 0.2); padding-top: 0.35rem; }
.px-keyword-details summary { cursor: pointer; font-weight: 700; color: var(--brown); font-size: 0.85rem; }
.px-keyword-details[open] summary { margin-bottom: 0.3rem; }
.px-keyword-details .px-keyword-example { border-top: none; padding-top: 0; }

/* ===========================================================================
   Episode page: pre-listening / post-listening worksheet sections
   =========================================================================== */
.podcast-prelisten,
.podcast-postlisten {
  margin: 1.4rem 0;
  padding: var(--ll-card-padding);
  background: var(--ll-card-paper);
  border: var(--ll-border-soft);
  border-radius: var(--ll-radius-soft);
  box-shadow: var(--ll-shadow-soft);
}
.podcast-prelisten { margin-top: 0; }
.podcast-worksheet-head { margin-bottom: 0.3rem; }
/* Phones: podcast-detail.js collapses the pre-listen worksheet behind its
   heading (the toggle button expands it) so the player isn't screens away. */
.podcast-prelisten.is-collapsed > :not(.podcast-worksheet-head) { display: none; }
.podcast-worksheet-toggle { margin-top: 0.65rem; }
.podcast-worksheet-head h2 { margin: 0.1rem 0; }
.podcast-worksheet-intro { margin: 0; color: var(--brown); }
.podcast-prelisten .px-section { margin: 0.9rem 0 0; }
.podcast-prelisten .px-keyword-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.podcast-postlisten { text-align: center; }
.podcast-postlisten-head h2 { margin: 0.1rem 0; }
.podcast-start-exercises { margin-top: 0.7rem; min-width: 12rem; }
.podcast-activities-score { justify-content: center; margin: 0.9rem auto 0; max-width: 24rem; }
.podcast-activities { text-align: left; margin-top: 1.1rem; }
.podcast-activities .px-section:first-child { margin-top: 0; }

/* Per-line transcript translation (toggled by "Show translation") */
.podcast-line-translation {
  display: none;
  margin: -0.45rem 0 0.9rem;
  padding-left: 0.15rem;
  color: var(--brown);
  font-family: "Nunito", sans-serif;
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.5;
}
.podcast-transcript.show-translation .podcast-line-translation { display: block; }

/* Profile: Simplified / Traditional character toggle */
.profile-settings .script-variant-toggle {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.8rem;
  flex-wrap: wrap;
}
.script-variant-toggle .button {
  flex: 0 0 auto;
  opacity: 0.7;
}
.script-variant-toggle .button[aria-pressed="true"] {
  opacity: 1;
  background: var(--sage);
  color: #fff;
  border-color: var(--sage);
}

/* "Grammar in this episode / story" — shown on podcast & story pages */
.grammar-in-content {
  margin: 1.4rem 0;
  padding: var(--ll-card-padding);
  background: var(--ll-card-paper);
  border: var(--ll-border-soft);
  border-radius: var(--ll-radius-soft);
  box-shadow: var(--ll-shadow-soft);
}
.grammar-in-content h2 { margin: 0.1rem 0; }
.grammar-in-content__intro { margin: 0 0 0.7rem; color: var(--brown); font-size: 0.95rem; }
.grammar-point-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.grammar-point > details {
  border: var(--ll-border-soft);
  border-radius: var(--ll-radius);
  background: var(--paper);
  padding: 0.55rem 0.8rem;
}
.grammar-point > details[open] { background: rgba(143, 163, 122, 0.08); }
.grammar-point summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  list-style: none;
}
.grammar-point summary::-webkit-details-marker { display: none; }
.gp-name { font-weight: 800; color: var(--ink); }
.gp-cn { font-family: "Noto Sans SC", sans-serif; color: var(--red); font-weight: 700; }
.gp-level {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: rgba(200, 155, 60, 0.14);
  border-radius: 999px;
  padding: 1px 9px;
}
.gp-body { margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px dashed rgba(123, 92, 67, 0.2); }
.gp-pattern {
  margin: 0 0 0.35rem;
  font-family: "Noto Sans SC", ui-monospace, monospace;
  font-weight: 700;
  color: var(--ink);
  background: rgba(200, 155, 60, 0.14);
  border: 1px dashed rgba(200, 155, 60, 0.5);
  border-radius: var(--ll-r-8);
  padding: 0.25rem 0.55rem;
  display: inline-block;
}
.gp-explain { margin: 0.2rem 0; color: var(--ink); font-size: 0.95rem; }
.gp-eg { margin: 0.3rem 0 0; }
.gp-eg-zh { font-family: "Noto Sans SC", sans-serif; font-weight: 600; }
.gp-eg-en { color: var(--brown); font-size: 0.92rem; }

/* ===========================================================================
   Grammar layer — a secondary, phrase-level annotation that sits BELOW the
   vocabulary status colours and never competes with word-level reading.
   Modes on the host: (none) off · .grammar-markers · .grammar-labels
   =========================================================================== */
.gram-span { position: relative; }
.gram-name { display: none; }

/* Give the grammar underline + labels room so they clear the next line. */
.story-text.grammar-markers p,
.podcast-transcript.grammar-markers .podcast-line { line-height: 2.7; }
.story-text.grammar-labels p,
.podcast-transcript.grammar-labels .podcast-line { line-height: 3.3; }

/* The marker: a muted-coral dashed underline beneath the whole phrase, pushed
   ~6px below the word-level status underline so the two layers don't overlap. */
.grammar-markers .gram-span,
.grammar-labels .gram-span {
  border-bottom: 2px dashed rgba(232, 145, 127, 0.85);
  padding-bottom: 6px;
  cursor: pointer;
}
/* Hover / focus: pale coral wash over the complete phrase. */
.grammar-markers .gram-span:hover,
.grammar-markers .gram-span:focus-visible,
.grammar-labels .gram-span:hover,
.grammar-labels .gram-span:focus-visible {
  background: rgba(232, 145, 127, 0.16);
  border-radius: 5px 5px 0 0;
  outline: none;
}

/* The name — a readable chip. Tooltip on hover/focus in "markers" mode; always
   shown in "labels" mode. Never smaller than ~13px; never overlaps the text. */
.gram-name {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--red);
  white-space: nowrap;
}
/* The name renders as a clickable pill chip floated just below the phrase — on
   hover/focus in "markers" mode, always in "labels" mode. It's absolutely
   positioned (out of flow) so it never stretches full-width or collides with the
   words, and it's the dedicated tap target for grammar, so grammar never
   competes with word (vocabulary) taps. */
.grammar-markers .gram-span:hover .gram-name,
.grammar-markers .gram-span:focus-visible .gram-name,
.grammar-labels .gram-name {
  display: inline-block;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--paper);
  border: 1px solid rgba(232, 145, 127, 0.75);
  border-radius: 999px;
  padding: 2px 11px;
  box-shadow: var(--ll-elev-1);
  cursor: pointer;
  pointer-events: auto;
  z-index: 6;
}
.gram-name:hover,
.gram-span:focus-visible .gram-name {
  background: rgba(232, 145, 127, 0.18);
  border-color: var(--red);
}

/* Slide-in explanation panel (opens on click) */
.grammar-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(380px, 92vw);
  background: var(--paper);
  border-left: 1px solid rgba(123, 92, 67, 0.2);
  box-shadow: var(--ll-elev-3);
  /* Clear the status bar / notch at the top and the home indicator at the
     bottom (env resolves to 0 on desktop). */
  padding: calc(1.6rem + env(safe-area-inset-top, 0px)) 1.4rem
           calc(1.4rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  z-index: 70;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  touch-action: pan-y; /* vertical scroll native; horizontal swipe -> dismiss (JS) */
}
.grammar-panel.is-open { transform: translateX(0); }
/* On phones, hug the content instead of a full-height column full of dead
   space; it becomes a rounded card anchored top-right. */
@media (max-width: 620px) {
  .grammar-panel {
    height: auto;
    max-height: 100%;
    border-bottom-left-radius: 22px;
  }
}
.grammar-panel__close {
  position: absolute; top: calc(0.8rem + env(safe-area-inset-top, 0px)); right: 0.9rem;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.15rem; color: var(--brown); line-height: 1;
}
.grammar-panel__eyebrow { margin: 0; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.grammar-panel__title { margin: 0.2rem 0 0.1rem; font-size: 1.4rem; }
.grammar-panel__cn { margin: 0 0 0.7rem; font-family: "Noto Sans SC", sans-serif; color: var(--red); font-weight: 700; }
.grammar-panel__pattern {
  font-family: "Noto Sans SC", ui-monospace, monospace;
  font-weight: 700; color: var(--ink);
  background: rgba(200, 155, 60, 0.16);
  border: 1px dashed rgba(200, 155, 60, 0.55);
  border-radius: var(--ll-r-8); padding: 0.5rem 0.7rem; margin: 0.3rem 0 0.8rem;
}
.grammar-panel__explain { color: var(--ink); line-height: 1.6; margin: 0 0 0.6rem; }
.grammar-panel__example { border-left: 3px solid var(--sage); padding-left: 0.75rem; }
.grammar-panel__eg-zh { font-family: "Noto Sans SC", sans-serif; font-size: 1.1rem; font-weight: 600; margin: 0.1rem 0; }
.grammar-panel__eg-py { color: var(--brown); font-style: italic; margin: 0.1rem 0; }
.grammar-panel__eg-en { color: rgba(60, 43, 32, 0.75); margin: 0.1rem 0; }
.grammar-panel__more {
  display: inline-block; margin-top: 1rem; font-weight: 700; color: var(--red);
  text-decoration: none; border-bottom: 2px solid rgba(176, 74, 52, 0.35);
}
.grammar-panel__more:hover { border-bottom-color: var(--red); }

/* Grammar reference page (grammar/lessons) */
/* Pass 3: align Grammar content band to the shared product width (was 60rem). */
.grammar-ref { max-width: var(--ll-page-max); margin-inline: auto; }
.grammar-ref__lead { color: var(--brown); max-width: 44rem; }
.grammar-ref__search {
  width: 100%; max-width: 30rem; box-sizing: border-box; margin: 0.5rem 0 1.5rem;
  min-height: 44px; padding: 0.5rem 0.85rem; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--ll-border-strong); border-radius: var(--ll-radius-md); background: var(--ll-surface);
  color: var(--ll-text);
}
.grammar-ref__search:focus { outline: none; border-color: var(--ll-primary); box-shadow: var(--ll-focus-ring-soft); }
.grammar-ref__loading, .grammar-ref__none { color: var(--brown); font-style: italic; }
.grammar-ref__level { margin: 1.6rem 0 0.8rem; color: var(--gold); font-size: 1.05rem; letter-spacing: 0.04em; }
.grammar-ref__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.9rem; }
.grammar-ref__card {
  background: #fffdf7; border: 1px solid rgba(123, 92, 67, 0.18); border-radius: var(--ll-r-16);
  padding: 0.9rem 1rem; scroll-margin-top: 6rem; transition: box-shadow 0.3s, border-color 0.3s;
}
.grammar-ref__card.is-target { border-color: var(--red); box-shadow: 0 0 0 3px rgba(176, 74, 52, 0.18); }
.grammar-ref__name { margin: 0 0 0.2rem; font-size: 1.08rem; }
.grammar-ref__cn { margin: 0 0 0.4rem; font-family: "Noto Sans SC", sans-serif; color: var(--red); font-weight: 700; }
.grammar-ref__pat {
  margin: 0 0 0.5rem; font-family: "Noto Sans SC", sans-serif; font-weight: 600;
  background: rgba(123, 92, 67, 0.08); border-radius: var(--ll-r-8); padding: 0.3rem 0.5rem; display: inline-block;
}
.grammar-ref__exp { color: var(--ink); line-height: 1.55; margin: 0 0 0.6rem; }
.grammar-ref__eg { border-left: 3px solid var(--sage); padding-left: 0.7rem; }
.grammar-ref__eg-zh { font-family: "Noto Sans SC", sans-serif; font-weight: 600; margin: 0.1rem 0; }
.grammar-ref__eg-py { color: var(--brown); font-style: italic; margin: 0.1rem 0; font-size: 0.9rem; }
.grammar-ref__eg-en { color: rgba(60, 43, 32, 0.75); margin: 0.1rem 0; font-size: 0.92rem; }

/* off / markers / labels segmented toggle */
.grammar-display-toggle { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.grammar-mode-btn { padding: 0.32rem 0.7rem; font-size: 0.82rem; opacity: 0.62; }
.grammar-mode-btn[aria-pressed="true"] { opacity: 1; background: var(--red); color: #fff; border-color: var(--red); }

/* ===========================================================================
   Navbar redesign — cosy three-part header (brand · centred nav · account).
   Appended last so it supersedes the earlier scattered header rules. Only
   restyles the header; routes / auth / Glow logic untouched.
   =========================================================================== */
.site-header {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  padding: 0.95rem clamp(1rem, 3vw, 2.75rem);
  min-height: 5rem;
  background: rgba(255, 247, 234, 0.96);              /* warm cream */
  border-bottom: 1px solid rgba(123, 92, 67, 0.14);  /* subtle divider... */
  box-shadow: var(--ll-elev-1);     /* ...over the scrapbook strip */
}

/* LEFT — lantern mark + wordmark beside it, linking Home */
.site-header .brand {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  text-decoration: none;
}
.site-header .brand-mark-nav {
  height: clamp(2.75rem, 3.4vw, 3.4rem);   /* ~+18% more visible than before */
  width: auto;
  max-height: 3.4rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(123, 92, 67, 0.16));
}
.site-header .brand-wordmark {
  /* Same face as the nav links beside it (Home, Learn, Library, …) */
  font-family: var(--ll-font-sans);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  color: var(--brown, #5b4433);            /* existing dark warm brown */
  letter-spacing: 0.005em;
  white-space: nowrap;
}

/* CENTRE — navigation, visually centred across the viewport */
.site-header .paper-tabs {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.28rem;
  max-width: none;
  min-width: 0;
}
/* Inactive links — light, dark-brown text, no heavy pill */
.site-header .paper-tabs a,
.site-header .paper-tabs a:nth-child(2n),
.site-header .paper-tabs a:nth-child(3n) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--brown, #5b4433);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  transform: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.site-header .paper-tabs a:hover,
.site-header .paper-tabs a:focus-visible {
  background: rgba(232, 213, 183, 0.32);            /* very subtle warm hover */
  border-color: rgba(198, 172, 138, 0.5);          /* thin warm-beige outline */
  box-shadow: none;
  transform: none;
}
/* Active — filled muted-coral pill, cream text, soft shadow, no underline */
.site-header .paper-tabs a.is-active,
.site-header .paper-tabs a[aria-current="page"] {
  padding: 0.6rem 1.05rem;                          /* slightly taller/prominent */
  background: var(--red, #c1583d);                  /* muted coral / terracotta */
  border-color: transparent;
  color: #fff6ec;                                   /* cream text */
  box-shadow: 0 6px 16px rgba(176, 74, 52, 0.28);   /* soft warm shadow */
  font-weight: 700;
}
.site-header .paper-tabs a.is-active::after { display: none; }   /* remove underline */

/* Admin — the last tab, right of Profile. Rendered only for signed-in staff
   (glow-nav.js). Filled brown pill: deliberately NOT the coral used for the
   active tab, so it reads as a separate action rather than "the page you're on".
   Only colour is declared — padding, pill shape, font and the responsive sizes
   are inherited from the nav rules above, so it can never break the header.
   Needs the `.site-header` scope to out-rank `.site-header .paper-tabs a`. */
.site-header .paper-tabs a.admin-nav-link {
  background: var(--brown, #5b4433);
  border-color: transparent;
  color: #fff6ec;
  font-weight: 700;
}
.site-header .paper-tabs a.admin-nav-link:hover,
.site-header .paper-tabs a.admin-nav-link:focus-visible {
  background: #6d5340;
  border-color: transparent;
  box-shadow: var(--ll-elev-1);
}
/* Must beat the nav's display rules so non-staff never see it. */
.admin-nav-link[hidden] { display: none !important; }
.site-header .paper-tabs a.is-active:hover,
.site-header .paper-tabs a[aria-current="page"]:hover {
  background: var(--red, #c1583d);
  border-color: transparent;
  filter: brightness(1.05);
}

/* RIGHT — Glow chip + account, grouped near each other */
.site-header .header-right {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.site-header .auth-widget { min-width: 0; gap: 0.4rem; }
.site-header .auth-status { display: none; }        /* drop "Not signed in" / labels */

/* Glow — a marigold status chip (keeps the ? help + tooltip defined earlier) */
.site-header .glow-balance-link {
  min-height: 2.5rem;
  color: #7b4e19;
  background: rgba(255, 233, 174, 0.9);             /* pale marigold cream */
  border: 1px solid rgba(200, 155, 60, 0.4);
  box-shadow: 0 2px 8px rgba(160, 120, 40, 0.12);
  font-weight: 800;
}
.site-header .glow-balance-link:hover,
.site-header .glow-balance-link:focus-visible {
  background: rgba(255, 224, 140, 0.95);
  transform: none;
}
.site-header .auth-button { min-height: 2.5rem; box-shadow: var(--ll-elev-1); }

/* Small desktop / tablet — tighten so all six links still fit */
@media (max-width: 1280px) {
  .site-header { gap: 0.5rem; padding-left: clamp(0.8rem, 2vw, 1.4rem); padding-right: clamp(0.8rem, 2vw, 1.4rem); }
  .site-header .paper-tabs { gap: 0.1rem; }
  .site-header .paper-tabs a,
  .site-header .paper-tabs a:nth-child(2n),
  .site-header .paper-tabs a:nth-child(3n) { padding: 0.46rem 0.62rem; font-size: 0.85rem; }
  .site-header .paper-tabs a.is-active,
  .site-header .paper-tabs a[aria-current="page"] { padding: 0.52rem 0.72rem; }
  .site-header .brand-wordmark { font-size: 1.05rem; }
  .site-header .brand-mark-nav { height: 2.75rem; }
  .site-header .glow-balance-link { padding: 0.5rem 0.6rem; font-size: 0.78rem; }
  .site-header .auth-button { padding: 0.5rem 0.72rem; font-size: 0.8rem; }
  .site-header .header-right { gap: 0.4rem; }
}

/* Tablet + mobile — collapse to logo + account; the bottom nav handles links */
@media (max-width: 1160px) {
  .site-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 4.4rem;
    padding: 0.7rem clamp(0.9rem, 4vw, 1.4rem);
  }
  .site-header .paper-tabs { display: none; }        /* six links -> bottom nav */
  .site-header .header-right { gap: 0.45rem; }
  .site-header .brand-mark-nav { height: 2.7rem; }
  .site-header .brand-wordmark { font-size: 1.08rem; }
}
@media (max-width: 374px) {
  /* Icon-only just on the smallest phones (<=320-360px). At 375px and up the
     "Little Lantern" wordmark fits beside the widest right-side (the guest
     Sign in / Start learning pair) with room to spare, so keep it. */
  .site-header .brand-wordmark { display: none; }
}

/* ============================================================
   HSK 1 course path — Chinese Foundations card (notebook style)
   + foundation-topic accordions. Numbered lessons reuse the
   existing .chapter-accordion look (rotated cards, Open/Close chips).
   ============================================================ */

/* The shared .course-detail-page width uses 100vw, which overcounts the
   scrollbar and causes a small horizontal overflow once the page is tall.
   Constrain it to the section content box instead. */
.course-detail-page {
  width: min(100%, var(--ll-page-max));
}

/* Foundations: a distinct "start here" notebook card above the lessons */
.foundations {
  margin-bottom: 1.5rem;
}

.foundations-recommend {
  margin: 0;
  max-width: 44rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ll-ink, #3c2b20);
}

.foundations-recommend a {
  color: var(--red, #b4472e);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.foundations-card {
  position: relative;
  padding: 1.2rem 1.3rem 1.35rem;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.08) 32px),
    linear-gradient(180deg, #fff1dc, #ffe7cb),
    var(--paper);
  border: 1px solid rgba(189, 72, 58, 0.3);
  border-radius: var(--ll-r-8);
  box-shadow: 6px 7px 0 rgba(123, 92, 67, 0.12), var(--shadow);
}

.foundations-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon badge"
    "icon title"
    "icon desc";
  column-gap: 0.9rem;
  row-gap: 0.16rem;
  align-items: center;
}

.foundations-icon {
  grid-area: icon;
  align-self: center;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--red);
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(189, 72, 58, 0.28);
  border-radius: var(--ll-r-12);
  box-shadow: 4px 4px 0 rgba(123, 92, 67, 0.12);
}

.foundations-badge {
  grid-area: badge;
  justify-self: start;
  padding: 0.22rem 0.5rem;
  color: #fffaf0;
  background: var(--red);
  border-radius: var(--ll-r-4);
  font: 900 0.68rem/1.1 "Nunito", system-ui, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.foundations-head h2 {
  grid-area: title;
  margin: 0;
  font-family: Georgia, "Songti SC", "Microsoft YaHei", serif;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  color: var(--ink);
}

.foundations-desc {
  grid-area: desc;
  margin: 0;
  color: var(--brown);
  line-height: 1.4;
}

.foundations-topics {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.05rem;
}

.foundations-note {
  margin: 0.95rem 0 0;
  color: var(--brown);
  font-size: 0.85rem;
  font-style: italic;
}

/* Foundation topics reuse the chapter-accordion look, minus the number
   column and the notebook tilt (they sit inside the Foundations card). */
.foundation-topic {
  transform: none !important;
}

.foundation-topic summary {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 3.4rem;
}

.foundation-topic summary strong {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.foundation-topic .chapter-body {
  padding: 0.9rem 1.1rem 1.05rem;
}

/* Chinese lesson titles + the one-line summary in the accordion header */
.chapter-heading {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.chapter-accordion summary strong[lang="zh"] {
  font-family: Georgia, "Songti SC", "SimSun", "Microsoft YaHei", serif;
}

.chapter-summary {
  color: var(--brown);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ---------- Foundation topic body content ---------- */
.foundation-lead {
  margin: 0 0 0.6rem;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.45;
}

.foundation-points {
  margin: 0 0 0.8rem;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.3rem;
  color: var(--brown);
  line-height: 1.45;
}

.foundation-example {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  width: fit-content;
  padding: 0.5rem 0.8rem;
  background: rgba(247, 220, 131, 0.28);
  border: 1px dashed rgba(123, 92, 67, 0.3);
  border-radius: var(--ll-r-8);
}

.fe-hanzi {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--ink);
}

.fe-pinyin {
  color: var(--red);
  font-weight: 800;
}

.fe-english {
  color: var(--brown);
}

.foundation-link {
  display: inline-block;
  margin-top: 0.7rem;
  color: var(--red);
  font-weight: 800;
}

.tone-list {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 0.8rem;
  padding: 0;
  list-style: none;
}

.tone-item {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(123, 92, 67, 0.14);
  border-radius: var(--ll-r-8);
}

.tone-mark {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--red);
  text-align: center;
}

.tone-text {
  display: flex;
  flex-direction: column;
}

.tone-text strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.tone-text span {
  color: var(--brown);
  font-size: 0.86rem;
}

.tone-example {
  margin: 0;
  padding: 0.55rem 0.8rem;
  background: rgba(247, 220, 131, 0.28);
  border: 1px dashed rgba(123, 92, 67, 0.3);
  border-radius: var(--ll-r-8);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.05em;
}

.svo-blocks {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
}

.svo-block {
  display: grid;
  gap: 0.15rem;
  flex: 1 1 5rem;
  min-width: 4.5rem;
  padding: 0.6rem 0.7rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(123, 92, 67, 0.16);
  border-radius: var(--ll-r-8);
  text-align: center;
}

.svo-hanzi {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--ink);
}

.svo-role {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red);
}

.svo-en {
  font-size: 0.85rem;
  color: var(--brown);
}

.svo-plus {
  display: flex;
  align-items: center;
  color: var(--brown);
  font-weight: 800;
  font-size: 1.1rem;
}

.foundation-note-line {
  margin: 0;
  padding: 0.5rem 0.7rem;
  background: rgba(155, 161, 90, 0.16);
  border-left: 3px solid rgba(155, 161, 90, 0.55);
  border-radius: var(--ll-r-8);
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.4;
}

.study-flow {
  margin: 0 0 0.2rem;
  padding-left: 1.35rem;
  display: grid;
  gap: 0.3rem;
  color: var(--ink);
  line-height: 1.4;
}

.study-flow li {
  padding-left: 0.15rem;
}

/* ============================================================================
   "Continue learning" homepage card (data painted by assets/home-action.js).
   Reuses the shared palette tokens (--red terracotta, --ink, --sage, --gold,
   --paper) plus a few inline accent tints; no duplicate colour variables.
   ========================================================================== */
.continue-card {
  max-width: 1120px;
  margin: 0 auto;
  color: var(--ink);
  background: var(--paper);
  background-image: var(--ll-card-paper);
  border: 1px solid rgba(105, 77, 53, 0.16);
  border-radius: var(--ll-r-20);
  box-shadow: var(--ll-elev-2);
  padding: clamp(1.15rem, 2.5vw, 1.6rem) clamp(1.3rem, 3vw, 2rem);
}
.continue-card[hidden] { display: none; }

.continue-card__main {
  display: grid;
  grid-template-columns: 1.15fr 0.8fr 0.85fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}

/* left column */
.continue-card__title { font-size: 1.25rem; margin: 0 0 0.6rem; color: var(--ink); }
.continue-card__due-line { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; }
.continue-card__due-count { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 800; line-height: 1; color: var(--red); }
.continue-card__due-line span { color: rgba(60, 43, 32, 0.72); font-weight: 600; }
.continue-card__copy { margin: 0 0 1rem; color: rgba(60, 43, 32, 0.7); }
.continue-card__cta { align-self: start; }

/* centre progress ring */
.continue-card__progress { display: grid; place-items: center; }
.continue-ring {
  width: clamp(128px, 15vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--ll-elev-1);
}
.continue-ring__inner {
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(123, 92, 67, 0.14);
}
.continue-ring__lantern { width: 34px; height: 34px; object-fit: contain; margin-bottom: 1px; }
.continue-ring__caption { font-size: 0.72rem; font-weight: 800; line-height: 1.1; color: var(--gold); }

/* right column stats */
.continue-card__stats { display: grid; gap: 0.1rem; }
.continue-stat {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(105, 77, 53, 0.1);
}
.continue-stat--last { border-bottom: none; }
.continue-stat__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.continue-stat__icon img { width: 1.55rem; height: 1.55rem; object-fit: contain; }
.continue-stat__icon--learning { background: rgba(223, 166, 75, 0.2); }
.continue-stat__icon--due { background: rgba(224, 123, 57, 0.16); }
.continue-stat__icon--known { background: rgba(143, 157, 120, 0.22); }
.continue-stat strong { font-size: 1.35rem; font-weight: 800; line-height: 1.1; display: block; }
.continue-stat span { font-size: 0.82rem; color: rgba(60, 43, 32, 0.68); }

/* bottom streak strip */
.continue-card__activity {
  margin-top: clamp(0.8rem, 2vw, 1.1rem);
  padding-top: clamp(0.7rem, 2vw, 1rem);
  border-top: 1px solid rgba(105, 77, 53, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.continue-streak { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; color: var(--ink); }
.continue-streak__flame { display: inline-flex; }
.continue-streak__days { display: flex; gap: 0.55rem; }
.continue-day { display: grid; justify-items: center; gap: 3px; }
.continue-day i { font-style: normal; font-size: 0.68rem; color: rgba(60, 43, 32, 0.5); }
.continue-day b {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 1.5px solid rgba(105, 77, 53, 0.25);
  background: transparent;
}
.continue-day--active b { background: #dfa64b; border-color: #dfa64b; }
.continue-day--today i { color: var(--red); font-weight: 800; }
.continue-day--today b { border-color: var(--red); }

/* tablet */
@media (max-width: 900px) {
  .continue-card__main { grid-template-columns: 1.1fr 0.9fr; }
  .continue-card__stats { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .continue-card__stats .continue-stat { border-bottom: none; }
}
/* mobile: stack heading/review, ring, stats, streak */
@media (max-width: 760px) {
  .continue-card__main { grid-template-columns: 1fr; text-align: left; }
  .continue-card__progress { justify-self: center; }
  .continue-card__stats { grid-template-columns: repeat(3, 1fr); }
  .continue-card__activity { flex-direction: column; align-items: flex-start; }
  .continue-streak__days { align-self: stretch; justify-content: space-between; }
}

/* ============================================================
   Homepage progress panel — Continue learning · Review due ·
   Today's goal, with a Learning / Known / streak stat row.
   One shared cream-paper panel, subtle column dividers.
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.home-progress-section { padding-top: 0.5rem; }
.home-progress-panel {
  max-width: 62rem;
  margin: 0 auto;
  background: var(--paper, #fffaf0);
  border: 1px solid rgba(123, 92, 67, 0.28);
  border-radius: var(--ll-r-20);
  box-shadow: var(--ll-elev-2);
  padding: clamp(1.25rem, 3.5vw, 2.1rem);
  background-image: radial-gradient(rgba(123, 92, 67, 0.05) 1px, transparent 1px);
  background-size: 16px 16px;
}
.home-progress-panel[hidden] { display: none; }

.hp-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.9rem);
}
.hp-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0 clamp(0.4rem, 1.4vw, 1.1rem);
}
/* Thin, subtle vertical dividers between the three columns. */
.hp-col + .hp-col { border-left: 1px solid rgba(123, 92, 67, 0.16); }

.hp-icon {
  display: inline-grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  margin-bottom: 0.15rem;
}
.hp-icon--mustard { background: rgba(200, 155, 60, 0.18); }
.hp-icon--coral { background: rgba(224, 123, 57, 0.16); }
.hp-icon--olive { background: rgba(143, 163, 122, 0.22); }

.hp-col__title { margin: 0; font-size: 1.12rem; font-weight: 800; color: var(--ink, #3c2b20); }
.hp-col__pos { margin: 0; font-weight: 700; color: rgba(60, 43, 32, 0.78); }
.hp-col__meta { margin: 0; font-size: 0.9rem; color: rgba(60, 43, 32, 0.66); font-weight: 600; }
.hp-col__copy { margin: 0.15rem 0 0.2rem; font-size: 0.9rem; color: rgba(60, 43, 32, 0.62); line-height: 1.4; }

/* Progress bars */
.hp-bar { width: 100%; }
.hp-bar__track {
  width: 100%; height: 8px; border-radius: 999px;
  background: rgba(123, 92, 67, 0.15); overflow: hidden;
}
.hp-bar__fill { display: block; height: 100%; border-radius: 999px; transition: width 260ms ease; }
.hp-bar__fill--olive { background: var(--sage, #8fa37a); }
.hp-bar__fill--mustard { background: var(--gold, #c89b3c); }

/* Buttons */
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 0.35rem; padding: 0.62rem 1.15rem;
  font-weight: 800; font-size: 0.98rem; text-decoration: none;
  border-radius: var(--ll-r-12); border: 1.6px solid var(--red, #b94436);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.hp-btn--filled { background: var(--red, #b94436); color: #fffaf0; box-shadow: 0 8px 18px rgba(185, 68, 54, 0.24); }
.hp-btn--filled:hover { background: #a53c30; }
.hp-btn--outline { background: transparent; color: var(--red, #b94436); }
.hp-btn--outline:hover { background: rgba(185, 68, 54, 0.08); }
.hp-btn--ghost { background: transparent; color: var(--red, #b94436); border-color: transparent; padding-left: 0; }
.hp-btn--ghost:hover { text-decoration: underline; }
.hp-btn:focus-visible { outline: 3px solid rgba(185, 68, 54, 0.4); outline-offset: 2px; }

/* Column 2 — Review is the strongest priority (larger terracotta number). */
.hp-col--review { position: relative; }
.hp-review__num { margin: 0; }
.hp-review__num strong { font-size: clamp(2.6rem, 7vw, 3.4rem); font-weight: 800; line-height: 1; color: var(--red, #b94436); }
.hp-review__caught { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.hp-review__caught[hidden] { display: none; }
.hp-review__caught-line { font-weight: 800; color: var(--sage, #6f8256); font-size: 1.05rem; }

/* Column 3 — weekday circles */
.hp-week { display: flex; gap: 0.4rem; width: 100%; margin: 0.2rem 0 0.1rem; }
.hp-day { display: grid; justify-items: center; gap: 4px; flex: 1; }
.hp-day i { font-style: normal; font-size: 0.66rem; font-weight: 700; color: rgba(60, 43, 32, 0.5); }
.hp-day b {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid rgba(123, 92, 67, 0.3); background: transparent;
}
.hp-day--active b { background: var(--gold, #c89b3c); border-color: var(--gold, #c89b3c); }
.hp-day--today i { color: var(--red, #b94436); font-weight: 800; }
.hp-day--today b { border-color: var(--red, #b94436); border-width: 2px; }
.hp-day--future b { opacity: 0.5; }

/* Divider + bottom statistics */
.hp-divider { border: none; border-top: 1px solid rgba(123, 92, 67, 0.16); margin: clamp(1rem, 2.5vw, 1.5rem) 0 clamp(0.9rem, 2vw, 1.15rem); }
.hp-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.4rem, 5vw, 3.2rem); }
.hp-stat { display: flex; align-items: center; gap: 0.55rem; }
.hp-stat__icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--ll-r-8); }
.hp-stat__icon img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.hp-stat__icon--learning { background: rgba(200, 155, 60, 0.18); }
.hp-stat__icon--known { background: rgba(143, 163, 122, 0.22); }
.hp-stat__icon--streak { background: rgba(224, 123, 57, 0.14); }
.hp-stat p { margin: 0; display: flex; align-items: baseline; gap: 0.35rem; }
.hp-stat strong { font-size: 1.3rem; font-weight: 800; color: var(--ink, #3c2b20); line-height: 1; }
.hp-stat span { font-size: 0.9rem; color: rgba(60, 43, 32, 0.68); font-weight: 600; }

/* Tablet — keep 3 columns but tighten; drop to 2+1 when it gets cramped. */
@media (max-width: 900px) {
  .hp-columns { gap: 0.9rem; }
  .hp-col { padding: 0 0.5rem; }
}
@media (max-width: 720px) {
  .hp-columns { grid-template-columns: repeat(2, 1fr); }
  /* second row single column spans full width; reset the vertical divider and
     add a horizontal one above the wrapped item. */
  .hp-col { border-left: none; padding: 0.9rem 0.2rem 0; border-top: 1px solid rgba(123, 92, 67, 0.14); }
  .hp-col:first-child, .hp-col:nth-child(2) { border-top: none; padding-top: 0; }
  .hp-col--goal { grid-column: 1 / -1; }
}
/* Mobile — stack all three inside the same panel with horizontal dividers. */
@media (max-width: 540px) {
  .hp-columns { grid-template-columns: 1fr; gap: 0; }
  .hp-col { border-left: none; border-top: 1px solid rgba(123, 92, 67, 0.14); padding: 1rem 0.1rem; }
  .hp-col:first-child { border-top: none; padding-top: 0; }
  .hp-col--goal { grid-column: auto; }
  .hp-stats { gap: 1.1rem; justify-content: space-between; }
  .hp-stat { flex: 1; justify-content: center; }
}

/* ============================================================
   Flashcards deck cards (2026 index-card redesign)
   Only the deck-card visuals were kept; the page shell reuses the
   original scrapbook hero + panel. The reverted .deck-list lays
   these cards out 2-up (see `.flashcards-page .deck-list`).
   ============================================================ */
.fc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fdfaf3;
  border: 1px solid #ebe0cb;
  border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-2);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.fc-card:hover { transform: translateY(-2px); box-shadow: var(--ll-elev-2); }
.fc-card__tab {
  display: block;
  height: 8px;
  border-radius: 16px 16px 0 0;
  background: var(--deck-accent, #b6503c);
}
.fc-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.3rem 1.2rem;
}
.fc-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.fc-badge {
  display: inline-flex;
  align-items: center;
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--deck-accent, #b6503c);
  border: 1.5px solid color-mix(in srgb, var(--deck-accent, #b6503c) 42%, transparent);
  background: color-mix(in srgb, var(--deck-accent, #b6503c) 9%, #ffffff);
  border-radius: 999px;
  padding: 0.34rem 0.72rem;
}

/* overflow menu (Edit / Export / Delete) */
.fc-card__overflow { position: relative; flex: 0 0 auto; margin-left: auto; }
.fc-card__menu-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 0.5;
  letter-spacing: 1px;
  color: #a5926f;
  padding: 0.2rem 0.4rem;
  border-radius: var(--ll-r-8);
}
.fc-card__menu-btn:hover { background: rgba(120, 90, 55, 0.10); color: #6d5636; }
.fc-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 6;
  min-width: 132px;
  display: flex;
  flex-direction: column;
  padding: 0.35rem;
  background: #ffffff;
  border: 1px solid #e7dcc6;
  border-radius: var(--ll-r-12);
  box-shadow: var(--ll-elev-2);
}
.fc-menu[hidden] { display: none; }
.fc-menu button {
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #4a3826;
  padding: 0.5rem 0.65rem;
  border-radius: var(--ll-r-8);
}
.fc-menu button:hover { background: #f4ece0; }
.fc-menu button[data-action="delete"] { color: #b6503c; }

.fc-card__title {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 1.34rem;
  line-height: 1.15;
  color: #33241a;
  margin: 0.15rem 0 0;
}
.fc-card__due { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.05rem; }
.fc-card__due strong {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 2.55rem;
  line-height: 1;
  color: var(--deck-accent, #b6503c);
}
.fc-card__due span {
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  font-size: 0.95rem;
  color: #6d5b45;
}
.fc-card__total {
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  font-size: 0.85rem;
  color: #8a785f;
  margin: 0;
}

/* segmented status bar */
.fc-bar {
  display: flex;
  gap: 3px;
  height: 9px;
  margin: 0.55rem 0 0.15rem;
}
.fc-bar__seg { display: block; border-radius: 999px; min-width: 7px; }
.fc-bar__seg--new { background: #e4d6bb; }
.fc-bar__seg--practice { background: #e79b83; }
.fc-bar__seg--learning { background: #e6b45a; }
.fc-bar__seg--known { background: #9caf7f; }
.fc-bar--empty { opacity: 0.5; }

/* legend */
.fc-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0.4rem 0 0;
  padding: 0;
}
.fc-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  font-size: 0.82rem;
  color: #6d5b45;
}
.fc-dot { width: 0.62rem; height: 0.62rem; border-radius: 50%; display: inline-block; }
.fc-dot--new { background: #cbb891; }
.fc-dot--practice { background: #e79b83; }
.fc-dot--learning { background: #e6b45a; }
.fc-dot--known { background: #8f9d78; }

/* footer */
.fc-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.7rem;
  padding-top: 0.85rem;
  border-top: 1px solid #efe6d3;
}
.fc-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  font-size: 0.82rem;
  color: #a08d70;
}
.fc-review {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #b6503c;
  color: #fff8ef;
  border: none;
  border-radius: var(--ll-r-12);
  padding: 0.6rem 1.55rem;
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(150, 60, 38, 0.24);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fc-review:hover { transform: translateY(-1px); box-shadow: 0 9px 18px rgba(150, 60, 38, 0.30); color: #fff8ef; }
.fc-review--wide { padding: 0.72rem 1.7rem; margin-top: 0.5rem; }

/* empty state */
.fc-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1.5px dashed #e0d2b8;
  border-radius: var(--ll-r-16);
  background: #fdfaf3;
}
.fc-empty__mark { color: #c9a86a; }
.fc-empty h3 { font-family: Georgia, serif; font-weight: 700; font-size: 1.4rem; color: #33241a; margin: 0.3rem 0 0; }
.fc-empty p { font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif; color: #6d5b45; margin: 0; max-width: 34ch; }
.fc-empty__hint { font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif; color: #a08d70; margin-top: 0.3rem; }

@media (max-width: 620px) {
  .fc-head { flex-direction: column; }
  .fc-create { align-self: flex-start; }
}

/* ============================================================
   Story reader redesign (2026-07) — calm, book-like reading.
   Centred 1050px column · 38–44px hanzi · flat characters
   (a soft tile only on hover/select) · pinyin above each char ·
   Story / Study modes · soft rounded spoken & selected
   highlights (no tall columns) · grammar as subtle underlines.
   Appended last so it wins over the earlier scattered rules.
   ============================================================ */

/* Centred reading column on the notebook page */
.story-page .story-text {
  display: block;
  max-width: 1050px;
  margin-inline: auto;
  padding: clamp(1.25rem, 3.5vw, 2.5rem) clamp(1.1rem, 4vw, 3rem);
  border-radius: var(--ll-r-12);
}

/* Chinese text — larger glyphs, generous line rhythm, tight tracking */
.story-page .story-text p {
  font-family: "Noto Serif SC", "Songti SC", "Noto Sans SC", Georgia, serif;
  font-size: clamp(1.7rem, 1rem + 1.75vw, 2.7rem);   /* ~38–43px on desktop */
  line-height: 2.5;                                   /* breathing room between lines */
  letter-spacing: 0;
  margin: 0 0 0.35rem;
  text-align: left;
  color: var(--ink);
}
/* Study mode adds underlines, so give the lines a touch more room */
.story-page .story-text.grammar-markers p { line-height: 2.85; }

/* Characters sit naturally on the page: no card, no shadow, tight spacing */
.story-page .story-word {
  display: inline-block;
  position: relative;
  padding: 0.02em 0.05em;
  margin: 0;
  line-height: 1.16;               /* keeps the highlight tile hugging the glyph */
  vertical-align: baseline;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--ll-r-4);
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background 0.14s ease, box-shadow 0.14s ease;
}

/* Trailing punctuation rides inside its character's box so 。，！？；： can
   never begin a line and a single glyph is not stranded from its comma. */
.story-page .story-word[data-trail]::after { content: attr(data-trail); }

/* ── Unified word-status underline ──────────────────────────────────────────
   ONE clean solid underline for every reader (podcast, story, library token,
   study mode), of a learner-adjustable thickness. Replaces the old mix of dotted
   text-decoration + border + box-shadow that produced double lines. The tap-select
   / karaoke highlights (.is-selected / .is-active) are excluded so they keep their
   background. */
/* The underline itself — one solid line of adjustable thickness — applies to EVERY
   status word, even the one you just tapped (selected). !important so it reliably
   beats the older per-reader rules and any reader-mode context. */
.reader-word.status-learning, .reader-word.status-not-known, .reader-word.status-known, .reader-word.status-mastered,
.story-word.status-learning, .story-word.status-not-known, .story-word.status-known,
.podcast-word.status-learning, .podcast-word.status-not-known, .podcast-word.status-known {
  text-decoration: none !important;
  border-bottom-style: solid !important;
  border-bottom-width: var(--word-underline-thickness, 3px) !important;
}
.reader-word.status-learning, .story-word.status-learning, .podcast-word.status-learning {
  border-bottom-color: var(--word-learning, #f2b33d) !important;
}
.reader-word.status-not-known, .story-word.status-not-known, .podcast-word.status-not-known {
  border-bottom-color: var(--word-needs-practice, #e8917f) !important;
}
.reader-word.status-known, .reader-word.status-mastered, .story-word.status-known, .podcast-word.status-known {
  border-bottom-color: var(--word-known, #9ba15a) !important;
}

/* Podcast reader: use the SAME straight text-decoration underline as the story
   reader — drawn on the hanzi only (pinyin is absolutely positioned, punctuation
   is a sibling), so it reads as one clean straight line instead of a border that
   curves on the rounded word. Thickness + colour follow the profile settings, so
   the slider now controls the podcast AND story readers identically. */
.podcast-word.status-learning, .podcast-word.status-not-known, .podcast-word.status-known {
  border-bottom-color: transparent !important;
}
.podcast-word.status-learning .podcast-word-hanzi, .podcast-word.status-learning .pw-char-hanzi { text-decoration-color: var(--word-learning, #f2b33d); }
.podcast-word.status-not-known .podcast-word-hanzi, .podcast-word.status-not-known .pw-char-hanzi { text-decoration-color: var(--word-needs-practice, #e8917f); }
.podcast-word.status-known .podcast-word-hanzi, .podcast-word.status-known .pw-char-hanzi { text-decoration-color: var(--word-known, #9ba15a); }
.podcast-word.status-learning .podcast-word-hanzi, .podcast-word.status-not-known .podcast-word-hanzi, .podcast-word.status-known .podcast-word-hanzi,
.podcast-word.status-learning .pw-char-hanzi, .podcast-word.status-not-known .pw-char-hanzi, .podcast-word.status-known .pw-char-hanzi {
  text-decoration-line: underline;
  text-decoration-thickness: var(--word-underline-thickness, 3px);
  text-underline-offset: 6px;
  text-decoration-skip-ink: none;
}

/* Clear the OLD fill / fake box-shadow underline — but only when the word is not
   the active tap-select / karaoke highlight, so those keep their background. */
.reader-word.status-learning:not(.is-selected):not(.is-active),
.reader-word.status-not-known:not(.is-selected):not(.is-active),
.reader-word.status-known:not(.is-selected):not(.is-active),
.reader-word.status-mastered:not(.is-selected):not(.is-active),
.story-word.status-learning:not(.is-selected):not(.is-active),
.story-word.status-not-known:not(.is-selected):not(.is-active),
.story-word.status-known:not(.is-selected):not(.is-active),
.podcast-word.status-learning:not(.is-selected):not(.is-active),
.podcast-word.status-not-known:not(.is-selected):not(.is-active),
.podcast-word.status-known:not(.is-selected):not(.is-active) {
  background: transparent;
  box-shadow: none;
}

/* Hover / selection / karaoke tints paint the HANZI span, not the whole word
   button — so a trailing punctuation mark glued inside the button (the 。 kept
   with the preceding word so it can't wrap to a line start) is never swept into
   the highlight. */
.story-page .story-word:hover,
.story-page .story-word:focus-visible { outline: none; }
.story-page .story-word:hover .story-word__hanzi,
.story-page .story-word:focus-visible .story-word__hanzi {
  background: rgba(123, 92, 67, 0.09) !important;
  border-radius: var(--ll-r-4);
}
/* Manually selected word — coral tile + ring */
.story-page .story-word.is-selected .story-word__hanzi {
  background: rgba(232, 145, 127, 0.28) !important;
  box-shadow: 0 0 0 1.6px rgba(185, 68, 54, 0.42) !important;
  border-radius: var(--ll-r-4);
}
/* Currently spoken word (karaoke) — soft rounded gold highlight hugging the word */
.story-page .story-word.is-active { color: #7a241c; }
.story-page .story-word.is-active .story-word__hanzi {
  background: rgba(247, 209, 108, 0.92) !important;
  border-radius: var(--ll-r-8);
  box-shadow: none !important;
}
.story-page .story-word.is-active.is-selected .story-word__hanzi {
  box-shadow: 0 0 0 1.6px rgba(185, 68, 54, 0.42) !important;
}

/* Pinyin directly above each character — ~13px, coral, centred */
.story-page .story-text.show-pinyin .story-word.has-pinyin { margin-top: 1.4em; }
.story-page .story-text.show-pinyin .story-word.has-pinyin::before {
  content: attr(data-pinyin);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.05em);
  transform: translateX(-50%);
  min-width: max-content;
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8rem;               /* ~13px */
  font-weight: 700;
  line-height: 1;
  color: rgba(185, 68, 54, 0.82);
  white-space: nowrap;
  pointer-events: none;
}
/* pinyin stays visible at every knowledge level (just softer once known) */
.story-page .story-text.show-pinyin .story-word.status-learning.has-pinyin::before { color: rgba(185, 68, 54, 0.72); }
.story-page .story-text.show-pinyin .story-word.status-known.has-pinyin::before { content: attr(data-pinyin); color: rgba(185, 68, 54, 0.55); }

/* ---- Story / Study segmented toggle (replaces the 3-way grammar switch) ---- */
.story-page .reader-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  max-width: 1050px;
  margin: 0 auto 0.5rem;
}
.grammar-display-toggle { display: none !important; }   /* replaced by the book-icon grammar system */
.reader-mode-toggle {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  background: rgba(123, 92, 67, 0.1);
  border-radius: 999px;
}
.reader-mode-toggle button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--brown);
  padding: 0.42rem 1rem;
  border-radius: 999px;
  transition: background 0.14s ease, color 0.14s ease;
}
.reader-mode-toggle button[aria-pressed="true"] { background: var(--red); color: #fff; }

/* (Obsolete Story/Study-mode grammar rules removed — the v3 grammar styling
   below owns the dashed line + book icon.) */

@media (max-width: 860px) {
  .story-page .story-text p { font-size: clamp(1.45rem, 5.4vw, 2rem); line-height: 2.3; }
  .story-page .story-text.grammar-markers p { line-height: 2.7; }
}

/* ============================================================
   Story reader v3 (2026-07) — vocabulary underlines drive colour +
   pinyin visibility; grammar shows as a small purple book icon plus
   an optional pale-lavender phrase highlight. Appended last so it
   wins over the earlier story-reader rules.
   ============================================================ */

/* Vocabulary status: applies to the whole segmented word. Two custom properties
   carry the mapping — underline colour + pinyin opacity. Hanzi stays dark brown. */
.story-page .story-word { --pinyin-opacity: 1; --status-colour: transparent; }
.story-page .word-status--new            { --pinyin-opacity: 1;   --status-colour: transparent; }
.story-page .word-status--learning       { --pinyin-opacity: 0.5; --status-colour: var(--word-learning, #d8a84e); }
.story-page .word-status--needs-practice { --pinyin-opacity: 1;   --status-colour: var(--word-needs-practice, #d98272); }
.story-page .word-status--known          { --pinyin-opacity: 0;   --status-colour: var(--word-known, #8faf8c); }
/* A learner's custom marker (word-markers.js) hides the pinyin like a known
   word, whatever the learning status is. Extra specificity wins over the rules
   above. */
.story-page .story-word[data-word-marker] { --pinyin-opacity: 0; }

/* ---- Podcast transcript: the same pinyin-by-status rule as the story reader.
   known → hidden, learning → 50% faded, needs-practice / unseen → full, and a
   custom marker hides it too. Opacity (not display) keeps the words vertically
   aligned since the pinyin's space is preserved. ---- */
.podcast-word.status-known      { --pinyin-opacity: 0; }
.podcast-word.status-learning   { --pinyin-opacity: 0.5; }
.podcast-word.status-not-known,
.podcast-word.status-unseen     { --pinyin-opacity: 1; }
.podcast-word[data-word-marker] { --pinyin-opacity: 0; }
.podcast-transcript.show-pinyin .podcast-word-pinyin,
.podcast-transcript.show-pinyin .podcast-char-pinyin {
  opacity: var(--pinyin-opacity, 1);
  transition: opacity 160ms ease;
}

/* Continuous underline beneath the whole word — on the Hanzi only, so trailing
   punctuation is never underlined. Hanzi colour is always the notebook ink. */
.story-page .story-word__hanzi {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--status-colour);
  text-decoration-thickness: var(--word-underline-thickness, 2px);
  text-underline-offset: 7px;
  text-decoration-skip-ink: none;
}
.story-page .story-word__punct { text-decoration: none; color: var(--ink); }

/* Pinyin sits directly above the Hanzi; opacity follows vocabulary status. Space
   is reserved for EVERY word (via a uniform margin) so known words — whose pinyin
   is invisible — don't collapse the line or misalign neighbouring baselines. */
.story-page .story-text.show-pinyin .story-word { margin-top: 1.4em; }
.story-page .story-text.show-pinyin .story-word__hanzi.has-pinyin { position: relative; }
.story-page .story-text.show-pinyin .story-word__hanzi.has-pinyin::before {
  content: attr(data-pinyin);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.05em);
  transform: translateX(-50%);
  min-width: max-content;
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(185, 68, 54, 0.9);
  opacity: var(--pinyin-opacity);
  transition: opacity 160ms ease;
  white-space: nowrap;
  pointer-events: none;
}
/* Known word (pinyin hidden): let the learner peek by fading it in to ~35%. */
.story-page .story-text.show-pinyin .story-word:hover .story-word__hanzi.has-pinyin::before,
.story-page .story-text.show-pinyin .story-word:focus-visible .story-word__hanzi.has-pinyin::before,
.story-page .story-text.show-pinyin .story-word.is-selected .story-word__hanzi.has-pinyin::before {
  opacity: max(var(--pinyin-opacity), 0.35);
}

/* ---- Grammar: one soft dashed purple line under the WHOLE phrase, with the book
   icon sitting inside the line at its centre (the dashes vanish behind it). ---- */
:is(.story-page .story-text, .podcast-transcript) .gram-span {
  position: relative;
  padding-bottom: 6px;                /* room for the dashed line (inline padding,
                                         so it never changes line height) */
  text-decoration: none !important;
  cursor: pointer;                    /* the whole phrase is a grammar target */
  background-repeat: no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-image 140ms ease;
}
:is(.story-page .story-text, .podcast-transcript) .gram-span .gram-name { display: none !important; }

/* "Highlight grammar structures" ON → a continuous, evenly-dashed line (≈8px dash
   / 6px gap) beneath the entire phrase, drawn as a background so it never breaks
   between characters and sits below the solid vocabulary underline. */
:is(.story-page .story-text, .podcast-transcript) .gram-span.grammar-match--highlighted {
  /* Grammar is marked by the purple book icon alone now — no dashed line. */
  background-image: none;
}
/* Hover / focus / open — same dashes, stronger colour. Works whether the
   permanent highlight is on or off (so it previews a phrase when OFF). */
:is(.story-page .story-text, .podcast-transcript) .gram-span.grammar-match--active {
  background-image: none;
}


/* The book icon sits IN the CENTRE of the dashed line, replacing a section of it.
   Absolutely positioned relative to the (short particle-sized) phrase span, so it
   lands at the span's horizontal centre and on the line vertically; a small paper-
   coloured backdrop makes the dashes disappear cleanly behind it. No radius,
   shadow or pseudo-elements → no stray rounded shape hanging beneath it. */
.grammar-book-button {
  position: absolute;
  left: 50%;
  bottom: 1px;                        /* the dashed line is drawn at calc(100% - 1px) */
  transform: translate(-50%, 50%);    /* centre the icon on the line, both axes */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 0;                       /* beat the global touch-target min-height */
  min-height: 0;
  margin: 0;
  padding: 0 5px;                     /* widen the mask so it clears the dashes */
  border: 0;
  border-radius: 0;
  background: transparent;            /* backdrop is a thin strip (::before), not the whole box */
  box-shadow: none;
  color: #8067a5;
  cursor: pointer;
  line-height: 1;
  opacity: 0.9;
  transition: opacity 140ms ease;
}
/* Mask ONLY the dashed line behind the book — a thin paper-coloured strip at the
   line level — so the book never covers the vocabulary underline above it (which
   was making the status underline look faded/gapped in the middle). */
/* No mask strip: the book only shows in book mode, where there is no dashed
   line behind it to hide. (The old cream strip cut a white line through the
   solid closed-book icon.) */
.grammar-book-button::before { content: none; }
.grammar-book-button::after { content: none; }
.grammar-book-button svg { position: relative; z-index: 1; width: 26px; height: 26px; display: block; }
.grammar-book-button:hover,
.grammar-book-button:focus-visible { opacity: 1; outline: none; }

/* The book icon takes the colour of the learner's status for that grammar point
   (matching the word statuses). Unassigned points keep the default purple above. */
.gram-span[data-gstatus="known"] .grammar-book-button { color: var(--word-known, #9ba15a); }
.gram-span[data-gstatus="learning"] .grammar-book-button { color: var(--word-learning, #f2b33d); }
.gram-span[data-gstatus="needs_practice"] .grammar-book-button { color: var(--word-needs-practice, #e8917f); }
/* "Known shows no colour" preference (set from Profile): hide the book for points
   the learner has marked Known, the way a known word can show no underline. */
:root[data-known-no-color] .gram-span[data-gstatus="known"] .grammar-book-button { display: none; }

/* Status buttons inside the grammar explanation panel (mirror the word popover). */
.grammar-panel__status { margin: 14px 0 4px; }
.grammar-panel__status-label { display: block; font-size: 0.82rem; color: #6b5b4d; margin-bottom: 6px; }
.grammar-panel__status-row { display: flex; gap: 6px; flex-wrap: wrap; }
.gk-status-btn {
  flex: 1 1 auto;
  padding: 7px 10px;
  border: 1.5px solid rgba(123, 92, 67, 0.28);
  border-radius: var(--ll-r-12);
  background: #fffdf7;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5b4636;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.gk-status-btn:hover { background: #fff3df; }
.gk-status-btn.gk-known.is-active { background: var(--word-known, #9ba15a); border-color: var(--word-known, #9ba15a); color: #fff; }
.gk-status-btn.gk-learning.is-active { background: var(--word-learning, #f2b33d); border-color: var(--word-learning, #f2b33d); color: #4a3a12; }
.gk-status-btn.gk-needs.is-active { background: var(--word-needs-practice, #e8917f); border-color: var(--word-needs-practice, #e8917f); color: #fff; }

/* Profile → Word & grammar colours */
.status-colour-rows { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; max-width: 320px; }
.status-colour-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; color: #5b4636; }
.status-colour-row input[type="color"] { width: 48px; height: 30px; border: 1px solid rgba(123, 92, 67, 0.3); border-radius: var(--ll-r-8); background: none; cursor: pointer; padding: 2px; }
.status-colour-row input[type="color"]:disabled { opacity: 0.4; cursor: not-allowed; }
.status-colour-check { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #5b4636; }
.status-colour-check input { width: 18px; height: 18px; }
.status-thickness-row input[type="range"] { flex: 1 1 auto; margin: 0 10px; accent-color: var(--word-learning, #f2b33d); }
.status-thickness-value { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.status-label-input { flex: 1 1 auto; padding: 6px 10px; border: 1px solid rgba(123, 92, 67, 0.28); border-radius: var(--ll-r-8); font: inherit; font-weight: 700; color: #5b4636; background: #fffdf7; }
.markers-heading { margin: 18px 0 4px; font-size: 1.05rem; }
.highlight-style-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.highlight-style-toggle .button.is-active { background: var(--word-learning, #f2b33d); border-color: var(--word-learning, #f2b33d); color: #4a3a12; }
.markers-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; max-width: 340px; }
.marker-row { display: flex; align-items: center; gap: 10px; }
.marker-name { flex: 1 1 auto; padding: 6px 10px; border: 1px solid rgba(123, 92, 67, 0.28); border-radius: var(--ll-r-8); font: inherit; }
.marker-row input[type="color"] { width: 44px; height: 30px; border: 1px solid rgba(123, 92, 67, 0.3); border-radius: var(--ll-r-8); background: none; cursor: pointer; padding: 2px; }
.marker-remove { border: none; background: none; color: #a53a2d; font-size: 1rem; cursor: pointer; padding: 4px 8px; border-radius: var(--ll-r-8); }
.marker-remove:hover { background: #fbe6e1; }
.status-reset-row { margin-top: 14px; }

/* Custom marker buttons inside the word popover — same look as the status buttons
   (.review-rate-*), just coloured by the marker's own colour instead of --word-*. */
.word-marker-actions { display: flex; flex-wrap: wrap; gap: 0.38rem; margin-top: 0.38rem; }
.word-marker-btn {
  padding: 0.5rem 0.9rem;
  border: 1.5px solid color-mix(in srgb, var(--marker-color, #8067a5) 48%, rgba(123, 92, 67, 0.2));
  border-radius: var(--ll-r-12);
  background: color-mix(in srgb, var(--marker-color, #8067a5) 32%, var(--paper));
  box-shadow: 0 0.2rem 0 color-mix(in srgb, var(--marker-color, #8067a5) 22%, transparent);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.word-marker-btn:hover,
.word-marker-btn.is-active {
  background: color-mix(in srgb, var(--marker-color, #8067a5) 50%, var(--paper));
}

/* ============================================================================
   WORD HIGHLIGHT STYLE (Profile → Display). Controls the WORD only now — the
   grammar marker is chosen separately (see data-grammar-marker below).
   Default            = colour the word text.
   [data-highlight-style="underline"] = underline the word instead.
   Both read the per-word --status-colour (its status class, or a marker override).
   ========================================================================== */
.podcast-word.status-learning  { --status-colour: var(--word-learning, #f2b33d); }
.podcast-word.status-not-known { --status-colour: var(--word-needs-practice, #e8917f); }
.podcast-word.status-known     { --status-colour: var(--word-known, #9ba15a); }

/* --- COLOUR MODE (default): tint the hanzi, no underline --- */
:root:not([data-highlight-style="underline"]) .podcast-word.status-learning .pw-char-hanzi,
:root:not([data-highlight-style="underline"]) .podcast-word.status-learning .podcast-word-hanzi,
:root:not([data-highlight-style="underline"]) .podcast-word.status-not-known .pw-char-hanzi,
:root:not([data-highlight-style="underline"]) .podcast-word.status-not-known .podcast-word-hanzi,
:root:not([data-highlight-style="underline"]) .podcast-word.status-known .pw-char-hanzi,
:root:not([data-highlight-style="underline"]) .podcast-word.status-known .podcast-word-hanzi,
:root:not([data-highlight-style="underline"]) .podcast-word[data-word-marker] .pw-char-hanzi,
:root:not([data-highlight-style="underline"]) .podcast-word[data-word-marker] .podcast-word-hanzi {
  color: var(--status-colour) !important;
  text-decoration: none !important;
  -webkit-text-stroke: 0.55px rgba(45, 32, 22, 0.5);
  paint-order: stroke fill;
}
:root:not([data-highlight-style="underline"]) .story-page .story-word__hanzi {
  color: var(--status-colour, var(--ink)) !important;
  text-decoration: none !important;
}
/* Slim dark outline behind the coloured fill (paint-order keeps the colour vivid)
   so tinted characters stand out on the cream page — coloured statuses only. */
:root:not([data-highlight-style="underline"]) .story-page .word-status--learning .story-word__hanzi,
:root:not([data-highlight-style="underline"]) .story-page .word-status--needs-practice .story-word__hanzi,
:root:not([data-highlight-style="underline"]) .story-page .word-status--known .story-word__hanzi,
:root:not([data-highlight-style="underline"]) .story-page .story-word[data-word-marker] .story-word__hanzi {
  -webkit-text-stroke: 0.55px rgba(45, 32, 22, 0.5);
  paint-order: stroke fill;
}
/* new/unseen words (and Known when "no colour" is on) stay normal ink text, no outline */
:root:not([data-highlight-style="underline"]) .story-page .word-status--new .story-word__hanzi,
:root:not([data-highlight-style="underline"])[data-known-no-color] .story-page .word-status--known .story-word__hanzi,
:root:not([data-highlight-style="underline"])[data-known-no-color] .podcast-word.status-known .pw-char-hanzi,
:root:not([data-highlight-style="underline"])[data-known-no-color] .podcast-word.status-known .podcast-word-hanzi {
  color: var(--ink) !important;
  -webkit-text-stroke: 0 !important;
}

/* --- UNDERLINE MODE (opt-in): underline the hanzi with --status-colour --- */
:root[data-highlight-style="underline"] .podcast-word.status-learning .pw-char-hanzi,
:root[data-highlight-style="underline"] .podcast-word.status-learning .podcast-word-hanzi,
:root[data-highlight-style="underline"] .podcast-word.status-not-known .pw-char-hanzi,
:root[data-highlight-style="underline"] .podcast-word.status-not-known .podcast-word-hanzi,
:root[data-highlight-style="underline"] .podcast-word.status-known .pw-char-hanzi,
:root[data-highlight-style="underline"] .podcast-word.status-known .podcast-word-hanzi,
:root[data-highlight-style="underline"] .podcast-word[data-word-marker] .pw-char-hanzi,
:root[data-highlight-style="underline"] .podcast-word[data-word-marker] .podcast-word-hanzi {
  color: var(--ink) !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--status-colour) !important;
  text-decoration-thickness: var(--word-underline-thickness, 3px) !important;
  text-underline-offset: 6px;
  text-decoration-skip-ink: none;
}
:root[data-highlight-style="underline"] .story-page .story-word__hanzi {
  color: var(--ink) !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--status-colour) !important;
  text-decoration-thickness: var(--word-underline-thickness, 2px) !important;
  text-underline-offset: 7px;
  text-decoration-skip-ink: none;
}

/* --- GRAMMAR marker (Profile → Grammar marker) — independent of the word
       highlight style above. dash mode = a dashed line coloured by the point's
       status; book mode ([data-grammar-marker="book"]) = the book icon, which
       replaces the dash. --- */
:is(.story-page .story-text, .podcast-transcript) .gram-span { --gram-colour: #8067a5; }
:is(.story-page .story-text, .podcast-transcript) .gram-span[data-gstatus="learning"]      { --gram-colour: var(--word-learning, #f2b33d); }
:is(.story-page .story-text, .podcast-transcript) .gram-span[data-gstatus="needs_practice"] { --gram-colour: var(--word-needs-practice, #e8917f); }
:is(.story-page .story-text, .podcast-transcript) .gram-span[data-gstatus="known"]          { --gram-colour: var(--word-known, #9ba15a); }

:root:not([data-grammar-marker="book"]) :is(.story-page .story-text, .podcast-transcript) .gram-span.grammar-match--highlighted {
  background-image: repeating-linear-gradient(to right, var(--gram-colour) 0, var(--gram-colour) 7px, transparent 7px, transparent 13px);
  background-position: center calc(100% - 1px);
  background-size: calc(100% - 6px) 2px;
  background-repeat: no-repeat;
}
:root:not([data-grammar-marker="book"]) .grammar-book-button { display: none !important; }

/* Grammar TRACKING: an untracked point keeps its text but loses the dash/book. */
.gram-span.gram-untracked { background-image: none !important; }
.gram-span.gram-untracked .grammar-book-button { display: none !important; }
/* Master "Track grammar" OFF: hide every grammar highlight site-wide. */
:root[data-grammar-off] :is(.story-page .story-text, .podcast-transcript) .gram-span { background-image: none !important; }
:root[data-grammar-off] .grammar-book-button { display: none !important; }

/* "Track grammar" toggle at the top of a reader */
.grammar-track-control { margin: 0.3rem 0 0.9rem; }
.grammar-track-row { display: flex; align-items: center; gap: 0.6rem; }
.grammar-track-label { font-weight: 700; color: var(--ink, #3c2b20); font-family: "Nunito", ui-sans-serif, system-ui, sans-serif; }
.grammar-track-switch { width: 46px; height: 26px; min-width: 0; min-height: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; border-radius: 999px; border: 1.5px solid rgba(123, 92, 67, 0.3); background: #eee4d2; position: relative; cursor: pointer; transition: background .15s ease, border-color .15s ease; padding: 0; margin: 0; flex: 0 0 auto; }
.grammar-track-switch.is-on { background: var(--word-learning, #f2b33d); border-color: color-mix(in srgb, var(--word-learning, #f2b33d) 70%, rgba(123, 92, 67, 0.3)); }
.grammar-track-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fffdf7; box-shadow: var(--ll-elev-0); transition: transform .15s ease; }
.grammar-track-switch.is-on .grammar-track-knob { transform: translateX(20px); }
.grammar-track-help { margin: .35rem 0 0; font-size: .82rem; color: #8a7a63; font-family: "Nunito", ui-sans-serif, system-ui, sans-serif; }
.grammar-track-help a { color: #b94436; text-decoration: underline; font-weight: 700; }

/* Per-point Track toggle inside the grammar explanation panel */
.grammar-panel__track { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.9rem 0 0.4rem; }
.grammar-panel__track-label { font-weight: 700; color: var(--ink, #3c2b20); font-family: "Nunito", ui-sans-serif, system-ui, sans-serif; }

/* Grammar reference page: collapsible HSK section bars + per-card Track toggle */
.gram-hsk-section { margin: 0 0 1rem; }
.gram-hsk-bar {
  width: 100%; display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  background: #fbf3e2;
  border: 1px solid rgba(123, 92, 67, 0.22);
  border-left: 5px solid var(--word-learning, #f2b33d);
  border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-0);
  color: #4a3524; font-family: inherit; font-weight: 800; font-size: 1.15rem;
  transition: background 0.15s ease;
}
/* The bar's own expand/collapse button; the "Track all" switch sits beside it. */
.gram-hsk-bar__toggle {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; margin: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.gram-hsk-bar:hover { background: #f9edd6; }
.gram-hsk-bar .gram-track { padding-top: 0; }
.gram-hsk-bar .gram-track__label { color: #7b6448; }
.gram-hsk-bar__chevron { transition: transform 0.2s ease; display: inline-flex; color: #8a6d4a; }
.gram-hsk-section[data-open] .gram-hsk-bar__chevron { transform: rotate(180deg); }
.gram-hsk-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.gram-hsk-section[data-open] .gram-hsk-panel { grid-template-rows: 1fr; margin-top: 0.8rem; }
.gram-hsk-panel > .grammar-ref__grid { overflow: hidden; min-height: 0; }

.grammar-ref__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.35rem; }
.grammar-ref__card-head .grammar-ref__name { margin: 0; flex: 1 1 auto; }
.gram-track { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; padding-top: 0.15rem; }
.gram-track__label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #8a7a63; }
.gram-track__switch { width: 38px; height: 22px; flex: 0 0 38px; min-height: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; border-radius: 999px; border: 1.5px solid rgba(123, 92, 67, 0.3); background: #eee4d2; position: relative; cursor: pointer; padding: 0; margin: 0; transition: background 0.15s ease; }
.gram-track__switch.is-on { background: var(--word-known, #9ba15a); border-color: var(--word-known, #9ba15a); }
.gram-track__knob { position: absolute; top: 1.5px; left: 1.5px; width: 16px; height: 16px; border-radius: 50%; background: #fffdf7; box-shadow: var(--ll-elev-0); transition: transform 0.15s ease; }
.gram-track__switch.is-on .gram-track__knob { transform: translateX(16px); }
.grammar-book-count {
  position: absolute;
  top: -7px;
  right: -3px;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1;
  color: #8067a5;
}

/* Visual priority: a selected word (peach) or the active audio word (gold) sits
   on the inner .story-word, so it always paints over any grammar phrase tint. */
.story-page .story-word.is-active,
.story-page .story-word.is-selected { position: relative; z-index: 1; }

/* ============================================================
   Story reader — collapsible paragraph translations
   A quiet "Show translation" pill under each Chinese paragraph
   expands a pale cream card. Fits the notebook-paper aesthetic.
   ============================================================ */
.story-tr {
  margin: 0.75rem 0 1.7rem;
}
.story-tr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  border: 1px solid #e2d1b6;
  border-radius: 999px;
  background: #fbf5e9;
  color: #7a5a3a;
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.story-tr-toggle:hover {
  background: #f4e9d5;
  border-color: #d3ba92;
  box-shadow: var(--ll-elev-0);
}
.story-tr-toggle:focus-visible {
  outline: 2px solid #d98a67;
  outline-offset: 2px;
}
.story-tr-icon {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ecd9bd;
  color: #c96a4a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* Smooth expansion via a pure-CSS max-height transition (class toggled in JS). */
.story-tr-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.story-tr.is-open .story-tr-wrap {
  max-height: 40rem;
}
.story-tr-card {
  margin-top: 0.7rem;
  padding: 20px;
  background: #fdf8ec;
  border-left: 3px solid #e0876a;
  border-radius: var(--ll-r-12);
  box-shadow: var(--ll-elev-1);
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #4a3524;
}

/* ============================================================
   Get Started onboarding page (2026-07). Reuses the site tokens
   (--red/--ll-coral, --ink, --paper, --brown, shadows) and the
   washi-tape / paper-card / button.primary patterns.
   ============================================================ */
/* Let the site's paper-textured body background show through — no new gradient
   or flat fill of our own, and it stays visible around all four torn edges. */
.gs-shell {
  padding: clamp(1.75rem, 5vw, 3.75rem) clamp(0.9rem, 4vw, 2.5rem) 4.5rem;
  background: transparent;
  min-height: 100%;
}
/* The whole onboarding sits on ONE torn-paper panel (the supplied PNG). No solid
   rectangle, border or rounded corners behind it — the panel's own torn silhouette
   IS the edge, with the site background showing through the transparent corners. */
.gs-page {
  position: relative;
  width: min(100%, 60rem);
  margin-inline: auto;
  padding: clamp(2.4rem, 6vw, 3.6rem) clamp(2.4rem, 7vw, 4rem) clamp(2.4rem, 6vw, 3.6rem) clamp(2.8rem, 9vw, 5rem);
}
.gs-page::before {  /* the torn paper panel + a soft shadow that follows its shape */
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: url("assets/little-lantern-torn-paper-panel.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 16px 26px rgba(96, 64, 34, 0.22));
  pointer-events: none;
}
.gs-page > * { position: relative; z-index: 1; }  /* live HTML above the paper */

/* One consistent left-aligned content column; only the final button is centred. */
:root { --gs-col: 44rem; }
.gs-head, .gs-block, .gs-actions, .gs-results__head, .gs-cards-wrap, .gs-results__foot {
  max-width: var(--gs-col); margin-inline: auto;
}

/* ---- header ---- */
.gs-head { text-align: left; margin-bottom: clamp(1.5rem, 3.5vw, 2.1rem); }
.gs-brand { display: block; height: clamp(3.7rem, 9.5vw, 5.4rem); width: auto; margin: 0 0 0.85rem; }
.gs-title { margin: 0 0 0.4rem; font-family: Georgia, "Noto Serif SC", serif; font-weight: 700; font-size: clamp(1.95rem, 4.8vw, 3.1rem); line-height: 1.05; color: #33241a; }
.gs-sub { margin: 0; color: #6d5b45; font-size: clamp(1rem, 2.2vw, 1.18rem); }

/* ---- question blocks ---- */
.gs-block { margin-bottom: clamp(1.3rem, 3vw, 1.8rem); }
.gs-block--focus { margin-bottom: 0; }  /* keep Build close to the focus options */
.gs-q {
  margin: 0 0 0.85rem; padding-left: 0.7rem; border-left: 4px solid var(--ll-coral);
  font-family: Georgia, "Noto Serif SC", serif; font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.55rem); color: #33241a;
}

/* ---- level pills (single-select, wrapping row) ---- */
.gs-levels { display: flex; flex-wrap: wrap; gap: 0.55rem; }
/* ---- focus buttons: a balanced 3 × 2 grid (2 × 3 on small screens) ---- */
.gs-focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 540px) { .gs-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gs-level, .gs-focus {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.58rem 1.15rem; border: 1.5px solid rgba(123, 92, 67, 0.3); border-radius: 999px;
  background: rgba(255, 252, 244, 0.72); color: #5a452e;
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif; font-weight: 700; font-size: 0.98rem;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease, opacity .16s ease;
}
.gs-level { justify-content: flex-start; }
.gs-level:hover, .gs-focus:hover { transform: translateY(-1px); border-color: var(--ll-coral); color: var(--ll-coral); }
.gs-level:hover .gs-focus__icon, .gs-focus:hover .gs-focus__icon { color: var(--ll-coral); }
/* Selected = filled coral, clearly the accent colour of the page. */
.gs-level.is-selected, .gs-focus.is-selected {
  background: var(--ll-coral); border-color: var(--ll-coral); color: #fff6ec;
  box-shadow: 0 6px 15px rgba(189, 72, 58, 0.4);
}
.gs-level.is-selected:hover, .gs-focus.is-selected:hover { background: #a83a2e; color: #fff6ec; }
.gs-level:focus-visible, .gs-focus:focus-visible { outline: 3px solid var(--ll-coral); outline-offset: 2px; }

.gs-focus__icon { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; color: var(--ll-coral); }
.gs-focus__icon svg { width: 100%; height: 100%; display: block; }
.gs-focus__body { display: contents; }
.gs-focus__label { font: inherit; }
.gs-focus__blurb, .gs-focus__check { display: none; }  /* compact pill — no blurb/check */
.gs-focus.is-selected .gs-focus__icon { color: #ffe9df; }
.gs-focus.is-muted { opacity: 0.45; }
.gs-focus.is-muted:hover { transform: none; border-color: rgba(123, 92, 67, 0.3); color: #5a452e; }
.gs-counter { margin: 0 0 0.85rem; color: var(--ll-coral); font-weight: 800; letter-spacing: 0.02em; font-size: 0.92rem; }

/* ---- actions (the ONE centred element) ---- */
.gs-actions { text-align: center; margin-top: clamp(1rem, 2.4vw, 1.4rem); }
.gs-build {
  min-width: 15rem; min-height: 3.15rem; padding: 0 2rem;
  border: none; border-radius: var(--ll-r-16);
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif; font-weight: 800; font-size: 1.08rem;
  transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
  /* Default = disabled look: unmistakably inactive (no coral, muted paper, flat). */
  background: #e5dcca; color: #a99a80; box-shadow: none; cursor: not-allowed;
}
/* Ready (exactly three chosen): strong, saturated coral that pops. Class-driven
   so the state is reliable everywhere, not dependent on the :disabled pseudo. */
.gs-build.is-ready { background: #c2371f; color: #fff3ea; box-shadow: 0 12px 24px rgba(194, 55, 31, 0.42); cursor: pointer; }
.gs-build.is-ready:hover { background: #a82c17; transform: translateY(-1px); }
.gs-build-hint { margin: 0.75rem 0 0; color: #a08d70; font-size: 0.88rem; }
.gs-page.is-building .gs-build { opacity: 0.85; }

/* ---- Results (replace the lower area; header above stays put) ---- */
.gs-results { margin-top: clamp(0.3rem, 1.2vw, 0.6rem); }
.gs-results__head { text-align: left; margin-bottom: clamp(2.2rem, 4.2vw, 2.75rem); }
.gs-results__head h2 {
  margin: 0 0 0.15rem;
  font-family: Georgia, "Noto Serif SC", serif; font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2rem); color: var(--ink);
}
.gs-results__sub { margin: 0.15rem 0 0; color: var(--ll-coral); font-weight: 700; }

/* Three cards in a row on desktop; the panda peeks over the CENTRE card's top
   edge, tucked BEHIND the cards (page bg -> torn paper -> panda -> cards -> text). */
.gs-cards-wrap { position: relative; }
.gs-cards {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 2.4vw, 1.35rem);
}
.gs-panda {
  position: absolute; z-index: 1;
  left: 50%; transform: translateX(-50%);
  top: -2.7rem; width: 180px; height: auto;
  pointer-events: none; user-select: none;
}
@media (max-width: 760px) {
  .gs-cards { grid-template-columns: 1fr; }
  .gs-panda { top: -2.2rem; width: 150px; }  /* over the FIRST (top) card */
}

.gs-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: clamp(0.95rem, 2vw, 1.2rem) clamp(1.1rem, 2.2vw, 1.35rem) clamp(1rem, 2vw, 1.25rem);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(143, 112, 72, 0.07) 32px),
    rgba(255, 251, 243, 0.97);
  border: 1px solid var(--ll-border, rgba(123, 92, 67, 0.18));
  border-radius: var(--ll-r-12);
  box-shadow: var(--ll-elev-2);
}
.gs-card__num {
  position: absolute; top: -0.6rem; right: 0.9rem;
  display: grid; place-items: center;
  min-width: 1.55rem; height: 1.55rem; padding: 0 0.4rem;
  background: var(--ll-coral); color: #fff3e2;
  border-radius: var(--ll-r-8);
  font-family: Georgia, serif; font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 2px 0 rgba(88, 58, 32, 0.2);
}
.gs-card__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(189, 72, 58, 0.12); color: var(--ll-coral); }
.gs-card__icon svg { width: 1.5rem; height: 1.5rem; }
.gs-card__body { min-width: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.gs-card__focus { margin: 0 0 0.1rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; color: var(--ll-coral); }
.gs-card__title { margin: 0 0 0.3rem; font-family: Georgia, "Noto Serif SC", serif; font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.45rem); color: var(--ink); line-height: 1.2; }
.gs-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.35rem; }
.gs-card__badge { background: rgba(189, 72, 58, 0.12); border: 1px solid rgba(189, 72, 58, 0.4); color: #8f2f24; }
.gs-card__meta { margin: 0 0 0.7rem; color: rgba(60, 43, 32, 0.72); font-size: 0.9rem; }
.gs-card__cta {
  margin-top: auto; align-self: flex-start;
  padding: 0.55rem 1.2rem; border-radius: var(--ll-r-12);
  background: var(--ll-coral); color: #fff6ec;
  font-family: "Segoe UI", sans-serif; font-weight: 800; font-size: 0.94rem; text-decoration: none;
}
.gs-card__cta:hover { background: #a83a2e; }
.gs-card__soon { display: inline-block; margin-top: auto; padding: 0.45rem 0.9rem; border: 1px dashed rgba(189, 72, 58, 0.5); border-radius: 999px; color: var(--brown); font-weight: 700; font-size: 0.88rem; }
.gs-card--soon { opacity: 0.94; }

.gs-results__foot { text-align: center; margin-top: clamp(1rem, 2.4vw, 1.4rem); }
.gs-change {
  background: none; border: none; cursor: pointer;
  color: var(--ll-coral); font-family: "Segoe UI", sans-serif; font-weight: 700; font-size: 0.95rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.gs-change:hover { color: #8f2f24; }

/* Gentle reveal when the path appears. */
.gs-results:not([hidden]) { animation: gs-rise .45s ease both; }
@keyframes gs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .gs-level, .gs-focus, .gs-build { transition: none; }
  .gs-results:not([hidden]) { animation: none; }
}

/* ============================================================
   Homepage redesign (2026) — one cohesive system built on the
   dashboard language: cream paper, dark-brown ink, thin warm
   borders, terracotta / mustard / olive accents, restrained
   shadows. Self-contained .home-* classes so it does not fight
   the older hero/feature/footer styles.
   ============================================================ */
.home {
  --home-max: 72rem;
  --home-ink: #2a1c0f;
  --home-text: #4a3524;
  --home-muted: #715a44;
  --home-border: rgba(123, 92, 67, 0.16);
  --home-border-strong: rgba(123, 92, 67, 0.24);
  --home-card-bg: #fffaf0;
  --home-shadow: var(--ll-elev-2);
  --home-radius: var(--ll-r-16);
}
.home-wrap {
  width: 100%;
  max-width: var(--home-max);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 3vw, 2rem);
}
.home-section { margin-top: clamp(1.7rem, 4vw, 2.9rem); }
.home-section[hidden] { display: none; }
.home-section__title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  color: var(--home-ink);
  margin: 0 0 1rem;
}

/* Buttons — solid terracotta primary, outlined secondary. */
.home-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.7rem 1.5rem;
  font-family: system-ui, "Segoe UI", sans-serif; font-weight: 800; font-size: 1rem;
  border-radius: var(--ll-r-12); border: 1.7px solid var(--red); text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.home-btn--sm { min-height: 2.5rem; padding: 0.5rem 1.1rem; font-size: 0.94rem; }
.home-btn--primary { background: var(--red); color: #fff8ee; box-shadow: 0 6px 15px rgba(185, 68, 54, 0.18); }
.home-btn--primary:hover { background: #a5382c; box-shadow: 0 9px 20px rgba(185, 68, 54, 0.24); transform: translateY(-1px); }
.home-btn--outline { background: transparent; color: #a5382c; border-color: rgba(185, 68, 54, 0.4); }
.home-btn--outline:hover { background: rgba(185, 68, 54, 0.07); transform: translateY(-1px); }
.home-btn:focus-visible { outline: 3px solid rgba(185, 68, 54, 0.45); outline-offset: 2px; }
.home-linkbtn {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 800; color: #a5382c; text-decoration: underline;
}
.home-linkbtn:focus-visible { outline: 3px solid rgba(185, 68, 54, 0.4); outline-offset: 3px; border-radius: var(--ll-r-4); }

/* ---------- Hero ---------- */
.home-hero {
  padding-top: clamp(1.4rem, 4vw, 3rem);
  padding-bottom: clamp(0.5rem, 2vw, 1rem);
  background-image: radial-gradient(rgba(123, 92, 67, 0.045) 1px, transparent 1px);
  background-size: 18px 18px;
}
.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
}
.home-hero__brandline {
  margin: 0 0 0.5rem;
  font-family: Georgia, "Noto Serif SC", serif;
  color: var(--red); font-size: 0.98rem; letter-spacing: 0.01em;
}
.home-hero__title {
  margin: 0 0 0.7rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.95rem, 4.4vw, 3rem);
  line-height: 1.12; color: var(--home-ink); max-width: 16ch;
}
.home-hero__lead {
  margin: 0 0 1.3rem;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.5;
  color: var(--home-text); max-width: 42ch;
}
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.home-hero__signin { margin: 0.85rem 0 0; font-size: 0.92rem; color: var(--home-muted); }
.home-hero__trust { margin: 1.05rem 0 0; color: var(--home-muted); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; }

.home-hero__visual { display: block; }
.home-preview { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.home-preview__card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: var(--home-card-bg); border: 1px solid var(--home-border);
  border-radius: var(--ll-r-16); box-shadow: var(--home-shadow);
  text-decoration: none; color: var(--home-ink);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.home-preview__card:hover { transform: translateY(-2px); border-color: rgba(185, 68, 54, 0.4); box-shadow: var(--ll-elev-2); }
.home-preview__card:focus-visible { outline: 3px solid rgba(185, 68, 54, 0.4); outline-offset: 2px; }
.home-preview__card--accent { border-left: 4px solid var(--red); }
.home-preview__icon {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: var(--ll-r-12); background: rgba(200, 155, 60, 0.16);
}
.home-preview__card--accent .home-preview__icon { background: rgba(224, 123, 57, 0.16); }
.home-preview__icon img { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.home-preview__text { display: grid; gap: 0.1rem; }
.home-preview__text strong { font-size: 1.05rem; color: var(--home-ink); }
.home-preview__text small { font-size: 0.86rem; color: var(--home-muted); }
.home-preview__arrow { color: var(--red); font-size: 1.3rem; font-weight: 800; }

/* ---------- Greeting + dashboard alignment ---------- */
.home-greeting {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem); color: var(--home-ink);
  margin: 0 0 0.9rem;
}
.home .home-progress-panel { max-width: none; margin: 0; }

/* ---------- Feature strip (calm, one row) ---------- */
.home-features {
  list-style: none; margin: 0; padding: clamp(1rem, 2vw, 1.3rem) clamp(1rem, 2vw, 1.5rem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.8rem, 2vw, 1.6rem);
  background: rgba(255, 250, 240, 0.65); border: 1px solid var(--home-border); border-radius: var(--home-radius);
}
.home-feature { display: flex; align-items: center; gap: 0.7rem; }
.home-feature__icon { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; border-radius: var(--ll-r-12); background: rgba(200, 155, 60, 0.14); }
.home-feature__icon img { width: 1.55rem; height: 1.55rem; object-fit: contain; }
.home-feature p { margin: 0; display: grid; gap: 0.05rem; }
.home-feature strong { font-size: 0.98rem; color: var(--home-ink); }
.home-feature small { font-size: 0.82rem; color: var(--home-muted); }

/* ---------- How it works ---------- */
.home-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 2vw, 1.4rem); }
.home-step {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 1.1rem; background: var(--home-card-bg); border: 1px solid var(--home-border);
  border-radius: var(--home-radius); box-shadow: var(--home-shadow);
}
.home-step__num {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(185, 68, 54, 0.12); color: var(--red); font-weight: 800; font-family: Georgia, serif;
}
.home-step strong { display: block; color: var(--home-ink); margin-bottom: 0.2rem; font-size: 1.02rem; }
.home-step p { margin: 0; color: var(--home-text); font-size: 0.92rem; line-height: 1.45; }

/* ---------- Lower content cards ---------- */
.home-lower { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.9rem, 2vw, 1.4rem); align-items: stretch; }
.home-card {
  display: flex; gap: 1rem; padding: 1rem;
  background: var(--home-card-bg); border: 1px solid var(--home-border);
  border-radius: var(--home-radius); box-shadow: var(--home-shadow);
}
.home-card--chengyu { flex-direction: column; }
.home-card__media { flex: 0 0 40%; max-width: 8.5rem; align-self: flex-start; border-radius: var(--ll-r-12); overflow: hidden; border: 1px solid var(--home-border); }
.home-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.home-card__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.home-card__eyebrow { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.15rem; }
.home-tag { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; }
.home-tag--story { background: rgba(143, 163, 122, 0.22); color: #566a41; }
.home-tag--chengyu { background: rgba(200, 155, 60, 0.2); color: #8a6a2f; }
.home-card__level { font-size: 0.8rem; font-weight: 700; color: var(--home-muted); }
.home-card__title { margin: 0; font-family: Georgia, serif; font-size: 1.4rem; color: var(--home-ink); }
.home-card__sub { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--home-muted); }
.home-card__desc { margin: 0.25rem 0 0.6rem; font-size: 0.9rem; color: var(--home-text); line-height: 1.45; }
.home-card .home-btn { align-self: flex-start; margin-top: auto; }

/* ---------- Recommended-next cards: podcast · story · vocabulary review ---------- */
.rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.4rem); align-items: stretch; }
.rec-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rec-grid[data-count="1"] { grid-template-columns: minmax(0, 32rem); }
.rec-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: clamp(0.85rem, 1.4vw, 1.05rem);
  background: var(--home-card-bg, #fffaf0);
  border: 1px solid var(--home-border, rgba(123, 92, 67, 0.16));
  border-radius: var(--ll-r-16); box-shadow: var(--home-shadow, 0 4px 14px rgba(88, 58, 32, 0.07));
}
.rec-card__media { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 178px; border-radius: var(--ll-r-12); overflow: hidden; border: 1px solid var(--home-border, rgba(123, 92, 67, 0.16)); background: #e7ddc8; margin-bottom: 0.6rem; }
.rec-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-card__body { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; flex: 1 1 auto; }
.rec-card__eyebrow { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.1rem; flex-wrap: wrap; }
.rec-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.45rem; border-radius: var(--ll-r-4); }
.rec-tag--podcast { color: #8a5a1a; background: rgba(247, 220, 131, 0.5); }
.rec-tag--story { color: #7c2f25; background: rgba(246, 199, 184, 0.5); }
.rec-tag--review { color: #4f5a2f; background: rgba(224, 231, 194, 0.6); }
.rec-tag--series { color: #6b5a3a; background: rgba(224, 210, 178, 0.6); }
.rec-card__level { font-size: 0.78rem; font-weight: 700; color: var(--home-muted, #8a7660); }
.rec-card__title {
  margin: 0; font-family: Georgia, serif; font-size: 1.2rem; line-height: 1.2; color: var(--home-ink, #3c2b20);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rec-card__sub { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--home-muted, #8a7660); }
.rec-card__desc {
  margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--home-text, #5c4a3a); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Podcast / story buttons sit near the card foot so they line up; the review
   button follows its text instead (its chart fills the space). */
.rec-card__cta { align-self: flex-start; margin-top: auto; }
.rec-card--review .rec-card__cta { margin-top: 0.7rem; }
/* Review card: known-words vs next-milestone two-bar comparison */
.rec-review { display: flex; gap: 0.9rem; align-items: flex-end; margin: 0.4rem 0 0; }
.rec-review__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.rec-review__count { margin: 0; font-size: 1rem; color: var(--home-ink, #3c2b20); }
.rec-review__count strong { font-size: 1.5rem; }
.rec-review__goal { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--home-text, #5c4a3a); line-height: 1.4; }
.rec-review__due { margin: 0.3rem 0 0; font-size: 0.8rem; font-weight: 700; color: var(--ll-coral, #bd483a); }
/* Flat two-bar chart in a pale-cream tinted panel — no axes, gridlines or icons */
.rec-chart { flex: 0 0 auto; display: flex; gap: 0.7rem; align-items: flex-end; padding: 0.55rem 0.7rem 0.5rem; background: #fbf3dd; border: 1px solid rgba(123, 92, 67, 0.12); border-radius: var(--ll-r-12); }
.rec-chart__col { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; width: 3rem; }
.rec-chart__track { height: 76px; width: 1.5rem; display: flex; align-items: flex-end; }
.rec-chart__bar { width: 100%; min-height: 4px; border-radius: 6px 6px 0 0; }
.rec-chart__bar--known { background: var(--ll-coral, #bd483a); }
.rec-chart__bar--goal { background: var(--ll-olive, #9ba15a); }
.rec-chart__val { font-size: 0.82rem; font-weight: 800; color: var(--home-ink, #3c2b20); }
.rec-chart__lbl { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--home-muted, #8a7660); text-align: center; line-height: 1.1; }

/* "How it works" collapsible wrapper for the story/podcast process-flow diagrams
   (collapsed on entry; click the summary to reveal the steps). */
.process-howto { margin: 0.2rem 0 1.2rem; }
.process-howto > summary {
  display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; cursor: pointer;
  list-style: none; font: inherit; font-weight: 800; font-size: 0.95rem; color: var(--brown, #7b5c43);
  padding: 0.5rem 0.95rem; background: #fff3df; border: 1px solid rgba(123, 92, 67, 0.25); border-radius: 999px;
}
.process-howto > summary::-webkit-details-marker { display: none; }
.process-howto > summary::after { content: "\25B8"; font-size: 0.85em; color: var(--brown, #7b5c43); }
.process-howto[open] > summary { margin-bottom: 0.7rem; }
.process-howto[open] > summary::after { content: "\25BE"; }
.process-howto > summary:hover { background: #f7e6c4; }
@media (max-width: 900px) {
  .rec-grid, .rec-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-grid[data-count="1"] { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rec-grid, .rec-grid[data-count="2"] { grid-template-columns: 1fr; }
  .rec-card__cta { align-self: stretch; text-align: center; }
}

.home-chengyu__hanzi { margin: 0.1rem 0 0.15rem; font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1; color: var(--home-ink); }
.home-chengyu__pinyin { margin: 0; color: var(--red); font-weight: 700; }
.home-chengyu__meaning { margin: 0.35rem 0 0; color: var(--home-text); line-height: 1.45; }
.home-chengyu__eg { margin: 0.5rem 0 0.7rem; font-size: 0.9rem; color: var(--home-muted); line-height: 1.5; }
.home-chengyu__eg span[lang="zh"] { color: var(--home-ink); }
.home-chengyu__eg-en { color: var(--home-muted); }

/* ---------- Footer ---------- */
.home-footer {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  background: #f7ead2; border-top: 1px solid rgba(123, 92, 67, 0.3);
}
.home-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  padding-top: clamp(1.4rem, 3vw, 2rem); padding-bottom: clamp(1.4rem, 3vw, 2rem);
}
.home-footer__brand { display: flex; align-items: center; gap: 0.7rem; flex: 1 1 18rem; }
.home-footer__brand img { width: 2.2rem; height: 2.2rem; object-fit: contain; }
.home-footer__brand p { margin: 0; color: var(--ink, #3c2b20); font-weight: 600; font-size: 0.95rem; max-width: 22rem; }
.home-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.home-footer__links a { color: #6b3a30; font-weight: 700; text-decoration: none; font-size: 0.95rem; }
.home-footer__links a:hover { text-decoration: underline; }
.home-footer__links a:focus-visible { outline: 3px solid rgba(185, 68, 54, 0.4); outline-offset: 2px; border-radius: var(--ll-r-4); }
.home-footer__feedback {
  display: inline-flex; align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(123, 92, 67, 0.35);
  border-radius: 999px;
  background: #fffdf8;
  color: #6b3a30; font-weight: 700; font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.home-footer__feedback:hover { background: #fff; border-color: rgba(185, 68, 54, 0.5); }
.home-footer__feedback:focus-visible { outline: 3px solid rgba(185, 68, 54, 0.4); outline-offset: 2px; }
.home-footer__legal { margin: 0; width: 100%; color: rgba(60, 43, 32, 0.6); font-size: 0.85rem; }
.home-footer__legal a { color: #6b3a30; font-weight: 700; text-decoration: none; }
.home-footer__legal a:hover { text-decoration: underline; }
/* The "Dictionary sources" footer link carries a short label for phones. */
.home-footer__links .fl-short { display: none; }
/* Phones: a compact footer — small links on a single line, a small feedback
   pill, and a contact line that wraps instead of running off the screen. */
@media (max-width: 720px) {
  .home-footer__inner { gap: 0.55rem 0.8rem; padding-top: 1rem; padding-bottom: 1.1rem; justify-content: center; }
  .home-footer__links { width: 100%; justify-content: center; gap: 0.2rem 0.55rem; }
  .home-footer__links a { font-size: 0.7rem; white-space: nowrap; }
  .home-footer__links .fl-long { display: none; }
  .home-footer__links .fl-short { display: inline; }
  .home-footer__feedback { padding: 0.28rem 0.7rem; font-size: 0.7rem; }
  .home-footer__legal { text-align: center; font-size: 0.7rem; line-height: 1.4; overflow-wrap: anywhere; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .home-features { grid-template-columns: repeat(2, 1fr); }
  .home-steps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .home-hero__grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .home-hero__title { max-width: none; }
  .home-hero__visual { order: 2; }
  .home-lower { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .home-features { grid-template-columns: 1fr; }
  .home-hero__actions .home-btn { flex: 1 1 auto; }
  .home-card--latest { flex-direction: column; }
  .home-card__media { max-width: none; flex-basis: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .home-btn, .home-preview__card { transition: none; }
}

/* ============================================================
   Homepage 2026 hero product card + interactive feature
   showcase. Built on the existing .home-* language (cream
   paper, dark-brown ink, thin warm borders, marigold / coral /
   dusty-olive / muted-purple accents, restrained shadows, washi
   tape). Self-contained .hero-product / .home-areas / .fs-*.
   ============================================================ */
.home { --home-purple: #8f7aa3; }

/* ---------- Hero: Smart Reader product card (right column) ---------- */
.home-hero__visual { display: block; }
.hero-product {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.hero-product__frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--home-card-bg);
  border: 1px solid var(--home-border);
  border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-3);
  transform: rotate(-0.3deg);
}
.hero-product__bar {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.55rem 0.85rem;
  background: #f6ead4;
  border-bottom: 1px solid var(--home-border);
}
.hero-product__dot { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #d8b58a; }
.hero-product__dot:nth-child(1) { background: #e0836f; }
.hero-product__dot:nth-child(2) { background: #eab54e; }
.hero-product__dot:nth-child(3) { background: #9bb07d; }
.hero-product__addr {
  margin-left: 0.5rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--home-muted);
}
.hero-product__shot { position: relative; display: block; }
.hero-product__shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800;
}
/* Subtle hand-drawn annotation, tucked into the reader's empty lower-right
   area (below the word card) so it never covers the word tiles, with a small
   dashed arrow pointing up to the word card. */
.hero-product__annot {
  position: absolute; right: 3.5%; bottom: 7%;
  max-width: 11rem;
  padding: 0.3rem 0.6rem;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 0.8rem; line-height: 1.15; color: #7a4a20;
  background: rgba(255, 246, 214, 0.94);
  border: 1px dashed rgba(224, 131, 57, 0.6);
  border-radius: var(--ll-r-12);
  transform: rotate(-2deg);
  box-shadow: var(--ll-elev-1);
}
.hero-product__annot::after {
  content: ""; position: absolute; right: 1.1rem; top: -0.85rem;
  width: 1.4rem; height: 1.4rem;
  border-top: 2px dashed rgba(224, 131, 57, 0.7);
  border-right: 2px dashed rgba(224, 131, 57, 0.7);
  border-radius: 0 1rem 0 0;
  transform: rotate(-18deg);
}
/* Clean caption below the product card (was a floating sticker). */
.hero-product__label {
  position: static; display: block; margin: 0.95rem 0 0; padding: 0;
  text-align: center; color: var(--home-muted); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em;
  background: none; border: none; box-shadow: none; border-radius: 0; transform: none;
}
.hero-product__tape {
  left: auto; right: 9%; top: -0.65rem;
  width: clamp(74px, 16vw, 96px);
  transform: rotate(8deg);
}
/* Panda peeks out from behind the lower-left corner of the card. */
.hero-product__panda {
  position: absolute; z-index: 1; left: -1.7rem; bottom: -0.5rem;
  width: 104px; height: auto;
  transform: rotate(-7deg);
  filter: drop-shadow(0 6px 8px rgba(88, 58, 32, 0.16));
  pointer-events: none;
}

/* ---------- Three main areas (relocated Learn / Library / Review) ---------- */
.home-areas__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 2vw, 1rem);
}

/* ---------- Interactive feature showcase (the whole platform) ---------- */
.fs__head { margin-bottom: 1.4rem; text-align: center; }
.fs__kicker {
  margin: 0 0 0.25rem;
  font-family: Georgia, "Noto Serif SC", serif;
  color: var(--red); font-size: 0.95rem;
}
/* The heading is the anchor of the section — deliberately large so a visitor
   grasps "this is the whole platform" in a glance. */
.fs__title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.08;
  color: var(--home-ink);
}
.fs__sub {
  margin: 0.55rem auto 0; max-width: 56ch;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.5;
  color: var(--home-text);
}
.fs__tablist {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin-bottom: 1.3rem;
}
.fs__tab {
  min-height: 44px; padding: 0.55rem 1.05rem;
  display: inline-flex; align-items: center;
  font-family: system-ui, "Segoe UI", sans-serif; font-weight: 800; font-size: 0.95rem;
  color: var(--home-text); background: var(--home-card-bg);
  border: 1.5px solid var(--home-border); border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.fs__tab:hover { border-color: rgba(185, 68, 54, 0.4); transform: translateY(-1px); }
.fs__tab[aria-selected="true"] {
  background: var(--red); color: #fff8ee; border-color: var(--red);
  box-shadow: 0 6px 16px rgba(185, 68, 54, 0.24);
}
.fs__tab:focus-visible { outline: 3px solid rgba(185, 68, 54, 0.45); outline-offset: 2px; }

/* The stage is a soft paper panel so the whole thing reads as one showcase
   (screenshot + explanation together), not a loose row. */
.fs__stage {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(1.2rem, 3.5vw, 2.4rem);
  align-items: center;
  padding: clamp(1rem, 2.6vw, 1.7rem);
  background: rgba(255, 250, 240, 0.62);
  border: 1px solid var(--home-border);
  border-radius: var(--ll-r-20);
  box-shadow: var(--home-shadow);
}
.fs__media { position: relative; }
/* Prev / next arrows overlaid on the slide edges (sit inside the stage padding
   so they never push the page past the viewport). */
.fs__arrow {
  position: absolute; top: 50%; z-index: 4;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: #a5382c; background: #fffaf0;
  border: 1px solid var(--home-border); border-radius: 50%;
  box-shadow: var(--ll-elev-1);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.fs__arrow--prev { left: -1rem; }
.fs__arrow--next { right: -1rem; }
.fs__arrow:hover { background: #fff2d8; border-color: rgba(185, 68, 54, 0.4); }
.fs__arrow:focus-visible { outline: 3px solid rgba(185, 68, 54, 0.45); outline-offset: 2px; }
.fs__arrow:active { transform: translateY(-50%) scale(0.94); }
.fs__tape { left: 13%; top: -0.6rem; transform: translateX(-50%) rotate(-7deg); }
.fs__frame {
  position: relative; z-index: 2; overflow: hidden;
  background: var(--home-card-bg);
  border: 1px solid var(--home-border);
  border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-2);
}
.fs__img {
  display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800;
  transition: opacity 0.2s ease;
}
.fs__img.is-fading { opacity: 0; }

.fs__panel { transition: opacity 0.2s ease; }
.fs__panel.is-fading { opacity: 0; }
.fs__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ll-coral, #bd483a);
}
.fs__benefit {
  margin: 0 0 0.55rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.16;
  color: var(--home-ink);
}
.fs__desc {
  margin: 0 0 1.15rem; max-width: 44ch;
  font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.55;
  color: var(--home-text);
}
.fs__cta { align-self: start; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .fs__stage { grid-template-columns: 1fr; gap: 1.2rem; }
  .fs__media { order: -1; }
  .fs__desc { max-width: none; }
}
@media (max-width: 760px) {
  .home-areas__grid { grid-template-columns: 1fr; }
  /* Tabs become a horizontally scrollable row. */
  .fs__tablist {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    /* Full-bleed edge scroll — must match .home-wrap's own padding exactly so
       the negative margin never pushes the page past the viewport. */
    margin-inline: calc(-1 * clamp(1.1rem, 3vw, 2rem));
    padding-inline: clamp(1.1rem, 3vw, 2rem);
    padding-bottom: 0.35rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .fs__tab { flex: 0 0 auto; scroll-snap-align: start; }
  .hero-product__panda { left: -0.4rem; bottom: -0.6rem; width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .fs__img, .fs__panel, .fs__tab, .fs__arrow { transition: none; }
  .fs__img.is-fading, .fs__panel.is-fading { opacity: 1; }
}

/* ============================================================
   Homepage polish (final pass): header account menu, tighter
   signed-in hero + Fresh-today cards, neutral shortcut cards.
   ============================================================ */

/* Account menu (signed-in header) */
.account-menu { position: relative; display: inline-flex; }
.account-menu[hidden] { display: none; }
.account-trigger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.6rem; padding: 0.3rem 0.6rem 0.3rem 0.35rem;
  background: var(--paper, #fffaf0); border: 1px solid rgba(123, 92, 67, 0.3);
  border-radius: 999px; cursor: pointer; color: var(--ink, #3c2b20); font: inherit; max-width: 12rem;
}
.account-trigger:hover { border-color: rgba(185, 68, 54, 0.4); }
.account-trigger:focus-visible { outline: 3px solid rgba(185, 68, 54, 0.4); outline-offset: 2px; }
.account-avatar {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--red, #b94436); color: #fff8ee; font-weight: 800; font-size: 0.76rem; letter-spacing: 0.02em;
}
.account-avatar svg { width: 1.15rem; height: 1.15rem; }
.account-name { font-weight: 700; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8rem; }
.account-caret { color: rgba(60, 43, 32, 0.6); font-size: 0.7rem; }
.account-dropdown {
  position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 40;
  min-width: 11rem; display: grid; padding: 0.35rem;
  background: var(--paper, #fffaf0); border: 1px solid rgba(123, 92, 67, 0.3);
  border-radius: var(--ll-r-12); box-shadow: var(--ll-elev-2);
}
.account-dropdown[hidden] { display: none; }
.account-item {
  display: block; text-align: left; padding: 0.55rem 0.7rem; border-radius: var(--ll-r-8);
  background: none; border: none; font: inherit; font-weight: 700; color: var(--ink, #3c2b20);
  text-decoration: none; cursor: pointer;
}
.account-item:hover { background: rgba(123, 92, 67, 0.1); }
.account-item:focus-visible { outline: 2px solid rgba(185, 68, 54, 0.45); outline-offset: -2px; }
.account-item--danger { color: #a5382c; }

/* Signed-in: the guest hero is hidden entirely, so the dashboard is already the
   first thing after the header — no reordering needed. */
:root[data-home-auth="in"] [data-auth-only].home-section:first-of-type { margin-top: clamp(0.6rem, 2vw, 1.2rem); }

/* Fresh today — trim ~22% of height; actions sit near the content. */
.home-card { padding: 0.85rem 0.95rem; gap: 0.85rem; }
.home-card__media { max-width: 7rem; }
.home-card__body { gap: 0.18rem; }
.home-card__desc { margin: 0.2rem 0 0.5rem; }
.home-card .home-btn { margin-top: 0.4rem; }
.home-chengyu__hanzi { font-size: clamp(1.8rem, 4.5vw, 2.3rem); margin: 0 0 0.1rem; }
.home-chengyu__meaning { margin: 0.25rem 0 0; }
.home-chengyu__eg { margin: 0.4rem 0 0.55rem; }

/* Mobile — content cards size to their content (no forced equal height). */
@media (max-width: 760px) {
  .home-lower { align-items: start; }
}

/* Premium-required toast (saving words is a Premium feature). */
.ll-premium-toast {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translate(-50%, 1.5rem);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: min(92vw, 30rem);
  padding: 0.7rem 1rem;
  background: #2f2013;
  color: #fff6e6;
  border-radius: var(--ll-r-12);
  box-shadow: var(--ll-elev-2);
  font-size: 0.92rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ll-premium-toast.is-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ll-premium-toast a { color: #f2b33d; font-weight: 800; text-decoration: none; white-space: nowrap; }
.ll-premium-toast a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ll-premium-toast { transition: opacity 0.2s ease; transform: translate(-50%, 0); } }

/* ============================================================
   Homepage 2026 — two-state redesign (guest marketing vs.
   signed-in dashboard). Header variants, dashboard cards,
   brand-new empty state, how-it-works timeline, sample content,
   final CTA banner, explore-all-tools. Built on the existing
   .home-* tokens — cream paper, dark-brown ink, coral primary,
   olive progress, restrained shadows, tape only on featured.
   ============================================================ */

/* In-page anchor scrolling clears the sticky header. */
html { scroll-behavior: smooth; }
#feature-showcase, #how-it-works { scroll-margin-top: 6.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Header: quiet Sign in, coral Start, olive streak ---------- */
.header-signin {
  background: none; border: none; box-shadow: none;
  min-height: 2.75rem; padding: 0.5rem 0.7rem;
  color: #8a4032; font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 0.95rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap;
}
.header-signin:hover { color: #a5382c; }
.header-signin:focus-visible { outline: 3px solid rgba(185, 68, 54, 0.4); outline-offset: 2px; border-radius: var(--ll-r-8); }
.header-start { min-height: 2.75rem; }
.header-streak {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 2.75rem; padding: 0.4rem 0.8rem;
  background: rgba(155, 161, 90, 0.18); border: 1px solid rgba(155, 161, 90, 0.42);
  border-radius: 999px; color: #45532e; font-weight: 800; font-size: 0.86rem; white-space: nowrap;
}
.header-streak strong { color: #3a4726; }
.header-streak__flame { font-size: 1rem; }
@media (max-width: 640px) { .header-streak { display: none; } }

/* ---------- Signed-in dashboard ---------- */
.dash__head { margin-bottom: clamp(0.9rem, 2vw, 1.35rem); }
.dash__greeting { margin: 0; }
.dash__sub { margin: 0.3rem 0 0; color: var(--home-muted); font-size: 1.02rem; }

/* Brand-new user: a single warm card, never a wall of zeros. */
.dash-empty {
  position: relative; text-align: center;
  padding: clamp(1.7rem, 4vw, 2.8rem) clamp(1.2rem, 4vw, 2.4rem);
  background: var(--ll-card-paper, #fffaf0);
  border: 1px solid var(--home-border); border-radius: var(--ll-r-20); box-shadow: var(--home-shadow);
}
.dash-empty[hidden] { display: none; }
.dash-empty__title { margin: 0.5rem 0 0.45rem; font-family: Georgia, serif; font-size: clamp(1.45rem, 3vw, 2rem); color: var(--home-ink); }
.dash-empty__copy { margin: 0 auto 1.2rem; max-width: 44ch; color: var(--home-text); line-height: 1.5; }

/* Returning user: three focused cards (not one dense panel). */
.dash-cards.home-progress-panel { background: none; border: none; box-shadow: none; padding: 0; margin: 0; max-width: none; }
.dash-cards .hp-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.85rem, 2vw, 1.15rem); }
.dash-cards .hp-col {
  padding: clamp(1rem, 2vw, 1.3rem);
  background: var(--home-card-bg); border: 1px solid var(--home-border);
  border-radius: var(--ll-r-16); box-shadow: var(--home-shadow);
}
.dash-cards .hp-col + .hp-col { border-left: 1px solid var(--home-border); }
.hp-col__streak { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.55rem 0 0; font-weight: 800; color: #45532e; }
.hp-col__streak strong { color: #3a4726; }
.hp-col__flame { font-size: 1rem; }
.dash-cta { align-self: start; margin-top: 0.6rem; }
@media (max-width: 860px) { .dash-cards .hp-columns { grid-template-columns: 1fr; } }
/* Continue state hides the duplicate Continue column; panel reflows to 2 up. */
.dash-cards[data-cols="2"] .hp-columns { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .dash-cards[data-cols="2"] .hp-columns { grid-template-columns: 1fr; } }
.hp-col[hidden] { display: none; }

/* ---------- Learning-journey card (find your level · start · continue) ---------- */
.journey-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(500px, 0.98fr);
  align-items: center; gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.05rem, 2.4vw, 1.6rem) clamp(1.3rem, 3.5vw, 2.4rem);
  background: var(--home-card-bg, #fffaf0);
  border: 1px solid var(--home-border, rgba(123, 92, 67, 0.16));
  border-radius: var(--ll-r-20); box-shadow: var(--home-shadow, 0 4px 14px rgba(88, 58, 32, 0.07));
}
.journey-card[hidden] { display: none; }
/* Find state has no preview panel → single column so the copy isn't squeezed. */
.journey-card[data-state="find"] { grid-template-columns: 1fr; }
.journey-card__body { min-width: 0; max-width: 640px; display: flex; flex-direction: column; }
.journey-card__label {
  margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ll-olive, #9ba15a);
}
.journey-card__title {
  margin: 0 0 0.4rem; font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; color: var(--home-ink, #3c2b20);
}
.journey-card__copy { margin: 0 0 1rem; max-width: 46ch; color: var(--home-text, #5c4a3a); line-height: 1.5; }
.journey-card__progress { margin: 0 0 1rem; max-width: 30rem; }
.journey-card__progress .hp-bar { margin: 0; }
.journey-card__pct { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--home-muted, #8a7660); }
.journey-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.journey-card__cta { align-self: flex-start; box-shadow: var(--ll-elev-0); }
.journey-card__time {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.85rem; color: var(--home-muted, #8a7660);
}
.journey-card__link {
  align-self: flex-start; margin-top: 0.85rem; padding: 0.1rem 0;
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 0.9rem; font-weight: 700; color: var(--ll-coral, #bd483a);
}
.journey-card__link:hover { text-decoration: underline; }
/* Inline HSK picker (revealed by the secondary link) */
.journey-picker { margin-top: 0.9rem; }
.journey-picker[hidden] { display: none; }
.journey-picker__label { margin: 0 0 0.5rem; font-size: 0.82rem; font-weight: 700; color: var(--home-muted, #8a7660); }
.journey-picker__grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.journey-picker__chip {
  padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--ll-ink, #3c2b20);
  background: #fff; border: 1px solid var(--home-border, rgba(123, 92, 67, 0.28));
  transition: background 0.14s ease, border-color 0.14s ease;
}
.journey-picker__chip:hover { background: #fff3df; border-color: rgba(189, 72, 58, 0.4); }
/* Right-side panel: landscape course thumbnail + dynamic lesson info */
.journey-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(160px, 0.75fr);
  align-items: center; gap: clamp(1rem, 1.6vw, 1.4rem);
  padding: clamp(0.9rem, 1.4vw, 1.15rem);
  background: #f7edd3;
  border: 1px solid #e5d5ae;
  border-radius: var(--ll-r-16);
}
.journey-panel[hidden] { display: none; }
.journey-panel__thumb {
  position: relative; min-width: 0; width: 100%; aspect-ratio: 16 / 10; max-height: 230px;
}
/* A faint dusty-blue paper block peeking out behind the artwork (CSS only —
   not a shadow, not an image). Sampled conceptually from the HSK skyline. */
.journey-panel__thumb::before {
  content: ""; position: absolute; z-index: 0;
  top: 10px; right: -10px; bottom: -10px; left: 10px;   /* same size, offset ~10px down + right */
  background: rgba(120, 153, 160, 0.15); border-radius: var(--ll-r-16);
}
.journey-panel__thumb img {
  position: relative; z-index: 1; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom; display: block;
  background: #e7ddc8; border-radius: var(--ll-r-12); border: 1px solid rgba(123, 92, 67, 0.16);
  box-shadow: var(--ll-elev-0);
}
.journey-panel__info { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.journey-panel__status {
  margin: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ll-olive, #9ba15a);
}
.journey-panel__lessonno { margin: 0.1rem 0 0; font-size: 0.82rem; font-weight: 800; color: var(--home-muted, #8a7660); }
.journey-panel__lessontitle {
  margin: 0.05rem 0 0; font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.15; color: var(--home-ink, #3c2b20);
}
.journey-panel__lessonen { margin: 0.1rem 0 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--home-muted, #8a7660); }
.journey-panel__lessonen[hidden] { display: none; }
.journey-panel__progress { margin: 0.15rem 0 0.35rem; }
.journey-panel__progress .hp-bar { margin: 0; }
.journey-panel__pct { margin: 0.4rem 0 0; font-size: 0.82rem; font-weight: 700; color: var(--home-muted, #8a7660); }
.journey-panel__lessonpct { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--home-muted, #8a7660); }
.journey-panel__lessonpct[hidden] { display: none; }
.journey-panel__link {
  align-self: flex-start; margin-top: 0.45rem; padding: 0.28rem 0.6rem;
  border: 1px solid rgba(189, 72, 58, 0.45); border-radius: var(--ll-r-8);
  background: transparent; color: var(--ll-coral, #bd483a); font-weight: 700; font-size: 0.78rem;
  text-decoration: none; transition: background 0.14s ease, border-color 0.14s ease;
}
.journey-panel__link:hover { background: rgba(189, 72, 58, 0.08); border-color: #bd483a; }
/* Tablet: keep the outer two columns, but let the preview shrink. */
@media (max-width: 1040px) {
  .journey-card { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.82fr); gap: 1.25rem; }
}
/* Narrow: stack the outer card (copy above the preview panel). */
@media (max-width: 900px) {
  .journey-card, .journey-card[data-state="find"] { grid-template-columns: 1fr; }
  .journey-card__body { max-width: none; }
}
/* Mobile: stack the inner panel too — image above the lesson information. */
@media (max-width: 560px) {
  .journey-panel { grid-template-columns: 1fr; }
  .journey-panel__thumb { max-height: 200px; }
  .journey-panel__link { align-self: stretch; text-align: center; }
}

/* ---------- How it works — light numbered timeline ---------- */
.howto__steps {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem);
}
.howto__step { position: relative; padding-top: 3.4rem; }
.howto__num {
  position: absolute; top: 0; left: 0; z-index: 2;
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  background: #fff6e6; border: 1.5px solid rgba(185, 68, 54, 0.32); border-radius: 50%;
  color: var(--red); font-family: Georgia, serif; font-weight: 800; font-size: 1.15rem;
  box-shadow: var(--ll-elev-1);
}
.howto__step-title { margin: 0 0 0.3rem; font-family: Georgia, serif; font-size: 1.14rem; color: var(--home-ink); }
.howto__step p { margin: 0; color: var(--home-text); line-height: 1.5; }
@media (min-width: 721px) {
  .howto__steps::before {
    content: ""; position: absolute; top: 1.3rem; left: 1.3rem; right: 1.3rem; height: 2px; z-index: 0;
    background: repeating-linear-gradient(90deg, rgba(185, 68, 54, 0.28) 0 9px, transparent 9px 17px);
  }
}
@media (max-width: 720px) {
  .howto__steps { grid-template-columns: 1fr; gap: 1.15rem; }
  .howto__step { padding-top: 0; padding-left: 3.4rem; min-height: 2.6rem; display: grid; align-content: center; }
}

/* ---------- Sample content (guest) ---------- */
.sample__head { display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sample__head .home-section__title { margin: 0; }
.sample__note { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; color: #4d5c33; font-weight: 700; font-size: 0.92rem; }
.sample__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ll-olive, #9ba15a); }
.home-tag--free { background: rgba(143, 163, 122, 0.22); color: #4d5c33; }

/* ---------- Final CTA banner (guest, full-width) ---------- */
.home-cta-banner {
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  background:
    radial-gradient(circle at 84% 22%, rgba(247, 220, 131, 0.42) 0 6rem, transparent 6.4rem),
    radial-gradient(circle at 14% 82%, rgba(185, 68, 54, 0.07) 0 5rem, transparent 5.4rem),
    var(--ll-paper-warm, #fff3dc);
  border-top: 1px solid rgba(123, 92, 67, 0.18);
  border-bottom: 1px solid rgba(123, 92, 67, 0.18);
}
.home-cta-banner__inner {
  position: relative; text-align: center;
  padding-top: clamp(2.1rem, 5vw, 3.3rem); padding-bottom: clamp(2.1rem, 5vw, 3.3rem);
}
.home-cta-banner__title { margin: 0 0 0.5rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.6rem, 3.5vw, 2.35rem); line-height: 1.12; color: var(--home-ink); }
.home-cta-banner__copy { margin: 0 auto 1.35rem; max-width: 48ch; color: var(--home-text); font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.5; }
.home-cta-banner .washi-tape { left: 50%; top: -0.7rem; }

/* ---------- Explore all tools (signed-in, compact) ---------- */
.explore__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.explore__grid a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3rem; padding: 0.7rem 0.9rem;
  background: var(--home-card-bg); border: 1px solid var(--home-border); border-radius: var(--ll-r-12);
  color: var(--home-ink); font-weight: 800; font-size: 0.94rem; text-decoration: none;
  box-shadow: 0 2px 0 rgba(88, 58, 32, 0.06);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.explore__grid a:hover { transform: translateY(-1px); border-color: rgba(185, 68, 54, 0.35); background: rgba(255, 243, 220, 0.7); }
.explore__grid a:focus-visible { outline: 3px solid rgba(185, 68, 54, 0.4); outline-offset: 2px; }
@media (max-width: 720px) { .explore__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   2026 site-wide consistency overhaul.
   One consolidated layer: decoration restraint, accessibility,
   shared feedback states, and per-page density fixes. Built on
   the --ll-* tokens defined in :root. Loaded last on purpose so
   it wins ties against the legacy layers above.
   ============================================================ */

/* ---------- Handwritten accents: warm serif italic ---------- */
.home-hero__brandline,
.fs__kicker {
  font-style: italic;
  font-weight: 600;
}

/* ---------- Decoration restraint ----------
   Washi tape is a brand accent for featured/hero surfaces only.
   Inside repeated grids it is noise — remove it there. */
.library-card .washi-tape,
.deck-card .washi-tape,
.course-folder .washi-tape,
.refreshed-exercise-grid .exercise-card .washi-tape,
.practice-tabs-card .washi-tape,
.grammar-ref__card .washi-tape {
  display: none;
}

/* ---------- Focus visibility (WCAG 2.4.7) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
[role="switch"]:focus-visible {
  outline: none;
  box-shadow: var(--ll-focus-ring);
  border-radius: var(--ll-r-sm);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Shared feedback states ----------
   Empty / error / locked / loading panels share one voice:
   what happened, whose "fault", and the recovery action. */
.ll-state {
  max-width: 34rem;
  margin: clamp(1.5rem, 4vw, 3rem) auto;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  text-align: center;
  background: var(--ll-paper);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-lg);
  box-shadow: var(--ll-elev-1);
}
.ll-state h2,
.ll-state h3 {
  margin: 0 0 0.5rem;
  font-size: var(--ll-text-h3);
}
.ll-state p {
  margin: 0 0 1rem;
  color: var(--ll-muted);
  line-height: 1.5;
}
.ll-state .button {
  margin-top: 0.25rem;
}

/* ---------- Calmer metadata chips ---------- */
.stamp,
.eyebrow,
.tag,
.lantern-badge,
.source-chip,
.story-tag,
.course-status {
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: none;
}

/* Library cards: chips sit quietly under the title, not shouting. */
.library-card-tags span {
  font-weight: 700;
}

/* ---------- Grammar reference: quieter tracking, calm grid ---------- */
.gram-track__label {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.gram-track__switch {
  box-shadow: none;
}
.grammar-ref__card {
  box-shadow: var(--ll-elev-1);
}

/* ---------- Pinyin chart: never overflow the page ----------
   The full syllable grid keeps its data; on narrow viewports it
   pans horizontally inside its own container instead of shrinking
   to illegibility or overflowing the page. */
.pinyin-table,
.pinyin-page .pinyin-table-wrap,
.pinyin-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Only a table/wrapper child needs a min-width to force horizontal scroll.
   The practice chart IS a CSS grid whose direct children are .pinyin-cell divs,
   so exclude those — otherwise every cell is forced to 640px and the grid breaks. */
.pinyin-table > table,
.pinyin-table > div:not(.pinyin-cell) {
  min-width: 640px;
}
.pinyin-page thead th,
.pinyin-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ll-paper-warm);
}

/* ---------- Reader: comfortable measure for Chinese prose ---------- */
.story-page .story-body,
.story-reading-text,
.reader-text {
  max-width: 46rem; /* ~736px reading measure */
  margin-inline: auto;
  line-height: 1.9;
}

/* ---------- Density: tool pages breathe by type, not size ---------- */
.tool-page .stamp + h1,
.profile-page .stamp + h1 {
  margin-top: 0.35rem;
}

/* ---------- Dialogs: mobile-safe, focused ---------- */
.name-prompt-modal {
  width: min(92vw, 26rem);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-lg);
  box-shadow: var(--ll-elev-2);
}
.name-prompt-modal::backdrop {
  background: rgba(60, 43, 32, 0.45);
}

/* State cards must keep their own voice even inside reading surfaces
   whose prose selectors are more specific (.story-page .story-text p). */
.story-text .ll-state h2,
.story-page .ll-state h2,
.ll-state h2 {
  margin: 0 0 0.5rem;
  font-size: var(--ll-text-h3);
  line-height: 1.25;
}
.story-text .ll-state p,
.story-page .ll-state p,
.ll-state p {
  margin: 0 0 1rem;
  color: var(--ll-muted);
  font-family: var(--ll-font-sans);
  font-size: var(--ll-text-body);
  line-height: 1.55;
}

/* Guest header CTA cell (injected by glow-nav on every page). */
.nav-guest-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-guest-cta .nav-start-cta {
  color: #fff8ee;
  background: var(--red);
  border-color: rgba(123, 53, 40, 0.18);
  box-shadow: 0 3px 0 rgba(123, 53, 40, 0.16);
}
.nav-guest-cta .nav-start-cta:hover {
  background: #a5382c;
  color: #fff8ee;
}

/* ============================================================
   Tape removed site-wide (2026). The washi-tape accent read as
   random clutter across cards, gates and heroes, so every
   instance — including JS-injected ones (premium gate, library
   / deck / course cards) — is hidden. Kept as a single override
   so nothing needs per-page markup changes.
   ============================================================ */
.washi-tape,
.tape-gold,
.tape-red,
.tape-sage,
.tape-floral,
.hero-tape,
.ll-app-tape {
  display: none !important;
}
/* Pseudo-element tapes drawn with the washi clip-path on panels and cards. */
.scrapbook-paper-panel::before,
.scrapbook-tape-top::before,
.hero-feature-card::before,
.flashcards-page .saved-decks::before,
.flashcard-review-page .review-page-card::before {
  display: none !important;
  content: none !important;
}

/* ============================================================
   Chinese Courses page (2026 redesign).
   Open, integrated layout — one strong featured HSK 1 course,
   then a quiet upcoming roadmap. Built on the --ll-* tokens.
   ============================================================ */
.course-index { padding-top: clamp(1.1rem, 3vw, 1.8rem); }
/* Pass 3: align Courses content band to the shared product width (was 68rem). */
.course-lib { width: min(100% - 2rem, var(--ll-page-max)); margin-inline: auto; }
.course-lib__head { margin: 0 0 clamp(1.3rem, 3vw, 2rem); }
.course-lib__head h1 { margin: 0; }
.course-lib__sub {
  margin: 0.5rem 0 0; max-width: 46ch;
  color: var(--ll-muted); font-family: var(--ll-font-sans);
  font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.5;
}

/* ---------- Featured HSK 1 course ---------- */
.course-featured {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: stretch;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  background: var(--ll-paper);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-lg);
  box-shadow: var(--ll-elev-2);
}
.course-featured__art {
  position: relative;
  display: grid; place-items: center;
  min-height: 14rem;
  border-radius: var(--ll-r-md);
  background:
    radial-gradient(circle at 30% 28%, rgba(242, 179, 61, 0.28) 0 6.5rem, transparent 7rem),
    radial-gradient(circle at 80% 82%, rgba(185, 68, 54, 0.12) 0 5.5rem, transparent 6rem),
    var(--ll-paper-warm, #fff3dc);
  overflow: hidden;
}
.course-featured__lantern {
  width: clamp(5rem, 12vw, 7.5rem); height: auto;
  filter: drop-shadow(0 6px 12px rgba(88, 58, 32, 0.16));
}
.course-featured__cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.course-featured__badge {
  position: absolute; left: 0.85rem; top: 0.85rem;
  padding: 0.25rem 0.6rem;
  font-family: var(--ll-font-sans); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.06em;
  color: #7a3a2f; background: rgba(255, 250, 240, 0.9);
  border: 1px solid rgba(185, 68, 54, 0.28); border-radius: 999px;
}
.course-featured__body { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.course-featured__eyebrow {
  margin: 0; font-family: var(--ll-font-sans);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ll-coral);
}
.course-featured__title { margin: 0; font-size: var(--ll-text-h2); }
.course-featured__desc {
  margin: 0.15rem 0 0.3rem; max-width: 52ch;
  color: var(--ll-ink); font-family: var(--ll-font-sans);
  font-size: var(--ll-text-body); line-height: 1.55;
}
.course-featured__meta {
  list-style: none; margin: 0.2rem 0 0.3rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.45rem;
}
.course-featured__meta li {
  padding: 0.28rem 0.65rem;
  font-family: var(--ll-font-sans); font-weight: 700; font-size: var(--ll-text-meta);
  color: var(--ll-ink); background: rgba(123, 92, 67, 0.08);
  border-radius: 999px;
}
.course-featured__progress { margin: 0.3rem 0 0.2rem; }
.course-progressbar {
  height: 0.6rem; border-radius: 999px;
  background: rgba(123, 92, 67, 0.14); overflow: hidden;
}
.course-progressbar__fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--ll-olive, #9ba15a);
  transition: width var(--ll-motion-base);
}
.course-featured__prog-label {
  margin: 0.5rem 0 0; color: var(--ll-muted);
  font-family: var(--ll-font-sans); font-size: var(--ll-text-meta); font-weight: 700;
}
.course-featured__next {
  margin: 0.35rem 0 0; color: var(--ll-ink);
  font-family: var(--ll-font-sans); font-size: var(--ll-text-meta);
}
.course-featured__next strong { color: var(--ll-coral); font-weight: 800; }
.course-featured__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem;
  margin-top: auto; padding-top: 0.55rem;
}
.course-featured__cta { min-height: 2.75rem; padding-inline: 1.4rem; }
.course-featured__overview {
  color: var(--ll-coral); font-family: var(--ll-font-sans);
  font-weight: 800; font-size: 0.94rem; text-decoration: underline; text-underline-offset: 3px;
}
.course-featured__overview:hover { color: #a5382c; }

/* ---------- Roadmap (HSK 2–6) ---------- */
.course-roadmap { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.course-roadmap__title { margin: 0; font-size: var(--ll-text-h3); }
.course-roadmap__lead {
  margin: 0.3rem 0 1rem; color: var(--ll-muted);
  font-family: var(--ll-font-sans); font-size: 0.95rem; line-height: 1.5;
}
.course-roadmap__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.7rem;
}
.roadmap-item {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.85rem 0.9rem;
  background: rgba(255, 250, 240, 0.7);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-md);
}
.roadmap-item--next {
  background: var(--ll-paper);
  border-color: rgba(242, 179, 61, 0.5);
  box-shadow: var(--ll-elev-1);
}
.roadmap-item__level {
  font-family: var(--ll-font-display); font-weight: 700; font-size: 1.15rem; color: var(--ll-ink);
}
.roadmap-item__desc {
  color: var(--ll-muted); font-family: var(--ll-font-sans);
  font-size: var(--ll-text-meta); line-height: 1.35;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content;
  margin-top: 0.15rem; padding: 0.2rem 0.55rem;
  font-family: var(--ll-font-sans); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.02em;
  border-radius: 999px;
}
.status-pill__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; }
.status-pill--next { color: #7a4a16; background: rgba(242, 179, 61, 0.22); }
.status-pill--next .status-pill__dot { background: #d98a12; }
.status-pill--dev { color: #5f5443; background: rgba(123, 92, 67, 0.1); }
.status-pill--dev .status-pill__dot { background: #9b8a72; }

@media (max-width: 900px) {
  .course-roadmap__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .course-featured { grid-template-columns: 1fr; }
  .course-featured__art { min-height: 9rem; }
  .course-featured__cta { width: 100%; }
  .course-featured__actions { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (max-width: 460px) {
  .course-roadmap__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Full-screen reader / player mode (podcast player + story
   reader). A single ".is-fullscreen" class on .podcast-detail-page
   / .story-page expands that surface to the whole viewport;
   "body.reader-fullscreen" hides the surrounding site chrome.
   Toggled by the "Full screen" buttons in each toolbar.
   ============================================================ */
body.reader-fullscreen { overflow: hidden; }
body.reader-fullscreen .site-header,
body.reader-fullscreen .mobile-bottom-nav,
body.reader-fullscreen .section-navigation {
  display: none !important;
}

.podcast-detail-page.is-fullscreen,
.story-page.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper, #fffdf7);
  padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 2.5rem)
           calc(1.5rem + env(safe-area-inset-bottom));
}

/* Hide the surrounding on-page chrome while expanded, leaving just
   the player + transcript (podcast) or the story text (story). */
.podcast-detail-page.is-fullscreen .breadcrumb,
.podcast-detail-page.is-fullscreen .podcast-hero,
.podcast-detail-page.is-fullscreen [data-prelisten],
.podcast-detail-page.is-fullscreen [data-postlisten],
.story-page.is-fullscreen .back-link,
.story-page.is-fullscreen .story-tags,
.story-page.is-fullscreen [data-prelisten],
.story-page.is-fullscreen [data-postlisten],
.story-page.is-fullscreen [data-story-questions-fallback] {
  display: none !important;
}

/* Full-bleed immersive reader: drop the card chrome and the transcript's
   height cap so the words fill the whole screen edge-to-edge instead of
   sitting in small boxed cards. The floating ✕ handles exit, so the toolbar
   can scroll away with the content for a clean reading view. */
.podcast-detail-page.is-fullscreen .podcast-player-card,
.podcast-detail-page.is-fullscreen .podcast-transcript-card {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin: 0 0 0.6rem;
  padding: 0;
}
.podcast-detail-page.is-fullscreen .podcast-transcript {
  max-height: none;   /* was capped at 32rem, boxing the transcript */
  overflow: visible;
  border: none;
  border-radius: 0;
  padding: 0.4rem 0.2rem 1rem;
}
/* Phone full screen: pin the audio controls to the top of the scrolling page so
   pause/seek stay in reach on a transcript thousands of pixels long. Only the
   <audio> is pinned (the "Audio player" blurb is dropped), and it stops short of
   the floating ✕ exit button in the top-right corner. */
@media (max-width: 640px) {
  .podcast-detail-page.is-fullscreen .podcast-player-card {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 0 0.4rem;
    padding: 0.3rem 3.2rem 0.5rem 0;
    background: var(--paper, #fffdf7);
  }
  .podcast-detail-page.is-fullscreen .podcast-player-card > div { display: none; }
}
.story-page.is-fullscreen .story-text {
  max-height: none;
  overflow: visible;
}

/* Highlight the toggle while full screen is active. */
[data-toggle-fullscreen][aria-pressed="true"],
[data-story-toggle-fullscreen][aria-pressed="true"] {
  background: var(--red, #b5462f);
  color: #fff8ee;
  border-color: rgba(123, 53, 40, 0.18);
}

/* Floating exit button shown only while a reader/player is full screen.
   Fixed to the top-right corner (below the status bar) and always tappable. */
.reader-fullscreen-exit {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 0.6rem);
  right: 0.8rem;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--red, #b5462f);
  color: #fff8ee;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--ll-elev-1);
}
.reader-fullscreen-exit:active { transform: scale(0.94); }

/* ============================================================
   iOS safe-area insets (Capacitor / standalone home-screen app).
   With viewport-fit=cover the webview draws under the status bar and
   home indicator; these rules let the sticky header's cream background
   fill up under the status bar (no gap) and keep the bottom nav clear
   of the home indicator. On desktop web the insets are 0 (no change).
   Scoped to the mobile breakpoint the app actually runs at.
   ============================================================ */
html,
body {
  background-color: #fbedd3; /* warm cream behind any overscroll — matches the lined-paper body */
}
/* Drop the iOS double-tap-to-zoom gesture (annoying when tapping words/tiles),
   while keeping pinch-zoom and scrolling. Also removes the 300ms tap delay.
   Elements with their own touch-action (e.g. draggable tiles) still win. */
* { touch-action: manipulation; }
@media (max-width: 1160px) {
  .site-header {
    padding-top: calc(0.7rem + env(safe-area-inset-top, 0px));
  }
}

/* --- Library videos ------------------------------------------------------ */
.video-cover { position: relative; }
.video-cover-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.library-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #8a6d55;
  padding: 2rem 1rem;
}

/* Video watch page: 16:9 stage holding a <video> or a YouTube iframe. */
.video-player-card { display: block; }
.video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--ll-r-16);
  overflow: hidden;
}
.video-stage .video-el,
.video-stage video,
.video-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}
.video-missing {
  color: #f6ead2;
  text-align: center;
  padding: 2rem 1rem;
}

/* ---- Caption overlay: annotated subtitle floating on the video -------------
   The current line's words are clones of the real transcript words, so tapping
   opens the dictionary and they carry the learner's status colours. Sits just
   above the player controls; cream card keeps hanzi legible over any footage. */
.video-caption-overlay {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  z-index: 6;
  max-width: 94%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.95rem 0.55rem;
  background: rgba(250, 243, 231, 0.96);
  border: 1px solid rgba(120, 92, 60, 0.18);
  border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-2);
  text-align: center;
  pointer-events: auto;
}
.video-caption-overlay[hidden] { display: none; }
.video-caption-zh {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.05rem 0.1rem;
  line-height: 1.15;
}
.video-caption-overlay { cursor: move; }
.video-caption-overlay .podcast-word {
  font-size: calc(clamp(1.2rem, 2.6vw, 1.75rem) * var(--cap-scale, 1));
  cursor: pointer;
  padding: 0 0.05rem;
}
/* Resize/scale grip (bottom-right of the subtitle). */
.video-caption-grip {
  position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; z-index: 2;
  cursor: nwse-resize; opacity: 0; transition: opacity 0.12s ease;
  background: linear-gradient(135deg, transparent 0 55%, rgba(120, 92, 60, 0.75) 55% 63%, transparent 63% 73%, rgba(120, 92, 60, 0.75) 73% 81%, transparent 81%);
}
.video-caption-overlay:hover .video-caption-grip { opacity: 0.85; }
.video-caption-overlay[data-reader-theme="dark"] .video-caption-grip {
  background: linear-gradient(135deg, transparent 0 55%, rgba(255, 255, 255, 0.6) 55% 63%, transparent 63% 73%, rgba(255, 255, 255, 0.6) 73% 81%, transparent 81%);
}
.video-caption-overlay .podcast-punctuation {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  color: #5a4636;
  align-self: flex-end;
}
/* Karaoke: brighten the word currently being spoken. */
.video-caption-overlay .caption-word.is-speaking .podcast-word-hanzi,
.video-caption-overlay .caption-word.is-speaking .pw-char-hanzi { color: #b94436; }
/* Pinyin cells follow the pinyin toggle. */
.video-caption-overlay:not(.show-pinyin) .podcast-char-pinyin,
.video-caption-overlay:not(.show-pinyin) .podcast-word-pinyin { display: none; }
.video-caption-overlay .podcast-char-pinyin { font-size: 0.72rem; }
/* English dual line follows the translation toggle. */
.video-caption-en {
  font-size: clamp(0.82rem, 1.6vw, 0.98rem);
  color: #5a4636;
  max-width: 62ch;
  line-height: 1.3;
}
.video-caption-overlay:not(.show-en) .video-caption-en,
.video-caption-en:empty { display: none; }
@media (max-width: 620px) {
  .video-caption-overlay { bottom: 8%; padding: 0.35rem 0.6rem 0.45rem; max-width: 96%; }
}

/* ===========================================================================
   Video reader panel — floating/draggable/resizable transcript with docked
   dictionary + grammar cards, dark mode and text sizing (mirrors the extension).
   =========================================================================== */
.video-reader-panel {
  --vr-scale: 1;
  background: rgba(250, 243, 231, 0.98);
  border: 1px solid #eadcc0;
  border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-2);
  display: flex; flex-direction: column; overflow: hidden;
  position: relative; z-index: 40;
}
.video-reader-panel[hidden] { display: none; }
.video-reader-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.35rem 0.5rem 0.7rem; border-bottom: 1px solid #eadcc0;
  cursor: move; user-select: none; touch-action: none;
}
.video-reader-title { font-family: "Baloo 2", "Nunito", system-ui, sans-serif; font-size: 1rem; color: #3a2a1c; }
.video-reader-tools { display: inline-flex; align-items: center; gap: 1px; flex-wrap: wrap; justify-content: flex-end; }
.vr-ctl {
  min-width: 1.7rem; height: 1.7rem; padding: 0 0.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 999px;
  color: #6f5842; font-weight: 700; font-size: 0.85rem; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.vr-ctl:hover { background: rgba(123, 92, 67, 0.14); color: #b94436; }
.vr-ctl.is-on { background: #b94436; color: #fff8ee; }
.vr-ctl.is-on:hover { background: #a5382c; color: #fff8ee; }

/* Reader hanzi font (Settings → Font). */
.video-reader-panel .podcast-word-hanzi, .video-reader-panel .pw-char-hanzi,
.video-reader-panel .vr-card__hz, .video-reader-panel .vr-gram__eg-zh,
.video-caption-overlay .podcast-word-hanzi, .video-caption-overlay .pw-char-hanzi {
  font-family: var(--reader-hz-font, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif);
}

/* Settings dropdown (⚙). */
.vr-settings {
  position: absolute; top: 2.9rem; right: 8px; z-index: 5; width: 15rem;
  background: #fffaf0; border: 1px solid #ecdcc0; border-radius: var(--ll-r-12);
  box-shadow: var(--ll-elev-2); padding: 0.35rem 0.5rem 0.55rem;
}
.vr-settings[hidden] { display: none; }
.vr-set-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.2rem 0; }
.vr-set-row > span { font-size: 0.85rem; font-weight: 700; color: #6f5842; }
.vr-seg { display: inline-flex; background: #efe4cf; border-radius: 999px; padding: 2px; gap: 2px; }
.vr-seg button {
  border: none; background: transparent; cursor: pointer; border-radius: 999px;
  padding: 0.22rem 0.5rem; font-size: 0.82rem; font-weight: 700; color: #6f5842;
  font-family: "Noto Sans SC", "Nunito", system-ui, sans-serif; white-space: nowrap; min-width: 1.7rem;
}
.vr-seg button.is-active { background: #b94436; color: #fff8ee; }
.vr-seg button:not(.is-active):hover { background: rgba(123, 92, 67, 0.14); }
.video-reader-panel[data-reader-theme="dark"] .vr-settings { background: #2f2a25; border-color: #463d33; box-shadow: var(--ll-elev-2); }
.video-reader-panel[data-reader-theme="dark"] .vr-set-row > span { color: #b3a48f; }
.video-reader-panel[data-reader-theme="dark"] .vr-seg { background: #35302b; }
.video-reader-panel[data-reader-theme="dark"] .vr-seg button { color: #c9baa4; }

/* Transcript inside the panel: clean, scrollable, size-adjustable. */
.video-reader-panel .podcast-transcript {
  flex: 1 1 auto; overflow-y: auto; max-height: none; margin: 0;
  padding: 0.4rem 0.55rem; background: transparent; border: none; border-radius: 0;
  font-size: calc(1.5rem * var(--vr-scale));
}
.video-reader-panel .podcast-line { padding: 0.3rem 0.5rem; border-radius: var(--ll-r-12); margin: 0; transition: background 0.12s ease; }
.video-reader-panel .podcast-line.is-active-line { background: rgba(185, 68, 54, 0.12); box-shadow: inset 3px 0 0 rgba(185, 68, 54, 0.5); }
.video-reader-panel .podcast-line-translation { font-size: calc(0.62em); color: #6f5842; }
.video-reader-panel .podcast-char-pinyin,
.video-reader-panel .podcast-word-pinyin { font-size: calc(0.42em); }

/* Dock for the dictionary + grammar inner cards. */
.video-dock {
  flex: 0 0 auto; max-height: 56%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 10px 10px;
}
.video-dock:empty { display: none; }
.video-reader-grip {
  position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px;
  cursor: nwse-resize; touch-action: none; opacity: 0.5;
  background: linear-gradient(135deg, transparent 0 55%, #b58e5e 55% 63%, transparent 63% 73%, #b58e5e 73% 81%, transparent 81%);
}
.video-reader-grip:hover { opacity: 1; }
.video-reader-restore {
  position: fixed; right: 16px; bottom: 20px; z-index: 40;
  padding: 0.55rem 0.95rem; border-radius: 999px; border: none;
  background: #b94436; color: #fff8ee; font-weight: 800; font-size: 0.9rem; cursor: pointer;
  box-shadow: var(--ll-elev-2);
}
.video-reader-restore[hidden] { display: none; }

/* Inner cards (dictionary + grammar) — clean cards docked in the panel. */
.video-dock .vr-card {
  position: relative; width: 100%; max-width: none; margin: 0; inset: auto;
  background: #fffaf0; border: 1px solid #ecdcc0; border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-1);
  padding: 1rem 1.05rem 0.95rem; color: #3a2a1c;
  font-size: 1rem; display: block;
}
.video-dock .vr-card[hidden] { display: none; }
.vr-card__close {
  position: absolute; top: 8px; right: 10px; z-index: 1;
  width: 1.7rem; height: 1.7rem; padding: 0; border: none; background: none;
  color: #8a7358; font-size: 0.95rem; line-height: 1; cursor: pointer; border-radius: var(--ll-r-8);
}
.vr-card__close:hover { background: rgba(123, 92, 67, 0.14); color: #b94436; }
.vr-card__top { display: flex; align-items: center; gap: 0.5rem; padding-right: 1.7rem; }
.vr-card__hz { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 1.95rem; line-height: 1.1; color: #3a2a1c; }
.vr-card__audio { display: inline-flex; align-items: center; }
.vr-card__hsk { margin-left: auto; align-self: flex-start; font-size: 0.68rem; font-weight: 800; color: #6f8256; background: rgba(143, 163, 122, 0.22); border-radius: 999px; padding: 0.12rem 0.5rem; white-space: nowrap; }
.vr-card__py { color: #b94436; font-weight: 700; font-size: 1.02rem; margin: 0.15rem 0 0.5rem; }
.vr-card__defs { margin: 0 0 0.7rem; padding-left: 1.1rem; color: #4a3626; font-size: 0.95rem; line-height: 1.5; }
.vr-card .dictionary-source { display: block; margin: 0 0 0.6rem; color: #8a7358; font-size: 0.72rem; }
.vr-card__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0.2rem; }
.vr-card__actions button {
  padding: 0.42rem 0.3rem; border-radius: var(--ll-r-8); border: 1.5px solid rgba(123, 92, 67, 0.28);
  background: #fff; color: #4a3626; font-weight: 700; font-size: 0.8rem; line-height: 1.15; cursor: pointer; text-align: center;
}
.vr-card__actions button:hover { border-color: #b94436; }
.vr-card__actions .review-rate-learning.is-active, .vr-card__actions .gk-learning.is-active { background: var(--word-learning, #f2b33d); border-color: var(--word-learning, #f2b33d); color: #3a2a12; }
.vr-card__actions .review-rate-known.is-active, .vr-card__actions .gk-known.is-active { background: var(--word-known, #9ba15a); border-color: var(--word-known, #9ba15a); color: #263016; }
.vr-card__actions .review-rate-not-known.is-active, .vr-card__actions .gk-needs.is-active { background: var(--word-needs-practice, #e8917f); border-color: var(--word-needs-practice, #e8917f); color: #4a1810; }
.vr-card .word-save-confirmation { display: block; margin-top: 0.4rem; color: #6f8256; font-size: 0.78rem; }
.vr-card .word-marker-actions { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* Grammar inner card. */
.vr-gram__eyebrow { margin: 0 1.7rem 0 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #6f8256; }
.vr-gram__title { margin: 0.2rem 0 0.15rem; font-size: 1.18rem; font-weight: 800; line-height: 1.2; color: #3a2a1c; }
.vr-gram__cn { margin: 0 0 0.45rem; color: #6f5842; font-size: 0.92rem; }
.vr-gram__pattern { display: inline-block; margin: 0 0 0.55rem; font-weight: 800; color: #6a5cb0; background: rgba(106, 92, 176, 0.12); border-radius: var(--ll-r-8); padding: 0.18rem 0.55rem; font-size: 0.9rem; }
.vr-gram__explain { margin: 0 0 0.6rem; color: #4a3626; font-size: 0.93rem; line-height: 1.5; }
.vr-gram__eg { background: #faf3e7; border: 1px solid #ecdcc0; border-radius: var(--ll-r-12); padding: 0.55rem 0.7rem; margin-bottom: 0.65rem; }
.vr-gram__eg-zh { margin: 0; font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 1.05rem; color: #3a2a1c; }
.vr-gram__eg-py { margin: 0.12rem 0 0; color: #a1907b; font-size: 0.8rem; font-weight: 600; }
.vr-gram__eg-en { margin: 0.12rem 0 0; color: #6f5842; font-size: 0.85rem; }
.vr-gram__track { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; font-size: 0.88rem; color: #4a3626; }
.vr-gram__status-label { display: block; margin-bottom: 0.35rem; font-size: 0.82rem; color: #6f5842; }
.vr-gram__more { display: inline-block; margin-top: 0.55rem; color: #b94436; font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.vr-gram__more:hover { text-decoration: underline; }

/* Panel stays a normal in-flow card on narrow screens (no float/drag). */
@media (max-width: 759px) {
  .video-reader-panel { position: relative !important; width: auto !important; height: auto !important; left: auto !important; top: auto !important; margin-top: 1.5rem; }
  .vr-settings { left: 8px; right: 8px; width: auto; }
  .video-reader-panel .podcast-transcript { max-height: 24rem; }
  .video-reader-grip { display: none; }
}

/* ---- Dark mode for the reader panel --------------------------------------- */
.video-reader-panel[data-reader-theme="dark"] { background: #26221f; border-color: #463d33; color: #efe6d6; box-shadow: var(--ll-elev-2); }
.video-reader-panel[data-reader-theme="dark"] .video-reader-head { border-color: #3a3229; }
.video-reader-panel[data-reader-theme="dark"] .video-reader-title { color: #efe6d6; }
.video-reader-panel[data-reader-theme="dark"] .vr-ctl { color: #c9b9a2; }
.video-reader-panel[data-reader-theme="dark"] .vr-ctl:hover { background: rgba(255, 255, 255, 0.1); color: #f0c9b0; }
.video-reader-panel[data-reader-theme="dark"] .podcast-line.is-active-line { background: rgba(209, 106, 90, 0.2); box-shadow: inset 3px 0 0 rgba(209, 106, 90, 0.7); }
.video-reader-panel[data-reader-theme="dark"] .podcast-word-hanzi,
.video-reader-panel[data-reader-theme="dark"] .pw-char-hanzi { color: #efe6d6; }
.video-reader-panel[data-reader-theme="dark"] .podcast-line-translation { color: #b3a48f; }
.video-reader-panel[data-reader-theme="dark"] .video-dock .vr-card { background: #2f2a25; border-color: #463d33; color: #efe6d6; box-shadow: var(--ll-elev-1); }
.video-reader-panel[data-reader-theme="dark"] :is(.vr-card__hz, .vr-gram__title, .vr-gram__eg-zh) { color: #efe6d6; }
.video-reader-panel[data-reader-theme="dark"] :is(.vr-card__defs, .vr-gram__explain) { color: #c9baa4; }
.video-reader-panel[data-reader-theme="dark"] :is(.vr-card__close, .vr-gram__cn, .vr-gram__status-label, .dictionary-source) { color: #a99a86; }
.video-reader-panel[data-reader-theme="dark"] .vr-gram__eg { background: #322c27; border-color: #463d33; }
.video-reader-panel[data-reader-theme="dark"] .vr-card__actions button { background: #322d28; border-color: #4d4238; color: #d8cab4; }
/* Shared word-card body (story-popover) docked in the dark video reader — keep the
   definition text readable on the dark card, and dark-theme its status buttons. */
.video-reader-panel[data-reader-theme="dark"] .vr-card :is(strong, .word-card-example b) { color: #efe6d6; }
.video-reader-panel[data-reader-theme="dark"] .vr-card :is(.friendly-definition, .dictionary-definition-list, .more-meanings summary, .word-card-example span, .word-card-example small) { color: #c9baa4; }
.video-reader-panel[data-reader-theme="dark"] .vr-card .word-knowledge-actions .button.secondary { background: #322d28; border-color: #4d4238; color: #d8cab4; }
.video-reader-panel[data-reader-theme="dark"] .vr-card .word-state-badge { background: rgba(255,250,240,0.12); }
.video-reader-restore[data-reader-theme="dark"] { background: #b94436; }

/* Caption overlay follows the reader's dark mode. */
.video-caption-overlay[data-reader-theme="dark"] { background: rgba(38, 34, 31, 0.96); border-color: #463d33; box-shadow: var(--ll-elev-2); }
.video-caption-overlay[data-reader-theme="dark"] .podcast-word-hanzi,
.video-caption-overlay[data-reader-theme="dark"] .pw-char-hanzi { color: #efe6d6; }
.video-caption-overlay[data-reader-theme="dark"] .podcast-punctuation,
.video-caption-overlay[data-reader-theme="dark"] .video-caption-en { color: #b3a48f; }
.video-caption-overlay[data-reader-theme="dark"] .caption-word.is-speaking .podcast-word-hanzi,
.video-caption-overlay[data-reader-theme="dark"] .caption-word.is-speaking .pw-char-hanzi { color: #ef9a86; }

/* Themed, unobtrusive scrollbars inside the reader panel (light + dark). */
.video-reader-panel .podcast-transcript,
.video-reader-panel .video-dock { scrollbar-width: thin; scrollbar-color: rgba(123, 92, 67, 0.4) transparent; }
.video-reader-panel .podcast-transcript::-webkit-scrollbar,
.video-reader-panel .video-dock::-webkit-scrollbar { width: 9px; }
.video-reader-panel .podcast-transcript::-webkit-scrollbar-track,
.video-reader-panel .video-dock::-webkit-scrollbar-track { background: transparent; }
.video-reader-panel .podcast-transcript::-webkit-scrollbar-thumb,
.video-reader-panel .video-dock::-webkit-scrollbar-thumb { background: rgba(123, 92, 67, 0.38); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.video-reader-panel[data-reader-theme="dark"] .podcast-transcript,
.video-reader-panel[data-reader-theme="dark"] .video-dock { scrollbar-color: rgba(255, 255, 255, 0.26) transparent; }
.video-reader-panel[data-reader-theme="dark"] .podcast-transcript::-webkit-scrollbar-thumb,
.video-reader-panel[data-reader-theme="dark"] .video-dock::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); background-clip: content-box; }

/* ============================================================
   Manga / PDF reader: full-screen reading + mobile bottom-sheet dictionary.
   Full screen fills the whole screen (site chrome hidden via
   body.reader-fullscreen, floating × via .reader-fullscreen-exit). On phones
   the dictionary panel becomes a bottom sheet, hidden until a word is tapped.
   Desktop keeps the side panel.
   ============================================================ */
.manga-page.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0;
  background: var(--paper, #fffdf7);
  padding: max(0.5rem, env(safe-area-inset-top)) 0.6rem
           calc(0.6rem + env(safe-area-inset-bottom));
}
.manga-page.is-fullscreen .section-heading,
.manga-page.is-fullscreen .manga-upload-panel,
.manga-page.is-fullscreen > .washi-tape {
  display: none;
}

/* In full screen, the PDF page should FILL the width and sit at the top —
   not a small page centred in a tall checkered area. The tap hit boxes are
   positioned in % of the frame, so scaling the frame + canvas together keeps
   word-tapping aligned. A tall (portrait) page fills the width and scrolls. */
.manga-page.is-fullscreen .manga-stage {
  min-height: 0;
  place-items: start center;
  padding: 0;
  overflow: visible;
}
.manga-page.is-fullscreen .manga-page-frame {
  width: 100% !important;
  max-width: 100%;
}
.manga-page.is-fullscreen #manga-canvas {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
/* Full screen = the same continuous scroll, each stacked page filling the width. */
.manga-page.is-fullscreen .manga-continuous {
  gap: 0.4rem;
}
.manga-page.is-fullscreen .manga-continuous-frame {
  width: 100% !important;
  max-width: 100%;
}
.manga-page.is-fullscreen .manga-continuous-canvas {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
/* Full screen is an immersive reading view: hide the ENTIRE toolbar (view
   toggle, page nav, zoom, pinyin, highlight, edit-scan) and the edit tools.
   Only the page being read + the floating × (.reader-fullscreen-exit) remain. */
.manga-page.is-fullscreen .manga-toolbar,
.manga-page.is-fullscreen .manga-edit-tools {
  display: none;
}

/* Sheet chrome is desktop-hidden; the panel stays a normal side panel there. */
.manga-sheet-handle,
.manga-sheet-backdrop { display: none; }

@media (max-width: 980px) {
  /* Dictionary panel -> bottom sheet: fixed, off-screen until opened. */
  .manga-dictionary-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    margin: 0;
    max-height: 80vh;
    z-index: 340;
    border-radius: 20px 20px 0 0;
    box-shadow: var(--ll-elev-2);
    transform: translateY(110%);
    transition: transform 260ms ease;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  body.manga-sheet-open .manga-dictionary-panel { transform: translateY(0); }

  /* Keep the sheet lean: drop the colour-legend blurb. The tapped text (token
     board) and the dictionary entry are what matter. */
  .manga-dictionary-panel .known-legend { display: none; }

  .manga-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 335;
    background: rgba(40, 28, 18, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
  }
  body.manga-sheet-open .manga-sheet-backdrop { opacity: 1; pointer-events: auto; }

  .manga-sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0.15rem 0 0.5rem;
    margin: -0.2rem 0 0.35rem;
  }
  .manga-sheet-grip {
    width: 2.4rem;
    height: 0.28rem;
    border-radius: 999px;
    background: rgba(123, 92, 67, 0.35);
  }
  .manga-sheet-close {
    position: absolute;
    right: 0;
    top: -0.1rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--brown, #7b5c43);
    cursor: pointer;
  }
}

/* Viewer quality selector overlay on the video stage. */
.video-quality {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}
.video-quality select {
  appearance: none;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--ll-r-8);
  padding: 0.28rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.video-quality select:hover { background: rgba(0, 0, 0, 0.78); }

/* --- Compact video "watch card" -------------------------------------------
   Edge-to-edge 16:9 thumbnail, one metadata row, title + one description line,
   and a bottom action row (CTA left, duration right). Overrides the shared
   .library-card framing for videos only. */
.library-card.video-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.library-card.video-card::before,
.library-card.video-card::after { content: none; }

.video-card .vwc-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1a1420;
  overflow: hidden;
}
.video-card .vwc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-card .vwc-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.video-card .vwc-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 16px;
}
.video-card .vwc-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: system-ui, sans-serif;
}
.video-card .vwc-chip {
  background: #f1e6cf;
  color: #7a5c43;
  border-radius: 999px;
  padding: 0.16rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.video-card .vwc-access {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 800;
}
.video-card .vwc-access.access-free { color: #3f7a44; }
.video-card .vwc-access.access-glow,
.video-card .vwc-access.access-unlocked { color: #b8860b; }
.video-card .vwc-access.access-premium { color: #b94436; }

.video-card .vwc-title {
  margin: 0.1rem 0 0;
  font-size: 1.12rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card .vwc-desc {
  margin: 0;
  color: #8a6d55;
  font-size: 0.88rem;
  line-height: 1.4;
}
.video-card .vwc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.15rem;
}
.video-card .vwc-cta { margin: 0; white-space: nowrap; }
.video-card .vwc-duration {
  color: #8a6d55;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: system-ui, sans-serif;
}

/* ============================================================
   Mandarin sound guide (practice-pinyin.html, under the chart)
   Tabs for all 21 initials, 38 finals and 5 tones. Artwork lives
   in assets/sound-guide/ and is used as supplied — the gold ridge
   highlight is baked into the side-view images, so nothing here
   recolours or overlays them. Air symbols are rendered only inside
   .sg-notes, under the note they describe, never over the art.
   ============================================================ */
.sound-guide-table-section {
  margin-top: var(--ll-sp-4);
  padding-top: var(--ll-sp-3);
  border-top: 1px solid var(--ll-border);
}
.sound-guide {
  margin-top: var(--ll-sp-4);
  padding-top: var(--ll-sp-3);
  border-top: 1px solid var(--ll-border);
}
.sound-guide-intro {
  margin: 0 0 var(--ll-sp-3);
  max-width: 46rem;
  color: var(--ll-muted);
}

/* Initials / Finals / Tones */
.sg-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid var(--ll-border);
}
.sg-group {
  appearance: none;
  border: 0;
  border-radius: var(--ll-r-md) var(--ll-r-md) 0 0;
  padding: 0.7rem 1.1rem;
  background: rgba(216, 189, 145, 0.28);
  color: var(--brown);
  font-family: var(--ll-font-sans);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
}
.sg-group span { margin-left: 0.4rem; opacity: 0.7; font-weight: 700; }
.sg-group.is-active { background: var(--red); color: #fff; }
.sg-group:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }

/* Tab strip — always scrolls horizontally rather than wrapping, so the
   64 sounds stay on one line and stay swipeable on a phone. */
.sg-tab-wrap {
  position: relative;
  border-bottom: 1px solid var(--ll-border);
  background: var(--paper);
}
.sg-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.9rem 0.25rem 0.8rem;
  scrollbar-width: thin;
  scrollbar-color: #aa9a8d #eee5d9;
  -webkit-overflow-scrolling: touch;
}
.sg-tab {
  flex: 0 0 auto;
  min-width: 3.1rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(123, 92, 67, 0.24);
  border-radius: var(--ll-r-sm);
  background: var(--paper);
  color: var(--brown);
  font-family: var(--ll-font-sans);
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(88, 58, 32, 0.08);
}
.sg-tab.is-active {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  box-shadow: 0 3px 0 #8f4036;
}
.sg-tab:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }

/* Initials tab strip grouped by pronunciation family (b p m f · d t n l · …).
   Each family is a cluster; a gap + faint divider marks the boundary. */
.sg-tabs--grouped { gap: 0; }
.sg-tab-group { display: inline-flex; flex: 0 0 auto; gap: 0.4rem; padding: 0 0.7rem; }
.sg-tab-group:first-child { padding-left: 0.25rem; }
.sg-tab-group:last-child { padding-right: 0.25rem; }
.sg-tab-group + .sg-tab-group { border-left: 2px dotted rgba(123, 92, 67, 0.3); }

/* Pinyin Pairs call-to-action between the table and the sound explorer. */
.sg-pairs-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: var(--ll-sp-3) 0;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(123, 92, 67, 0.2);
  border-radius: var(--ll-r-lg);
  background: linear-gradient(180deg, #fffaf0, #fdf4e6);
  box-shadow: 0 3px 0 rgba(88, 58, 32, 0.06);
}
.sg-pairs-cta-text { margin: 0; flex: 1 1 16rem; color: var(--brown); }
.sg-pairs-cta-btn { flex: 0 0 auto; white-space: nowrap; }

/* Selected sound */
.sg-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: var(--ll-sp-3) 0 var(--ll-sp-2);
}
/* Sound (initial/final) header: badge, then the name + its spoken syllable with a
   play button, then the articulation description to the right. */
.sg-head--sound { align-items: flex-start; flex-wrap: wrap; }
.sg-head-lead { display: flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; }
.sg-head-lead h2 { margin: 0; font-family: var(--ll-font-display); font-size: var(--ll-text-h2); }
.sg-head-desc { margin: 0; flex: 1 1 12rem; color: var(--ll-muted); align-self: center; }
.sg-say {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(123, 92, 67, 0.24);
  border-radius: 999px;
  background: var(--paper);
  color: var(--red);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(88, 58, 32, 0.08);
}
.sg-say:hover { background: #fff4e0; }
.sg-say:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }
/* Not the rounded display font (Baloo 2) — it lacks the macron/caron pinyin
   vowels, so the tone mark would fall back to a different font and look off. */
.sg-say-syll { font-family: "Noto Sans SC", system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1; }
.sg-say-icon { font-size: 0.7rem; }

/* ============================================================
   Pinyin Pairs listening exercise (practice/pinyin-pairs/)
   ============================================================ */
.pp-wrap { max-width: 40rem; margin: 0 auto; }
.pp-progress { display: flex; justify-content: space-between; align-items: baseline; color: var(--ll-muted); font-weight: 700; font-size: 0.9rem; }
.pp-bar { height: 8px; border-radius: 999px; background: rgba(123, 92, 67, 0.14); overflow: hidden; margin: 0.4rem 0 1rem; }
.pp-bar > span { display: block; height: 100%; background: var(--red); border-radius: 999px; transition: width 200ms ease; }
.pp-card {
  padding: 1.4rem 1.3rem;
  border: 1px solid rgba(123, 92, 67, 0.2);
  border-radius: var(--ll-r-lg);
  background: var(--paper);
  box-shadow: 0 4px 0 rgba(88, 58, 32, 0.07);
  text-align: center;
}
.pp-prompt { margin: 0 0 1rem; color: var(--brown); font-weight: 700; }
.pp-play {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 auto 1.3rem;
  padding: 0.85rem 1.6rem;
  border: none; border-radius: 999px;
  background: var(--red); color: #fff;
  font-family: var(--ll-font-sans); font-size: 1.05rem; font-weight: 800;
  cursor: pointer; box-shadow: 0 4px 0 #8f4036;
}
.pp-play:hover { filter: brightness(1.05); }
.pp-play:active { transform: translateY(1px); box-shadow: 0 3px 0 #8f4036; }
.pp-play-icon { font-size: 0.85rem; }
.pp-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.pp-option {
  padding: 0.9rem 0.6rem;
  border: 1px solid rgba(123, 92, 67, 0.24);
  border-radius: var(--ll-r-sm);
  background: #fffdf8; color: var(--brown);
  font-family: var(--ll-font-display); font-size: 1.4rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 3px 0 rgba(88, 58, 32, 0.08);
}
.pp-option:hover:not(:disabled) { border-color: var(--red); }
.pp-option:disabled { cursor: default; }
.pp-option.is-correct { border-color: #6f8a4f; background: #eef3e2; color: #46602c; box-shadow: 0 3px 0 rgba(111, 138, 79, 0.3); }
.pp-option.is-wrong { border-color: #c0574a; background: #f8e6e2; color: #8f3529; box-shadow: 0 3px 0 rgba(192, 87, 74, 0.3); }
.pp-feedback { margin-top: 1.1rem; padding: 0.9rem 1rem; border-radius: var(--ll-r-sm); text-align: left; line-height: 1.5; }
.pp-feedback.is-right { background: #eef3e2; color: #3f5a26; }
.pp-feedback.is-wrong { background: #f8e6e2; color: #7c3327; }
.pp-answer { font-family: var(--ll-font-display); font-weight: 700; }
.pp-replay { margin-left: 0.3rem; padding: 0.2rem 0.55rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-weight: 700; font-size: 0.82rem; cursor: pointer; }
.pp-next-row { margin-top: 0.9rem; display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.pp-results { text-align: center; }
.pp-results h2 { margin: 0.2rem 0 0.6rem; font-family: var(--ll-font-display); }

/* Collapsible sound-help reference */
.pp-help { margin-top: 1.1rem; border: 1px solid rgba(123, 92, 67, 0.2); border-radius: var(--ll-r-lg); background: #fffdf8; overflow: hidden; }
.pp-help > summary { padding: 0.8rem 1.1rem; cursor: pointer; font-weight: 800; color: var(--brown); list-style: none; }
.pp-help > summary::-webkit-details-marker { display: none; }
.pp-help > summary::before { content: "▸ "; color: var(--red); }
.pp-help[open] > summary::before { content: "▾ "; }
.pp-ref { padding: 0 1.1rem 1.1rem; }
.pp-ref-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.pp-ref-tab { padding: 0.4rem 0.9rem; border: 1px solid rgba(123, 92, 67, 0.24); border-radius: 999px; background: var(--paper); color: var(--brown); font-weight: 800; cursor: pointer; }
.pp-ref-tab.is-active { background: var(--red); color: #fff; border-color: var(--red); }
.pp-ref-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.pp-ref-chip { min-width: 2.3rem; padding: 0.35rem 0.55rem; border: 1px solid rgba(123, 92, 67, 0.24); border-radius: var(--ll-r-sm); background: var(--paper); color: var(--brown); font-family: var(--ll-font-display); font-weight: 700; cursor: pointer; }
.pp-ref-chip.is-hot { border-color: var(--red); background: #fff1e0; box-shadow: 0 0 0 2px rgba(175, 82, 68, 0.25); }
.pp-ref-detail { padding: 0.8rem 1rem; border: 1px dashed rgba(123, 92, 67, 0.3); border-radius: var(--ll-r-sm); background: var(--paper); }
.pp-ref-name { margin: 0 0 0.25rem; font-family: var(--ll-font-display); font-size: 1.4rem; font-weight: 800; color: var(--red); }
.pp-ref-en { margin: 0 0 0.3rem; color: var(--brown); font-weight: 600; }
.pp-ref-how { margin: 0; color: var(--ll-muted); }
.pp-ref-hint { margin: 0; color: var(--ll-muted); }
@media (max-width: 30rem) { .pp-options { grid-template-columns: 1fr; } }
.sg-badge {
  display: grid;
  place-items: center;
  min-width: 3.4rem;
  height: 3.4rem;
  padding: 0 0.7rem;
  border-radius: var(--ll-r-lg);
  background: var(--red);
  color: #fff;
  font-family: var(--ll-font-display);
  font-size: 1.7rem;
  font-weight: 800;
}
.sg-head h2 { margin: 0 0 0.2rem; font-family: var(--ll-font-display); font-size: var(--ll-text-h2); }
.sg-head p { margin: 0; color: var(--ll-muted); }
.sg-play {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(123, 92, 67, 0.24);
  border-radius: 999px;
  background: var(--paper);
  color: var(--brown);
  font-family: var(--ll-font-sans);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--ll-shadow-button);
}
.sg-play:hover { background: var(--cream); }
.sg-play:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }
.sg-play-icon { color: var(--red); font-size: 0.8rem; }

.sg-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ll-sp-3); }
.sg-panel {
  padding: var(--ll-sp-3);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-lg);
  background: var(--paper);
  box-shadow: var(--ll-elev-1);
}
.sg-panel-title { margin: 0; font-family: var(--ll-font-display); font-size: var(--ll-text-h3); }
.sg-view {
  margin: 0.25rem 0 var(--ll-sp-2);
  color: #92735e;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.sg-panel-body { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: var(--ll-sp-2); }
/* Square box + contain: the artwork is square, so nothing is cropped. */
.sg-art {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--ll-r-md);
  background: #f9ead8;
}
.sg-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The detailed per-sound side diagrams are drawn landscape (3:2), so give their
   box its natural ratio instead of the square used by the reusable art. */
.sg-art.sg-art-mouth { aspect-ratio: 3 / 2; background: #f4dcb6; }
/* Per-sound front-view lip diagrams are drawn 2:1 on a lighter cream paper. */
.sg-art.sg-art-front { aspect-ratio: 2 / 1; background: #f6ebda; }

.sg-notes { padding-left: var(--ll-sp-2); border-left: 1px solid var(--ll-border); }
.sg-notes-label {
  margin: 0 0 var(--ll-sp-2);
  color: #9c7b66;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.sg-note + .sg-note { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(123, 92, 67, 0.12); }
.sg-note h3 { margin: 0 0 0.3rem; font-family: var(--ll-font-sans); font-size: 0.95rem; font-weight: 800; }
.sg-note p { margin: 0; color: var(--ll-muted); font-size: 0.85rem; line-height: 1.45; }
/* Air symbol sits under its own note text, inside the notes column only. */
.sg-air-symbol { display: block; width: 68px; height: 26px; margin-top: 0.6rem; }
.sg-air-symbol svg { display: block; width: 100%; height: 100%; }

/* Tones */
.sg-tone-card {
  display: block;
  padding: var(--ll-sp-3);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-lg);
  background: var(--paper);
  box-shadow: var(--ll-elev-1);
}
.sg-tone-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--ll-sp-3); }
.sg-tone-chart { padding: var(--ll-sp-2); border-radius: var(--ll-r-md); background: #f9ead8; }
.sg-tone-chart svg { display: block; width: 100%; height: 20rem; }
.sg-tone-notes h3 { margin: 0 0 0.4rem; font-family: var(--ll-font-display); font-size: var(--ll-text-h3); }
.sg-tone-notes p { margin: 0; color: var(--ll-muted); line-height: 1.55; }
.sg-tone-example {
  display: inline-block;
  margin-top: var(--ll-sp-2);
  padding: 0.7rem 1rem;
  border-radius: var(--ll-r-md);
  background: #f2e1d2;
  color: var(--red);
  font-size: 1.5rem;
  font-weight: 800;
}

/* Ridge legend — the gold key is deliberately the stronger highlight. */
.sg-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: var(--ll-sp-3);
  color: var(--ll-muted);
  font-size: 0.85rem;
}
.sg-ridge-key {
  width: 28px;
  height: 8px;
  border-radius: var(--ll-r-8);
  background: #dc982d;
  box-shadow: 0 0 0 4px rgba(220, 152, 45, 0.3);
}

@media (max-width: 1050px) {
  .sg-panels { grid-template-columns: 1fr; }
  .sg-tone-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sg-panel { padding: var(--ll-sp-2); }
  .sg-panel-body { grid-template-columns: 1fr; }
  .sg-notes { padding: var(--ll-sp-2) 0 0; border-left: 0; border-top: 1px solid var(--ll-border); }
  .sg-head { flex-wrap: wrap; }
  .sg-play { margin-left: 0; width: 100%; justify-content: center; }
  .sg-tone-chart svg { height: 15rem; }
}

/* ---- Sound guide: the two explainer sections above the tabs -------------- */
.sg-explain { margin: var(--ll-sp-4) 0; }
.sg-explain h2 { margin: 0.15rem 0 var(--ll-sp-2); font-family: var(--ll-font-display); font-size: var(--ll-text-h2); }
.sg-explain > p { max-width: 46rem; color: var(--ll-muted); }

/* Initial + Final + Tone = One syllable */
.sg-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin: var(--ll-sp-3) 0;
  padding: var(--ll-sp-3) var(--ll-sp-2);
  border: 1px dashed rgba(123, 92, 67, 0.3);
  border-radius: var(--ll-r-lg);
  background: var(--paper);
}
.sg-formula-part {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--ll-border);
  border-radius: 999px;
  background: var(--cream);
  font-family: var(--ll-font-sans);
  font-size: 1rem;
  font-weight: 800;
  color: var(--brown);
}
.sg-formula-op { color: var(--ll-muted); font-size: 1.15rem; font-weight: 800; }
.sg-formula-result {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--ll-font-sans);
  font-size: 1rem;
  font-weight: 800;
}
.sg-formula-example .sg-formula-part { font-size: 1.25rem; }
.sg-formula-zh { font-family: var(--ll-font-zh); font-size: 1.4rem; }

.sg-parts { margin: var(--ll-sp-2) 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; max-width: 46rem; }
.sg-parts li { color: var(--ll-muted); }
.sg-parts strong { color: var(--ll-ink); }
.sg-aside {
  max-width: 46rem;
  margin: var(--ll-sp-2) 0 0;
  color: var(--ll-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Four equal ma cards */
.sg-ma-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ll-sp-2);
  margin: var(--ll-sp-3) 0 0;
  padding: 0;
  list-style: none;
}
.sg-ma-card {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: var(--ll-sp-2);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-lg);
  background: var(--paper);
  box-shadow: var(--ll-elev-1);
  text-align: center;
}
.sg-ma-pinyin { font-family: var(--ll-font-display); font-size: 1.6rem; font-weight: 800; color: var(--red); }
.sg-ma-hanzi { font-family: var(--ll-font-zh); font-size: 2rem; font-weight: 700; color: var(--ll-ink); line-height: 1.1; }
.sg-ma-tone { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: #92735e; text-transform: uppercase; }
.sg-ma-meaning { color: var(--ll-muted); font-size: 0.95rem; }

/* ---- Per-sound information blocks --------------------------------------- */
.sg-info { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ll-sp-3); margin-bottom: var(--ll-sp-3); }
.sg-block h3 { margin: 0 0 0.5rem; font-family: var(--ll-font-display); font-size: var(--ll-text-h3); }
.sg-block > p { margin: 0; color: var(--ll-muted); line-height: 1.6; }
.sg-en { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.sg-en li { color: var(--ll-muted); line-height: 1.55; }
.sg-en strong { color: var(--ll-ink); }
.sg-caveat {
  margin: 0.7rem 0 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--gold);
  color: #92735e;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Listen and repeat */
.sg-listen { grid-column: 1 / -1; margin-top: var(--ll-sp-1); }
.sg-listen-hint { margin: 0 0 0.6rem; color: var(--ll-muted); font-size: 0.9rem; }
.sg-examples { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sg-example {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(123, 92, 67, 0.24);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  box-shadow: var(--ll-shadow-button);
}
.sg-example:hover { background: var(--cream); }
.sg-example:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }
.sg-example-p { font-family: var(--ll-font-display); font-size: 1.2rem; font-weight: 800; color: var(--ll-ink); }
.sg-example-icon { color: var(--red); font-size: 0.75rem; }

@media (max-width: 900px) {
  .sg-ma-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1050px) {
  .sg-info { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sg-formula { gap: 0.4rem; padding: var(--ll-sp-2) 0.6rem; }
  .sg-formula-part, .sg-formula-result { padding: 0.4rem 0.7rem; font-size: 0.9rem; }
}
/* Finals-only note under the side-view heading: the artwork shows the main
   position, with compound-final movement described in the notes column. */
.sg-panel-note {
  margin: -0.4rem 0 var(--ll-sp-2);
  padding-left: 0.6rem;
  border-left: 3px solid var(--gold);
  color: #92735e;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Roadmap levels that already have cover art + an overview page render as
   links with a thumbnail (HSK 2 today). Text-only tiles are unaffected. */
.course-roadmap__grid > li { list-style: none; }
.roadmap-item--link {
  text-decoration: none;
  color: inherit;
  transition: transform var(--ll-motion-fast), box-shadow var(--ll-motion-fast);
}
.roadmap-item--link:hover {
  transform: translateY(-2px);
  box-shadow: var(--ll-elev-2);
  border-color: rgba(242, 179, 61, 0.75);
}
.roadmap-item--link:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }
.roadmap-item__thumb {
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 0.15rem;
  overflow: hidden;
  border-radius: var(--ll-r-sm);
  background: var(--ll-paper-warm);
}
.roadmap-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* HSK 2 overview page — cover + "in development" note, no lesson stack yet. */
.course-soon {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem); align-items: center;
  margin-top: var(--ll-sp-3); padding: var(--ll-sp-3);
  background: var(--ll-paper); border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-lg); box-shadow: var(--ll-elev-1);
}
.course-soon__art { overflow: hidden; border-radius: var(--ll-r-md); background: var(--ll-paper-warm); }
.course-soon__art img { display: block; width: 100%; height: auto; }
.course-soon__body h2 { margin: 0.5rem 0 0.4rem; font-family: var(--ll-font-display); font-size: var(--ll-text-h2); }
.course-soon__body p { margin: 0 0 0.7rem; color: var(--ll-muted); line-height: 1.6; max-width: 42rem; }
.course-soon__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; margin-top: var(--ll-sp-2); }
@media (max-width: 720px) { .course-soon { grid-template-columns: 1fr; } }
/* Cards share a row height, so the tiles without a thumbnail would otherwise
   trail empty space. Pin the status pill to the bottom of every card. */
.course-roadmap__grid .roadmap-item__status { margin-top: auto; }

/* HSK 2-6 are still being written, so they read as "greyed out": the cover art
   desaturates and dims and the labels mute, while the "In development" pill
   still says why. HSK 1 (roadmap-item--active) is unaffected. */
.roadmap-item--next .roadmap-item__thumb img,
.roadmap-item--dev .roadmap-item__thumb img {
  filter: grayscale(1);
  opacity: 0.5;
}
.roadmap-item--next .roadmap-item__thumb--empty,
.roadmap-item--dev .roadmap-item__thumb--empty { opacity: 0.6; }
.roadmap-item--next .roadmap-item__level,
.roadmap-item--dev .roadmap-item__level,
.roadmap-item--next .roadmap-item__desc,
.roadmap-item--dev .roadmap-item__desc { color: var(--ll-muted); }

/* Level picker: six buttons that swap the featured card above them. */
.course-roadmap__grid { grid-template-columns: repeat(6, 1fr); }
.roadmap-item--pick {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform var(--ll-motion-fast), box-shadow var(--ll-motion-fast), border-color var(--ll-motion-fast);
}
.roadmap-item--pick:hover { transform: translateY(-2px); box-shadow: var(--ll-elev-2); }
.roadmap-item--pick:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }
.roadmap-item--pick[aria-selected="true"] {
  border-color: var(--ll-coral);
  background: var(--ll-paper);
  box-shadow: var(--ll-elev-2);
}
/* Levels without art keep the same card height as the ones with it. */
.roadmap-item__thumb--empty {
  background:
    repeating-linear-gradient(135deg, rgba(123, 92, 67, 0.06) 0 6px, transparent 6px 12px),
    var(--ll-paper-warm);
}
.course-featured__cover--placeholder {
  display: block; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(123, 92, 67, 0.06) 0 10px, transparent 10px 20px),
    var(--ll-paper-warm);
}
.course-featured__soon {
  color: var(--ll-muted); font-family: var(--ll-font-sans);
  font-size: 0.94rem; line-height: 1.5;
}
@media (max-width: 1100px) { .course-roadmap__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .course-roadmap__grid { grid-template-columns: repeat(2, 1fr); } }
/* Buttons sit inside <li>, so they need to fill the stretched grid cell or the
   cards go ragged wherever a level descriptor wraps to two lines. */
.course-roadmap__grid > li { display: flex; }
.roadmap-item--pick { height: 100%; }

/* ================================================================
   PASS 2 — Standardised interactive controls (uses Pass 1 tokens).
   Appended last so it settles cascade ties for the common case;
   more-specific page rules still win, preserving specialised
   controls (toggles, hero CTA, sound-guide pills, etc.).
   No layout, content, handlers, or functionality changed.
   ================================================================ */

/* ---- Buttons: shared .button family ------------------------------ */
.button {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ll-radius-md);
  border: 1px solid var(--ll-border-strong);
  background: var(--ll-surface-soft);
  color: var(--ll-text);
  font-weight: 700;
  box-shadow: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.button:hover { background: #F1E7D6; }
/* Primary family — the one dominant action; terracotta on tokens. */
.button.primary, .primary-button, .tile-cta, .review-button, .lesson-button, button.primary {
  background: var(--ll-primary);
  border: 1px solid var(--ll-primary);
  color: #FFF8EF;
  box-shadow: var(--ll-shadow-sm);
}
.button.primary:hover, .primary-button:hover, .tile-cta:hover,
.review-button:hover, .lesson-button:hover, button.primary:hover {
  background: var(--ll-primary-hover);
  border-color: var(--ll-primary-hover);
  transform: translateY(-1px);
}
/* Secondary family — meaningful but not competing. */
.button.secondary, .button.quiet, .secondary, .quiet {
  background: var(--ll-surface-soft);
  color: var(--ll-text);
  border: 1px solid var(--ll-border-strong);
  box-shadow: none;
}
.button.secondary:hover, .button.quiet:hover, .secondary:hover, .quiet:hover { background: #F1E7D6; }
/* Consistent disabled treatment (readable, clearly inactive, no hover). */
.button:disabled, .button[disabled], .button[aria-disabled="true"],
.primary-button:disabled, .review-button:disabled, .lesson-button:disabled {
  opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none;
}
.button:disabled:hover, .button[disabled]:hover { background: var(--ll-surface-soft); }

/* ---- Home marketing buttons on tokens ---------------------------- */
.home-btn { min-height: 44px; border-radius: var(--ll-radius-md); transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.home-btn--primary { background: var(--ll-primary); border-color: var(--ll-primary); color: #FFF8EF; box-shadow: var(--ll-shadow-sm); }
.home-btn--primary:hover { background: var(--ll-primary-hover); border-color: var(--ll-primary-hover); }
.home-btn--outline { background: var(--ll-surface-soft); color: var(--ll-text); border-color: var(--ll-border-strong); }
.home-btn--outline:hover { background: #F1E7D6; }
.home-btn:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }

/* ---- Form controls: one shared family --------------------------- */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], input[type="tel"],
input[type="url"], input:not([type]), select, textarea {
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  background: var(--ll-surface);
  border: 1px solid var(--ll-border-strong);
  border-radius: var(--ll-radius-md);
  color: var(--ll-text);
  font: inherit;
}
textarea { min-height: 96px; }
input::placeholder, textarea::placeholder { color: var(--ll-text-soft); }
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input:not([type]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ll-primary);
  box-shadow: var(--ll-focus-ring-soft);
}

/* ---- Badges / chips: one geometry family (colours kept) --------- */
.library-card-tags span, .story-tags span,
.tag, .lantern-badge, .source-chip, .story-tag, .course-status,
.video-card .vwc-chip {
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 0 8px;
  border-radius: var(--ll-r-8);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
}

/* ---- Secondary tabs: shared colours (geometry left intact) ------ */
.section-tab { background: var(--ll-surface-soft); border-color: var(--ll-border); color: var(--ll-text); }
.section-tab.is-active { background: var(--ll-gold-soft); }
.deck-create-tab { background: var(--ll-surface-soft); color: var(--ll-text); }
.deck-create-tab.is-active { background: var(--ll-gold-soft); }

/* ---------- Sound Guide: "Hear the sound" (temporary, replaces the
   articulation diagrams while professional artwork is prepared) ---------- */
.sg-hearsound { text-align: center; }
.sg-hearsound-hint { max-width: 48ch; margin: 0.35rem auto 1.1rem; color: var(--ll-muted); line-height: 1.5; }
.sg-hearsound-btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 3.6rem; padding: 0.7rem 1.7rem;
  background: var(--ll-paper-warm, #fff3dc);
  border: 1px solid var(--ll-border); border-radius: 999px;
  box-shadow: var(--ll-elev-1); cursor: pointer;
  transition: transform var(--ll-motion-fast, 150ms ease), box-shadow var(--ll-motion-fast, 150ms ease), background var(--ll-motion-fast, 150ms ease);
}
.sg-hearsound-btn:hover { transform: translateY(-1px); background: #ffeccb; box-shadow: var(--ll-elev-2); }
.sg-hearsound-btn:active { transform: translateY(0); }
.sg-hearsound-btn:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }
.sg-hearsound-syllable {
  font-family: var(--ll-font-display, Georgia, serif); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.5rem); color: var(--ll-ink); line-height: 1;
}
.sg-hearsound-icon {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem;
  background: var(--red); color: #fff8ee; border-radius: 50%; font-size: 0.8rem;
}

/* ============================================================
   STORY DETAIL — the digital book reader (2026)
   The story page is the shelf's continuation: same cream paper,
   same card language as the Library, but with the story itself
   given the room. Three moves replace the old worksheet stack —
   a cover-led header, a warm-up that stays folded away until it
   is wanted, and chapters as story cards outside the reading
   paper, with every display control gathered into one strip.
   (The Library page itself is untouched.)
   ============================================================ */

/* --- Header plate: cover beside title, one hairline to close it off --- */
.story-page > .back-link {
  display: inline-block;
  margin-bottom: 0.9rem;
}

.story-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  gap: clamp(1.3rem, 3.2vw, 2.6rem);
  align-items: center;
  margin: 0 0 clamp(1.05rem, 2.4vw, 1.5rem);
  padding-bottom: clamp(1.05rem, 2.4vw, 1.5rem);
  border-bottom: 1px solid var(--ll-border);
}

/* Text on the left, artwork on the right (cover is second in the DOM). */
.story-hero__body { order: 1; }
.story-hero__cover {
  order: 2;
  padding: 0.4rem;
  overflow: hidden;
  background: #fffdf8;
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-md);
  box-shadow: var(--ll-shadow-card);
}

.story-hero__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ll-r-8);
}

.story-hero__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.story-page .story-hero__body h1 {
  max-width: 22ch;
  margin: 0.2rem 0 0;
  font-family: "Kaiti SC", "STKaiti", KaiTi, "\6977\4f53", "KaiTi_GB2312", serif;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.08;
}

.story-hero__body .library-title-en {
  font-size: 1.2rem;
}

/* Editorial measure — the blurb stops well short of the panel edge. */
.story-page .story-hero .handwritten {
  margin: 0.4rem 0 0;
  max-width: 50rem;
}

/* --- "Before you read": one folded strip, not a worksheet panel --------- */
.story-warmup {
  margin: 0 0 clamp(0.9rem, 2vw, 1.25rem);
}

.story-warmup__details {
  background: var(--ll-surface);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-radius-md);
  box-shadow: var(--ll-shadow-sm);
}

.story-warmup__summary {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.7rem 0.95rem;
  cursor: pointer;
  list-style: none;
}

.story-warmup__summary::-webkit-details-marker { display: none; }
.story-warmup__summary::marker { content: ""; }
.story-warmup__summary:focus-visible {
  outline: none;
  border-radius: var(--ll-radius-md);
  box-shadow: var(--ll-focus-ring);
}

.story-warmup__label {
  color: var(--ll-text);
  font-weight: 800;
  font-size: 0.96rem;
}

.story-warmup__hint {
  min-width: 0;
  overflow: hidden;
  color: var(--ll-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-warmup__chevron {
  flex: none;
  width: 0.46rem;
  height: 0.46rem;
  margin-left: auto;
  border-right: 2px solid rgba(123, 92, 67, 0.55);
  border-bottom: 2px solid rgba(123, 92, 67, 0.55);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--ll-motion-fast);
}

.story-warmup__details[open] .story-warmup__chevron {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.story-warmup__body {
  padding: 0.9rem 0.95rem 1rem;
  border-top: 1px solid var(--ll-border);
}

/* Flatten the shared worksheet renderer inside the strip: no boxes inside
   boxes, no repeated stamp + heading pair — just two labelled groups. */
.story-warmup .px-section {
  margin: 0;
}

.story-warmup .px-section + .px-section {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(123, 92, 67, 0.22);
}

.story-warmup .px-section-head {
  margin-bottom: 0.5rem;
}

.story-warmup .px-section-head .stamp { display: none; }

.story-warmup .px-section-head h2 {
  margin: 0;
  color: var(--ll-primary);
  font-family: var(--ll-font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.story-warmup .px-section-intro {
  margin: 0.22rem 0 0;
  color: var(--ll-text-soft);
  font-size: 0.86rem;
}

.story-warmup .px-card {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.story-warmup .px-warmup {
  padding: 0.6rem 0.85rem;
  background: var(--ll-surface-soft);
  border-left: 3px solid var(--ll-gold);
  border-radius: var(--ll-radius-sm);
}

.story-warmup .px-keyword-grid {
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.1rem 1.6rem;
}

.story-warmup .px-keyword {
  padding: 0.55rem 0 0.6rem;
  border-bottom: 1px solid rgba(123, 92, 67, 0.13);
}

.story-warmup .px-keyword-hanzi { font-size: 1.28rem; }
.story-warmup .px-keyword-en { margin-bottom: 0.25rem; font-size: 0.92rem; }

/* --- Contents: chapters as story cards, in the Library's card language -- */
.story-contents {
  margin: 0 0 clamp(0.9rem, 2vw, 1.3rem);
}

.story-contents[hidden] { display: none; }

.story-contents__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: center;
  margin: 0 0 1.15rem;
}

.story-contents__head h2 {
  margin: 0;
  font-size: var(--ll-text-h2);
}

/* Progress bar to the right of the "Chapters" heading. */
.ch-progress { margin-left: auto; min-width: 240px; flex: 1 1 300px; max-width: 34rem; }
.ch-progress__label { margin: 0 0 0.4rem; font-weight: 600; font-size: 0.86rem; color: var(--ll-muted); }
.ch-progress__track { height: 8px; border-radius: 999px; background: #eaddc6; overflow: hidden; }
.ch-progress__fill { display: block; height: 100%; border-radius: 999px; background: var(--ll-olive); transition: width 0.3s ease; }

/* Chapter contents — two rows per line, each a clean study card with a
   colour-coded status chunk (green done · yellow current · grey ahead). */
.ch-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1rem; }
@media (max-width: 720px) { .ch-rows { grid-template-columns: 1fr; } }
.ch-row {
  position: relative; display: flex; align-items: center; gap: 1rem; width: 100%;
  text-align: left; cursor: pointer;
  background: var(--ll-paper); border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-md); padding: 0.85rem 1.15rem 0.85rem 1.5rem;
  box-shadow: var(--ll-shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ch-row:hover { transform: translateY(-2px); box-shadow: var(--ll-elev-2); border-color: #d8c9b0; }
.ch-row:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }
.ch-row::before {
  content: ""; position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
  width: 5px; height: 2.5rem; border-radius: 999px; background: #d8ccb2;
}
.ch-row--done::before { background: var(--ll-olive); }
.ch-row--current::before { background: var(--ll-marigold); }

.ch-row__num {
  flex: 0 0 auto; min-width: 2rem; text-align: center; padding-right: 1rem;
  border-right: 1px solid var(--ll-border);
  font-family: var(--ll-font-display); font-weight: 700; font-size: 1.8rem; color: #c9b78f;
}
.ch-row__text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.ch-row__title {
  font-family: "Kaiti SC", "STKaiti", KaiTi, "\6977\4f53", "KaiTi_GB2312", serif;
  font-size: 1.3rem; line-height: 1.2; color: var(--ll-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-row__title--num { font-family: var(--ll-font-display); font-weight: 700; font-size: 1.15rem; }
.ch-row__en {
  margin-top: 0.12rem; font-family: var(--ll-font-sans); font-size: 0.9rem; color: var(--ll-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-row__status {
  flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--ll-font-sans); font-weight: 700; font-size: 0.9rem;
}
.ch-row__status--done { color: var(--ll-olive); }
.ch-row__chk { font-size: 1.05rem; }
.ch-row__status--continue { color: var(--red); font-weight: 800; }
.ch-row__status--go { color: #c2b190; font-size: 1.2rem; font-weight: 400; }
.ch-row:hover .ch-row__status--go { color: var(--red); }

.ch-row--current { background: var(--ll-paper-warm); border-color: #f0dca6; }
.ch-row--current .ch-row__num { color: var(--ll-marigold); border-color: #efd79f; }
.ch-row--ahead { background: #fdfaf1; box-shadow: none; }
.ch-row--ahead .ch-row__num { color: #d8ccb2; }
.ch-row--ahead .ch-row__title { color: #a99e88; }
.ch-row--ahead .ch-row__en { color: #c0b6a0; }
.ch-row--ahead:hover { box-shadow: var(--ll-shadow-card); }
.ch-row--ahead:hover .ch-row__title { color: #7d715c; }

/* Chapter selectors — elegant cards in a digital book, three to a row.
   Cream paper, warm-red accents, soft shadow; the whole card opens the
   chapter, and a "✓ Read" status appears top-right once it's been read. */
.story-chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-chapter-item {
  position: relative;
  display: flex;
  min-width: 0;
}

.story-chapter-open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.4rem 1.4rem 1.25rem;
  background: var(--paper);
  border: 1px solid rgba(123, 92, 67, 0.18);
  border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-2);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.story-chapter-open:hover {
  transform: translateY(-3px);
  box-shadow: var(--ll-elev-2);
  border-color: rgba(185, 68, 54, 0.32);
}

.story-chapter-open:focus-visible {
  outline: none;
  box-shadow: var(--ll-focus-ring), 0 1rem 1.9rem rgba(123, 92, 67, 0.16);
}

/* Small ordinal badge — "01" */
.story-chapter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  background: rgba(185, 68, 54, 0.1);
  color: var(--red);
  font-family: var(--ll-font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
}

.story-chapter-name {
  color: var(--ink);
  font-family: var(--ll-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
}

/* English chapter title under the Chinese name on the contents card. */
.story-chapter-sub {
  color: var(--ll-text-soft, #7b5c43);
  font-family: var(--ll-font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
}

.story-chapter-cta {
  margin-top: 0.15rem;
  color: var(--red);
  font-family: var(--ll-font-sans);
  font-size: 0.92rem;
  font-weight: 800;
}

/* Completed status — top-right, shown only once read; tap to mark unread.
   Completed chapters are NOT greyed out; only this quiet marker changes. */
.story-chapter-status {
  position: absolute;
  top: 0.95rem;
  right: 0.95rem;
  display: none;
  align-items: center;
  gap: 0.28rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(185, 68, 54, 0.35);
  background: rgba(185, 68, 54, 0.1);
  color: var(--red);
  font-family: var(--ll-font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.story-chapter-item.is-read .story-chapter-status { display: inline-flex; }
.story-chapter-status:hover { background: rgba(185, 68, 54, 0.18); }
.story-chapter-status:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }
.story-chapter-status__tick { font-size: 0.82rem; }

/* Per-chapter narration player, sits just under the chapter title. */
.story-chapter-audio { margin: 0.5rem 0 1.1rem; }
/* Quiet caption above the player. Scoped tightly so it beats the big serif
   .story-page .story-text p reading style (which was inflating the old .stamp
   into a huge uppercase heading). */
.story-chapter-audio__label,
.story-page .story-text .story-chapter-audio__label {
  margin: 0 0 0.4rem;
  font-family: var(--ll-font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ll-muted);
}

/* --- Reading area: one chapter at a time on the ruled paper ------------- */
.story-reading[hidden] { display: none; }
.story-chapter[hidden] { display: none; }
/* Centre the reading column (text, settings bar and chapter nav all share the
   1050px cap and margin:0 auto) so the chapter text sits centred on the page and
   the Previous / Contents / Next buttons line up directly beneath it. */
.story-reading .story-text { margin: 0 auto; }
.story-reading .reader-toolbar { margin-left: auto; margin-right: auto; }

/* Chapter heading at the top of each chapter (a real title, not tappable
   prose). Chinese first, the English translation quiet beneath it. */
.story-chapter-title {
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ll-border, rgba(198, 172, 138, 0.4));
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.story-chapter-title__zh {
  font-family: var(--ll-font-display);
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.story-chapter-title__en {
  font-family: var(--ll-font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ll-text-soft, #7b5c43);
}

/* The narration reads the story title before the first line, so the title is
   repeated at the head of the transcript; the hero at the top of the page keeps
   its own copy. The English line is the ordinary body font and ink here, not
   the red display serif the hero uses. */
.story-lead-title {
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ll-border, rgba(198, 172, 138, 0.4));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}
.story-lead-title__zh {
  font-family: var(--ll-font-display);
  font-size: clamp(1.45rem, 3.8vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.story-lead-title__en {
  font-family: var(--ll-font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.story-chapter-nav {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  max-width: 1050px;          /* match the chapter text column */
  margin: 1rem auto 0;        /* centre it under the centred text */
}

.story-chapter-btn {
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  background: var(--ll-surface);
  border: 1px solid var(--ll-border);
  border-radius: 999px;
  transition: background var(--ll-motion-fast);
}

.story-chapter-btn:hover:not(:disabled) { background: var(--ll-paper-warm); }
.story-chapter-btn:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }
.story-chapter-btn-ghost { color: var(--ll-primary); }
.story-chapter-btn:disabled { opacity: 0.38; cursor: default; }

/* --- One reader settings bar (replaces the loose row of grey buttons) --- */
.reader-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 0.6rem;
  padding: 0.35rem 0.5rem;
  background: var(--ll-surface-soft);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-radius-md);
}

.reader-toolbar__context {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
  padding-left: 0.15rem;
}

.reader-toolbar__context:empty { display: none; }

.reader-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  align-items: center;
  margin-left: auto;
}

.reader-toggle {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.36rem 0.62rem;
  cursor: pointer;
  color: var(--ll-text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: none;          /* no site-wide button lip inside the bar */
  list-style: none;
  white-space: nowrap;
  transition: background var(--ll-motion-fast), color var(--ll-motion-fast);
}

.reader-toggle::-webkit-details-marker { display: none; }
.reader-toggle::marker { content: ""; }
.reader-toggle:hover { color: var(--ll-text); background: rgba(255, 250, 240, 0.9); }
.reader-toggle:focus-visible { outline: none; box-shadow: var(--ll-focus-ring); }
.reader-toggle:disabled { opacity: 0.55; cursor: default; }

/* Active display option — terracotta, the site's one "this is on" colour. */
.reader-toolbar .reader-toggle.is-on,
.reader-toolbar [data-story-toggle-fullscreen][aria-pressed="true"] {
  color: var(--ll-primary);
  background: var(--ll-primary-soft);
  border-color: rgba(182, 81, 62, 0.22);
}

.reader-toggle__icon {
  font-size: 0.92em;
  line-height: 1;
  opacity: 0.85;
}

.reader-back {
  padding: 0.3rem 0.2rem;
  cursor: pointer;
  color: var(--ll-primary);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  background: none;
  border: 0;
  box-shadow: none;          /* no site-wide button lip inside the bar */
}

.reader-back:hover { text-decoration: underline; }
.reader-back:focus-visible { outline: none; border-radius: var(--ll-r-8); box-shadow: var(--ll-focus-ring); }

.reader-position {
  color: var(--ll-text-soft);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.reader-legend { position: relative; }

/* Three dots in the word-status colours stand in for an icon — the control
   explains itself before it is opened. */
.reader-legend__dots {
  display: inline-flex;
  gap: 0.14rem;
  align-items: center;
}

.reader-legend__dots i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
}

.reader-legend__dots i:nth-child(1) { background: var(--word-learning); }
.reader-legend__dots i:nth-child(2) { background: var(--word-needs-practice); }
.reader-legend__dots i:nth-child(3) { background: var(--word-known); }

.reader-legend__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 0.35rem;
  min-width: 12rem;
  padding: 0.65rem 0.8rem;
  background: var(--ll-surface);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-radius-md);
  box-shadow: var(--ll-shadow-md);
  color: var(--ll-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.reader-legend__panel span {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  white-space: nowrap;
}

/* Full screen keeps only the words: the header, contents, warm-up and the
   follow-on sections step aside, and the settings bar loses its frame. */
.story-page.is-fullscreen .story-hero,
.story-page.is-fullscreen .story-contents,
.story-page.is-fullscreen .story-warmup,
.story-page.is-fullscreen .learning-next-steps {
  display: none !important;
}

.story-page.is-fullscreen .reader-toolbar {
  background: none;
  border-color: transparent;
}

/* --- Narrower screens --------------------------------------------------- */
@media (max-width: 900px) {
  .story-chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .story-hero {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  /* Cover fills the card on phones — the 11rem cap left it small and lopsided. */
  .story-hero__cover { max-width: none; }
  .story-page .story-hero__body h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }

  /* Word card as a bottom sheet. story-detail.js places it absolutely under the
     tapped word (rect.bottom + 8) with no clamp, so taps in the lower half opened
     it below the fold; !important beats those inline top/left values. */
  .story-popover {
    position: fixed !important;
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    z-index: 40; /* above the fixed bottom nav (30) */
    width: auto;
    max-height: min(72vh, 34rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--ll-elev-3);
  }
  .story-popover .story-popover-close { width: 2.6rem; height: 2.6rem; top: 0.35rem; right: 0.6rem; }

  .story-chapter-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  /* The hint only fits beside the label on wider phones. */
  .story-warmup__label { white-space: nowrap; }
  .story-warmup__hint { display: none; }
  .reader-toolbar__controls { margin-left: 0; }
  .story-chapter-btn { padding: 0.5rem 0.85rem; font-size: 0.9rem; }
}

/* Your plan (Profile) — the subscription state and the way out. Deliberately
   plain: two lines and one button, so cancelling never feels hidden. */
.profile-plan .profile-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

/* ================================================================
   DARK MODE (v1) — activated by :root[data-theme="dark"] (set by the
   no-flash bootstrap + the profile Appearance toggle). Most surfaces are
   token-driven (--paper ×84, --ink ×120), so the bulk flips by redefining
   tokens; hardcoded structural chrome (body/header/footer/buttons/inputs)
   is overridden explicitly below. Appended last so these win the cascade.
   ================================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Core palette */
  --cream: #221c18;
  --parchment: #2a231d;
  --paper: #241d18;
  --beige: #6b5a45;
  --ink: #f1e8db;
  --brown: #d6c2a9;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  --ll-lined-paper: repeating-linear-gradient(0deg, transparent, transparent 36px, rgba(150, 180, 210, 0.05) 37px), var(--paper);
  --ll-card-paper: repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(230, 210, 180, 0.05) 32px), var(--paper);
  /* Word status selected background */
  --word-selected-bg: #3a3320;
  --word-selected-border: rgba(240, 225, 190, 0.18);
  --word-new-hover: #4a3f30;
  /* Design-foundation surfaces & text */
  --ll-ink: #f1e8db;
  --ll-muted: #c2b2a0;
  --ll-paper: #241d18;
  --ll-paper-warm: #2b241d;
  --ll-panel: rgba(38, 31, 25, 0.96);
  --ll-border: #3a2f27;
  --ll-bg: #16110e;
  --ll-surface: #241d18;
  --ll-surface-soft: #201a15;
  --ll-text: #f1e8db;
  --ll-text-muted: #c2b2a0;
  --ll-text-soft: #9c8b78;
  --ll-primary-soft: #3a2620;
  --ll-olive-soft: #262a1c;
  --ll-gold-soft: #3a3016;
  --ll-border-strong: #4a3d32;
  /* Elevation — deeper, cooler shadows read better on dark */
  /* Elevation — deeper, cooler shadows read better on dark. Only the four
     steps are redefined here; every legacy alias inherits from them. */
  --ll-elev-0: 0 2px 4px rgba(0, 0, 0, 0.4);
  --ll-elev-1: 0 4px 14px rgba(0, 0, 0, 0.4);
  --ll-elev-2: 0 10px 26px rgba(0, 0, 0, 0.5);
  --ll-elev-3: 0 20px 48px rgba(0, 0, 0, 0.55);
  --ll-border-soft: 1px solid rgba(230, 210, 180, 0.12);
}

html { transition: background-color 0.2s ease; }
body { transition: background-color 0.2s ease, color 0.2s ease; }

/* Page background (the base body rules hardcode a cream gradient). */
:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 6%, rgba(220, 125, 52, 0.10), transparent 26rem),
    linear-gradient(90deg, rgba(255, 240, 220, 0.03) 1px, transparent 1px),
    linear-gradient(#1b1613, #15100d);
  background-size: auto, 44px 44px, auto;
  color: var(--ll-text);
}

/* Top nav + section tabs */
:root[data-theme="dark"] .site-header {
  background: rgba(28, 23, 19, 0.92);
  border-bottom-color: var(--ll-border);
}
:root[data-theme="dark"] .paper-tabs a { color: var(--ll-text-muted); }
:root[data-theme="dark"] .paper-tabs a.is-active { color: var(--ll-text); }

/* Footer */
:root[data-theme="dark"] .home-footer,
:root[data-theme="dark"] footer { background: #14100d; color: var(--ll-text-muted); }
:root[data-theme="dark"] .home-footer__feedback { background: #241d18; border-color: var(--ll-border); color: var(--ll-text); }
:root[data-theme="dark"] .home-footer__feedback:hover { background: #2b241d; }

/* Cards / panels that hardcode near-white surfaces */
:root[data-theme="dark"] .tool-page,
:root[data-theme="dark"] .story-page,
:root[data-theme="dark"] .profile-note,
:root[data-theme="dark"] .rec-card,
:root[data-theme="dark"] .library-card,
:root[data-theme="dark"] .podcast-solo,
:root[data-theme="dark"] .podcast-card,
:root[data-theme="dark"] .home-card,
:root[data-theme="dark"] .learning-next-steps,
:root[data-theme="dark"] .premium-locked-panel,
:root[data-theme="dark"] .dashboard-panel {
  background: var(--ll-surface);
  border-color: var(--ll-border);
  color: var(--ll-text);
}

/* Form controls */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: #1e1813;
  color: var(--ll-text);
  border-color: var(--ll-border);
}
:root[data-theme="dark"] .status-label-input { background: #1e1813; color: var(--ll-text); border-color: var(--ll-border); }

/* Outline/secondary buttons that hardcode a light face */
:root[data-theme="dark"] .button:not(.primary):not([class*="review-rate"]) {
  background: #2a231d;
  color: var(--ll-text);
  border-color: var(--ll-border-strong);
}

/* Popover / modal surfaces */
:root[data-theme="dark"] .story-popover,
:root[data-theme="dark"] .podcast-word-popover,
:root[data-theme="dark"] .source-modal-card,
:root[data-theme="dark"] .modal-card { background: #241d18; color: var(--ll-text); border-color: var(--ll-border); }

/* Dark mode — home page uses a self-contained --home-* palette on .home. */
:root[data-theme="dark"] .home {
  --home-ink: #f2e9dc;
  --home-text: #d9c8b2;
  --home-muted: #b19b83;
  --home-border: rgba(232, 214, 186, 0.14);
  --home-border-strong: rgba(232, 214, 186, 0.24);
  --home-card-bg: #241d18;
  --home-shadow: var(--ll-elev-2);
}
:root[data-theme="dark"] .home .stamp,
:root[data-theme="dark"] .stamp {
  background: rgba(240, 225, 190, 0.10);
  color: var(--ll-text-muted);
}
/* CTA banner / showband keep their accent fills; just ensure text is legible. */
:root[data-theme="dark"] .home-cta-banner { background: linear-gradient(135deg, #3a2620, #2a1d18); border-color: var(--home-border-strong); }
/* Dark mode — home carousel slide frames (images are product screenshots). */
:root[data-theme="dark"] .cc__card { background: #241d18; border-color: var(--home-border-strong, rgba(232,214,186,0.24)); }
:root[data-theme="dark"] .cc__card img { background: #241d18; }

/* Dark mode — surfaces still rendering cream: the profile-page wrapper (a
   later rule hardcodes rgba cream over var(--ll-lined-paper)), and the chengyu
   strip + journey lesson-preview which hardcode #f7edd3. Explicit + high
   specificity so they beat the base/media-query rules. */
:root[data-theme="dark"] .profile-page { background: #201a15; border-color: var(--ll-border); }
:root[data-theme="dark"] .cotd-card,
:root[data-theme="dark"] .cotd-strip { background: #2a231d; border-color: #463a2f; }
:root[data-theme="dark"] .journey-panel { background: #2a231d; border-color: #463a2f; }
:root[data-theme="dark"] .journey-picker__chip:hover { background: #33291f; }

/* Dark mode — shared nav/filter chrome that resists token flips. */
:root[data-theme="dark"] .section-tab { background: #211b16; border-color: var(--ll-border); color: var(--ll-text-muted); }
:root[data-theme="dark"] .section-tab.is-active { background: #3a3016; color: var(--ll-text); }
:root[data-theme="dark"] .library-filters label { background: transparent; color: var(--ll-text-muted); }
:root[data-theme="dark"] .library-filters select { background: #1e1813; color: var(--ll-text); border-color: var(--ll-border); }
:root[data-theme="dark"] .section-tab:nth-child(2n) { background: #211b16; }
:root[data-theme="dark"] .section-tab:hover,
:root[data-theme="dark"] .section-tab:focus-visible { background: #33291f; }

/* =====================================================================
   Completion + achievements (added 2026-09-26)
   ===================================================================== */

/* --- Library: "Show read" filter, completion tick, chapter progress bar --- */
.library-showread {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.92rem; color: var(--ink); cursor: pointer; user-select: none;
}
.library-showread input { width: 1rem; height: 1rem; accent-color: var(--ll-olive, #8E965A); cursor: pointer; }

.library-card { position: relative; }
.library-card.is-completed { }
.library-card__tick {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  width: 1.6rem; height: 1.6rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  /* Light-green circle with a dark-green tick. */
  background: #d5e8c4; color: #3f6d2f;
  font-size: 0.95rem; font-weight: 800; line-height: 1;
  box-shadow: var(--ll-elev-0);
}
.library-progress {
  height: 6px; border-radius: 999px; margin: 0.15rem 0 0.7rem;
  background: var(--ll-border, #E3D7C6); overflow: hidden;
}
.library-progress__fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--ll-olive, #8E965A); transition: width 0.4s ease;
}

/* --- Profile: Overview / Achievements tab strip --- */
.profile-tabs {
  display: flex; gap: 0.4rem; margin: 0.2rem 0 1.2rem;
  border-bottom: 1px solid var(--ll-border, #E3D7C6);
}
.profile-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--ll-muted, #7f654d);
  padding: 0.55rem 0.9rem; border-radius: 10px 10px 0 0;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color var(--ll-motion-fast, 0.15s ease), border-color var(--ll-motion-fast, 0.15s ease);
}
.profile-tab:hover { color: var(--ink); }
.profile-tab.is-active { color: var(--red, #b94436); border-bottom-color: var(--red, #b94436); }
.profile-tab:focus-visible { outline: none; box-shadow: var(--ll-focus-ring, 0 0 0 3px rgba(185,68,54,.35)); }

/* --- Achievements grid (profile tab) --- */
.profile-ach-intro { margin: 0 0 1rem; color: var(--ll-muted, #7f654d); }
.ll-ach-summary { font-weight: 800; color: var(--ink); margin: 0 0 0.9rem; }
.ll-ach-grid {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ll-ach-card {
  position: relative; display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.85rem 0.9rem; border-radius: var(--ll-r-md, 12px);
  border: 1px solid var(--ll-border, #E3D7C6); background: var(--ll-paper, #fffaf0);
}
.ll-ach-card.is-locked { opacity: 0.72; }
.ll-ach-card.is-earned { background: var(--ll-paper-warm, #fff3dc); border-color: var(--ll-marigold, #f2b33d); }
.ll-ach-card__icon {
  font-size: 1.6rem; line-height: 1; flex: 0 0 auto;
  filter: saturate(1); width: 2.2rem; text-align: center;
}
.ll-ach-card.is-locked .ll-ach-card__icon { filter: grayscale(1); opacity: 0.6; }

/* Watercolor achievement icons — each its own transparent PNG (sliced from the
   sheet), applied by a per-id class so the url is root-relative (works at any
   page depth) and there's no cross-cell bleed. background-size:contain keeps
   every icon fitted and centered regardless of its native aspect ratio. */
.ll-ach-ico {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
}
.ll-ach-card__icon.ll-ach-ico { width: 3rem; height: 3rem; font-size: 0; }
.ll-achievement-toast__icon.ll-ach-ico { width: 2.9rem; height: 2.9rem; background-color: transparent; }
.ll-ach-ico--first-light { background-image: url("assets/achievements/first-light.png?v=20260926f"); }
.ll-ach-ico--good-listener { background-image: url("assets/achievements/good-listener.png?v=20260926f"); }
.ll-ach-ico--back-for-more { background-image: url("assets/achievements/back-for-more.png?v=20260926f"); }
.ll-ach-ico--word-collector { background-image: url("assets/achievements/word-collector.png?v=20260926f"); }
.ll-ach-ico--getting-comfortable { background-image: url("assets/achievements/getting-comfortable.png?v=20260926f"); }
.ll-ach-ico--podcast-regular { background-image: url("assets/achievements/podcast-regular.png?v=20260926f"); }
.ll-ach-ico--on-a-roll { background-image: url("assets/achievements/on-a-roll.png?v=20260926f"); }
.ll-ach-ico--lantern-keeper { background-image: url("assets/achievements/lantern-keeper.png?v=20260926f"); }
.ll-ach-ico--vocabulary-hoarder { background-image: url("assets/achievements/vocabulary-hoarder.png?v=20260926f"); }
.ll-ach-ico--walking-dictionary { background-image: url("assets/achievements/walking-dictionary.png?v=20260926f"); }
.ll-ach-ico--review-machine { background-image: url("assets/achievements/review-machine.png?v=20260926f"); }
.ll-ach-ico--storyteller { background-image: url("assets/achievements/storyteller.png?v=20260926f"); }
.ll-ach-ico--bookworm { background-image: url("assets/achievements/bookworm.png?v=20260926f"); }
.ll-ach-ico--all-ears { background-image: url("assets/achievements/all-ears.png?v=20260926f"); }
.ll-ach-ico--grammar-detective { background-image: url("assets/achievements/grammar-detective.png?v=20260926f"); }
.ll-ach-ico--no-pinyin-needed { background-image: url("assets/achievements/no-pinyin-needed.png?v=20260926f"); }
.ll-ach-ico--no-translation-needed { background-image: url("assets/achievements/no-translation-needed.png?v=20260926f"); }
.ll-ach-ico--the-long-road { background-image: url("assets/achievements/the-long-road.png?v=20260926f"); }
.ll-ach-ico--year-of-light { background-image: url("assets/achievements/year-of-light.png?v=20260926f"); }
.ll-ach-ico--little-lantern-legend { background-image: url("assets/achievements/little-lantern-legend.png?v=20260926f"); }
.ll-ach-card__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ll-ach-card__name { font-weight: 800; color: var(--ink); }
.ll-ach-card__desc { font-size: 0.86rem; color: var(--ll-muted, #7f654d); line-height: 1.35; }
.ll-ach-card__diff {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ll-olive, #8E965A); margin-top: 0.15rem;
}
.ll-ach-card__bar {
  display: block; height: 5px; border-radius: 999px; margin-top: 0.4rem;
  background: var(--ll-border, #E3D7C6); overflow: hidden;
}
.ll-ach-card__bar-fill { display: block; height: 100%; background: var(--ll-olive, #8E965A); border-radius: 999px; }
.ll-ach-card__count { font-size: 0.72rem; color: var(--ll-muted, #7f654d); margin-top: 0.2rem; }
.ll-ach-card__tick {
  position: absolute; top: 0.55rem; right: 0.6rem;
  width: 1.4rem; height: 1.4rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ll-marigold, #f2b33d); color: var(--ink);
  font-size: 0.85rem; font-weight: 800;
}

/* --- Achievement unlock toast (bottom-right, queued one at a time) --- */
.ll-achievement-toasts {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 9999;
  display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none;
  max-width: min(360px, calc(100vw - 2rem));
}
.ll-achievement-toast {
  display: flex; gap: 0.7rem; align-items: center;
  padding: 0.7rem 0.9rem; border-radius: var(--ll-r-16);
  background: var(--ll-paper, #fffaf0); color: var(--ink);
  border: 1px solid var(--ll-marigold, #f2b33d);
  box-shadow: var(--ll-elev-2);
  /* start off-screen to the right; JS drives enter -> settle -> leave */
  transform: translateX(120%); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  pointer-events: auto;
}
.ll-achievement-toast.is-entering { transform: translateX(6%); opacity: 1; }
.ll-achievement-toast.is-settled { transform: translateX(0); opacity: 1; }
.ll-achievement-toast.is-leaving { transform: translateX(120%); opacity: 0; }
.ll-achievement-toast__icon {
  font-size: 1.7rem; line-height: 1; flex: 0 0 auto;
  width: 2.4rem; height: 2.4rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ll-paper-warm, #fff3dc);
}
.ll-achievement-toast__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ll-achievement-toast__eyebrow {
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ll-olive, #8E965A);
}
.ll-achievement-toast__name { font-weight: 800; color: var(--ink); }
.ll-achievement-toast__desc { font-size: 0.82rem; color: var(--ll-muted, #7f654d); line-height: 1.3; }
@media (prefers-reduced-motion: reduce) {
  .ll-achievement-toast { transition: opacity 0.3s ease; transform: none; }
  .ll-achievement-toast.is-entering,
  .ll-achievement-toast.is-settled { transform: none; }
  .ll-achievement-toast.is-leaving { transform: none; opacity: 0; }
}
:root[data-theme="dark"] .ll-ach-card { background: #211b16; }
:root[data-theme="dark"] .ll-ach-card.is-earned { background: #2b2118; }
:root[data-theme="dark"] .ll-achievement-toast { background: #211b16; }
:root[data-theme="dark"] .ll-achievement-toast__icon { background: #2b2118; }


/* ============================================================
   Glow leaderboard + public profiles (2026-09-26)
   ============================================================ */
.lb-page { }
.lb-head { display: flex; gap: 1.4rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.4rem; }
.lb-head h1 { margin: 0 0 0.4rem; }
.lb-lead { max-width: 720px; margin: 0.2rem 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--brown, #5a4634); font-style: normal; }
.lb-how { flex: 0 1 22rem; padding: 0.7rem 0.95rem; border-radius: var(--ll-r-12); background: var(--ll-paper-warm, #fff3dc); border: 1px solid rgba(200, 155, 60, 0.35); }
.lb-how summary { cursor: pointer; font-weight: 800; color: #7b4e19; }
.lb-how__table { width: 100%; margin-top: 0.6rem; border-collapse: collapse; font-size: 0.88rem; }
.lb-how__table td { padding: 0.32rem 0; border-top: 1px dashed rgba(123, 92, 67, 0.25); vertical-align: top; }
.lb-how__table td:last-child { text-align: right; white-space: nowrap; font-weight: 800; color: #b8862b; padding-left: 0.6rem; }
.lb-how__table small { font-weight: 500; color: var(--ll-muted, #7f654d); }

.lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; align-items: end; margin-bottom: 1.6rem; }
.lb-podium__card {
  display: grid; justify-items: center; gap: 0.3rem; text-decoration: none; color: var(--ink);
  padding: 1rem 0.6rem 0.9rem; border-radius: var(--ll-r-16); background: var(--ll-paper, #fffaf0);
  border: 1px solid var(--ll-border, #E3D7C6); box-shadow: var(--ll-elev-1);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.lb-podium__card:hover { transform: translateY(-2px); box-shadow: var(--ll-elev-2); }
.lb-podium__card--1 { padding-top: 1.5rem; padding-bottom: 1.3rem; background: linear-gradient(180deg, #fff4d2, #fffaf0); border-color: #f2b33d; }
.lb-podium__card--2 { background: linear-gradient(180deg, #f3f1ec, #fffaf0); }
.lb-podium__card--3 { background: linear-gradient(180deg, #f6e6d6, #fffaf0); }
.lb-podium__medal { font-size: 1.5rem; line-height: 1; }
.lb-podium__card--1 .lb-podium__medal { font-size: 2rem; }
.lb-podium__name { font-weight: 800; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-podium__glow { font-weight: 800; color: #b8862b; font-size: 0.92rem; }
.lb-podium .lb-avatar { width: 3.2rem; height: 3.2rem; font-size: 1.25rem; }
.lb-podium__card--1 .lb-avatar { width: 4rem; height: 4rem; font-size: 1.5rem; }

.lb-list-title { margin: 0 0 0.7rem; font-size: 1.25rem; }
.lb-list { display: grid; gap: 0.45rem; }
.lb-row {
  display: grid; grid-template-columns: 3rem 2.4rem 1fr auto; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.9rem; border-radius: var(--ll-r-12); text-decoration: none; color: var(--ink);
  background: var(--ll-paper, #fffaf0); border: 1px solid var(--ll-border, #E3D7C6);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.lb-row:hover { transform: translateX(3px); box-shadow: var(--ll-elev-1); border-color: rgba(200, 155, 60, 0.5); }
.lb-row.is-me { background: linear-gradient(90deg, rgba(255, 240, 200, 0.95), rgba(255, 250, 240, 0.95)); border-color: #f2b33d; box-shadow: 0 0 0 3px rgba(242, 179, 61, 0.22); }
.lb-rank { font-weight: 900; color: var(--ll-muted, #7f654d); font-variant-numeric: tabular-nums; }
.lb-row.is-top .lb-rank { font-size: 1.25rem; }
.lb-avatar {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover;
  background: var(--red, #b94436); color: #fff8ee; font-weight: 800; font-size: 1rem;
}
.lb-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-you { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; background: #f2b33d; color: #5a3a08; vertical-align: middle; }
.lb-glow { font-weight: 900; color: #b8862b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-glow__icon { margin-right: 0.15rem; }
.lb-gap { margin: 0.4rem 0.2rem; font-size: 0.82rem; color: var(--ll-muted, #7f654d); }
.lb-empty, .pp-empty { color: var(--ll-muted, #7f654d); font-weight: 600; }

/* Public profile */
.pp-hero { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin-bottom: var(--ll-section-gap, 1.6rem); }
.pp-avatar {
  display: inline-grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--red, #b94436); color: #fff8ee; font-weight: 800; font-size: 2rem; box-shadow: var(--ll-elev-1);
}
.pp-hero__text { min-width: 0; }
.pp-page h1.pp-name { margin: 0 0 0.45rem; max-width: none; }
.pp-meta { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 0 0 0.5rem; }
.pp-chip { display: inline-flex; align-items: center; padding: 0.28rem 0.7rem; border-radius: 999px; font-weight: 800; font-size: 0.85rem; background: var(--ll-paper-warm, #fff3dc); border: 1px solid var(--ll-border, #E3D7C6); color: var(--ink); }
.pp-chip--glow { background: rgba(255, 233, 174, 0.95); border-color: rgba(200, 155, 60, 0.45); color: #7b4e19; }
.pp-chip--quiet { font-weight: 600; color: var(--ll-muted, #7f654d); }
.pp-links { margin: 0; font-size: 0.9rem; }
.pp-links a { font-weight: 700; color: var(--red, #b94436); }

@media (max-width: 640px) {
  .lb-podium { gap: 0.45rem; }
  .lb-podium .lb-avatar, .lb-podium__card--1 .lb-avatar { width: 2.6rem; height: 2.6rem; font-size: 1.05rem; }
  .lb-row { grid-template-columns: 2.4rem 2.1rem 1fr auto; gap: 0.5rem; padding: 0.5rem 0.65rem; }
  .lb-standing__link { margin-left: 0; }
}
:root[data-theme="dark"] .lb-row,
:root[data-theme="dark"] .lb-podium__card { background: #211b16; }
:root[data-theme="dark"] .lb-row.is-me,
:root[data-theme="dark"] .lb-standing,
:root[data-theme="dark"] .lb-how { background: #2b2118; }
:root[data-theme="dark"] .lb-podium__card--1 { background: linear-gradient(180deg, #3a2c14, #211b16); }
:root[data-theme="dark"] .pp-chip { background: #2b2118; }


/* ============================================================
   Avatar icons (hand-drawn tiles) — header, leaderboard, profile picker
   ============================================================ */
.account-avatar--icon { background: transparent; overflow: hidden; border-radius: 30%; }
.account-avatar--icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-avatar--icon, .pp-avatar--icon { border-radius: 26%; background: transparent; box-shadow: var(--ll-elev-0); }
.pp-avatar--icon { box-shadow: var(--ll-elev-1); }
.avatar-picker {
  display: grid; gap: 0.6rem; margin-top: 0.8rem;
  grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr));
}
.avatar-tile {
  position: relative; display: grid; gap: 0.3rem; justify-items: center;
  padding: 0.45rem 0.35rem 0.5rem; border-radius: var(--ll-r-16); cursor: pointer; font: inherit;
  background: var(--ll-paper, #fffaf0); border: 2px solid var(--ll-border, #E3D7C6); color: var(--ink);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.avatar-tile img { width: 4.2rem; height: 4.2rem; border-radius: 22%; object-fit: cover; display: block; }
.avatar-tile__label { font-size: 0.74rem; font-weight: 700; text-align: center; line-height: 1.15; }
.avatar-tile:hover:not(.is-locked) { transform: translateY(-2px); box-shadow: var(--ll-elev-1); border-color: rgba(200, 155, 60, 0.6); }
.avatar-tile.is-selected { border-color: var(--red, #b94436); background: var(--ll-paper-warm, #fff3dc); box-shadow: 0 0 0 3px rgba(185, 68, 54, 0.18); }
.avatar-tile.is-locked { cursor: not-allowed; }
.avatar-tile.is-locked img { filter: grayscale(1) contrast(0.85); opacity: 0.45; }
.avatar-tile.is-locked .avatar-tile__label { color: var(--ll-muted, #7f654d); }
.avatar-tile__lock { position: absolute; top: 0.4rem; right: 0.45rem; font-size: 0.85rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
.avatar-tile:focus-visible { outline: none; box-shadow: var(--ll-focus-ring, 0 0 0 3px rgba(185,68,54,.35)); }
:root[data-theme="dark"] .avatar-tile { background: #211b16; }
:root[data-theme="dark"] .avatar-tile.is-selected { background: #2b2118; }



/* Leaderboard: month note (left) + notebook tabs (right), and a flat standing line */
.lb-period.profile-tabs { align-items: flex-end; margin: 0 0 1.1rem; }
.lb-period__note { margin-right: auto; padding: 0 0 0.6rem; font-weight: 700; color: var(--ll-muted, #7f654d); font-size: 0.95rem; }
.lb-standing {
  display: flex; gap: 0.8rem 2.2rem; align-items: center; flex-wrap: wrap;
  padding: 0.9rem 1.2rem; margin-bottom: 1.3rem; border-radius: var(--ll-r-12);
  background: var(--ll-paper-warm, #fff3dc); border: 1px solid var(--ll-border, #E3D7C6);
}
.lb-standing--guest { justify-content: center; }
.lb-standing--guest p { margin: 0; color: var(--ink); font-size: 0.95rem; }
.lb-standing__stat { display: grid; gap: 0.1rem; }
.lb-standing__label { font-size: 0.82rem; font-weight: 700; color: var(--ll-muted, #7f654d); }
.lb-standing__value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.lb-standing__value--glow { color: #b8862b; }
.lb-standing__sub { font-size: 0.82rem; color: var(--ll-muted, #7f654d); }
.lb-standing__link { margin-left: auto; font-weight: 700; color: var(--red, #b94436); white-space: nowrap; }
.lb-how__note { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--ll-muted, #7f654d); }
:root[data-theme="dark"] .lb-standing { background: #2b2118; }
@media (max-width: 640px) { .lb-period__note { flex-basis: 100%; padding-bottom: 0.3rem; } }


/* ============================================================
   Video page controls — mirrors the YouTube extension exactly
   (grouped pill over the video; − + ✕ in the transcript head).
   Values copied from extension/content.css (.ll-toolbar, .ll-ctl,
   .ll-brand, .ll-restore, .ll-sidebar__head, .ll-settings).
   ============================================================ */
.video-player-card { position: relative; }
.vr-toolbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 1px;
  padding: 3px 6px 3px 4px;
  background: rgba(250, 243, 231, 0.96);
  border: 1px solid #eadcc0; border-radius: 999px;
  box-shadow: var(--ll-elev-1);
  font-family: "Nunito", "Noto Sans SC", system-ui, sans-serif;
}
.vr-toolbar[hidden] { display: none; }
.vr-brand {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 9px 0 8px; margin-right: 3px; border-right: 1px solid #eadcc0;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 800; font-size: 0.9rem; color: #3a2a1c; white-space: nowrap;
}
.vr-brand__icon {
  width: 1.4rem; height: 1.4rem; flex: 0 0 auto;
  background: url("assets/little-lantern-lantern-icon.png") center / contain no-repeat;
}
/* Borderless controls inside the pill — reset the site's global button chrome. */
.vr-ctl {
  min-width: 1.8rem; height: 1.8rem; min-height: 0; padding: 0 0.4rem; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 999px; box-shadow: none;
  color: #6f5842; font-family: "Nunito", "Noto Sans SC", system-ui, sans-serif;
  font-weight: 700; font-size: 0.82rem; line-height: 1; letter-spacing: 0; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.vr-ctl:hover { background: rgba(123, 92, 67, 0.16); color: #b94436; box-shadow: none; transform: none; }
.vr-ctl.is-on { background: #b94436; color: #fff8ee; }
.vr-ctl.is-on:hover { background: #a53a2d; color: #fff8ee; }
.vr-ctl svg { width: 1em; height: 1em; vertical-align: -0.14em; }
.vr-restore {
  position: absolute; left: 10px; top: 45%; transform: translateY(-50%); z-index: 7;
  width: 2.3rem; height: 2.3rem; min-height: 0; padding: 0; border-radius: 50%;
  background: rgba(250, 243, 231, 0.96); border: 1px solid #eadcc0;
  box-shadow: var(--ll-elev-1); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.vr-restore[hidden] { display: none; }
.vr-restore:hover { background: #fff8ec; }
/* Transcript head = extension sidebar head. */
.video-reader-head { padding: 0.5rem 0.75rem; gap: 0.5rem; }
.video-reader-tools { gap: 1px; flex-wrap: nowrap; }
.video-reader-tools .vr-ctl { min-width: 1.5rem; height: 1.5rem; font-size: 0.95rem; }
/* Settings = extension floating card, top-right of the video. */
.vr-settings {
  position: absolute; top: 56px; right: 12px; z-index: 8; width: 17rem;
  padding: 0.4rem 0.4rem 0.6rem;
  background: rgba(250, 243, 231, 0.98); border: 1px solid #eadcc0; border-radius: var(--ll-r-16);
  box-shadow: var(--ll-elev-2); color: #3a2a1c;
  font-family: "Nunito", "Noto Sans SC", system-ui, sans-serif;
}
.vr-settings__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.4rem 0.5rem 0.5rem; border-bottom: 1px solid #eadcc0;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
}
.vr-set-row { padding: 0.5rem 0.5rem 0; }
.vr-set-row > span { font-size: 0.9rem; }
.vr-seg button { min-height: 0; box-shadow: none; padding: 0.22rem 0.55rem; font-size: 0.82rem; }
/* Dark theme (Settings → theme) for the new chrome — extension colours. */
.vr-toolbar[data-reader-theme="dark"], .vr-settings[data-reader-theme="dark"], .vr-restore[data-reader-theme="dark"] {
  background: #25211e; border-color: #443c33; color: #f3ebdd; box-shadow: var(--ll-elev-2);
}
.vr-toolbar[data-reader-theme="dark"] .vr-brand { color: #f3ebdd; border-color: #443c33; }
[data-reader-theme="dark"] .vr-ctl { color: #c9b9a2; }
[data-reader-theme="dark"] .vr-ctl:hover { background: rgba(255, 255, 255, 0.1); color: #f0c9b0; }
[data-reader-theme="dark"] .vr-ctl.is-on { background: #b94436; color: #fff8ee; }
.vr-settings[data-reader-theme="dark"] .vr-settings__head { border-color: #443c33; }
@media (max-width: 560px) { .vr-brand { display: none; } }


/* Underline mode in the dark reader/captions: the underline rule above forces
   color: var(--ink) !important (ink stays dark there), so the hanzi vanished on
   the dark panel. Keep the underline, paint the text light. */
:root[data-highlight-style="underline"] .video-reader-panel[data-reader-theme="dark"] :is(.podcast-word-hanzi, .pw-char-hanzi),
:root[data-highlight-style="underline"] .video-caption-overlay[data-reader-theme="dark"] :is(.podcast-word-hanzi, .pw-char-hanzi) {
  color: #efe6d6 !important;
}


/* "Beta" pill after a page heading (Arcade, Leaderboard). Same rule the Arcade
   page had inline, now shared. */
.beta-pill {
  display: inline-block; vertical-align: middle; margin-left: 0.35rem;
  font-family: "Nunito", system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--ll-coral, #bd483a); padding: 4px 11px; border-radius: 99px;
  box-shadow: 0 4px 12px rgba(189, 72, 58, .35); transform: translateY(-2px);
}

/* Section tab for an area that isn't ready yet (Library → Videos, 2026-09-21).
   Rendered as a <span>, not a link: visibly present so the shape of the
   section is honest, but not clickable, with a small "Soon" pill. */
.section-tab.is-disabled {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}
.section-tab.is-disabled .section-tab__badge {
  background: rgba(123, 92, 67, 0.14);
  color: rgba(60, 43, 32, 0.75);
}

/* Native app (App Store build): hide purchase links that live in static markup.
   The data-native-app flag is set by assets/access-control.js — see the note on
   isNativeApp there. Apple doesn't allow an app to point users at an external
   way to pay, and we don't ship In-App Purchase yet. The web is unaffected. */
html[data-native-app] [data-plans-link] { display: none !important; }

/* =====================================================================
   Signed-in home — PHONE layout (matches the app-home mockup).
   A single-column stack: welcome + streak · Continue learning · Your
   progress · Recommended · Explore tiles · Chengyu. Every rule is scoped
   to .home and phone width, so the desktop website home is untouched.
   ===================================================================== */
/* Base (all widths): the mobile-only bits stay hidden until the phone block. */
.dash__streak {
  display: inline-flex; align-items: baseline; gap: 0.3rem; margin: 0;
  font-weight: 800; white-space: nowrap;
}
.dash__streak .dash__flame { font-size: 1rem; }
.dash__streak .dash__streak-num { font-size: 1.25rem; color: var(--red, #b94436); }
.dash__streak .dash__streak-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--home-muted, #715a44);
}
.explore__icon { display: none; }
.rec-title--mob { display: none; }
.rec-title--desk { display: inline; }

@media (max-width: 720px) {
  /* --- Welcome + streak row --- */
  .home .dash__greeting { font-size: clamp(1.85rem, 8.5vw, 2.35rem); line-height: 1.08; margin: 0 0 0.25rem; }
  .home .dash__sub { font-size: 1rem; }
  .home .dash__head { gap: 0.65rem 1rem; margin-bottom: 1.1rem; }
  .home .dash__head-text { flex: 1 1 100%; }
  .home .dash__week { flex: 1 1 auto; max-width: none; }
  .home .dash__week .hp-day { width: auto; }
  /* The streak widget spans the row under the greeting and lets the seven days
     share the width evenly — no divider, it is inside the card now. */
  .home .dash__streakcard { flex: 1 1 100%; justify-items: stretch; padding: 0.7rem 0.9rem 0.8rem; }
  .home .dash__streakcard .dash__week .hp-day { width: auto; flex: 1; }
  .home .dash__streak .dash__flame { font-size: 1.05rem; }
  .home .dash__streak .dash__streak-num { font-size: 1.35rem; }

  /* --- Continue learning: the desktop 3-up cards give way to the journey card
         (continue) + the standalone progress card below. --- */
  .home [data-dashboard-cards] { display: none !important; }
  .home .journey-card { padding: 1rem 1.05rem; border-radius: var(--ll-r-20); }
  .home .journey-panel { background: transparent; border: 0; padding: 0; gap: 0.7rem; }
  .home .journey-panel__thumb { max-height: 168px; }
  .home .journey-panel__thumb::before { display: none; }

  /* --- Your progress card (pulled out of the recommended grid by JS) --- */
  .home .dash-progress { margin-top: clamp(1.2rem, 4vw, 1.8rem); }
  .home .dash-progress .rec-card { width: 100%; }
  .home .dash-progress .rec-card__title { -webkit-line-clamp: none; }

  /* --- Recommended: two content cards side by side --- */
  .home .rec-title--desk { display: none; }
  .home .rec-title--mob { display: inline; }
  .home .rec-grid, .home .rec-grid[data-count="2"], .home .rec-grid[data-count="1"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem;
  }
  .home .rec-card__media { max-height: 118px; margin-bottom: 0.5rem; }
  .home .rec-card__title { font-size: 1rem; }
  .home .rec-card__cta { align-self: stretch; text-align: center; }

  /* --- Explore: 4 icon tiles (the three bottom-nav duplicates are hidden) --- */
  .home .explore__grid { grid-template-columns: repeat(4, 1fr); gap: 0.55rem; }
  .home .explore__grid [data-mob-hide] { display: none; }
  .home .explore__grid a {
    flex-direction: column; gap: 0.4rem; min-height: 5.1rem; padding: 0.8rem 0.3rem;
  }
  .home .explore__icon { display: inline-flex; align-items: center; justify-content: center; }
  .home .explore__icon svg { width: 25px; height: 25px; color: var(--red, #b94436); }
  .home .explore__label { font-size: 0.72rem; font-weight: 700; line-height: 1.15; }
  .home .explore__grid [data-explore="podcasts"] { order: 1; }
  .home .explore__grid [data-explore="reader"]   { order: 2; }
  .home .explore__grid [data-explore="pron"]     { order: 3; }
  .home .explore__grid [data-explore="words"]    { order: 4; }

  /* --- Chengyu: a fuller card foot --- */
  .home .cotd-strip { padding: 1.05rem 1.1rem; gap: 0.55rem; }
  .home .cotd-strip .cotd-hanzi { font-size: 2.15rem; }
}