/* ============================================================
   Learn Japanese with Bri — shared stylesheet
   Theme: washi paper + sumi ink + vermilion accent + sakura soft
   ============================================================ */

:root {
  /* Palette */
  --bg: #faf6ef;            /* washi cream */
  --bg-deep: #f3ecdf;       /* deeper washi for sections */
  --surface: #ffffff;       /* card surface */
  --ink: #1c1c1c;           /* sumi black */
  --ink-soft: #4a4339;      /* secondary text */
  --ink-mute: #8a8275;      /* muted text */
  --line: #e8dfd0;          /* subtle border / divider */
  --vermilion: #b8362e;     /* primary accent (torii red) */
  --vermilion-soft: #c95048;
  --sakura: #f7d8e0;        /* soft pink */
  --sakura-deep: #e8a0b8;
  --indigo: #1d3557;        /* headings / structural */
  --indigo-soft: #2c4773;
  --gold: #b8893a;          /* subtle gilded accent */
  --gold-deep: var(--gold-deep);     /* darker gold for accents on light bg */
  --sage: var(--sage);          /* kaiwa neutral speaker accent */
  --sage-deep: var(--sage-deep);
  --success: var(--success);       /* "correct"/positive feedback green */

  /* Thematic surfaces — sage reader (vertical Japanese text) */
  --reader-sage-bg-start: var(--reader-sage-bg-start);
  --reader-sage-bg-end:   var(--reader-sage-bg-end);
  --reader-sage-border:   var(--reader-sage-border);
  --reader-sage-scroll:   var(--reader-sage-scroll);

  /* Thematic surfaces — apricot translation panel */
  --panel-apricot-bg-start: var(--panel-apricot-bg-start);
  --panel-apricot-bg-end:   var(--panel-apricot-bg-end);
  --panel-apricot-border:   var(--panel-apricot-border);
  --panel-apricot-title:    var(--panel-apricot-title);
  --panel-apricot-scroll:   var(--panel-apricot-scroll);

  /* Thematic surfaces — kaiwa notes (warmer cream variant) */
  --notes-apricot-bg-start: var(--notes-apricot-bg-start);
  --notes-apricot-bg-end:   var(--notes-apricot-bg-end);
  --notes-apricot-border:   var(--notes-apricot-border);
  --notes-apricot-title:    var(--notes-apricot-title);

  /* Radii & shadows */
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(60,40,20,.06), 0 1px 1px rgba(60,40,20,.04);
  --shadow:    0 4px 16px rgba(60,40,20,.08), 0 1px 2px rgba(60,40,20,.04);
  --shadow-lg: 0 18px 50px rgba(60,40,20,.12);

  /* Typography */
  --font-serif: "Noto Serif JP", "Times New Roman", serif;
  --font-sans:  "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-jp:    "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Subtle washi paper texture using two radial gradients */
body {
  background-image:
    radial-gradient(ellipse 800px 600px at 15% -10%, rgba(184,54,46,.04), transparent 60%),
    radial-gradient(ellipse 600px 500px at 110% 110%, rgba(29,53,87,.04), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
}

a { color: var(--vermilion); text-decoration: none; }
a:hover { color: var(--vermilion-soft); }

/* ============================================================
   Layout
   ============================================================ */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================================
   Top bar / nav
   ============================================================ */
.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-serif);
  font-weight: 700; font-size: 19px; letter-spacing: -0.01em;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.hanko {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 6px;
  background: var(--vermilion); color: #fffaf2;
  font-family: var(--font-jp); font-weight: 700; font-size: 16px;
  box-shadow: inset 0 0 0 1.5px rgba(255,250,242,.4),
              0 2px 6px rgba(184,54,46,.35);
  letter-spacing: -0.02em;
}
.brand-sub {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 12px; color: var(--ink-mute);
  margin-top: 2px; letter-spacing: 0.04em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }

nav.crumbs {
  font-size: 13px; color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 8px;
}
nav.crumbs a { color: var(--ink-soft); }
nav.crumbs .sep { color: var(--line); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}
/* Variants — home keeps the default; level pages and category pages tighten the rhythm */
.hero.hero-level    { padding: 60px 0 30px; }
.hero.hero-category { padding: 50px 0 20px; }
/* The .wrap inside .hero is the containing block for ghost-ideo absolutes */
.hero .wrap { position: relative; }
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--ink);
}
.hero h1 .accent {
  color: var(--vermilion);
}
.hero .kicker {
  display: inline-block;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--vermilion);
  letter-spacing: 0.2em;
  margin-bottom: 18px;
  padding: 6px 14px;
  border: 1px solid var(--vermilion);
  border-radius: 999px;
  background: rgba(184,54,46,.04);
}
.hero p.lead {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 32px;
}

/* Ghost ideograms in the hero background */
.ghost-ideo {
  position: absolute;
  font-family: var(--font-jp);
  color: rgba(184,54,46,.05);
  font-weight: 900;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* ============================================================
   Section heading
   ============================================================ */
.section { padding: 40px 0 64px; }
/* Modifiers — tight: minor top spacing under a hero; flush: tucked against the previous section */
.section.section-tight { padding-top: 10px; }
.section.section-flush { padding-top: 0; }
.section-head {
  display: flex; align-items: baseline; gap: 16px;
  margin: 0 0 28px;
}
.section-head h2 {
  font-family: var(--font-serif);
  font-size: 26px; font-weight: 700;
  margin: 0; color: var(--indigo);
  letter-spacing: -0.01em;
}
.section-head .jp {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink-mute);
  letter-spacing: 0.15em;
}

/* ============================================================
   Level cards (home page)
   ============================================================ */
.levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}
.level-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 22px 22px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.level-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--vermilion);
  text-decoration: none;
  color: var(--ink);
}
.level-card .level-tag {
  font-family: var(--font-jp);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.level-card .level-code {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 700;
  color: var(--vermilion);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 6px 0 4px;
}
.level-card .level-desc {
  font-size: 13px; color: var(--ink-mute); margin-top: 8px;
}
.level-card .level-meta {
  margin-top: 14px;
  font-size: 12px; color: var(--ink-mute);
  display: flex; align-items: center; gap: 8px;
}
.level-card .level-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--vermilion); display: inline-block; }
.level-card .level-meta.muted .dot { background: var(--line); }

/* Decorative kanji in the corner of each level card */
.level-card .ideo {
  position: absolute;
  right: 14px; bottom: -10px;
  font-family: var(--font-jp);
  font-size: 78px;
  font-weight: 900;
  color: rgba(28,28,28,.04);
  pointer-events: none;
  line-height: 1;
}

/* ============================================================
   Landing page (public welcome)
   ============================================================ */
.land-hero {
  position: relative;
  padding: 70px 0 60px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
}
.land-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
/* Single, centered watermark behind the hero (replaces the old off-center pair). */
.land-hero-ghost {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 360px;
  z-index: 0;
}
.land-h1 {
  font-size: 56px;
  line-height: 1.05;
  font-weight: 700;
  margin: 10px 0 22px;
  letter-spacing: -0.015em;
}
.land-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto 36px;
}
.land-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}
.land-cta-row-center {
  justify-content: center;
}
.land-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all .15s ease;
}
.land-cta-primary {
  background: var(--vermilion);
  color: #fffaf2;
  box-shadow: 0 4px 16px rgba(184,54,46,.22);
}
.land-cta-primary:hover {
  background: #94251f;
  transform: translateY(-2px);
  text-decoration: none;
  color: #fffaf2;
  box-shadow: 0 6px 22px rgba(184,54,46,.32);
}
.land-cta-secondary {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.land-cta-secondary:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  text-decoration: none;
  transform: translateY(-2px);
}
.land-cta-big {
  padding: 16px 32px;
  font-size: 16px;
}
.land-cta-arrow {
  font-size: 18px;
  transition: transform .15s ease;
}
.land-cta:hover .land-cta-arrow { transform: translateX(4px); }
.land-fineprint {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
}
.land-fineprint a {
  color: var(--vermilion);
  text-decoration: none;
}
.land-fineprint a:hover { text-decoration: underline; }
.land-nav-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.land-nav-link:hover { color: var(--vermilion); text-decoration: none; }

.land-features {
  padding: 60px 0;
  background: var(--surface);
}
.land-section-title {
  font-size: 30px;
  text-align: center;
  margin: 0 0 36px;
  line-height: 1.2;
}
.land-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.land-feature {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: transform .15s ease, border-color .15s ease;
}
.land-feature:hover {
  transform: translateY(-3px);
  border-color: var(--vermilion);
}
.land-feature-icon {
  font-family: var(--font-jp);
  font-size: 36px;
  font-weight: 900;
  color: var(--vermilion);
  background: rgba(184,54,46,.08);
  width: 60px; height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.land-feature h3 {
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--ink);
}
.land-feature p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
.land-cta-block {
  padding: 70px 0;
  text-align: center;
}
.land-cta-block h2 {
  font-size: 36px;
  margin: 0 0 12px;
}
.land-cta-block p {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto 28px;
  line-height: 1.55;
}
@media (max-width: 700px) {
  .land-h1 { font-size: 38px; }
  .land-section-title { font-size: 24px; }
  .land-cta-block h2 { font-size: 28px; }
  .land-cta { padding: 12px 22px; }
}

/* ============================================================
   Auth / login page
   ============================================================ */
.auth-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 20px 40px;
  min-height: 70vh;
}
.auth-card {
  max-width: 460px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 40px 28px;
  box-shadow: var(--shadow);
}
.auth-head {
  text-align: center;
  margin-bottom: 30px;
}
.auth-stamp {
  font-family: var(--font-jp);
  font-size: 64px;
  color: var(--vermilion);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 18px;
  background: rgba(184, 54, 46, .08);
  width: 92px;
  height: 92px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-head h1 {
  font-size: 28px;
  margin: 0 0 8px;
  color: var(--ink);
}
.auth-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-mute);
  margin-top: 14px;
  letter-spacing: 0.02em;
}
.auth-label-optional span {
  color: var(--ink-mute);
  font-weight: 400;
  font-style: italic;
}
.auth-input {
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-deep);
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.auth-input:focus {
  border-color: var(--vermilion);
  background: var(--surface);
}
.auth-submit {
  margin-top: 22px;
  padding: 13px 22px;
  background: var(--vermilion);
  color: #fffaf2;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.auth-submit:hover { background: #94251f; transform: translateY(-1px); }
.auth-submit:disabled {
  background: var(--line);
  color: var(--ink-mute);
  cursor: wait;
  transform: none;
}
.auth-form-msg {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
}
.auth-form-msg.is-error {
  background: rgba(184, 54, 46, .10);
  color: var(--vermilion);
  border: 1px solid rgba(184, 54, 46, .35);
}
.auth-form-msg.is-info {
  background: rgba(34, 60, 120, .10);
  color: var(--indigo);
  border: 1px solid rgba(34, 60, 120, .35);
}

.auth-success {
  text-align: center;
  padding: 12px 4px;
  animation: fade-in .35s ease;
}
.auth-success-icon {
  font-size: 56px;
  margin-bottom: 12px;
}
.auth-success h2 {
  margin: 0 0 12px;
  font-size: 22px;
  color: var(--ink);
}
.auth-success p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 16px;
}
.auth-success-hint { font-size: 12.5px; color: var(--ink-mute); }
.auth-resend {
  background: none;
  border: none;
  color: var(--vermilion);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  padding: 0;
}
.auth-resend:hover { color: #94251f; }

.auth-foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  text-align: center;
}
.auth-foot-fineprint {
  font-size: 11.5px;
  color: var(--ink-mute);
  font-style: italic;
}
.auth-back-link {
  font-size: 13px;
  color: var(--ink-mute);
  text-decoration: none;
}
.auth-back-link:hover { color: var(--vermilion); text-decoration: none; }

/* Show-password toggle */
.auth-password-wrap {
  position: relative;
}
.auth-password-wrap .auth-input { width: 100%; padding-right: 44px; }
.auth-pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-mute);
  padding: 4px 8px;
  border-radius: 4px;
}
.auth-pw-toggle:hover { background: var(--bg-deep); }

/* Per-field error message */
.auth-field-err {
  font-size: 12px;
  color: var(--vermilion);
  margin: 4px 0 0;
  padding: 0;
}

