/* ── Liúli design tokens (light theme) ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Ink / surfaces (cream paper, white surface, soft ink) */
  --ink:#15151A;--ink2:#3A3A42;--ink3:#7B7B85;
  --paper:#FAFAF7;--surface:#FFFFFF;--surface-alt:#F2F0EC;--bar:#F6F4EF;
  --border:#E8E3DB;--rule:rgba(21,21,26,.09);--rule-strong:rgba(21,21,26,.16);
  --faint:rgba(21,21,26,.04);
  /* Liúli accent — warm orange/red */
  --accent:#E85D43;--accent2:#FBE3DC;--accent3:#FDF3EF;
  --accent-soft:rgba(232,93,67,.10);--accent-med:rgba(232,93,67,.20);
  /* Supporting palette */
  --teal:#1A6060;--teal-bg:#EAF4F4;
  --gold:#8A6420;--gold-bg:#FAF3E0;
  --ai:#5A3A8A;--ai-bg:#F2EEFF;
  --admin:#1A4A8A;--admin-bg:#EEF3FF;--admin-border:#C5D5F5;
  --green:#1A6A3A;--green-bg:#EAFAF0;
  --red:#8A1A1A;--red-bg:#FFEEF0;
  --blue:#1A3A8A;--blue-bg:#EEF0FF;
  --purple:#6B3FA0;--purple-bg:#EAE0F0;
  --pink:#C0246E;--pink-bg:#FBE6F0;
  /* Tone palette (light) */
  --t1:#2E9D5C;--t2:#D97520;--t3:#2F7AD9;--t4:#C13D3D;--t0:#3A3530;
  /* Typography */
  /* All-sans stack — no serifs anywhere */
  --zh-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* Gender colors — dedicated (not shared with --blue/--pink/--green, which
     are used for unrelated badges) so they can be tuned for maximum pop
     against black ink without affecting anything else. */
  --gender-der:#2E63E8;--gender-die:#E0227E;--gender-das:#12A150;
  --zh-sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB",sans-serif;
  --ui-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono-font:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  --display-font:"Inter",-apple-system,system-ui,sans-serif;
  --fs:19px;
  /* Consistent horizontal page gutter on every top-level view. Wraps
     with env(safe-area-inset-*) so the value lifts past the iPhone notch
     when present. */
  --page-x:18px;
  --shadow-card:0 1px 2px rgba(0,0,0,.04);
  --shadow-pop:0 12px 32px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06);
}
@media (min-width:760px) { :root { --page-x:32px; } }

html{font-size:var(--fs)}

/* Large vocab/flashcard grids: skip layout/paint for off-screen rows so
   the user's first paint stays under 100 ms on big lists (Mine often has
   100+ cards). `content-visibility: auto` is opt-in per browser; safe to
   add unconditionally. `contain-intrinsic-size` reserves space so the
   scrollbar doesn't jitter as off-screen children resolve. */
.fc-grid .fc { content-visibility: auto; contain-intrinsic-size: 160px 220px; }

/* iPhone notch / Android punch-hole: pad full-bleed surfaces so content
   doesn't slip under the status bar. */
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

/* Uniform horizontal page gutter — every top-level view honors --page-x
   instead of its own ad-hoc padding. Wraps in `max()` so the gutter never
   drops below the device's safe-area inset. */
.view {
  padding-left:  max(var(--page-x), env(safe-area-inset-left)) !important;
  padding-right: max(var(--page-x), env(safe-area-inset-right)) !important;
}
/* Library views own their own grid layout — the .liu-lib-head / .liu-lib-main
   children get the gutter so the sidebar can flush against the edge. */
.view.liu-library-view { padding-left:0 !important; padding-right:0 !important; }
.liu-lib-head, .liu-lib-main {
  padding-left:  max(var(--page-x), env(safe-area-inset-left)) !important;
  padding-right: max(var(--page-x), env(safe-area-inset-right)) !important;
}
#stickyHeader, .breadcrumb {
  padding-left:  max(var(--page-x), env(safe-area-inset-left));
  padding-right: max(var(--page-x), env(safe-area-inset-right));
}
.liu-auth-form { padding-left: max(64px, env(safe-area-inset-left)); padding-right: max(64px, env(safe-area-inset-right)); }
.toast { bottom: calc(1.6rem + env(safe-area-inset-bottom)); }

/* Stat numbers / counters: lock to tabular numerals so columns don't shift
   when the value width changes. */
.rv-stat-n, .liu-lib-pct, .liu-nav-count, .bc-streak-n, .wf-time, .wf-speed-label,
.liu-nav-title, .liu-pos { font-variant-numeric: tabular-nums; }

/* Balance display headings so they don't widow on the final line.
   `text-wrap: balance` is supported in all evergreen browsers (Chrome 114+,
   Firefox 121+, Safari 17.5+) and gracefully degrades in older ones. */
.liu-lib-title, .liu-auth-h1, .rv-setup-h, .liu-nav-title,
.liu-lib-card-zh, .liu-mod-name {
  text-wrap: balance;
}
.liu-lib-welcome, .liu-auth-sub, .liu-trans, .liu-lib-card-en {
  text-wrap: pretty;
}

/* Honor the user's reduced-motion preference. Collapses all transitions
   and animations to ~no-op while leaving end-state styles unchanged. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0 !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FOCUS-VISIBLE RINGS — keyboard a11y baseline
   Applies a single accent ring to every interactive primitive in the
   app. Uses `:focus-visible` so mouse clicks don't draw the ring.
   ═══════════════════════════════════════════════════════════════════ */
button, [role="button"], a, select, textarea, input, summary {
  /* Reset default UA ring so our consistent ring shows through */
  outline:none;
}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}
/* Pills / chips / nav buttons already have rounded backgrounds → match */
.liu-pill:focus-visible,
.liu-pill-add:focus-visible,
.liu-fs-btn:focus-visible,
.liu-nav-btn:focus-visible,
.liu-lib-lvl:focus-visible,
.liu-lib-book:focus-visible,
.liu-mod-card:focus-visible,
.liu-lib-row:focus-visible,
.liu-lib-tx:focus-visible,
.liu-lib-cta:focus-visible,
.liu-lib-card-cta:focus-visible,
.liu-lib-review-cta:focus-visible,
.bc-tab:focus-visible,
.bc-admin-btn:focus-visible,
.bc-logout-btn:focus-visible,
.bc-user-avatar:focus-visible,
.bc-user-in:focus-visible,
.liu-nav-home:focus-visible,
.liu-line-act:focus-visible,
.rv-rate:focus-visible,
.rv-opt-btn:focus-visible,
.rv-start-btn:focus-visible,
.rv-topbar-back:focus-visible,
.rv-topbar-menu:focus-visible,
.rv-head-btn:focus-visible,
.rv-ex-play:focus-visible,
.wf-play:focus-visible,
.wf-jog:focus-visible,
.wf-loop:focus-visible,
.wf-src-btn:focus-visible,
.wf-speed-btn:focus-visible,
.liu-auth-input:focus-visible,
.liu-auth-submit:focus-visible,
.fc:focus-visible,
.fc-act:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* Inputs use a softer inner glow rather than a solid ring so the
   accent border + halo combo reads as a single state. */
