/* Kid app — extras that Tailwind utilities can't reach cleanly:
   drop-cap on the first paragraph, sentence hover/active highlight,
   listening pulse, hero entrance, avatar ring.
   Everything else is Tailwind utilities on top of /shared/components.css. */

body.kid {
  --font-sans: "Nunito", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "SF Pro Display", "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* Display face — playful rounded headings, buttons, brand & big numbers. */
  --font-display: "Baloo 2", "Nunito", ui-rounded, "Segoe UI", sans-serif;

  /* ═══ NewsNest design palette ═══════════════════════════════════════════
     Warm cream page, white cards, orange accent, brown-neutral text. The
     100→1000 scale semantics are preserved so Tailwind utilities and the
     shared component CSS pick these up automatically. */

  /* Surfaces */
  --background-100: #ffffff;   /* cards */
  --background-200: #fffbf4;
  --background-300: #fff7ed;

  /* Neutrals → warm brown text & cream borders */
  --gray-100: #fffbf4;         /* subtle fill */
  --gray-200: #f8f0e4;         /* hover bg / row divider */
  --gray-300: #f5ead9;         /* toggle track / active bg */
  --gray-400: #f2e6d6;         /* default border */
  --gray-500: #d8c3a6;
  --gray-600: #8a7a66;         /* secondary text */
  --gray-700: #6b6558;
  --gray-800: #5c5346;
  --gray-900: #3a342a;         /* strong text */
  --gray-1000: #2a2620;        /* primary text */

  /* Warm-brown translucent overlays (dividers, hovers, scrims) */
  --gray-alpha-100: rgba(120, 72, 20, 0.045);
  --gray-alpha-200: rgba(120, 72, 20, 0.07);
  --gray-alpha-300: rgba(120, 72, 20, 0.10);
  --gray-alpha-400: rgba(120, 72, 20, 0.14);
  --gray-alpha-500: rgba(120, 72, 20, 0.20);
  --gray-alpha-600: rgba(90, 54, 16, 0.30);
  --gray-alpha-700: rgba(60, 36, 10, 0.44);
  --gray-alpha-800: rgba(50, 30, 8, 0.55);
  --gray-alpha-900: rgba(40, 24, 6, 0.72);
  --gray-alpha-1000: rgba(30, 18, 4, 0.9);

  /* Orange accent */
  --warm-100: #fff3e4;         /* chip / soft fill */
  --warm-200: #ffe3c4;
  --warm-300: #fce0bf;         /* chip border */
  --warm-400: #fdba74;
  --warm-500: #fb923c;
  --warm-600: #f97316;         /* primary solid */
  --warm-700: #c2410c;         /* dark accent text */
  --warm-800: #9a3412;
  --warm-900: #7c2d12;
  --warm-1000: #431407;

  /* Success green */
  --green-100: #eaf6e6;
  --green-200: #f4fbf2;
  --green-300: #cfe9c6;
  --green-400: #a9dd9a;
  --green-700: #16a34a;
  --green-800: #15803d;
  --green-900: #2a6a2a;

  /* Error red */
  --red-100: #fff1f0;
  --red-200: #ffe3e0;
  --red-300: #f6cfc9;
  --red-400: #e88a80;
  --red-700: #e86a5b;
  --red-800: #c0483c;
  --red-900: #b0473c;

  /* Warning amber */
  --amber-100: #fbebd6;
  --amber-200: #f6d9b8;
  --amber-700: #b4732c;
  --amber-800: #9a6a34;
  --amber-900: #7a4300;

  /* Purple — news source / level tags */
  --blue-100: #efe7fb;
  --blue-200: #e3d7f7;
  --blue-700: #7c5bc2;
  --blue-800: #6a48b0;
  --blue-900: #543a90;

  /* Rounder radii for the playful look */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;

  /* Warm shadows */
  --shadow-soft: 0 1px 2px rgba(120, 72, 20, 0.06);
  --shadow-raised: 0 8px 20px -14px rgba(120, 72, 20, 0.4);
  --shadow-popover: 0 24px 56px -26px rgba(120, 72, 20, 0.45);
  --shadow-modal: 0 30px 70px -30px rgba(120, 72, 20, 0.45);
  --shadow-floating: 0 24px 56px -26px rgba(120, 72, 20, 0.5);

  /* Focus & state rings → orange */
  --ring-focus: 0 0 0 4px rgba(249, 115, 22, 0.2);
  --ring-error: 0 0 0 4px rgba(224, 106, 91, 0.18);
  --ring-success: 0 0 0 4px rgba(22, 163, 74, 0.18);
  --kid-page-margin: clamp(16px, 2vw, 28px);
  --kid-page-height: calc(100vh - var(--kid-page-margin) - var(--kid-page-margin));
  --kid-frame-radius: 26px;
  --kid-topbar-height: 66px;
  --kid-chat-frame-inset: 12px;
  --kid-chat-panel-width: 400px;
  --kid-dock-inline-inset: 34px;

  min-height: 100vh;
  padding: var(--kid-page-margin);
  background: #e7e0d6;
  color: var(--gray-1000);
  overflow: hidden;
}

@supports (height: 100dvh) {
  body.kid {
    min-height: 100dvh;
    --kid-page-height: calc(100dvh - var(--kid-page-margin) - var(--kid-page-margin));
  }
}

body.kid .kid-app-root {
  width: 100%;
  height: var(--kid-page-height);
  min-height: var(--kid-page-height) !important;
  border-radius: var(--kid-frame-radius);
  background: var(--background-300);
  box-shadow: 0 30px 70px -30px rgba(120, 72, 20, 0.45);
  overflow: hidden;
}

body.kid .kid-loading-view,
body.kid .kid-reader-view {
  height: var(--kid-page-height);
  min-height: var(--kid-page-height) !important;
}

body.kid .kid-reader-view {
  display: flex;
  flex-direction: column;
  background: var(--background-300);
  overflow: hidden;
}

body.kid .kid-reader-view > .kr-parent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

body.kid .kid-topbar {
  top: 0 !important;
  flex: 0 0 var(--kid-topbar-height);
  background: #fff !important;
  overflow: visible;
}

body.kid .kid-topbar > div {
  height: var(--kid-topbar-height) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

body.kid .kid-brand-slot {
  width: auto !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

body.kid .kid-brand {
  gap: 12px !important;
}

@media (max-width: 640px) {
  body.kid {
    --kid-page-margin: clamp(8px, 3vw, 14px);
    --kid-frame-radius: 20px;
    --kid-topbar-height: 58px;
    --kid-chat-frame-inset: 8px;
    overflow: hidden;
  }

  body.kid .kid-topbar > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Baloo 2 on everything that reads as a heading, button, brand mark, or
   hero number in the design. Component rules that hard-set --font-sans are
   overridden individually below. */
body.kid :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); }

body.kid header {
  box-shadow: 0 1px 0 var(--gray-400);
}

/* Top-bar brand: visible only in the browser. Hidden in Tauri desktop because
   the native shell already has title chrome. */
.kid-brand {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--warm-700);
  letter-spacing: 0;
  line-height: 1;
}
.kid-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--warm-500);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 8px 16px -8px rgba(249, 115, 22, 0.6);
}
.kid-brand-mark :where(svg) { width: 18px; height: 18px; }
.kid-brand-text { font-weight: 800; color: var(--warm-700); }
.kid-brand-accent { color: var(--warm-700); }

.kid-top-identity {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  color: var(--gray-900);
  font: var(--label-14);
  font-family: var(--font-sans);
  transition:
    background var(--duration-state) var(--ease-out),
    color var(--duration-state) var(--ease-out);
}
button.kid-top-identity:hover {
  background: var(--gray-alpha-100);
  color: var(--gray-1000);
}
.kid-top-identity svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Keyword highlight inside an article paragraph. A warm capsule with
   a slightly larger, bolder face so target vocabulary visibly pops out
   of the surrounding prose without ever feeling shouty. */
.kid-paragraph mark,
.kid-sentence mark {
  background: var(--warm-200) !important;
  color: var(--warm-1000) !important;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.08em;
  box-shadow: inset 0 0 0 1px rgba(183, 107, 0, 0.22);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Keep the first paragraph plain. The earlier drop-cap made the article feel
   decorative and competed with reading flow. */
.kid-paragraph[data-first="true"]::first-letter {
  float: none;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  text-shadow: none;
}

.kid-paragraph {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Per-sentence hover / active highlight. No active underline (felt too
   "highlighter pen"); the active state gets a 2px warm underline so
   listeners can track the spoken position even when looking away.
   The sentence is also the anchor for its translation popup, so it
   needs its own positioning context. */
.kid-sentence {
  position: relative;
  border-radius: 4px;
  padding: 0 1px;
  cursor: pointer;
  transition:
    background var(--duration-state) var(--ease-out),
    box-shadow var(--duration-state) var(--ease-out);
}
.kid-sentence:hover {
  background: rgba(255, 232, 204, 0.55);
}
.kid-sentence[data-active="true"] {
  background: #fef3c7;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #fbe39a;
}
/* While any sentence is loading or playing, the others are dimmed and
   non-interactive so the reader can't stack overlapping reads. */
.kid-sentence[data-busy="true"] {
  opacity: 0.4;
  cursor: default;
  pointer-events: auto;
}
/* Inline loading spinner shown at the end of a sentence while its audio is
   being fetched / synthesized (cold cache). Sits on the sentence's baseline. */
.kid-sentence-loading {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: -2px;
  margin-left: 6px;
  padding: 1px 8px 1px 6px;
  border-radius: var(--radius-full);
  background: var(--warm-100);
  box-shadow: inset 0 0 0 1px rgba(183, 107, 0, 0.18);
}
.kid-sentence-loading-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--warm-900);
  white-space: nowrap;
}

/* Individual tappable words inside a sentence. Every English word is wrapped
   so the reader can tap any of them for an explanation; keyword vocabulary
   keeps its warm highlight via kid-word--kw. */
.kid-word {
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--duration-state) var(--ease-out);
}
.kid-word:hover {
  background: rgba(255, 203, 102, 0.30);
}
.kid-word--kw {
  background: var(--warm-200);
  color: var(--warm-1000);
  padding: 1px 6px;
  margin: 0 1px;
  font-weight: 700;
  font-size: 1.08em;
  box-shadow: inset 0 0 0 1px rgba(183, 107, 0, 0.22);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.kid-word--kw:hover {
  background: var(--warm-300);
}

/* Tap-to-explain card — a fixed-position overlay anchored to the tapped
   word. The overlay (full-viewport catcher) closes on outside taps; the card
   itself is positioned via inline style from wordPopupStyle. */
.kid-word-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.kid-word-popup {
  width: min(340px, calc(100vw - 16px));
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 247, 230, 0.92), rgba(255, 255, 255, 0.98) 60%, rgba(238, 246, 255, 0.7));
  box-shadow: inset 0 0 0 1px rgba(183, 107, 0, 0.18), var(--shadow-popover);
  transform-origin: top center;
}
.kid-word-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.kid-word-popup-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
/* Part-of-speech pill: a quiet gray tag next to the word. */
.kid-word-popup-pos {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--gray-alpha-200);
  color: var(--gray-800);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  flex-shrink: 0;
}
.kid-word-popup-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--gray-700);
}
.kid-word-popup-close:hover { background: var(--gray-alpha-200); color: var(--gray-1000); }
.kid-word-popup-close svg { width: 16px; height: 16px; }
.kid-word-popup-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--gray-700);
  font-size: 14px;
}
.kid-word-popup-body { display: flex; flex-direction: column; gap: 12px; }
.kid-word-popup-explain {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--warm-100);
  color: var(--gray-900);
  font-size: 14px;
  line-height: 1.55;
  box-shadow: inset 0 0 0 1px var(--warm-300);
}
.kid-word-popup-example {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px var(--gray-alpha-200);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kid-word-popup-example-en {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-1000);
  font-size: 15px;
  font-style: italic;
}
.kid-word-popup-speak {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--warm-700);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(183, 107, 0, 0.2);
}
.kid-word-popup-speak:hover { background: var(--warm-100); }
.kid-word-popup-speak svg { width: 16px; height: 16px; }

/* Translation popup — anchored at the end of the just-tapped sentence.
   Shows the Chinese translation while the audio plays, then dismisses
   when the reader taps the same sentence again, a different sentence,
   blank space, or hits Esc. Only one popup is live at a time, owned
   by the kidApp() store via `activePopupKey`. The little upward arrow
   is a pure-CSS triangle so the popup feels attached to the source
   sentence rather than floating in the page. */