/* Inline row with Forgot password link */
.auth-row-between {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.auth-link-small {
  font-size: 12.5px;
  color: var(--vermilion);
  text-decoration: none;
}
.auth-link-small:hover { text-decoration: underline; }

/* Alt-action — "Don't have an account? Sign up" line */
.auth-alt {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.auth-alt a {
  color: var(--vermilion);
  font-weight: 600;
  text-decoration: none;
  margin-left: 6px;
}
.auth-alt a:hover { text-decoration: underline; }

/* Password strength meter */
.auth-pw-strength {
  font-size: 11.5px;
  font-weight: 600;
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 3px solid var(--line);
}
.auth-pw-strength.v0 { color: var(--vermilion); border-left-color: var(--vermilion); }
.auth-pw-strength.v1 { color: #c25e2a; border-left-color: #c25e2a; }
.auth-pw-strength.v2 { color: #a87c1f; border-left-color: #a87c1f; }
.auth-pw-strength.v3 { color: #5b8b3f; border-left-color: #5b8b3f; }
.auth-pw-strength.v4 { color: #228b56; border-left-color: #228b56; }
.auth-pw-strength.v5 { color: #1d6e44; border-left-color: #1d6e44; }

/* Make .auth-submit work as a button-styled <a> too */
a.auth-submit, a.auth-submit-link {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

/* Google sign-in button */
.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
  padding: 11px 16px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.auth-google:hover {
  background: var(--bg-deep);
  border-color: var(--ink-mute);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
  transform: translateY(-1px);
}
.auth-google:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
}
.auth-google-icon { flex-shrink: 0; }

/* "or sign in with email" divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 8px;
  font-size: 11.5px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-divider span { white-space: nowrap; }

/* User chip in the TOC drawer */
.toc-user {
  border-top: 1px solid var(--line);
  padding: 12px 18px 10px;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  gap: 10px;
}
.toc-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--vermilion);
  color: #fffaf2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.toc-user-email {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toc-user-signout {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-mute);
  padding: 4px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: all .15s ease;
}
.toc-user-signout:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
}

/* ============================================================
   Progress Dashboard (progress.html)
   ============================================================ */
.pd-summary {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-bottom: 26px;
}
.pd-summary-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.pd-summary-num {
  font-family: var(--font-jp);
  font-size: 42px;
  font-weight: 900;
  color: var(--vermilion);
  line-height: 1;
  margin-bottom: 6px;
}
.pd-summary-num small {
  font-size: 18px;
  color: var(--ink-mute);
  font-weight: 500;
  font-family: inherit;
}
.pd-summary-label {
  font-size: 13px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.pd-summary-bar {
  height: 8px;
  background: var(--bg-deep);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.pd-summary-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--vermilion), #d65d54);
  transition: width .5s ease;
}
.pd-summary-pct {
  position: absolute;
  top: 22px; right: 26px;
  font-size: 28px;
  font-weight: 700;
  color: var(--vermilion);
}
.pd-summary-best {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
  margin-top: 4px;
}
.pd-summary-best.is-empty {
  color: var(--ink-mute);
  font-weight: 400;
  font-style: italic;
}

.pd-levels {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pd-level {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
  animation: fade-in .35s ease;
}
.pd-level-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pd-level-name {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
}
.pd-level-name:hover { text-decoration: none; }
.pd-level-code {
  font-family: var(--font-jp);
  font-size: 28px;
  font-weight: 900;
  color: var(--vermilion);
  line-height: 1;
}
.pd-level-name:hover .pd-level-code { text-decoration: underline; }
.pd-level-stats {
  font-size: 13px;
  color: var(--ink-mute);
}
.pd-continue {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: rgba(184, 54, 46, .08);
  border: 1px solid rgba(184, 54, 46, .35);
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--vermilion);
  transition: all .15s ease;
}
.pd-continue:hover {
  background: var(--vermilion);
  color: #fffaf2;
  text-decoration: none;
}
.pd-continue.is-done {
  background: rgba(34, 139, 86, .10);
  border-color: rgba(34, 139, 86, .35);
  color: #1d6e44;
  cursor: default;
}
.pd-continue.is-start {
  background: var(--bg-deep);
  border-color: var(--line);
  color: var(--ink-mute);
}
.pd-continue.is-start:hover {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #fffaf2;
}

.pd-level-bar {
  height: 5px;
  background: var(--bg-deep);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.pd-level-bar-fill {
  height: 100%;
  background: var(--vermilion);
  transition: width .4s ease;
}

.pd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.pd-pill:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  text-decoration: none;
}
.pd-pill-label { font-weight: 500; }
.pd-pill-count {
  font-size: 11.5px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.pd-pill.is-done {
  background: rgba(34, 139, 86, .08);
  border-color: rgba(34, 139, 86, .35);
  color: #1d6e44;
}
.pd-pill.is-done .pd-pill-count { color: #1d6e44; opacity: .8; }
.pd-pill.is-unavailable {
  opacity: 0.5;
  cursor: default;
}
.pd-pill.is-unavailable:hover { border-color: var(--line); color: var(--ink-mute); }
.pd-check { color: #228b56; font-weight: 700; font-size: 13px; }

@media (max-width: 720px) {
  .pd-summary { grid-template-columns: 1fr; }
  .pd-summary-pct { font-size: 22px; }
  .pd-level-head { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   Continue card — homepage "pick up where you left off"
   ============================================================ */
.continue-card-section {
  padding: 20px 0 0;
}
.continue-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.continue-card:hover {
  border-color: var(--vermilion);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.continue-card-inner { flex: 1; min-width: 0; }
.continue-card-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.continue-card-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vermilion);
  background: rgba(184,54,46,.10);
  padding: 3px 9px;
  border-radius: 999px;
}
.continue-card-tag.is-done {
  color: #1d6e44;
  background: rgba(34,139,86,.12);
}
.continue-card-level {
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.continue-card-text {
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.45;
}
.continue-card-text strong { color: var(--vermilion); }
.continue-card-bar {
  height: 6px;
  background: var(--bg-deep);
  border-radius: 999px;
  overflow: hidden;
}
.continue-card-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--vermilion), #d65d54);
  transition: width .4s ease;
}
.continue-card-arrow {
  font-size: 24px;
  color: var(--vermilion);
  transition: transform .15s ease;
}
.continue-card:hover .continue-card-arrow { transform: translateX(4px); }

/* ============================================================
   Per-item "Mark learned" checkbox (decorator on content pages)
   ============================================================ */
.prog-head {
  width: 32px;
  text-align: center;
  color: var(--ink-mute);
  vertical-align: middle;
}
.prog-check-cell {
  width: 32px;
  text-align: center;
  vertical-align: middle;
}
.prog-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.prog-check:hover {
  border-color: #228b56;
  color: #228b56;
  background: rgba(34,139,86,.06);
}
.prog-check.is-done {
  background: #228b56;
  border-color: #228b56;
  color: #fffaf2;
}
.prog-check.is-done:hover {
  background: #1d6e44;
  border-color: #1d6e44;
}
.prog-check:active { transform: scale(.92); }
/* As an inline chip on story / kaiwa cards */
.prog-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ============================================================
   Level Path Tracker — compact single-row strip
   ============================================================ */
.level-path-section {
  padding: 14px 0 6px;
  animation: fade-in .25s ease;
}
.lp-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.lp-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.lp-bar-track {
  flex: 1;
  height: 4px;
  background: var(--bg-deep);
  border-radius: 999px;
  overflow: hidden;
}
.lp-bar-fill {
  height: 100%;
  background: var(--vermilion);
  transition: width .4s ease;
}
.lp-continue {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(184, 54, 46, .08);
  border: 1px solid rgba(184, 54, 46, .35);
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  transition: background .15s ease, border-color .15s ease;
}
.lp-continue:hover {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #fffaf2;
  text-decoration: none;
}
.lp-continue:hover .lp-continue-tag,
.lp-continue:hover .lp-continue-label { color: #fffaf2; }
.lp-continue-tag { color: var(--vermilion); font-weight: 700; }
.lp-continue-label { color: var(--ink); font-weight: 600; }
.lp-continue.is-done {
  background: rgba(34, 139, 86, .10);
  border-color: rgba(34, 139, 86, .35);
  color: #1d6e44;
  cursor: default;
}
.lp-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lp-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lp-step:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  text-decoration: none;
}
.lp-step-label { font-weight: 500; }
.lp-step-count {
  font-size: 11.5px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.lp-step:hover .lp-step-count { color: var(--vermilion); opacity: .8; }
.lp-step.is-done {
  background: rgba(34, 139, 86, .08);
  border-color: rgba(34, 139, 86, .35);
  color: #1d6e44;
}
.lp-step.is-done:hover { border-color: #228b56; }
.lp-step.is-done .lp-step-count { color: #1d6e44; opacity: .8; }
.lp-check {
  color: #228b56;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.lp-step.is-unavailable {
  opacity: 0.5;
  cursor: default;
}
.lp-step.is-unavailable:hover {
  border-color: var(--line);
  color: var(--ink-mute);
}

/* ============================================================
   Floating Index (injected by toc.js)
   Tiny pill in the bottom-right opens a simple sidebar of text links.
   ============================================================ */
.toc-fab {
  position: fixed;
  /* Top-left trigger. Sits clear of the sticky .topbar (z-index 50, ~64px tall)
     so it never overlaps the brand logo; pages without a topbar are unaffected
     since the FAB is a body-level floating element. */
  left: 20px;
  top: 76px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 12px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.toc-fab:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.toc-fab svg { opacity: .7; }
.toc-fab:hover svg { opacity: 1; }

.toc-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 16, 12, .28);
  z-index: 9100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.toc-panel {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 320px;
  max-width: 92vw;
  background: var(--surface);
  border-right: 1px solid var(--line);
  z-index: 9200;
  display: flex;
  flex-direction: column;
  /* Off-screen to the LEFT; body.toc-open slides it in to translateX(0). */
  transform: translateX(-100%);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
body.toc-open .toc-overlay { opacity: 1; pointer-events: auto; }
body.toc-open .toc-panel   { transform: translateX(0); }

.toc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
}
.toc-panel-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.toc-panel-close {
  background: transparent;
  border: none;
  color: var(--ink-mute);
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.toc-panel-close:hover { background: var(--bg-deep); color: var(--ink); }

.toc-filter {
  margin: 0 18px 6px;
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-deep);
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease;
}
.toc-filter:focus { border-color: var(--vermilion); }
.toc-filter::placeholder { color: var(--ink-mute); }

.toc-groups {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0 24px;
  scrollbar-width: thin;
}
.toc-groups::-webkit-scrollbar { width: 6px; }
.toc-groups::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.toc-group { padding: 6px 0; }
.toc-group-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  padding: 8px 18px 4px;
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-list li { margin: 0; }
.toc-link {
  display: block;
  padding: 6px 18px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
  transition: background .12s ease, color .12s ease, padding-left .12s ease;
}
.toc-link:hover {
  background: var(--bg-deep);
  color: var(--vermilion);
  padding-left: 22px;
  text-decoration: none;
}

.toc-empty {
  padding: 18px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
  font-style: italic;
}

.toc-settings {
  border-top: 1px solid var(--line);
  padding: 12px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-deep);
}
.toc-settings-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.toc-settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.toc-settings-btn:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  background: var(--surface);
}
.toc-settings-btn.is-danger:hover {
  border-color: #b8362e;
  background: rgba(184, 54, 46, .08);
}
.toc-settings-import {
  cursor: pointer;
}

/* Hidden-attribute overrides (browser default ties on specificity) */
.toc-link[hidden],
.toc-group[hidden],
.toc-list li[hidden] { display: none !important; }

@media (max-width: 600px) {
  .toc-fab { left: 14px; top: 70px; padding: 8px 12px; }
  .toc-fab-label { display: none; }
  .toc-fab { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .toc-panel { width: 100vw; }
}

/* ============================================================
   Index drawer redesign — calmer FAB, roomier topics, Ask Bri
   launcher, tucked-away identity + progress footer.
   ============================================================ */
.toc-fab { box-shadow: var(--shadow-sm); }
.toc-fab:hover { box-shadow: var(--shadow); }

.toc-group { padding: 8px 0; }
.toc-group + .toc-group { border-top: 1px solid var(--line); }
.toc-group-label { padding: 12px 18px 6px; }
.toc-link { padding: 7px 18px; }

/* Ask Bri launcher (pinned to the top of the drawer) */
.toc-askbri-launcher {
  display: flex; align-items: center; gap: 11px;
  margin: 10px 14px 12px; padding: 11px 14px;
  border: 1px solid var(--vermilion); border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface), var(--bg-deep));
  color: var(--vermilion); cursor: pointer; font: inherit; text-align: left;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .12s ease;
}
.toc-askbri-launcher:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.toc-askbri-spark { display: inline-flex; flex: 0 0 auto; }
.toc-askbri-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.toc-askbri-title { font-weight: 700; font-size: 14px; }
.toc-askbri-sub { font-size: 11px; color: var(--ink-mute); font-weight: 500; }
.toc-askbri-arrow { font-size: 16px; opacity: .75; flex: 0 0 auto; }

/* Identity card (lives below the scroll region) */
.toc-account-card { border-top: 1px solid var(--line); background: var(--bg-deep); padding: 12px 18px; }
.toc-account-id { display: flex; align-items: center; gap: 10px; }
.toc-account-meta { min-width: 0; flex: 1; }
.toc-account-role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--vermilion); margin-top: 2px; }
.toc-account-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.toc-account-links .toc-admin-link { padding: 0; font-size: 13px; }
/* The Admin link must honor the hidden attribute — .toc-admin-link sets
   display:block, which was overriding [hidden] and leaking the Admin portal
   link to non-admin users. */
.toc-admin-link[hidden] { display: none !important; }

/* ── Sidebar toggle button — icon-only, morphs hamburger ↔ ✕, opens AND
   closes the drawer (the in-panel header/close was removed). ───────────── */
.toc-fab {
  width: 42px; height: 42px; padding: 0; gap: 0;
  display: inline-grid; place-items: center;
  z-index: 9500;                 /* above the drawer (9200) so it also closes */
  transition: top .22s cubic-bezier(.2,.8,.2,1), left .22s cubic-bezier(.2,.8,.2,1),
              box-shadow .15s ease, background .15s ease;
}
.toc-fab-label { display: none; }
.toc-fab-ico { display: none; color: var(--vermilion); }
.toc-fab .toc-fab-open { display: block; }
body.toc-open .toc-fab .toc-fab-open { display: none; }
body.toc-open .toc-fab .toc-fab-close { display: block; }
/* When open, slide into the drawer's top-left corner as the close control. */
body.toc-open .toc-fab { left: 16px; top: 14px; }
/* Top room in the drawer for the corner toggle. */
.toc-panel { padding-top: 56px; }
@media (max-width: 600px) { body.toc-open .toc-fab { left: 14px; top: 12px; } }

/* Collapsible footer (progress controls + sign-out) */
.toc-footer { border-top: 1px solid var(--line); background: var(--bg-deep); }
.toc-footer-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute);
}
.toc-footer-summary::-webkit-details-marker { display: none; }
.toc-footer[open] .toc-footer-chev { transform: rotate(180deg); }
.toc-footer-chev { transition: transform .15s ease; }
.toc-footer-body { display: flex; flex-direction: column; gap: 6px; padding: 0 18px 14px; }

/* ============================================================
   Ask Bri — ChatGPT-style chat slide-over (enters from the right)
   ============================================================ */
.askbri-overlay {
  position: fixed; inset: 0; background: rgba(20,16,12,.34);
  z-index: 9300; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.askbri-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 96vw;
  background: var(--surface); border-left: 1px solid var(--line);
  z-index: 9400; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .24s cubic-bezier(.2,.8,.2,1);
  box-shadow: var(--shadow-lg);
}
body.askbri-open .askbri-overlay { opacity: 1; pointer-events: auto; }
body.askbri-open .askbri-panel { transform: translateX(0); }

.askbri-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--line); position: relative; z-index: 3; background: var(--surface); }
.askbri-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.askbri-hanko { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; background: var(--vermilion); color: #fffaf2; font-family: var(--font-jp); font-weight: 700; font-size: 14px; border-radius: 8px; }
.askbri-title { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.askbri-icon-btn { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.askbri-icon-btn:hover { background: var(--bg-deep); color: var(--ink); }
.askbri-new { font-size: 12px; font-weight: 600; color: var(--vermilion); background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 10px; cursor: pointer; flex: 0 0 auto; }
.askbri-new:hover { border-color: var(--vermilion); }

.askbri-thread { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.askbri-msg { display: flex; flex-direction: column; }
.askbri-msg.is-user { align-items: flex-end; }
.askbri-msg.is-bri { align-items: flex-start; }
.askbri-bubble { max-width: 86%; padding: 10px 13px; border-radius: var(--r); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.askbri-msg.is-user .askbri-bubble { background: var(--vermilion); color: #fffaf2; border-bottom-right-radius: var(--r-sm); }
.askbri-msg.is-bri .askbri-bubble { background: var(--bg-deep); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: var(--r-sm); }
.askbri-bubble.is-error { background: rgba(184,54,46,.07); border-color: rgba(184,54,46,.3); color: var(--vermilion); }
.askbri-bubble[lang="ja"] { font-family: var(--font-jp); line-height: 1.7; }
.askbri-bubble strong { font-weight: 700; }

.askbri-lang { display: flex; gap: 6px; margin-top: 6px; }
.askbri-lang-btn { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; border: 1px solid var(--line); background: transparent; color: var(--ink-mute); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.askbri-lang-btn.is-active { border-color: var(--vermilion); color: var(--vermilion); }

.askbri-typing { display: flex; gap: 4px; padding: 0 20px 8px; }
.askbri-typing[hidden] { display: none; }
.askbri-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute); animation: askbri-bounce 1s infinite; }
.askbri-typing span:nth-child(2) { animation-delay: .15s; }
.askbri-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes askbri-bounce { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: .9; } }

.askbri-composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg-deep); }
.askbri-input { flex: 1; resize: none; max-height: 120px; font: inherit; font-size: 13.5px; line-height: 1.4; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); outline: none; }
.askbri-input:focus { border-color: var(--vermilion); }
.askbri-send { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: none; background: var(--vermilion); color: #fffaf2; cursor: pointer; display: grid; place-items: center; }
.askbri-send:hover { background: var(--vermilion-soft, #c95048); }
.askbri-send:disabled { opacity: .5; cursor: default; }

.askbri-history { position: absolute; left: 0; right: 0; top: 54px; bottom: 0; background: var(--surface); z-index: 2; overflow-y: auto; padding: 6px 0; }
.askbri-history[hidden] { display: none; }
.askbri-history-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); padding: 10px 18px 6px; }
.askbri-history-list { list-style: none; margin: 0; padding: 0; }
.askbri-history-item { padding: 10px 18px; font-size: 13px; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.askbri-history-item:hover { background: var(--bg-deep); }
.askbri-history-item.is-active { color: var(--vermilion); font-weight: 600; }
.askbri-history-empty { padding: 18px; color: var(--ink-mute); font-size: 13px; text-align: center; }
.askbri-history-empty[hidden] { display: none; }

@media (max-width: 600px) { .askbri-panel { width: 100vw; } }

/* ============================================================
   Topic Index (legacy homepage inline — kept for any remnants)
   ============================================================ */
.topic-index {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 26px 18px;
  box-shadow: var(--shadow-sm);
}
.topic-index-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.topic-index-head h2 {
  margin: 0;
  font-size: 22px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.topic-index-head h2 .jp {
  font-size: 16px;
  color: var(--vermilion);
  font-weight: 600;
}
.topic-index-filter {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  font: inherit;
  font-size: 13.5px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.topic-index-filter:focus {
  border-color: var(--vermilion);
  background: var(--surface);
}
.topic-index-filter::placeholder { color: var(--ink-mute); }
.topic-index-count {
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}

.topic-index-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.topic-index-group { animation: fade-in .25s ease; }
.topic-index-group-head {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.topic-index-group-head .topic-index-group-sub {
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute);
  font-style: italic;
  margin-left: 6px;
}
.topic-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 10px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
/* The browser's default [hidden] { display: none } ties on specificity with
   .topic-pill above, so the later rule (ours) wins and hidden pills still
   show. Force display:none for hidden index elements. */
.topic-pill[hidden],
.topic-jlpt-row[hidden],
.topic-index-group[hidden] { display: none !important; }
.topic-pill:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  background: var(--surface);
  transform: translateY(-1px);
  text-decoration: none;
}
.topic-pill-icon {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  color: var(--vermilion);
  width: 18px;
  text-align: center;
  display: inline-block;
}

/* JLPT-level rows — each row has a leading badge then its pills */
.topic-jlpt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px dashed transparent;
}
.topic-jlpt-row + .topic-jlpt-row { border-top-color: var(--line); }
.topic-jlpt-label {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 15px;
  color: var(--vermilion);
  background: rgba(184, 54, 46, 0.08);
  padding: 4px 11px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

.topic-index-empty {
  text-align: center;
  padding: 18px;
  color: var(--ink-mute);
  font-style: italic;
}
.topic-index-clear {
  margin-left: 6px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--vermilion);
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.topic-index-clear:hover { border-color: var(--vermilion); background: var(--bg-deep); }

/* Mobile */
@media (max-width: 700px) {
  .topic-index { padding: 18px 14px 14px; }
  .topic-index-head { flex-direction: column; align-items: stretch; }
  .topic-index-filter { max-width: 100%; }
  .topic-jlpt-row { flex-direction: row; flex-wrap: wrap; }
}

/* ============================================================
   Category cards (level pages)
   ============================================================ */
.categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.cat-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 22px 20px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}
.cat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--vermilion);
  color: var(--ink); text-decoration: none;
}
.cat-card.disabled {
  pointer-events: none;
  background: transparent;
  border-style: dashed;
  opacity: 0.7;
}
.cat-card .cat-jp {
  font-family: var(--font-jp);
  font-size: 22px;
  color: var(--indigo);
  margin: 0 0 4px;
  letter-spacing: 0.04em;
}
.cat-card .cat-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
}
.cat-card .cat-desc {
  font-size: 13px; color: var(--ink-mute);
  margin: 0;
}
.cat-card .cat-footer {
  margin-top: 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
}
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.badge.available { background: rgba(184,54,46,.08); color: var(--vermilion); }
.badge.soon { background: var(--bg-deep); color: var(--ink-mute); }

/* ============================================================
   Vocabulary browser
   ============================================================ */
.controls {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.search-input {
  flex: 1 1 240px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-input:focus {
  border-color: var(--vermilion);
  box-shadow: 0 0 0 3px rgba(184,54,46,.12);
}
.filter-group { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-btn {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-soft);
  font-family: inherit; font-size: 13px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all .15s ease;
}
.filter-btn:hover { border-color: var(--vermilion); color: var(--vermilion); }
.filter-btn.active {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #fffaf2;
}
/* Subtle count badge inside multi-select filter pills */
.filter-btn .count {
  opacity: 0.65;
  font-size: 11px;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}
.filter-btn.active .count { opacity: 0.85; }
.download-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--indigo); color: #fffaf2;
  border: 0; padding: 9px 14px;
  border-radius: var(--r-sm);
  font-family: inherit; font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.download-btn:hover { background: var(--indigo-soft); color: #fffaf2; text-decoration: none; transform: translateY(-1px); }

/* Standalone download row (used on kaiwa + stories pages where there's no .controls strip) */
.download-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.results-meta {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-mute);
}

table.vocab {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
table.vocab thead th {
  background: var(--bg-deep);
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
table.vocab tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: middle;
}
table.vocab tbody tr:last-child td { border-bottom: 0; }
table.vocab tbody tr:hover { background: rgba(184,54,46,.03); }

td.col-num { color: var(--ink-mute); font-variant-numeric: tabular-nums; width: 50px; }
td.col-kanji { font-family: var(--font-jp); font-size: 17px; color: var(--ink); font-weight: 600; min-width: 90px; }
td.col-kana { font-family: var(--font-jp); font-size: 15px; color: var(--indigo); min-width: 110px; }
td.col-romaji { color: var(--ink-soft); font-style: italic; min-width: 100px; }
td.col-meaning { color: var(--ink); }
td.col-pos {
  font-size: 11px; color: var(--ink-mute);
  letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-mute);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  margin-top: 18px;
}

/* ============================================================
   Footer
   ============================================================ */
footer.site {
  border-top: 1px solid var(--line);
  margin-top: 80px;
  padding: 28px 0 40px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-mute);
}
footer.site .stamp {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--vermilion);
  border-radius: var(--r-sm);
  color: var(--vermilion);
  font-family: var(--font-jp);
  font-size: 12px;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}

/* ============================================================
   Responsive tweaks
   ============================================================ */
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .hero { padding: 50px 0 30px; }
  table.vocab thead { display: none; }
  table.vocab tbody td { display: block; padding: 6px 14px; }
  table.vocab tbody tr { display: block; padding: 12px 0; }
  td.col-num::before { content: "#"; color: var(--ink-mute); }
  td.col-pos { display: inline-block !important; background: var(--bg-deep); padding: 2px 8px; border-radius: 4px; margin-bottom: 4px; }
}

/* ============================================================
   Study CTA (on vocabulary pages)
   ============================================================ */
.study-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  background: linear-gradient(135deg, rgba(247,216,224,.55) 0%, rgba(184,54,46,.06) 100%);
  border: 1px solid var(--sakura-deep);
  border-radius: var(--r);
  padding: 18px 24px;
  margin-bottom: 22px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.study-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--vermilion);
  color: var(--ink);
  text-decoration: none;
}
.study-cta-text { display: flex; flex-direction: column; gap: 4px; }
.study-cta-jp {
  font-family: var(--font-jp);
  font-size: 11px;
  color: var(--vermilion);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.study-cta-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 2px 0 0;
}
.study-cta-desc { font-size: 13px; color: var(--ink-soft); }
.study-cta-arrow {
  font-size: 28px;
  color: var(--vermilion);
  flex-shrink: 0;
  line-height: 1;
  transition: transform .18s ease;
}
.study-cta:hover .study-cta-arrow { transform: translateX(4px); }

/* ============================================================
   Flashcards
   ============================================================ */
.deck-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.deck-tab {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: inherit; font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.deck-tab:hover { border-color: var(--vermilion); color: var(--vermilion); }
.deck-tab.active {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #fffaf2;
}
.deck-tab .count {
  background: rgba(0,0,0,.08);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.deck-tab.active .count { background: rgba(255,250,242,.25); color: #fffaf2; }

.flashcard-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px;
}
.direction-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.direction-toggle button {
  background: transparent; border: 0;
  padding: 7px 14px;
  font-family: inherit; font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}
.direction-toggle button.active {
  background: var(--indigo);
  color: #fffaf2;
}
.icon-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 7px 12px;
  border-radius: var(--r-sm);
  font-family: inherit; font-size: 13px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s ease;
}
.icon-btn:hover { border-color: var(--vermilion); color: var(--vermilion); }

.flashcard {
  perspective: 1400px;
  max-width: 640px;
  margin: 8px auto 0;
}
.flashcard-inner {
  position: relative;
  width: 100%;
  height: 360px;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;   /* iOS Safari needs the prefix to keep the 3D context */
  cursor: pointer;
}
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute; inset: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 50px 30px 40px;
  /* NO overflow:hidden here — on iOS Safari, overflow:hidden on a backface-hidden
     3D face flattens the layer and defeats backface-visibility, so the flip shows
     the back face mirrored. The corner gradient is clipped via border-radius below. */
  /* iOS-robust face hiding: backface-visibility ALONE is unreliable on iOS Safari
     (it can still paint the away-facing side, mirrored). So ALSO toggle opacity —
     the away-facing face is transparent, swapped instantly at the flip's midpoint
     (half of the 0.55s turn) when the card is edge-on, so the swap is invisible.
     This holds even if iOS flattens the 3D context: at 90° the face squishes to
     zero width in 2D too, and the presented face ends upright either way. */
  transition: opacity 0s linear 0.275s;
}
.flashcard-face.front { opacity: 1; }
.flashcard-face.back  { transform: rotateY(180deg); opacity: 0; }
.flashcard.flipped .flashcard-face.front { opacity: 0; }
.flashcard.flipped .flashcard-face.back  { opacity: 1; }
.flashcard-face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(ellipse 400px 300px at 100% 0%, rgba(184,54,46,.04), transparent 60%),
    radial-gradient(ellipse 300px 250px at 0% 100%, rgba(29,53,87,.04), transparent 60%);
  pointer-events: none;
}
.flashcard-face > * { position: relative; z-index: 1; }

.flashcard-front-kanji {
  font-family: var(--font-jp);
  font-size: clamp(56px, 9vw, 92px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-align: center;
}
.flashcard-front-kana {
  font-family: var(--font-jp);
  font-size: 22px;
  color: var(--indigo);
  margin-top: 14px;
  letter-spacing: 0.04em;
}
.flashcard-back-meaning {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  margin-bottom: 22px;
  line-height: 1.25;
}
.flashcard-back-detail {
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
  font-size: 14px; color: var(--ink-mute);
}
.bd-kanji { font-family: var(--font-jp); font-size: 22px; color: var(--ink); font-weight: 600; }
.bd-kana  { font-family: var(--font-jp); font-size: 15px; color: var(--indigo); }
.bd-romaji { font-style: italic; color: var(--ink-soft); }

.flashcard-pos-tag {
  position: absolute;
  top: 16px; left: 18px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--bg-deep);
  padding: 3px 10px;
  border-radius: 999px;
  z-index: 2;
}
.flashcard-bookmark {
  position: absolute;
  top: 12px; right: 14px;
  background: transparent; border: 0;
  cursor: pointer; padding: 6px;
  color: var(--ink-mute);
  transition: color .15s ease, transform .15s ease;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.flashcard-bookmark:hover { color: var(--vermilion); transform: scale(1.1); }
.flashcard-bookmark.active { color: var(--vermilion); }
.flashcard-hint {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px; color: var(--ink-mute);
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.flashcard-num {
  position: absolute;
  bottom: 14px; right: 18px;
  font-size: 12px; color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

.flashcard-answers {
  display: flex; justify-content: center; gap: 14px;
  margin-top: 26px; flex-wrap: wrap;
}
.answer-btn {
  font-family: inherit; font-size: 14px; font-weight: 500;
  padding: 11px 24px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink);
}
.answer-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.answer-btn.good {
  background: rgba(184,137,58,.1);
  border-color: var(--gold);
  color: var(--gold);
}
.answer-btn.good:hover { background: var(--gold); color: #fffaf2; }
.answer-btn.bad {
  background: rgba(184,54,46,.06);
  border-color: var(--vermilion);
  color: var(--vermilion);
}
.answer-btn.bad:hover { background: var(--vermilion); color: #fffaf2; }

.flashcard-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px;
  font-size: 13px; color: var(--ink-mute);
  max-width: 640px; margin-left: auto; margin-right: auto;
}
.flashcard-nav button {
  border: 0; background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit; font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 6px;
}
.flashcard-nav button:hover { background: var(--bg-deep); color: var(--ink); }

.deck-complete {
  text-align: center;
  padding: 60px 24px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  max-width: 640px;
  margin: 8px auto 0;
}
.deck-complete h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--indigo);
  margin: 0 0 8px;
}
.deck-complete p { color: var(--ink-mute); margin: 0; font-size: 14px; }

.keyboard-hint kbd {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-soft);
  margin: 0 2px;
}