.liu-auth-input:focus-visible,
.bc-text-select:focus-visible,
.notes-area:focus-visible,
.mine-input:focus-visible {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
/* Override the broad `outline:none` resets that came from older CSS
   layers so the global ring above wins. */
.rv-note-area:focus, .form-row input:focus, .form-row textarea:focus,
.sent-hz-in:focus, .sent-spk-in:focus, .bc-text-select:focus,
.ch-jump-select:focus, .notes-area:focus, .ln-color:focus,
.ln-text-input:focus, .ln-tp-area:focus { outline:none; }

/* ═══════════════════════════════════════════════════════════════════
   CONFIRM MODAL — accessible replacement for window.confirm()
   ═══════════════════════════════════════════════════════════════════ */
.liu-confirm-overlay {
  position:fixed; inset:0; z-index:10000;
  background:rgba(15, 15, 18, 0.45);
  display:grid; place-items:center;
  padding:1.5rem;
  font-family:var(--ui-font);
}
.liu-confirm-card {
  background:var(--surface); color:var(--ink);
  border-radius:14px; padding:24px 24px 20px;
  max-width:420px; width:100%;
  box-shadow:0 18px 48px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.10);
}
.liu-confirm-title {
  font-family:var(--ui-font); font-size:19px; font-weight:700;
  margin:0 0 .35rem; letter-spacing:-.2px; line-height:1.2;
  text-wrap:balance;
}
.liu-confirm-msg {
  font-family:var(--ui-font); font-size:14px; color:var(--ink2);
  margin:0 0 1.2rem; line-height:1.5; text-wrap:pretty;
}
.liu-confirm-actions {
  display:flex; gap:.5rem; justify-content:flex-end;
}
.liu-confirm-cancel, .liu-confirm-ok {
  padding:10px 16px; border-radius:10px;
  font-family:var(--ui-font); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:background-color .15s, color .15s, border-color .15s;
}
.liu-confirm-cancel {
  background:transparent; color:var(--ink); border:1px solid var(--rule-strong);
}
.liu-confirm-cancel:hover { background:var(--faint); }
.liu-confirm-ok {
  background:var(--ink); color:#fff; border:0;
}
.liu-confirm-ok:hover { background:#000; }
.liu-confirm-ok--danger {
  background:#C13D3D; color:#fff;
}
.liu-confirm-ok--danger:hover { background:#a03030; }

/* Skip-link: visually hidden until keyboard-focused */
.skip-link{
  position:fixed; top:0; left:0; z-index:10000;
  padding:.6rem 1rem; background:var(--ink); color:#fff;
  font-family:var(--ui-font); font-size:13px; font-weight:600;
  border-radius:0 0 8px 0; text-decoration:none;
  transform:translateY(-110%); transition:transform .15s ease-out;
}
.skip-link:focus-visible{ transform:translateY(0); outline:none; }
body{font-family:var(--ui-font);background:var(--paper);color:var(--ink);min-height:100vh;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ── STICKY HEADER WRAPPER ──────────────────────────────────────────── */
/* Always visible, sticks to the top of the viewport. */
#stickyHeader{
  position:sticky;top:0;z-index:300;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
/* The reveal-strip is no longer needed — hide it defensively in case the
   inline boot script (cached) still injects it. */
#hdrPeek{ display:none !important; }

/* ── BREADCRUMB NAV ─────────────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;background:var(--surface);border-bottom:1px solid var(--border);padding:0 .75rem;gap:0;min-height:44px;flex-wrap:nowrap;overflow-x:auto}
.bc-item{display:flex;align-items:center;white-space:nowrap;flex-shrink:0}
.bc-btn{padding:.5rem .6rem;font-size:12px;font-weight:500;color:var(--ink2);background:none;border:none;cursor:pointer;font-family:var(--ui-font);border-radius:6px;transition:background-color,border-color,color,box-shadow,transform,opacity .12s}
.bc-btn:hover{background:var(--accent3);color:var(--ink)}
.bc-btn.active{color:var(--accent);font-weight:600}
.bc-sep{color:var(--border);font-size:16px;padding:0 .1rem;flex-shrink:0}
.bc-admin-btn{flex-shrink:0;padding:.4rem .75rem;border-radius:6px;border:1px solid var(--admin-border);background:var(--admin-bg);color:var(--admin);font-size:11.5px;font-weight:500;cursor:pointer;font-family:var(--ui-font);white-space:nowrap;transition:background-color,border-color,color,box-shadow,transform,opacity .15s}
.bc-admin-btn:hover{background:var(--admin);color:#fff}
.bc-admin-btn.active{background:var(--admin);color:#fff}

.bc-brand{font-family:var(--zh-font);font-weight:700;color:var(--accent);font-size:15px;padding:.5rem .75rem .5rem 0;border-right:1px solid var(--border);margin-right:.5rem;white-space:nowrap;border-top:none;border-left:none;border-bottom:none;background:none;cursor:pointer;transition:opacity .15s}
.bc-brand:hover{opacity:.7}

/* ── TAB BAR ────────────────────────────────────────────────────────── */
.tab-bar{display:flex;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto}
.tab-btn{padding:.6rem .9rem;font-size:12.5px;font-weight:500;color:var(--ink3);border:none;background:transparent;cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap;font-family:var(--ui-font);transition:background-color,border-color,color,box-shadow,transform,opacity .15s}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-btn:hover:not(.active){color:var(--ink);background:var(--accent3)}
.tab-btn.admin-tab{color:var(--admin)}
.tab-btn.admin-tab.active{border-bottom-color:var(--admin);color:var(--admin)}

/* ── FONT SIZE CONTROL ──────────────────────────────────────────────── */
.fs-control{display:flex;align-items:center;gap:.4rem;padding:.3rem .75rem;background:var(--accent3);border-bottom:1px solid var(--border);font-size:11px;color:var(--ink3)}
.fs-btn{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;line-height:1;color:var(--ink2);transition:background-color,border-color,color,box-shadow,transform,opacity .12s}
.fs-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.fs-label{font-size:11px;color:var(--ink3);min-width:28px;text-align:center}
.fs-user{font-size:11px;color:var(--ink3);white-space:nowrap}
.fs-signout-btn{font-size:10.5px;padding:.1rem .4rem;border-radius:4px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--ink3);font-family:var(--ui-font);transition:background-color,border-color,color,box-shadow,transform,opacity .12s;white-space:nowrap}
.fs-signout-btn:hover{background:var(--accent2);color:var(--accent);border-color:var(--accent)}

/* ── VIEWS ──────────────────────────────────────────────────────────── */
.view{display:none;padding:1rem .9rem 14rem;max-width:820px;margin:0 auto}
.view.active{display:block}

/* ── CARDS & GRIDS ──────────────────────────────────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;margin-bottom:1.25rem}
.nav-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem;cursor:pointer;transition:background-color,border-color,color,box-shadow,transform,opacity .18s;text-align:center}
.nav-card:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(0,0,0,.07);transform:translateY(-1px)}
.nav-card-icon{font-size:26px;margin-bottom:.4rem}
.nav-card-label{font-size:13px;font-weight:500;color:var(--ink)}
.nav-card-sub{font-size:11px;color:var(--ink3);margin-top:.15rem}

/* ── CHAPTER LIST ───────────────────────────────────────────────────── */
.ch-list{display:flex;flex-direction:column;gap:.5rem}
.ch-row{background:var(--surface);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;padding:.7rem .9rem;cursor:pointer;transition:background-color,border-color,color,box-shadow,transform,opacity .15s;gap:.75rem}
.ch-row:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ch-row-num{font-size:11px;font-weight:600;color:var(--ink3);min-width:28px}
.ch-row-title{font-family:var(--zh-font);font-size:14.5px;color:var(--ink);flex:1}
.ch-row-sub{font-size:11px;color:var(--ink3)}
.ch-row-arrow{color:var(--border);font-size:16px}

/* ── TEXT PAGE ──────────────────────────────────────────────────────── */
.page-title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.85rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.page-title-zh{font-family:var(--zh-font);font-size:16px;color:var(--ink)}
.page-title-en{font-size:11px;color:var(--ink3)}

/* controls */
.ctrl-row{display:flex;gap:.4rem;margin-bottom:.8rem;flex-wrap:wrap;align-items:center}
.btn{padding:.3rem .7rem;border-radius:6px;border:1px solid var(--border);background:var(--surface);font-size:11.5px;font-weight:500;cursor:pointer;color:var(--ink2);font-family:var(--ui-font);transition:background-color,border-color,color,box-shadow,transform,opacity .15s;white-space:nowrap}
.btn.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn.ai-on{background:var(--ai);color:#fff;border-color:var(--ai)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.admin-btn{background:var(--admin-bg);color:var(--admin);border-color:var(--admin-border)}
.btn.admin-btn:hover{background:var(--admin);color:#fff}
.btn.danger{background:var(--red-bg);color:var(--red);border-color:#f5c0c0}
.btn.danger:hover{background:var(--red);color:#fff}
.btn.success{background:var(--green-bg);color:var(--green);border-color:#b0e0c0}
.btn:disabled{opacity:.4;cursor:default}

/* audio bar */
.audio-bar{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.5rem .8rem}
.play-btn{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;font-size:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.play-btn.ai{background:var(--ai)}.play-btn:disabled{opacity:.4;cursor:default}
.prog-wrap{flex:1;height:4px;background:var(--border);border-radius:2px;cursor:pointer;position:relative}
.prog-fill{height:100%;background:var(--accent);border-radius:2px;width:0%;transition:width .08s linear;pointer-events:none}
.prog-fill.ai{background:var(--ai)}
.atime{font-size:10.5px;color:var(--ink3);min-width:72px;text-align:right}
.src-badge{font-size:10px;padding:.12rem .38rem;border-radius:4px;white-space:nowrap;font-weight:500}
.src-badge.book{background:var(--accent2);color:var(--accent)}
.src-badge.ai{background:var(--ai-bg);color:var(--ai)}
.src-badge.loading{background:var(--gold-bg);color:var(--gold)}

/* text card */
.text-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem 1.15rem;margin-bottom:1.25rem}
.hint{font-size:11px;color:var(--ink3);margin-bottom:.75rem;padding:.35rem .6rem;background:var(--teal-bg);border-radius:6px;border-left:3px solid var(--teal)}
/* ── TOGGLE PILL (slide switch) ─────────────────────────────────────── */
.toggle-pill{display:inline-flex;align-items:center;gap:.42rem;cursor:pointer;user-select:none;padding:.28rem .72rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;flex-shrink:0;transition:background .18s,border-color .18s}
.toggle-pill-track{width:28px;height:16px;border-radius:9px;background:var(--border);position:relative;transition:background .2s;flex-shrink:0}
.toggle-pill.on .toggle-pill-track{background:var(--teal)}
.toggle-pill-track::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle-pill.on .toggle-pill-track::after{transform:translateX(12px)}
.toggle-pill-label{font-size:.75em;color:var(--ink);font-weight:500;transition:color .18s;font-family:var(--ui-font)}
.toggle-pill.on{background:var(--teal-bg);border-color:var(--teal)}
.toggle-pill.on .toggle-pill-label{color:var(--teal);font-weight:600}
/* ── HINT ROW (below audio, above text) ─────────────────────────────── */
.hint-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.65rem;flex-wrap:wrap}
.hint-text{font-size:11px;color:var(--ink3)}
/* ── FLASHCARD FRONT PINYIN ─────────────────────────────────────────── */
.fc-front-py{font-size:.8em;color:var(--teal);text-align:center;margin:.35rem 0 .55rem;min-height:1.3em}
/* visibility:hidden keeps space reserved → no layout shift when toggling */
.fc-front-py.hidden{visibility:hidden}
.fc-py.hidden{visibility:hidden}
.fc-back-def.hidden{visibility:hidden}
/* examples inside collapsible: use display:none (no reserved space needed) */
.ex-py.hidden,.ex-en.hidden{display:none}
/* ── FLASHCARD GRID — READING PAGE (responsive 2/3/4 col) ──────────── */
.fc-grid-reading{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
@media(min-width:560px){.fc-grid-reading{grid-template-columns:repeat(3,1fr)}}
@media(min-width:800px){.fc-grid-reading{grid-template-columns:repeat(4,1fr)}}
.fc-grid-reading .fc{padding:.45rem .65rem .7rem;min-height:80px}
.fc-grid-reading .fc-hz{font-size:.7em}
.fc-grid-reading .fc-hint{font-size:.62em}
/* ── PINYIN-ON-CARDS TOGGLE BAR (sticky) ────────────────────────────── */
.fc-py-bar{display:flex;align-items:center;gap:.5rem;position:sticky;top:0;z-index:200;background:var(--paper);margin:.3rem -.9rem .35rem;padding:.4rem .9rem;border-bottom:1px solid var(--border)}
/* ── BOTTOM TEXT NAV ────────────────────────────────────────────────── */
.text-nav-bar--bottom{margin-top:1.5rem;border-top:1px solid var(--border);padding-top:1rem}
.char-unit{display:inline-flex;flex-direction:column;align-items:center;cursor:pointer;padding:0 1px;vertical-align:bottom}
.char-unit .hz{font-family:var(--zh-font);font-size:1.27em;color:var(--ink);transition:color .1s;line-height:1.5}
.char-unit .py{font-size:.63em;color:var(--teal);line-height:1.3;min-height:.85em;white-space:nowrap}
.char-unit:hover:not(.punct) .hz{color:var(--accent)}
.char-unit.playing .hz{color:var(--accent);background:var(--accent2);border-radius:3px}
.char-unit.punct{cursor:default}.char-unit.punct .hz{color:var(--ink3)}
.sent-row{display:flex;flex-wrap:wrap;align-items:flex-end;cursor:pointer;padding:2px 3px;border-radius:5px;margin-bottom:1px;transition:background .1s}
.sent-row:hover{background:rgba(181,49,31,.06)}
.sent-row.active-sent{background:rgba(181,49,31,.04)}
.spk-tag{font-size:.72em;font-weight:600;color:var(--gold);font-family:var(--ui-font);margin-right:3px;white-space:nowrap;padding-top:5px;align-self:flex-start}

/* ── VOCAB SECTION ──────────────────────────────────────────────────── */
.vocab-section{margin-top:1.25rem}
.section-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.section-head-title{font-size:13.5px;font-weight:500;color:var(--ink);flex:1}
.fc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:.75rem}
.fc-grid.fc-grid-single{grid-template-columns:1fr}
.fc{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.45rem 1rem .9rem;cursor:pointer;transition:box-shadow .18s,border-color .18s;position:relative;min-height:110px}
.fc:hover{border-color:#c8b8b0;box-shadow:0 3px 14px rgba(0,0,0,.07)}
.fc.flagged{border-left:3px solid var(--gold)}
.fc-front{display:block}.fc-back{display:none}
.fc.flipped .fc-front{display:none}.fc.flipped .fc-back{display:block}
.fc-badge{position:absolute;top:.38rem;right:.42rem;font-size:9.5px;padding:.08rem .3rem;border-radius:4px;background:var(--gold-bg);color:var(--gold);font-weight:500}
.fc-hz{font-family:var(--zh-font);font-size:.865em;text-align:center;margin:.15rem 0 .35rem;color:var(--ink)}
.fc-py{font-size:.85em;text-align:center;color:var(--teal);margin:.35rem 0 .55rem}
.fc-def{font-size:.85em;color:var(--ink2);text-align:center;line-height:1.5}
.fc-hint{font-size:.68em;color:var(--ink3);text-align:center;margin-top:.2rem}
.fc-audio-row{display:flex;gap:.3rem;justify-content:center;margin:.4rem 0 .05rem;flex-wrap:wrap}
.fc-examples{font-size:1em;margin-top:.55rem;border-top:1px solid var(--border);padding-top:.55rem}
.ex-row{display:flex;align-items:flex-start;gap:.35rem;margin-bottom:.15rem;padding:3px 4px;border-radius:4px;transition:background .1s}
.ex-row:hover{background:var(--ai-bg)}
.ex-icon{font-size:.85em;color:var(--ai);flex-shrink:0;margin-top:1px;padding-top:.1rem}
.ex-hz-row{font-family:var(--zh-font);font-size:.88em;color:var(--ink2);line-height:1.6}
.ex-py{font-size:.72em;color:var(--teal);line-height:1.3;margin-bottom:.1rem}
.ex-en{font-size:.75em;color:var(--ink3);margin-bottom:.3rem}
.fc-actions{display:flex;gap:.3rem;margin-top:.5rem;justify-content:center;flex-wrap:nowrap}
.fc-act{padding:.2rem .55rem;border-radius:5px;border:1px solid var(--border);background:transparent;font-size:.72em;cursor:pointer;font-family:var(--ui-font);color:var(--ink2);transition:background-color,border-color,color,box-shadow,transform,opacity .12s}
.fc-act:hover{background:var(--accent3)}
.fc-act.star.on{color:var(--gold);border-color:var(--gold);background:#fff8dc}
.fc-act.active{background:var(--accent3);color:var(--ink);font-weight:600}
.fc-act.danger-act{color:#c0392b;border-color:#e0b0aa}
.fc-act.danger-act:hover{background:#fdecea}
/* User-added card: light red tint (matches reading page accent palette) */
.fc.fc--user{background:var(--accent2);border-color:var(--accent)}
/* Flag star in top-right of card front */
.fc-flag-corner{position:absolute;top:.55rem;right:.65rem;font-size:13px;line-height:1;pointer-events:none}
.fc-front{position:relative}
.fc-note{width:100%;min-height:1em;border:1px solid var(--border);border-radius:5px;font-size:.75em;padding:.28rem .48rem;font-family:var(--ui-font);color:var(--ink);background:var(--accent3);resize:none;overflow:hidden;margin-top:.38rem;display:none}
.fc-note.open{display:block}
.fc-due{font-size:.72em;color:var(--ink);margin-top:.18rem}
.fc-due.overdue{color:var(--accent);font-weight:600}

/* ── SPACED REPETITION ──────────────────────────────────────────────── */
.sr-bar{display:flex;gap:.35rem;justify-content:center;margin-top:.6rem;flex-wrap:wrap}
.sr-btn{padding:.28rem .6rem;border-radius:6px;border:none;font-size:.75em;cursor:pointer;font-family:var(--ui-font);font-weight:500;transition:background-color,border-color,color,box-shadow,transform,opacity .15s;opacity:.85}
.sr-btn:hover{opacity:1;transform:translateY(-1px)}
.sr-btn.unknown{background:#f7c1c1;color:#7a1a1a}
.sr-btn.barely{background:#fac775;color:#6b3a00}
.sr-btn.ok{background:#e0e8ff;color:#1a3a8a}
.sr-btn.good{background:#c0dd97;color:#274010}
.sr-btn.perfect{background:#ffd700;color:#5a3a00}
.sr-due-badge{font-size:12px;padding:.08rem .3rem;border-radius:4px;background:var(--ai-bg);color:var(--ai);margin-left:.3rem}
.sr-due-badge.overdue{background:var(--accent2);color:var(--accent)}

/* ── VOCAB CHAPTER PAGER ────────────────────────────────────────────── */
.vocab-pager{display:flex;gap:.35rem;margin-bottom:.85rem;flex-wrap:wrap;align-items:center}
.vp-btn{padding:.28rem .7rem;border-radius:16px;border:1px solid var(--border);font-size:11.5px;cursor:pointer;background:var(--surface);color:var(--ink2);transition:background-color,border-color,color,box-shadow,transform,opacity .14s;font-family:var(--ui-font);white-space:nowrap}
.vp-btn.active{background:var(--gold);color:#fff;border-color:var(--gold)}
.vp-btn.has-due{border-color:var(--accent);color:var(--accent)}
.vocab-stats{font-size:11px;color:var(--ink3);margin-bottom:.75rem}

/* ── REVIEW MODE ────────────────────────────────────────────────────── */
.rv-wrap{max-width:600px;margin:0 auto;padding:0 .25rem 3rem}
/* Setup */
.rv-setup-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.2rem 1.4rem;margin-top:.6rem}
.rv-setting-row{display:flex;gap:.8rem;margin-bottom:.9rem;flex-wrap:wrap}
.rv-setting{flex:1;min-width:130px}
.rv-label{display:block;font-size:10.5px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem}
.rv-sel{width:100%;border:1px solid var(--border);border-radius:7px;padding:.38rem .6rem;font-size:13px;font-family:var(--ui-font);background:var(--surface);color:var(--ink)}
.rv-sel:disabled{opacity:.45}
.rv-opt-group{display:flex;gap:.3rem;flex-wrap:wrap}
.rv-opt-btn{padding:.28rem .65rem;border:1px solid var(--border);border-radius:6px;background:transparent;font-size:12px;cursor:pointer;font-family:var(--ui-font);color:var(--ink2);transition:background-color,border-color,color,box-shadow,transform,opacity .12s}
.rv-opt-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.rv-stats-row{display:flex;gap:1.2rem;margin:.9rem 0;flex-wrap:wrap}
.rv-stat{font-size:12px;color:var(--ink3)}
.rv-stat-n{font-weight:700;font-size:16px;color:var(--ink);display:block}
.rv-stat--due .rv-stat-n{color:var(--accent)}
.rv-stat--known .rv-stat-n{color:var(--green)}
.rv-stat--avail .rv-stat-n{color:var(--teal)}
.rv-start-btn{width:100%;padding:.72rem;border:none;border-radius:9px;background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--ui-font);transition:opacity .15s;margin-top:.2rem}
.rv-start-btn:disabled{opacity:.35;cursor:default}
/* Progress */
.rv-progress{margin:.2rem 0 .9rem}
.rv-progress-bar-wrap{height:7px;background:var(--border);border-radius:4px;overflow:hidden;display:flex}
.rv-pb-learned{background:var(--green);transition:width .4s}
.rv-pb-again{background:var(--accent);transition:width .4s}
.rv-progress-text{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--ink3);margin-top:.3rem}
.rv-p-pos{font-weight:700;color:var(--ink)}
.rv-p-learned{color:var(--green)}
.rv-p-again{color:var(--accent)}
.rv-stop-btn{padding:.15rem .55rem;border-radius:5px;border:1px solid var(--border);background:transparent;font-size:11px;cursor:pointer;color:var(--ink3);font-family:var(--ui-font);transition:background-color,border-color,color,box-shadow,transform,opacity .12s;white-space:nowrap}
.rv-stop-btn:hover{background:var(--accent3);color:var(--accent);border-color:var(--accent)}
/* Card */
.rv-card-wrap{margin:.2rem 0 .8rem}
.rv-card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:2rem 1.4rem 1.4rem;display:flex;flex-direction:column;align-items:center;position:relative;min-height:240px}
.rv-card--user{background:#fffae0;border-color:#dfc84a}
.rv-flag-corner{position:absolute;top:.7rem;right:.8rem;font-size:1.25rem;line-height:1}
.rv-card-front{display:flex;flex-direction:column;align-items:center;width:100%}
.rv-card-hz{font-family:var(--zh-font);font-size:calc(var(--fs) * 2.7);line-height:1.15;color:var(--ink);margin-bottom:.5rem;text-align:center}
.rv-card-audio{display:flex;gap:.5rem;margin-bottom:1.2rem}
.rv-reveal-btn{padding:.6rem 2.2rem;border:1.5px solid var(--accent);border-radius:9px;background:transparent;color:var(--accent);font-size:calc(var(--fs) * 0.85);font-weight:600;cursor:pointer;font-family:var(--ui-font);transition:background-color,border-color,color,box-shadow,transform,opacity .15s;margin-top:auto}
.rv-reveal-btn:hover{background:var(--accent);color:#fff}
.rv-card-back{width:100%}
.rv-card-divider{width:36px;height:2px;background:var(--border);border-radius:2px;margin:.4rem auto .7rem}
.rv-card-py{font-size:calc(var(--fs) * 0.8);color:var(--ink3);text-align:center;margin-bottom:.15rem}
.rv-card-def{font-size:calc(var(--fs) * 0.8);font-weight:600;color:var(--ink);text-align:center;margin-bottom:.1rem}
.rv-card-extra{font-size:calc(var(--fs) * 0.82);color:var(--gold);text-align:center;margin-bottom:.5rem}
.rv-card-ex{font-size:calc(var(--fs) * 0.82);color:var(--ink2);line-height:1.55;margin:.5rem 0 .2rem;padding:.5rem .6rem;background:var(--accent3);border-radius:8px;width:100%}
.rv-note-wrap{width:100%;margin:.4rem 0 .2rem}
.rv-card-note{background:var(--gold-bg);border:1px solid #e0d090;border-radius:8px;padding:.45rem .7rem;font-size:.82rem;color:var(--ink);line-height:1.55;white-space:pre-wrap;width:100%;box-sizing:border-box}
.rv-note-area{width:100%;min-height:52px;border:1px solid #ddd0a0;border-radius:8px;padding:.45rem .65rem;font-size:.82rem;font-family:var(--ui-font);color:var(--ink);background:var(--gold-bg);resize:none;overflow:hidden;line-height:1.55;box-sizing:border-box}
.rv-note-area:focus{outline:none;border-color:var(--gold)}
.rv-card-actions{display:flex;gap:.4rem;margin:.5rem 0;flex-wrap:wrap}
.rv-card-act{padding:.22rem .6rem;border-radius:5px;border:1px solid var(--border);background:transparent;font-size:.72em;cursor:pointer;font-family:var(--ui-font);color:var(--ink2);transition:background-color,border-color,color,box-shadow,transform,opacity .12s}
.rv-card-act:hover{background:var(--accent3)}
.rv-card-act.active{background:var(--accent3);font-weight:600;color:var(--ink)}
.rv-flag-btn.on{color:var(--gold);border-color:var(--gold);background:#fff8dc}
/* Rating bar */
.rv-rating-bar{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;width:100%;margin-top:.6rem}
.rv-rate-btn{flex:1;min-width:54px;padding:.5rem .2rem;border:1.5px solid var(--border);border-radius:9px;background:var(--surface);font-size:calc(var(--fs) * 1.2);cursor:pointer;font-family:var(--ui-font);color:var(--ink);transition:background-color,border-color,color,box-shadow,transform,opacity .12s;text-align:center;line-height:1.3}
.rv-rate-btn:hover{border-color:var(--accent);background:var(--accent2)}
.rv-rate-btn.again{border-color:#e0b0a0}
.rv-rate-btn.again:hover{background:var(--red-bg)}
.rv-rate-btn.learned{border-color:#a8cca8}
.rv-rate-btn.learned:hover{background:var(--green-bg)}
/* End screen */
.rv-end-box{text-align:center;padding:1.6rem .5rem 1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin:.6rem 0 1rem}
.rv-end-icon{font-size:3rem;margin-bottom:.4rem}
.rv-end-title{font-size:1.25rem;font-weight:700;color:var(--ink);margin-bottom:1rem}
.rv-end-stats{display:flex;justify-content:center;gap:3rem;margin-bottom:1.4rem}
.rv-end-stat-n{font-size:2.2rem;font-weight:700;line-height:1}
.rv-end-stat-l{font-size:.8rem;color:var(--ink3);margin-top:.2rem}
.rv-end-stat--learned .rv-end-stat-n{color:var(--green)}
.rv-end-stat--again .rv-end-stat-n{color:var(--accent)}
.rv-end-btns{display:flex;flex-direction:column;gap:.55rem;max-width:300px;margin:0 auto}
.rv-end-btn{padding:.65rem 1.4rem;border-radius:9px;border:1.5px solid var(--border);background:transparent;font-size:14px;cursor:pointer;font-family:var(--ui-font);color:var(--ink);transition:background-color,border-color,color,box-shadow,transform,opacity .12s}
.rv-end-btn:hover{background:var(--accent3)}
.rv-end-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.rv-end-btn.primary:hover{opacity:.88}

/* ── POPUP DICT ─────────────────────────────────────────────────────── */
.popup{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.8rem .95rem;min-width:200px;max-width:270px;box-shadow:0 8px 28px rgba(0,0,0,.14);z-index:500;display:none;animation:popIn .12s ease}
@keyframes popIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.popup.open{display:block}
.popup-word{font-family:var(--zh-font);font-size:1.47em;font-weight:700;color:var(--ink)}
.popup-py{font-size:.85em;color:var(--teal)}
.popup-hsk{font-size:.65em;color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.28rem}
.popup-defs{font-size:.82em;color:var(--ink2);line-height:1.6}
.popup-related{margin-top:.4rem;font-size:.75em;color:var(--ink3)}
.popup-close{position:absolute;top:.3rem;right:.6rem;background:none;border:none;font-size:14px;cursor:pointer;color:var(--ink3)}
.popup-footer{display:flex;gap:.35rem;margin-top:.5rem;flex-wrap:wrap}
.snd-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;border-radius:5px;border:1px solid var(--border);background:var(--ai-bg);color:var(--ai);font-size:.72em;cursor:pointer;font-family:var(--ui-font);transition:background-color,border-color,color,box-shadow,transform,opacity .12s;white-space:nowrap}
.snd-btn:hover{background:var(--ai);color:#fff}
.snd-btn:disabled{opacity:.4;cursor:default}
.spin{display:inline-block;width:9px;height:9px;border:1.5px solid rgba(90,58,138,.3);border-top-color:var(--ai);border-radius:50%;animation:spin .6s linear infinite}
.spin-sm{display:inline-block;width:8px;height:8px;border:1.5px solid rgba(26,96,96,.25);border-top-color:var(--teal);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ── SEGMENTED CONTROL (audio source) ──────────────────────────────── */
.seg-ctrl{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--accent3)}
.seg-btn{padding:.28rem .72rem;border:none;background:transparent;font-size:.75em;cursor:pointer;font-family:var(--ui-font);color:var(--ink2);transition:background .15s,color .15s;white-space:nowrap}
.seg-btn.active{background:var(--teal);color:#fff;font-weight:500}
/* ── FLASHCARD FRONT TRANSLATION ────────────────────────────────────── */
.fc-front-def{font-size:1.04em;color:var(--ink2);text-align:center;margin:.3rem 0 .1rem;line-height:1.4;min-height:4.2em}
.fc-front-def.hidden{visibility:hidden}
/* ── FLASHCARD BACK SECTIONS ─────────────────────────────────────────── */
.fc-back-main{display:flex;flex-direction:column;align-items:center;width:100%}
.fc-back-def{font-size:1.04em;color:var(--ink2);text-align:center;margin:.3rem 0 .1rem;line-height:1.4}
.fc-back-def.hidden{display:none}
.fc-extra{font-size:.7em;color:var(--gold);text-align:center;margin:.05rem 0 .1rem}
.gender-der{color:var(--gender-der);font-weight:700}
.gender-die{color:var(--gender-die);font-weight:700}
.gender-das{color:var(--gender-das);font-weight:700}
.fc-word-article{line-height:1.2;min-height:1.2em}
.fc-word-noun{line-height:1.15;overflow-wrap:break-word;word-break:break-word;max-width:100%}
/* ── COLLAPSIBLE EXAMPLES SECTION ───────────────────────────────────── */
.fc-ex-section{width:100%;border-top:1px solid var(--border);margin-top:.55rem}
.fc-ex-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.38rem .1rem;background:none;border:none;cursor:pointer;font-size:.75em;color:var(--ink2);font-family:var(--ui-font);font-weight:500}
.fc-ex-toggle:hover{color:var(--teal)}
.fc-ex-arrow{display:inline-block;transition:transform .18s;font-size:.9em}
.fc-ex-section.open .fc-ex-arrow{transform:rotate(90deg)}
.fc-ex-body{display:none;padding-top:.2rem}
.fc-ex-section.open .fc-ex-body{display:block}

/* ── TOAST ──────────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:#222;color:#fff;font-size:12.5px;padding:.5rem 1.1rem;border-radius:8px;z-index:1000;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1}

/* ── STATUS BAR ─────────────────────────────────────────────────────── */
.status-bar{display:flex;align-items:center;gap:.5rem;padding:.32rem .65rem;border-radius:7px;margin-bottom:.8rem;font-size:11px;border:1px solid var(--border);background:var(--surface)}
.cache-bar{display:flex;align-items:center;gap:.75rem;padding:.4rem .65rem;border-radius:7px;margin-top:.5rem;font-size:11px;border:1px solid var(--border);background:var(--surface);flex-wrap:wrap}
.cache-status{color:var(--ink3);flex:1}
.cache-audio-btn{font-size:11px;padding:.2rem .6rem;margin:0}
.sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sdot.ok{background:#2d9a4e}.sdot.err{background:var(--accent)}
.sdot.checking{background:#e0a020;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.stxt{color:var(--ink2);flex:1}.schars{color:var(--ink3)}

/* ── ADMIN ──────────────────────────────────────────────────────────── */
.admin-bar{background:var(--admin-bg);border:1px solid var(--admin-border);border-radius:8px;padding:.5rem .8rem;margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.admin-bar-label{font-size:11px;font-weight:600;color:var(--admin);flex:1}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:800;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border-radius:14px;padding:1.4rem;width:100%;max-width:660px;max-height:90vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,.18)}
.modal h2{font-size:15.5px;font-weight:500;margin-bottom:1rem;color:var(--ink)}
.modal h3{font-size:13px;font-weight:500;margin:.85rem 0 .45rem;color:var(--ink2)}
.form-row{display:flex;flex-direction:column;gap:.28rem;margin-bottom:.7rem}
.form-row label{font-size:11px;color:var(--ink2);font-weight:500}
.form-row input,.form-row textarea,.form-row select{border:1px solid var(--border);border-radius:7px;padding:.42rem .62rem;font-size:13px;font-family:var(--ui-font);color:var(--ink);background:var(--surface);width:100%}
.form-row textarea{resize:vertical;min-height:58px}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--admin);box-shadow:0 0 0 2px rgba(26,74,138,.1)}
.modal-footer{display:flex;gap:.45rem;justify-content:flex-end;margin-top:1rem;flex-wrap:wrap}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}

/* Sentence editor */
.sent-editor-wrap{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:.45rem}
.sent-editor-row{display:grid;grid-template-columns:16px 78px 1fr 108px 1fr 145px 22px;gap:.35rem;align-items:center;padding:.38rem .5rem;border-bottom:1px solid var(--border)}
.sent-editor-row:last-child{border-bottom:none}
.sent-editor-row.hdr{background:var(--paper);font-size:9.5px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em}
.sent-hz-in{font-family:var(--zh-font);font-size:13.5px;border:none;background:transparent;color:var(--ink);width:100%;min-width:0}
.sent-hz-in:focus{outline:none}
.sent-spk-in{width:100%;border:none;background:transparent;font-size:11px;color:var(--gold);font-weight:600;font-family:var(--ui-font);min-width:0}
.sent-spk-in:focus{outline:none}
.sent-py-prev{font-size:9.5px;color:var(--teal);line-height:1.4;overflow:hidden;min-width:0;word-break:break-all}
.sent-voice-sel{font-size:10px;border:1px solid var(--border);background:var(--paper);color:var(--ink);border-radius:4px;padding:.15rem .2rem;width:100%;min-width:0}
.sent-drag{color:var(--ink3);cursor:grab;font-size:13px;user-select:none;text-align:center}
.sent-del{width:21px;height:21px;border-radius:50%;border:1px solid #f5c0c0;background:var(--red-bg);color:var(--red);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color,border-color,color,box-shadow,transform,opacity .12s}
.sent-del:hover{background:var(--red);color:#fff}
.add-sent-btn{width:100%;padding:.35rem;border:1.5px dashed var(--border);border-radius:6px;background:transparent;color:var(--ink3);font-size:11.5px;cursor:pointer;font-family:var(--ui-font);transition:background-color,border-color,color,box-shadow,transform,opacity .12s;margin-top:.32rem}
.add-sent-btn:hover{border-color:var(--admin);color:var(--admin)}

/* Speaker voice panel */
.spk-voice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.45rem;margin-bottom:.85rem}
.spk-voice-card{border:1px solid var(--border);border-radius:7px;padding:.45rem .6rem;background:var(--paper)}
.spk-voice-label{font-size:11px;font-weight:600;color:var(--gold);margin-bottom:.28rem}
.spk-voice-sel{width:100%;font-size:11px;border:1px solid var(--border);border-radius:5px;padding:.18rem .3rem;color:var(--ink);background:var(--surface)}

/* Admin chapter list */
.admin-ch-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.75rem .9rem;margin-bottom:.5rem}
.admin-ch-head{display:flex;align-items:center;gap:.45rem;border-radius:6px;padding:.2rem .1rem;transition:background .12s;user-select:none}
.admin-ch-head:hover{background:var(--accent3)}
.admin-ch-body{margin-top:.4rem;padding-top:.35rem;border-top:1px solid var(--border)}
.admin-ch-title{font-weight:500;font-size:13.5px;flex:1}
.admin-ch-id{font-size:10px;color:var(--ink3)}
.admin-text-row{display:flex;align-items:center;gap:.45rem;padding:.32rem .45rem;border-radius:6px;border:1px solid var(--border);margin-bottom:.3rem;background:var(--paper);font-size:12px}
.admin-vocab-row{display:flex;align-items:center;gap:.45rem;padding:.35rem .45rem;border-radius:6px;border:1px solid var(--border);margin-bottom:.3rem;background:var(--paper)}
.ava-hz{font-family:var(--zh-font);font-size:15px;width:65px;flex-shrink:0}
.ava-py{font-size:10.5px;color:var(--teal);width:78px;flex-shrink:0}
.ava-def{font-size:11px;color:var(--ink2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-btns{display:flex;flex-direction:column;gap:2px}
.order-btn{width:20px;height:16px;border:1px solid var(--border);border-radius:3px;background:var(--paper);color:var(--ink3);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color,border-color,color,box-shadow,transform,opacity .1s}
.order-btn:hover{background:var(--admin);color:#fff;border-color:var(--admin)}

/* AI gen panel */
.ai-gen-panel{background:var(--ai-bg);border:1px solid rgba(90,58,138,.2);border-radius:8px;padding:.6rem .8rem;margin-top:.75rem}
.ai-gen-title{font-size:12px;font-weight:500;color:var(--ai);margin-bottom:.35rem}
.ai-gen-desc{font-size:11px;color:var(--ink2);margin-bottom:.45rem}

@media(max-width:500px){
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .fc-grid{grid-template-columns:1fr}
  .sent-editor-row{grid-template-columns:14px 65px 1fr 90px 1fr 130px 22px}
  .form-grid-2{grid-template-columns:1fr}
}

/* Admin vocab tree */
.admin-tree-level{margin-bottom:.6rem;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.admin-tree-lv-head{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:var(--admin-bg);color:var(--admin);font-size:12.5px;font-weight:600;cursor:pointer;user-select:none}
.admin-tree-lv-head:hover{background:var(--admin);color:#fff}
.admin-tree-lv-body{padding:.4rem .5rem}
.admin-tree-book{margin-bottom:.35rem;border:1px solid var(--border);border-radius:7px;overflow:hidden}
.admin-tree-bk-head{display:flex;align-items:center;gap:.4rem;padding:.42rem .7rem;background:var(--accent3);color:var(--ink2);font-size:12px;font-weight:500;cursor:pointer;user-select:none}
.admin-tree-bk-head:hover{background:var(--accent2)}
.admin-tree-bk-body{padding:.3rem .4rem}
.admin-tree-ch{margin-bottom:.25rem;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.admin-tree-ch-head{display:flex;align-items:center;gap:.35rem;padding:.35rem .6rem;background:var(--paper);color:var(--ink2);font-size:11.5px;cursor:pointer;user-select:none}
.admin-tree-ch-head:hover{background:var(--teal-bg)}
.admin-tree-ch-body{padding:.2rem .3rem}
.admin-tree-arrow{font-size:10px;color:var(--ink3);flex-shrink:0}
.admin-tree-count{font-size:10px;color:var(--ink3);background:var(--border);padding:.05rem .3rem;border-radius:4px;flex-shrink:0}

.bc-logout-btn{flex-shrink:0;padding:.38rem .6rem;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--ink3);font-size:11px;cursor:pointer;font-family:var(--ui-font);white-space:nowrap;transition:background-color,border-color,color,box-shadow,transform,opacity .15s;margin-left:.25rem}
.bc-logout-btn:hover{background:var(--red-bg);color:var(--red);border-color:#f5c0c0}
.bc-text-select{padding:.35rem .5rem;font-size:12px;font-weight:500;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-family:var(--ui-font);max-width:160px;flex-shrink:0}
.bc-text-select:focus{outline:none;border-color:var(--accent)}
.text-nav-bar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0 .75rem;gap:.75rem}
.text-nav-btn{flex:0 0 auto;min-width:90px}
.text-nav-btn.disabled,.text-nav-btn:disabled{opacity:.35;cursor:not-allowed}
.text-nav-counter{flex:1;text-align:center;font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}

/* Speed control */
.speed-ctrl{display:flex;align-items:stretch;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--surface)}
.speed-btn{width:26px;border:none;background:transparent;color:var(--ink2);font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--ui-font);transition:background .12s;padding:.28rem 0;line-height:1}
.speed-btn:hover{background:var(--accent2);color:var(--accent)}
.speed-label{font-size:.75em;font-weight:500;color:var(--ink2);padding:.28rem .35rem;min-width:38px;text-align:center;font-family:var(--ui-font);display:flex;align-items:center;justify-content:center}
.ch-jump-row{display:flex;align-items:center;gap:.6rem;padding:.5rem 0 .75rem;border-bottom:1px solid var(--border);margin-bottom:.5rem}
.ch-jump-label{font-size:12px;color:var(--ink3);white-space:nowrap}
.ch-jump-select{flex:1;padding:.35rem .5rem;font-size:13px;font-weight:500;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-family:var(--ui-font)}
.ch-jump-select:focus{outline:none;border-color:var(--accent)}

/* ── NOTES FIELD ────────────────────────────────────────────────────────── */
.notes-section{margin:.9rem 0;padding:.7rem .85rem;background:var(--gold-bg);border:1px solid #e8d9a0;border-radius:10px}
.notes-label{font-size:11px;font-weight:600;color:var(--gold);margin-bottom:.4rem;letter-spacing:.03em}
.notes-area{width:100%;min-height:42px;border:1px solid #ddd0a0;border-radius:7px;padding:.5rem .65rem;font-size:13px;font-family:var(--ui-font);color:var(--ink);background:#fffef5;resize:none;overflow:hidden;line-height:1.6;transition:border-color .15s;display:block}
.notes-area:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(138,100,32,.1)}
.notes-area::placeholder{color:var(--ink3)}
.notes-save-status{display:block;font-size:11px;min-height:16px;margin-top:3px;transition:color .2s}
.notes-save-status.saving{color:var(--ink3)}
.notes-save-status.saved{color:#3a8a3a}
.notes-save-status.failed{color:#c0392b}

/* ── WAVEFORM PLAYER ────────────────────────────────────────────────────── */
.waveform-section{background:var(--teal-bg);border:1px solid rgba(26,96,96,.2);border-radius:12px;padding:.85rem 1rem;margin-bottom:1.1rem}
.waveform-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem}
.waveform-title{font-size:12.5px;font-weight:600;color:var(--teal)}
.waveform-time{font-size:11px;color:var(--teal);font-variant-numeric:tabular-nums;font-family:var(--ui-font)}
.waveform-wrap{position:relative;height:80px;background:rgba(26,96,96,.07);border-radius:8px;overflow:hidden;cursor:crosshair;margin-bottom:.6rem}
.waveform-wrap:hover{background:rgba(26,96,96,.11)}
.waveform-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.waveform-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:11.5px;color:var(--teal);background:rgba(234,244,244,.7)}
.waveform-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--teal);transform:translateX(-50%);pointer-events:none;left:50%}
.wave-jog-btn{padding:.25rem .5rem;border-radius:6px;border:1px solid rgba(26,96,96,.3);background:rgba(26,96,96,.1);color:var(--teal);font-size:11px;font-weight:600;font-family:var(--ui-font);cursor:pointer;transition:background .12s;white-space:nowrap}
.wave-jog-btn:hover{background:rgba(26,96,96,.2)}
.waveform-controls{display:flex;align-items:center;gap:.5rem}

/* ── LOOP BUTTON ────────────────────────────────────────────────────────── */
.loop-btn{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--ink3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--ui-font);transition:background-color,border-color,color,box-shadow,transform,opacity .15s;flex-shrink:0;padding:0;line-height:1}
.loop-btn:hover{background:var(--teal-bg);color:var(--teal);border-color:var(--teal)}
.loop-btn.on{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ── WORKBOOK ACCORDION ─────────────────────────────────────────────────── */
.wb-wave-container{margin-bottom:.75rem}
.wb-accordion{display:flex;flex-direction:column;gap:.4rem}

.wb-part{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)}
.wb-part-head{display:flex;align-items:center;gap:.5rem;padding:.65rem .85rem;cursor:pointer;user-select:none;background:var(--accent3);transition:background .12s}
.wb-part-head:hover{background:var(--accent2)}
.wb-part-arrow{font-size:11px;color:var(--ink3);flex-shrink:0;width:10px}
.wb-part-label{font-size:13px;font-weight:600;color:var(--ink);flex:1}
.wb-part-count{font-size:10.5px;color:var(--ink3);flex-shrink:0}
.wb-part-body{padding:.35rem .5rem;display:block;border-top:1px solid var(--border)}

.wb-item{border-radius:7px;margin:.25rem 0;overflow:hidden}
.wb-item-head{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;cursor:pointer;user-select:none;background:var(--paper);border:1px solid var(--border);border-radius:7px;transition:background .12s}
.wb-item-head:hover{background:var(--teal-bg)}
.wb-item-arrow{font-size:10px;color:var(--ink3);flex-shrink:0;width:9px}
.wb-item-q{font-size:11.5px;font-weight:700;color:var(--teal);min-width:28px;flex-shrink:0}
.wb-item-title{font-size:12.5px;color:var(--ink2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-item-body{padding:.6rem .7rem .4rem;background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 7px 7px}
.wb-item-card{background:var(--paper);border-radius:8px;padding:.6rem .75rem .5rem;margin-bottom:.5rem}
.wb-item-card-title{font-size:11px;color:var(--ink3);margin-bottom:.3rem;font-style:italic}

/* ── FONT TOGGLE ─────────────────────────────────────────────────────────── */
.font-toggle{display:flex;align-items:center;justify-content:center;height:24px;padding:0 .45rem;border-radius:5px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:13px;color:var(--ink2);white-space:nowrap;transition:background-color,border-color,color,box-shadow,transform,opacity .15s;user-select:none;flex-shrink:0;margin-left:.2rem}
.font-toggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent3)}

/* ── READING EXERCISES ───────────────────────────────────────────────────────── */
.rd-section{margin-top:1.25rem;border-top:2px solid var(--border);padding-top:1rem}
.rd-section-head{font-size:12px;font-weight:700;color:var(--ink3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.15rem}
.rd-title{font-family:var(--zh-font);font-size:14px;font-weight:600;color:var(--ink);margin-bottom:.1rem}
.rd-instr{font-size:11.5px;color:var(--ink3);margin-bottom:.9rem;line-height:1.5}

/* Ex1: dialogue matching */
.rd-ex1-wrap{display:flex;flex-direction:column;gap:.9rem}
.rd-ex1-list{display:flex;flex-direction:column;gap:.45rem}
.rd-ex1-slot{display:flex;flex-direction:row;align-items:stretch;gap:.5rem}
.rd-ex1-slot .rd-ex1-rows{display:flex;flex-direction:column;flex:1;gap:.3rem}
.rd-ex1-slot .rd-ex1-rows>*:nth-child(2){margin-left:1.5rem}
.rd-ex1-slot .rd-flip-col{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;visibility:hidden}
.rd-ex1-slot.paired .rd-flip-col{visibility:visible}
.rd-ex1-options{display:flex;flex-direction:column;gap:.4rem;margin-top:.3rem;padding-top:.6rem;border-top:1px dashed var(--border)}
.rd-option{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem .65rem;background:#f0f7f7;border:1.5px solid #c8dede;border-radius:8px;cursor:pointer;transition:background-color,border-color,color,box-shadow,transform,opacity .15s;user-select:none}
.rd-option:hover{border-color:var(--teal);background:var(--teal-bg)}
.rd-option.selected{border-color:var(--teal);background:var(--teal-bg);box-shadow:0 0 0 2px rgba(26,96,96,.15)}
.rd-option.used{opacity:1;cursor:pointer}
.rd-option.correct{border-color:#2a7a3b;background:#edfaf0;cursor:default}
.rd-option.wrong{border-color:var(--accent);background:var(--accent2)}
.rd-option-id{font-size:11px;font-weight:700;color:var(--teal);min-width:16px;flex-shrink:0;padding-top:1px}
.rd-option-text{font-family:var(--zh-font);font-size:13.5px;color:var(--ink);line-height:1.5}
.rd-questions{display:flex;flex-direction:column;gap:.45rem}
.rd-q-row{display:flex;align-items:center;gap:.55rem;padding:.5rem .65rem;background:#fdf6ee;border:1.5px solid #e8d9c0;border-radius:8px;cursor:pointer;transition:background-color,border-color,color,box-shadow,transform,opacity .15s;user-select:none;min-height:44px}
.rd-q-row:hover:not(.answered){border-color:var(--accent);background:var(--accent3)}
.rd-q-row.active-q{border-color:var(--accent);background:var(--accent3);box-shadow:0 0 0 2px rgba(181,49,31,.12)}
.rd-q-row.answered{cursor:default}
.rd-q-row.correct-pair{border-color:#2a7a3b;background:#edfaf0}
.rd-q-row.wrong-pair{border-color:var(--accent);background:var(--accent2)}
.rd-q-num{font-size:11px;font-weight:700;color:var(--ink3);min-width:20px;flex-shrink:0}
.rd-q-text{font-family:var(--zh-font);font-size:13.5px;color:var(--ink);flex:1;line-height:1.5}
.rd-flip-btn{width:38px;align-self:stretch;font-size:16px;font-weight:400;background:var(--teal-bg);border:1px solid var(--teal);border-radius:7px;color:var(--teal);cursor:pointer;font-family:var(--ui-font);transition:background-color,border-color,color,box-shadow,transform,opacity .15s;display:flex;align-items:center;justify-content:center}
.rd-flip-btn:hover{background:var(--teal);color:#fff}
.rd-check-btn{margin-top:.75rem;padding:.45rem .9rem;background:var(--teal);color:#fff;border:none;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--ui-font);transition:opacity .15s}
.rd-check-btn:hover{opacity:.85}
.rd-check-btn:disabled{opacity:.4;cursor:default}
.rd-reset-btn{margin-top:.5rem;padding:.35rem .7rem;background:none;color:var(--ink3);border:1px solid var(--border);border-radius:7px;font-size:11.5px;cursor:pointer;font-family:var(--ui-font);margin-left:.4rem}
.rd-score{font-size:12px;font-weight:600;color:var(--teal);margin-top:.5rem;padding:.4rem .65rem;background:var(--teal-bg);border-radius:6px;display:inline-block}

/* Ex2: fill in the blanks */
.rd-ex2-words{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.rd-word-chip{padding:.35rem .7rem;background:var(--surface);border:1.5px solid var(--border);border-radius:20px;font-family:var(--zh-font);font-size:13.5px;color:var(--ink);cursor:pointer;transition:background-color,border-color,color,box-shadow,transform,opacity .15s;user-select:none;font-weight:600}
.rd-word-chip:hover{border-color:var(--teal);background:var(--teal-bg);color:var(--teal)}
.rd-word-chip.selected{border-color:var(--teal);background:var(--teal);color:#fff}
.rd-word-chip.used{opacity:.4;cursor:pointer}
.rd-word-chip.correct{border-color:#2a7a3b;background:#edfaf0;color:#2a7a3b;cursor:default}
.rd-word-chip.wrong{border-color:var(--accent);background:var(--accent2);color:var(--accent)}
.rd-fill-questions{display:flex;flex-direction:column;gap:.5rem}
.rd-fill-row{display:flex;align-items:center;gap:.5rem;padding:.55rem .65rem;background:var(--paper);border:1.5px solid var(--border);border-radius:8px;cursor:pointer;transition:background-color,border-color,color,box-shadow,transform,opacity .15s;min-height:44px;user-select:none}
.rd-fill-row:hover:not(.filled){border-color:var(--teal);background:var(--teal-bg)}
.rd-fill-row.active-fill{border-color:var(--teal);background:var(--teal-bg);box-shadow:0 0 0 2px rgba(26,96,96,.15)}
.rd-fill-row.filled{cursor:default}
.rd-fill-row.correct-fill{border-color:#2a7a3b;background:#edfaf0}
.rd-fill-row.wrong-fill{border-color:var(--accent);background:var(--accent2)}
.rd-fill-num{font-size:11px;font-weight:700;color:var(--ink3);min-width:20px;flex-shrink:0}
.rd-fill-text{font-family:var(--zh-font);font-size:13.5px;color:var(--ink);flex:1;line-height:1.6}
.rd-gap{display:inline-block;min-width:36px;padding:1px 6px;border-radius:4px;background:var(--teal-bg);border:1.5px dashed var(--teal);color:var(--teal);font-weight:700;text-align:center;transition:background-color,border-color,color,box-shadow,transform,opacity .2s;vertical-align:baseline}
.rd-gap.filled-gap{background:var(--teal);color:#fff;border-style:solid;border-color:var(--teal)}
.rd-gap.correct-gap{background:#2a7a3b;color:#fff;border-color:#2a7a3b;border-style:solid}
.rd-gap.wrong-gap{background:var(--accent2);color:var(--accent);border-color:var(--accent);border-style:solid}
.rd-fill-badge{font-size:11px;font-weight:700;width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Ex3: multiple choice */
.rd-mc-questions{display:flex;flex-direction:column;gap:.85rem}
.rd-mc-item{background:var(--surface);border:1.5px solid var(--border);border-radius:10px;overflow:hidden}
.rd-mc-passage{font-family:var(--zh-font);font-size:13.5px;color:var(--ink);line-height:1.7;padding:.65rem .75rem .4rem;border-bottom:1px solid var(--border)}
.rd-mc-q{font-family:var(--zh-font);font-size:13px;font-weight:600;color:var(--teal);padding:.35rem .75rem .3rem}
.rd-mc-opts{display:flex;gap:.4rem;padding:.3rem .65rem .55rem;flex-wrap:wrap}
.rd-mc-opt{padding:.35rem .75rem;border:1.5px solid var(--border);border-radius:20px;font-family:var(--zh-font);font-size:13px;color:var(--ink);cursor:pointer;transition:background-color,border-color,color,box-shadow,transform,opacity .15s;user-select:none;background:var(--paper)}
.rd-mc-opt:hover:not(.answered){border-color:var(--teal);background:var(--teal-bg);color:var(--teal)}
.rd-mc-opt.chosen{border-color:var(--teal);background:var(--teal-bg);color:var(--teal);font-weight:600}
.rd-mc-opt.correct-mc{border-color:#2a7a3b;background:#edfaf0;color:#2a7a3b;font-weight:600;cursor:default}
.rd-mc-opt.wrong-mc{border-color:var(--accent);background:var(--accent2);color:var(--accent);cursor:default}
.rd-mc-opt.answered:not(.chosen):not(.correct-mc){cursor:default;opacity:.6}

/* ── OFFLINE DOWNLOAD PANEL ─────────────────────────────────────────── */
.dl-panel{margin:.75rem 0;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;overflow:hidden;font-size:13px}
.dl-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .85rem;background:var(--paper);gap:.5rem;flex-wrap:wrap}
.dl-panel-title{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.dl-panel-count{font-size:12px;color:var(--ink3)}
.dl-panel-btns{padding:.35rem .85rem .5rem;display:flex;gap:.5rem}
.dl-panel-ok{font-size:12px;color:var(--green);padding:.4rem .85rem;font-weight:500}
.dl-panel .btn{font-size:12px;padding:.25rem .6rem}
.dl-prog-wrap{height:6px;background:var(--border);margin:.45rem .85rem .15rem;border-radius:99px;overflow:hidden}
.dl-prog-bar{height:100%;background:var(--teal);border-radius:99px;transition:width .3s}
.dl-prog-lbl{font-size:12px;color:var(--ink3);padding:.1rem .85rem .5rem;}

/* ── LECTURE NOTES POPUP ─────────────────────────────────────────────────── */
.ln-overlay{position:fixed;inset:0;z-index:9998;background:#fff;display:flex;flex-direction:column;font-family:var(--ui-font);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ln-toolbar{flex:0 0 auto;display:flex;align-items:center;gap:3px;padding:5px 8px;background:var(--bar);border-bottom:1px solid var(--border);flex-wrap:wrap;min-height:46px}
.ln-tbtn{min-width:34px;height:34px;border:1.5px solid transparent;border-radius:7px;background:transparent;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;padding:0 6px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.ln-tbtn:active{opacity:.7}
.ln-tbtn.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.ln-tbtn:disabled{opacity:.3;cursor:default}
.ln-sbtn{min-width:27px;height:27px;border:1.5px solid var(--border);border-radius:5px;background:transparent;cursor:pointer;font-size:11px;font-weight:600;color:var(--ink);-webkit-tap-highlight-color:transparent}
.ln-sbtn.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.ln-colors{display:flex;gap:3px;align-items:center}
.ln-color{width:22px;height:22px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;padding:0;outline:none;-webkit-tap-highlight-color:transparent}
.ln-color.active{border-color:var(--teal);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--teal)}
.ln-div{width:1px;height:24px;background:var(--border);margin:0 3px;flex-shrink:0}
.ln-spacer{flex:1}
.ln-save-status{font-size:11px;white-space:nowrap;padding:0 4px;transition:color .2s}
.ln-save-status.saving{color:var(--ink3)}
.ln-save-status.saved{color:#3a8a3a}
.ln-save-status.failed{color:#c0392b}
.ln-del-btn{height:32px;border:1.5px solid var(--border);border-radius:7px;background:transparent;cursor:pointer;font-size:13px;padding:0 9px;color:var(--ink);transition:background .15s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent}
.ln-del-btn.warn{background:#fff7e0;border-color:#e07a00;color:#9a5000;font-weight:600}
.ln-del-btn.danger{background:#fdecea;border-color:#b5311f;color:#b5311f;font-weight:700}
.ln-close-btn{min-width:34px;height:34px;border:none;border-radius:7px;background:transparent;cursor:pointer;font-size:17px;font-weight:700;color:var(--ink);-webkit-tap-highlight-color:transparent}
.ln-close-btn:hover{background:var(--accent2)}
.ln-scroll{flex:1;overflow-y:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;display:flex;flex-direction:column;align-items:flex-start}
.ln-inner{position:relative;flex-shrink:0}
.ln-text{padding:16px 16px 8px;pointer-events:none;user-select:none;-webkit-user-select:none}
.ln-text-body{font-family:var(--ui-font);color:var(--ink)}
.ln-title{font-weight:600;font-size:1.1em;margin-bottom:12px}
.ln-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px;margin-bottom:8px;line-height:1.5}
.ln-spk{color:var(--teal);font-weight:600;margin-right:4px;font-size:.85em}
.ln-char{display:inline-flex;flex-direction:column;align-items:center}
.ln-char .hz{font-size:1em;line-height:1.25}
.ln-char .py{font-size:.58em;color:var(--ink3);line-height:1.1}
.ln-char.punct .hz{font-size:1em}
.ln-extra{min-height:40vh;background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--border) 31px,var(--border) 32px)}
/* Prevent double-tap zoom on all overlay controls; scroll/canvas override below */
.ln-overlay{touch-action:manipulation}
.ln-canvas{position:absolute;top:0;left:0;touch-action:none;cursor:crosshair}
/* Pan mode: canvas passes both axes of touch scroll to the parent */
.ln-pan-mode .ln-canvas{cursor:grab;touch-action:pan-x pan-y}
/* Scroll container handles both scroll directions; pinch is managed in JS */
.ln-scroll{touch-action:pan-x pan-y}
.ln-notes-btn{margin-top:8px;font-size:12px;padding:.3rem .7rem}
.ln-notes-btn.has-notes{background:var(--teal);color:#fff;border-color:var(--teal)}
.ln-size-group{display:flex;align-items:center;gap:3px;flex-shrink:0}
.ln-tbtn#lnBtnText{font-weight:700;font-size:15px;font-family:var(--ui-font)}
.ln-add-space-bar{display:flex;justify-content:center;align-items:center;width:100%;box-sizing:border-box;padding:12px 0 16px;background:var(--paper);border-top:1px dashed var(--border);position:relative;z-index:2;flex-shrink:0}
.ln-add-space-btn{font-size:13px;font-weight:500;padding:.45rem 1.2rem;border:1.5px solid var(--teal);border-radius:8px;background:transparent;color:var(--teal);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ln-add-space-btn:active{background:var(--teal);color:#fff}
.ln-text-input{position:fixed;background:transparent;border:none;border-bottom:1.5px dashed currentColor;outline:none;font-family:var(--ui-font);min-width:100px;padding:0 2px;z-index:10000}

/* Text popup — 50% transparent glass so the underlying lecture note stays visible */
.ln-tp{position:fixed;z-index:10001;background:rgba(255,255,255,0.2);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1.5px solid rgba(180,180,180,0.3);border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.08);min-width:140px;overflow:hidden;font-family:var(--ui-font);display:flex;flex-direction:column;box-sizing:border-box}
.ln-tp-handle{padding:11px 12px;background:var(--bar);cursor:grab;font-size:12px;color:var(--ink3);user-select:none;touch-action:none;border-bottom:1px solid var(--border)}
.ln-tp-handle:active{cursor:grabbing}
/* Padding must match .ln-ta-body for WYSIWYG line-break matching */
.ln-tp-area{display:block;width:100%;box-sizing:border-box;padding:8px 12px;border:none;outline:none;font-family:var(--ui-font);font-size:15px;resize:none;flex:1;min-height:60px;color:var(--ink);background:transparent}
/* Resize grip — bottom-right corner, clear of Done button */
.ln-tp-resize{position:absolute;bottom:6px;right:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:nwse-resize;touch-action:none;font-size:16px;color:var(--ink3);user-select:none;line-height:1;pointer-events:auto}

/* Text annotation elements */
.ln-ta{position:absolute;z-index:2;cursor:default;box-sizing:border-box}
.ln-ta.active{z-index:6}
/* Padding must match .ln-tp-area for identical line-break behaviour */
.ln-ta-body{white-space:pre-wrap;word-break:break-word;line-height:1.45;padding:8px 12px;box-sizing:border-box;user-select:none;-webkit-user-select:none}
/* No gap between text and tool row; hovered OR active shows tools */
.ln-ta-tools{display:none;gap:3px;margin-top:0;padding:0 8px 4px}
.ln-ta.hovered .ln-ta-tools,.ln-ta.active .ln-ta-tools{display:flex}
/* ~2× larger buttons: 44px tall, 44px min-width, SVG icons inside */
.ln-ta-btn{height:44px;min-width:44px;border:1.5px solid var(--border);border-radius:8px;background:var(--paper);cursor:pointer;padding:0 8px;color:var(--ink);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.ln-ta-btn svg{display:block;flex-shrink:0}
.ln-ta-drag{cursor:grab;touch-action:none}
.ln-ta-drag:active{cursor:grabbing}
.ln-ta-del{color:var(--accent)}

/* Photo annotation elements */
.ln-pa{position:absolute;z-index:1;box-sizing:border-box;cursor:default}
.ln-pa.active{z-index:5}
.ln-pa-tools{display:none;gap:3px;padding:4px 8px;background:var(--paper);border-bottom:1px solid var(--border)}
.ln-pa.hovered .ln-pa-tools,.ln-pa.active .ln-pa-tools{display:flex}
.ln-pa-btn{height:44px;min-width:44px;border:1.5px solid var(--border);border-radius:8px;background:var(--paper);cursor:pointer;padding:0 8px;color:var(--ink);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.ln-pa-btn svg{display:block;flex-shrink:0}
.ln-pa-drag{cursor:grab;touch-action:none}
.ln-pa-drag:active{cursor:grabbing}
.ln-pa-del{color:var(--accent)}
.ln-pa-resize{position:absolute;bottom:4px;right:4px;width:28px;height:28px;cursor:nwse-resize;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink3);background:var(--paper);border:1.5px solid var(--border);border-radius:6px;opacity:0;transition:opacity .15s;touch-action:none;user-select:none}
.ln-pa.hovered .ln-pa-resize,.ln-pa.active .ln-pa-resize{opacity:1}

/* ── LOGIN MODAL ─────────────────────────────────────────────────────────── */
.login-overlay{position:fixed;inset:0;z-index:99999;background:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--ui-font)}
.login-box{width:100%;max-width:340px;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:.9rem}
.login-logo{font-size:2rem;text-align:center;letter-spacing:3px;color:var(--teal)}
.login-title{font-size:1.2rem;font-weight:600;text-align:center;color:var(--ink);margin:-.25rem 0 .25rem}
.login-error{color:var(--accent);font-size:13px;text-align:center;background:var(--accent2);padding:.5rem .75rem;border-radius:6px}
.login-input{width:100%;padding:.75rem 1rem;border:1.5px solid var(--border);border-radius:8px;font-size:16px;background:var(--paper);color:var(--ink);box-sizing:border-box;outline:none;transition:border-color .15s;-webkit-appearance:none}
.login-input:focus{border-color:var(--teal)}
.login-btn{width:100%;padding:.75rem;background:var(--teal);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:opacity .15s}
.login-btn:active,.login-btn:disabled{opacity:.7}
.login-reset-btn{width:100%;margin-top:.5rem;padding:.55rem;background:transparent;color:var(--teal);border:1px solid var(--teal);border-radius:8px;font-size:13px;cursor:pointer}
.login-reset-btn:hover{background:var(--accent2)}
.login-reset-btn:disabled{opacity:.6;cursor:default}
.login-info{color:var(--teal);font-size:13px;text-align:center;background:var(--accent2);padding:.5rem .75rem;border-radius:6px}

/* ── USER BADGE ──────────────────────────────────────────────────────────── */
.user-badge{display:flex;align-items:center;gap:6px;padding:4px 10px;font-size:12px;color:var(--ink3);border-top:1px solid var(--border);background:var(--bar)}
.user-badge button{background:none;border:1px solid var(--border);color:var(--ink3);cursor:pointer;font-size:11px;padding:2px 8px;border-radius:4px}
.user-badge button:hover{background:var(--accent2);color:var(--accent)}

/* ── ADMIN USER LIST ─────────────────────────────────────────────────────── */
.admin-user-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.admin-user-name{flex:1;font-size:14px;font-weight:500;min-width:100px}
.admin-user-date{font-size:11px;color:var(--ink3);min-width:70px}
.admin-badge{font-size:10px;background:var(--teal);color:#fff;border-radius:3px;padding:1px 5px;vertical-align:middle;margin-left:4px}

/* ── NON-HSK GENERATOR ───────────────────────────────────────────────────── */
.gen-view{padding:.5rem 0 2rem}
.gen-section{margin:.5rem .9rem 1rem;background:var(--paper);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.gen-section-hdr{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-bottom:1px solid var(--border);background:var(--bar)}
.gen-sec-title{font-size:.9rem;font-weight:600;color:var(--ink);flex:1}
.gen-sec-sub{font-size:.72rem;color:var(--ink3)}

/* Compact selector: level dd + chapter dd + add-all in one row */
.gen-sel-area{padding:.55rem .7rem .65rem}
.gen-sel-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}
.gen-sel-dd{flex:1;min-width:0;padding:.32rem .55rem;border:1px solid var(--border);border-radius:7px;background:var(--paper);color:var(--ink);font-size:.8rem;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 6 4.5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .45rem center;padding-right:1.4rem}
.gen-add-all-btn{white-space:nowrap;flex-shrink:0;font-size:.75rem;padding:.28rem .6rem;border:1px solid var(--teal);border-radius:6px;background:transparent;color:var(--teal);cursor:pointer;-webkit-tap-highlight-color:transparent}
.gen-add-all-btn:active{background:var(--teal-bg)}
.gen-tree-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.gen-tree-chip{display:inline-block;padding:.22rem .55rem;border:1px solid var(--border);border-radius:6px;font-size:.8rem;color:var(--ink2);background:var(--surface);cursor:pointer;-webkit-tap-highlight-color:transparent}
.gen-tree-chip:active{background:var(--teal-bg);border-color:var(--teal);color:var(--teal)}
.gen-tree-chip.grammar{border-color:#c5b8e8;color:#7c5cbf;background:#f3f0fc}
.gen-tree-chip.grammar:active{background:#e9e3fa;border-color:#9c7ed4}
.gen-tree-empty,.gen-loading{font-size:.78rem;color:var(--ink3)}

/* Chip pool */
.gen-pool-wrap{padding:.5rem .7rem .65rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;min-height:2.6rem}
.gen-pool-empty{font-size:.8rem;color:var(--ink3);font-style:italic}
.gen-pool-group{font-size:.7rem;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;width:100%;margin-top:.2rem}
.gen-chip{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .4rem .2rem .55rem;border:1.5px solid var(--border);border-radius:20px;font-size:.8rem;color:var(--ink3);background:var(--surface);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.gen-chip.on{border-color:var(--teal);background:var(--teal-bg);color:var(--teal)}
.gen-chip-lbl{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gen-chip-rm{font-size:.8rem;line-height:1;padding:.05rem .05rem;cursor:pointer;opacity:.5;flex-shrink:0}
.gen-chip-rm:active{opacity:1;color:var(--accent)}
.gen-clear-btn{font-size:.72rem;padding:.15rem .5rem;border:1px solid var(--accent);border-radius:5px;background:transparent;color:var(--accent);cursor:pointer;-webkit-tap-highlight-color:transparent;margin-top:.15rem}

/* Settings */
.gen-controls{padding:.5rem .75rem .7rem;display:flex;flex-direction:column;gap:.5rem}
.gen-ctrl-row{display:flex;align-items:center;gap:.55rem}
.gen-ctrl-label{font-size:.82rem;font-weight:500;color:var(--ink2);min-width:4.5rem;flex-shrink:0}
.gen-slider{flex:1;height:4px;accent-color:var(--teal);cursor:pointer}
.gen-len-val{font-size:.82rem;font-weight:600;color:var(--teal);min-width:2.2rem;text-align:right}
.gen-ctrl-unit{font-size:.75rem;color:var(--ink3)}
.gen-select{flex:1;padding:.3rem .5rem;border:1px solid var(--border);border-radius:7px;background:var(--paper);color:var(--ink);font-size:.82rem;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 6 4.5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;padding-right:1.5rem}

/* Prompt / output */
.gen-btn{display:block;width:calc(100% - 1.5rem);margin:.6rem .75rem .35rem;padding:.62rem 1rem;background:var(--teal);color:#fff;border:none;border-radius:9px;font-size:.92rem;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .15s}
.gen-btn:active{opacity:.8}
.gen-btn:disabled{opacity:.5}
.gen-prompt-out{display:block;width:calc(100% - 1.5rem);margin:.15rem .75rem;padding:.6rem .75rem;border:1px solid var(--border);border-radius:8px;font-size:.78rem;color:var(--ink2);background:var(--surface);resize:vertical;font-family:monospace;line-height:1.55;box-sizing:border-box}
.gen-out-actions{display:flex;gap:.45rem;padding:.25rem .75rem .7rem;flex-wrap:wrap;align-items:center}
.gen-action-btn{padding:.38rem .85rem;border:1.5px solid var(--teal);border-radius:8px;background:transparent;color:var(--teal);font-size:.8rem;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.gen-action-btn:active{background:var(--teal-bg)}
.gen-action-btn:disabled{opacity:.5}
.gen-action-btn.ai{border-color:#7c5cbf;color:#7c5cbf}
.gen-action-btn.ai:active{background:#f3f0fc}
.gen-action-btn.sm{padding:.26rem .6rem;font-size:.75rem}

/* Generated result section */
.gen-result-sec{display:none}
.gen-result-hdr{align-items:center}
.gen-py-toggle{font-size:.75rem;padding:.2rem .55rem;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--ink3);cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.gen-py-toggle.on{border-color:var(--teal);background:var(--teal-bg);color:var(--teal);font-weight:600}
.gen-result-text{padding:.65rem .9rem .5rem;font-size:1.05rem;line-height:2.1;color:var(--ink)}
.gen-result-text ruby{ruby-align:center}
.gen-result-text rt{font-size:.6em;color:var(--teal);line-height:1.2}

/* My Texts */
.gen-text-list{padding:.5rem .7rem .7rem;display:flex;flex-direction:column;gap:.7rem}
.gen-empty-msg{font-size:.85rem;color:var(--ink3);padding:.5rem .25rem;line-height:1.6}
.gen-text-card{border:1px solid var(--border);border-radius:10px;padding:.6rem .8rem;background:var(--surface);display:flex;flex-direction:column;gap:.4rem}
.gen-text-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.gen-text-title{font-size:.88rem;font-weight:600;color:var(--ink);flex:1}
.gen-text-date{font-size:.72rem;color:var(--ink3)}
.gen-text-owner{font-size:.72rem;color:var(--ink3)}
.gen-text-tags{display:flex;flex-wrap:wrap;gap:.25rem}
.gen-tag{font-size:.72rem;padding:.1rem .4rem;border-radius:4px;background:var(--accent3);color:var(--ink2);border:1px solid var(--border)}
.gen-text-toggle-btn{font-size:.78rem;color:var(--teal);background:none;border:none;padding:0;cursor:pointer;text-align:left}
.gen-text-prompt{font-size:.75rem;color:var(--ink2);background:var(--paper);border:1px solid var(--border);border-radius:7px;padding:.5rem .7rem;white-space:pre-wrap;font-family:monospace;line-height:1.5;margin:.2rem 0 .1rem;overflow-x:auto}
.gen-text-result-hdr{font-size:.72rem;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.gen-text-result{font-size:.92rem;line-height:1.8;color:var(--ink);padding:.15rem 0 .1rem}
.gen-text-del-btn{font-size:.75rem;padding:.2rem .5rem;border:1px solid var(--accent);border-radius:6px;background:transparent;color:var(--accent);cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.gen-text-del-btn:active{background:var(--accent2)}

/* ── SENTENCE TRANSLATION (chapter text view) ────────────────────────────── */
.sent-translation{font-size:.8rem;color:var(--ink3);font-style:italic;padding:.05rem .5rem .35rem 1.1rem;line-height:1.45}

/* ── ADMIN SENTENCE EDITOR — translation field ───────────────────────────── */
.sent-tr-in{flex:1.4;min-width:8rem;padding:.28rem .45rem;border:1px solid var(--border);border-radius:6px;font-size:.78rem;color:var(--ink);background:var(--paper)}

/* ── GENERATOR: TARGET SELECTOR ─────────────────────────────────────────── */
.gen-target-wrap{padding:.5rem .75rem .65rem}
.gen-target-area{display:flex;flex-direction:column;gap:.45rem}
.gen-target-sel{flex:1}
.gen-new-ch-form{display:flex;flex-direction:column;gap:.3rem;padding:.3rem 0 .1rem}
.gen-new-ch-label{font-size:.78rem;font-weight:500;color:var(--ink2)}
.gen-new-ch-in{padding:.32rem .55rem;border:1px solid var(--teal);border-radius:7px;font-size:.82rem;color:var(--ink);background:var(--paper);outline:none}

/* ── GENERATOR: MANUAL INPUT ─────────────────────────────────────────────── */
.gen-manual-area{padding:.5rem .75rem .65rem}
.gen-manual-ta{display:block;width:100%;padding:.55rem .7rem;border:1px solid var(--border);border-radius:8px;font-size:.82rem;color:var(--ink);background:var(--surface);resize:vertical;font-family:inherit;line-height:1.6;box-sizing:border-box;min-height:7rem}
.gen-manual-ta:focus{outline:none;border-color:var(--teal)}
.gen-btn-outline{background:transparent;border:1.5px solid var(--teal);color:var(--teal)}
.gen-btn-outline:active{background:var(--teal-bg)}

/* ── GENERATOR: TEXT EDIT ────────────────────────────────────────────────── */
.gen-edit-inner{padding:.5rem .75rem .9rem;display:flex;flex-direction:column;gap:.65rem}

/* Metadata row */
.gen-edit-meta-row{display:flex;flex-wrap:wrap;gap:.5rem}
.gen-edit-field{display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:10rem}
.gen-edit-lbl{font-size:.72rem;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.gen-edit-inp{padding:.3rem .5rem;border:1px solid var(--border);border-radius:7px;font-size:.85rem;color:var(--ink);background:var(--paper);outline:none}
.gen-edit-inp:focus{border-color:var(--teal)}

/* Speaker voice cards */
.gen-edit-spk-sec{display:flex;flex-direction:column;gap:.3rem}
.gen-edit-spk-hdr{font-size:.78rem;font-weight:600;color:var(--ink2)}
.gen-edit-spk-row{display:flex;flex-wrap:wrap;gap:.5rem}
.gen-edit-spk-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.4rem .6rem;display:flex;flex-direction:column;gap:.25rem;min-width:9rem}
.gen-edit-spk-name{font-size:.82rem;font-weight:600;color:var(--teal)}
.gen-edit-spk-sel{padding:.25rem .4rem;border:1px solid var(--border);border-radius:6px;font-size:.75rem;background:var(--paper);color:var(--ink);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}

/* Sentence table */
.gen-edit-table{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.gen-edit-hdr-row{display:grid;grid-template-columns:5.5rem 1fr 1fr 1fr 8rem 2rem;gap:0;background:var(--bar);border-bottom:1px solid var(--border)}
.gen-edit-hdr-cell{font-size:.65rem;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;padding:.3rem .45rem}
.gen-edit-rows{display:flex;flex-direction:column}
.gen-edit-sent-row{display:grid;grid-template-columns:5.5rem 1fr 1fr 1fr 8rem 2rem;gap:0;border-bottom:1px solid var(--border);align-items:center}
.gen-edit-sent-row:last-child{border-bottom:none}
.gen-edit-cell{padding:.2rem .3rem;display:flex;align-items:center}
.gen-edit-cell--hz{font-size:.9rem}
.gen-edit-cell--py{font-size:.75rem}
.gen-edit-cell--tr{font-size:.78rem}
.gen-edit-cell--del{justify-content:center}
.gen-edit-spk-in,.gen-edit-hz-in,.gen-edit-py-in,.gen-edit-tr-in{width:100%;padding:.22rem .35rem;border:1px solid transparent;border-radius:5px;font-size:.8rem;color:var(--ink);background:transparent;outline:none;font-family:inherit}
.gen-edit-spk-in:focus,.gen-edit-hz-in:focus,.gen-edit-py-in:focus,.gen-edit-tr-in:focus{border-color:var(--teal);background:var(--paper)}
.gen-edit-hz-in{font-size:.95rem}
.gen-edit-py-in{font-size:.72rem;color:var(--ink3)}
.gen-edit-tr-in{font-size:.75rem;color:var(--ink2);font-style:italic}
.gen-edit-voice-sel{width:100%;padding:.2rem .3rem;border:1px solid var(--border);border-radius:5px;font-size:.7rem;background:var(--paper);color:var(--ink);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.gen-edit-del-btn{width:1.4rem;height:1.4rem;border:none;border-radius:50%;background:transparent;color:var(--ink3);font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;line-height:1}
.gen-edit-del-btn:active{background:var(--accent2);color:var(--accent)}
.gen-edit-add-btn{align-self:flex-start;font-size:.78rem;padding:.28rem .75rem;border:1.5px dashed var(--border);border-radius:7px;background:transparent;color:var(--ink3);cursor:pointer;-webkit-tap-highlight-color:transparent}
.gen-edit-add-btn:active{border-color:var(--teal);color:var(--teal)}
.gen-edit-save-btn{display:block;width:100%;padding:.62rem 1rem;background:var(--teal);color:#fff;border:none;border-radius:9px;font-size:.92rem;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .15s;margin-top:.15rem}
.gen-edit-save-btn:active{opacity:.8}
.gen-edit-save-btn:disabled{opacity:.45;cursor:default}
.vp-book-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .35rem .4rem .1rem;
  width: 100%;
}
.rv-loading {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--ink3);
  font-size: 15px;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

/* ════════════════════════════════════════════════════════════════════
   LIÚLI DESIGN REFINEMENTS — applied on top of the original styles
   ════════════════════════════════════════════════════════════════════ */

/* ── Tone-colored pinyin ───────────────────────────────────────────── */
.char-unit .py.t1, .ex-py .t1, .py.t1 { color: var(--t1); }
.char-unit .py.t2, .ex-py .t2, .py.t2 { color: var(--t2); }
.char-unit .py.t3, .ex-py .t3, .py.t3 { color: var(--t3); }
.char-unit .py.t4, .ex-py .t4, .py.t4 { color: var(--t4); }
.char-unit .py.t0, .py.t0           { color: var(--ink3); }

/* ── Breadcrumb: warmer brand mark, softer separators ──────────────── */
.breadcrumb { background:var(--paper); border-bottom-color:var(--rule); padding:0 1rem; min-height:48px; }
.bc-brand { color:var(--accent); font-size:18px; font-family:var(--display-font); font-weight:600; letter-spacing:.2px; border-right-color:var(--rule); }
.bc-btn { font-weight:500; color:var(--ink2); }
.bc-btn:hover { background:var(--accent-soft); color:var(--accent); }
.bc-btn.active { color:var(--accent); }
.bc-sep { color:var(--rule); }

/* ── Tab bar: cleaner, less heavy ──────────────────────────────────── */
.tab-bar { background:var(--paper); border-bottom-color:var(--rule); }
.tab-btn { font-weight:500; color:var(--ink3); border-bottom-width:2px; }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.tab-btn:hover:not(.active) { color:var(--ink); background:transparent; }

/* ── Font-size control: subtler ────────────────────────────────────── */
.fs-control { background:transparent; border-bottom-color:var(--rule); color:var(--ink3); font-family:var(--mono-font); font-size:11px; padding:.4rem 1rem; }
.fs-btn { border-radius:7px; border:1px solid var(--rule); background:var(--surface); color:var(--ink2); font-weight:600; transition:background-color,border-color,color,box-shadow,transform,opacity .12s; }
.fs-btn:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.fs-label { font-family:var(--mono-font); color:var(--ink2); }
.font-toggle { font-family:var(--zh-font); border-radius:7px; }

/* ── Cards & grids: softer borders, lifted shadows ─────────────────── */
.nav-card { border-radius:14px; border-color:var(--rule); box-shadow:var(--shadow-card); transition:transform .18s, box-shadow .18s, border-color .18s; }
.nav-card:hover { border-color:var(--accent); box-shadow:0 6px 22px rgba(0,0,0,.08); transform:translateY(-2px); }
.nav-card-icon { font-size:30px; }
.nav-card-label { font-size:14px; font-weight:600; }
.nav-card-sub { color:var(--ink3); font-family:var(--mono-font); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; }

/* ── Chapter rows ──────────────────────────────────────────────────── */
.ch-row { border-radius:12px; border-color:var(--rule); box-shadow:var(--shadow-card); }
.ch-row:hover { border-color:var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.07); }
.ch-row-num { font-family:var(--mono-font); font-weight:600; color:var(--ink3); letter-spacing:.05em; }
.ch-row-title { font-size:16px; font-weight:500; }

/* ── Page title ────────────────────────────────────────────────────── */
.page-title { border-bottom-color:var(--rule); padding-bottom:.85rem; margin-bottom:1.1rem; }
.page-title-zh { font-size:20px; font-weight:600; letter-spacing:-.3px; }
.page-title-en { font-family:var(--ui-font); color:var(--ink2); font-size:13px; font-weight:400; }

/* ── Buttons: pill style ──────────────────────────────────────────── */
.btn { border-radius:8px; border-color:var(--rule); transition:background-color,border-color,color,box-shadow,transform,opacity .15s; font-weight:500; }
.btn:hover:not(:disabled) { border-color:var(--ink); color:var(--ink); }
.btn.on { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05); }
.btn.primary:hover { background:#d54a30; border-color:#d54a30; color:#fff; }
.btn.ai-on { background:var(--ai); color:#fff; border-color:var(--ai); }

/* ── Audio bar: dark pill (Liúli "audioBg") ────────────────────────── */
.audio-bar { background:var(--ink); border-color:var(--ink); border-radius:14px; padding:.65rem .9rem; gap:.8rem; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.audio-bar .play-btn { background:var(--accent); width:36px; height:36px; font-size:14px; }
.audio-bar .play-btn.ai { background:var(--ai); }
.audio-bar .prog-wrap { background:rgba(255,255,255,.16); height:5px; border-radius:3px; }
.audio-bar .prog-fill { background:#fff; }
.audio-bar .prog-fill.ai { background:#c8b6e6; }
.audio-bar .atime { color:rgba(255,255,255,.7); font-family:var(--mono-font); }
.audio-bar .src-badge { background:rgba(255,255,255,.10); color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.12); }
.audio-bar .speed-ctrl { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }
.audio-bar .speed-btn { color:rgba(255,255,255,.85); }
.audio-bar .speed-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.audio-bar .speed-label { color:rgba(255,255,255,.85); }
.audio-bar .loop-btn { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.85); }
.audio-bar .loop-btn:hover { background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.25); }
.audio-bar .loop-btn.on { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── Text card: subtle ─────────────────────────────────────────────── */
.text-card { border-radius:14px; border-color:var(--rule); box-shadow:var(--shadow-card); padding:1.2rem 1.3rem; }
.hint { background:var(--accent3); color:var(--ink2); border-left-color:var(--accent); }

/* ── Toggle pills (Pinyin / EN / etc.) ─────────────────────────────── */
.toggle-pill { border-radius:999px; border-color:var(--rule); padding:.32rem .85rem; }
.toggle-pill.on { background:var(--ink); border-color:var(--ink); }
.toggle-pill.on .toggle-pill-label { color:#fff; }
.toggle-pill.on .toggle-pill-track { background:var(--accent); }
.toggle-pill-track::after { box-shadow:0 1px 3px rgba(0,0,0,.3); }

/* ── Dialogue sentences ────────────────────────────────────────────── */
.char-unit .hz { font-family:var(--zh-font); }
.char-unit .py { font-family:var(--mono-font); font-weight:500; }
.sent-row { padding:.5rem .6rem; border-radius:10px; transition:background .15s; }
.sent-row:hover { background:var(--accent-soft); }
.sent-row.active-sent { background:var(--accent-soft); }
.sent-row.active-sent .char-unit .hz { color:var(--ink); }
.char-unit:hover:not(.punct) .hz { color:var(--accent); }
.char-unit.playing .hz { color:var(--accent); background:var(--accent2); border-radius:4px; padding:0 2px; }
.spk-tag { color:var(--accent); font-family:var(--mono-font); font-weight:600; text-transform:uppercase; font-size:.66em; letter-spacing:.08em; }
.sent-translation { color:var(--ink2); font-style:normal; font-size:.86rem; font-family:var(--ui-font); padding-left:1.2rem; padding-top:.1rem; }

/* ── Flashcards (vocab pager) ──────────────────────────────────────── */
.fc { border-radius:14px; border-color:var(--rule); box-shadow:var(--shadow-card); padding:.7rem 1.1rem 1rem; }
.fc:hover { border-color:var(--accent); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.fc-hz { font-family:var(--zh-font); font-weight:600; letter-spacing:-.5px; margin:.4rem 0 .5rem; }
/* fc-front-py (front, toggle-shown) matches fc-py (back) exactly — same
   font-family/weight/color — so Lautschrift never changes appearance
   between the front and back of a card. */
.fc-py, .fc-front-py { font-family:var(--mono-font); font-weight:500; color:var(--ink2); }
.fc-def { font-size:.92em; color:var(--ink); font-weight:500; }
.fc-hint { color:var(--ink3); font-family:var(--mono-font); text-transform:uppercase; letter-spacing:.05em; font-size:.62em; }
.fc-flag-corner { color:var(--accent); }
.fc.flagged { border-left:3px solid var(--accent); }
.fc.fc--user { background:var(--accent3); border-color:var(--accent2); }

/* SR rating buttons: warmer */
.sr-bar { gap:.5rem; }
.sr-btn { border-radius:8px; padding:.4rem .75rem; font-weight:600; }
.sr-btn.unknown { background:#fde0dc; color:#a8351c; }
.sr-btn.barely  { background:#fce0c2; color:#7a4a08; }
.sr-btn.ok      { background:#dfe8ff; color:#1a3a8a; }
.sr-btn.good    { background:#d4e8c4; color:#2d5a18; }
.sr-btn.perfect { background:var(--purple-bg); color:var(--purple); }

/* ── Vocab pager (chapter tabs) ────────────────────────────────────── */
.vp-btn { border-radius:999px; border-color:var(--rule); font-weight:500; padding:.35rem .85rem; }
.vp-btn.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.vp-btn.has-due { border-color:var(--accent); color:var(--accent); }
.vp-btn.has-due.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ── Review mode ───────────────────────────────────────────────────── */
.rv-setup-card { border-radius:16px; border-color:var(--rule); box-shadow:var(--shadow-card); padding:1.4rem 1.4rem 1.6rem; }
.rv-label { font-family:var(--mono-font); color:var(--ink3); }
.rv-sel { border-radius:9px; border-color:var(--rule); font-family:var(--ui-font); }
.rv-opt-btn { border-radius:8px; border-color:var(--rule); font-weight:500; }
.rv-opt-btn.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.rv-start-btn { background:var(--accent); border-radius:12px; font-weight:600; font-size:16px; padding:.85rem; box-shadow:0 1px 0 rgba(0,0,0,.08); }
.rv-start-btn:hover:not(:disabled) { background:#d54a30; }
.rv-card { border-radius:18px; border-color:var(--rule); border-width:1px; box-shadow:var(--shadow-card); padding:2.4rem 1.6rem 1.6rem; min-height:280px; }
.rv-card--user { background:var(--accent3); border-color:var(--accent2); }
.rv-card-hz { font-family:var(--zh-font); font-weight:600; letter-spacing:-.5px; font-size:calc(var(--fs) * 3); }
.rv-card-py { color:var(--ink2); font-family:var(--mono-font); font-weight:500; font-size:calc(var(--fs) * 1.05); }
.rv-card-def { font-size:calc(var(--fs) * 1.05); font-weight:600; }
.rv-card-extra { color:var(--ink3); font-family:var(--mono-font); text-transform:uppercase; letter-spacing:.05em; font-size:calc(var(--fs) * 0.7); }
.rv-card-ex { background:var(--accent3); border-radius:10px; padding:.8rem 1rem; font-size:calc(var(--fs) * 1); line-height:1.6; }
.rv-card-ex .ex-hz, .rv-card-ex span[lang="zh"] { font-family:var(--zh-font); }
.rv-reveal-btn { border:1.5px solid var(--accent); color:var(--accent); border-radius:10px; padding:.7rem 2.4rem; font-weight:600; }
.rv-reveal-btn:hover { background:var(--accent); color:#fff; }
.rv-card-divider { background:var(--rule); width:48px; }
.rv-rate-btn { border-radius:11px; border-color:var(--rule); border-width:1.5px; padding:.7rem .3rem; font-weight:600; transition:background-color,border-color,color,box-shadow,transform,opacity .15s; }
.rv-rate-btn:hover { border-color:var(--accent); background:var(--accent3); }
.rv-rate-btn.again { border-color:#e8c0b0; background:#fdf0eb; color:#a8351c; }
.rv-rate-btn.again:hover { background:#fce0dc; }
.rv-rate-btn.learned { border-color:#b8d4a0; background:#eef8e6; color:#2d5a18; }
.rv-rate-btn.learned:hover { background:#dff0c8; }
/* Purple "Easy" (rightmost rate button) per design */
.rv-rate-btn.perfect, .rv-rate-btn:last-child { background:var(--purple-bg); border-color:#d4b8e8; color:var(--purple); }
.rv-rate-btn.perfect:hover, .rv-rate-btn:last-child:hover { background:#dec5ee; border-color:var(--purple); }
.rv-flag-btn.on { background:var(--accent2); border-color:var(--accent); color:var(--accent); }
.rv-card-note, .rv-note-area { background:var(--gold-bg); border-color:#e0d090; border-radius:10px; }
.rv-end-box { border-radius:16px; border-color:var(--rule); box-shadow:var(--shadow-card); }
.rv-end-btn { border-radius:11px; border-color:var(--rule); font-weight:500; }
.rv-end-btn.primary { background:var(--accent); border-color:var(--accent); }

/* ── Popup dictionary ──────────────────────────────────────────────── */
.popup { border-radius:14px; border-color:var(--rule); padding:1rem 1.1rem; box-shadow:var(--shadow-pop); min-width:240px; max-width:320px; }
.popup-word { font-family:var(--zh-font); font-weight:600; font-size:1.7em; letter-spacing:-.4px; }
.popup-py { font-family:var(--mono-font); font-weight:500; color:var(--accent); font-size:1em; }
.popup-hsk { color:var(--accent); font-family:var(--mono-font); font-weight:600; font-size:.62em; }
.popup-defs { color:var(--ink); font-size:.92em; line-height:1.55; }
.popup-related { color:var(--ink3); }
.snd-btn { border-radius:999px; background:var(--accent-soft); color:var(--accent); border:0; padding:.32rem .75rem; font-weight:500; }
.snd-btn:hover { background:var(--accent); color:#fff; }

/* ── Toast ─────────────────────────────────────────────────────────── */
.toast { background:var(--ink); border-radius:10px; padding:.6rem 1.25rem; font-family:var(--ui-font); font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.18); }

/* ── Waveform: Liúli teal becomes accent-tinted ───────────────────── */
.waveform-section { background:var(--accent3); border-color:var(--accent2); border-radius:14px; }
.waveform-title { color:var(--accent); font-family:var(--mono-font); text-transform:uppercase; letter-spacing:.05em; font-size:11px; font-weight:600; }
.waveform-time { color:var(--accent); font-family:var(--mono-font); }
.waveform-wrap { background:rgba(232,93,67,.08); border-radius:10px; }
.waveform-wrap:hover { background:rgba(232,93,67,.13); }
.waveform-cursor { background:var(--accent); }
.wave-jog-btn { background:rgba(232,93,67,.1); border-color:rgba(232,93,67,.3); color:var(--accent); }
.wave-jog-btn:hover { background:rgba(232,93,67,.2); }

/* ── Login modal ───────────────────────────────────────────────────── */
.login-overlay { background:var(--paper); }
.login-logo { font-family:var(--display-font); color:var(--accent); font-weight:600; letter-spacing:1px; }
.login-title { font-weight:600; }
.login-input { border-radius:10px; border-color:var(--rule); }
.login-input:focus { border-color:var(--accent); }
.login-btn { background:var(--accent); border-radius:10px; font-weight:600; }
.login-reset-btn { color:var(--accent); border-color:var(--accent); border-radius:10px; }

/* ── Status bar ────────────────────────────────────────────────────── */
.status-bar, .cache-bar { border-radius:10px; border-color:var(--rule); font-family:var(--ui-font); }

/* ── Modals ────────────────────────────────────────────────────────── */
.modal { border-radius:16px; box-shadow:var(--shadow-pop); }

/* ── Toggle text translation: improved EN line ─────────────────────── */
.sent-translation { color:var(--ink2); font-style:normal; font-weight:400; }

/* ── Section heads ─────────────────────────────────────────────────── */
.section-head { border-bottom-color:var(--rule); padding-bottom:.65rem; }
.section-head-title { font-size:14px; font-weight:600; color:var(--ink); }

/* ── Seg control ───────────────────────────────────────────────────── */
.seg-ctrl { background:var(--surface-alt); border-color:var(--rule); border-radius:999px; padding:2px; }
.seg-btn { border-radius:999px; font-weight:500; padding:.35rem .85rem; }
.seg-btn.active { background:var(--ink); color:var(--paper); box-shadow:0 1px 2px rgba(0,0,0,.1); }

/* ── Speed/loop controls (outside audio bar) ──────────────────────── */
.speed-ctrl { border-radius:8px; border-color:var(--rule); }
.loop-btn { border-radius:8px; border-color:var(--rule); }

/* ── Text nav (prev/next) ─────────────────────────────────────────── */
.text-nav-bar { padding:.8rem 0 1rem; border-bottom:1px solid var(--rule); margin-bottom:.4rem; }
.text-nav-bar--bottom { border-top:1px solid var(--rule); border-bottom:none; margin-top:2rem; padding:1rem 0 .5rem; }
.text-nav-btn { padding:.5rem .9rem; border-radius:10px; font-weight:500; }
.text-nav-counter { font-family:var(--mono-font); color:var(--ink3); text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:600; }

/* ── Notes section ────────────────────────────────────────────────── */
.notes-section { background:var(--gold-bg); border-color:#e8d9a0; border-radius:12px; }
.notes-label { color:var(--gold); font-family:var(--mono-font); text-transform:uppercase; letter-spacing:.05em; }
.notes-area { background:#fffef5; border-color:#ddd0a0; border-radius:9px; font-family:var(--ui-font); }

/* ── Speech bubble accent on active line ──────────────────────────── */
.sent-row.active-sent { box-shadow:inset 3px 0 0 var(--accent); }

/* ── Brand-coloured scrollbar (subtle) ────────────────────────────── */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--rule); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:var(--rule-strong); }

/* ── Mobile tweaks ────────────────────────────────────────────────── */
@media(max-width:500px){
  .audio-bar { padding:.55rem .75rem; gap:.6rem; }
  .rv-card { padding:1.8rem 1.2rem 1.3rem; }
  .rv-card-hz { font-size:calc(var(--fs) * 2.6); }
  .popup { padding:.85rem .95rem; }
}

/* ════════════════════════════════════════════════════════════════════
   LIÚLI v2 — deeper redesign: tone-colored hanzi, avatars, big serif
   ════════════════════════════════════════════════════════════════════ */

/* ── Tone colors for hanzi characters ─────────────────────────────── */
.hz-char { font-family:var(--zh-font); display:inline-block; line-height:1.2; }
.hz-char.t1, .char-unit .hz.t1 { color:var(--t1); }
.hz-char.t2, .char-unit .hz.t2 { color:var(--t2); }
.hz-char.t3, .char-unit .hz.t3 { color:var(--t3); }
.hz-char.t4, .char-unit .hz.t4 { color:var(--t4); }
.hz-char.t0, .char-unit .hz.t0 { color:var(--ink); }
/* Tone-colors OFF: keep the same per-syllable span structure so font /
   kerning / layout don't shift, but neutralise the color. */
.hz-char.hz-off { color:var(--ink); }
.py-off         { color:var(--ink2); font-family:var(--ui-font); font-weight:400; }

/* ── Title block: mono caption + huge serif title ─────────────────── */
.liu-titleblock { margin:.4rem 0 1.5rem; padding-bottom:0; }
.liu-caption { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.7rem; }
.liu-cap { font-family:var(--mono-font); font-size:11px; color:var(--ink3); letter-spacing:.1em; text-transform:uppercase; font-weight:500; }
.liu-cap-dot { width:3px; height:3px; border-radius:50%; background:var(--rule-strong); }
.liu-cap-pill { font-family:var(--mono-font); font-size:11px; color:var(--accent); background:var(--accent-soft); padding:3px 8px; border-radius:5px; font-weight:600; letter-spacing:.05em; }
.liu-title { font-family:var(--zh-font); font-size:38px; line-height:1.2; letter-spacing:-.5px; color:var(--ink); font-weight:600; margin:0; }
.liu-subtitle { font-family:var(--ui-font); font-size:17px; color:var(--ink2); margin-top:.4rem; font-weight:400; line-height:1.4; }

/* ── Pill row (Liúli toggles) ─────────────────────────────────────── */
.liu-pills { display:flex; gap:.4rem; flex-wrap:wrap; margin:.4rem 0 1.1rem; padding-bottom:1rem; border-bottom:1px solid var(--rule); }
.liu-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .85rem; background:var(--surface); color:var(--ink3); border:1px solid var(--rule); border-radius:999px; font-family:var(--ui-font); font-size:12px; font-weight:500; cursor:pointer; transition:background-color,border-color,color,box-shadow,transform,opacity .15s; }
.liu-pill:hover { color:var(--ink); border-color:var(--rule-strong); }
.liu-pill.on { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.liu-pill-dot { width:6px; height:6px; border-radius:50%; background:var(--ink3); transition:background .15s; }
.liu-pill.on .liu-pill-dot { background:var(--accent); }

/* ── Tone legend ──────────────────────────────────────────────────── */
.liu-tone-legend { display:inline-flex; align-items:center; gap:.95rem; padding:.5rem .95rem; background:var(--surface); border:1px solid var(--rule); border-radius:999px; margin:0 0 1.1rem; flex-wrap:wrap; }
.liu-tone-item { display:inline-flex; align-items:center; gap:.32rem; }
.liu-tone-dot { width:9px; height:9px; border-radius:50%; }
.liu-tone-mark { font-family:var(--mono-font); font-weight:700; font-size:14px; }
.liu-tone-mark.t1 { color:var(--t1); } .liu-tone-mark.t2 { color:var(--t2); }
.liu-tone-mark.t3 { color:var(--t3); } .liu-tone-mark.t4 { color:var(--t4); }
.liu-tone-lbl { font-family:var(--ui-font); font-size:10.5px; color:var(--ink3); text-transform:uppercase; letter-spacing:.05em; font-weight:500; }

/* ── Prev/Next nav (Liúli) ────────────────────────────────────────── */
.liu-nav { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin:.5rem 0 1.4rem; padding-bottom:1.1rem; border-bottom:1px solid var(--rule); }
.liu-nav--bottom { margin:2rem 0 0; padding:1.1rem 0 0; border-bottom:none; border-top:1px solid var(--rule); }
.liu-nav-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .9rem; background:var(--surface); color:var(--ink); border:1px solid var(--rule); border-radius:10px; font-family:var(--ui-font); font-size:13px; font-weight:500; cursor:pointer; transition:background-color,border-color,color,box-shadow,transform,opacity .15s; }
.liu-nav-btn:hover:not(:disabled) { border-color:var(--ink); background:var(--surface-alt); }
.liu-nav-btn:disabled { opacity:.4; cursor:not-allowed; }
.liu-nav-next:not(:disabled) { background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:600; }
.liu-nav-next:not(:disabled):hover { background:#000; }
.liu-nav-center {
  text-align:center; min-width:0; flex:1; padding:0 .4rem;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.liu-nav-home {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--ui-font); font-size:11.5px; font-weight:500;
  color:var(--ink3); letter-spacing:.04em; text-decoration:none;
  padding:2px 8px; border-radius:7px;
  transition:color .12s, background .12s;
}
.liu-nav-home:hover { color:var(--accent); background:var(--accent-soft); }
.liu-nav-home svg { width:13px; height:13px; }
.liu-nav-chapter {
  font-family:var(--ui-font); font-size:14px; font-weight:700;
  color:var(--ink); line-height:1; letter-spacing:-.1px;
  margin-top:2px;
}
.liu-nav-count {
  font-family:var(--mono-font); font-size:11px; color:var(--ink3);
  text-transform:uppercase; letter-spacing:.1em; font-weight:600;
}
.liu-nav-title {
  font-family:var(--zh-font); font-size:18px; color:var(--ink); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.3;
  max-width:100%;
}
.liu-nav-sub {
  font-family:var(--ui-font); font-size:13px; color:var(--ink3);
  line-height:1.35; font-weight:400; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media(max-width:500px){
  .liu-nav-btn span { display:none; }
  .liu-nav-btn { padding:.55rem .65rem; }
  .liu-nav-title { font-size:13.5px; }
}

/* ── Sentence rows (Liúli) ────────────────────────────────────────── */
.text-card .sent-row.liu-row { display:flex; align-items:flex-start; gap:.85rem; padding:.7rem .8rem; border-radius:14px; margin:0 -.4rem; }
.text-card .sent-row.liu-row:hover { background:var(--accent-soft); }
.text-card .sent-row.liu-row.active-sent { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.liu-avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-family:var(--zh-font); font-size:14px; font-weight:600; margin-top:.3rem; }
.liu-main { flex:1; min-width:0; }
.liu-meta { display:flex; align-items:baseline; gap:.5rem; margin-bottom:.45rem; }
.liu-spk-name { font-family:var(--ui-font); font-size:12px; font-weight:600; color:var(--ink); }
.liu-line { display:flex; flex-wrap:wrap; align-items:flex-end; gap:1px; line-height:1.7; }
.liu-line.de-line { display:block; font-size:19px; font-weight:500; color:var(--ink); line-height:1.5; cursor:pointer; }
.liu-line .char-unit { padding:0 1px; display:inline-flex; flex-direction:column; align-items:center; cursor:pointer; }
.liu-line .char-unit .hz { font-family:var(--zh-font); font-size:30px; font-weight:500; line-height:1.25; transition:background .12s; padding:0 1px; border-radius:3px; }
.liu-line .char-unit .py { font-family:var(--mono-font); font-size:11.5px; font-weight:500; line-height:1.3; margin-top:1px; min-height:.85em; }
.liu-line .char-unit.punct { cursor:default; }
.liu-line .char-unit.punct .hz { color:var(--ink3); }
.liu-line .char-unit:hover:not(.punct) .hz { background:var(--accent-soft); }
.liu-line .char-unit.playing .hz { background:var(--accent2); color:var(--accent); }

/* "Highlight new vocab" pill — applied per-word when S.showVocabHi is on */
.liu-line .char-unit.is-vocab {
  background:var(--accent-soft);
  border-radius:7px;
  padding:1px 4px;
}
.liu-line .char-unit.is-vocab .hz {
  color:var(--accent); font-weight:600;
}
.liu-line .char-unit.is-vocab .py {
  color:var(--accent); font-weight:600;
}
.liu-line .char-unit.is-vocab:hover .hz { background:transparent; }

/* Brief flash highlight on a flashcard when jumped to from the rail */
.fc.fc--flash {
  outline:2px solid var(--accent);
  outline-offset:3px;
  transition:outline-color .25s;
}
.liu-trans { font-family:var(--ui-font); font-size:14px; color:var(--ink2); margin-top:.55rem; line-height:1.55; max-width:680px; font-weight:400; }

/* Hide the legacy speaker tag — handled by avatar now */
.text-card .liu-row > .spk-tag { display:none; }

/* Text card override */
.text-card { background:transparent; border:0; box-shadow:none; padding:0; margin-bottom:1.2rem; display:flex; flex-direction:column; gap:1.1rem; }

@media(min-width:760px){
  .liu-line .char-unit .hz { font-size:34px; }
  .liu-title { font-size:42px; }
}

/* ── Vocab card hanzi + pinyin tone-coloring ─────────────────────── */
.fc-hz .hz-char { font-size:1em; line-height:1; }
.fc-py span { font-family:var(--mono-font); font-weight:500; padding:0 1px; }
.rv-card-hz .hz-char { font-size:1em; line-height:1.15; }
.rv-card-py span { font-family:var(--mono-font); font-weight:500; padding:0 2px; }

/* Popup tone-color */
.popup-word .hz-char { font-size:1em; }
.popup-py span { font-family:var(--mono-font); font-weight:500; padding:0 1px; }

/* ── MINE (personal flashcard area) ─────────────────────────────────── */
.mine-panel {
  background: var(--accent3); border: 1px solid var(--accent2);
  border-radius: 14px; padding: 1rem 1.2rem; margin: .5rem 0 1rem;
  box-shadow: var(--shadow-card);
}
.mine-panel-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .55rem; flex-wrap: wrap; }
.mine-panel-title { font-size: 14px; font-weight: 600; color: var(--accent); }
.mine-panel-sub { font-size: 12px; color: var(--ink3); }
.mine-input {
  width: 100%; min-height: 44px; padding: .55rem .75rem;
  border: 1px solid var(--rule); border-radius: 10px;
  font-family: var(--ui-font); font-size: 14px; color: var(--ink);
  background: var(--surface); resize: vertical; line-height: 1.5;
  box-sizing: border-box; outline: none; transition: border-color .15s;
}
.mine-input:focus { border-color: var(--accent); }
.mine-actions { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; flex-wrap: wrap; }
.mine-pending-banner {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  background: var(--gold-bg); border: 1px solid #e0d090;
  border-radius: 10px; padding: .55rem .85rem; margin: .25rem 0 .85rem;
  font-size: 13px; color: var(--ink);
}
.mine-import-area { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--rule); }
/* Pending card marker — applied via JS by checking v.extra === "pending" */
.fc.fc--pending { background: var(--gold-bg); border-color: #e0d090; border-style: dashed; }
.fc.fc--pending .fc-hz { color: var(--ink2); font-weight: 400; }
.fc.fc--pending::before {
  content: "🕗 pending"; position: absolute; top: .4rem; left: .5rem;
  font-size: 10px; font-family: var(--mono-font); font-weight: 600;
  color: var(--gold); letter-spacing: .04em; text-transform: uppercase;
}

/* Popup: canonical-dict reading disclosure when it differs from context */
.popup-dict-alt {
  display: flex; align-items: baseline; gap: .4rem;
  margin: 0 0 .55rem; padding: .35rem .55rem;
  background: var(--surface-alt); border-radius: 6px;
  font-family: var(--mono-font); font-size: .82em; font-weight: 500;
}
.popup-dict-alt-lbl {
  font-family: var(--ui-font); font-size: .8em; font-weight: 600;
  color: var(--ink3); text-transform: uppercase; letter-spacing: .06em;
}
.popup-dict-alt span { padding: 0 1px; }

/* ── Hide legacy text-nav-bar (replaced by liu-nav) ─────────────── */
.text-nav-bar { display:none; }

/* ── Hint row removed — replaced by liu-pills ─────────────────── */
.hint-row { display:none; }

/* ── Adjust page padding for prototype-like roomy feel ───────── */
.view { padding-top:1.4rem; }
@media(min-width:760px){
  .view { padding:1.8rem 1.5rem 14rem; max-width:900px; }
}

/* ════════════════════════════════════════════════════════════════════
   LIÚLI v3 — prototype-fidelity pass
   ════════════════════════════════════════════════════════════════════ */

/* ── Title block: italic Instrument Serif EN subtitle ─────────────── */
.liu-titleblock { margin:.4rem 0 1.6rem; }
.liu-title {
  font-family:var(--zh-font); font-weight:600; letter-spacing:-.5px;
  font-size:31px; line-height:1.2;
}
.liu-subtitle {
  font-family:var(--ui-font); font-style:normal; font-weight:400;
  font-size:17px; line-height:1.4; color:var(--ink2); margin-top:.55rem;
  letter-spacing:.1px;
}
@media(min-width:760px){
  .liu-title { font-size:42px; }
  .liu-subtitle { font-size:20px; margin-top:.65rem; }
}

/* ── Pills row spacing + extras ───────────────────────────────────── */
.liu-pills { gap:.5rem; align-items:center; row-gap:.5rem; padding-bottom:1.1rem; }
/* Compact pill: smaller horizontal padding + tighter gap so pills sit
   closer together. Vertical metric unchanged so the row still aligns. */
.liu-pill { padding:.42rem .55rem; gap:.3rem; font-size:11.5px; letter-spacing:.01em; }
.liu-pill-add { padding:.42rem .85rem; gap:.3rem; }
.liu-pills { gap:.35rem; }
.liu-pill-add {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem 1rem; border-radius:999px;
  background:var(--accent); color:#fff; border:0;
  font-family:var(--ui-font); font-size:12.5px; font-weight:600;
  cursor:pointer; transition:background .15s, transform .08s;
  white-space:nowrap;
}
.liu-pill-add:hover { background:#d54a30; }
.liu-pill-add:active { transform:translateY(1px); }
.liu-pill-add svg { display:block; }

/* ── Hanzi line — more breathing room per prototype ─────────────── */
.liu-line { column-gap:3px; row-gap:10px; gap:0; align-items:flex-start; line-height:1; }
/* Pinyin sits BELOW hanzi: hz first, py second (normal column order). */
.liu-line .char-unit { padding:1px 1px; min-width:0; flex-direction:column; }
.liu-line .char-unit .py { order:2; margin:5px 0 0 0; }
.liu-line .char-unit .hz { order:1; }
.liu-line .char-unit .hz { font-size:30px; line-height:1; font-weight:400; padding:1px 2px; }
.liu-line .char-unit .py {
  font-family:var(--ui-font); font-weight:400; font-size:11.5px;
  letter-spacing:.2px; line-height:1; margin:0 0 5px 0; min-height:11.5px;
  text-align:center;
}
/* Chinese full-width punctuation (？ 。 ，) carries built-in padding inside
   the glyph square. Safari applies `halt`/`palt` aggressively enough that
   the glyph collapses inside its em-box, so the previous negative-margin
   trick worked there — but Chromium / Edge keep the glyph closer to its
   full em-width, and the same negative margin caused overlap on adjacent
   hanzi. Cross-browser-safe approach: shrink the punctuation glyph itself
   so its visual footprint is smaller without any negative geometry. */
.liu-line .char-unit.punct { min-width:0; padding:0; margin:0; }
.liu-line .char-unit.punct .hz {
  font-size:0.6em;
  /* Native CJK punctuation trimming where supported (Safari 17+, Chrome 123+
     behind progressive rollout). Harmless fallback elsewhere. */
  text-spacing-trim: trim-start;
  /* Keep `halt` for browsers that honour it — additive, never causes overlap. */
  font-feature-settings: "halt" 1;
  /* Anchor the smaller glyph at the dialogue baseline. */
  vertical-align: baseline;
  display: inline-block;
  line-height: 1;
}
.liu-line .char-unit.punct .py { display:none !important; }
@media(min-width:760px){
  .liu-line .char-unit .hz { font-size:34px; }
  .liu-line .char-unit .py { font-size:13px; }
}

/* Hide pinyin slot when toggle is off — keep hanzi tight */
.liu-line.no-py .char-unit .py { display:none; }

/* ── Dialogue row meta: speaker + pinyin + per-line icons ────────── */
.liu-meta {
  display:flex; align-items:baseline; gap:.55rem;
  margin-bottom:.5rem; flex-wrap:wrap;
}
.liu-spk-name { font-family:var(--ui-font); font-size:13px; font-weight:600; color:var(--ink); }
.liu-spk-py { font-family:var(--mono-font); font-size:11px; font-weight:500; color:var(--ink3); letter-spacing:.05em; }
.liu-meta-spacer { flex:1; }
.liu-line-act {
  background:transparent; border:0; padding:4px; cursor:pointer; line-height:0;
  border-radius:6px; color:var(--ink3); transition:color .12s, background .12s;
}
.liu-line-act:hover { color:var(--ink); background:var(--faint); }
.liu-line-act.on { color:var(--accent); }
.liu-line-act svg { display:block; }

/* Avatar — slightly bigger, baseline aligned with hanzi top */
.liu-avatar { width:36px; height:36px; font-size:14px; margin-top:.45rem; }
@media(min-width:760px){
  .liu-avatar { width:40px; height:40px; font-size:15px; }
}

/* ── English translation under hanzi line ─────────────────────────── */
.liu-trans { font-size:15px; line-height:1.55; max-width:640px; margin-top:.7rem; }
@media(min-width:760px){ .liu-trans { font-size:17px; margin-top:.85rem; } }

/* ── Dialogue row container — compact spacing, accent-soft active ── */
.text-card { gap:.6rem; }
.text-card .sent-row.liu-row {
  position:relative;
  padding:.3rem .6rem .4rem; border-radius:12px;
  gap:.75rem; align-items:flex-start;
}
.text-card .sent-row.liu-row.active-sent {
  background:var(--accent-soft); box-shadow:none;
}
.text-card .sent-row.liu-row.active-sent::before {
  content:""; position:absolute; left:-1px; top:.5rem; bottom:.5rem; width:3px;
  background:var(--accent); border-radius:2px;
}

/* Action icons (bookmark + play) float top-right, free of dialogue flow */
.liu-meta.liu-meta-floats {
  position:absolute; top:6px; right:8px;
  display:flex; gap:.1rem; margin:0; padding:0;
  background:transparent; opacity:.7; transition:opacity .15s;
}
.text-card .sent-row.liu-row:hover .liu-meta.liu-meta-floats { opacity:1; }

/* Tighter EN translation */
.liu-trans { margin-top:.4rem; }
@media(min-width:760px){ .liu-trans { margin-top:.5rem; } }

/* Tighter hanzi line — keep generous column-gap for pinyin, less row-gap */
.liu-line { row-gap:6px; line-height:1; }

/* Main column inherits all space; no leading meta row pushing it down */
.liu-main { padding-top:.1rem; }

/* ════════════════════════════════════════════════════════════════════
   AUDIO PLAYER — warm cream "paper-deck" block
   Lifted off the page background (#FAFAF7) by 1 shade so it still reads
   as a distinct module, but no longer dominates the layout in black.
   ════════════════════════════════════════════════════════════════════ */
.waveform-section {
  --wf-bg:    rgb(244, 239, 230);   /* warm sand */
  --wf-ink:   #15151A;              /* primary text */
  --wf-ink2:  rgba(21, 21, 26, 0.65);
  --wf-muted: rgba(21, 21, 26, 0.42);
  --wf-faint: rgba(21, 21, 26, 0.08);
  --wf-hover: rgba(21, 21, 26, 0.14);
  --wf-rule:  rgba(21, 21, 26, 0.10);

  background:var(--wf-bg) !important;
  color:var(--wf-ink) !important;
  border:1px solid var(--wf-rule) !important;
  border-radius:18px;
  padding:18px 20px 16px;
  margin-bottom:1.4rem;
  box-shadow:none;
}

/* Top row: source pill (left) + time (right) */
.wf-top { display:flex; align-items:center; gap:.6rem; margin-bottom:14px; }
.wf-src {
  display:inline-flex; padding:2px; gap:0;
  background:var(--wf-faint); border-radius:6px;
}
.wf-src-btn {
  background:transparent; border:0; color:var(--wf-muted);
  font-family:var(--ui-font); font-size:11px; font-weight:500;
  padding:4px 11px; border-radius:4px; cursor:pointer;
  transition:background .15s, color .15s;
}
.wf-src-btn.on {
  background:var(--paper);
  color:var(--wf-ink); font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.wf-time {
  margin-left:auto;
  font-family:var(--mono-font); font-size:11px;
  color:var(--wf-muted); font-weight:500;
  letter-spacing:.02em;
}

/* Middle row: play button + waveform */
.wf-mid { display:flex; align-items:center; gap:14px; }
.wf-play {
  width:54px; height:54px; border-radius:50%;
  background:var(--accent); border:0; flex-shrink:0;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(232,93,67,.30);
  transition:transform .08s, background .15s;
}
.wf-play:hover { background:#d54a30; }
.wf-play:active { transform:translateY(1px); }
.wf-play svg { display:block; margin-left:2px; }
.wf-play.playing svg { margin-left:0; }

/* Waveform wrap holds the canvas */
.waveform-wrap {
  background:transparent !important; border:0 !important; border-radius:0;
  flex:1; position:relative; height:54px; overflow:hidden; padding:0;
  cursor:pointer;
}
.waveform-wrap:hover { background:rgba(21,21,26,.025) !important; }
.waveform-wrap canvas { display:block; }
/* Centered playhead cursor — ink line on the warm surface. */
.waveform-cursor {
  position:absolute; top:6%; bottom:6%; width:2px;
  background:var(--wf-ink); opacity:.85; border-radius:2px;
  box-shadow:0 0 0 3px rgba(21,21,26,.06);
  pointer-events:none; transform:translateX(-1px);
}
.waveform-loading { color:var(--wf-muted); font-family:var(--ui-font); font-size:12px; }

/* Bottom row: jog buttons (left) + speed + Loop (right) */
.wf-bot { display:flex; align-items:center; gap:.45rem; margin-top:14px; }
.wf-jog, .wf-speed, .wf-loop {
  font-family:var(--mono-font); font-size:11px; font-weight:600;
  background:var(--wf-faint); color:var(--wf-ink);
  border:0; border-radius:7px;
  cursor:pointer; transition:background .15s, color .15s;
  letter-spacing:.02em;
}
.wf-jog { padding:7px 11px; }
.wf-loop {
  padding:7px 12px; margin-left:auto;
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--ui-font);
}
.wf-jog:hover, .wf-loop:hover { background:var(--wf-hover); }
.wf-loop.on { background:var(--accent); color:#fff; }
.wf-speed { display:inline-flex; align-items:center; padding:0; }
.wf-speed-btn {
  background:transparent; border:0; color:var(--wf-ink);
  font-family:var(--mono-font); font-size:13px; font-weight:600;
  padding:6px 9px; cursor:pointer; line-height:1;
}
.wf-speed-btn:hover { color:var(--accent); }
.wf-speed-label {
  color:var(--wf-ink);
  font-family:var(--mono-font); font-size:11px; font-weight:600;
  padding:0 4px;
  /* Fixed width prevents the right +-button from jumping when the
     speed digits change (e.g. "1.00×" → "0.95×"). */
  width:48px; min-width:48px; text-align:left;
  font-variant-numeric:tabular-nums;
}

/* Waveform skeleton — same DOM as the real .waveform-section so the swap
   is byte-identical in layout. Children are real buttons (disabled) and
   the real wf-time span; only the canvas/wave area is faked with a tinted
   rectangle. A soft pulse signals loading. */
.waveform-section--skeleton {
  pointer-events:none;
}
.waveform-section--skeleton .wf-play,
.waveform-section--skeleton .wf-src-btn,
.waveform-section--skeleton .wf-jog,
.waveform-section--skeleton .wf-loop,
.waveform-section--skeleton .wf-speed-btn,
.waveform-section--skeleton .wf-time,
.waveform-section--skeleton .wf-speed-label {
  animation:wf-skel-pulse 1.4s ease-in-out infinite;
}
.waveform-section--skeleton .waveform-wrap {
  background:rgba(21,21,26,0.06);
  border-radius:8px;
  animation:wf-skel-pulse 1.4s ease-in-out infinite;
}
@keyframes wf-skel-pulse {
  0%, 100% { opacity:1; }
  50%      { opacity:.55; }
}

/* ── Slim mini player (fixed at top while the main player is off-screen) ── */
.wf-mini {
  /* Sits directly below the sticky breadcrumb (≈60 px tall). */
  position:fixed; top:60px; left:0; right:0; z-index:280;
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem max(var(--page-x), env(safe-area-inset-right)) .55rem max(var(--page-x), env(safe-area-inset-left));
  background:rgb(244,239,230);              /* matches .waveform-section --wf-bg */
  border-bottom:1px solid rgba(21,21,26,.10);
  color:#15151A;
  transform:translateY(-110%);
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
  font-family:var(--ui-font);
}
.wf-mini--visible { transform:translateY(0); }
.wf-mini-play,
.wf-mini-jog,
.wf-mini-loop,
.wf-mini-speed,
.wf-mini-time {
  height:34px;
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}
.wf-mini-play {
  width:34px; padding:0;
  border-radius:50%;
  background:var(--accent); color:#fff; border:0;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(232,93,67,.30);
}
.wf-mini-play:hover { background:#d54a30; }
.wf-mini-time {
  font-family:var(--mono-font); font-size:13px; font-weight:600;
  color:rgba(21,21,26,.70); white-space:nowrap;
  font-variant-numeric:tabular-nums;
  padding:0 .25rem;
}
.wf-mini-jog, .wf-mini-loop {
  font-family:var(--ui-font); font-size:12px; font-weight:600;
  background:rgba(21,21,26,.08); color:#15151A;
  border:0; border-radius:10px;
  padding:0 14px; cursor:pointer;
}
.wf-mini-jog { font-family:var(--mono-font); }
.wf-mini-jog:hover, .wf-mini-loop:hover { background:rgba(21,21,26,.14); }
.wf-mini-loop { margin-left:auto; display:inline-flex; align-items:center; gap:.3rem; }
.wf-mini-loop.on { background:var(--accent); color:#fff; }
.wf-mini-speed {
  background:rgba(21,21,26,.08); border-radius:10px;
  padding:0;
}
.wf-mini-speed-btn {
  background:transparent; border:0; color:#15151A;
  font-family:var(--mono-font); font-size:15px; font-weight:600;
  padding:0 11px; height:34px; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center;
}
.wf-mini-speed-btn:hover { color:var(--accent); }
.wf-mini-speed-label {
  font-family:var(--mono-font); font-size:12px; font-weight:600;
  width:52px; min-width:52px; text-align:left;
  font-variant-numeric:tabular-nums;
  padding:0 4px;
  display:inline-flex; align-items:center; height:34px;
}

/* Tighten on narrow screens — keep all controls but drop the time stamp */
@media (max-width:520px) {
  .wf-mini { gap:.4rem; padding:.4rem max(12px, env(safe-area-inset-right)) .4rem max(12px, env(safe-area-inset-left)); }
  .wf-mini-time { display:none; }
  .wf-mini-jog { padding:0 10px; }
  .wf-mini-speed-label { width:46px; min-width:46px; }
}

/* Legacy AI placeholder (still uses .waveform-head/.waveform-title) */
.waveform-head { display:flex; align-items:center; gap:.55rem; margin-bottom:.7rem; }
.waveform-title {
  font-family:var(--ui-font); font-size:11px; font-weight:600;
  color:var(--wf-ink); background:var(--wf-faint);
  border-radius:6px; padding:4px 9px;
}

/* External ctrl-row is now redundant — source + speed live in the audio block */
.view > .ctrl-row { display:none; }
/* Legacy title block is retired (title + subtitle now live in the prev/next nav) */
.liu-titleblock { display:none !important; }

/* Vocab page — level picker block above the chapter pager */
.vocab-lvl-picker {
  margin:0 0 1.2rem;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:14px;
  box-shadow:var(--shadow-card);
}
.vocab-lvl-picker > .rv-label { margin-bottom:.55rem; display:block; }
.vocab-lvl-picker .liu-lib-lvl-grid { margin:0; }

/* ════════════════════════════════════════════════════════════════════
   REVIEW v2 — Liúli redesign (Recognize / Produce / Both)
   ════════════════════════════════════════════════════════════════════ */
/* Half-screen, centered. Falls back to full width on narrow viewports. */
.rv-wrap {
  width:50%; max-width:780px; min-width:320px;
  margin:0 auto; padding:1rem 1rem 8rem !important;
}
@media(max-width:1100px){ .rv-wrap { width:70%; } }
@media(max-width:760px){  .rv-wrap { width:100%; min-width:0; padding:1rem .85rem 8rem !important; } }

/* Top bar (back arrow · centered title or progress · overflow menu) */
.rv-topbar {
  display:flex; align-items:center; gap:.6rem;
  padding:.3rem 0 1.2rem;
}
.rv-topbar-back, .rv-topbar-menu {
  width:34px; height:34px; border-radius:9px;
  background:var(--surface); border:1px solid var(--rule);
  color:var(--ink); cursor:pointer;
  display:grid; place-items:center;
  transition:background .12s, color .12s, border-color .12s;
}
.rv-topbar-back:hover, .rv-topbar-menu:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.rv-topbar-title {
  flex:1; text-align:center;
  font-family:var(--ui-font); font-size:14px; font-weight:600;
  color:var(--ink);
}
.rv-topbar-center {
  flex:1; display:flex; align-items:center; justify-content:center; gap:.6rem;
}
.rv-dots { display:inline-flex; gap:6px; }
.rv-dot {
  width:22px; height:3px; border-radius:2px;
  background:var(--rule);
}
.rv-dot--done { background:var(--accent); }
.rv-dot--now  { background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.rv-pos {
  font-family:var(--mono-font); font-size:12px; color:var(--ink2); font-weight:600;
  margin-left:.4rem;
}

/* ── SETUP CARD ──────────────────────────────────────────────────────── */
.rv-setup-card {
  background:var(--surface); border:1px solid var(--rule); border-radius:18px;
  padding:28px 30px; box-shadow:var(--shadow-card);
}
.rv-setup-h {
  font-family:var(--display-font); font-size:28px; font-weight:700;
  letter-spacing:-.6px; color:var(--ink); margin:0 0 1.4rem;
}
.rv-setting-row {
  display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:1.2rem;
}
.rv-setting { display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.rv-setting--full { grid-column:1 / -1; margin-bottom:1.2rem; }
.rv-label {
  font-family:var(--mono-font); font-size:11px; font-weight:600;
  color:var(--ink3); letter-spacing:.13em; text-transform:uppercase;
}
.rv-sel {
  width:100%; padding:11px 14px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--rule-strong); border-radius:10px;
  font-family:var(--ui-font); font-size:14px; font-weight:500;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 5L6 8L9 5' stroke='%237B7B85' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:30px;
}
.rv-opt-group { display:flex; flex-wrap:wrap; gap:8px; }
.rv-opt-btn {
  padding:8px 14px; border-radius:8px;
  background:var(--surface); border:1px solid var(--rule);
  font-family:var(--ui-font); font-size:13px; font-weight:500;
  color:var(--ink); cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.rv-opt-btn:hover { border-color:var(--ink); }
.rv-opt-btn.active {
  background:var(--accent); color:#fff; border-color:var(--accent);
  font-weight:600;
}

/* Stats row */
.rv-stats-row {
  display:flex; align-items:flex-end; gap:2rem;
  padding:1rem 0 1.2rem;
  border-top:1px solid var(--rule); margin-top:.4rem;
  border-bottom:1px solid var(--rule); margin-bottom:1.2rem;
}
.rv-stat { display:flex; flex-direction:column; gap:2px; line-height:1; }
.rv-stat-n {
  font-family:var(--display-font); font-size:30px; font-weight:700;
  color:var(--ink); letter-spacing:-.5px;
}
.rv-stat-l {
  font-family:var(--ui-font); font-size:13px; color:var(--ink3); font-weight:500;
}
.rv-stat--due  .rv-stat-n { color:#C13D3D; }
.rv-stat--flag .rv-stat-n { color:#D97520; }
.rv-stat--pool .rv-stat-n { color:#2E7D5D; }

/* Start button */
.rv-start-btn {
  width:100%; padding:16px; border-radius:12px; border:0;
  background:var(--accent); color:#fff;
  font-family:var(--ui-font); font-size:15px; font-weight:600;
  cursor:pointer; transition:background .15s, transform .08s;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.rv-start-btn:hover:not(:disabled) { background:#d54a30; }
.rv-start-btn:active:not(:disabled) { transform:translateY(1px); }
.rv-start-btn:disabled { background:rgba(232,93,67,.4); cursor:not-allowed; }

@media(max-width:600px){
  .rv-setting-row { grid-template-columns:1fr; }
  .rv-stats-row { gap:1.2rem; flex-wrap:wrap; }
}

/* ── SESSION CARD ─────────────────────────────────────────────────── */
.rv-card-wrap { margin-bottom:1.2rem; }
.rv-card {
  background:var(--surface); border:1px solid var(--rule); border-radius:18px;
  padding:22px 26px; box-shadow:var(--shadow-card);
  min-height:340px;
  display:flex; flex-direction:column;
  position:relative;
}
.rv-card--user { background:var(--accent3); border-color:var(--accent2); }
.rv-card-head {
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:.4rem;
}
.rv-card-kicker {
  font-family:var(--mono-font); font-size:11px; font-weight:600;
  color:var(--ink3); letter-spacing:.13em; text-transform:uppercase;
}
.rv-card-head-acts { margin-left:auto; display:flex; gap:6px; }
.rv-head-btn {
  width:28px; height:28px; border-radius:50%;
  background:var(--surface-alt); border:0; color:var(--ink3);
  display:grid; place-items:center; cursor:pointer;
  transition:background .12s, color .12s;
}
.rv-head-btn:hover { background:var(--accent-soft); color:var(--accent); }
.rv-head-flag.on { color:var(--accent); }
.rv-head-snd { background:var(--accent-soft); color:var(--accent); }
.rv-head-snd:hover { background:var(--accent); color:#fff; }

.rv-card-body {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8rem; text-align:center; padding:.5rem 0;
}
.rv-card-hz {
  font-family:var(--zh-font); font-size:90px; line-height:1;
  font-weight:700; color:var(--ink); letter-spacing:-1px;
}
.rv-card-py {
  font-family:var(--mono-font); font-size:24px; font-weight:600;
  letter-spacing:.04em; line-height:1; margin-top:.3rem;
}
.rv-card-def {
  font-family:var(--ui-font); font-size:22px; font-weight:700;
  color:var(--ink); margin-top:.8rem; line-height:1.25;
}
.rv-card-def-sub {
  font-family:var(--ui-font); font-size:16px; font-weight:500;
  color:var(--ink3); margin-top:.2rem;
}
.rv-card-extra {
  font-family:var(--ui-font); font-size:14px;
  color:var(--ink3); line-height:1.45; margin-top:.1rem;
}
.rv-card-prompt {
  font-family:var(--ui-font); font-size:38px; font-weight:700;
  color:var(--ink); letter-spacing:-.5px; line-height:1.15;
  padding:0 1rem;
}
.rv-card-stroke {
  margin-top:.6rem; padding:7px 16px; border-radius:999px;
  background:var(--surface-alt); color:var(--ink2); border:0;
  font-family:var(--ui-font); font-size:12px; font-weight:600;
  cursor:pointer; transition:background .12s;
}
.rv-card-stroke:hover { background:var(--ink); color:#fff; }
.rv-card-hint {
  margin-top:auto; padding-top:1.4rem;
  font-family:var(--ui-font); font-size:13px; color:var(--ink3);
}

/* ── EXAMPLES BOX ─────────────────────────────────────────────────── */
.rv-ex-box {
  background:var(--surface-alt); border-radius:14px;
  padding:14px 18px 18px;
  margin-bottom:1.2rem;
}
.rv-ex-kicker {
  font-family:var(--mono-font); font-size:11px; font-weight:600;
  color:var(--ink3); letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:.5rem;
}
.rv-ex-row {
  display:flex; align-items:flex-start; gap:12px;
  padding:8px 0;
}
.rv-ex-play {
  width:24px; height:24px; border-radius:6px; border:0;
  background:transparent; color:var(--accent);
  display:grid; place-items:center; cursor:pointer; flex-shrink:0;
  margin-top:2px;
  transition:background .12s;
}
.rv-ex-play:hover { background:var(--accent-soft); }
.rv-ex-text { flex:1; min-width:0; }
.rv-ex-zh {
  font-family:var(--zh-font); font-size:20px; font-weight:500;
  color:var(--ink); line-height:1.35;
}
.rv-ex-en {
  font-family:var(--ui-font); font-size:14px; font-style:italic;
  color:var(--ink3); margin-top:2px;
}
.rv-ex-target {
  background:var(--accent-soft); color:var(--accent);
  padding:0 6px; border-radius:5px; font-weight:600;
}
.rv-ex-blur {
  filter:blur(6px); color:var(--ink); background:var(--accent-soft);
  padding:0 6px; border-radius:5px;
  user-select:none;
}

/* ── RATING BAR (4 wide buttons) ──────────────────────────────────── */
.rv-rate-bar {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
}
.rv-rate {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 0; border-radius:14px; border:0;
  font-family:var(--ui-font);
  cursor:pointer; transition:transform .08s, filter .12s;
}
.rv-rate:hover:not(:disabled) { filter:brightness(0.96); }
.rv-rate:active:not(:disabled) { transform:translateY(1px); }
.rv-rate-l { font-size:15px; font-weight:600; }
.rv-rate-i { font-family:var(--mono-font); font-size:11px; font-weight:500; opacity:.75; }
.rv-rate--again { background:#FBE3DC; color:#A53C24; }
.rv-rate--hard  { background:#FCEFC9; color:#7A5520; }
.rv-rate--good  { background:#D8EBC0; color:#345B17; }
.rv-rate--easy  { background:#E4D7F2; color:#5A2F95; }
.rv-rate-bar--off .rv-rate { opacity:.4; cursor:default; }

/* Session viewport — kill the legacy library grid */
.view.rv-wrap.rv-wrap--session { display:block !important; }

/* ── Notes block: cream paper feel matching prototype right-rail ── */
.notes-section {
  background:var(--surface) !important;
  border:1px solid var(--rule) !important;
  border-radius:14px; padding:1rem 1.1rem; box-shadow:var(--shadow-card);
}
.notes-label { color:var(--ink2); font-weight:600; letter-spacing:.05em; font-size:11px; }
.notes-area { background:transparent !important; border:0 !important; padding:.3rem 0 !important; font-size:15px !important; line-height:1.5; }
.notes-area:focus { outline:0; }

/* ── Vocab section heading: bigger, lighter ───────────────────────── */
.vocab-section .section-head { border-bottom:1px solid var(--rule); padding-bottom:.7rem; margin-bottom:1rem; }
.vocab-section .section-head-title { font-size:18px; font-weight:600; letter-spacing:-.2px; }

/* ── Tone legend tighter when on same row as pills ────────────────── */
.liu-tone-legend { padding:.4rem .85rem; gap:.85rem; }
/* When the legend lives inside the pill row, lock its height + vertical
   rhythm to match the surrounding .liu-pill chips so it never looks taller
   or shorter than its neighbours. */
/* Merged "Tone colors" pill — toggle + legend in a single chip.
   Same outer dimensions as every other .liu-pill (the dot + label block).
   The four tone marks live in a small inner capsule with its own light
   background so the colored marks stay legible whether the parent pill
   is in the off (light) or on (ink) state. */
.liu-pill--tones {
  gap:.45rem !important;
  padding:.34rem .35rem .34rem .65rem !important;   /* tighter than the others — the marks capsule already adds padding */
  line-height:1;
}
.liu-pill--tones .liu-pill-tones-label { line-height:1; }
.liu-pill--tones .liu-pill-tones-marks {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:4px 8px;
  background:var(--surface);
  border:1px solid var(--rule-strong);
  border-radius:999px;
  line-height:1;
}
.liu-pill--tones .liu-tone-item {
  display:inline-flex; align-items:center; gap:.3rem;
  line-height:1;
}
.liu-pill--tones .liu-tone-mark {
  font-family:var(--mono-font); font-weight:700;
  font-size:12.5px; line-height:1;
}
.liu-pill--tones .liu-tone-mark.t1 { color:var(--t1); }
.liu-pill--tones .liu-tone-mark.t2 { color:var(--t2); }
.liu-pill--tones .liu-tone-mark.t3 { color:var(--t3); }
.liu-pill--tones .liu-tone-mark.t4 { color:var(--t4); }
.liu-pill--tones .liu-tone-lbl {
  font-family:var(--ui-font); font-size:9.5px; font-weight:600;
  color:var(--ink3); letter-spacing:.04em; text-transform:uppercase;
  line-height:1;
}
/* When off, desaturate the marks so the chip reads as "preview, off". */
.liu-pill--tones:not(.on) .liu-tone-mark { opacity:.45; }

/* Narrow screens: keep the "Tone colors" label, drop only the
   FLAT/RISE/WAVE/FALL captions. The marks themselves bump a hair larger. */
@media (max-width:640px) {
  .liu-pill--tones .liu-tone-lbl { display:none; }
  .liu-pill--tones .liu-pill-tones-marks { gap:.4rem; padding:4px 7px; }
  .liu-pill--tones .liu-tone-mark { font-size:13px; }
}

/* Lock every reading-view pill to the same min-height so the row reads
   as a single rhythm regardless of which chip is the tallest. */
.liu-pills > .liu-pill,
.liu-pills > .liu-pill-add { min-height:32px; }

.liu-pills .liu-tone-legend {
  display:inline-flex; align-items:center;
  height:auto; min-height:0;
  padding:.42rem 1rem;        /* same vertical metric as .liu-pill */
  border-radius:999px;        /* same capsule */
  border:1px solid var(--rule);
  background:var(--surface);
  gap:.75rem;
  font-size:11.5px;           /* match pill type ramp */
  line-height:1;
}
.liu-pills .liu-tone-item { line-height:1; align-items:center; }
.liu-pills .liu-tone-mark { font-size:13px; line-height:1; }
.liu-pills .liu-tone-dot  { width:8px; height:8px; }
.liu-pills .liu-tone-lbl  { line-height:1; }
/* Always-rendered legend inside .liu-pills: when tone colors are off we
   only fade its contents but keep the bounding box, so toggling doesn't
   reflow the page. */
.liu-tone-legend--hidden { visibility:hidden; pointer-events:none; }
/* fc-py-bar: align Pinyin / Translation / Add card on a single row */
.fc-py-bar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.fc-py-bar .liu-pill-add { margin-left:auto; }

/* ── Flashcard glyph buttons (style-guide pass) ────────────────────────
   Replace emoji with stroked SVGs and size every button slot off --fs so
   the chrome scales with the reader's font preference. */
.fc .snd-btn,
.fc .fc-act,
.fc .ex-icon,
.fc-flag-corner {
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; padding:0;
}
.fc .snd-btn {
  width:calc(var(--fs) * 1.8); height:calc(var(--fs) * 1.8);
  border-radius:50%; background:var(--accent-soft); color:var(--accent);
  border:0; cursor:pointer;
}
.fc .snd-btn:hover { background:var(--accent); color:#fff; }
.fc .snd-btn svg { width:55%; height:55%; }

.fc .fc-act {
  width:calc(var(--fs) * 1.6); height:calc(var(--fs) * 1.6);
  border-radius:8px; border:1px solid var(--rule);
  background:transparent; color:var(--ink2); cursor:pointer;
  transition:background-color .12s, color .12s, border-color .12s;
}
.fc .fc-act:hover  { background:var(--faint); color:var(--ink); border-color:var(--rule-strong); }
.fc .fc-act.on,
.fc .fc-act.active { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-med); }
.fc .fc-act.danger-act { color:var(--ink3); border-color:var(--rule); }
.fc .fc-act.danger-act:hover { background:#fdecec; color:#C13D3D; border-color:#C13D3D; }
.fc .fc-act svg { width:58%; height:58%; }

.fc .ex-icon {
  width:calc(var(--fs) * 1.45); height:calc(var(--fs) * 1.45);
  border-radius:6px; background:var(--accent-soft); color:var(--accent);
  border:0; cursor:pointer; flex-shrink:0;
}
.fc .ex-icon:hover { background:var(--accent); color:#fff; }
.fc .ex-icon svg { width:50%; height:50%; }

.fc-flag-corner svg {
  width:calc(var(--fs) * 0.95);
  height:calc(var(--fs) * 0.95);
  color:var(--accent);
}
.fc-flag-corner {
  position:absolute; top:.45rem; right:.5rem;
  pointer-events:none;
}

/* Tighten the front audio row + actions row so the swatch icons read as a
   group rather than scattered glyphs. */
.fc-audio-row { display:flex; justify-content:center; margin-top:.35rem; }
.fc-actions   { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:center; margin-top:.6rem; }

/* Front hint sits below the audio row — small mono kicker */
.fc-hint {
  margin-top:.5rem;
  font-family:var(--mono-font); font-size:calc(var(--fs) * 0.7);
  color:var(--ink3); letter-spacing:.08em; text-transform:uppercase;
  text-align:center;
}

/* ── Status / streak chip placeholder near breadcrumb ─────────────── */
.liu-streak {
  display:inline-flex; align-items:center; gap:.32rem;
  padding:5px 10px; background:var(--accent-soft);
  color:var(--accent); border-radius:999px;
  font-family:var(--mono-font); font-size:11px; font-weight:600;
}
.liu-streak svg { display:block; }

/* ── "Review all N cards" CTA below vocab grid ──────────────────── */
.liu-review-cta {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; margin-top:1.1rem; padding:.95rem 1rem;
  background:var(--accent); color:#fff; border:0; border-radius:12px;
  font-family:var(--ui-font); font-size:15px; font-weight:600;
  cursor:pointer; transition:background .15s, transform .08s;
  box-shadow:0 2px 6px rgba(232,93,67,.25);
}
.liu-review-cta:hover { background:#d54a30; }
.liu-review-cta:active { transform:translateY(1px); }
.liu-review-cta svg { display:block; }

/* Stroke-order placeholder (not yet implemented) — visual TODO */
.liu-stroke-todo {
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--mono-font); font-size:10px; color:var(--ink3);
  background:var(--surface-alt); padding:3px 8px; border-radius:5px;
  letter-spacing:.04em; text-transform:uppercase;
}

/* ════════════════════════════════════════════════════════════════════
   LIÚLI v4 — +30% typography scale, brighter/taller waveform,
   anchored popup connector, desktop new-vocab right rail.
   ════════════════════════════════════════════════════════════════════ */

/* ── Brighter accent for the waveform on the dark block ───────────── */
.waveform-section {
  --wave-bright: #FF6F4D;          /* brighter coral for bars */
  padding:22px 22px 18px;
  border-radius:20px;
}
.waveform-wrap { height:96px; }
.waveform-wrap canvas { height:96px !important; }
.wf-mid { gap:18px; }
.wf-play {
  width:66px; height:66px;
  box-shadow:0 3px 12px rgba(255,111,77,.40);
}
.wf-play svg { transform:scale(1.25); }
.wf-time, .wf-src-btn, .wf-jog, .wf-loop, .wf-speed-label {
  font-size:14px !important;
}
.wf-speed-btn { font-size:17px !important; }

/* ── Typography ×1.3 — Liúli surfaces only ─────────────────────────── */
.liu-cap, .liu-cap-pill { font-size:14px; }
.liu-title { font-size:40px; }
.liu-subtitle { font-size:22px; line-height:1.4; }
@media(min-width:760px){
  .liu-title { font-size:55px; }
  .liu-subtitle { font-size:26px; }
}

.liu-pill { font-size:15px; padding:.55rem 1.15rem; }
.liu-pill-add { font-size:16px; padding:.55rem 1.15rem; }
.liu-pill-dot { width:7px; height:7px; }

.liu-nav-btn { font-size:17px; padding:.7rem 1.1rem; }
.liu-nav-count { font-size:14px; }
.liu-nav-title { font-size:21px; }

.liu-tone-mark { font-size:18px; }
.liu-tone-lbl  { font-size:13px; }
.liu-tone-dot  { width:11px; height:11px; }

.liu-spk-name { font-size:17px; }
.liu-spk-py   { font-size:14px; }

/* Pill avatar — fits up to 2 Chinese characters side by side */
.liu-avatar {
  width:auto !important; min-width:54px; height:38px;
  padding:0 9px; border-radius:11px;
  font-size:16px; font-weight:600; letter-spacing:.5px;
  margin-top:.35rem;
  display:grid; place-items:center;
  white-space:nowrap;
}
@media(min-width:760px){
  .liu-avatar { min-width:60px; height:42px; font-size:18px; padding:0 11px; }
}

.liu-line .char-unit .hz { font-size:39px; }
.liu-line .char-unit .py { font-size:15px; }
@media(min-width:760px){
  .liu-line .char-unit .hz { font-size:44px; }
  .liu-line .char-unit .py { font-size:17px; }
}

.liu-trans { font-size:19px; }
@media(min-width:760px){ .liu-trans { font-size:22px; } }

.liu-review-cta { font-size:19px; padding:1.1rem 1rem; }

.vocab-section .section-head-title { font-size:23px; }

/* Popup gets a touch larger to match */
.popup { font-size:1rem; min-width:280px; max-width:380px; }
.popup-word { font-size:2.1em; }

/* ── Popup connector (anchored to selected word center) ───────────── */
.popup-conn {
  position:absolute; width:2px; pointer-events:none;
  z-index:990; display:none;
  opacity:.85; border-radius:1px;
}
.popup { z-index:1000; }
.popup { border-top:2px solid var(--accent); }
.popup.popup-above { border-top:1px solid var(--rule); border-bottom:2px solid var(--accent); }

/* ── New-vocab right rail (desktop ≥ 1140) ─────────────────────────── */
/* Full-screen 2/3 + 1/3 grid (main view | rail). No max-width cap. */
.liu-rail { display:none; }
@media(min-width:1140px){
  #mainContent:has(.liu-rail) {
    display:grid;
    /* Rail widened ~50% (was 2fr 1fr, i.e. 1/3 of the row) so long German
       compound nouns have room to breathe next to their translation. */
    grid-template-columns:1fr 1fr;
    column-gap:2.5rem;
    width:100%;
    max-width:none;
    margin:0;
    padding:0 2.5rem;
    align-items:start;
    box-sizing:border-box;
  }
  #mainContent:has(.liu-rail) > .view {
    max-width:none; width:100%; margin:0; padding:1.8rem 0 14rem;
  }
  .liu-rail {
    display:block;
    position:sticky; top:32px;
    padding:1.2rem 0 2rem 2rem;
    border-left:1px solid var(--rule);
    align-self:start;
    max-height:calc(100vh - 56px); overflow-y:auto;
    box-sizing:border-box;
  }
  .liu-rail::-webkit-scrollbar { width:6px; }
  .liu-rail::-webkit-scrollbar-thumb { background:var(--rule); border-radius:3px; }
}
.liu-rail-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.1rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--rule);
}
.liu-rail-title { font-family:var(--ui-font); font-size:22px; font-weight:600; color:var(--ink); letter-spacing:-.2px; }
.liu-rail-count {
  font-family:var(--mono-font); font-size:17px; font-weight:600;
  color:var(--accent); background:var(--accent-soft);
  padding:4px 12px; border-radius:7px;
}
.liu-rail-list { display:flex; flex-direction:column; gap:.65rem; }
.liu-rail-row {
  display:grid; grid-template-columns:auto 1fr auto;
  column-gap:1rem; align-items:center;
  padding:14px 16px; background:var(--surface);
  border:1px solid var(--rule); border-radius:14px;
  cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.liu-rail-row:hover { border-color:var(--accent); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.liu-rail-hz { font-family:var(--zh-font); font-weight:600; font-size:30px; line-height:1.2; }
.liu-rail-hz .hz-char { font-weight:600; }
.liu-rail-def { font-family:var(--ui-font); font-size:17px; color:var(--ink2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.liu-rail-snd {
  width:26px; height:26px; border-radius:8px;
  background:var(--surface-alt); border:0; cursor:pointer;
  display:grid; place-items:center; color:var(--ink2);
}
.liu-rail-snd svg { width:11px; height:11px; }
.liu-rail-snd:hover { background:var(--accent-soft); color:var(--accent); }
.liu-rail-cta {
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  width:100%; margin-top:1rem; padding:1rem;
  background:var(--accent); color:#fff; border:0; border-radius:12px;
  font-family:var(--ui-font); font-size:17px; font-weight:600;
  cursor:pointer; transition:background .15s;
  box-shadow:0 2px 6px rgba(232,93,67,.25);
}
.liu-rail-cta:hover { background:#d54a30; }

/* ════════════════════════════════════════════════════════════════════
   LIÚLI v5 — vertical compaction pass
   Pulls out the empty space between nav → title → audio → pills → dialogue.
   ════════════════════════════════════════════════════════════════════ */

/* Page padding */
.view { padding-top:.4rem !important; padding-bottom:6rem !important; }
@media(min-width:760px){
  .view { padding:.8rem 1.5rem 6rem !important; max-width:none; }
}
/* The reading view also embeds a .liu-rail (New-vocab rail). Keep the
   horizontal gutter consistent with every other view by feeding --page-x. */
#mainContent:has(.liu-rail) > .view {
  padding-top:.8rem !important;
  padding-bottom:6rem !important;
  padding-left:  max(var(--page-x), env(safe-area-inset-left))  !important;
  padding-right: max(var(--page-x), env(safe-area-inset-right)) !important;
}

/* Prev/Next nav: less vertical breathing room */
.liu-nav {
  margin:.2rem 0 .9rem !important;
  padding-bottom:.65rem !important;
}
.liu-nav--bottom {
  margin:1.2rem 0 0 !important;
  padding:.7rem 0 0 !important;
}
.liu-nav-btn { padding:.5rem .85rem !important; }

/* Title block — tighter caption + title spacing */
.liu-titleblock { margin:.2rem 0 .8rem !important; }
.liu-caption { margin-bottom:.4rem !important; }
.liu-title { line-height:1.1 !important; }
.liu-subtitle { margin-top:.3rem !important; line-height:1.3 !important; }
@media(min-width:760px){
  .liu-subtitle { margin-top:.35rem !important; }
}

/* Audio block: less padding above and below, no big margins */
.waveform-section {
  padding:14px 18px 12px !important;
  margin-bottom:.8rem !important;
}
.wf-top { margin-bottom:10px !important; }
.wf-mid { gap:14px !important; }
.wf-bot { margin-top:10px !important; }
.waveform-wrap { height:72px !important; }
.waveform-wrap canvas { height:72px !important; }
.wf-play { width:54px !important; height:54px !important; }

/* Pill row above dialogue — flatten */
.liu-pills {
  margin:.1rem 0 .7rem !important;
  padding-bottom:.6rem !important;
  gap:.4rem !important;
}
.liu-pill, .liu-pill-add { padding:.32rem .85rem !important; }

/* Tone legend: tighter */
.liu-tone-legend { padding:.3rem .75rem !important; margin:0 0 .55rem !important; }

/* Dialogue rows: pull rows together */
.text-card { gap:.25rem !important; margin-bottom:.6rem !important; }
.text-card .sent-row.liu-row {
  padding:.2rem .55rem .25rem !important;
  gap:.6rem !important;
}
.text-card .sent-row.liu-row.active-sent::before { top:.35rem !important; bottom:.35rem !important; }

/* Avatar — keep pill but trim margin */
.liu-avatar { margin-top:.15rem !important; height:34px !important; min-width:50px !important; padding:0 8px !important; font-size:15px !important; }
@media(min-width:760px){
  .liu-avatar { height:38px !important; min-width:56px !important; font-size:17px !important; }
}

/* Hanzi line — keep readable but tighter row gap */
.liu-line { row-gap:4px !important; }

/* Translation under hanzi line — minimal margin */
.liu-trans { margin-top:.25rem !important; line-height:1.4 !important; }
@media(min-width:760px){ .liu-trans { margin-top:.3rem !important; } }

/* Vocab section heading + grid: less whitespace */
.vocab-section { margin-top:.9rem !important; }
.vocab-section .section-head { padding-bottom:.5rem !important; margin-bottom:.6rem !important; }
.liu-review-cta { margin-top:.7rem !important; padding:.75rem 1rem !important; font-size:17px !important; }

/* Notes section: trim padding */
.notes-section { padding:.7rem .95rem !important; margin-top:1rem !important; }

/* fs-control bar retired — always hidden. The label + fontToggle stub
   remain in the DOM only so legacy `el.textContent = …` updates don't crash. */
#fsControl { display:none !important; }

/* ════════════════════════════════════════════════════════════════════
   BREADCRUMB v2 — Liúli prototype top bar
   Layout: [logo+Liúli]  [READING · level / book / chapter / text]  ➝
           [Reading|Vocab|Review]  [14d]  [⚙]  [B]
   ════════════════════════════════════════════════════════════════════ */
.breadcrumb {
  display:flex; align-items:center; gap:14px;
  padding:8px 16px; min-height:60px;
  background:var(--paper); border-bottom:1px solid var(--rule);
  overflow-x:auto;
}

/* Brand mark + wordmark on the left */
.bc-brand {
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; border:0; padding:0;
  cursor:pointer; flex-shrink:0;
  border-right:0; margin:0;
}
.bc-brand-mark {
  width:38px; height:38px; border-radius:10px;
  background:var(--ink);
  display:grid; place-items:center;
  flex-shrink:0;
}
.bc-brand-word {
  font-family:var(--display-font); font-size:22px; font-weight:600;
  color:var(--ink); letter-spacing:-.4px; line-height:1;
}
.bc-brand:hover .bc-brand-word { opacity:.75; }

/* Center group — single rounded container with mode label + dropdowns */
.bc-group {
  display:inline-flex; align-items:center;
  background:var(--surface); border:1px solid var(--rule);
  border-radius:12px; padding:4px;
  gap:2px; flex-shrink:1; min-width:0;
}
.bc-group-sep {
  color:var(--rule); font-size:13px; padding:0 2px; user-select:none;
}
.bc-group .bc-text-select {
  background:transparent; border:0; padding:5px 22px 5px 9px;
  font-family:var(--ui-font); font-size:13px; font-weight:500;
  color:var(--ink); cursor:pointer; border-radius:7px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5L6 8L9 5' stroke='%237B7B85' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center;
  outline:0; transition:background-color .12s;
}
.bc-group .bc-text-select:hover { background-color:var(--faint); }
.bc-group .bc-text-select:focus { background-color:var(--faint); }

/* Right side: tab pill group (Reading / Vocab / Review) */
.bc-tabs {
  display:inline-flex; align-items:center; gap:2px;
  background:var(--surface-alt); border-radius:10px; padding:3px;
  flex-shrink:0;
}
.bc-tab {
  background:transparent; border:0; padding:6px 14px;
  border-radius:7px;
  font-family:var(--ui-font); font-size:13px; font-weight:500;
  color:var(--ink3); cursor:pointer; white-space:nowrap;
  transition:background .12s, color .12s;
}
.bc-tab:hover { color:var(--ink); }
.bc-tab.on {
  background:var(--surface); color:var(--ink); font-weight:600;
  box-shadow:var(--shadow-card), 0 0 0 1px var(--rule);
}

/* Streak chip */
.bc-streak {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 10px; background:var(--accent-soft);
  border-radius:999px; flex-shrink:0;
  font-family:var(--mono-font); font-size:12px; font-weight:600;
  color:var(--accent);
}
.bc-streak svg { display:block; }

/* Admin pill — square accent button */
.bc-admin-btn, .bc-logout-btn {
  width:32px; height:32px; padding:0 !important;
  border-radius:9px; border:1px solid var(--rule);
  background:var(--surface); color:var(--ink2);
  font-family:var(--ui-font); font-size:14px; font-weight:600;
  cursor:pointer; flex-shrink:0;
  display:grid; place-items:center;
  transition:background .12s, color .12s, border-color .12s;
}
.bc-admin-btn:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.bc-admin-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.bc-logout-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

/* User avatar (compact circle, no name) */
.bc-user-avatar {
  width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:#fff; border:0;
  display:grid; place-items:center;
  font-family:var(--ui-font); font-size:13px; font-weight:600;
  letter-spacing:.5px; cursor:pointer; flex-shrink:0;
  transition:transform .08s, background .15s;
}
.bc-user-avatar:hover { background:#d54a30; }
.bc-user-avatar:active { transform:translateY(1px); }
.bc-user-in {
  padding:6px 14px;
  background:var(--accent); color:#fff; border:0; border-radius:999px;
  font-family:var(--ui-font); font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s; flex-shrink:0;
}
.bc-user-in:hover { background:#d54a30; }

/* Hide the legacy standalone tab bar — tabs now live in the breadcrumb */
.tab-bar { display:none !important; }

/* ════════════════════════════════════════════════════════════════════
   LIÚLI AUTH — split sign-in layout
   ════════════════════════════════════════════════════════════════════ */
.liu-auth {
  position:fixed; inset:0; z-index:1000;
  background:var(--paper); color:var(--ink);
  display:grid; grid-template-columns:1fr 1.05fr;
  font-family:var(--ui-font);
  overflow:hidden;
}
@media(max-width:760px){
  .liu-auth { grid-template-columns:1fr; grid-template-rows:1fr; }
  .liu-auth-side { display:none !important; }
}

/* LEFT — form */
.liu-auth-form {
  padding:40px 64px; display:flex; flex-direction:column;
  background:var(--paper);
  overflow-y:auto;
}
@media(max-width:760px){ .liu-auth-form { padding:32px 24px; } }

.liu-auth-brand { display:flex; align-items:center; gap:10px; }
.liu-auth-mark {
  width:30px; height:30px; border-radius:9px; background:var(--ink);
  display:grid; place-items:center; flex-shrink:0;
}
.liu-auth-brand-word {
  font-family:var(--display-font); font-size:18px; font-weight:600;
  color:var(--ink); letter-spacing:-.4px;
}
.liu-auth-brand-zh {
  font-family:var(--zh-font); font-size:17px; font-weight:500;
  color:var(--ink3); letter-spacing:1px; margin-left:-2px;
}

.liu-auth-center { flex:1; display:flex; flex-direction:column; justify-content:center; max-width:380px; padding:32px 0; }

.liu-auth-kicker {
  font-family:var(--mono-font); font-size:11px; font-weight:600;
  color:var(--ink3); letter-spacing:.13em; text-transform:uppercase;
}
.liu-auth-kicker--dark { color:rgba(255,255,255,0.55); }
.liu-auth-form .liu-auth-kicker { color:var(--accent); }

.liu-auth-h1 {
  font-family:var(--display-font); font-size:54px; font-weight:600;
  letter-spacing:-2.2px; line-height:1; color:var(--ink);
  margin:14px 0 8px;
}
@media(max-width:760px){ .liu-auth-h1 { font-size:40px; letter-spacing:-1.4px; } }

.liu-auth-sub {
  font-family:var(--ui-font); font-size:14px; color:var(--ink3);
  margin:0 0 24px; line-height:1.45;
}

.liu-auth-error {
  background:var(--accent-soft); color:var(--accent);
  font-family:var(--ui-font); font-size:13px; font-weight:500;
  padding:.65rem .85rem; border-radius:9px; margin-bottom:14px;
  border:1px solid var(--accent-med);
}
.liu-auth-error.login-info { background:rgba(46,157,92,.10); color:#1A6A3A; border-color:rgba(46,157,92,.3); }

.liu-auth-label {
  font-family:var(--mono-font); font-size:10px; font-weight:600;
  color:var(--ink3); letter-spacing:.12em; text-transform:uppercase;
}
.liu-auth-pwhead { display:flex; align-items:baseline; justify-content:space-between; }
.liu-auth-forgot {
  font-family:var(--ui-font); font-size:11px; font-weight:500;
  color:var(--accent); cursor:pointer; text-decoration:none;
  background:transparent; border:0; padding:0;
}
.liu-auth-forgot:hover { text-decoration:underline; }

.liu-auth-input {
  display:block; width:100%; margin:6px 0 14px;
  padding:14px 16px; border-radius:10px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--rule-strong);
  font-family:var(--ui-font); font-size:15px;
  outline:0; transition:border-color .12s, box-shadow .12s;
  box-sizing:border-box;
}
.liu-auth-input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

.liu-auth-submit {
  margin-top:8px; width:100%;
  padding:15px; border-radius:12px; border:0;
  background:var(--ink); color:#fff;
  font-family:var(--ui-font); font-size:14px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:background .15s, transform .08s;
}
.liu-auth-submit:hover { background:#000; }
.liu-auth-submit:active { transform:translateY(1px); }
.liu-auth-submit:disabled { opacity:.6; cursor:not-allowed; }

.liu-auth-foot { font-family:var(--ui-font); font-size:12px; color:var(--ink3); }

/* RIGHT — dark editorial sample */
.liu-auth-side {
  position:relative; overflow:hidden;
  background:var(--ink); color:#FAFAF7;
  padding:56px; display:flex; flex-direction:column;
}
.liu-auth-watermark {
  position:absolute; right:-20px; top:20px;
  font-family:var(--ui-font); font-size:340px; line-height:.85; letter-spacing:-.03em;
  color:rgba(232,93,67,0.16); font-weight:700;
  user-select:none; pointer-events:none;
}
.liu-auth-side-inner {
  position:relative; flex:1;
  display:flex; flex-direction:column; justify-content:center;
  max-width:480px;
}
.liu-auth-sample { display:flex; flex-direction:column; gap:8px; margin:24px 0 12px; }
.liu-auth-sample-spk {
  font-family:var(--ui-font); font-size:13px; font-weight:600;
  color:var(--accent);
}
.liu-auth-sample-line {
  font-family:var(--ui-font); color:#FAFAF7;
}
.liu-auth-sample-line--de { font-size:26px; font-weight:500; line-height:1.3; }
.liu-auth-sample-line--ipa {
  font-family:var(--mono-font); font-size:15px; color:rgba(255,255,255,.55);
}
.liu-auth-sample-en {
  font-family:var(--ui-font); font-size:19px; color:rgba(255,255,255,.7);
  line-height:1.5; margin:8px 0 0; font-weight:400;
}
.liu-auth-side-foot {
  margin-top:auto; padding-top:40px;
  font-family:var(--mono-font); font-size:11px;
  color:rgba(255,255,255,.5); letter-spacing:.08em; text-transform:uppercase;
}

/* ════════════════════════════════════════════════════════════════════
   LIÚLI CHAPTER LIBRARY — sidebar + list + rail (desktop)
   Mobile (<820): collapses into a vertical reading-path timeline.
   ════════════════════════════════════════════════════════════════════ */
/* Use .view.liu-library-view so we beat .view.active { display:block } */
.view.liu-library-view {
  padding:0 !important; max-width:none !important; width:100% !important;
  display:grid !important; gap:0;
  grid-template-columns:260px minmax(0,1fr) 340px;
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "side head rail"
    "side main rail";
  align-items:stretch;
  min-height:calc(100vh - 60px);
}
.liu-lib-side { grid-area:side; }
.liu-lib-head { grid-area:head; }
.liu-lib-main { grid-area:main; }
.liu-lib-rail { grid-area:rail; }

@media(max-width:1280px){
  .view.liu-library-view { grid-template-columns:240px minmax(0,1fr) 320px; }
}
@media(max-width:1100px){
  .view.liu-library-view {
    grid-template-columns:220px minmax(0,1fr);
    grid-template-areas:
      "side head"
      "side main";
  }
  .liu-lib-rail { display:none !important; }
}
@media(max-width:820px){
  .view.liu-library-view {
    grid-template-columns:1fr;
    grid-template-rows:auto auto 1fr;
    grid-template-areas:
      "head"
      "side"
      "main";
  }
  /* Sidebar flows inline below the head on mobile (was hidden) */
  .liu-lib-side {
    position:static !important;
    border-right:0 !important;
    border-bottom:1px solid var(--rule);
    padding:14px 18px !important;
  }
  .liu-lib-rail { display:none !important; }
}

/* ── SIDEBAR ─────────────────────────────────────────────────────── */
.liu-lib-side {
  border-right:1px solid var(--rule); padding:24px 18px;
  display:flex; flex-direction:column; gap:4px;
  background:var(--paper);
}
.liu-lib-brand { display:flex; align-items:center; gap:10px; padding:0 6px 18px; }
.liu-lib-brand-mark {
  width:24px; height:24px; border-radius:7px; background:var(--ink);
  display:grid; place-items:center;
}
.liu-lib-brand-word {
  font-family:var(--display-font); font-size:15px; font-weight:600;
  letter-spacing:-.3px; color:var(--ink);
}
.liu-lib-brand-zh {
  font-family:var(--zh-font); font-size:14px; font-weight:500;
  color:var(--ink3); letter-spacing:1px; margin-left:-2px;
}
/* Kicker: bumped to ~3× the original 11 px so it reads as a section label */
.liu-lib-kicker {
  font-family:var(--mono-font); font-size:33px; font-weight:700;
  color:var(--ink3); letter-spacing:.05em; text-transform:uppercase;
  margin:.5rem 0 .35rem;
  line-height:1.05;
}
.liu-lib-kicker--accent { color:var(--accent); }
/* ── Level pill grid: HSK 3 / HSK 2 rows + Mine ───────────────────── */
.liu-lib-lvl-grid {
  display:flex; flex-direction:column; gap:6px;
  margin:.5rem 0 1.2rem;
}
.liu-lib-lvl-row {
  display:grid;
  grid-template-columns:66px repeat(6, 1fr);
  gap:6px; align-items:center;
}
.liu-lib-lvl-row--mine { grid-template-columns:66px 1fr; }
.liu-lib-lvl-variant {
  font-family:var(--mono-font); font-size:11px; font-weight:700;
  color:var(--ink3); letter-spacing:.04em; text-transform:uppercase;
  text-align:left; user-select:none; padding-left:2px;
  white-space:nowrap;
}
.liu-lib-lvl {
  height:32px; padding:0; border-radius:8px;
  background:transparent; border:1px solid var(--rule);
  color:var(--ink); font-family:var(--mono-font);
  font-size:13px; font-weight:600; letter-spacing:.02em; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, opacity .15s;
  display:grid; place-items:center; line-height:1;
}
.liu-lib-lvl:hover:not(:disabled) {
  color:var(--ink); border-color:var(--ink); background:var(--faint);
}
.liu-lib-lvl.on {
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.liu-lib-lvl--off,
.liu-lib-lvl:disabled {
  color:var(--ink3); opacity:.4; cursor:not-allowed;
  background:transparent; border-color:var(--rule);
}
.liu-lib-lvl--mine {
  height:34px; padding:0 16px; font-family:var(--ui-font);
  font-size:14px; font-weight:600;
  justify-content:flex-start; place-items:center start;
}
.liu-lib-books { margin-top:.4rem; display:flex; flex-direction:column; gap:6px; }
/* Sidebar course rows: same swatch + icon style as the page-center deck,
   but compact (icon left, name right, no meta). */
.liu-lib-book.liu-mod-row {
  display:flex; flex-direction:row; align-items:center; gap:12px;
  padding:8px 10px; border-radius:12px;
  background:transparent; border:1px solid transparent;
  cursor:pointer; transition:background .12s, border-color .12s;
  text-align:left;
}
.liu-lib-book.liu-mod-row:hover { background:var(--faint); }
.liu-lib-book.liu-mod-row.on { background:var(--surface); border-color:var(--rule); }
.liu-lib-book.liu-mod-row .liu-mod-swatch { width:32px; height:32px; border-radius:9px; }
.liu-lib-book.liu-mod-row .liu-mod-swatch svg { width:17px; height:17px; }
.liu-mod-row-name {
  font-family:var(--ui-font); font-size:14px; font-weight:600;
  color:var(--ink); line-height:1;
}

/* Mobile: condense the course row strip into a single line of icon-only
   buttons. The kicker label, kicker for "Course", and the per-row text
   names all collapse so only the colored swatches remain. */
@media (max-width:820px) {
  .liu-lib-side .liu-lib-kicker { display:none; }
  .liu-lib-side .liu-lib-books {
    flex-direction:row; gap:.6rem;
    align-items:center; justify-content:flex-start;
    margin:0;
  }
  .liu-lib-side .liu-lib-book.liu-mod-row {
    padding:6px; border-radius:12px;
  }
  .liu-lib-side .liu-lib-book.liu-mod-row .liu-mod-row-name { display:none; }
  .liu-lib-side .liu-lib-book.liu-mod-row .liu-mod-swatch { width:38px; height:38px; }
  .liu-lib-side .liu-lib-book.liu-mod-row .liu-mod-swatch svg { width:20px; height:20px; }
}

/* Branding fully removed from the library sidebar; wordmarks elsewhere
   are still hidden too. */
.liu-lib-brand,
.liu-lib-brand-word,
.liu-lib-brand-zh,
.bc-brand-word,
.liu-auth-brand-word,
.liu-auth-brand-zh { display:none !important; }

/* ── Welcome + course launcher (Levels & Books views) ─────────────── */
.liu-lib-welcome {
  font-family:var(--ui-font); font-size:15px; color:var(--ink3);
  line-height:1.5; max-width:540px; margin:.6rem 0 1.4rem;
}
/* ── Module deck (Textbook / Workbook / Vocab / Review on Books view) ── */
.liu-mod-grid {
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  margin-top:.6rem;
}
.liu-mod-card {
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  padding:22px 24px 20px;
  background:var(--surface); border:1px solid var(--rule); border-radius:18px;
  font-family:var(--ui-font); text-align:left; cursor:pointer;
  box-shadow:var(--shadow-card);
  transition:border-color .15s, box-shadow .15s, transform .08s;
}
.liu-mod-card:hover {
  border-color:var(--accent);
  box-shadow:0 6px 20px rgba(0,0,0,.07);
}
.liu-mod-card:active { transform:translateY(1px); }
.liu-mod-swatch {
  width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center;
  flex-shrink:0;
}
.liu-mod-swatch svg { width:23px; height:23px; }
.liu-mod-swatch--blue   { background:#DCE9FB; color:#3F82E6; }
.liu-mod-swatch--orange { background:#FBE5D2; color:#D97520; }
.liu-mod-swatch--green  { background:#D6EBD8; color:#2E9D5C; }
.liu-mod-swatch--red    { background:#FBDDD8; color:#C13D3D; }
.liu-mod-body { display:flex; flex-direction:column; gap:4px; }
.liu-mod-name {
  font-family:var(--ui-font); font-size:19px; font-weight:700;
  color:var(--ink); letter-spacing:-.2px; line-height:1.1;
}
.liu-mod-meta { display:none; }
.liu-mod-card--has-dot::after {
  content:""; position:absolute; top:14px; right:14px;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
@media(max-width:560px){
  .liu-mod-grid { gap:12px; }
  .liu-mod-card { padding:18px 20px 16px; gap:14px; }
  .liu-mod-swatch { width:40px; height:40px; }
  .liu-mod-swatch svg { width:20px; height:20px; }
  .liu-mod-name { font-size:17px; }
}
.liu-lib-status-host, .liu-lib-cache-host { margin-top:1rem; }
.liu-lib-admin-block {
  margin-top:1.4rem; padding:1rem 1.1rem;
  background:var(--surface-alt); border:1px dashed var(--rule-strong);
  border-radius:12px;
}
.liu-lib-admin-block::before {
  content:"ADMIN · DIAGNOSTICS";
  display:block; font-family:var(--mono-font); font-size:10.5px;
  color:var(--ink3); letter-spacing:.13em; font-weight:700;
  margin-bottom:.6rem;
}

/* ── HEAD + MAIN (sibling rows; share horizontal padding) ─────── */
.liu-lib-head { padding:28px 40px 0; min-width:0; }
.liu-lib-main { padding:1.2rem 40px 32px; min-width:0; }
@media(max-width:820px){
  .liu-lib-head { padding:18px 18px 0; }
  .liu-lib-main { padding:.8rem 18px 6rem; }
}
.liu-lib-title {
  font-family:var(--display-font); font-size:46px; font-weight:600;
  letter-spacing:-1.6px; line-height:1; color:var(--ink);
  margin:.4rem 0 0;
}
@media(max-width:820px){ .liu-lib-title { font-size:30px; letter-spacing:-1px; } }
.liu-lib-list {
  display:flex; flex-direction:column; gap:1px;
  border:1px solid var(--rule); border-radius:14px;
  overflow:hidden; background:var(--rule);
}
.liu-lib-row {
  background:var(--surface); padding:20px 22px;
  display:grid;
  grid-template-columns:56px 1fr 220px 120px;
  align-items:center; gap:18px; cursor:pointer;
  transition:background .12s;
}
.liu-lib-row:hover { background:var(--faint); }
.liu-lib-row--now { background:var(--surface-alt); }
.liu-lib-row--now:hover { background:var(--surface-alt); }
@media(max-width:820px){
  .liu-lib-row { grid-template-columns:44px 1fr auto; gap:12px; padding:16px 14px; }
  .liu-lib-row .liu-lib-meta { display:none; }
  .liu-lib-row .liu-lib-open { font-size:13px; color:var(--ink3); }
  .liu-lib-row--now .liu-lib-cta {
    grid-column:auto; padding:6px 10px; font-size:11px;
  }
}
.liu-lib-num {
  font-family:var(--display-font); font-size:36px; font-weight:600;
  color:var(--ink3); letter-spacing:-1.5px; line-height:1;
}
.liu-lib-row--now .liu-lib-num { color:var(--accent); }
.liu-lib-info { min-width:0; }
.liu-lib-zh { font-family:var(--zh-font); font-size:22px; font-weight:600; color:var(--ink); line-height:1.15; }
.liu-lib-en { font-family:var(--ui-font); font-size:13px; color:var(--ink3); margin-top:4px; }
.liu-lib-meta { min-width:0; }
.liu-lib-meta-row { display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.liu-lib-pct { font-family:var(--mono-font); font-size:11px; color:var(--ink3); font-weight:600; }
.liu-lib-row--now .liu-lib-pct { color:var(--accent); }
.liu-lib-bar { height:3px; background:var(--faint); border-radius:2px; overflow:hidden; }
.liu-lib-bar-fill { height:100%; background:var(--accent); }
.liu-lib-cta {
  justify-self:end; background:var(--ink); color:#fff; border:0;
  padding:9px 14px; border-radius:8px;
  font-family:var(--ui-font); font-size:12px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.liu-lib-open {
  justify-self:end; font-family:var(--ui-font);
  font-size:22px; line-height:1; color:var(--ink3); font-weight:400;
  transition:transform .2s;
}
.liu-lib-row-wrap--open > .liu-lib-row .liu-lib-open {
  transform:rotate(90deg); color:var(--ink);
}

/* ── Accordion: chapter row → list of texts ─────────────────────── */
.liu-lib-row-wrap { background:var(--surface); }
.liu-lib-row-wrap--now { background:var(--surface-alt); }
.liu-lib-row-wrap > .liu-lib-row { cursor:pointer; }
.liu-lib-row-wrap > .liu-lib-row-texts {
  max-height:0; overflow:hidden;
  transition:max-height .28s cubic-bezier(.2,.8,.3,1);
}
.liu-lib-row-wrap--open > .liu-lib-row-texts { max-height:1200px; }
.liu-lib-tx-list {
  display:flex; flex-direction:column; gap:8px;
  padding:0 22px 20px;
}
.liu-lib-tx {
  background:var(--surface); border:1px solid var(--rule);
  border-radius:12px; padding:14px 18px;
  display:flex; align-items:center; gap:16px;
  font-family:var(--ui-font); cursor:pointer; text-align:left;
  width:100%; transition:border-color .15s, box-shadow .15s, background .15s;
}
.liu-lib-tx:hover { border-color:var(--accent); }
.liu-lib-tx--now {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.liu-lib-tx-kicker {
  font-family:var(--mono-font); font-size:11px; color:var(--ink3);
  letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  width:54px; flex-shrink:0;
}
.liu-lib-tx-zh {
  font-family:var(--zh-font); font-size:18px; font-weight:600;
  color:var(--ink); line-height:1; flex-shrink:0;
}
.liu-lib-tx-en {
  font-family:var(--ui-font); font-size:14px;
  color:var(--ink3); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.liu-lib-tx-arrow {
  font-family:var(--ui-font); font-size:20px; line-height:1;
  color:var(--ink3); font-weight:400; flex-shrink:0;
}
.liu-lib-tx-loading, .liu-lib-tx-err, .liu-lib-tx-empty {
  padding:14px 22px 20px;
  font-family:var(--ui-font); font-size:13px; color:var(--ink3);
}

/* Mobile: keep the accordion working but pack rows tighter */
@media(max-width:820px){
  .liu-lib-tx-list { padding:0 14px 14px; }
  .liu-lib-tx { padding:11px 14px; gap:10px; flex-wrap:wrap; }
  .liu-lib-tx-kicker { width:auto; }
  .liu-lib-tx-zh { font-size:16px; }
  .liu-lib-tx-en { font-size:13px; flex-basis:100%; }
}

/* ── RIGHT RAIL ─────────────────────────────────────────────────── */
.liu-lib-rail {
  border-left:1px solid var(--rule); padding:32px 24px;
  display:flex; flex-direction:column; gap:14px;
  background:var(--paper);
}
.liu-lib-card {
  background:var(--surface); border:1px solid var(--rule);
  border-radius:14px; padding:18px;
  box-shadow:var(--shadow-card);
}
.liu-lib-card-kicker { font-family:var(--mono-font); font-size:10px; color:var(--ink3); font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.liu-lib-card-zh { font-family:var(--zh-font); font-size:22px; font-weight:600; color:var(--ink); margin-top:8px; line-height:1.2; }
.liu-lib-card-en { font-family:var(--ui-font); font-size:13px; color:var(--ink3); margin-top:4px; }
.liu-lib-card-cta {
  margin-top:14px; width:100%; padding:12px; border:0; border-radius:10px;
  background:var(--accent); color:#fff;
  font-family:var(--ui-font); font-size:13px; font-weight:600; cursor:pointer;
}
.liu-lib-card-cta:hover { background:#d54a30; }
.liu-lib-review-cta {
  margin-top:.4rem; width:100%; padding:11px; border-radius:10px;
  border:1px solid var(--rule-strong); background:transparent; color:var(--ink);
  font-family:var(--ui-font); font-size:12px; font-weight:600; cursor:pointer;
  transition:background .12s, color .12s;
}
.liu-lib-review-cta:hover { background:var(--ink); color:#fff; border-color:var(--ink); }

/* Right-rail empty state for Levels / Books pages */
.liu-lib-empty {
  margin-top:.6rem; padding:24px 18px;
  background:var(--surface); border:1px dashed var(--rule-strong);
  border-radius:14px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
}
.liu-lib-empty-glyph {
  font-family:var(--zh-font); font-size:88px; line-height:1;
  color:var(--accent-soft); font-weight:700;
}
.liu-lib-empty-txt {
  font-family:var(--ui-font); font-size:13px; color:var(--ink3);
  line-height:1.5; max-width:240px;
}

/* ── MOBILE TIMELINE: turn the chapter list into a vertical path ── */
@media(max-width:820px){
  .liu-lib-list { background:transparent; border:0; border-radius:0; gap:14px; padding-left:46px; position:relative; }
  .liu-lib-list::before {
    content:""; position:absolute; left:14px; top:14px; bottom:14px; width:2px;
    background:repeating-linear-gradient(180deg, var(--rule) 0 4px, transparent 4px 8px);
  }
  .liu-lib-row {
    background:var(--surface); border:1px solid var(--rule);
    border-radius:14px; padding:14px 16px;
    grid-template-columns:1fr auto;
    position:relative;
  }
  .liu-lib-row::before {
    content:attr(data-n); position:absolute; left:-44px; top:12px;
    width:30px; height:30px; border-radius:50%;
    background:var(--ink); color:#fff;
    display:grid; place-items:center;
    font-family:var(--mono-font); font-size:11px; font-weight:700;
    z-index:1;
  }
  .liu-lib-row--now { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
  .liu-lib-row--now::before { background:var(--accent); }
  .liu-lib-num { display:none; }
}

/* Sans/Serif toggle pill — square-ish, distinct from A−/A+ */
.liu-font-tog {
  width:auto !important; min-width:54px; padding:0 10px;
  font-family:var(--zh-font); font-weight:600;
}

/* ── A−/A+ font-size pills (right edge of pill row) ───────────────── */
.liu-fs-group { margin-left:auto; display:inline-flex; gap:.4rem; }
.liu-fs-btn {
  width:36px; height:32px; border-radius:9px;
  background:var(--surface); color:var(--ink2);
  border:1px solid var(--rule);
  font-family:var(--ui-font); font-size:14px; font-weight:600;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
  display:grid; place-items:center;
}
.liu-fs-btn:hover { background:var(--ink); color:#fff; border-color:var(--ink); }

/* ════════════════════════════════════════════════════════════════════
   Tie hanzi sizes to --fs so A−/A+ buttons actually scale them.
   --fs default = 19px; range 12–45px (changeFontSize in core.js).
   ════════════════════════════════════════════════════════════════════ */

/* Dialogue line: hanzi 1.85×fs, pinyin 0.7×fs */
.liu-line .char-unit .hz { font-size:calc(var(--fs) * 1.85) !important; }
.liu-line .char-unit .py { font-size:calc(var(--fs) * 0.72) !important; }
@media(min-width:760px){
  .liu-line .char-unit .hz { font-size:calc(var(--fs) * 2.05) !important; }
  .liu-line .char-unit .py { font-size:calc(var(--fs) * 0.8)  !important; }
}

/* Vocab grid cards on reading + chapter pages */
/* Flashcards inherit the dialogue's hanzi scale so the reading page and
   the cards underneath read at the same weight. */
/* +30% over the previous halved size (0.925/1.025 -> 1.2025/1.3325). */
.fc-hz { font-size:calc(var(--fs) * 1.2025) !important; }
.fc-grid-reading .fc-hz { font-size:calc(var(--fs) * 1.2025) !important; }
@media(min-width:760px){
  .fc-hz, .fc-grid-reading .fc-hz { font-size:calc(var(--fs) * 1.3325) !important; }
}
/* fc-front-py (front, toggle-shown) and fc-py (back) share this size so
   Lautschrift never changes size between the front and back of a card. */
.fc-py, .fc-front-py { font-size:calc(var(--fs) * 0.95) !important; }
.fc-def { font-size:calc(var(--fs) * 0.95) !important; }
.fc-hint { font-size:calc(var(--fs) * 0.7) !important; }

/* Examples inside flashcards */
.ex-hz-row { font-size:calc(var(--fs) * 1) !important; }
.ex-py     { font-size:calc(var(--fs) * 0.78) !important; }
.ex-en     { font-size:calc(var(--fs) * 0.82) !important; }

/* Right rail word/translation scale with --fs too. */
/* Rail is ~50% wider now (see grid-template-columns above) but sized down
   another 30% (0.96->0.672, 0.92->0.644) so the wider column doesn't just
   make everything bigger — it makes long German words fit on one line. */
.liu-rail-hz  { font-size:calc(var(--fs) * 0.672) !important; }
.liu-rail-def { font-size:calc(var(--fs) * 0.644) !important; }

/* Title + translation also scale (less aggressive ratio) */
.liu-title    { font-size:calc(var(--fs) * 2.1) !important; }
.liu-subtitle { font-size:calc(var(--fs) * 1.15) !important; }
.liu-trans    { font-size:calc(var(--fs) * 1.05) !important; }
@media(min-width:760px){
  .liu-title    { font-size:calc(var(--fs) * 2.6) !important; }
  .liu-subtitle { font-size:calc(var(--fs) * 1.3) !important; }
  .liu-trans    { font-size:calc(var(--fs) * 1.15) !important; }
}

/* Review (Üben) card — word 30% smaller than before (3 -> 2.1); Lautschrift
   and meaning share one size so nothing changes size between reveal states. */
.rv-card-hz { font-size:calc(var(--fs) * 2.1) !important; }
.rv-card-py, .rv-card-def, .rv-card-def-sub { font-size:calc(var(--fs) * 1.1) !important; }

/* Pill row — final compact overrides (kept at file end so they beat
   every earlier definition without needing extra selector specificity). */
.liu-pills { gap:.2rem !important; }
.liu-pill,
.liu-pill-add { padding:.2rem .5rem !important; }
.liu-pill--tones { gap:.2rem !important; }