.kid-translation-popup {
  position: fixed;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: inline-block;
  min-width: 180px;
  max-width: calc(100vw - 16px);
  max-height: min(220px, calc(100vh - 24px));
  padding: 10px 12px;
  background: var(--background-100);
  color: var(--gray-1000);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 0 0 1px var(--warm-300),
    var(--shadow-popover);
  font: var(--copy-14);
  font-family: var(--font-sans);
  line-height: 1.55;
  white-space: normal;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
  cursor: default;
  animation: kid-popup-in var(--duration-popover) var(--ease-spring) both;
}
.kid-translation-popup::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--kid-popup-arrow-left, 12px);
  width: 12px;
  height: 12px;
  background: var(--background-100);
  border-top: 1px solid var(--warm-300);
  border-left: 1px solid var(--warm-300);
  transform: rotate(45deg);
}
.kid-translation-popup-empty {
  color: var(--gray-700);
  font-style: italic;
}
@keyframes kid-popup-in {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Listening / recording pulse. */
@keyframes kid-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.18); opacity: 1; }
}
.kid-pulse { animation: kid-pulse 1.4s var(--ease-in-out) infinite; }

/* Article hero entrance. */
@keyframes kid-rise {
  from { transform: translateY(6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.kid-rise { animation: kid-rise var(--duration-modal) var(--ease-out) both; }
.kid-rise-delay-1 { animation: kid-rise var(--duration-modal) var(--ease-out) 80ms both; }
.kid-rise-delay-2 { animation: kid-rise var(--duration-modal) var(--ease-out) 160ms both; }
.kid-rise-delay-3 { animation: kid-rise var(--duration-modal) var(--ease-out) 240ms both; }

/* News list entrance — first 8 items stagger in, the rest just fade. */
@keyframes kid-news-in {
  from { transform: translateY(4px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.kid-news-item { animation: kid-news-in var(--duration-popover) var(--ease-out) both; }
.kid-news-item:nth-child(1)  { animation-delay: 0ms;   }
.kid-news-item:nth-child(2)  { animation-delay: 30ms;  }
.kid-news-item:nth-child(3)  { animation-delay: 60ms;  }
.kid-news-item:nth-child(4)  { animation-delay: 90ms;  }
.kid-news-item:nth-child(5)  { animation-delay: 120ms; }
.kid-news-item:nth-child(6)  { animation-delay: 150ms; }
.kid-news-item:nth-child(7)  { animation-delay: 180ms; }
.kid-news-item:nth-child(8)  { animation-delay: 210ms; }

/* Subtle hero-image ken-burns. Disabled under prefers-reduced-motion
   via the global override in tokens.css (which clears durations) plus
   an explicit guard below. */
@keyframes kid-ken-burns {
  from { transform: scale(1)    translate(0, 0); }
  to   { transform: scale(1.03) translate(-1%, -1%); }
}

.kid-quiz-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}
.kid-quiz-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 28px;
  border-radius: 20px;
  background: var(--warm-100);
  box-shadow: inset 0 0 0 1px var(--warm-300);
}
.kid-quiz-score-ring {
  width: 82px;
  height: 82px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 6px solid var(--warm-600);
  border-radius: 50%;
  background: #fff;
  color: var(--warm-700);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.kid-quiz-summary h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--gray-1000);
}
.kid-quiz-summary p {
  margin: 6px 0 0;
  color: var(--gray-600);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
}
.kid-quiz-card {
  margin: 0;
  padding: 26px 28px 22px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--gray-400);
}
.kid-quiz-question {
  padding: 0;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--gray-1000);
}
.kid-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kid-quiz-option {
  position: relative;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--gray-400);
  color: var(--gray-600);
  cursor: pointer;
  transition:
    background var(--duration-state) var(--ease-out),
    color var(--duration-state) var(--ease-out),
    box-shadow var(--duration-state) var(--ease-out);
}
.kid-quiz-option:hover {
  background: var(--background-200);
  color: var(--gray-900);
}
.kid-quiz-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.kid-quiz-choice-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--gray-500);
  background: #fff;
  color: transparent;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.kid-quiz-choice-text {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
}
.kid-quiz-option[data-state="picked"] {
  background: var(--warm-100);
  color: var(--warm-900);
  box-shadow: inset 0 0 0 2px var(--warm-500);
}
.kid-quiz-option[data-state="picked"] .kid-quiz-choice-mark {
  box-shadow: inset 0 0 0 3px var(--warm-600);
}
.kid-quiz-option[data-state="correct"] {
  background: var(--green-200);
  color: var(--green-900);
  box-shadow: inset 0 0 0 3px var(--green-700);
}
.kid-quiz-option[data-state="correct"] .kid-quiz-choice-mark {
  background: var(--green-700);
  box-shadow: none;
  color: #fff;
}
.kid-quiz-option[data-state="wrong"] {
  background: var(--red-100);
  color: var(--red-900);
  box-shadow: inset 0 0 0 3px var(--red-700);
}
.kid-quiz-option[data-state="wrong"] .kid-quiz-choice-mark {
  background: var(--red-700);
  box-shadow: none;
  color: #fff;
}
.kid-quiz-explain {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--background-200);
  color: var(--gray-700);
  font-size: 15px;
  line-height: 1.45;
}
.kid-quiz-explain strong {
  color: var(--warm-700);
  font-family: var(--font-display);
  font-weight: 800;
}
.kid-quiz-submit {
  align-self: flex-start;
}

@media (max-width: 640px) {
  .kid-quiz-summary {
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
  }
  .kid-quiz-score-ring {
    width: 70px;
    height: 70px;
    border-width: 6px;
    font-size: 20px;
  }
  .kid-quiz-summary h3,
  .kid-quiz-question {
    font-size: 20px;
  }
  .kid-quiz-summary p,
  .kid-quiz-explain {
    font-size: 15px;
  }
  .kid-quiz-card {
    padding: 24px 16px 20px;
  }
  .kid-quiz-option {
    min-height: 54px;
    gap: 12px;
    padding: 0 14px;
    border-radius: 16px;
  }
  .kid-quiz-choice-mark {
    width: 28px;
    height: 28px;
    font-size: 20px;
  }
  .kid-quiz-choice-text {
    font-size: 17px;
  }
}

/* Pronunciation listening — make the mic icon a warm-red pulsing chip
   while recording so it's clear that the device is hot. */
.kid-mic-recording {
  color: var(--red-800);
  animation: kid-pulse 1.1s var(--ease-in-out) infinite;
}
/* Status card for unavailable mic/ASR. Soft amber avoids making this feel like
   a hard error; the feature is unavailable, not broken. */
.kid-mic-unavailable {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  background: var(--warm-50);
  box-shadow: inset 0 0 0 1px var(--warm-200);
}
.kid-mic-unavailable-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--warm-100);
  color: var(--warm-700);
}
.kid-mic-unavailable-icon svg { width: 16px; height: 16px; }

/* Avatar circular surface — warm-100 tonal ring, no heavy shadow. */
.kid-avatar {
  background:
    radial-gradient(circle at 35% 28%, #fff 0 18%, transparent 19%),
    var(--warm-100);
  color: var(--warm-1000);
  box-shadow:
    inset 0 0 0 1px rgba(183, 107, 0, 0.16),
    0 1px 2px rgba(183, 107, 0, 0.08);
  transition: transform var(--duration-state) var(--ease-out);
}

/* Modal / sheet scrim — Apple-style frosted blur. */
.kid-sheet-backdrop {
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* News list item — RSS/source-list style: tight, flat rows with a
   small active rail. No card shadow; the right pane is the reading
   surface, the left pane is navigation. */
.kid-news-item {
  position: relative;
  background: #fff;
  border-radius: 16px;
  text-align: left;
  width: 100%;
  padding: 12px 14px;
  box-shadow: inset 0 0 0 1px var(--gray-400);
  transition:
    background var(--duration-state) var(--ease-out),
    color var(--duration-state) var(--ease-out),
    box-shadow var(--duration-state) var(--ease-out);
  cursor: pointer;
}
.kid-news-item:hover {
  background: var(--background-200);
}
/* Active article — a cream card with an orange hairline border, matching the
   design's "reading now" tile. Padding grows slightly so the card reads as a
   distinct surface, not just a tint. */
.kid-news-item[data-active="true"] {
  background: var(--warm-100);
  box-shadow: inset 0 0 0 1.5px var(--warm-500);
  border-radius: 16px;
  padding: 12px 14px;
}
.kid-news-item[data-active="true"] .kid-news-title {
  color: var(--gray-1000);
}
/* "● Reading now" badge under the active card. */
.kid-news-item[data-active="true"]::after {
  content: "● Reading now";
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: var(--warm-200);
  color: var(--warm-700);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
/* The active card supersedes the "read/mastered" corner badge. */
.kid-news-item[data-active="true"][data-read="mastered"]::after {
  content: "● Reading now";
  position: static;
}

/* Infinite-scroll sentinel + footer states. */
.kid-news-sentinel { height: 1px; width: 100%; }
.kid-news-loading-more,
.kid-news-end {
  padding: 12px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--gray-600);
}
.kid-news-loading-more { color: var(--gray-700); }

/* Read-status cues on the article list.
   - unread   : title stays bold (kid-news-title default is 600; bump to 700)
   - read     : default weight, no extra cue
   - mastered : small badge in the top-right corner */
.kid-news-item[data-read="unread"] .kid-news-title {
  font-weight: 700;
}
.kid-news-item[data-read="mastered"]::after {
  content: "Mastered";
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  color: #15803d;
  background: rgba(34, 197, 94, 0.14);
  border-radius: 999px;
  pointer-events: none;
}

/* Learner card hover — full-card lift, avatar reacts too, so the
   parent UI feels alive instead of dead grid. */
.kid-learner-card {
  transition:
    transform var(--duration-state) var(--ease-out),
    box-shadow var(--duration-state) var(--ease-out);
}
.kid-learner-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px var(--gray-alpha-500),
    var(--shadow-raised);
}
.kid-learner-card:hover .kid-avatar { transform: scale(1.06); }

/* Word list row — actions tray slides in from the right on hover. */
.kid-word-row .kid-word-actions {
  transform: translateX(6px);
  opacity: 0;
  transition:
    transform var(--duration-state) var(--ease-out),
    opacity var(--duration-state) var(--ease-out);
}
.kid-word-row:hover .kid-word-actions,
.kid-word-row:focus-within .kid-word-actions {
  transform: translateX(0);
  opacity: 1;
}

/* "Listen progress" — minimal 2px hairline progress bar that lives at
   the very top of the reader column. */
.kid-listen-progress {
  height: 8px;
  margin-top: 7px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.kid-listen-progress > div {
  height: 100%;
  background: var(--warm-500);
  border-radius: inherit;
  transition:
    width 500ms var(--ease-out),
    opacity var(--duration-state) var(--ease-out);
}
.kid-listen-progress[data-empty="true"] > div {
  opacity: 0;
}

/* Tiny inline spinner shown next to the progress label while TTS is
   pre-synthesizing sentences for "Read Aloud". Inline-block so it sits on the
   label's baseline without disturbing the dock layout. */
.kid-tts-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  border: 2px solid var(--gray-300, rgba(0, 0, 0, 0.18));
  border-top-color: var(--warm-600, #b45309);
  border-radius: 50%;
  animation: kid-tts-spin 0.7s linear infinite;
  flex: 0 0 auto;
}
@keyframes kid-tts-spin {
  to { transform: rotate(360deg); }
}

.kid-reading-shell {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  overflow-x: hidden;
  background: var(--background-300);
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.kid-reader-main,
.kid-reader-scroll,
.reading-column-fluid {
  min-width: 0;
  max-width: 100%;
}

.kid-reader-main,
.kid-reader-scroll {
  overflow-x: hidden;
}

/* Desktop reader shell — RSS-reader layout: a compact source list on the
   left and a generous reading surface on the right. AI chat is decoupled
   into a slide-over inspector, so this row stays focused on reading. */
@media (min-width: 1024px) {
  .kid-reading-shell {
    min-height: 0;
    align-items: stretch;
  }
  .kid-reading-shell[data-chat-docked="true"] {
    padding-right: calc(var(--kid-chat-panel-width) + var(--kid-chat-frame-inset) + 16px) !important;
  }
  .kid-reader-aside {
    display: flex !important;
    flex-direction: column;
    position: relative;
    top: auto;
    width: 312px !important;
    height: auto;
    align-self: stretch;
  }
  .kid-reader-main {
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }
  .kid-reader-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-padding-top: 64px;
  }
  .kid-chat-aside[data-docked="true"] {
    right: calc(var(--kid-page-margin) + var(--kid-chat-frame-inset));
    top: calc(var(--kid-page-margin) + var(--kid-topbar-height) + var(--kid-chat-frame-inset));
    height: calc(var(--kid-page-height) - var(--kid-topbar-height) - var(--kid-chat-frame-inset) - var(--kid-chat-frame-inset));
    border: 1px solid #f0ddc3;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 26px 54px -32px rgba(120, 72, 20, 0.48);
  }
}

.kid-reader-aside {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.reading-column-fluid {
  width: min(100%, 1080px);
  margin-left: auto;
  margin-right: auto;
}

body.kid .kid-reader-main .reading-column-fluid {
  width: 100%;
  max-width: none;
  padding-left: 34px !important;
  padding-right: 34px !important;
}

/* Sticky sub-header inside the left article list — keeps the title
   and refresh affordance visible while the user scrolls articles. */
.kid-aside-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  padding: 16px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.kid .kid-reader-aside > .p-4 {
  padding: 0 12px 12px !important;
}

body.kid .kid-reader-aside .space-y-0\.5 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kid-reader-hero {
  padding-bottom: 16px;
}

.kid-hero-title {
  margin: 2px 0 14px;
  max-width: none;
  font-family: var(--font-sans);
  font-size: clamp(26px, 2.35vw, 36px);
  line-height: 1.2;
  font-weight: 800;
  color: var(--gray-1000);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.kid-description-card {
  position: relative;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.kid-description-card::before {
  content: none;
}
.kid-description-copy {
  position: relative;
  z-index: 1;
}
.kid-description-label {
  display: none;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.72);
  color: var(--warm-900);
  font: var(--button-12);
  font-family: var(--font-sans);
  box-shadow: inset 0 0 0 1px rgba(183, 107, 0, 0.14);
}
.kid-description-label svg {
  width: 14px;
  height: 14px;
}
.kid-hero-summary {
  margin-top: 8px;
  /* No max-width: let the paragraph fill the card's inner width and wrap
     naturally at the container edge. A capped ch width here previously fought
     the grid layout and left text awkwardly narrow with whitespace beside it. */
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.58;
  font-weight: 500;
  color: var(--gray-600);
}


/* Sticky tab bar — lives at the top of the right column's scroll
   container, so it pins as soon as the hero passes the top edge.
   Mobile (body-scroll) keeps it sticky relative to the page, offset
   by the collapsed header height. */
.kid-tab-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--gray-alpha-200);
  margin-top: 10px;
}
.kid-tab-bar-inner {
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Word-mode toggle — a pill button with an inline on/off switch, pinned to
   the right of the tab bar. Visually distinct from the segmented tabs so it
   reads as a mode rather than another tab. */
.kid-word-mode-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  font: var(--button-14);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-alpha-100);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--gray-alpha-300);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--duration-state) var(--ease-out),
    color var(--duration-state) var(--ease-out);
}
.kid-word-mode-toggle:hover { color: var(--gray-1000); }
.kid-word-mode-toggle[data-active="true"] {
  color: var(--warm-1000);
  background: var(--warm-100);
  box-shadow: inset 0 0 0 1px rgba(183, 107, 0, 0.32);
}
.kid-word-mode-toggle svg { flex: 0 0 auto; }