@media (max-width: 640px) {
  .study-cta { flex-direction: row; padding: 16px 18px; }
  .study-cta-arrow { font-size: 22px; }
  .flashcard-inner { height: 320px; }
  .flashcard-face { padding: 40px 22px 36px; }
  .flashcard-answers { flex-direction: row; }
  .answer-btn { padding: 10px 18px; font-size: 13px; }
}

/* ============================================================
   Kanji browser
   ============================================================ */
.kanji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.kanji-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 12px 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-align: center;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  color: var(--ink);
}
.kanji-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--vermilion);
}
.kanji-card.active {
  border-color: var(--vermilion);
  background: rgba(184,54,46,.04);
  box-shadow: var(--shadow-sm);
}
.kanji-char {
  font-family: var(--font-jp);
  font-size: 44px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  margin: 4px 0 6px;
}
.kanji-meaning {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.3;
  min-height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.kanji-readings-hint {
  font-family: var(--font-jp);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.kanji-strokes-badge {
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--font-jp);
  font-size: 10px;
  color: var(--ink-mute);
  background: var(--bg-deep);
  padding: 1px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.kanji-detail {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 32px 30px;
  box-shadow: var(--shadow);
  display: none;
  position: relative;
}
.kanji-detail.open { display: block; }
.kanji-detail-header {
  display: flex; align-items: flex-start; gap: 28px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}
.kanji-detail-char {
  font-family: var(--font-jp);
  font-size: 92px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.kanji-detail-info { flex: 1; min-width: 0; }
.kanji-detail-meaning {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.3;
}
.kanji-detail-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-soft);
  margin-bottom: 18px;
}
.kanji-detail-meta span strong {
  color: var(--ink-mute);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  margin-right: 4px;
}
.kanji-readings { display: flex; flex-direction: column; gap: 8px; }
.kanji-readings-row {
  display: flex; align-items: baseline; gap: 14px;
}
.kanji-readings-label {
  font-family: var(--font-jp);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--vermilion);
  width: 72px;
  flex-shrink: 0;
  border-right: 2px solid var(--vermilion);
  padding-right: 10px;
  text-align: right;
}
.kanji-readings-values {
  font-family: var(--font-jp);
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}

.kanji-detail-section { margin-top: 22px; }
.kanji-detail-section h4 {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--indigo);
  margin: 0 0 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.compounds-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.compound-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.compound-word {
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.compound-kana {
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--indigo);
  margin-left: 6px;
}
.compound-meaning {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 3px;
  line-height: 1.4;
}
.compound-level {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.06em;
  background: rgba(184,54,46,.08);
  color: var(--vermilion);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
  font-weight: 500;
}
.no-content {
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
  margin: 0;
}
.detail-close {
  position: absolute;
  top: 16px; right: 18px;
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  font-size: 24px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  line-height: 1;
  transition: all .15s ease;
}
.detail-close:hover { background: var(--bg-deep); color: var(--ink); }

/* ============================================================
   Text-to-speech buttons (kanji detail readings + compounds)
   ============================================================ */
.tts-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--vermilion);
  padding: 1px 6px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  vertical-align: middle;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
  line-height: 0;
}
.tts-btn:hover {
  background: rgba(184, 54, 46, .08);
  border-color: var(--vermilion);
}
.tts-btn:active { transform: scale(0.92); }
.tts-btn svg { display: block; }

/* Compound items get a slightly different button placement */
.compound-item .tts-btn {
  margin-left: 6px;
  border-color: transparent;
}
.compound-item:hover .tts-btn { border-color: var(--line); }

/* Individual reading wrapper so the button stays with its reading */
.reading-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.reading-sep {
  color: var(--ink-mute);
  margin: 0 6px;
  user-select: none;
}

/* Big kanji headline — its TTS button sits to its right, vertically centred */
.kanji-detail-char {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kanji-detail-char .tts-btn {
  font-size: 18px;
  padding: 4px 10px;
  border-color: var(--line);
}
.kanji-detail-char .tts-btn svg { width: 16px; height: 16px; }

/* Slow-speech toggle — pill living in the kanji-detail-meta row */
.tts-slow-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color .15s ease, color .15s ease;
}
.tts-slow-toggle:hover { border-color: var(--vermilion); color: var(--vermilion); }

/* Voice picker — sits next to the slow toggle in TTS control strips */
.tts-voice-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  user-select: none;
  padding: 2px 4px 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color .15s ease;
  margin-right: 8px;
}
.tts-voice-picker:hover { border-color: var(--vermilion); }
.tts-voice-picker .tts-voice-label { color: var(--ink-mute); }
.tts-voice-picker .tts-voice-select {
  border: none;
  background: transparent;
  font: inherit;
  color: var(--ink);
  padding: 2px 4px;
  cursor: pointer;
  max-width: 200px;
  outline: none;
}
.tts-voice-picker .tts-voice-select:focus { color: var(--vermilion); }
.tts-voice-picker.no-voices {
  color: var(--ink-mute);
  font-style: italic;
  cursor: not-allowed;
  padding: 3px 10px;
}
.tts-slow-toggle input[type="checkbox"] {
  accent-color: var(--vermilion);
  margin: 0;
  cursor: pointer;
}
.tts-slow-toggle svg { color: var(--ink-mute); }
.tts-slow-toggle:hover svg { color: var(--vermilion); }

/* ── "Play all" button (kaiwa + stories toolbars) ───────────────────── */
.tts-play-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--vermilion);
  color: #fffaf2;
  border: 1px solid var(--vermilion);
  padding: 5px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
  line-height: 1.2;
}
.tts-play-all:hover { background: var(--vermilion-soft); }
.tts-play-all:active { transform: scale(0.97); }
.tts-play-all .tts-play-all-icon-stop { display: none; }
.tts-play-all.playing .tts-play-all-icon-play { display: none; }
.tts-play-all.playing .tts-play-all-icon-stop { display: block; }
.tts-play-all.playing { background: var(--ink-soft); border-color: var(--ink-soft); }
.tts-play-all.playing:hover { background: var(--ink); }

/* ── Kana chart (hiragana / katakana foundation pages) ─────────────── */
.kana-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}
.kana-controls-inner {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 14px;
}
.kana-controls-hint {
  font-size: 12px;
  color: var(--ink-mute);
}
.kana-section-heading {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--indigo);
  margin: 26px 0 12px;
  letter-spacing: 0.04em;
}
.kana-section-heading span {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink-mute);
  margin-left: 8px;
  letter-spacing: 0.12em;
}
.kana-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 6px;
}
.kana-grid-yoon {
  grid-template-columns: repeat(3, 1fr);
  max-width: 460px;
}
.kana-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 8px 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  font-family: inherit;
  color: inherit;
  outline: none;
}
.kana-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--vermilion);
}
.kana-cell:active { transform: translateY(0) scale(.97); }
.kana-cell-empty {
  background: transparent;
  border: 1px dashed var(--line);
  cursor: default;
  pointer-events: none;
  opacity: 0.35;
}
.kana-glyph {
  font-family: var(--font-jp);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.kana-cell:hover .kana-glyph { color: var(--vermilion); }
.kana-romaji {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-style: italic;
}
@media (max-width: 640px) {
  .kana-grid { gap: 6px; grid-template-columns: repeat(5, 1fr); }
  .kana-glyph { font-size: 24px; }
  .kana-cell { padding: 10px 4px 8px; }
}

/* Foundation-card variant of the level-card on the home page */
.level-card.foundation-card .level-code {
  font-family: var(--font-jp);
  font-size: 48px;
}
.level-card.foundation-card .ideo {
  font-family: var(--font-jp);
  font-size: 78px;
}

/* Active-line highlight while Play-all is running */
.kaiwa-line.is-speaking .kaiwa-bubble {
  outline: 2px solid var(--vermilion);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(184, 54, 46, .08), var(--shadow);
}
.translation-row.is-speaking {
  background: rgba(184, 54, 46, .07);
  border-radius: 6px;
}
.story-sentence.is-speaking {
  background-color: rgba(184, 54, 46, .12);
  box-shadow: inset 0 0 0 2px rgba(184, 54, 46, .25);
}

.data-attribution {
  margin-top: 30px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.data-attribution a { color: var(--ink-soft); }

/* Kanji flashcard face — readings layout on back */
.kanji-fc-readings {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px;
  margin-top: 14px;
  text-align: center;
}
.kanji-fc-readings .label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermilion);
  margin-right: 8px;
}
.kanji-fc-readings .vals {
  font-family: var(--font-jp);
  color: var(--ink);
}
.kanji-fc-meta {
  margin-top: 14px;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .kanji-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .kanji-char { font-size: 38px; }
  .kanji-detail { padding: 22px 18px; }
  .kanji-detail-header { flex-direction: column; gap: 14px; align-items: flex-start; }
  .kanji-detail-char { font-size: 72px; }
  .kanji-readings-label { width: 56px; }
}

/* ============================================================
   Kanji split (master-detail) layout
   On n5-kanji.html: the grid is full-width by default; clicking a
   kanji slides the detail pane in on the right. Closing it returns
   to the full-width grid.
   ============================================================ */
.kanji-split {
  display: grid;
  grid-template-columns: 1fr;            /* full-width grid by default */
  gap: 24px;
  align-items: start;
  margin-top: 6px;
  transition: grid-template-columns 0.25s ease;
}
.kanji-split-left { min-width: 0; }
.kanji-split-right { display: none; }    /* hidden until activated */

/* When a kanji is selected, switch to two columns and reveal the right pane */
.kanji-split.active {
  grid-template-columns: minmax(300px, 380px) 1fr;
}
.kanji-split.active .kanji-split-right {
  display: block;
  position: sticky;
  top: 78px;                              /* clears the sticky topbar */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  min-width: 0;
}
.kanji-split.active .kanji-split-right::-webkit-scrollbar { width: 8px; }
.kanji-split.active .kanji-split-right::-webkit-scrollbar-track { background: transparent; }
.kanji-split.active .kanji-split-right::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.kanji-split.active .kanji-split-right::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }

/* The inner .kanji-detail is always block when present inside the right pane —
   the parent .kanji-split-right controls overall visibility. */
.kanji-split .kanji-detail {
  display: block;
  margin-top: 0;
}

/* In a narrower right pane, stack the kanji header + use 2-col compounds */
@media (max-width: 1180px) {
  .kanji-split.active .kanji-detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .kanji-split.active .kanji-detail-char { font-size: 76px; }
  .kanji-split.active .compounds-list { grid-template-columns: 1fr 1fr; }
}

/* On narrow viewports the detail opens as a centered pop-up (dimmed backdrop +
   card) instead of stacking below the list — so you don't have to scroll down to
   it every time. Mirrors the particles-page modal; reuses its pm-fade/pm-slide. */
@media (max-width: 900px) {
  .kanji-split.active {
    grid-template-columns: 1fr;
  }
  .kanji-split.active .kanji-split-right {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    max-height: none;
    overflow: visible;
    background: rgba(30, 25, 18, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: pm-fade .18s ease-out;
  }
  .kanji-split.active .kanji-split-right > .grammar-detail,
  .kanji-split.active .kanji-split-right > .kanji-detail {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    max-height: calc(100dvh - 32px);
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-lg);
    animation: pm-slide .22s ease-out;
  }
  html.gd-modal-open, html.gd-modal-open body { overflow: hidden; }
}

/* ============================================================
   Grammar browser
   Reuses the .kanji-split master-detail container; card + detail
   styling tuned for grammar pattern content (no big kanji char).
   ============================================================ */
.grammar-list {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.grammar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: var(--ink);
  display: flex; flex-direction: column;
  gap: 4px;
}
.grammar-card:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--vermilion);
}
.grammar-card.active {
  border-color: var(--vermilion);
  background: rgba(184,54,46,.04);
  box-shadow: var(--shadow-sm);
}
.grammar-card-title {
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.grammar-card-meaning {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}
.grammar-card-cat {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 2px;
}

/* Detail panel for a single grammar entry */
.grammar-detail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 32px 30px;
  box-shadow: var(--shadow);
  display: none;
  position: relative;
}
.grammar-detail.open { display: block; }

.grammar-detail-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 22px;
}
.grammar-detail-title {
  font-family: var(--font-jp);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0 0 6px;
}
.grammar-detail-romaji {
  font-style: italic;
  color: var(--ink-mute);
  font-size: 13px;
  margin-bottom: 8px;
}
.grammar-detail-meaning {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--indigo);
  font-weight: 600;
}
.grammar-detail-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
}
.grammar-detail-meta .badge-cat {
  font-size: 11px;
  letter-spacing: 0.06em;
  background: rgba(184,54,46,.08);
  color: var(--vermilion);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 500;
}
.grammar-pattern-box {
  background: var(--bg-deep);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink-soft);
  margin: 18px 0;
}
.grammar-pattern-box .label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 4px;
}

.grammar-explanation {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 18px;
}

.grammar-section {
  margin-top: 22px;
}
.grammar-section h4 {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--indigo);
  margin: 0 0 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.grammar-examples {
  display: flex; flex-direction: column;
  gap: 12px;
}
.grammar-example {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--vermilion);
  border-radius: var(--r-sm);
  padding: 12px 16px;
}
.grammar-example-jp {
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.grammar-example-kana {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--indigo);
  margin-top: 4px;
}
.grammar-example-en {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
  font-style: italic;
}
.grammar-notes {
  background: rgba(184,137,58,.06);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.grammar-notes::before {
  content: "Note · ";
  font-family: var(--font-jp);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* The grammar pattern substring within an example sentence — color only */
.g-highlight {
  color: var(--vermilion);
}

/* Set-filter buttons (Core / Additional / All) — distinguished from category filters */
.filter-btn.set-btn {
  font-weight: 600;
  border-width: 1.5px;
}
.filter-btn.set-btn:not(.active) {
  background: var(--bg-deep);
}
.set-filter-group {
  padding-right: 8px;
  border-right: 1px solid var(--line);
  margin-right: 6px;
}
@media (max-width: 720px) {
  .set-filter-group {
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
  }
}

/* Core / Additional badge on grammar cards and in the detail panel */
.set-badge {
  display: inline-block;
  font-size: 9.5px;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
}
.set-badge.set-core {
  background: rgba(184, 54, 46, 0.08);
  color: var(--vermilion);
}
.set-badge.set-add {
  background: var(--bg-deep);
  color: var(--ink-mute);
}
.grammar-card-title { display: flex; align-items: center; flex-wrap: wrap; }

/* ============================================================
   Grammar test (quiz) — 4 screens: setup, quiz, score, review
   ============================================================ */

#test-stage { margin-top: 12px; }

.test-section-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--indigo);
  margin: 22px 0 10px;
  letter-spacing: 0.04em;
}
.test-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.test-chip {
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  padding: 9px 16px;
  border-radius: var(--r-sm);
  font-family: inherit; font-size: 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.test-chip:hover { border-color: var(--vermilion); color: var(--vermilion); }
.test-chip.active {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #fffaf2;
}
.cat-row { margin-bottom: 6px; }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 14px;
  margin-bottom: 18px;
}
.cat-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft);
  cursor: pointer;
  padding: 5px 6px;
  border-radius: var(--r-sm);
}
.cat-check:hover { background: var(--bg-deep); }
.cat-check input[type=checkbox] { accent-color: var(--vermilion); }
.cat-check em { color: var(--ink-mute); font-style: normal; }
.cat-check.disabled, .cat-check input:disabled + span { opacity: 0.4; cursor: not-allowed; }

.test-start-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap; gap: 12px;
}
.test-meta { font-size: 13px; color: var(--ink-mute); }
.test-start-btn {
  background: var(--vermilion); color: #fffaf2;
  border: 0;
  padding: 12px 28px;
  border-radius: var(--r-sm);
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.test-start-btn:hover:not(:disabled) {
  background: var(--vermilion-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.test-start-btn:disabled { background: var(--ink-mute); cursor: not-allowed; }
.test-secondary-btn {
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink);
  padding: 11px 22px;
  border-radius: var(--r-sm);
  font-family: inherit; font-size: 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.test-secondary-btn:hover { border-color: var(--vermilion); color: var(--vermilion); }

/* ------------------------------------------------------------
   Quiz screen
   ------------------------------------------------------------ */
.quiz-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.quiz-progress-text { font-size: 13px; color: var(--ink-mute); }
.quiz-quit {
  background: transparent; border: 0;
  color: var(--ink-mute); cursor: pointer;
  font-family: inherit; font-size: 13px;
  padding: 6px 10px; border-radius: var(--r-sm);
}
.quiz-quit:hover { background: var(--bg-deep); color: var(--ink); }

.quiz-progress-bar {
  height: 6px; background: var(--bg-deep);
  border-radius: 999px; overflow: hidden;
  margin-bottom: 24px;
}
.quiz-progress-fill {
  height: 100%; background: var(--vermilion);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.quiz-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 30px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.quiz-category {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vermilion); margin-bottom: 14px;
}
.quiz-question-jp {
  font-family: var(--font-jp);
  font-size: 26px; font-weight: 600;
  color: var(--ink); line-height: 1.4;
}
.quiz-question-kana {
  font-family: var(--font-jp);
  font-size: 16px; color: var(--indigo);
  margin-top: 8px;
}
.quiz-question-en {
  font-size: 14px; color: var(--ink-soft);
  font-style: italic; margin-top: 8px;
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.quiz-option {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  font-family: inherit;
  text-align: left;
  transition: all .15s ease;
}
.quiz-option:hover {
  border-color: var(--vermilion);
  background: rgba(184,54,46,.04);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.quiz-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--bg-deep);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--vermilion);
  font-size: 14px;
  flex-shrink: 0;
}
.quiz-option:hover .quiz-letter {
  background: var(--vermilion); color: #fffaf2;
}
.quiz-option-text {
  font-family: var(--font-jp);
  font-size: 17px;
  color: var(--ink);
  flex: 1;
}
@media (max-width: 640px) {
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-question-jp { font-size: 21px; }
}

/* ------------------------------------------------------------
   Scoreboard
   ------------------------------------------------------------ */
.score-screen {
  text-align: center;
  padding: 20px 0;
}
.score-big {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-bottom: 28px;
}
.score-ring {
  width: 160px; height: 160px;
  border-radius: 50%;
  background: conic-gradient(var(--color) calc(var(--pct) * 1%), var(--bg-deep) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.score-ring::before {
  content: ""; position: absolute; inset: 12px;
  background: var(--bg); border-radius: 50%;
}
.score-ring span {
  position: relative;
  font-family: var(--font-serif);
  font-size: 36px; font-weight: 700;
  color: var(--ink);
}
.score-ring span small {
  font-size: 18px; font-weight: 500;
  color: var(--ink-mute);
}
.score-pct {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 700;
}

.score-summary {
  display: flex; gap: 18px; justify-content: center;
  margin-bottom: 22px;
}
.score-row {
  font-size: 16px;
  padding: 8px 18px;
  border-radius: var(--r-sm);
}
.score-row.good { background: rgba(101, 163, 13, .1); color: var(--success); }
.score-row.bad { background: rgba(184, 54, 46, .08); color: var(--vermilion); }

.score-table {
  max-width: 540px;
  margin: 0 auto 26px;
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.score-table thead th {
  background: var(--bg-deep);
  text-align: left;
  font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 14px;
}
.score-table tbody td {
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.score-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.score-actions {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Review
   ------------------------------------------------------------ */
.review-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.review-header h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--indigo);
  margin: 0;
}

.review-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--r);
  padding: 18px 22px;
  margin-bottom: 16px;
}
.review-block.block-correct  { border-left-color: var(--success); }
.review-block.block-wrong    { border-left-color: var(--vermilion); }
.review-block.block-skipped  { border-left-color: var(--ink-mute); }

.review-block-head {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 12px;
  font-size: 12px; color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.review-num { font-weight: 600; color: var(--ink-soft); }
.review-category {
  background: rgba(184,54,46,.06); color: var(--vermilion);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px;
}
.review-status { margin-left: auto; font-weight: 600; font-size: 13px; }
.block-correct .review-status { color: var(--success); }
.block-wrong   .review-status { color: var(--vermilion); }
.block-skipped .review-status { color: var(--ink-mute); }

.review-question { margin-bottom: 16px; }
.review-options { display: flex; flex-direction: column; gap: 10px; }

.review-option {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 16px;
}
.review-option-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 6px;
}
.review-option-head .quiz-letter { width: 26px; height: 26px; font-size: 12px; }
.review-option-head .quiz-option-text { font-size: 15px; }
.review-option-explain {
  font-size: 13px; color: var(--ink-soft);
  line-height: 1.5;
  margin-left: 38px;
}
.review-option.is-correct {
  background: rgba(101, 163, 13, .06);
  border-color: var(--success);
}
.review-option.is-correct .quiz-letter { background: var(--success); color: #fff; }
.review-option.is-wrong-pick {
  background: rgba(184, 54, 46, .05);
  border-color: var(--vermilion);
}
.review-option.is-wrong-pick .quiz-letter { background: var(--vermilion); color: #fff; }
.opt-mark {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  color: var(--success); letter-spacing: 0.04em;
}
.opt-mark.wrong { color: var(--vermilion); }

.review-footer { text-align: center; margin-top: 26px; }

/* ============================================================
   Short Stories
   ============================================================ */

/* Stories list (grid of story cards) */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.story-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0 0 18px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: fade-in .35s ease;
}
.story-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--vermilion);
  color: var(--ink);
  text-decoration: none;
}
.story-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-deep), var(--surface));
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}
.story-card-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.story-card:hover .story-card-cover-img { transform: scale(1.04); }
.story-card-cover .story-emoji {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 28px;
  line-height: 1;
  background: rgba(255, 250, 242, .92);
  border: 1px solid var(--line);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease;
}
.story-card.no-cover .story-card-cover {
  aspect-ratio: 4 / 2.4;
  background: linear-gradient(135deg, var(--bg-deep), var(--surface));
}
.story-card.no-cover .story-card-cover .story-emoji {
  position: static;
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
  font-size: 56px;
}
.story-card:hover .story-emoji { transform: scale(1.08) rotate(-3deg); }
.story-card-body {
  padding: 14px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.story-card-title-jp {
  font-family: var(--font-jp);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
}
.story-card-title-en {
  font-size: 13px;
  color: var(--ink-mute);
  text-align: center;
  font-style: italic;
}
.story-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11px;
}
.story-card-category {
  background: rgba(184,54,46,.08);
  color: var(--vermilion);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.story-card-len {
  color: var(--ink-mute);
}

/* Long-form kaiwa scene head */
.kaiwa-scene-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  margin: 0 0 14px;
  background: var(--bg-deep);
  border-left: 3px solid var(--vermilion);
  border-radius: 4px;
  font-size: 13px;
  color: var(--ink);
}
.kaiwa-scene-num {
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--vermilion);
}
.kaiwa-scene-setting {
  color: var(--ink-soft);
  font-style: italic;
}

/* Long-form story pagination */
.story-page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0;
  padding: 14px 18px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-wrap: wrap;
}
.story-page-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: all .15s ease;
}
.story-page-btn:hover:not([disabled]) {
  border-color: var(--vermilion);
  color: var(--vermilion);
}
.story-page-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.story-page-dots {
  display: flex;
  gap: 6px;
}
.story-page-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-mute);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.story-page-dot:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
}
.story-page-dot.is-current {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #fffaf2;
}

/* Story reader — vertical Japanese (tategaki) style */
.story-reader {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 30px 30px;
  box-shadow: var(--shadow);
  animation: fade-in .4s ease;
}
.story-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--bg-deep);
  position: relative;
}
.story-header-cover {
  margin: -24px -30px 18px;  /* break out of the reader's padding for a full-bleed banner */
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  max-height: 260px;
  display: flex;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-deep), var(--surface));
}
.story-header-cover-img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  animation: fade-in .6s ease;
}
.story-header.no-cover .story-header-cover { display: none; }
.story-scene-strip {
  display: flex; justify-content: center; gap: 14px;
  font-size: 40px;
  margin-bottom: 10px;
  animation: fade-in .5s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.06));
}
.story-scene-strip span {
  animation: gentle-bounce 3s ease-in-out infinite;
}
.story-scene-strip span:nth-child(2) { animation-delay: .3s; }
.story-scene-strip span:nth-child(3) { animation-delay: .6s; }
.story-scene-strip span:nth-child(4) { animation-delay: .9s; }
.story-scene-strip span:nth-child(5) { animation-delay: 1.2s; }
@keyframes gentle-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.story-title-jp {
  font-family: var(--font-jp);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.story-title-en {
  font-style: italic;
  color: var(--ink-mute);
  font-size: 13px;
}

.story-toolbar {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 18px;
  padding: 10px 14px;
  background: var(--bg-deep);
  border-radius: var(--r);
  font-size: 13px;
  align-items: center;
}
.story-toolbar label {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  color: var(--ink-soft);
}
.story-toolbar input[type="checkbox"] { accent-color: var(--vermilion); }
.story-toolbar .toolbar-spacer { flex: 1; }
.story-toolbar button {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s ease;
}
.story-toolbar button:hover { border-color: var(--vermilion); color: var(--vermilion); }

/* Reading area: vertical Japanese on the left, optional translation panel on the right.
   When neither "Show furigana" nor "Show English" is toggled, the panel is hidden
   and the vertical reader takes the full width. */
.story-reading-area {
  display: flex;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 6px;
  width: 100%;
  min-width: 0;
}

/* Vertical writing container — Japanese book-page style with soft sage/celadon
   background to set it apart from the rest of the page. */
.story-sentences {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-jp);
  font-size: 22px;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  height: 460px;
  max-height: 65vh;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 40px 48px;
  background:
    radial-gradient(ellipse 600px 80px at 50% 0%, rgba(184,54,46,.04), transparent 70%),
    radial-gradient(ellipse 600px 80px at 50% 100%, rgba(29,53,87,.03), transparent 70%),
    linear-gradient(135deg, var(--reader-sage-bg-start) 0%, var(--reader-sage-bg-end) 100%);
  border: 1px solid var(--reader-sage-border);
  border-radius: var(--r);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    inset 0 1px 30px rgba(101, 130, 95, .05),
    var(--shadow-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--reader-sage-scroll) transparent;
}
.story-sentences::-webkit-scrollbar { height: 8px; }
.story-sentences::-webkit-scrollbar-track { background: transparent; }
.story-sentences::-webkit-scrollbar-thumb { background: var(--reader-sage-scroll); border-radius: 4px; }

/* Side translation panel — hidden until a toggle is on. Stays within the wrap width.
   Warm apricot/peach gradient — visually distinct from the sage reader so the eye
   can instantly tell "this is the translation". */
.story-translation-panel {
  display: none;
  flex: 0 0 360px;
  max-width: 42%;
  background:
    radial-gradient(ellipse 400px 60px at 50% 0%, rgba(184, 54, 46, .05), transparent 70%),
    linear-gradient(135deg, var(--panel-apricot-bg-start) 0%, var(--panel-apricot-bg-end) 100%);
  border: 1px solid var(--panel-apricot-border);
  border-radius: var(--r);
  padding: 18px 22px;
  overflow-y: auto;
  max-height: 460px;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-apricot-scroll) transparent;
  animation: fade-in .25s ease;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    0 2px 8px rgba(196, 130, 76, .12);
}
.story-reader.show-kana .story-translation-panel,
.story-reader.show-en   .story-translation-panel { display: block; }
.story-translation-panel::-webkit-scrollbar { width: 6px; }
.story-translation-panel::-webkit-scrollbar-thumb { background: var(--panel-apricot-scroll); border-radius: 3px; }

.translation-panel-title {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--panel-apricot-title);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(196, 130, 76, .4);
}
.translation-row {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(196, 130, 76, .3);
}
.translation-row:last-child { border-bottom: 0; }
.translation-num {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--vermilion);
  letter-spacing: 0.08em;
  background: rgba(184, 54, 46, .08);
  padding: 1px 7px;
  border-radius: 999px;
  margin-bottom: 5px;
}
.translation-jp {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}
.translation-kana {
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--indigo);
  margin-top: 3px;
  display: none;
}
.story-reader.show-kana .translation-kana { display: block; }
.translation-en {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 4px;
  display: none;
}
.story-reader.show-en .translation-en { display: block; }

/* Stack vertically on narrow screens (mobile) */
@media (max-width: 800px) {
  .story-reading-area { flex-direction: column; }
  .story-translation-panel {
    flex: 0 0 auto;
    max-width: 100%;
    max-height: 320px;
  }
}

/* Each sentence is an inline span — they flow continuously, wrapping into
   new columns naturally as the reader scrolls left. Clicking a sentence
   opens a floating callout with its translation. */
.story-sentence {
  display: inline;
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 0;
  transition: background-color .15s ease;
}
.story-sentence:hover {
  background-color: rgba(184, 54, 46, .04);
}
.story-sentence.active-sentence {
  background-color: rgba(247, 216, 224, .35);
}
.sentence-jp { display: inline; }
.sentence-kana,
.sentence-en { display: none !important; }