/* The little switch knob inside the toggle. */
.kid-word-mode-switch {
  position: relative;
  width: 26px;
  height: 15px;
  border-radius: var(--radius-full);
  background: var(--gray-alpha-400);
  transition: background var(--duration-state) var(--ease-out);
  flex: 0 0 auto;
}
.kid-word-mode-switch > span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  transition: left var(--duration-state) var(--ease-spring);
}
.kid-word-mode-toggle[data-active="true"] .kid-word-mode-switch {
  background: var(--warm-600);
}
.kid-word-mode-toggle[data-active="true"] .kid-word-mode-switch > span {
  left: 13px;
}
@media (max-width: 640px) {
  /* On narrow screens hide the text label, keep icon + switch. */
  .kid-word-mode-toggle > span:not(.kid-word-mode-switch) { display: none; }
}
@media (max-width: 1023px) {
  .kid-tab-bar { top: var(--kid-topbar-height); }
}

/* Bottom dock — primary listen / stop / done controls live here so
   they never scroll out of reach. On desktop the dock is sticky to
   the right column's scroll container; on mobile it pins to the
   viewport bottom and the tab body adds matching padding. */
.kid-dock {
  position: relative;
  bottom: auto;
  flex: 0 0 auto;
  z-index: 20;
  margin: 0 var(--kid-dock-inline-inset) var(--kid-chat-frame-inset);
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 38px -30px rgba(120, 72, 20, 0.55);
}
.kid-dock-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: none;
  padding: 12px 16px !important;
}
.kid-dock-progress {
  flex: 1;
  min-width: 0;
}
.kid-dock-progress-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-600);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.kid-dock-progress-meta strong {
  margin-left: auto;
  color: var(--gray-700);
  font-weight: 800;
}
.kid-dock-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.kid-dock-actions .btn {
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  box-shadow: none;
}
.kid-dock-actions .btn svg {
  width: 16px;
  height: 16px;
}
.kid-dock-listen {
  background: var(--warm-600);
  color: #fff;
}
.kid-dock-listen:hover { background: var(--warm-700); }
.kid-dock-stop {
  background: #ffedd9;
  color: var(--warm-700);
}
.kid-dock-stop:hover {
  background: var(--warm-200);
  color: var(--warm-900);
}
.kid-dock-complete {
  background: var(--green-700);
  color: #fff;
}
.kid-dock-complete:hover { background: var(--green-800); }
.kid-dock-complete:disabled:not(.is-saved) {
  background: var(--green-100);
  color: var(--green-900);
}
.kid-dock-complete.is-saved,
.kid-dock-complete.is-saved:disabled {
  background: var(--green-100);
  color: var(--green-900);
  box-shadow: inset 0 0 0 1px var(--green-300) !important;
}
@media (max-width: 1023px) {
  .kid-dock {
    position: fixed;
    left: var(--kid-page-margin);
    right: var(--kid-page-margin);
    bottom: max(var(--kid-page-margin), env(safe-area-inset-bottom, 0px));
    margin: 0;
    padding-bottom: 0;
    border: 1px solid var(--gray-alpha-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  /* Pad the bottom of the right column so its content never hides
     behind the fixed dock. ~96px = dock height (~72) + breathing room. */
  .kid-reader-main { padding-bottom: calc(96px + var(--kid-page-margin)); }
  .kid-reader-main[data-dock-visible="false"] { padding-bottom: 0; }
}

@media (max-width: 760px) {
  .kid-dock-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .kid-dock-actions {
    width: 100%;
  }
  .kid-dock-actions .btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
}

.kid-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--gray-700);
}
.kid-hero-meta .dot { color: var(--gray-500); }

/* Empty-state container — used for "no learner", "no article picked",
   "loading", and "adapt failed" so all the no-content branches share
   the same rhythm instead of each rolling their own. */
.kid-empty-state {
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 20px;
}
.kid-empty-state-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-700);
}
.kid-empty-state-icon svg { width: 28px; height: 28px; }
.kid-empty-state-icon.is-error {
  background: var(--red-100);
  color: var(--red-900);
}
.kid-empty-state-title {
  font: var(--heading-20);
  font-family: var(--font-sans);
  color: var(--gray-1000);
  margin-bottom: 8px;
}
.kid-empty-state-body {
  font: var(--copy-14);
  font-family: var(--font-sans);
  color: var(--gray-700);
  line-height: 1.55;
}
.kid-empty-state-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.kid-tool-panel {
  border-radius: var(--radius-lg);
  background: var(--background-100);
  box-shadow:
    inset 0 0 0 1px var(--gray-alpha-300),
    var(--shadow-raised);
  transition:
    transform var(--duration-state) var(--ease-out),
    box-shadow var(--duration-state) var(--ease-out);
}
.kid-tool-panel-interactive:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(183, 107, 0, 0.32),
    var(--shadow-popover);
}
.kid-keyword-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kid-keyword-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.kid-keyword-card-head > .min-w-0 {
  flex: 1 1 auto;
  min-width: 0;
}
.kid-keyword-pos {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--gray-alpha-200);
  color: var(--gray-700);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  vertical-align: 3px;
}
.kid-keyword-label {
  display: inline-flex;
  width: max-content;
  margin-bottom: 6px;
  color: var(--warm-700);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
}
.kid-keyword-meaning,
.kid-keyword-explain,
.kid-keyword-example {
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--background-200);
  box-shadow: inset 0 0 0 1px var(--gray-400);
}
.kid-keyword-meaning p,
.kid-keyword-explain p,
.kid-keyword-example p {
  margin: 0;
}
.kid-keyword-meaning p {
  color: var(--gray-1000);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
}
.kid-keyword-explain {
  background: var(--warm-100);
  box-shadow: inset 0 0 0 1px var(--warm-300);
}
.kid-keyword-explain p {
  color: var(--gray-900);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 650;
}
.kid-keyword-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 700;
}
.kid-keyword-error {
  color: var(--red-900) !important;
}
.kid-keyword-example {
  background: #fff;
}
.kid-keyword-example p {
  color: var(--gray-900);
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
}
.kid-keyword-example-zh {
  margin-top: 6px !important;
  color: var(--gray-700) !important;
  font-style: normal !important;
}
.kid-keyword-refresh {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--warm-700);
  background: var(--warm-100);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--warm-300);
}
.kid-keyword-refresh svg {
  width: 14px;
  height: 14px;
}
.kid-keyword-refresh:hover {
  background: var(--warm-200);
  color: var(--warm-900);
}
.kid-tool-panel-interactive:hover .kid-keyword-speaker {
  opacity: 1;
  transform: rotate(8deg);
}
.kid-keyword-speaker {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  transition:
    transform var(--duration-popover) var(--ease-spring),
    opacity var(--duration-state) var(--ease-out);
}
.kid-keyword-speaker > span {
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.kid-keyword-speaker svg {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
/* Inline speaker inside a keyword's example sentence — sits at the start of
   the italic example line. Always visible (not hover-gated like the term
   speaker) since the example is the thing you most want to hear. */
.kid-keyword-example-speak {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  vertical-align: -5px;
  border-radius: var(--radius-full);
  opacity: 0.8;
}
.kid-keyword-example-speak svg { width: 14px; height: 14px; }
.kid-keyword-example-speak:hover { opacity: 1; background: var(--warm-100); }

.kid-word-source {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--blue-100);
  color: var(--blue-900);
}

/* Avatar picker wobble on hover — kids love micro-life. */
@keyframes kid-wobble {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-8deg); }
  60% { transform: rotate(6deg); }
}
.kid-avatar-pick:hover { animation: kid-wobble 0.6s var(--ease-in-out); }

/* Copy-success confirmation chip — fades over the button briefly. */
.kid-copy-success {
  background: var(--green-100);
  color: var(--green-900);
}

@media (max-width: 1024px) {
  .kid-reader-aside {
    background: rgba(255, 255, 255, 0.96);
  }
}

@media (max-width: 640px) {
  .kid-paragraph[data-first="true"]::first-letter {
    font-size: inherit;
    margin-right: 0;
  }
  .kid-paragraph {
    font-size: 20px;
    line-height: 32px;
  }
  .kid-news-item {
    padding-right: 12px;
  }
  /* Header collapses by 8px so it leaves more room for the article. */
  body.kid > div > div[x-show="view === 'reader'"] > header > div {
    height: var(--kid-topbar-height) !important;
  }
}


/* Right-side AI chat — an RSS-reader inspector panel rather than a
   flex column. It slides over the reading surface and never consumes
   article width while closed. */
.kid-chat-aside {
  position: fixed;
  top: calc(var(--kid-page-margin) + var(--kid-topbar-height) + var(--kid-chat-frame-inset));
  right: calc(var(--kid-page-margin) + var(--kid-chat-frame-inset));
  z-index: 35;
  display: flex;
  flex-direction: column;
  width: min(var(--kid-chat-panel-width), calc(100vw - 48px));
  height: calc(var(--kid-page-height) - var(--kid-topbar-height) - var(--kid-chat-frame-inset) - var(--kid-chat-frame-inset));
  background: #fff;
  border: 1px solid #f2e6d6;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 56px -26px rgba(120, 72, 20, 0.5);
}

.kid-chat-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid #f2e6d6;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.kid-chat-header-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.kid-chat-header-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fb923c;
  color: #fff;
  box-shadow: none;
}
.kid-chat-header-mark svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}
.kid-chat-title-copy {
  min-width: 0;
  font-family: var(--font-display);
}
.kid-chat-title-copy h2 {
  margin: 0;
  color: var(--gray-1000);
  font-size: 16px;
  line-height: 1.1;
  font-weight: 800;
}
.kid-chat-title-copy p {
  margin: 2px 0 0;
  color: #a99a85;
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kid-chat-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.kid-chat-action-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: #fff3e4;
  color: #c99a6a;
  transition:
    background var(--duration-state) var(--ease-out),
    color var(--duration-state) var(--ease-out),
    transform var(--duration-state) var(--ease-out);
}
.kid-chat-action-btn:hover {
  background: #ffedd9;
  color: #c2410c;
}
.kid-chat-action-btn:active {
  transform: translateY(1px);
}
.kid-chat-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kid-chat-action-btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.25;
}

.kid-chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  background: #fffbf4;
  scroll-behavior: smooth;
}
.kid-chat-scroll::-webkit-scrollbar { width: 6px; }
.kid-chat-scroll::-webkit-scrollbar-track { background: transparent; }
.kid-chat-scroll::-webkit-scrollbar-thumb {
  background: var(--gray-alpha-300);
  border-radius: 3px;
}
.kid-chat-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.kid-chat-empty {
  text-align: center;
  padding: 44px 8px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kid-chat-empty-title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--gray-1000);
}
.kid-chat-empty-sub {
  margin: 6px 0 0;
  color: #a99a85;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 600;
}

.kid-chat-loading {
  text-align: center;
  padding: 32px 8px;
  color: var(--gray-600);
  font: var(--copy-13);
}

/* Bubble row: user bubbles right-align; assistant bubbles left-align. */
.kid-chat-bubble {
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin: 0 0 12px;
}
.kid-chat-bubble[data-role="user"] { justify-content: flex-end; }
.kid-chat-bubble[data-role="assistant"] { justify-content: flex-start; }

.kid-chat-bubble-body {
  max-width: 82%;
  display: flex;
  flex-direction: column;
}
.kid-chat-bubble[data-role="user"] .kid-chat-bubble-body {
  align-items: flex-end;
}
.kid-chat-bubble[data-role="assistant"] .kid-chat-bubble-body {
  align-items: flex-start;
}

.kid-chat-bubble-text {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  font-family: var(--font-sans);
  line-height: 1.55;
  font-weight: 600;
  word-break: break-word;
}
.kid-chat-bubble[data-role="user"] .kid-chat-bubble-text {
  background: #f97316;
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: none;
}
.kid-chat-bubble[data-role="assistant"] .kid-chat-bubble-text {
  background: #fff;
  color: #3b332d;
  box-shadow: inset 0 0 0 1px #f2e6d6;
  border-bottom-left-radius: 4px;
}
/* Error / refusal bubble: tinted red so it's visually distinct from a normal
   assistant reply. Kids (and parents glancing at the screen) can immediately
   tell that something went wrong, not that the AI just gave a weird answer. */
.kid-chat-bubble[data-error="true"] .kid-chat-bubble-text {
  background: #fef2f2;
  color: #991b1b;
  box-shadow: inset 0 0 0 1px #fecaca;
}

/* Markdown rendered content inside assistant bubbles. marked.js outputs
   <p> for each block; we collapse top/bottom margin so the bubble padding
   owns the vertical rhythm. */
.kid-chat-bubble-text :where(p) { margin: 0; }
.kid-chat-bubble-text :where(p) + :where(p) { margin-top: 8px; }
.kid-chat-bubble-text :where(ul, ol) { margin: 6px 0 0; padding-left: 20px; }
.kid-chat-bubble-text :where(li) { margin: 2px 0; }
.kid-chat-bubble-text :where(li)::marker { color: var(--warm-700); }
.kid-chat-bubble[data-role="assistant"] .kid-chat-bubble-text :where(strong) {
  color: var(--warm-800);
  font-weight: 800;
}
.kid-chat-bubble-text :where(em) { font-style: italic; }
.kid-chat-bubble-text :where(code) {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 5px;
  background: var(--gray-alpha-200);
  border-radius: 4px;
}
.kid-chat-bubble-text :where(pre) {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--gray-alpha-200);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.kid-chat-bubble-text :where(pre) code {
  padding: 0;
  background: transparent;
}
.kid-chat-bubble-text :where(blockquote) {
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--warm-300);
  color: var(--gray-700);
}
.kid-chat-bubble-text :where(a) {
  color: var(--warm-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kid-chat-bubble-text :where(h1, h2, h3, h4, h5, h6) {
  font-size: 0.95em;
  font-weight: 600;
  margin: 8px 0 4px;
}

.kid-chat-bubble-time {
  display: none;
  margin-top: 4px;
  font: var(--label-11, 400 11px/1.4 var(--font-sans));
  color: var(--gray-500);
}
.kid-chat-bubble[data-role="user"] .kid-chat-bubble-time {
  color: var(--gray-500);
}

/* Typing indicator: small pill of three warm dots. */
.kid-chat-typing {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin: 0 0 12px;
}
.kid-chat-typing-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #f2e6d6;
}
.kid-chat-typing-card span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f9b66e;
  animation: kid-pulse 1.1s var(--ease-in-out) infinite;
}
.kid-chat-typing-card span:nth-child(2) { animation-delay: 0.15s; }
.kid-chat-typing-card span:nth-child(3) { animation-delay: 0.30s; }

.kid-chat-input {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid #f2e6d6;
  background: #fff;
}
.kid-chat-input .input {
  flex: 1;
  height: 42px;
  min-height: 42px;
  max-height: 96px;
  padding: 11px 14px;
  border: 1px solid #f0e2ce;
  border-radius: 14px;
  background: #fff7ed;
  color: #3a342a;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  box-shadow: none;
  overflow-y: auto;
}
.kid-chat-input .input::placeholder {
  color: #b49a78;
}
.kid-chat-input .input:focus {
  border-color: #fb923c;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14);
}
body.kid .kid-chat-input .btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 13px;
  flex-shrink: 0;
  background: #f97316;
  color: #fff;
  box-shadow: none;
  padding: 0;
}
body.kid .kid-chat-input .btn svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}

@media (max-width: 1023px) {
  .kid-chat-aside {
    top: calc(var(--kid-page-margin) + var(--kid-topbar-height) + var(--kid-chat-frame-inset));
    width: min(calc(100vw - var(--kid-page-margin) - var(--kid-page-margin) - var(--kid-chat-frame-inset) - var(--kid-chat-frame-inset)), var(--kid-chat-panel-width));
    height: calc(var(--kid-page-height) - var(--kid-topbar-height) - var(--kid-chat-frame-inset) - var(--kid-chat-frame-inset));
  }
}

@media (max-width: 640px) {
  .kid-chat-aside {
    border-radius: 22px;
  }
  .kid-chat-header {
    padding: 14px;
    gap: 10px;
  }
  .kid-chat-header-id {
    gap: 9px;
  }
  .kid-chat-header-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .kid-chat-header-mark svg {
    width: 17px;
    height: 17px;
  }
  .kid-chat-title-copy h2 {
    font-size: 15px;
  }
  .kid-chat-title-copy p {
    font-size: 11px;
  }
  .kid-chat-actions {
    gap: 8px;
  }
  .kid-chat-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .kid-chat-scroll {
    padding: 16px 14px 10px;
  }
  .kid-chat-bubble-body {
    max-width: 90%;
  }
  .kid-chat-bubble-text {
    padding: 10px 13px;
    border-radius: 15px;
    font-size: 13.5px;
  }
  .kid-chat-input {
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0));
  }
  .kid-chat-input .input {
    height: 40px;
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 13px;
    font-size: 13.5px;
  }
  body.kid .kid-chat-input .btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kid-news-item,
  .kid-rise,
  .kid-rise-delay-1,
  .kid-rise-delay-2,
  .kid-rise-delay-3,
  .kid-pulse,
  .kid-chat-typing-card span {
    animation: none;
  }
  .kid-chat-aside {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Parent dashboard — multi-panel family overview
   Soft warm gradients, large radii, streak badge, colorful KPIs.
   ═══════════════════════════════════════════════════════════════ */

.kr-parent {
  --kr-radius-lg: 26px;
  --kr-radius-md: 20px;
  --kr-radius-sm: 14px;
  --kr-cream: #fff7eb;
  --kr-panel: #fffdf9;
  --kr-line: #f0dfc8;
  --kr-muted: #ae9779;
  --kr-ink: #2c2925;
  --kr-orange: #ff7a1a;
  --kr-orange-deep: #ff6b0b;
  min-height: calc(100vh - 28px);
  margin: 14px;
  overflow: hidden;
  border-radius: 30px;
  background: var(--kr-cream);
  box-shadow:
    inset 0 0 0 1px rgba(92, 64, 32, 0.08),
    0 22px 60px rgba(63, 50, 36, 0.10);
}

.kr-parent > section:not(.kr-overview) {
  padding: 28px 32px 34px;
}

.kr-parent-topbar {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--kr-line);
}

.kr-parent-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  padding-right: 28px;
  border-right: 1px solid var(--kr-line);
}
.kr-parent-brand .kid-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  font-size: 24px;
  background: linear-gradient(135deg, #ff9b3d 0%, #ff7a1a 100%);
  color: #fff;
}
.kr-parent-brand .kid-brand-text {
  font-size: 25px;
  font-weight: 800;
  color: #c94010;
}

.kr-parent-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.kr-parent-nav-item {
  height: 48px;
  padding: 0 20px;
  border-radius: 14px;
  color: #9f8769;
  font-size: 18px;
  font-weight: 800;
  transition:
    background var(--duration-state) var(--ease-out),
    color var(--duration-state) var(--ease-out),
    transform var(--duration-state) var(--ease-out);
  cursor: pointer;
}
.kr-parent-nav-item:hover {
  color: #c54a12;
  background: rgba(255, 239, 217, 0.62);
}
.kr-parent-nav-item[data-active="true"] {
  color: #c94310;
  background: #fff0df;
}

.kr-parent-top-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex: 0 0 auto;
}

/* Card surface — softer than .card, more generous radius */
.kr-card {
  background: var(--background-100);
  border-radius: var(--kr-radius-md);
  box-shadow:
    inset 0 0 0 1px var(--gray-alpha-200),
    0 1px 2px rgba(0, 0, 0, 0.02);
}

/* ── Learner switcher pill (top-left of parent dashboard) ── */
.kr-learner-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  min-width: 170px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  background: #fff6ea;
  box-shadow: inset 0 0 0 2px rgba(255, 178, 92, 0.40);
  transition:
    box-shadow var(--duration-state) var(--ease-out),
    background var(--duration-state) var(--ease-out);
  cursor: pointer;
}
.kr-learner-pill:hover {
  box-shadow: inset 0 0 0 2px rgba(255, 137, 43, 0.58);
}
.kr-learner-pill.is-open {
  box-shadow: inset 0 0 0 2px var(--kr-orange);
}
.kr-learner-pill-avatar {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  border-radius: 50% !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background: #ffbd78 !important;
  color: #78340f !important;
  box-shadow: none !important;
}

.kr-parent-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 5px;
  height: 54px;
  border-radius: 999px;
  background: #efe4cf;
}
.kr-parent-mode-toggle button {
  height: 44px;
  min-width: 88px;
  padding: 0 22px;
  border-radius: 999px;
  color: #a58c6f;
  font-size: 17px;
  font-weight: 800;
  transition:
    background var(--duration-state) var(--ease-out),
    color var(--duration-state) var(--ease-out),
    box-shadow var(--duration-state) var(--ease-out);
  cursor: pointer;
}
.kr-parent-mode-toggle button[data-active="true"] {
  background: var(--kr-orange-deep);
  color: #fff;
  box-shadow: 0 4px 10px rgba(255, 107, 11, 0.22);
}

/* Dropdown menu */
.kr-learner-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 280px;
  max-width: 90vw;
  padding: 6px;
  background: var(--background-100);
  border-radius: var(--kr-radius-sm);
  box-shadow: var(--shadow-popover);
  max-height: 60vh;
  overflow-y: auto;
}
.kr-learner-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
  transition: background var(--duration-state) var(--ease-out);
}
.kr-learner-menu-item:hover { background: var(--gray-alpha-100); }
.kr-learner-menu-item.is-active { background: rgba(255, 247, 230, 0.7); }
.kr-learner-menu-item.is-add { color: var(--warm-700); }
.kr-learner-menu-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #78340f;
  background: #ffbd78;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

/* ── Parent tabs (compact segmented) ── */
.kr-parent-tabs .segmented-option {
  font-weight: 600;
}

/* ── Parent overview redesign ── */
.kr-overview {
  padding: 26px 32px 28px;
}

.kr-overview-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 290px);
  gap: 24px;
  margin-bottom: 22px;
}

.kr-overview-streak {
  min-height: 132px;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 24px 38px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(135deg, #ff8f36 0%, #ff690f 100%);
  box-shadow: inset 0 -1px 0 rgba(119, 43, 0, 0.10);
}
.kr-overview-avatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 209, 168, 0.72);
  color: #fff;
  font-size: 34px;
  font-weight: 900;
}
.kr-overview-streak-copy {
  min-width: 0;
}
.kr-overview-eyebrow {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}
.kr-overview-streak-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 900;
  line-height: 1;
}
.kr-overview-flame {
  width: 34px;
  height: 34px;
  color: #fff7d1;
  filter: drop-shadow(0 2px 4px rgba(137, 45, 0, 0.22));
}

.kr-overview-quiz,
.kr-overview-stat,
.kr-overview-panel,
.kr-overview-action {
  background: var(--kr-panel);
  border: 1px solid var(--kr-line);
  box-shadow: 0 1px 0 rgba(123, 77, 31, 0.02);
}
.kr-overview-quiz {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 32px;
  border-radius: 26px;
}
.kr-overview-card-label {
  color: var(--kr-muted);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}
.kr-overview-quiz-score {
  margin-top: 18px;
  color: #16a34a;
  font-size: 44px;
  font-weight: 900;
  line-height: 0.95;
}

.kr-overview-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 22px;
}
.kr-overview-stat {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 24px;
  border-radius: 22px;
}
.kr-overview-stat-num {
  margin-top: 16px;
  color: var(--kr-ink);
  font-size: 32px;
  font-weight: 900;
  line-height: 0.95;
}

.kr-overview-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.95fr);
  gap: 24px;
  margin-bottom: 20px;
}
.kr-overview-panel {
  border-radius: 26px;
  padding: 26px 34px;
  overflow: hidden;
}
.kr-overview-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.kr-overview-panel h3,
.kr-overview-panel-head h3 {
  color: var(--kr-ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}
.kr-overview-range {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: #eee1cc;
}
.kr-overview-range button {
  height: 40px;
  min-width: 54px;
  border-radius: 999px;
  color: #aa9272;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}
.kr-overview-range button[data-active="true"] {
  color: #fff;
  background: #ff8c36;
}
.kr-overview-bars {
  height: 248px;
  display: grid;
  grid-template-columns: repeat(var(--overview-bars, 7), minmax(24px, 1fr));
  align-items: end;
  gap: 26px;
  padding: 36px 12px 0;
}
.kr-overview-bars[data-range="30d"] {
  grid-template-columns: repeat(var(--overview-bars, 30), minmax(0, 1fr));
  gap: clamp(4px, 0.55vw, 9px);
  padding-left: 0;
  padding-right: 0;
}
.kr-overview-bar-col {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 32px;
  align-items: end;
  justify-items: center;
}
.kr-overview-bar-track {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.kr-overview-bar {
  width: min(100%, 104px);
  min-height: 16px;
  border-radius: 13px 13px 0 0;
  background: #ffd9ab;
  transition:
    height 360ms var(--ease-out),
    background var(--duration-state) var(--ease-out);
}
.kr-overview-bars[data-range="30d"] .kr-overview-bar {
  width: min(100%, 44px);
  border-radius: 10px 10px 0 0;
}
.kr-overview-bar[data-strong="true"] {
  background: linear-gradient(180deg, #ff8d32 0%, #ff6710 100%);
}
.kr-overview-bar-label {
  color: #b39a79;
  font-size: 18px;
  font-weight: 900;
}
.kr-overview-bars[data-range="30d"] .kr-overview-bar-label {
  font-size: 16px;
}

.kr-overview-recent {
  min-height: 360px;
}
.kr-overview-activity-list {
  margin-top: 26px;
  display: grid;
  gap: 20px;
}
.kr-overview-activity {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.kr-overview-activity-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--kr-ink);
}
.kr-overview-activity-icon svg {
  width: 22px;
  height: 22px;
}
.kr-overview-activity-icon[data-tone="success"] { background: #e7f5df; }
.kr-overview-activity-icon[data-tone="warm"] { background: #fff0dd; }
.kr-overview-activity-icon[data-tone="book"] { background: #f0e4ff; }
.kr-overview-activity-title {
  color: var(--kr-ink);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.15;
}
.kr-overview-activity-meta {
  margin-top: 5px;
  color: var(--kr-muted);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.kr-overview-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.kr-overview-action {
  height: 74px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  border-radius: 18px;
  color: var(--kr-ink);
  font-size: 21px;
  font-weight: 900;
  transition:
    transform var(--duration-state) var(--ease-out),
    border-color var(--duration-state) var(--ease-out),
    box-shadow var(--duration-state) var(--ease-out);
  cursor: pointer;
}
.kr-overview-action:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 137, 43, 0.55);
  box-shadow: 0 8px 20px rgba(133, 86, 38, 0.10);
}
.kr-overview-action-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--kr-orange);
  flex: 0 0 auto;
}
.kr-overview-action-icon svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 1280px) {
  .kr-parent-topbar {
    gap: 18px;
  }
  .kr-parent-brand {
    padding-right: 18px;
  }
  .kr-parent-nav-item {
    padding: 0 14px;
    font-size: 16px;
  }
  .kr-overview-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kr-overview-main-grid {
    grid-template-columns: 1fr;
  }
  .kr-overview-recent {
    min-height: 0;
  }
}

@media (max-width: 980px) {
  .kr-parent {
    margin: 10px;
    border-radius: 24px;
  }
  .kr-parent-topbar {
    flex-wrap: wrap;
    min-height: 0;
    padding: 18px;
  }
  .kr-parent-nav {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .kr-parent-top-actions {
    margin-left: auto;
  }
  .kr-overview {
    padding: 24px 18px 26px;
  }
  .kr-overview-hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .kr-overview-bars {
    gap: 14px;
  }
  .kr-overview-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .kr-parent {
    margin: 0;
    min-height: 100vh;
    border-radius: 0;
  }
  .kr-parent > section:not(.kr-overview) {
    padding: 20px 14px 24px;
  }
  .kr-parent-brand .kid-brand-text {
    font-size: 22px;
  }
  .kr-parent-brand .kid-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .kr-parent-top-actions {
    width: 100%;
    justify-content: space-between;
  }
  .kr-learner-pill {
    min-width: 0;
    flex: 1 1 auto;
  }
  .kr-parent-mode-toggle button {
    min-width: 72px;
    padding: 0 14px;
  }
  .kr-overview-streak {
    min-height: 132px;
    gap: 18px;
    padding: 24px 22px;
  }
  .kr-overview-avatar {
    width: 70px;
    height: 70px;
    font-size: 30px;
  }
  .kr-overview-eyebrow {
    font-size: 18px;
  }
  .kr-overview-streak-title {
    font-size: 28px;
  }
  .kr-overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .kr-overview-stat {
    min-height: 106px;
    padding: 18px;
  }
  .kr-overview-card-label {
    font-size: 15px;
  }
  .kr-overview-stat-num {
    font-size: 28px;
  }
  .kr-overview-panel {
    padding: 24px 20px;
  }
  .kr-overview-bars {
    height: 260px;
    gap: 8px;
    padding-left: 0;
    padding-right: 0;
  }
  .kr-overview-action {
    height: 66px;
    padding: 0 18px;
    font-size: 17px;
  }
}

/* ── Hero card: streak + today/week/total ── */
.kr-hero-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border-radius: var(--kr-radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 232, 184, 0.55) 0%, rgba(255, 247, 230, 0.85) 100%);
  box-shadow: inset 0 0 0 1px rgba(183, 107, 0, 0.12);
}
.kr-hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.kr-streak-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gray-alpha-200);
  color: var(--gray-700);
  flex-shrink: 0;
}
.kr-streak-badge.is-on {
  background: linear-gradient(180deg, #ffb84d 0%, #ff8a3d 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 138, 61, 0.45);
}
.kr-streak-flame { width: 22px; height: 22px; }
.kr-streak-num {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  margin-top: 2px;
}
.kr-hero-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-1000);
}
.kr-hero-sub {
  font-size: 13px;
  color: var(--gray-700);
  margin-top: 2px;
}
.kr-hero-stats {
  display: flex;
  gap: 24px;
}
.kr-hero-stat { text-align: center; }
.kr-hero-stat-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--warm-1000);
  line-height: 1;
}
.kr-hero-stat-label {
  font-size: 11px;
  color: var(--gray-700);
  margin-top: 4px;
}

/* ── KPI cards (4 colored tiles) ── */
.kr-kpi-card {
  position: relative;
  padding: 18px;
  border-radius: var(--kr-radius-md);
  background: var(--background-100);
  box-shadow: inset 0 0 0 1px var(--gray-alpha-200);
  overflow: hidden;
}
.kr-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
}
.kr-kpi-blue::before   { background: var(--blue-700); }
.kr-kpi-green::before  { background: var(--green-700); }
.kr-kpi-purple::before { background: var(--purple-700, #6d28d9); }
.kr-kpi-amber::before  { background: var(--warm-700); }
.kr-kpi-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  margin-bottom: 10px;
}
.kr-kpi-blue .kr-kpi-icon   { background: rgba(59, 130, 246, 0.15); color: var(--blue-700); }
.kr-kpi-green .kr-kpi-icon  { background: rgba(22, 163, 74, 0.15); color: var(--green-700); }
.kr-kpi-purple .kr-kpi-icon { background: rgba(109, 40, 217, 0.15); color: #6d28d9; }
.kr-kpi-amber .kr-kpi-icon  { background: rgba(183, 107, 0, 0.15); color: var(--warm-700); }
.kr-kpi-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--gray-1000);
  line-height: 1;
}
.kr-kpi-label {
  font-size: 12px;
  color: var(--gray-700);
  margin-top: 4px;
}

/* ── Trend chart ── */
.kr-trend-wrap {
  position: relative;
  padding: 8px 4px 28px;
}
.kr-trend-large { padding: 12px 8px 32px; }
.kr-trend-svg {
  width: 100%;
  height: 120px;
  display: block;
}
.kr-trend-large .kr-trend-svg { height: 180px; }
.kr-trend-dots {
  position: absolute;
  inset: 8px 4px 28px;
  pointer-events: none;
}
.kr-trend-large .kr-trend-dots { inset: 12px 8px 32px; }
.kr-trend-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--warm-700);
  box-shadow: 0 0 0 3px rgba(183, 107, 0, 0.18);
}
.kr-trend-dot-tip {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--gray-1000);
  color: var(--background-100);
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.kr-trend-dot:hover .kr-trend-dot-tip { opacity: 1; }
.kr-trend-xlabels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--gray-700);
}
.kr-trend-total {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 11px;
  color: var(--gray-700);
}

/* ── Recent activity row ── */
.kr-recent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 12px;
}
.kr-recent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kr-recent-dot.is-read  { background: var(--warm-700); }
.kr-recent-dot.is-quiz  { background: var(--green-700); }
.kr-recent-dot.is-pron  { background: var(--blue-700); }
.kr-recent-name { font-weight: 600; color: var(--gray-1000); }
.kr-recent-type { color: var(--gray-700); }
.kr-recent-score { color: var(--gray-1000); margin-left: auto; }
.kr-recent-time { color: var(--gray-700); font-size: 11px; }

/* ── Quick actions ── */
.kr-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: var(--kr-radius-sm);
  background: var(--background-100);
  box-shadow: inset 0 0 0 1px var(--gray-alpha-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-1000);
  transition:
    transform var(--duration-state) var(--ease-out),
    box-shadow var(--duration-state) var(--ease-out),
    background var(--duration-state) var(--ease-out);
  cursor: pointer;
}
.kr-quick-action:hover {
  transform: translateY(-2px);
  background: rgba(255, 247, 230, 0.5);
  box-shadow: inset 0 0 0 1px var(--warm-700);
}
.kr-quick-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(183, 107, 0, 0.12);
  color: var(--warm-700);
}

/* ── Words header ── */
.kr-words-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.kr-words-stats {
  display: flex;
  gap: 10px;
}
.kr-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--kr-radius-sm);
  min-width: 80px;
}
.kr-stat-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.kr-stat-label {
  font-size: 11px;
  margin-top: 3px;
  opacity: 0.85;
}
.kr-pill-amber { background: rgba(255, 232, 184, 0.6); color: var(--warm-1000); }
.kr-pill-green { background: rgba(34, 197, 94, 0.14); color: var(--green-900); }
.kr-pill-blue  { background: rgba(59, 130, 246, 0.12); color: var(--blue-900); }

/* ── Word story builder ── */
.kr-word-story-card {
  padding: 18px;
}
.kr-word-story-head,
.kr-word-story-item-head,
.kr-word-story-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.kr-word-story-head {
  align-items: center;
}
.kr-word-story-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}
.kr-word-story-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--kr-radius-sm);
  color: var(--warm-900);
  background: rgba(255, 232, 184, 0.72);
}
.kr-word-story-mark svg {
  width: 18px;
  height: 18px;
}
.kr-word-story-title h3,
.kr-word-story-item h4 {
  margin: 0;
  color: var(--gray-1000);
  font-weight: 800;
  line-height: 1.2;
}
.kr-word-story-title h3 {
  font-size: 19px;
}
.kr-word-story-title p,
.kr-word-story-item p {
  margin: 5px 0 0;
  color: var(--gray-700);
  font-size: 14px;
  line-height: 1.5;
}
.kr-word-story-note,
.kr-word-story-error,
.kr-word-story-loading,
.kr-word-story-empty {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--kr-radius-sm);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 650;
}
.kr-word-story-note {
  color: var(--warm-1000);
  background: rgba(255, 232, 184, 0.55);
}
.kr-word-story-error {
  color: var(--red-900);
  background: rgba(239, 68, 68, 0.10);
}
.kr-word-story-loading,
.kr-word-story-empty {
  color: var(--gray-700);
  background: var(--gray-alpha-100);
}
.kr-word-story-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.kr-word-story-item {
  padding: 15px;
  border-radius: var(--kr-radius-sm);
  background: var(--background-200);
  box-shadow: inset 0 0 0 1px var(--gray-alpha-300);
}
.kr-word-story-item h4 {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kr-word-story-item p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kr-word-story-status {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--blue-900);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.kr-word-story-item[data-status="published"] .kr-word-story-status {
  background: rgba(34, 197, 94, 0.14);
  color: var(--green-900);
}
.kr-word-story-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.kr-word-story-chip {
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--gray-800);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  box-shadow: inset 0 0 0 1px var(--gray-alpha-300);
}
.kr-word-story-actions {
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
  flex-wrap: wrap;
}
.kr-word-story-card .btn-sm {
  min-height: 38px;
  font-size: 14px;
}
.kr-word-story-delete {
  color: var(--red-900);
  background: rgba(239, 68, 68, 0.08);
}
.kr-word-story-delete:hover:not(:disabled) {
  color: #fff;
  background: var(--red-700);
}

/* ── Tags ── */
.kr-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  line-height: 1.5;
  white-space: nowrap;
}
.kr-tag-amber { background: rgba(255, 232, 184, 0.7); color: var(--warm-1000); }
.kr-tag-blue  { background: rgba(59, 130, 246, 0.14); color: var(--blue-900); }
.kr-tag-green { background: rgba(34, 197, 94, 0.14); color: var(--green-900); }
.kr-tag-gray  { background: var(--gray-alpha-200); color: var(--gray-700); }

/* Parent textbook library */
.kr-parent > .kr-textbooks {
  padding: 34px 38px 42px;
}

.kr-textbooks-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.kr-textbooks-title {
  min-width: 0;
}
.kr-textbooks-eyebrow {
  margin-bottom: 9px;
  color: var(--kr-orange);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.kr-textbooks-title h3 {
  color: var(--kr-ink);
  font-size: 38px;
  font-weight: 900;
  line-height: 1.05;
}
.kr-textbooks-title p {
  margin-top: 11px;
  max-width: 640px;
  color: var(--kr-muted);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}
.kr-textbooks-empty {
  max-width: 520px;
  margin: 36px auto 0;
  padding: 42px 34px;
  border-radius: 24px;
  text-align: center;
  background: var(--kr-panel);
  border: 1px solid var(--kr-line);
}
.kr-textbooks-empty-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 18px;
  color: var(--kr-orange);
  background: #fff0df;
}
.kr-textbooks-empty-icon svg {
  width: 30px;
  height: 30px;
}
.kr-textbooks-empty h4 {
  color: var(--kr-ink);
  font-size: 22px;
  font-weight: 900;
}
.kr-textbooks-empty p {
  margin-top: 8px;
  color: var(--kr-muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}
.kr-textbooks-empty-action {
  height: 44px;
  margin-top: 20px;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--kr-orange-deep);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform var(--duration-state) var(--ease-out),
    box-shadow var(--duration-state) var(--ease-out);
}
.kr-textbooks-empty-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255, 107, 11, 0.22);
}

.kr-textbook-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.kr-textbook-card {
  position: relative;
  min-height: 338px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
  border-radius: 24px;
  color: var(--kr-ink);
  text-align: left;
  background: var(--kr-panel);
  border: 2px solid var(--kr-line);
  cursor: pointer;
  transition:
    border-color var(--duration-state) var(--ease-out),
    box-shadow var(--duration-state) var(--ease-out),
    transform var(--duration-state) var(--ease-out),
    background var(--duration-state) var(--ease-out);
}
.kr-textbook-card:hover {
  transform: translateY(-2px);
  border-color: #f7bc79;
  box-shadow: 0 16px 32px rgba(104, 70, 30, 0.10);
}
.kr-textbook-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(249, 115, 22, 0.20),
    0 16px 32px rgba(104, 70, 30, 0.10);
}
.kr-textbook-card[data-selected="true"] {
  background: #fffaf3;
  border-color: var(--kr-orange);
  box-shadow:
    inset 0 0 0 1px rgba(255, 122, 26, 0.12),
    0 16px 34px rgba(255, 122, 26, 0.13);
}
.kr-textbook-check {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: transparent;
  background: #fffaf4;
  border: 2px solid #ead8bf;
  transition:
    background var(--duration-state) var(--ease-out),
    border-color var(--duration-state) var(--ease-out),
    color var(--duration-state) var(--ease-out);
}
.kr-textbook-check svg {
  width: 20px;
  height: 20px;
  stroke-width: 3;
}
.kr-textbook-card[data-selected="true"] .kr-textbook-check {
  color: #fff;
  background: var(--kr-orange);
  border-color: var(--kr-orange);
}

.kr-textbook-main {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 18px;
  padding-right: 42px;
}
.kr-textbook-cover {
  position: relative;
  width: 86px;
  height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  color: #fff;
  overflow: hidden;
  box-shadow:
    inset -10px 0 0 rgba(0, 0, 0, 0.08),
    0 12px 22px rgba(97, 61, 23, 0.16);
}
.kr-textbook-cover::before {
  content: "";
  position: absolute;
  inset: 12px auto auto 12px;
  width: 28px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}
.kr-textbook-cover-label,
.kr-textbook-cover-line {
  position: relative;
  z-index: 1;
}
.kr-textbook-cover-label {
  max-width: 100%;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.05;
  word-break: break-word;
}
.kr-textbook-cover-line {
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
}
.kr-textbook-cover-line.is-short {
  width: 66%;
}
.kr-textbook-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 4px;
}
.kr-textbook-name {
  color: var(--kr-ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.12;
}
.kr-textbook-meta {
  margin-top: 7px;
  color: #9b8468;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}
.kr-textbook-desc {
  display: -webkit-box;
  margin-top: 12px;
  color: #7b6b58;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.kr-textbook-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f0dfc8;
}
.kr-textbook-stats strong {
  color: var(--kr-ink);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}
.kr-textbook-stats > span:first-child > span {
  margin-left: 6px;
  color: #a48c6d;
  font-size: 14px;
  font-weight: 900;
}
.kr-textbook-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: #c94310;
  background: #fff0df;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.kr-textbook-status svg {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

.kr-textbook-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-top: 18px;
  margin-bottom: 16px;
}
.kr-textbook-chip {
  max-width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  color: #6f5d48;
  background: #fff2df;
  border: 1px solid #f0dcc0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}
.kr-textbook-chip.is-more {
  color: #9a6a34;
  background: #fff8ef;
}
.kr-textbook-cta {
  flex: 0 0 auto;
  height: 48px;
  display: grid;
  place-items: center;
  margin-top: auto;
  border-radius: 999px;
  color: #c94310;
  background: #fff2df;
  border: 1px solid #f0d6b5;
  font-size: 16px;
  font-weight: 900;
  transition:
    color var(--duration-state) var(--ease-out),
    background var(--duration-state) var(--ease-out),
    border-color var(--duration-state) var(--ease-out);
}
.kr-textbook-card[data-selected="true"] .kr-textbook-cta {
  color: #fff;
  background: var(--kr-orange-deep);
  border-color: var(--kr-orange-deep);
}

@media (max-width: 1280px) {
  .kr-textbook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .kr-parent > .kr-textbooks {
    padding: 24px 16px 28px;
  }
  .kr-textbooks-head {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 22px;
  }
  .kr-textbooks-title h3 {
    font-size: 30px;
  }
  .kr-textbooks-title p {
    font-size: 16px;
  }
  .kr-textbook-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .kr-textbook-card {
    min-height: 316px;
    padding: 20px;
    border-radius: 22px;
  }
  .kr-textbook-check {
    top: 18px;
    right: 18px;
  }
  .kr-textbook-main {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 14px;
    padding-right: 38px;
  }
  .kr-textbook-cover {
    width: 74px;
    height: 98px;
    border-radius: 16px;
  }
  .kr-textbook-name {
    font-size: 20px;
  }
}

/* Parent report dashboard */
.kr-parent > .kr-report {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 42px 38px 42px;
}

.kr-report-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.kr-report-kpi,
.kr-report-panel,
.kr-report-history {
  background: var(--kr-panel);
  border: 1px solid var(--kr-line);
  box-shadow: 0 1px 0 rgba(123, 77, 31, 0.02);
}
.kr-report-kpi {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 32px;
  border-radius: 24px;
}
.kr-report-kpi h3,
.kr-report-panel h3,
.kr-report-history h3 {
  color: var(--kr-muted);
  font-weight: 900;
  letter-spacing: 0;
}
.kr-report-kpi h3 {
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
}
.kr-report-kpi-main {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 22px;
}
.kr-report-kpi-main strong {
  color: var(--kr-ink);
  font-size: 40px;
  font-weight: 900;
  line-height: 0.95;
}
.kr-report-kpi-main strong.is-green {
  color: #16a34a;
}
.kr-report-delta {
  display: inline-flex;
  align-items: center;
  color: #9a8a76;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.kr-report-delta.is-up {
  color: #16a34a;
}
.kr-report-delta.is-down {
  color: #c84f42;
}

.kr-report-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.kr-report-panel {
  min-height: 224px;
  padding: 34px 38px 30px;
  border-radius: 24px;
}
.kr-report-panel h3,
.kr-report-history h3 {
  color: var(--kr-ink);
  font-size: 26px;
  line-height: 1.15;
}

.kr-report-source-bar {
  height: 30px;
  display: flex;
  margin-top: 34px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff1df;
}
.kr-report-source-segment {
  min-width: 0;
  height: 100%;
}
.kr-report-source-segment[data-source="news"],
.kr-report-source-legend-item[data-source="news"] i {
  background: #7d5cc8;
}
.kr-report-source-segment[data-source="textbook"],
.kr-report-source-legend-item[data-source="textbook"] i {
  background: #16a34a;
}
.kr-report-source-segment[data-source="manual"],
.kr-report-source-legend-item[data-source="manual"] i {
  background: #ff7417;
}
.kr-report-source-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  margin-top: 24px;
}
.kr-report-source-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #756856;
  font-size: 18px;
  font-weight: 900;
}
.kr-report-source-legend-item i {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
}
.kr-report-source-legend-item strong {
  color: #756856;
  font-weight: 900;
}
.kr-report-inline-empty {
  margin-top: 18px;
  color: var(--kr-muted);
  font-size: 15px;
  font-weight: 800;
}

.kr-report-quiz-chart {
  height: 136px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 22px;
  margin-top: 28px;
}
.kr-report-quiz-col {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 10px;
}
.kr-report-quiz-bar {
  min-height: 0;
  border-radius: 10px 10px 0 0;
  transition: height 240ms var(--ease-out);
}
.kr-report-quiz-bar[data-bucket="low"] {
  background: #ffd9a8;
}
.kr-report-quiz-bar[data-bucket="mid"] {
  background: #ffba73;
}
.kr-report-quiz-bar[data-bucket="good"] {
  background: #ff7417;
}
.kr-report-quiz-bar[data-bucket="great"] {
  background: #16a34a;
}
.kr-report-quiz-col span {
  min-height: 20px;
  color: #b69c78;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.kr-report-history {
  min-height: 520px;
  padding: 34px 38px 38px;
  border-radius: 24px;
}
.kr-report-history h3 {
  margin-bottom: 32px;
}
.kr-report-history-empty {
  padding: 42px 0;
  color: var(--kr-muted);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}
.kr-report-history-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kr-report-pron-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.kr-report-pron-group {
  overflow: hidden;
  border: 1px solid var(--kr-line);
  border-radius: 20px;
  background: #fffdf9;
}
.kr-report-pron-head {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 30px;
  background: #fffaf3;
  border-bottom: 1px solid var(--kr-line);
}
.kr-report-pron-copy {
  min-width: 0;
}
.kr-report-pron-copy h4 {
  color: var(--kr-ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.22;
}
.kr-report-pron-copy p {
  margin-top: 8px;
  color: var(--kr-muted);
  font-size: 17px;
  font-weight: 800;
}
.kr-report-pron-actions {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
}
.kr-report-audio-chip,
.kr-report-play {
  display: grid;
  place-items: center;
  border-radius: 16px;
  cursor: pointer;
  transition:
    transform var(--duration-state) var(--ease-out),
    background var(--duration-state) var(--ease-out),
    color var(--duration-state) var(--ease-out);
}
.kr-report-audio-chip {
  width: 58px;
  height: 58px;
  color: #6d5c47;
  background: #fff2df;
}
.kr-report-audio-chip svg {
  width: 28px;
  height: 28px;
}
.kr-report-audio-chip:hover:not(:disabled),
.kr-report-play:hover:not(:disabled) {
  transform: translateY(-1px);
}
.kr-report-audio-chip.is-active {
  color: #fff;
  background: var(--kr-orange);
}
.kr-report-audio-chip:disabled,
.kr-report-play:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.kr-report-best-score {
  min-width: 78px;
  height: 62px;
  display: inline-grid;
  place-items: center;
  padding: 0 18px;
  border-radius: 16px;
  color: #16a34a;
  background: #e7f5df;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}
.kr-report-best-score.is-ok {
  color: #6a48b0;
  background: #f0e4ff;
}
.kr-report-best-score.is-fair {
  color: #c94310;
  background: #fff0df;
}
.kr-report-best-score.is-low {
  color: #c84f42;
  background: #fff0ef;
}
.kr-report-attempts {
  display: flex;
  flex-direction: column;
}
.kr-report-attempt {
  min-height: 86px;
  display: grid;
  grid-template-columns: 66px 96px minmax(0, 1fr) auto 54px;
  align-items: center;
  gap: 18px;
  padding: 16px 30px;
  border-top: 1px solid var(--kr-line);
}
.kr-report-attempt:first-child {
  border-top: 0;
}
.kr-report-score-pill {
  min-width: 58px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  color: #c94310;
  background: #fff0df;
  font-size: 21px;
  font-weight: 900;
}
.kr-report-score-pill.is-great {
  color: #16a34a;
  background: #e7f5df;
}
.kr-report-score-pill.is-ok {
  color: #6a48b0;
  background: #f0e4ff;
}
.kr-report-score-pill.is-low {
  color: #c84f42;
  background: #fff0ef;
}
.kr-report-attempt-time {
  color: var(--kr-muted);
  font-size: 21px;
  font-weight: 800;
  white-space: nowrap;
}
.kr-report-transcript {
  min-width: 0;
  overflow: hidden;
  color: #756856;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kr-report-missed {
  max-width: 260px;
  overflow: hidden;
  padding: 8px 16px;
  border-radius: 999px;
  color: #c84f42;
  background: #fff0ef;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kr-report-play {
  width: 52px;
  height: 52px;
  color: #fff;
  background: var(--kr-orange-deep);
}
.kr-report-play svg {
  width: 27px;
  height: 27px;
  transform: translateX(1px);
}
.kr-report-play.is-active {
  background: #c94310;
}

@media (max-width: 1280px) {
  .kr-report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kr-report-attempt {
    grid-template-columns: 66px 90px minmax(0, 1fr) 54px;
  }
  .kr-report-missed {
    grid-column: 3 / 4;
    justify-self: start;
  }
}

@media (max-width: 980px) {
  .kr-parent > .kr-report {
    padding: 24px 18px 30px;
  }
  .kr-report-chart-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .kr-parent > .kr-report {
    padding: 22px 14px 26px;
    gap: 16px;
  }
  .kr-report-kpis {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .kr-report-kpi,
  .kr-report-panel,
  .kr-report-history {
    border-radius: 20px;
  }
  .kr-report-kpi {
    min-height: 112px;
    padding: 22px;
  }
  .kr-report-kpi-main strong {
    font-size: 34px;
  }
  .kr-report-delta {
    font-size: 18px;
  }
  .kr-report-panel,
  .kr-report-history {
    padding: 24px 20px;
  }
  .kr-report-source-legend-item {
    font-size: 15px;
  }
  .kr-report-quiz-chart {
    gap: 12px;
  }
  .kr-report-pron-head {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }
  .kr-report-pron-copy h4 {
    font-size: 20px;
  }
  .kr-report-pron-actions {
    justify-content: flex-end;
  }
  .kr-report-attempt {
    grid-template-columns: 56px minmax(0, 1fr) 48px;
    gap: 12px;
    padding: 14px 20px;
  }
  .kr-report-attempt-time {
    grid-column: 2 / 3;
    font-size: 16px;
  }
  .kr-report-transcript {
    grid-column: 1 / -1;
    white-space: normal;
    font-size: 17px;
  }
  .kr-report-missed {
    grid-column: 1 / -1;
    max-width: 100%;
    font-size: 14px;
  }
  .kr-report-play {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    width: 48px;
    height: 48px;
  }
}

/* ── Compare cards ── */
.kr-compare-head { margin-bottom: 12px; }
.kr-compare-label {
  font-size: 12px;
  color: var(--gray-700);
  font-weight: 600;
}
.kr-compare-nums {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kr-compare-num { text-align: center; flex: 1; }
.kr-compare-num-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--gray-1000);
  line-height: 1;
}
.kr-compare-num-sub {
  font-size: 11px;
  color: var(--gray-700);
  margin-top: 4px;
}
.kr-compare-vs {
  font-size: 12px;
  color: var(--gray-700);
  font-weight: 600;
}
.kr-compare-delta {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.kr-compare-delta.is-up {
  background: rgba(34, 197, 94, 0.14);
  color: var(--green-900);
}
.kr-compare-delta.is-down {
  background: rgba(239, 68, 68, 0.14);
  color: var(--red-900);
}

/* ── Vocab distribution (stacked bar) ── */
.kr-vocab-row { padding: 4px 0; }
.kr-vocab-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.kr-vocab-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--gray-alpha-100);
  margin-bottom: 6px;
}
.kr-vocab-seg { height: 100%; transition: width 0.3s; }
.kr-seg-new       { background: #fbbf24; }
.kr-seg-learning  { background: #3b82f6; }
.kr-seg-mastered  { background: #22c55e; }
.kr-vocab-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--gray-700);
}
.kr-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.kr-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* ── Quiz score bars ── */
.kr-quiz-bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 140px;
  padding-top: 10px;
}
.kr-quiz-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}
.kr-quiz-bar-track {
  flex: 1;
  width: 100%;
  max-width: 48px;
  display: flex;
  align-items: flex-end;
  border-radius: 6px 6px 0 0;
  background: var(--gray-alpha-100);
  overflow: hidden;
}
.kr-quiz-bar-fill {
  width: 100%;
  border-radius: 6px 6px 0 0;
  transition: height 0.3s;
  min-height: 2px;
}
.kr-quiz-bar-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-1000);
}
.kr-quiz-bar-label {
  font-size: 10px;
  color: var(--gray-700);
}

/* ── Learner stat row (report) ── */
.kr-learner-stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  background: var(--gray-alpha-50);
  transition: background var(--duration-state) var(--ease-out);
}
.kr-learner-stat-row:hover { background: var(--gray-alpha-100); }

/* Parent family page */
.kr-parent > .kr-family-page {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.95fr);
  gap: 24px;
  padding: 32px 32px 34px;
}
.kr-family-main,
.kr-family-side {
  min-width: 0;
}
.kr-family-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.kr-family-side {
  min-height: min(660px, calc(var(--kid-page-height) - 210px));
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-self: start;
}
.kr-family-hero,
.kr-family-readers-panel,
.kr-family-code-note,
.kr-family-signout {
  background: var(--kr-panel);
  border: 1px solid var(--kr-line);
  box-shadow: 0 1px 0 rgba(123, 77, 31, 0.02);
}
.kr-family-hero {
  min-height: 132px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 30px;
  border-radius: 22px;
}
.kr-family-home-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 22px;
  color: #c94310;
  background: #fff1df;
}
.kr-family-home-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.9;
}
.kr-family-hero-copy {
  min-width: 0;
}
.kr-family-hero-copy h3 {
  color: var(--kr-ink);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
}
.kr-family-hero-copy p {
  margin-top: 9px;
  color: var(--kr-muted);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
}
.kr-family-readers-panel {
  min-height: min(548px, calc(var(--kid-page-height) - 344px));
  padding: 34px 32px;
  border-radius: 22px;
}
.kr-family-readers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kr-line);
}
.kr-family-readers-head h3 {
  color: var(--kr-ink);
  font-size: 25px;
  font-weight: 900;
  line-height: 1.1;
}
.kr-family-add-reader {
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  border-radius: 15px;
  color: #c94310;
  background: #fff7ee;
  border: 1px solid #f2d8b8;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  transition:
    background var(--duration-state) var(--ease-out),
    border-color var(--duration-state) var(--ease-out),
    transform var(--duration-state) var(--ease-out);
}
.kr-family-add-reader svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}
.kr-family-add-reader:hover {
  transform: translateY(-1px);
  background: #fff0df;
  border-color: #f6bf7c;
}
.kr-family-reader-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kr-family-reader-card {
  min-height: 100px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border-radius: 18px;
  background: #fffdf9;
  border: 1px solid var(--kr-line);
}
.kr-family-reader-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #6e3510;
  background: #ffbd78;
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
}
.kr-family-reader-avatar[data-tone="1"] {
  color: #184d6b;
  background: #a8dcf5;
}
.kr-family-reader-avatar[data-tone="2"] {
  color: #2f5a21;
  background: #bce7a8;
}
.kr-family-reader-avatar[data-tone="3"] {
  color: #503578;
  background: #d9c7ff;
}
.kr-family-reader-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.kr-family-reader-copy strong {
  color: var(--kr-ink);
  font-size: 23px;
  font-weight: 900;
  line-height: 1.1;
}
.kr-family-reader-copy span {
  color: #8b7c67;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
}
.kr-family-reader-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.kr-family-reader-edit,
.kr-family-reader-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9f7b56;
  cursor: pointer;
  transition:
    color var(--duration-state) var(--ease-out),
    transform var(--duration-state) var(--ease-out);
}
.kr-family-reader-edit {
  gap: 7px;
  font-size: 19px;
  font-weight: 800;
}
.kr-family-reader-edit svg {
  width: 18px;
  height: 18px;
}
.kr-family-reader-delete {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.kr-family-reader-delete svg {
  width: 21px;
  height: 21px;
}
.kr-family-reader-edit:hover,
.kr-family-reader-delete:hover {
  color: #c94310;
  transform: translateY(-1px);
}
.kr-family-empty-reader {
  padding: 32px;
  border-radius: 20px;
  color: var(--kr-muted);
  background: #fffaf3;
  border: 1px dashed #efd7b8;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

.kr-family-code-card {
  min-height: 278px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 38px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(145deg, #ff9236 0%, #ff6b11 100%);
  box-shadow: inset 0 -1px 0 rgba(123, 42, 0, 0.14);
}
.kr-family-code-card h3 {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.kr-family-code {
  margin-top: 30px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.kr-family-copy-code {
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
  border-radius: 17px;
  color: #fff;
  background: rgba(255, 255, 255, 0.24);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  transition:
    background var(--duration-state) var(--ease-out),
    transform var(--duration-state) var(--ease-out);
}
.kr-family-copy-code svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.2;
}
.kr-family-copy-code:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.31);
}
.kr-family-copy-code[data-copied="true"] {
  background: rgba(255, 255, 255, 0.34);
}
.kr-family-code-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 24px;
  border-radius: 20px;
  color: #8a6337;
  background: #fff8ef;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.65;
}
.kr-family-note-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  margin-top: 5px;
  color: #c94310;
}
.kr-family-note-icon svg {
  width: 22px;
  height: 22px;
}
.kr-family-code-note p {
  min-width: 0;
}
.kr-family-signout {
  height: 76px;
  display: grid;
  place-items: center;
  margin-top: auto;
  border-radius: 20px;
  color: #b4473f;
  background: transparent;
  border: 1px solid #efbeb9;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  transition:
    background var(--duration-state) var(--ease-out),
    border-color var(--duration-state) var(--ease-out),
    color var(--duration-state) var(--ease-out);
}
.kr-family-signout:hover {
  color: #9f3028;
  background: #fff7f5;
  border-color: #e9aaa4;
}

@media (max-width: 1180px) {
  .kr-parent > .kr-family-page {
    grid-template-columns: 1fr;
  }
  .kr-family-side {
    min-height: 0;
  }
  .kr-family-signout {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .kr-parent > .kr-family-page {
    gap: 18px;
    padding: 24px 16px 30px;
  }
  .kr-family-main,
  .kr-family-side {
    gap: 18px;
  }
  .kr-family-hero {
    min-height: 128px;
    gap: 18px;
    padding: 24px 22px;
    border-radius: 22px;
  }
  .kr-family-home-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
  }
  .kr-family-home-icon svg {
    width: 32px;
    height: 32px;
  }
  .kr-family-hero-copy h3 {
    font-size: 27px;
  }
  .kr-family-hero-copy p {
    font-size: 17px;
  }
  .kr-family-readers-panel {
    min-height: 0;
    padding: 26px 22px;
    border-radius: 22px;
  }
  .kr-family-readers-head {
    flex-direction: column;
    align-items: stretch;
  }
  .kr-family-add-reader {
    width: 100%;
    font-size: 18px;
  }
  .kr-family-reader-card {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }
  .kr-family-reader-avatar {
    width: 62px;
    height: 62px;
    font-size: 26px;
  }
  .kr-family-reader-copy strong {
    font-size: 22px;
  }
  .kr-family-reader-copy span {
    font-size: 17px;
  }
  .kr-family-reader-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .kr-family-code-card {
    min-height: 260px;
    padding: 30px 28px;
    border-radius: 24px;
  }
  .kr-family-code-card h3 {
    font-size: 20px;
  }
  .kr-family-code {
    margin-top: 30px;
    font-size: 34px;
    white-space: normal;
  }
  .kr-family-copy-code {
    height: 62px;
    margin-top: 30px;
    font-size: 19px;
  }
  .kr-family-code-note {
    padding: 20px;
    font-size: 17px;
  }
  .kr-family-signout {
    height: 72px;
    font-size: 20px;
  }
}

/* ── Generic empty state ── */
.kr-empty {
  text-align: center;
  color: var(--gray-700);
  font-size: 13px;
}

@media (max-width: 640px) {
  .kr-hero-stats { gap: 14px; }
  .kr-hero-stat-num { font-size: 22px; }
  .kr-words-stats { width: 100%; }
  .kr-stat-pill { flex: 1; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Parent dashboard — pronunciation attempt history
   One group per practised sentence; each group lists every attempt
   (newest first) with score, transcript, missing words and audio
   playback buttons. The "standard" audio reuses the TTS sentence
   endpoint; the child's audio is served from /api/me/pronunciation/
   attempts/<id>/audio.
   ═══════════════════════════════════════════════════════════════ */

/* Header summary chip ("N records") */
.kr-pron-count {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gray-alpha-200);
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 600;
}

/* Empty state */
.kr-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gray-alpha-200);
  color: var(--gray-700);
  margin-bottom: 10px;
}
.kr-empty-icon :where(svg) { width: 22px; height: 22px; }
.kr-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-1000);
  margin-bottom: 4px;
}
.kr-empty-sub {
  font-size: 12px;
  color: var(--gray-700);
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Loading skeleton row */
.kr-pron-skeleton {
  height: 96px;
  border-radius: var(--kr-radius-md, 14px);
  background: linear-gradient(
    90deg,
    var(--gray-alpha-100) 0%,
    var(--gray-alpha-200) 50%,
    var(--gray-alpha-100) 100%
  );
  background-size: 200% 100%;
  animation: kr-pron-shimmer 1.2s ease-in-out infinite;
}
@keyframes kr-pron-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* A sentence group: rounded surface with a tinted left edge */
.kr-pron-group {
  border-radius: var(--kr-radius-md, 14px);
  background: var(--background-100);
  box-shadow: inset 0 0 0 1px var(--gray-alpha-200);
  overflow: hidden;
}
.kr-pron-group + .kr-pron-group { margin-top: 0; }

.kr-pron-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255, 247, 230, 0.55) 0%, rgba(255, 247, 230, 0) 100%);
  border-bottom: 1px solid var(--gray-alpha-200);
}
.kr-pron-sentence {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gray-1000);
  /* clamp to 3 lines so very long sentences stay compact */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kr-pron-group-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.kr-pron-best {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.kr-pron-best.is-great { background: rgba(22, 163, 74, 0.12); color: var(--green-700); }
.kr-pron-best.is-ok    { background: rgba(59, 130, 246, 0.12); color: var(--blue-700); }
.kr-pron-best.is-fair  { background: rgba(183, 107, 0, 0.12);  color: var(--warm-700); }
.kr-pron-best.is-low   { background: rgba(220, 38, 38, 0.12);  color: #dc2626; }
.kr-pron-cnt {
  font-size: 11px;
  color: var(--gray-700);
  font-weight: 600;
}

/* Shared play button (standard + child variants) */
.kr-pron-play {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--gray-alpha-300);
  background: var(--background-100);
  color: var(--gray-1000);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-state) var(--ease-out),
              border-color var(--duration-state) var(--ease-out),
              transform var(--duration-state) var(--ease-out);
}
.kr-pron-play :where(svg) { width: 14px; height: 14px; }
.kr-pron-play:hover:not(:disabled) {
  background: var(--gray-alpha-100);
  transform: translateY(-1px);
}
.kr-pron-play:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.kr-pron-play.is-standard {
  border-color: rgba(183, 107, 0, 0.25);
  color: var(--warm-700);
  background: rgba(255, 247, 230, 0.5);
}
.kr-pron-play.is-standard:hover:not(:disabled) {
  background: rgba(255, 232, 184, 0.65);
}
.kr-pron-play.is-child {
  border-color: rgba(59, 130, 246, 0.25);
  color: var(--blue-700);
  background: rgba(59, 130, 246, 0.06);
}
.kr-pron-play.is-child:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.12);
}
.kr-pron-play.is-active {
  background: var(--blue-700);
  color: #fff;
  border-color: var(--blue-700);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}
.kr-pron-play.is-standard.is-active {
  background: var(--warm-700);
  border-color: var(--warm-700);
  box-shadow: 0 2px 8px rgba(183, 107, 0, 0.35);
}

/* Attempts list inside a group */
.kr-pron-attempts {
  display: flex;
  flex-direction: column;
}
.kr-pron-attempt {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--gray-alpha-100);
}
.kr-pron-attempt:first-child { border-top: 0; }
.kr-pron-attempt-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kr-pron-attempt-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Score pill — same color bands as the "best" badge */
.kr-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kr-score-pill.is-great { background: rgba(22, 163, 74, 0.14); color: var(--green-700); }
.kr-score-pill.is-ok    { background: rgba(59, 130, 246, 0.14); color: var(--blue-700); }
.kr-score-pill.is-fair  { background: rgba(183, 107, 0, 0.14);  color: var(--warm-700); }
.kr-score-pill.is-low   { background: rgba(220, 38, 38, 0.14);  color: #dc2626; }
.kr-pron-time {
  font-size: 11px;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
}
.kr-pron-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--green-700);
  color: #fff;
  letter-spacing: 0.02em;
}
.kr-pron-transcript {
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-1000);
  word-break: break-word;
}
.kr-pron-transcript-label {
  font-size: 11px;
  color: var(--gray-700);
  font-weight: 600;
  margin-right: 3px;
}
.kr-pron-missing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 11px;
  color: var(--gray-700);
}
.kr-pron-missing-label { font-weight: 600; }
.kr-pron-missing-word {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  font-weight: 600;
  font-size: 11px;
}
.kr-pron-attempt-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .kr-pron-group-head { flex-direction: column; align-items: stretch; }
  .kr-pron-group-actions { justify-content: flex-end; flex-wrap: wrap; }
  .kr-pron-attempt { flex-direction: column; align-items: stretch; gap: 8px; }
  .kr-pron-attempt-actions { justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NewsNest "Sunny Reader" design reskin — overrides layered on top of the
   component CSS to match the design doc: Baloo 2 display type, orange/cream
   surfaces, pill toggles, underline reading tabs, flat white bars, warm
   cards, bold-orange parent hero. Scoped to body.kid so admin is untouched.
   ═══════════════════════════════════════════════════════════════════════ */
body.kid { --warm-50: #fff6ec; --purple-700: #7c5bc2; }

/* Display type on brand, buttons, toggles and the big hero/KPI numbers. */
body.kid .btn,
body.kid .segmented-option,
body.kid .kr-hero-title,
body.kid .kr-hero-stat-num,
body.kid .kr-kpi-num,
body.kid .kr-compare-num-val,
body.kid .metric-value {
  font-family: var(--font-display);
}
body.kid .btn { border-radius: 14px; font-weight: 700; }
body.kid .btn-lg { border-radius: 16px; }
.kid-hero-title { font-family: var(--font-display) !important; letter-spacing: 0; font-weight: 800; }
.kid-empty-state-title,
.kid-chat-header .kid-chat-header-id > div,
.kr-kpi-num, .kr-hero-stat-num, .kr-compare-num-val { font-family: var(--font-display); }

/* Pill toggles (mode toggle, content toggles, word tabs) — cream track,
   solid-orange active pill, exactly like the design's segmented switches. */
body.kid .segmented {
  background: var(--gray-300);
  border-radius: 999px;
  box-shadow: none;
  padding: 3px;
  gap: 2px;
}
body.kid .segmented-option {
  border-radius: 999px;
  color: var(--gray-600);
  font-weight: 700;
}
body.kid .segmented-option[data-active="true"],
body.kid .segmented-option[aria-selected="true"] {
  background: var(--warm-600);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(249, 115, 22, 0.6);
}

/* Reading tabs are underline text tabs in the design, not pills. Scope the
   override to the reader tab bar's segmented control only. The `body.kid`
   prefix is required to out-specify `body.kid .segmented-option[...]`. */
body.kid .kid-tab-bar-inner .segmented {
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: 2px;
}
body.kid .kid-tab-bar-inner .segmented-option {
  height: auto;
  padding: 8px 14px;
  border-radius: 0;
  color: var(--gray-500);
  background: transparent;
  border-bottom: 3px solid transparent;
}
body.kid .kid-tab-bar-inner .segmented-option:hover { color: var(--warm-700); }
body.kid .kid-tab-bar-inner .segmented-option[data-active="true"] {
  background: transparent;
  color: var(--warm-700);
  border-bottom-color: var(--warm-600);
  box-shadow: none;
}

/* Parent top nav tabs — soft chip active (cream fill + orange text), not a
   solid-orange pill. */
body.kid .kr-parent-tabs .segmented {
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: 2px;
}
body.kid .kr-parent-tabs .segmented-option { border-radius: 10px; color: var(--gray-600); }
body.kid .kr-parent-tabs .segmented-option[data-active="true"] {
  background: var(--warm-100);
  color: var(--warm-700);
  box-shadow: none;
}

/* Flat white sticky bars with a warm hairline (design frames are opaque). */
.kid-tab-bar { background: var(--background-300); border-bottom-color: var(--gray-400); }
.kid-dock { background: #fff; border-top-color: var(--gray-400); }

/* Cards & keyword tiles — white on a cream border with a soft warm shadow. */
.kid-tool-panel { box-shadow: inset 0 0 0 1px var(--gray-400), var(--shadow-raised); }
.kr-card { box-shadow: inset 0 0 0 1px var(--gray-400), var(--shadow-soft); }
.kid-keyword-speaker:not(.kid-keyword-example-speak) {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: var(--warm-100);
  color: var(--warm-600) !important;
  opacity: 1 !important;
}
.kid-keyword-speaker:not(.kid-keyword-example-speak) svg {
  width: 17px;
  height: 17px;
}
.kid-tool-panel-interactive:hover .kid-keyword-speaker { transform: none; }

/* Keyword highlight capsule — match the design's soft-peach chip. */
.kid-paragraph mark,
.kid-sentence mark,
.kid-word--kw {
  background: #ffe8cc !important;
  color: var(--warm-700) !important;
  box-shadow: none !important;
}

/* Chat: user bubble solid orange (design uses #F97316). */
.kid-chat-bubble[data-role="user"] .kid-chat-bubble-text { background: #f97316; }

/* Parent overview hero → bold orange gradient with white text. */
.kr-hero-card {
  background: linear-gradient(135deg, var(--warm-500), var(--warm-600));
  box-shadow: 0 18px 40px -24px rgba(249, 115, 22, 0.5);
  color: #fff;
}
.kr-hero-title { color: #fff; }
.kr-hero-sub { color: rgba(255, 255, 255, 0.9); }
.kr-hero-stat-num { color: #fff; }
.kr-hero-stat-label { color: rgba(255, 255, 255, 0.85); }
.kr-streak-badge { background: rgba(255, 255, 255, 0.22); color: #fff; }
.kr-streak-badge.is-on { background: rgba(255, 255, 255, 0.28); color: #fff; box-shadow: none; }

/* Login card gets the warm elevated treatment automatically via tokens; give
   the code input an orange focus ring to match the design's active box. */
body.kid .input:focus { box-shadow: inset 0 0 0 1.5px var(--warm-500), var(--ring-focus); }

/* ═══════════════════════════════════════════════════════════════════════
   NewsNest login (auth view) — cream page, elevated white card, NewsNest
   logo, and a per-character family-code display over an invisible input.
   ═══════════════════════════════════════════════════════════════════════ */
.kid-auth {
  min-height: var(--kid-page-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: transparent;
}
.kid-auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--background-100);
  border-radius: 32px;
  border: 8px solid #fff;
  box-shadow: 0 30px 70px -30px rgba(120, 72, 20, 0.45);
  padding: 44px 32px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.kid-auth-logo {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: var(--warm-500);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  box-shadow: 0 12px 24px -8px rgba(249, 115, 22, 0.6);
}
.kid-auth-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--warm-700);
  margin-top: 18px;
}
.kid-auth-tagline {
  font-size: 14.5px;
  color: var(--gray-600);
  margin-top: 6px;
}
.kid-auth-form {
  width: 100%;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}
.kid-auth-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--gray-900);
  text-align: left;
}
.kid-code {
  position: relative;
  margin-top: 12px;
}
.kid-code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
  font-size: 16px; /* avoid iOS zoom-on-focus */
}
.kid-code-boxes {
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 1;
}
.kid-code-box {
  flex: 1;
  min-width: 0;
  aspect-ratio: 34 / 46;
  border-radius: 12px;
  background: #fff;
  border: 2px solid var(--gray-400);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--gray-1000);
  transition: border-color var(--duration-state) var(--ease-out),
    box-shadow var(--duration-state) var(--ease-out);
}
.kid-code-box[data-filled="true"] { border-color: var(--warm-500); }
.kid-code-box[data-active="true"] {
  border-color: var(--warm-600);
  border-width: 2.5px;
  box-shadow: 0 0 0 4px var(--warm-200);
}
.kid-code:focus-within .kid-code-box[data-active="true"] {
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25);
}
.kid-code-dash {
  flex: 0 0 auto;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--gray-500);
}
.kid-code-hint {
  font-size: 11px;
  color: var(--amber-800);
  margin-top: 10px;
  text-align: left;
}
.kid-auth-submit {
  margin-top: 24px;
  box-shadow: 0 12px 22px -10px rgba(249, 115, 22, 0.7);
}
.kid-auth-help {
  font-size: 12.5px;
  color: var(--gray-500);
  margin-top: 18px;
}