/* Floating translation callout — appears on sentence click */
.sentence-callout {
  position: absolute;
  background: var(--ink);
  color: #fffaf2;
  padding: 14px 18px;
  border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  max-width: 340px;
  min-width: 200px;
  z-index: 100;
  animation: pop-in .18s ease;
  font-family: var(--font-sans);
}
.sentence-callout::before {
  content: "";
  position: absolute;
  top: -8px; left: 24px;
  width: 14px; height: 14px;
  background: var(--ink);
  transform: rotate(45deg);
  border-radius: 2px;
}
.sentence-callout .callout-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 250, 242, .55);
  margin-bottom: 6px;
  display: block;
}
.sentence-callout .callout-jp {
  font-family: var(--font-jp);
  font-size: 16px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.sentence-callout .callout-kana {
  font-family: var(--font-jp);
  font-size: 13px;
  color: rgba(255, 250, 242, .8);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 250, 242, .15);
}
.sentence-callout .callout-en {
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
}
.sentence-callout .callout-close {
  position: absolute;
  top: 6px; right: 8px;
  background: transparent;
  border: 0;
  color: rgba(255, 250, 242, .6);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
}
.sentence-callout .callout-close:hover { color: #fffaf2; }

/* Scroll hint */
.story-scroll-hint {
  text-align: center;
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 6px;
  letter-spacing: 0.08em;
}

/* (Old horizontal translation block removed — translations now appear as
   floating callouts on per-sentence click. See .sentence-callout above.) */

/* Q&A section at the end */
.story-qa {
  margin-top: 28px;
  padding: 22px 26px;
  background: linear-gradient(135deg, rgba(247, 216, 224, .25), rgba(184, 54, 46, .04));
  border: 1px solid var(--sakura-deep);
  border-radius: var(--r-lg);
}
.story-qa h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--vermilion);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.story-qa h3::before { content: "❓"; }
.qa-question {
  margin-bottom: 18px;
}
.qa-question:last-child { margin-bottom: 0; }
.qa-q {
  font-family: var(--font-jp);
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
  font-weight: 600;
}
.qa-q-en {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 10px;
}
.qa-options {
  display: flex; flex-direction: column;
  gap: 6px;
}
.qa-option {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: 14px;
  color: var(--ink);
  transition: all .15s ease;
  display: flex; align-items: center; gap: 10px;
}
.qa-option:hover { border-color: var(--vermilion); background: rgba(184,54,46,.03); }
.qa-option.answered.correct {
  background: rgba(101, 163, 13, .1);
  border-color: var(--success);
  color: var(--success);
}
.qa-option.answered.wrong {
  background: rgba(184, 54, 46, .08);
  border-color: var(--vermilion);
  color: var(--vermilion);
}
.qa-option.answered.is-correct-answer {
  background: rgba(101, 163, 13, .1);
  border-color: var(--success);
  color: var(--success);
}
.qa-option .qa-letter {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--vermilion);
}
.qa-option.answered.correct .qa-letter,
.qa-option.answered.is-correct-answer .qa-letter { background: var(--success); color: #fff; }
.qa-option.answered.wrong .qa-letter { background: var(--vermilion); color: #fff; }
.qa-feedback {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  display: none;
}
.qa-question.answered .qa-feedback { display: block; }

/* Clickable words */
.word {
  cursor: pointer;
  border-bottom: 1px dotted transparent;
  transition: color .12s ease, border-color .12s ease;
  padding: 0 1px;
  border-radius: 2px;
}
.word.known {
  border-bottom-color: rgba(29, 53, 87, .25);
}
.word.known:hover {
  color: var(--vermilion);
  border-bottom-color: var(--vermilion);
  background: rgba(184,54,46,.04);
}
.word.bookmarked {
  background: rgba(184, 137, 58, .18);
  border-bottom-color: var(--gold);
}
.word.bookmarked:hover { background: rgba(184, 137, 58, .28); }

/* Word definition popup */
.word-popup {
  position: absolute;
  background: var(--ink);
  color: #fffaf2;
  padding: 12px 16px;
  border-radius: var(--r);
  box-shadow: 0 8px 26px rgba(0,0,0,.25);
  max-width: 320px;
  z-index: 100;
  animation: pop-in .15s ease;
  pointer-events: auto;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.word-popup::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 24px;
  width: 14px; height: 14px;
  background: var(--ink);
  transform: rotate(45deg);
  z-index: -1;
}
.popup-word-jp {
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 700;
  display: inline-block;
  margin-right: 10px;
}
.popup-word-kana {
  font-family: var(--font-jp);
  font-size: 14px;
  color: rgba(255, 250, 242, .75);
  display: inline-block;
}
.popup-word-meaning {
  font-size: 13px;
  color: #fffaf2;
  margin-top: 6px;
  line-height: 1.45;
}
.popup-word-meta {
  margin-top: 8px;
  display: flex; gap: 8px; align-items: center;
  font-size: 11px;
}
.popup-level-badge {
  background: var(--vermilion);
  color: #fffaf2;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.popup-pos-tag {
  color: rgba(255, 250, 242, .65);
  letter-spacing: 0.04em;
}
.popup-bookmark-btn {
  margin-top: 10px;
  background: transparent;
  border: 1px solid rgba(255, 250, 242, .3);
  color: #fffaf2;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.popup-bookmark-btn:hover { background: rgba(255, 250, 242, .12); }
.popup-bookmark-btn.bookmarked {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.story-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.story-nav-btn {
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  padding: 9px 18px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s ease;
}
.story-nav-btn:hover:not(:disabled) {
  border-color: var(--vermilion);
  color: var(--vermilion);
}
.story-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Bookmarks panel (saved words) */
.bookmarks-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  margin-top: 18px;
}
.bookmarks-empty {
  text-align: center;
  color: var(--ink-mute);
  padding: 30px 10px;
  font-size: 14px;
}
.bookmarks-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.bookmark-item {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 13px;
}
.bookmark-word-jp {
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 600;
}
.bookmark-word-kana {
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--indigo);
}
.bookmark-word-meaning {
  color: var(--ink-soft);
  font-size: 12px;
  margin-top: 3px;
}
.bookmark-remove {
  background: transparent; border: 0;
  color: var(--ink-mute);
  font-size: 12px; cursor: pointer;
  margin-top: 4px;
  padding: 0;
}
.bookmark-remove:hover { color: var(--vermilion); }

/* Per-story bookmark groups (shown on stories list page) */
.bookmark-group {
  margin-top: 22px;
  border-top: 1px dashed var(--line);
  padding-top: 18px;
}
.bookmark-group:first-of-type {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
.bookmark-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.bookmark-group-emoji {
  font-size: 22px;
  flex: 0 0 auto;
}
.bookmark-group-titles {
  flex: 1 1 auto;
  min-width: 0;
}
.bookmark-group-title-jp {
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.bookmark-group-title-en {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 1px;
}
.bookmark-group-count {
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.bookmark-open-story {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.bookmark-open-story:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  background: rgba(184, 54, 46, .04);
}

/* Saved-words flashcard button + modal */
.bookmarks-actions {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.bookmarks-scope {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}
.bookmarks-scope strong {
  color: var(--vermilion);
  font-weight: 600;
}
.bookmarks-count {
  font-size: 12px;
  color: var(--ink-mute);
  background: var(--bg-deep);
  padding: 4px 10px;
  border-radius: 999px;
}
.study-fc-btn {
  background: var(--vermilion);
  color: #fffaf2;
  border: 0;
  padding: 9px 18px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .15s ease;
}
.study-fc-btn:hover {
  background: var(--vermilion-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.study-fc-btn:disabled {
  background: var(--ink-mute);
  cursor: not-allowed;
  transform: none;
}

/* Flashcard modal overlay */
.fc-modal {
  position: fixed; inset: 0;
  background: rgba(28, 28, 28, .65);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  animation: fade-in .2s ease;
  padding: 20px;
}
.fc-modal-inner {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  animation: pop-in .25s ease;
}
.fc-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.fc-modal-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--indigo);
  font-weight: 700;
}
.fc-modal-close {
  background: transparent; border: 0;
  color: var(--ink-mute);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--r-sm);
}
.fc-modal-close:hover { background: var(--bg-deep); color: var(--ink); }

.fc-progress {
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 14px;
  text-align: center;
  letter-spacing: 0.04em;
}
.fc-card {
  background: linear-gradient(135deg, #fefaf2, #fbf6ec);
  border: 1px solid var(--bg-deep);
  border-radius: var(--r-lg);
  padding: 50px 30px;
  min-height: 220px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  transition: transform .2s ease;
}
.fc-card:hover { transform: translateY(-2px); }
.fc-card-front {
  font-family: var(--font-jp);
  font-size: 48px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.fc-card-back-kana {
  font-family: var(--font-jp);
  font-size: 20px;
  color: var(--indigo);
  margin-bottom: 8px;
}
.fc-card-back-meaning {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
  font-weight: 500;
}
.fc-card-back-meta {
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}
.fc-flip-hint {
  text-align: center;
  font-size: 11px;
  color: var(--ink-mute);
  margin: 10px 0 18px;
  letter-spacing: 0.06em;
}
.fc-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
}
.fc-nav-btn {
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
}
.fc-nav-btn:hover:not(:disabled) {
  border-color: var(--vermilion);
  color: var(--vermilion);
}
.fc-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fc-nav-info { font-size: 12px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .story-reader { padding: 22px 18px 26px; }
  .story-title-jp { font-size: 24px; }
  .sentence-jp { font-size: 17px; }
  .stories-grid { grid-template-columns: 1fr; }
}

/* When grammar uses split layout, the left side shows a vertical list (not a grid). */
.kanji-split-left .grammar-list { margin-top: 6px; }

/* Sticky right pane will host the grammar-detail in split mode (reuses kanji-split-right) */
.kanji-split.active .grammar-detail {
  display: block;
  margin-top: 0;
}

@media (max-width: 900px) {
  .grammar-detail { padding: 20px 18px; }
  .grammar-detail-title { font-size: 26px; }
}

/* ==========================================================
   Kaiwa (conversation practice) — chat-bubble layout
   ========================================================== */

/* Category filter pills */
.kaiwa-cat-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px;
}
.kaiwa-cat-pill {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.kaiwa-cat-pill:hover { border-color: var(--vermilion); color: var(--vermilion); }
.kaiwa-cat-pill.active {
  background: var(--vermilion); color: #fffaf2; border-color: var(--vermilion);
}
.kaiwa-cat-count {
  font-size: 11px;
  background: rgba(0,0,0,.06);
  padding: 1px 7px;
  border-radius: 999px;
}
.kaiwa-cat-pill.active .kaiwa-cat-count {
  background: rgba(255, 255, 255, .25);
  color: #fffaf2;
}

/* Conversation cards grid */
.kaiwa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.kaiwa-card {
  background:
    radial-gradient(ellipse 200px 60px at 100% 0%, rgba(184, 54, 46, .04), transparent 70%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  gap: 8px;
  transition: all .15s ease;
  position: relative;
  overflow: hidden;
}
.kaiwa-card:hover {
  transform: translateY(-2px);
  border-color: var(--vermilion);
  box-shadow: 0 6px 20px rgba(28, 28, 28, .08);
}
.kaiwa-card-top {
  display: flex; justify-content: space-between; align-items: center;
}
.kaiwa-card-emoji {
  font-size: 28px;
  line-height: 1;
}
.kaiwa-card-num {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  font-weight: 600;
}
.kaiwa-card-title-jp {
  font-family: var(--font-jp);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.kaiwa-card-title-en {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}
.kaiwa-card-setting {
  font-size: 12px;
  color: var(--ink-mute);
  background: var(--bg-deep);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--gold);
}
.kaiwa-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.kaiwa-card-cat {
  background: rgba(29, 53, 87, .08);
  color: var(--indigo);
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
}
.kaiwa-card-lines { font-style: italic; }
.kaiwa-card-speakers {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 2px;
}
.kaiwa-card-speaker {
  font-size: 11px;
  color: var(--vermilion);
  background: rgba(184, 54, 46, .08);
  padding: 2px 8px;
  border-radius: 999px;
}

.kaiwa-empty {
  text-align: center;
  color: var(--ink-mute);
  padding: 60px 10px;
  font-size: 14px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r);
}

/* Conversation reader */
.kaiwa-reader {
  margin-top: 10px;
}
.kaiwa-header {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 26px;
  margin-bottom: 16px;
}
.kaiwa-header-top {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 8px;
}
.kaiwa-header-emoji { font-size: 38px; line-height: 1; }
.kaiwa-header-titles { flex: 1 1 auto; min-width: 0; }
.kaiwa-header-title-jp {
  font-family: var(--font-jp);
  font-size: 26px; font-weight: 700;
  color: var(--ink);
}
.kaiwa-header-title-en {
  font-size: 14px; color: var(--ink-soft);
  font-style: italic;
  margin-top: 2px;
}
.kaiwa-header-cat {
  background: var(--vermilion);
  color: #fffaf2;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.kaiwa-header-setting {
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--bg-deep);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  margin-top: 6px;
  border-left: 3px solid var(--gold);
  display: inline-block;
}
.kaiwa-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.kaiwa-legend-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.kaiwa-legend-avatar { font-size: 20px; }
.kaiwa-legend-name { font-weight: 600; }
.kaiwa-legend-role {
  font-size: 11px;
  color: var(--ink-mute);
  background: var(--bg-deep);
  padding: 1px 8px;
  border-radius: 999px;
  font-style: italic;
}

/* Toolbar (toggles) */
.kaiwa-toolbar {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 18px;
  margin-bottom: 18px;
}
.kaiwa-toolbar label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.kaiwa-toolbar input[type="checkbox"] {
  accent-color: var(--vermilion);
}
.kaiwa-toolbar-spacer { flex: 1 1 auto; }
.kaiwa-toolbar button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  cursor: pointer;
  transition: all .15s ease;
}
.kaiwa-toolbar button:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
}

/* Conversation: chat-bubble layout */
.kaiwa-conversation {
  background:
    radial-gradient(ellipse 600px 80px at 50% 0%, rgba(184, 54, 46, .03), transparent 70%),
    linear-gradient(180deg, #faf6ef 0%, #f5f0e6 100%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.kaiwa-line {
  display: flex; gap: 12px;
  max-width: 78%;
  animation: fade-in-up .3s ease;
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kaiwa-line.kaiwa-side-left { align-self: flex-start; }
.kaiwa-line.kaiwa-side-right {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.kaiwa-line.kaiwa-side-centre {
  align-self: center;
  max-width: 70%;
  flex-direction: column;
  align-items: center;
}
.kaiwa-avatar {
  font-size: 26px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 42px;
}
.kaiwa-bubble {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.kaiwa-line.kaiwa-side-left .kaiwa-bubble {
  border-top-left-radius: 4px;
}
.kaiwa-line.kaiwa-side-right .kaiwa-bubble {
  border-top-right-radius: 4px;
}

/* Speaker-color accents */
.kaiwa-color-vermilion .kaiwa-bubble {
  border-left: 3px solid var(--vermilion);
}
.kaiwa-color-vermilion.kaiwa-side-right .kaiwa-bubble {
  border-left: 1px solid var(--line);
  border-right: 3px solid var(--vermilion);
}
.kaiwa-color-vermilion .kaiwa-speaker-name { color: var(--vermilion); }
.kaiwa-color-vermilion .kaiwa-avatar { border-color: rgba(184, 54, 46, .4); }

.kaiwa-color-indigo .kaiwa-bubble {
  border-left: 3px solid var(--indigo);
}
.kaiwa-color-indigo.kaiwa-side-right .kaiwa-bubble {
  border-left: 1px solid var(--line);
  border-right: 3px solid var(--indigo);
}
.kaiwa-color-indigo .kaiwa-speaker-name { color: var(--indigo); }
.kaiwa-color-indigo .kaiwa-avatar { border-color: rgba(29, 53, 87, .4); }

.kaiwa-color-gold .kaiwa-bubble {
  border-left: 3px solid var(--gold);
}
.kaiwa-color-gold .kaiwa-speaker-name { color: var(--gold-deep); }
.kaiwa-color-gold .kaiwa-avatar { border-color: var(--gold); }

.kaiwa-color-sage .kaiwa-bubble {
  border-left: 3px solid var(--sage);
}
.kaiwa-color-sage .kaiwa-speaker-name { color: var(--sage-deep); }
.kaiwa-color-sage .kaiwa-avatar { border-color: var(--sage); }

.kaiwa-speaker-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kaiwa-jp {
  font-family: var(--font-jp);
  font-size: 17px;
  color: var(--ink);
  line-height: 1.5;
}
.kaiwa-kana {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--indigo);
  margin-top: 4px;
  display: none;
}
.kaiwa-conversation.show-kana .kaiwa-kana { display: block; }
.kaiwa-en {
  font-size: 13.5px;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, .06);
  display: none;
}
.kaiwa-conversation.show-en .kaiwa-en { display: block; }
.kaiwa-line-note {
  font-size: 12px;
  color: var(--vermilion);
  background: rgba(184, 54, 46, .06);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  margin-top: 6px;
  border: 1px dashed rgba(184, 54, 46, .25);
}

/* Notes section */
.kaiwa-notes {
  background: linear-gradient(135deg, var(--notes-apricot-bg-start) 0%, var(--notes-apricot-bg-end) 100%);
  border: 1px solid var(--notes-apricot-border);
  border-radius: var(--r);
  padding: 20px 24px;
  margin-top: 20px;
}
.kaiwa-notes-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--notes-apricot-title);
  margin: 0 0 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kaiwa-note {
  display: grid;
  grid-template-columns: minmax(80px, 140px) 1fr;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(196, 130, 76, .25);
  font-size: 13px;
}
.kaiwa-note:last-child { border-bottom: 0; }
.kaiwa-note-phrase {
  font-family: var(--font-jp);
  font-weight: 600;
  color: var(--panel-apricot-title);
}
.kaiwa-note-text {
  color: var(--ink-soft);
}

/* Prev/Next conversation nav */
.kaiwa-nav {
  display: flex; justify-content: space-between; gap: 14px;
  margin-top: 22px;
}
.kaiwa-nav-btn {
  flex: 1 1 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  color: var(--ink-soft);
  font-family: var(--font-jp);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
  text-align: center;
}
.kaiwa-nav-btn:hover:not(:disabled) {
  border-color: var(--vermilion);
  color: var(--vermilion);
}
.kaiwa-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Mobile: narrower bubbles, smaller avatars */
@media (max-width: 800px) {
  .kaiwa-line { max-width: 92%; }
  .kaiwa-avatar { font-size: 20px; width: 34px; height: 34px; flex-basis: 34px; }
  .kaiwa-jp { font-size: 15px; }
  .kaiwa-header-title-jp { font-size: 22px; }
  .kaiwa-conversation { padding: 18px 14px; }
  .kaiwa-note { grid-template-columns: 1fr; gap: 2px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — Verb conjugation page
   ───────────────────────────────────────────────────────────────────── */

.section-intro {
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.65;
  margin: -8px 0 22px;
  max-width: 720px;
}

/* — Step 1: group cards — */
.verb-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.verb-group-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.vg-tag {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vermilion);
  font-weight: 600;
}
.vg-jp {
  font-family: var(--font-jp);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  margin: 8px 0 2px;
  letter-spacing: 2px;
}
.vg-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.vg-desc {
  color: var(--ink-mute);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 12px;
  flex: 1;
}
.vg-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.vg-ex {
  font-family: var(--font-jp);
  font-size: 18px;
  color: var(--indigo);
  background: var(--bg-deep);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.vg-warn {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-deep);
  border-radius: 8px;
  border: 1px dashed var(--line);
}

/* — Step 2: form rules — */
.form-rules { display: flex; flex-direction: column; gap: 28px; }

.rule-cat-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.rule-cat-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.rule-cat-head .jp {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink-soft);
}

.rule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.rule-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.rule-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.rule-jp {
  font-family: var(--font-jp);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.rule-en {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--vermilion);
}
.rule-use {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.6;
  margin: 4px 0 12px;
}
.rule-block {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  margin-top: 10px;
}
.rule-block:first-of-type { margin-top: 0; }
.rule-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.55;
}
.rb-tag {
  background: var(--indigo-soft);
  color: #fffaf2;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  flex-shrink: 0;
  line-height: 1.4;
}
.rb-text { flex: 1; }
.rule-ex {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  margin-left: 32px;
  font-family: var(--font-jp);
  font-size: 14px;
}
.rule-ex-jp { color: var(--ink-soft); }
.rule-ex-arrow { color: var(--ink-mute); }
.rule-ex-out { color: var(--ink); font-weight: 600; }
.rule-ex-kana { color: var(--ink-soft); font-size: 12.5px; }

/* — Step 3: verb library — */
.verb-controls { gap: 10px; }
.verb-search { max-width: 480px; }

.verb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.verb-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.verb-row:hover { border-color: var(--ink-soft); }
.verb-row.is-expanded {
  border-color: var(--vermilion);
  box-shadow: var(--shadow-sm);
}
.verb-head {
  display: grid;
  grid-template-columns: 110px 90px 110px 1fr auto 24px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-family: inherit;
}
.verb-dict {
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 600;
}
.verb-kana {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink-soft);
}
.verb-romaji {
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}
.verb-meaning {
  font-size: 14px;
  color: var(--ink-mute);
}
.verb-tags {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.verb-grouptag {
  background: var(--bg-deep);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.verb-jlpttag {
  background: rgba(184,54,46,.08);
  color: var(--vermilion);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.verb-caret {
  color: var(--ink-soft);
  font-size: 14px;
  transition: transform .2s ease;
}
.verb-row.is-expanded .verb-caret { transform: rotate(180deg); }

.verb-note {
  padding: 10px 18px;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--bg-deep);
  border-top: 1px dashed var(--line);
  font-style: italic;
}

.verb-table {
  padding: 6px 18px 18px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vt-cat-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--vermilion);
}
.vt-cat-head .jp {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-soft);
}
.vt-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.vt-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px dashed var(--line);
}
.vt-row:first-child { border-top: none; }
.vt-row:nth-child(even) { background: var(--bg-deep); }
.vt-formname { display: flex; flex-direction: column; gap: 2px; }
.vt-form-jp {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.vt-form-en {
  font-size: 11.5px;
  color: var(--ink-soft);
}
.vt-out { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.vt-kanji {
  font-family: var(--font-jp);
  font-size: 18px;
  color: var(--ink);
}
.vt-kana {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink-soft);
}

/* — Step 4: drill — */
.drill-area {
  display: flex;
  justify-content: center;
}
.drill-card {
  width: 100%;
  max-width: 640px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-sm);
}
.drill-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.drill-meta strong { color: var(--ink); font-weight: 600; }
.drill-prompt {
  text-align: center;
  margin-bottom: 18px;
}
.drill-instr {
  font-size: 13.5px;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.drill-instr strong { color: var(--vermilion); }
.drill-verb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.drill-verb-jp {
  font-family: var(--font-jp);
  font-size: 36px;
  font-weight: 600;
  color: var(--ink);
}
.drill-verb-kana {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink-soft);
}
.drill-verb-meaning {
  font-size: 13px;
  color: var(--ink-mute);
}
.drill-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.drill-option {
  font-family: var(--font-jp);
  font-size: 18px;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: all .15s ease;
}
.drill-option:hover:not(:disabled) {
  border-color: var(--vermilion);
  color: var(--vermilion);
  transform: translateY(-1px);
}
.drill-option:disabled { cursor: default; }
.drill-option.is-correct {
  background: rgba(34,139,86,.1);
  border-color: #228b56;
  color: #1d6e44;
  font-weight: 600;
}
.drill-option.is-wrong {
  background: rgba(184,54,46,.1);
  border-color: var(--vermilion);
  color: var(--vermilion);
}
.drill-actions {
  display: flex;
  justify-content: center;
}
.drill-next {
  padding: 10px 22px;
  border: 1px solid var(--indigo);
  background: var(--indigo);
  color: #fffaf2;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.drill-next:hover {
  background: var(--indigo-soft);
  border-color: var(--indigo-soft);
}

/* Mobile adjustments for the verb page */
@media (max-width: 900px) {
  .verb-groups { grid-template-columns: 1fr; }
  .rule-grid { grid-template-columns: 1fr; }
  .verb-head {
    grid-template-columns: 1fr auto 24px;
    grid-template-areas:
      "dict tags caret"
      "kana tags caret"
      "meaning tags caret";
    gap: 4px 14px;
  }
  .verb-dict { grid-area: dict; }
  .verb-kana { grid-area: kana; }
  .verb-romaji { display: none; }
  .verb-meaning { grid-area: meaning; }
  .verb-tags { grid-area: tags; align-self: center; flex-direction: column; }
  .verb-caret { grid-area: caret; }
  .vt-row { grid-template-columns: 140px 1fr auto; }
  .drill-options { grid-template-columns: 1fr; }
  .drill-verb-jp { font-size: 30px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — Particles page (grouped grid + modal popup)
   ───────────────────────────────────────────────────────────────────── */

/* — Grouped particle grid — */
.particle-grid-grouped {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.pg-cat-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--vermilion);
}
.pg-cat-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--indigo);
}
.pg-cat-head .jp {
  font-family: var(--font-jp);
  color: var(--ink-soft);
  font-size: 13.5px;
}
.pg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.pg-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all .15s ease;
}
.pg-card:hover {
  border-color: var(--vermilion);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.pg-card:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 2px;
}
.pg-symbol {
  font-family: var(--font-jp);
  font-size: 28px;
  font-weight: 700;
  color: var(--vermilion);
  flex-shrink: 0;
  min-width: 44px;
  text-align: center;
  line-height: 1;
}
.pg-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-reading {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-style: italic;
}
.pg-reading .jp { font-style: normal; }
.pg-jlpt {
  background: rgba(184,54,46,.08);
  color: var(--vermilion);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  flex-shrink: 0;
}
.pg-arrow {
  font-size: 22px;
  color: var(--ink-mute);
  line-height: 1;
  transition: transform .15s ease, color .15s ease;
}
.pg-card:hover .pg-arrow { color: var(--vermilion); transform: translateX(3px); }

/* — Modal — */
html.modal-open, html.modal-open body { overflow: hidden; }

.particle-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: pm-fade .18s ease-out;
}
.particle-modal[hidden] { display: none; }
.particle-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 25, 18, .55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.particle-modal-content {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 30px 34px 34px;
  animation: pm-slide .22s ease-out;
}
.particle-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s ease;
  z-index: 2;
}
.particle-modal-close:hover { background: var(--vermilion); border-color: var(--vermilion); color: #fffaf2; }
.particle-modal-close:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }

@keyframes pm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pm-slide {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* — Modal content (.pmd-*) — */
.pmd-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 6px;
}
.pmd-symbol {
  font-family: var(--font-jp);
  font-size: 60px;
  font-weight: 700;
  color: var(--vermilion);
  line-height: 1;
  letter-spacing: -2px;
  min-width: 90px;
  text-align: center;
}
.pmd-meta { flex: 1; }
.pmd-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pmd-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
.pmd-reading {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
}
.pmd-jlpt {
  background: rgba(184,54,46,.08);
  color: var(--vermilion);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}
.pmd-jp {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.pmd-summary {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 14px 0 22px;
  padding: 14px 16px;
  background: var(--bg-deep);
  border-left: 3px solid var(--vermilion);
  border-radius: 0 8px 8px 0;
}
.pmd-use { margin: 22px 0 0; }
.pmd-use:first-of-type { margin-top: 0; }
.pmd-use-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.pmd-use-num {
  background: var(--indigo);
  color: #fffaf2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pmd-use-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.pmd-use-explain {
  margin: 4px 0 10px 34px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.65;
}
.pmd-examples {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 34px;
}
.pmd-ex {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "jp    tts"
    "kana  tts"
    "en    tts";
  gap: 2px 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.pmd-ex-jp {
  grid-area: jp;
  font-family: var(--font-jp);
  font-size: 15.5px;
  color: var(--ink);
  font-weight: 500;
}
.pmd-ex-kana {
  grid-area: kana;
  font-family: var(--font-jp);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.pmd-ex-en {
  grid-area: en;
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 4px;
}
.pmd-ex-tts {
  grid-area: tts;
  display: flex;
  align-items: center;
}

/* — Confusion cards — */
.confusion-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.conf-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.conf-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
  flex-wrap: wrap;
}
.conf-pair {
  display: flex;
  align-items: center;
  gap: 10px;
}
.conf-sym {
  font-family: var(--font-jp);
  font-size: 32px;
  font-weight: 700;
  color: var(--vermilion);
  line-height: 1;
}
.conf-vs {
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}
.conf-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.conf-rules {
  margin: 0 0 14px;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.7;
}
.conf-rules li { margin-bottom: 6px; }
.conf-rules em { color: var(--vermilion); font-style: normal; font-weight: 600; }
.conf-rules strong { color: var(--ink); }
.conf-examples {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mobile — particles */
@media (max-width: 700px) {
  .pg-cards { grid-template-columns: 1fr; }
  .particle-modal { padding: 0; align-items: stretch; }
  .particle-modal-content {
    border-radius: 0;
    max-height: 100vh;
    padding: 28px 20px 24px;
  }
  .pmd-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pmd-symbol { font-size: 50px; min-width: 0; }
  .pmd-use { margin-left: 0; }
  .pmd-use-explain { margin-left: 0; }
  .pmd-examples { margin-left: 0; }
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — Counters page (reuses .particle-modal* infrastructure)
   ───────────────────────────────────────────────────────────────────── */

.counter-grid-grouped {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.cg-cat-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--vermilion);
}
.cg-cat-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--indigo);
}
.cg-cat-head .jp {
  font-family: var(--font-jp);
  color: var(--ink-soft);
  font-size: 13.5px;
}
.cg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}
.cg-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all .15s ease;
}
.cg-card:hover {
  border-color: var(--vermilion);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.cg-card:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 2px;
}
.cg-symbol {
  font-family: var(--font-jp);
  font-size: 36px;
  font-weight: 700;
  color: var(--vermilion);
  flex-shrink: 0;
  min-width: 50px;
  text-align: center;
  line-height: 1;
}
.cg-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cg-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.cg-reading {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-style: italic;
}
.cg-reading .jp { font-style: normal; }
.cg-counts {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-top: 2px;
}
.cg-jlpt {
  background: rgba(184,54,46,.08);
  color: var(--vermilion);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  flex-shrink: 0;
  align-self: flex-start;
}
.cg-arrow {
  font-size: 22px;
  color: var(--ink-mute);
  line-height: 1;
  transition: transform .15s ease, color .15s ease;
}
.cg-card:hover .cg-arrow { color: var(--vermilion); transform: translateX(3px); }

/* Counter modal: table layout */
.ct-section { margin-top: 22px; }
.ct-section-head {
  font-size: 14px;
  font-weight: 600;
  color: var(--vermilion);
  margin-bottom: 10px;
}
.ct-legend {
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ct-legend-pill {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(184,54,46,.18);
  border: 1px solid var(--vermilion);
}
.ct-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.ct-row {
  display: grid;
  grid-template-columns: 36px 70px 1fr 90px 40px;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px dashed var(--line);
  background: var(--surface);
}
.ct-row:first-child { border-top: none; }
.ct-row:nth-child(even) { background: var(--bg-deep); }
.ct-row.is-irregular {
  background: rgba(184,54,46,.06);
  position: relative;
}
.ct-row.is-irregular::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--vermilion);
}
.ct-n {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}
.ct-jp {
  font-family: var(--font-jp);
  font-size: 15px;
  color: var(--ink-soft);
}
.ct-kana {
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.ct-row.is-irregular .ct-kana { color: var(--vermilion); }
.ct-romaji {
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ct-notes {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.ct-notes li { margin-bottom: 6px; }

.ct-examples { margin-left: 0; }

/* — Sound rules cards — */
.sound-rules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.sr-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.sr-head {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.sr-head h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--indigo);
}
.sr-pattern {
  font-size: 13px;
  color: var(--vermilion);
  font-weight: 500;
}
.sr-detail {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.65;
  margin: 0 0 10px;
}
.sr-examples {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sr-examples li {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink);
  background: var(--bg-deep);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
}

/* Mobile — counters */
@media (max-width: 700px) {
  .cg-cards { grid-template-columns: 1fr; }
  .ct-row { grid-template-columns: 28px 56px 1fr auto 38px; gap: 8px; padding: 8px 10px; }
  .ct-jp { font-size: 13px; }
  .ct-kana { font-size: 14.5px; }
  .ct-romaji { font-size: 11.5px; }
  .sound-rules { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — Numbers/Time/Dates page (reuses counter modal infra)
   ───────────────────────────────────────────────────────────────────── */

.nt-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.nt-row {
  display: grid;
  grid-template-columns: 70px 110px 1fr 120px 40px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px dashed var(--line);
}
.nt-row:first-child { border-top: none; }
.nt-row:nth-child(even) { background: var(--bg-deep); }
.nt-row.is-irregular {
  background: rgba(184,54,46,.06);
  position: relative;
}
.nt-row.is-irregular::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--vermilion);
}
.nt-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: 0.3px;
}
.nt-jp {
  font-family: var(--font-jp);
  font-size: 16px;
  color: var(--ink-soft);
  font-weight: 500;
}
.nt-kana {
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.nt-row.is-irregular .nt-kana { color: var(--vermilion); }
.nt-romaji {
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nt-tts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.nt-row-extras {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dotted var(--line);
}
.nt-alt {
  font-size: 12.5px;
  color: var(--ink-mute);
  font-family: var(--font-jp);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.nt-alt-label {
  font-size: 10px;
  font-family: var(--font-sans);
  background: var(--bg-deep);
  color: var(--ink-soft);
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.nt-alt-romaji {
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.nt-row-note {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.55;
  font-style: italic;
}

/* Mobile — numbers/time */
@media (max-width: 700px) {
  .nt-row {
    grid-template-columns: 56px 80px 1fr auto 36px;
    gap: 8px;
    padding: 9px 10px;
  }
  .nt-jp { font-size: 13px; }
  .nt-kana { font-size: 14.5px; }
  .nt-romaji { font-size: 11.5px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — Keigo page (reuses counter modal infra)
   ───────────────────────────────────────────────────────────────────── */

/* — Concept (overview) layout — */
.kg-pillars {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}
.kg-pillar {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-deep);
  padding: 18px 20px;
}
.kg-pillar-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.kg-pillar-sym {
  font-family: var(--font-jp);
  font-size: 38px;
  font-weight: 700;
  color: var(--vermilion);
  line-height: 1;
  width: 50px;
  text-align: center;
}
.kg-pillar-jp {
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.kg-pillar-en {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.kg-pillar-en em { color: var(--vermilion); font-style: italic; }
.kg-pillar-desc {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0 0 10px;
}

/* — Verb conversion / vocab swap shared table — */
.kg-vt-head {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1.3fr;
  gap: 14px;
  padding: 9px 14px;
  background: var(--indigo);
  color: #fffaf2;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 10px 10px 0 0;
}
.kg-vt {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  background: var(--surface);
}
.kg-vt-row {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1.3fr;
  gap: 14px;
  padding: 11px 14px;
  align-items: center;
  border-top: 1px dashed var(--line);
}
.kg-vt-row:first-child { border-top: none; }
.kg-vt-row:nth-child(even) { background: var(--bg-deep); }
.kg-vt-row.is-irregular {
  background: rgba(184,54,46,.06);
  position: relative;
}
.kg-vt-row.is-irregular::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--vermilion);
}
.kg-vt-plain,
.kg-vt-form {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.kg-vt-jp {
  font-family: var(--font-jp);
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
}
.kg-vt-row.is-irregular .kg-vt-form .kg-vt-jp { color: var(--vermilion); }
.kg-vt-kana {
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--ink-soft);
}
.kg-vt-form {
  position: relative;
  padding-right: 36px;
}
.kg-vt-tts {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.kg-vt-en {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.kg-vt-note {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 4px;
  line-height: 1.5;
  font-style: italic;
}

/* — Pattern layout — */
.kg-patterns {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.kg-pattern {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  background: var(--surface);
}
.kg-pattern-head {
  margin-bottom: 8px;
}
.kg-pattern-type {
  font-size: 11.5px;
  color: var(--vermilion);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.kg-pattern-rule {
  font-family: var(--font-jp);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 4px;
}
.kg-pattern-desc {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 6px 0 14px;
}
.kg-pattern-caveats {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.6;
}
.kg-pattern-caveats li { margin-bottom: 4px; }

/* — Phrase list layout — */
.kg-phrases {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kg-phrase {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "jp tts"
    "kana tts"
    "en tts"
    "ctx tts";
  gap: 2px 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.kg-phrase-jp {
  grid-area: jp;
  font-family: var(--font-jp);
  font-size: 17px;
  color: var(--ink);
  font-weight: 600;
}
.kg-phrase-kana {
  grid-area: kana;
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink-soft);
}
.kg-phrase-en {
  grid-area: en;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 4px;
  font-weight: 500;
}
.kg-phrase-ctx {
  grid-area: ctx;
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
  line-height: 1.55;
  margin-top: 2px;
}
.kg-phrase-tts {
  grid-area: tts;
  display: flex;
  align-items: center;
}

/* Mobile — keigo */
@media (max-width: 700px) {
  .kg-vt-head,
  .kg-vt-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .kg-vt-head { display: none; }
  .kg-vt-row { padding: 12px 12px; }
  .kg-vt-plain,
  .kg-vt-form {
    padding-right: 0;
  }
  .kg-vt-plain::before {
    content: "Plain";
    display: block;
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }
  .kg-vt-form::before {
    content: "Formal";
    display: block;
    font-size: 10px;
    color: var(--vermilion);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }
  .kg-vt-tts {
    position: static;
    transform: none;
    display: inline-block;
    margin-top: 4px;
  }
  .kg-pillar-head { gap: 10px; }
  .kg-pillar-sym { font-size: 32px; width: 40px; }
  .kg-pillar-jp { font-size: 18px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — Pitch Accent page
   ───────────────────────────────────────────────────────────────────── */

.pa-banner {
  background: var(--bg-deep);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 14px 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.pa-banner strong { color: var(--ink); margin-right: 6px; }

.pa-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pa-row {
  display: grid;
  grid-template-columns: 200px 1fr 40px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.pa-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pa-jp {
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
.pa-romaji {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-soft);
}
.pa-en {
  font-size: 13px;
  color: var(--ink-mute);
}
.pa-pattern-tag {
  display: inline-block;
  background: var(--bg-deep);
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  align-self: flex-start;
  margin-top: 2px;
}
.pa-tts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* — The pitch contour itself — */
.pa-viz {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  background: var(--bg-deep);
  border-radius: 10px;
  min-height: 60px;
}
.pa-contour {
  display: flex;
  align-items: flex-end;
  gap: 0;
  position: relative;
}
.pa-mora {
  position: relative;
  width: 30px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pa-mora .pa-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--vermilion);
  border-radius: 1px;
}
.pa-mora.pa-high .pa-bar { top: 6px; }
.pa-mora.pa-low  .pa-bar { top: 22px; }
.pa-mora.pa-particle {
  opacity: 0.85;
}
.pa-mora.pa-particle::before {
  /* faint divider between word and particle */
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 25px;
  width: 1px;
  background: var(--line);
}
.pa-mora.pa-particle .pa-bar {
  background: var(--ink-soft);
}
.pa-mora .pa-text {
  position: absolute;
  bottom: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  color: var(--ink);
  line-height: 1;
}
.pa-mora.pa-particle .pa-text { color: var(--ink-mute); }

/* — Riser and faller connectors — */
.pa-mora.pa-rise::after {
  /* vertical line going up from low to high — at the left edge of THIS mora */
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  height: 16px;
  border-left: 3px solid var(--vermilion);
}
.pa-mora.pa-fall::after {
  /* vertical line going down from high to low — at the left edge */
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  height: 16px;
  border-left: 3px solid var(--vermilion);
}
.pa-mora.pa-particle.pa-rise::after,
.pa-mora.pa-particle.pa-fall::after {
  border-color: var(--ink-soft);
}

/* — Minimal pair card — */
.pa-pair-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pa-pair {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.pa-pair-head {
  background: var(--indigo);
  color: #fffaf2;
  padding: 10px 16px;
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
}
.pa-pair-members {
  display: flex;
  flex-direction: column;
}
.pa-pair-row {
  display: grid;
  grid-template-columns: 160px 1fr 40px;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px dashed var(--line);
}
.pa-pair-row:first-child { border-top: none; }
.pa-pair-row:nth-child(even) { background: var(--bg-deep); }

.pa-ptest .pa-pattern-name {
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 600;
  color: var(--vermilion);
}
.pa-ptest .pa-pattern-tag {
  text-transform: capitalize;
}
.pa-ptest .pa-ptest-desc {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-top: 4px;
}

/* — Practice section — */
.pa-practice {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pa-practice-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px 20px;
}
.pa-practice-head {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vermilion);
}
.pa-practice-items {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.pa-practice-items li { margin-bottom: 6px; }
.pa-practice-items strong { color: var(--ink); }

/* Mobile — pitch accent */
@media (max-width: 700px) {
  .pa-row { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .pa-pair-row { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
  .pa-viz { min-height: 56px; }
  .pa-tts { justify-content: flex-start; }
  .pa-mora { width: 26px; }
  .pa-mora .pa-text { font-size: 14px; }
}

/* — Pitch demo button — */
.pa-tts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tts-pitch-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--indigo);
  color: var(--indigo);
  border-radius: 50%;
  cursor: pointer;
  transition: all .15s ease;
  padding: 0;
}
.tts-pitch-btn:hover {
  background: var(--indigo);
  color: #fffaf2;
  transform: scale(1.05);
}
.tts-pitch-btn:active { transform: scale(0.92); }
.tts-pitch-btn svg { display: block; }
.tts-pitch-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Banner with pitch-button legend, shown once at the top of any pa-rows section */
.pa-rows::before {
  content: "🔊 = natural · 〰️ = pitch contour (exaggerated)";
  display: block;
  font-size: 11.5px;
  color: var(--ink-mute);
  text-align: right;
  margin-bottom: 6px;
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — Onomatopoeia page
   ───────────────────────────────────────────────────────────────────── */

.ono-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.ono-row {
  display: grid;
  grid-template-columns: 130px 100px 180px 1fr 40px;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-top: 1px dashed var(--line);
}
.ono-row:first-child { border-top: none; }
.ono-row:nth-child(even) { background: var(--bg-deep); }
.ono-jp {
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.ono-romaji {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-style: italic;
}
.ono-en {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}
.ono-usage {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.55;
}
.ono-tts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Mobile — onomatopoeia */
@media (max-width: 780px) {
  .ono-row {
    grid-template-columns: 1fr 36px;
    grid-template-areas:
      "jp tts"
      "romaji tts"
      "en tts"
      "usage tts";
    gap: 2px 12px;
    padding: 12px 14px;
  }
  .ono-jp { grid-area: jp; }
  .ono-romaji { grid-area: romaji; margin-top: 1px; }
  .ono-en { grid-area: en; margin-top: 6px; }
  .ono-usage { grid-area: usage; margin-top: 2px; }
  .ono-tts { grid-area: tts; align-items: center; }
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — Idioms page
   ───────────────────────────────────────────────────────────────────── */

.idiom-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.idiom-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.idiom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.idiom-jp {
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.idiom-reading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.idiom-kana {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink-soft);
}
.idiom-romaji {
  font-size: 11.5px;
  color: var(--ink-mute);
  font-style: italic;
}
.idiom-literal,
.idiom-meaning {
  font-size: 13px;
  line-height: 1.6;
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
}
.idiom-literal {
  background: var(--bg-deep);
  color: var(--ink-soft);
}
.idiom-meaning {
  background: rgba(184,54,46,.06);
  color: var(--ink);
  border-left: 3px solid var(--vermilion);
  padding-left: 10px;
  border-radius: 0 8px 8px 0;
}
.idiom-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: middle;
  border: 1px solid var(--line);
}
.idiom-tag.idiom-tag-meaning {
  color: var(--vermilion);
  border-color: var(--vermilion);
}
.idiom-usage {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.6;
  font-style: italic;
  margin-top: 2px;
}

/* Mobile — idioms */
@media (max-width: 820px) {
  .idiom-list { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
   Inline glossary — click any Japanese term to see its meaning
   ───────────────────────────────────────────────────────────────────── */

.jp-term {
  cursor: pointer;
  position: relative;
  font-family: var(--font-jp);
  border-bottom: 1px dashed var(--vermilion);
  padding: 0 1px;
  transition: background .15s ease, border-bottom-style .15s ease;
  /* Keep each JP term intact — never break mid-character (動詞 / 活用) */
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
   JLPT Mock Test — full real-exam simulator
   ───────────────────────────────────────────────────────────────────── */

.mt-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-mute);
}

/* — Intro screen — */
.mt-intro {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 36px;
  box-shadow: var(--shadow-sm);
}
.mt-intro-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.mt-intro-badge {
  background: var(--vermilion);
  color: #fffaf2;
  font-weight: 700;
  font-size: 18px;
  padding: 6px 14px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}
.mt-intro-head h2 {
  margin: 0;
  font-size: 22px;
  color: var(--ink);
}
.mt-intro-lead {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0 0 22px;
}
.mt-intro-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
  padding: 16px;
  background: var(--bg-deep);
  border-radius: 12px;
}
.mt-intro-meta > div { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.mt-meta-l { font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.6px; }
.mt-meta-v { font-size: 20px; font-weight: 700; color: var(--vermilion); }

.mt-intro-sections {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  counter-reset: section;
}
.mt-intro-sections li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  counter-increment: section;
}
.mt-intro-sections li::before {
  content: counter(section) ". ";
  color: var(--vermilion);
  font-weight: 700;
  margin-right: 8px;
}
.mt-intro-sections strong { font-family: var(--font-jp); font-size: 15px; flex: 1; }
.mt-intro-sections span { font-size: 12.5px; color: var(--ink-mute); }

.mt-intro-rules h3 {
  font-size: 13.5px;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: 0.3px;
}
.mt-intro-rules ul {
  margin: 0 0 22px;
  padding-left: 20px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.mt-intro-action { display: flex; justify-content: center; }
.mt-start-btn {
  background: var(--vermilion);
  color: #fffaf2;
  border: none;
  border-radius: 10px;
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all .15s ease;
  box-shadow: var(--shadow-sm);
}
.mt-start-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* — Section bar (timer + position) — */
.mt-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 8px;
  z-index: 10;
}
.mt-bar-section-title {
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.mt-bar-section-meta {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.mt-bar-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--vermilion);
  font-variant-numeric: tabular-nums;
}
.mt-bar-timer .is-low,
#mt-timer.is-low { color: var(--vermilion); animation: timer-pulse 1s ease-in-out infinite; }
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* — Question navigator — */
.mt-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
  margin-bottom: 14px;
  padding: 10px;
  background: var(--bg-deep);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.mt-nav-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  color: var(--ink-soft);
  transition: all .12s ease;
}
.mt-nav-cell.is-answered { background: rgba(34,139,86,.12); color: #1d6e44; border-color: #1d6e44; }
.mt-nav-cell.is-current { background: var(--vermilion); color: #fffaf2; border-color: var(--vermilion); }
.mt-nav-cell:hover { transform: translateY(-1px); }

/* — Problem header — */
.mt-problem-head {
  background: var(--bg-deep);
  border-left: 4px solid var(--vermilion);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
}
.mt-problem-title {
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  color: var(--vermilion);
  margin-bottom: 4px;
}
.mt-problem-instruction {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* — Question & passage — */
.mt-question {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.mt-passage {
  background: var(--bg-deep);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
.mt-passage-body {
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
  white-space: pre-wrap;
}
.mt-prompt {
  font-family: var(--font-jp);
  font-size: 18px;
  color: var(--ink);
  line-height: 1.8;
  margin-bottom: 8px;
}
.mt-prompt u {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  font-weight: 600;
}
.mt-blank {
  display: inline-block;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 12px;
  margin: 0 4px;
  color: var(--vermilion);
  font-weight: 700;
}
.mt-prompt-kana {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.mt-prompt-en {
  font-size: 12.5px;
  color: var(--ink-mute);
  font-style: italic;
  margin-bottom: 12px;
}

/* — Options — */
.mt-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.mt-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all .12s ease;
  font-family: inherit;
}
.mt-option:hover {
  border-color: var(--vermilion);
}
.mt-option.is-selected {
  background: rgba(184,54,46,.06);
  border-color: var(--vermilion);
}
.mt-option-letter {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.mt-option.is-selected .mt-option-letter { background: var(--vermilion); color: #fffaf2; border-color: var(--vermilion); }
.mt-option-text {
  font-family: var(--font-jp);
  font-size: 16px;
  color: var(--ink);
}

/* — Footer / nav — */
.mt-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.mt-nav-btn,
.mt-submit-btn {
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  border: 1px solid var(--line);
}
.mt-nav-btn {
  background: var(--surface);
  color: var(--ink);
}
.mt-nav-btn:hover:not(:disabled) {
  border-color: var(--vermilion);
  color: var(--vermilion);
}
.mt-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mt-next-btn {
  background: var(--indigo);
  color: #fffaf2;
  border-color: var(--indigo);
}
.mt-next-btn:hover {
  background: var(--indigo-soft);
}
.mt-submit-btn {
  background: var(--vermilion);
  color: #fffaf2;
  border-color: var(--vermilion);
}
.mt-submit-btn:hover { background: var(--vermilion-soft); }

/* — Intermission — */
.mt-intermission {
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 32px;
  text-align: center;
}
.mt-intermission h2 {
  font-family: var(--font-jp);
  font-size: 20px;
  color: var(--ink);
  margin: 12px 0 14px;
}
.mt-intermission-meta {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 16px;
}
.mt-intermission-note {
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 20px;
}
.mt-warning {
  background: rgba(184,54,46,.08);
  color: var(--vermilion);
  border: 1px dashed var(--vermilion);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* — Score — */
.mt-score {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 36px;
}
.mt-score-headline {
  text-align: center;
  padding: 28px 0;
  margin-bottom: 28px;
  border-radius: 12px;
}
.mt-score-headline.is-pass {
  background: rgba(34,139,86,.10);
}
.mt-score-headline.is-fail {
  background: rgba(184,54,46,.08);
}
.mt-score-grade {
  font-family: var(--font-jp);
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
}
.mt-score-headline.is-pass .mt-score-grade { color: #1d6e44; }
.mt-score-headline.is-fail .mt-score-grade { color: var(--vermilion); }
.mt-score-percent {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 10px;
}

.mt-score-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.mt-score-section {
  display: grid;
  grid-template-columns: 1fr 200px 100px;
  align-items: center;
  gap: 16px;
}
.mt-score-section-title {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink);
}
.mt-score-section-bar {
  height: 14px;
  background: var(--bg-deep);
  border-radius: 7px;
  overflow: hidden;
}
.mt-score-section-fill {
  height: 100%;
  background: var(--vermilion);
  border-radius: 7px;
  transition: width 1s ease-out;
}
.mt-score-section-stats {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.mt-score-note {
  font-size: 12.5px;
  color: var(--ink-mute);
  background: var(--bg-deep);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px dashed var(--line);
  margin-bottom: 20px;
  line-height: 1.6;
}
.mt-score-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: center;
}
.mt-restart {
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: underline;
}

/* — Review — */
.mt-review {
  max-width: 720px;
  margin: 0 auto;
}
.mt-review-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 18px;
}
.mt-review-section h2 {
  font-family: var(--font-jp);
  font-size: 18px;
  color: var(--indigo);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--vermilion);
}
.mt-review-problem-head {
  background: var(--bg-deep);
  border-left: 3px solid var(--vermilion);
  padding: 10px 14px;
  margin: 16px 0 12px;
  border-radius: 0 6px 6px 0;
}
.mt-review-problem-title {
  font-family: var(--font-jp);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--vermilion);
}
.mt-review-problem-instruction {
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 3px;
}
.mt-review-q {
  padding: 14px 0;
  border-top: 1px dashed var(--line);
}
.mt-review-q:first-of-type { border-top: none; }
.mt-review-q-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.mt-review-q-num {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
}
.mt-review-q-status {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
}
.mt-review-q-status.is-correct {
  background: rgba(34,139,86,.12);
  color: #1d6e44;
}
.mt-review-q-status.is-wrong {
  background: rgba(184,54,46,.10);
  color: var(--vermilion);
}
.mt-review-opt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  margin: 6px 0;
  border-radius: 8px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  font-size: 14px;
}
.mt-review-opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mt-review-opt-explain {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  padding: 8px 10px 6px 34px;
  border-top: 1px dashed var(--line);
  margin-top: 2px;
}
.mt-review-opt.is-correct-opt {
  background: rgba(34,139,86,.10);
  border-color: #228b56;
}
.mt-review-opt.is-correct-opt .mt-review-opt-explain {
  color: #1d6e44;
  border-top-color: rgba(34,139,86,.30);
}
.mt-review-opt.is-wrong-opt {
  background: rgba(184,54,46,.08);
  border-color: var(--vermilion);
}
.mt-review-opt.is-wrong-opt .mt-review-opt-explain {
  color: #8a2a23;
  border-top-color: rgba(184,54,46,.30);
}
.mt-review-tag {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #228b56;
  color: #fffaf2;
}
.mt-review-tag.is-wrong-tag {
  background: var(--vermilion);
}
.mt-review-explain {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--bg-deep);
  border-left: 3px solid var(--indigo);
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.mt-review-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  padding: 16px;
}

/* — Resume banner & voice picker on mock-test intro — */
.mt-resume-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  margin-bottom: 22px;
  background: rgba(34, 60, 120, .06);
  border: 1px solid var(--indigo);
  border-radius: 10px;
  flex-wrap: wrap;
}
.mt-resume-text strong {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 4px;
}
.mt-resume-meta {
  font-size: 12px;
  color: var(--ink-mute);
}
.mt-resume-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.mt-resume-btn {
  background: var(--indigo);
  color: #fffaf2;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.mt-resume-btn:hover { background: #1a2c66; }
.mt-resume-btn-secondary {
  background: transparent;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.mt-resume-btn-secondary:hover { border-color: var(--vermilion); color: var(--vermilion); }
.mt-intro-voice {
  margin: 18px 0;
  padding: 14px 18px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.mt-intro-voice-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.mt-intro-voice-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.mt-intro-voice-hint {
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}

/* — Compound questions (passage-grammar + reading) — */
.mt-compound .mt-passage {
  margin-bottom: 24px;
}
.mt-sub-question {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px dashed var(--line);
}
.mt-sub-question:first-of-type { border-top: none; padding-top: 6px; }
.mt-sub-num {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--vermilion);
  background: rgba(184,54,46,.08);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
}
.mt-sub-prompt {
  font-family: var(--font-jp);
  font-size: 15.5px;
  margin-bottom: 10px;
  color: var(--ink);
  background: var(--bg-deep);
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
}
.mt-sub-options { margin-top: 4px; }

/* Nav-cell sub-count badge for compound items */
.mt-nav-cell .mt-nav-sub {
  display: inline;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-mute);
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}
.mt-nav-cell.is-current .mt-nav-sub,
.mt-nav-cell.is-answered .mt-nav-sub { color: inherit; opacity: .85; }
.mt-nav-cell.is-partial {
  background: linear-gradient(90deg, rgba(34,139,86,.18) 50%, var(--bg-deep) 50%);
  border-color: rgba(34,139,86,.45);
}

/* Compound block in review mode */
.mt-review-compound {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 14px 0 18px;
}
.mt-review-compound .mt-passage { margin-bottom: 14px; }
.mt-review-compound-score {
  font-size: 12.5px;
  color: var(--ink-mute);
  font-style: italic;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.mt-review-q-sub {
  background: var(--surface);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.mt-review-q-sub:last-child { margin-bottom: 0; }

/* — Binary "Mark as reviewed" toggle for flashcards / test pages — */
.prog-binary-floater {
  display: flex;
  justify-content: flex-end;
  padding: 14px 32px 0;
  margin: 0 auto;
  max-width: 1180px;
}
.prog-binary-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.prog-binary-btn:hover {
  border-color: #228b56;
  color: #228b56;
  background: rgba(34,139,86,.05);
}
.prog-binary-btn.is-done {
  background: #228b56;
  border-color: #228b56;
  color: #fffaf2;
}
.prog-binary-btn.is-done:hover { background: #1d6e44; border-color: #1d6e44; }

/* — "Mark hiragana/katakana as learned" button — */
.kana-learned-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.kana-learned-btn:hover {
  border-color: #228b56;
  color: #228b56;
  background: rgba(34,139,86,.05);
}
.kana-learned-btn.is-done {
  background: #228b56;
  border-color: #228b56;
  color: #fffaf2;
}
.kana-learned-btn.is-done:hover { background: #1d6e44; border-color: #1d6e44; }

/* — Listening section — */
.mt-listening {
  position: relative;
}
.mt-listening-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(34, 60, 120, .06), rgba(184, 54, 46, .04));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.mt-listening-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--indigo);
  color: #fffaf2;
  border: none;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  box-shadow: var(--shadow-sm);
}
.mt-listening-play:hover { background: var(--indigo-dark, #1a2c66); transform: translateY(-1px); }
.mt-listening-play:active { transform: translateY(0); }
.mt-listening-play.is-playing {
  background: var(--vermilion);
  animation: mt-listening-pulse 1.2s ease-in-out infinite;
}
@keyframes mt-listening-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 54, 46, .35); }
  50%      { box-shadow: 0 0 0 8px rgba(184, 54, 46, 0); }
}
.mt-listening-hint {
  font-size: 12.5px;
  color: var(--ink-mute);
  font-style: italic;
}
.mt-listening-question,
.mt-listening-situation {
  font-family: var(--font-jp);
  font-size: 17px;
  line-height: 1.65;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 14px;
  color: var(--ink);
}
.mt-listening-situation {
  border-left: 3px solid var(--vermilion);
}
.mt-listening-opt-tts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  color: var(--indigo);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease;
}

/* Picture grid for 問題1 task questions */
.mt-listening-img-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.mt-option-img {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 12px !important;
  gap: 8px;
  position: relative;
  text-align: center;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.mt-option-img:hover { border-color: var(--indigo); transform: translateY(-1px); }
.mt-option-img.is-selected {
  border-color: var(--vermilion);
  background: rgba(184, 54, 46, .06);
  box-shadow: 0 0 0 3px rgba(184, 54, 46, .15);
}
.mt-option-img .mt-option-letter {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--indigo);
  color: #fffaf2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
}
.mt-option-img.is-selected .mt-option-letter { background: var(--vermilion); }
.mt-option-img-pic {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 8px;
  background: #fffaf2;
}
.mt-option-img-missing {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-deep);
  border-radius: 8px;
  font-size: 32px;
  color: var(--ink-mute);
}
.mt-option-img-caption {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}

/* Single situation picture for 問題3 expression questions */
.mt-listening-situation-img {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.mt-listening-situation-img img {
  max-width: 360px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fffaf2;
  box-shadow: var(--shadow-sm);
}

/* Review-mode picture thumbnails */
.mt-review-opt-thumb {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 6px;
  background: #fffaf2;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.mt-review-situation-img {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.mt-review-situation-img img {
  max-width: 280px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}

@media (max-width: 700px) {
  .mt-listening-img-grid { gap: 8px; }
  .mt-option-img { padding: 8px !important; }
  .mt-option-img-caption { font-size: 11px; }
}
.mt-listening-opt-tts:hover { background: rgba(34, 60, 120, .10); }
.mt-listening-opt-tts:focus { outline: 2px solid var(--indigo); outline-offset: 2px; }
.mt-listening-options .mt-option {
  align-items: center;
}

/* Review-mode transcript */
.mt-review-transcript {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-family: var(--font-jp);
  font-size: 14.5px;
  line-height: 1.7;
}
.mt-transcript-setup {
  font-style: italic;
  color: var(--ink-mute);
  font-size: 13px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.mt-transcript-dialogue {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
}
.mt-transcript-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.mt-transcript-speaker {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--indigo);
  color: #fffaf2;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
}
.mt-transcript-text {
  flex: 1;
}
.mt-transcript-question,
.mt-transcript-prompt {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-weight: 600;
  color: var(--ink);
}
.mt-transcript-situation {
  font-weight: 600;
  color: var(--ink);
}

/* Mobile */
@media (max-width: 700px) {
  .mt-intro,
  .mt-score,
  .mt-intermission { padding: 22px 18px; }
  .mt-intro-meta { grid-template-columns: 1fr; }
  .mt-score-section { grid-template-columns: 1fr; gap: 4px; }
  .mt-score-section-stats { text-align: left; }
  .mt-bar { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* — Question Papers hub — */
.qp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.qp-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  text-decoration: none;
  color: var(--ink);
  transition: all .15s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.qp-card:hover {
  border-color: var(--vermilion);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.qp-card.qp-card-soon {
  opacity: 0.55;
  cursor: not-allowed;
}
.qp-card.qp-card-soon:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }

.qp-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.qp-card-level {
  font-family: var(--font-jp);
  font-size: 32px;
  font-weight: 900;
  color: var(--vermilion);
  line-height: 1;
}
.qp-card-status {
  background: rgba(34,139,86,.12);
  color: #1d6e44;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.5px;
}
.qp-card-status.qp-status-soon {
  background: var(--bg-deep);
  color: var(--ink-mute);
}
.qp-card-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.qp-card-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 14px;
  flex: 1;
}
.qp-card-meta {
  display: flex;
  gap: 18px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.qp-card-meta > div { display: flex; flex-direction: column; gap: 2px; }
.qp-meta-l { font-size: 10.5px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.5px; }
.qp-meta-v { font-size: 14px; font-weight: 700; color: var(--ink); }

.qp-card-history {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qp-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
}
.qp-history-label { color: var(--ink-mute); letter-spacing: 0.02em; }
.qp-history-value { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.qp-history-pass { color: #1d6e44; }
.qp-history-fail { color: var(--vermilion); }

.qp-explainer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.qp-explainer p { margin: 0 0 12px; }
.qp-explainer ol {
  margin: 10px 0 0;
  padding-left: 24px;
}
.qp-explainer ol li { margin-bottom: 6px; }
.qp-explainer strong { color: var(--ink); }

/* On the homepage Essentials/Foundation cards, stack the JP terms vertically
   in the meta line so each kanji sits on its own row (tategaki feel).
   The surrounding English text still flows horizontally next to the column. */
.level-meta .jp-term {
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: inline-block;
  vertical-align: middle;
  border-bottom: none;
  border-right: 1px dashed var(--vermilion);
  padding: 2px 2px;
  margin: 0 4px;
  line-height: 1.15;
  letter-spacing: 1px;
}
.level-meta .jp-term:hover {
  background: rgba(184,54,46,.08);
  border-right-style: solid;
}
.jp-term:hover {
  background: rgba(184,54,46,.08);
  border-bottom-style: solid;
}
.jp-term:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 2px;
  border-radius: 3px;
}

/* When jp-term is used on a block element like a level-code or cat-jp
   (the big kanji or category badge), drop the underline and add a subtle
   hover pill instead — the underline would clash with the big-glyph styling. */
.level-code.jp-term,
.cat-jp.jp-term,
.stamp.jp-term,
.brand-sub.jp-term,
.kicker.jp-term {
  border-bottom: none;
  padding: 0 4px;
  border-radius: 6px;
}
.level-code.jp-term:hover,
.cat-jp.jp-term:hover,
.stamp.jp-term:hover,
.brand-sub.jp-term:hover,
.kicker.jp-term:hover {
  background: rgba(184,54,46,.06);
}

/* Inside a .section-head .jp (the small kana label next to each H2),
   tighter affordance. */
.section-head .jp.jp-term {
  border-bottom-color: var(--ink-mute);
}
.section-head .jp.jp-term:hover {
  border-bottom-color: var(--vermilion);
}

/* The popup itself */
.jp-glossary-popup {
  position: absolute;
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 44px 14px 18px;
  box-shadow: var(--shadow-lg);
  max-width: 320px;
  min-width: 200px;
  animation: jpg-fade .15s ease-out;
}
.jp-glossary-popup[hidden] { display: none; }
@keyframes jpg-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jp-glossary-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: none;
  background: var(--bg-deep);
  color: var(--ink-soft);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
}
.jp-glossary-close:hover {
  background: var(--vermilion);
  color: #fffaf2;
}
.jp-glossary-term {
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 700;
  color: var(--vermilion);
  line-height: 1.2;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.jp-glossary-romaji {
  font-size: 11.5px;
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.jp-glossary-meaning {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Mobile — slightly tighter popup */
@media (max-width: 540px) {
  .jp-glossary-popup {
    max-width: calc(100vw - 24px);
    padding: 14px 40px 12px 16px;
  }
  .jp-glossary-term { font-size: 20px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — Kanji radicals page
   ───────────────────────────────────────────────────────────────────── */

/* — Position layout (the 7 positions) — */
.rad-positions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.rad-pos {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
}
.rad-pos-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.rad-pos-glyph {
  font-family: var(--font-jp);
  font-size: 36px;
  font-weight: 700;
  color: var(--vermilion);
  line-height: 1;
  width: 48px;
  text-align: center;
}
.rad-pos-jp {
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.rad-pos-en {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.rad-pos-en em {
  font-style: italic;
  color: var(--vermilion);
}
.rad-pos-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 10px;
}
.rad-pos-examples {
  font-family: var(--font-jp);
  font-size: 13px;
  background: var(--bg-deep);
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1.55;
  color: var(--ink);
}

/* — Radical list (per-category) — */
.rad-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.rad-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px 16px;
}
.rad-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.rad-glyph {
  font-family: var(--font-jp);
  font-size: 42px;
  font-weight: 700;
  color: var(--vermilion);
  line-height: 1;
  width: 60px;
  text-align: center;
  flex-shrink: 0;
}
.rad-card-meta {
  flex: 1;
  min-width: 0;
}
.rad-name {
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.rad-romaji {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 1px;
}
.rad-position {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 3px;
}
.rad-position strong {
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: capitalize;
}
.rad-examples {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--bg-deep);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  flex-wrap: wrap;
}
.rad-tag {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--surface);
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* Mobile — radicals */
@media (max-width: 700px) {
  .rad-positions { grid-template-columns: 1fr; }
  .rad-pos-head { gap: 10px; }
  .rad-pos-glyph { font-size: 30px; width: 40px; }
  .rad-glyph { font-size: 36px; width: 52px; }
}

/* "All levels" badge — used for radicals and other foundational content
   that isn't tied to one JLPT level. Indigo instead of vermilion so it
   reads as different-from-JLPT. */
.cg-jlpt.cg-jlpt-all,
.pmd-jlpt.pmd-jlpt-all {
  background: rgba(29, 53, 87, 0.10);
  color: var(--indigo);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — Topic Vocabulary page
   ───────────────────────────────────────────────────────────────────── */

.tv-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.tv-search { width: 100%; max-width: 100%; }
.tv-levels { display: flex; flex-wrap: wrap; gap: 6px; }

.tv-meta {
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 8px;
}

.tv-list {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.tv-row {
  display: grid;
  grid-template-columns: 130px 100px 110px 1fr 38px 38px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px dashed var(--line);
}
.tv-row:first-child { border-top: none; }
.tv-row:nth-child(even) { background: var(--bg-deep); }
.tv-jp {
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.tv-kana {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink-soft);
}
.tv-romaji {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-en {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.tv-jlpt-cell { display: flex; justify-content: flex-end; }
.tv-jlpt-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.3px;
}
.tv-jlpt-N5 { background: rgba(34,139,86,.12);  color: #1d6e44; }
.tv-jlpt-N4 { background: rgba(29,53,87,.10);   color: var(--indigo); }
.tv-jlpt-N3 { background: rgba(184,137,58,.12); color: var(--gold-deep, #8a6628); }
.tv-jlpt-N2 { background: rgba(184,54,46,.10);  color: var(--vermilion); }
.tv-jlpt-N1 { background: rgba(28,28,28,.08);   color: var(--ink); }

/* Mobile — topic vocab */
@media (max-width: 780px) {
  .tv-row {
    grid-template-columns: 1fr auto 38px;
    grid-template-areas:
      "jp jlpt tts"
      "kana jlpt tts"
      "romaji jlpt tts"
      "en jlpt tts";
    gap: 2px 12px;
    padding: 10px 12px;
  }
  .tv-jp { grid-area: jp; }
  .tv-kana { grid-area: kana; }
  .tv-romaji { grid-area: romaji; }
  .tv-en { grid-area: en; margin-top: 4px; }
  .tv-jlpt-cell { grid-area: jlpt; align-self: center; }
  .tv-tts { grid-area: tts; align-self: center; }
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — SRS Review page
   ───────────────────────────────────────────────────────────────────── */

/* — Stats strip — */
.srs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 12px 0 22px;
}
.srs-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.srs-stat-n {
  font-size: 28px;
  font-weight: 700;
  color: var(--vermilion);
  line-height: 1;
  font-family: var(--font-jp);
}
.srs-stat-l {
  font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-top: 6px;
}

/* — Settings row (compact, single line) — */
.srs-settings {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 14px;
  font-size: 13px;
}
.srs-setting-label {
  color: var(--ink-soft);
  font-weight: 500;
}
.srs-setting-input {
  width: 70px;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  text-align: center;
}
.srs-setting-input:focus {
  outline: none;
  border-color: var(--vermilion);
}
.srs-setting-input::-webkit-outer-spin-button,
.srs-setting-input::-webkit-inner-spin-button {
  height: 22px;
}

/* — Start button — */
.srs-start-area { display: flex; justify-content: center; margin: 8px 0 18px; }
.srs-start-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 40px;
  background: var(--vermilion);
  color: #fffaf2;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.srs-start-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.srs-start-btn:active { transform: translateY(0); }
.srs-start-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.srs-start-count {
  font-size: 12px;
  opacity: 0.85;
}

.srs-start-empty {
  background: var(--bg-deep);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
}
.srs-start-empty-icon {
  font-size: 32px;
  color: var(--vermilion);
  margin-bottom: 8px;
}
.srs-start-empty-msg {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.srs-start-empty-sub {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 4px;
}

/* — Deck grid — */
.srs-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.srs-deck-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: all .15s ease;
}
.srs-deck-card:hover {
  border-color: var(--vermilion);
  box-shadow: var(--shadow-sm);
}
.srs-deck-card.is-enabled {
  border-color: var(--vermilion);
  background: rgba(184,54,46,.04);
}
.srs-deck-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--vermilion);
  cursor: pointer;
}
.srs-deck-info { flex: 1; min-width: 0; }
.srs-deck-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.srs-deck-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 3px;
}
.srs-deck-stats .srs-due {
  color: var(--vermilion);
  font-weight: 600;
}

/* — Review session — */
.srs-review-section { padding-top: 24px; }
.srs-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.srs-exit {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all .15s ease;
}
.srs-exit:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
}
.srs-progress {
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.srs-progress-meta { display: inline-flex; gap: 6px; margin-left: 8px; }
.srs-tag-new {
  background: var(--vermilion);
  color: #fffaf2;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.5px;
}
.srs-tag-level {
  background: var(--bg-deep);
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line);
}

.srs-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 48px 32px;
  text-align: center;
  box-shadow: var(--shadow);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 18px;
}
.srs-card-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.srs-card-jp {
  font-family: var(--font-jp);
  font-size: 72px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: 2px;
}
.srs-card-hint {
  font-size: 12.5px;
  color: var(--ink-mute);
  font-style: italic;
}
.srs-card-back { margin-top: 22px; }
.srs-card-divider {
  height: 1px;
  background: var(--line);
  margin: 0 auto 22px;
  max-width: 200px;
}
.srs-card-reading {
  font-family: var(--font-jp);
  font-size: 22px;
  color: var(--vermilion);
  margin-bottom: 8px;
  font-weight: 600;
}
.srs-card-meaning {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.5;
}
.srs-card-extra {
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
}
.srs-card-tts { margin-top: 16px; }
.srs-card-tts .tts-btn {
  width: 40px;
  height: 40px;
}
.srs-card-tts .tts-btn svg { width: 16px; height: 16px; }

/* Rating buttons */
.srs-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.srs-show-btn {
  grid-column: 1 / -1;
  padding: 16px;
  background: var(--indigo);
  color: #fffaf2;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  letter-spacing: 0.3px;
}
.srs-show-btn:hover { background: var(--indigo-soft); }

.srs-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: all .15s ease;
}
.srs-rate:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.srs-rate-key {
  font-size: 11px;
  background: var(--bg-deep);
  color: var(--ink-soft);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 1px solid var(--line);
}
.srs-rate-label {
  font-size: 14.5px;
  font-weight: 600;
}
.srs-rate-help {
  font-size: 11px;
  color: var(--ink-mute);
}
.srs-rate-again { color: var(--vermilion); border-color: rgba(184,54,46,.4); }
.srs-rate-again:hover { background: rgba(184,54,46,.08); }
.srs-rate-hard { color: var(--gold-deep, #8a6628); border-color: rgba(184,137,58,.4); }
.srs-rate-hard:hover { background: rgba(184,137,58,.08); }
.srs-rate-good { color: #1d6e44; border-color: rgba(34,139,86,.4); }
.srs-rate-good:hover { background: rgba(34,139,86,.08); }
.srs-rate-easy { color: var(--indigo); border-color: rgba(29,53,87,.4); }
.srs-rate-easy:hover { background: rgba(29,53,87,.08); }

.srs-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.srs-done-icon {
  font-size: 48px;
  color: #1d6e44;
}
.srs-done-msg {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.srs-done-sub {
  font-size: 13.5px;
  color: var(--ink-mute);
}

/* Mobile — SRS */
@media (max-width: 700px) {
  .srs-card-jp { font-size: 56px; }
  .srs-card { padding: 32px 20px; }
  .srs-actions { grid-template-columns: repeat(2, 1fr); }
  .srs-deck-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — Stroke Order page
   ───────────────────────────────────────────────────────────────────── */

/* Two-column workspace: animation on the left (info → canvas → controls
   stacked), drawing canvas on the right */
.so-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 18px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  align-items: stretch;
}
.so-anim-col,
.so-prac-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.so-canvas {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.so-canvas svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.so-placeholder {
  color: var(--ink-mute);
  font-size: 13px;
  font-style: italic;
}

.so-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.so-kanji-big {
  font-family: var(--font-jp);
  font-size: 48px;
  font-weight: 700;
  color: var(--vermilion);
  text-align: center;
  line-height: 1;
  padding: 0 8px;
}
.so-meta { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.so-meta-empty { font-style: italic; color: var(--ink-mute); }
.so-meaning {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.so-readings {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.so-readings > div { display: flex; align-items: baseline; gap: 8px; }
.so-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-mute);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  min-width: 28px;
  text-align: center;
}
.so-strokes {
  font-size: 12px;
  color: var(--ink-mute);
}

.so-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.so-input { max-width: 100%; }
.so-btns { display: flex; gap: 8px; }
.so-btn {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.so-btn:hover { border-color: var(--vermilion); color: var(--vermilion); }
.so-btn.so-play { background: var(--vermilion); color: #fffaf2; border-color: var(--vermilion); }
.so-btn.so-play:hover { background: var(--vermilion-soft); }

.so-speed {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.so-speed label { flex-shrink: 0; }
.so-speed input[type="range"] {
  flex: 1;
  accent-color: var(--vermilion);
}
.so-speed span { min-width: 36px; text-align: right; font-weight: 600; color: var(--ink); }

.so-toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.so-toggles label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.so-toggles input { accent-color: var(--vermilion); }

/* — Grid of clickable kanji — */
.so-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  margin-top: 12px;
}
.so-grid-cell {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s ease;
}
.so-grid-cell:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* — Practice column (right side of workspace) — */
.so-prac-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.so-prac-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--indigo);
}
.so-prac-head .jp {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink-soft);
}
.so-practice-canvas {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: crosshair;
  touch-action: none;
}
.so-practice-placeholder {
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
  text-align: center;
  padding: 0 20px;
  pointer-events: none;
}
.so-practice-placeholder span {
  font-family: var(--font-jp);
  font-size: 32px;
  font-style: normal;
  color: var(--vermilion);
  display: block;
  margin-top: 4px;
}
.so-practice-canvas svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.so-practice-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.so-btn-primary {
  background: var(--vermilion);
  color: #fffaf2;
  border-color: var(--vermilion);
}
.so-btn-primary:hover {
  background: var(--vermilion-soft);
  border-color: var(--vermilion-soft);
  color: #fffaf2;
}
.so-practice-status {
  font-size: 14px;
  color: var(--ink);
  background: var(--bg-deep);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  line-height: 1.55;
}
.so-practice-status strong { color: var(--vermilion); margin-right: 6px; }
.so-practice-tips {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.65;
}
.so-practice-tips li { margin-bottom: 3px; }

/* Mobile — stroke order */
@media (max-width: 800px) {
  .so-workspace { grid-template-columns: 1fr; }
  .so-canvas, .so-practice-canvas { max-width: 380px; margin: 0 auto; width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────
   Essentials — Cultural notes page
   ───────────────────────────────────────────────────────────────────── */

.cn-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cn-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 18px;
}
.cn-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.cn-jp {
  font-family: var(--font-jp);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 1px;
}
.cn-reading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cn-kana {
  font-family: var(--font-jp);
}
.cn-romaji {
  font-style: italic;
}
.cn-en {
  color: var(--vermilion);
  font-weight: 600;
  font-style: normal;
}
.cn-desc {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.65;
  margin: 0;
}
.cn-tip {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: var(--bg-deep);
  border-left: 3px solid var(--gold, #b8893a);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.cn-tip-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold, #b8893a);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-right: 8px;
  padding: 1px 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* ============================================================
   Admin portal (admin.html / admin.js)
   Minimal, reuses existing theme tokens. Status badges are
   hyphenated (.badge-pending/.badge-approved/.badge-rejected)
   so they don't collide with the category-card .badge above.
   ============================================================ */

/* Users table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}
.admin-table thead th {
  background: var(--bg-deep);
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.admin-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: rgba(184, 54, 46, .03); }
.admin-table .admin-cell-email {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.admin-table .admin-cell-muted { color: var(--ink-mute); }
.admin-table .admin-cell-actions {
  white-space: nowrap;
  text-align: right;
}

/* Small action buttons inside the table / modal */
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease;
}
.admin-btn + .admin-btn { margin-left: 6px; }
.admin-btn:hover { border-color: var(--vermilion); color: var(--vermilion); }
.admin-btn:active { transform: scale(.97); }
.admin-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.admin-btn-primary {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #fffaf2;
}
.admin-btn-primary:hover {
  background: #94251f;
  border-color: #94251f;
  color: #fffaf2;
}
.admin-btn-approve {
  border-color: rgba(34, 139, 86, .45);
  color: #1d6e44;
}
.admin-btn-approve:hover {
  background: #228b56;
  border-color: #228b56;
  color: #fffaf2;
}
.admin-btn-danger {
  border-color: rgba(184, 54, 46, .45);
  color: var(--vermilion);
}
.admin-btn-danger:hover {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #fffaf2;
}

/* Status badges */
.badge-pending,
.badge-approved,
.badge-rejected {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-pending {
  background: rgba(184, 137, 58, .12);
  color: var(--gold-deep, #8a6628);
  border-color: rgba(184, 137, 58, .35);
}
.badge-approved {
  background: rgba(34, 139, 86, .12);
  color: #1d6e44;
  border-color: rgba(34, 139, 86, .35);
}
.badge-rejected {
  background: rgba(184, 54, 46, .10);
  color: var(--vermilion);
  border-color: rgba(184, 54, 46, .35);
}

/* Modal (edit / confirm dialogs) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 16, 12, .42);
}
.modal.is-open { display: flex; }
.modal-card {
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px 26px 22px;
  animation: fade-in .2s ease;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--ink-mute);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.modal-close:hover { background: var(--bg-deep); color: var(--ink); }
.modal-body {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.modal-body .auth-label { margin-top: 12px; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.modal-msg {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
}
.modal-msg.is-error {
  background: rgba(184, 54, 46, .10);
  color: var(--vermilion);
  border: 1px solid rgba(184, 54, 46, .35);
}
.modal-msg.is-info {
  background: rgba(34, 60, 120, .10);
  color: var(--indigo);
  border: 1px solid rgba(34, 60, 120, .35);
}

@media (max-width: 640px) {
  .admin-table { font-size: 13px; }
  .admin-table thead { display: none; }
  .admin-table tbody td { display: block; padding: 6px 14px; }
  .admin-table tbody td::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 88px;
    font-size: 11px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .admin-table tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .admin-cell-actions { text-align: left; }
  .modal-card { padding: 20px 18px 18px; }
}

/* Admin link in the floating TOC drawer (injected by toc.js, role-gated).
   Mirrors .toc-link visuals; kept separate so the topic filter never toggles it. */
.toc-admin-group {
  border-top: 1px solid var(--line);
  padding: 8px 0 6px;
  background: var(--bg-deep);
}
.toc-admin-group[hidden] { display: none !important; }
.toc-admin-link {
  display: block;
  padding: 6px 18px;
  color: var(--vermilion);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  transition: background .12s ease, color .12s ease, padding-left .12s ease;
}
.toc-admin-link:hover {
  background: var(--surface);
  color: #94251f;
  padding-left: 22px;
  text-decoration: none;
}


/* ============================================================
   Admin portal — layout/structure additions (admin.html)
   Extends the "Admin portal" block above; reuses the same theme
   tokens. The table, .admin-btn*, .badge-*, and .modal* rules
   live above — these add the page shell, panels, stats, pending
   rows, toolbar, and the few extra cell/badge styles admin.js uses.
   ============================================================ */

/* Access gate (shown until admin.js confirms role==='admin') */
.admin-gate {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 20px;
  min-height: 50vh;
}
.admin-gate[hidden] { display: none !important; }
.admin-gate-card {
  text-align: center;
  color: var(--ink-mute);
  font-size: 14px;
}
.admin-gate-card .auth-stamp { margin-bottom: 14px; }

/* Page shell */
.admin-app { padding-top: 32px; padding-bottom: 64px; }
.admin-app[hidden] { display: none !important; }
.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.admin-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.admin-subtitle { font-size: 13.5px; color: var(--ink-mute); margin: 0; }
.admin-subtitle strong { color: var(--ink-soft); font-weight: 600; }
.admin-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Page-level message banner — extends .modal-msg with a success tone */
.admin-msg { margin: 0 0 18px; }
.modal-msg.is-ok,
.admin-msg.is-ok {
  background: rgba(34, 139, 86, .10);
  color: #1d6e44;
  border: 1px solid rgba(34, 139, 86, .35);
}

/* Stat chips */
.admin-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}
.admin-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 96px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.admin-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.admin-stat-label {
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

/* Panels */
.admin-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px 24px;
  margin-bottom: 26px;
}
.admin-panel-head { margin-bottom: 16px; }
.admin-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.admin-panel-note { font-size: 13px; color: var(--ink-mute); margin: 4px 0 0; }
.admin-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Pending approvals list */
.admin-pending-list { display: flex; flex-direction: column; gap: 10px; }
.admin-pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.admin-pending-info { min-width: 0; flex: 1 1 240px; }
.admin-pending-name { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.admin-pending-email { font-size: 13px; color: var(--ink-soft); }
.admin-pending-meta { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.admin-pending-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Toolbar (search + filter) */
.admin-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.admin-search,
.admin-select {
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-deep);
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.admin-search { flex: 1 1 240px; min-width: 0; }
.admin-select { flex: 0 0 auto; cursor: pointer; }
.admin-search:focus,
.admin-select:focus { border-color: var(--vermilion); background: var(--surface); }

.admin-table-scroll { width: 100%; overflow-x: auto; }

/* Extra table-cell helpers used by admin.js */
.admin-cell-name { font-weight: 600; color: var(--ink); }
.admin-cell-level {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.admin-cell-prog {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-role-admin {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  background: rgba(184, 54, 46, .10);
  color: var(--vermilion);
  border: 1px solid rgba(184, 54, 46, .35);
}

/* Empty states */
.admin-empty {
  text-align: center;
  color: var(--ink-mute);
  font-size: 13.5px;
  padding: 18px 0 6px;
  margin: 0;
}

/* Edit modal extras */
.modal-sub { font-size: 13px; color: var(--ink-mute); margin: 0 0 8px; }
.modal-sub strong { color: var(--ink-soft); }
.admin-input { width: 100%; }
select.admin-input { cursor: pointer; }
.admin-modal-warn {
  margin: 14px 0 0;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(184, 54, 46, .08);
  border: 1px solid rgba(184, 54, 46, .30);
  color: var(--vermilion);
  font-size: 12.5px;
  line-height: 1.5;
}
.admin-modal-warn[hidden] { display: none !important; }
.admin-modal-hint {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .admin-header { flex-direction: column; }
  .admin-pending-row { flex-direction: column; align-items: flex-start; }
  .admin-pending-actions { width: 100%; }
  /* In the existing mobile card view, push the action buttons to their own row. */
  .admin-table .admin-cell-actions { padding-top: 10px; }
}

/* ============================================================
   Phase 2/3 — Onboarding · Dashboard · Profile · 2FA code input
   APPENDED (additive). All rules reuse the existing theme tokens
   (--vermilion, --ink*, --surface, --bg*, --line, --r*, --shadow*)
   and lean on the established .auth-* card/form primitives above,
   so these pages inherit the washi/sumi/vermilion look for free.
   Nothing above is modified.
   ============================================================ */

/* ------------------------------------------------------------
   Onboarding (onboarding.html) — a multi-step intake form rendered
   inside the existing .auth-card. Only one .ob-step is visible at a
   time; JS toggles [hidden]. Widened card + progress rail + choice
   chips + step nav.
   ------------------------------------------------------------ */
.ob-card { max-width: 600px; }            /* wider than the 460px auth card */

/* Stepper progress rail */
.ob-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
}
.ob-progress-track {
  flex: 1;
  height: 6px;
  background: var(--bg-deep);
  border-radius: 999px;
  overflow: hidden;
}
.ob-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--vermilion), #d65d54);
  width: 0;
  transition: width .35s ease;
}
.ob-progress-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A single question step */
.ob-step { animation: fade-in .3s ease; }
.ob-step[hidden] { display: none !important; }
.ob-step-title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.25;
}
.ob-step-help {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 18px;
}

/* Selectable choice chips (single- or multi-select; JS sets .is-selected) */
.ob-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.ob-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}
.ob-choice:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  transform: translateY(-1px);
}
.ob-choice.is-selected {
  background: rgba(184, 54, 46, .08);
  border-color: var(--vermilion);
  color: var(--vermilion);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--vermilion);
}
.ob-choice-jp {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink-mute);
}
.ob-choice.is-selected .ob-choice-jp { color: var(--vermilion); }

/* Stacked option cards (e.g. level pick with a sub-line) */
.ob-options { display: flex; flex-direction: column; gap: 10px; }
.ob-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.ob-option:hover { border-color: var(--vermilion); transform: translateY(-1px); }
.ob-option.is-selected {
  background: rgba(184, 54, 46, .08);
  border-color: var(--vermilion);
  box-shadow: inset 0 0 0 1px var(--vermilion);
}
.ob-option-code {
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 900;
  color: var(--vermilion);
  line-height: 1;
  flex-shrink: 0;
  min-width: 38px;
}
.ob-option-body { min-width: 0; }
.ob-option-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.ob-option-desc { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }

/* Range / minutes slider readout */
.ob-range-readout {
  font-family: var(--font-jp);
  font-size: 28px;
  font-weight: 900;
  color: var(--vermilion);
  line-height: 1;
  margin: 4px 0 10px;
}
.ob-range-readout small { font-size: 14px; color: var(--ink-mute); font-weight: 500; }

/* Step navigation footer */
.ob-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.ob-nav .ob-nav-spacer { flex: 1; }
.ob-back {
  background: none;
  border: none;
  color: var(--ink-mute);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  padding: 6px 4px;
  transition: color .15s ease;
}
.ob-back:hover { color: var(--vermilion); }
.ob-back[hidden] { display: none !important; }

/* Plan-generation state (after submit, while the edge fn runs) */
.ob-generating {
  text-align: center;
  padding: 24px 8px;
  animation: fade-in .3s ease;
}
.ob-spinner {
  width: 38px;
  height: 38px;
  margin: 0 auto 16px;
  border: 3px solid var(--bg-deep);
  border-top-color: var(--vermilion);
  border-radius: 50%;
  animation: ljb-spin .8s linear infinite;
}
@keyframes ljb-spin { to { transform: rotate(360deg); } }
.ob-generating-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.ob-generating-note { font-size: 13px; color: var(--ink-mute); margin: 0; }

/* ------------------------------------------------------------
   Dashboard (dashboard.html) — "what to do next" cards + a snapshot
   of overall progress. Reuses the .pd-* progress widgets where it can;
   these add the greeting header, the next-step card grid, and the
   plan/empty states.
   ------------------------------------------------------------ */
.dash { padding-top: 32px; padding-bottom: 64px; }

.dash-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.dash-greeting {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.dash-greeting .accent { color: var(--vermilion); }
.dash-subtitle { font-size: 14px; color: var(--ink-soft); margin: 0; }
.dash-meta {
  font-size: 12.5px;
  color: var(--ink-mute);
  text-align: right;
}

/* Section heading inside the dashboard */
.dash-section { margin-top: 30px; }
.dash-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.dash-section-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--indigo);
  margin: 0;
}
.dash-section-jp {
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
}
.dash-section-link {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--vermilion);
}

/* "What to do next" card grid */
.dash-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.dash-next-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dash-next-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--vermilion);
  color: var(--ink);
  text-decoration: none;
}
.dash-next-step {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vermilion);
  background: rgba(184, 54, 46, .10);
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.dash-next-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.3;
}
.dash-next-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 14px;
  flex: 1;
}
.dash-next-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vermilion);
}
.dash-next-cta-arrow { transition: transform .15s ease; }
.dash-next-card:hover .dash-next-cta-arrow { transform: translateX(4px); }
/* Decorative kanji in the corner, echoing .level-card .ideo */
.dash-next-card .ideo {
  position: absolute;
  right: 12px;
  bottom: -8px;
  font-family: var(--font-jp);
  font-size: 64px;
  font-weight: 900;
  color: rgba(28, 28, 28, .04);
  pointer-events: none;
  line-height: 1;
}
.dash-next-card.is-done .dash-next-step {
  color: #1d6e44;
  background: rgba(34, 139, 86, .12);
}

/* Compact progress snapshot bar (overall) */
.dash-progress {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.dash-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dash-progress-num {
  font-family: var(--font-jp);
  font-size: 34px;
  font-weight: 900;
  color: var(--vermilion);
  line-height: 1;
}
.dash-progress-num small { font-size: 16px; color: var(--ink-mute); font-weight: 500; font-family: inherit; }
.dash-progress-pct { font-size: 24px; font-weight: 700; color: var(--vermilion); }
.dash-progress-bar {
  height: 8px;
  background: var(--bg-deep);
  border-radius: 999px;
  overflow: hidden;
}
.dash-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--vermilion), #d65d54);
  transition: width .5s ease;
}

/* Empty / no-plan-yet state */
.dash-empty {
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 40px 24px;
  box-shadow: var(--shadow-sm);
}
.dash-empty-stamp {
  font-family: var(--font-jp);
  font-size: 44px;
  font-weight: 900;
  color: var(--vermilion);
  background: rgba(184, 54, 46, .08);
  width: 76px;
  height: 76px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.dash-empty-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.dash-empty-note {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 420px;
  margin: 0 auto 20px;
}

@media (max-width: 640px) {
  .dash-header { flex-direction: column; align-items: flex-start; }
  .dash-meta { text-align: left; }
  .dash-progress-top { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ------------------------------------------------------------
   Profile / settings (profile.html) — grouped settings sections,
   each a card with a header + a stack of rows. Form controls reuse
   the .auth-input / .auth-label / .auth-submit primitives.
   ------------------------------------------------------------ */
.profile { padding-top: 32px; padding-bottom: 64px; max-width: 720px; margin: 0 auto; }

.profile-header { margin-bottom: 22px; }
.profile-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.profile-subtitle { font-size: 13.5px; color: var(--ink-mute); margin: 0; }

.settings-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px 24px;
  margin-bottom: 20px;
}
.settings-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.settings-section-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.settings-section-jp {
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
}
.settings-section-note {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin: 0 0 16px;
}
.settings-section.is-danger { border-color: rgba(184, 54, 46, .35); }
.settings-section.is-danger .settings-section-title { color: var(--vermilion); }

/* A single setting row (label/description on the left, control on the right) */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.settings-row:first-of-type { border-top: none; }
.settings-row-info { min-width: 0; flex: 1 1 240px; }
.settings-row-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.settings-row-desc { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.5; }
.settings-row-control { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.settings-row-control .auth-input,
.settings-row-control .admin-input { margin-top: 0; }

/* Read-only value chip (e.g. email shown but not editable here) */
.settings-value {
  font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-variant-numeric: tabular-nums;
}

/* Toggle switch (TTS prefs etc.) — pure CSS, JS sets aria-checked + .is-on */
.settings-toggle {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  padding: 0;
  transition: background .18s ease;
}
.settings-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .18s ease;
}
.settings-toggle.is-on { background: var(--vermilion); }
.settings-toggle.is-on::after { transform: translateX(20px); }
.settings-toggle:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }

/* Inline form save row inside a section */
.settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.settings-actions .auth-submit { margin-top: 0; }
.settings-saved {
  font-size: 12.5px;
  font-weight: 600;
  color: #1d6e44;
}
.settings-saved[hidden] { display: none !important; }

@media (max-width: 600px) {
  .settings-row { flex-direction: column; align-items: stretch; }
  .settings-row-control { width: 100%; }
  .settings-row-control .auth-input,
  .settings-row-control .admin-input,
  .settings-value { width: 100%; }
}

/* ------------------------------------------------------------
   2FA code input (login.html step 2 / verify-otp.html) — the 6-digit
   one-time code entry. Single wide character-spaced field. Reuses the
   .auth-card shell, .auth-submit, and .auth-resend button.
   ------------------------------------------------------------ */
.auth-otp-input {
  font: inherit;
  font-family: var(--font-jp), var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.5em;
  /* nudge so the trailing letter-spacing doesn't shove the digits left */
  text-indent: 0.5em;
  padding: 14px 12px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-deep);
  color: var(--ink);
  outline: none;
  font-variant-numeric: tabular-nums;
  caret-color: var(--vermilion);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth-otp-input::placeholder {
  color: var(--ink-mute);
  letter-spacing: 0.5em;
  font-weight: 400;
}
.auth-otp-input:focus {
  border-color: var(--vermilion);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(184, 54, 46, .12);
}
.auth-otp-input.is-error {
  border-color: var(--vermilion);
  box-shadow: 0 0 0 3px rgba(184, 54, 46, .12);
}

/* Meta line under the code field: where it was sent, expiry, resend. */
.auth-otp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.auth-otp-meta-sent { min-width: 0; }
.auth-otp-meta-sent strong { color: var(--ink-soft); font-weight: 600; }
.auth-otp-meta-timer { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-weight: 600; }
.auth-otp-meta-timer.is-expired { color: var(--vermilion); }
/* .auth-resend (defined above) is reused for the resend button; when the
   throttle is active it's disabled. */
.auth-resend:disabled {
  color: var(--ink-mute);
  cursor: default;
  text-decoration: none;
}

/* ============================================================
   Global Dark Mode — token overrides under html.ljb-dark.
   The whole design system reads var(--token), so flipping these
   cascades site-wide (including the inline <style> blocks on
   admin.html / dashboard.html). Applied no-flash by the inline
   <head> script (window.LJB_THEME); toggled from the Index drawer
   and the admin sidebar.
   ============================================================ */
html.ljb-dark {
  color-scheme: dark;
  --bg:             #17130e;   /* warm near-black page */
  --bg-deep:        #100d09;   /* recessed / inset areas */
  --surface:        #221d16;   /* elevated cards */
  --ink:            #ece4d6;   /* warm off-white text */
  --ink-soft:       #c3b9a7;
  --ink-mute:       #8f8474;
  --line:           #342d24;   /* warm dark border */
  --vermilion:      #e35d51;   /* brighter torii red for dark */
  --vermilion-soft: #ee7b70;
  --indigo:         #6f90c0;   /* mid periwinkle — readable as text AND button bg */
  --indigo-soft:    #82a0cc;
  --gold:           #d4a44e;
  --gold-deep:      #d4a44e;
  --sakura:         #c79fad;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow:    0 6px 18px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.65);
}
/* Keep a faint warm tint so dark mode isn't flat black. */
html.ljb-dark body {
  background-image:
    radial-gradient(ellipse 800px 600px at 15% -10%, rgba(227,93,81,.05), transparent 60%),
    radial-gradient(ellipse 600px 500px at 110% 110%, rgba(111,144,192,.05), transparent 60%);
}
/* Dark-mode light-leak patches: a few elements hard-code a light surface
   that doesn't read from the theme tokens. */
html.ljb-dark .topbar { background: rgba(30,25,19,.85); }          /* frosted dark header (was translucent white) */
html.ljb-dark .story-card-cover .story-emoji { background: var(--surface); }

/* Reusable on/off switch (Index drawer dark-mode row; admin reuses it). */
.toc-theme {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px; border-top: 1px solid var(--line); background: var(--bg-deep);
}
.toc-theme-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.ljb-switch {
  width: 44px; height: 24px; border-radius: 999px; padding: 0; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--bg); cursor: pointer; position: relative;
  transition: background .2s ease, border-color .2s ease;
}
.ljb-switch::after {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); top: 2px; left: 2px; box-shadow: var(--shadow-sm); transition: left .2s ease;
}
.ljb-switch[aria-checked="true"] { background: var(--vermilion); border-color: var(--vermilion); }
.ljb-switch[aria-checked="true"]::after { left: 23px; background: #fffaf2; }
.ljb-switch:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }