/* 小赵识字 UI polish — design tokens and screen styles.
   Loaded after app.css; this file owns the five refreshed screens. */

:root {
  color-scheme: light dark;

  --bg: #F5EDDD;
  --paper: #FFFDF7;
  --folder: #EFE5CF;
  --ink: #2C241B;
  --muted: #6E6253;
  --line: #DDCFB8;
  --line2: #CDBB9C;
  --seg: #EADFC9;
  --bartrack: #E3D6BA;
  --red: #B23A2F;
  --red-edge: #8F2C23;
  --red-tint: #F7DDD9;
  --amber: #C98A1E;
  --amber-ink: #7A4A00;
  --green: #23784A;
  --blue: #3B76AA;

  --ui-font: -apple-system, system-ui, "Segoe UI", "Noto Sans", "Noto Sans SC",
    Roboto, "PingFang SC", "Hiragino Sans GB", sans-serif;

  --l0s: #B4B2A9; --l0t: #F1EFE8; --l0k: #444441;
  --l1s: #D85A30; --l1t: #FAECE7; --l1k: #712B13;
  --l2s: #EF9F27; --l2t: #FAEEDA; --l2k: #633806;
  --l3s: #639922; --l3t: #EAF3DE; --l3k: #27500A;
  --l4s: #378ADD; --l4t: #E6F1FB; --l4k: #0C447C;
  --l5s: #7F77DD; --l5t: #EEEDFE; --l5k: #3C3489;

  /* The older app.css level tokens, remapped to the new palette so the
     parent area and search results inherit it. */
  --level-0-bg: var(--l0t); --level-0-ink: var(--l0k);
  --level-1-bg: var(--l1t); --level-1-ink: var(--l1k);
  --level-2-bg: var(--l2t); --level-2-ink: var(--l2k);
  --level-3-bg: var(--l3t); --level-3-ink: var(--l3k);
  --level-4-bg: var(--l4t); --level-4-ink: var(--l4k);
  --level-5-bg: var(--l5t); --level-5-ink: var(--l5k);
  --level-outline: var(--l0s);
}
html, body { background: var(--bg); }
body { font-family: var(--ui-font); color: var(--ink); }
/* ------------------------------------------------------------- app top bar */
.app-top {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}
.brand-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--red);
  line-height: 1;
  white-space: nowrap;
}
.app-top.on-deck .brand-title { display: none; }
.app-top.on-deck .round-btn.back { display: grid; }
.app-top .round-btn.back { display: none; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.round-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line2);
  box-shadow: 0 2px 0 var(--line);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: transform .08s ease, filter .08s ease;
}
.round-btn svg { width: 22px; height: 22px; display: block; }
.round-btn:active { transform: scale(.97); filter: brightness(.92); }
.round-btn[aria-pressed="true"], .round-btn.active {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 2px 0 var(--red-edge);
}
.app-top .round-btn, .deck-page .round-btn { width: 38px; height: 38px; }
.app-top .round-btn svg { width: 20px; height: 20px; }
/* Hands-free capsule switch */
.hf-capsule {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px 0 8px;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--line2);
  box-shadow: 0 2px 0 var(--line);
  color: var(--muted);
}
.hf-capsule .hf-glyph { width: 24px; height: 24px; display: block; flex: none; }
.hf-capsule .switch {
  width: 38px; height: 22px; border-radius: 11px;
  border: 1.5px solid var(--line2);
  background: var(--bartrack);
  position: relative; flex: none;
  transition: background .15s ease, border-color .15s ease;
}
.hf-capsule .knob {
  position: absolute; top: 50%; left: 2.5px;
  width: 15px; height: 15px; margin-top: -7.5px;
  border-radius: 50%; background: var(--paper);
  box-shadow: 0 1px 2px rgba(76, 55, 30, .3);
  transition: left .15s ease;
}
.hf-capsule[aria-checked="true"] {
  color: var(--red);
  border-color: var(--red-edge);
}
.hf-capsule[aria-checked="true"] .switch {
  background: var(--red); border-color: var(--red-edge);
}
.hf-capsule[aria-checked="true"] .knob { left: 18.5px; }
.hf-capsule:active { transform: scale(.97); }
/* ---------------------------------------------------------------- Home */
.home {
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 12px 16px 20px;
  /* Same rhythm as .deck-page: 14 px between cards, everywhere on the page. */
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-empty { text-align: center; color: var(--muted); padding: 60px 0; }
.folder-list { display: flex; flex-direction: column; gap: 14px; }
.folder-card {
  background: var(--folder);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 3px 0 var(--line);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.folder-head { display: flex; align-items: center; gap: 10px; }
.folder-name-block { flex: 1; min-width: 0; }
.folder-name {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.folder-meta, .meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  min-height: 16px;
}
.meta-line { margin-top: 6px; font-size: 13px; flex-wrap: wrap; row-gap: 4px; }
/* Spec 9: the meta line wraps instead of clipping at 360 px. */
.meta-line > #deckMeta { min-width: 0; overflow-wrap: anywhere; }
.folder-meta .count, .meta-line .count { flex: none; }
.dot-sep { color: var(--muted); opacity: .8; }
.browse-link {
  border: 0;
  background: none;
  padding: 0;
  font: 700 12px/1 var(--ui-font);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  position: relative;
  white-space: nowrap;
}
.meta-line .browse-link { font-size: 13px; }
/* 36 px tap target without changing the visible text or row height. */
.browse-link::after {
  content: "";
  position: absolute;
  inset: -11px -10px;
  min-height: 36px;
}
.browse-link:active { color: var(--ink); }
/* Play buttons */
.play-all, .play-deck, .play-folder {
  flex: none;
  border-radius: 13px;
  display: grid;
  place-items: center;
  padding: 0;
  position: relative;
  transition: transform .08s ease, filter .08s ease;
}
.play-all {
  width: 42px; height: 42px;
  background: var(--red);
  border: 2.5px solid var(--red);
  color: #fff;
}
.play-all svg { width: 22px; height: 22px; }
.play-deck {
  width: 38px; height: 38px;
  background: transparent;
  border: 2.5px solid var(--red);
  color: var(--red);
  border-radius: 11px;
}
.play-deck svg { width: 20px; height: 20px; }
.play-folder {
  width: 42px; height: 42px;
  background: transparent;
  border: 2.5px solid var(--red);
  color: var(--red);
}
.play-folder svg { width: 22px; height: 22px; }
.play-all:active, .play-deck:active, .play-folder:active {
  transform: scale(.97); filter: brightness(.92);
}
.play-all:disabled, .play-deck:disabled, .play-folder:disabled {
  opacity: .45; filter: grayscale(.3);
}
/* Hands-free badge on Play buttons */
.play-badge {
  position: absolute;
  top: -7px; right: -9px;
  width: 22px; height: 20px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 2px var(--paper);
  display: grid;
  place-items: center;
  color: #fff;
}
.play-badge svg { width: 13px; height: 11px; display: block; }
.collapse-toggle {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--paper);
  border: 1.5px solid var(--line2);
  color: var(--muted);
  display: grid;
  place-items: center;
  padding: 0;
}
.collapse-toggle svg {
  width: 20px; height: 20px;
  transition: transform .2s ease;
}
.folder-card.open .collapse-toggle svg { transform: rotate(180deg); }
.folder-decks { display: flex; flex-direction: column; gap: 8px; }
.folder-card.collapsed .folder-decks { display: none; }
.deck-row2 {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 8px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  min-height: 60px;
  cursor: pointer;
}
.deck-row2:active { background: #FFFAF0; }
.deck-row2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.deck-row2-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-row2-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
}
.deck-chevron { width: 20px; height: 20px; color: var(--muted); flex: none; }
/* Level bars */
.level-bar {
  display: flex;
  width: 100%;
  background: var(--seg);
  border-radius: 4px;
  overflow: hidden;
}
.level-bar > i { display: block; height: 100%; flex: 0 0 auto; }
.level-bar.deck-level { height: 6px; margin-top: 4px; }
.folder-level { height: 8px; border-radius: 4px; background: var(--bartrack); }
.level-bar.large { height: 14px; border-radius: 7px; }
.legend-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  row-gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #5E5345;
}
.legend-row span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend-row i { width: 9px; height: 9px; border-radius: 50%; display: block; }
/* Lv badge */
.lv-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid var(--l0s);
  background: var(--l0t);
  color: var(--l0k);
  white-space: nowrap;
}
.lv-badge.level-0 { border-color: var(--l0s); background: var(--l0t); color: var(--l0k); }
.lv-badge.level-1 { border-color: var(--l1s); background: var(--l1t); color: var(--l1k); }
.lv-badge.level-2 { border-color: var(--l2s); background: var(--l2t); color: var(--l2k); }
.lv-badge.level-3 { border-color: var(--l3s); background: var(--l3t); color: var(--l3k); }
.lv-badge.level-4 { border-color: var(--l4s); background: var(--l4t); color: var(--l4k); }
.lv-badge.level-5 { border-color: var(--l5s); background: var(--l5t); color: var(--l5k); }
/* ---------------------------------------------------------------- Deck page */
.deck-view { min-height: calc(100vh - 54px); }
.deck-page {
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.deck-head-row { display: flex; align-items: center; gap: 12px; }
.deck-head-main { flex: 1; min-width: 0; }
.deck-head-main h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.continue-link {
  border: 0; background: none; padding: 0;
  font: 700 13px/1 var(--ui-font); color: var(--red);
  text-decoration: underline; text-underline-offset: 2px;
}
.deck-page .level-bar { height: 10px; border-radius: 5px; }
.card-list {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 3px 0 var(--line);
  overflow: hidden;
}
.card-list:empty { display: none; }
.deck-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  background: var(--paper);
  border-bottom: 1px solid var(--seg);
}
.deck-row:last-child { border-bottom: 0; }
.deck-drag-handle {
  border: 0; background: none; padding: 0; width: 18px; height: 24px;
  display: grid; align-content: center; gap: 3px; cursor: grab;
  color: #A89F8D;
}
.deck-drag-handle span { display: block; height: 2px; border-radius: 1px; background: currentColor; }
.deck-row-char {
  width: 48px; height: 48px;
  border: 1.5px solid var(--red);
  border-radius: 10px;
  display: grid; place-items: center;
  font: 28px/1 "LXGW WenKai", "KaiTi", "STKaiti", serif;
  color: var(--ink);
  position: relative;
  background: var(--paper);
  overflow: hidden;
}
/* dotted 田字格 guide, same faint red as the quiz card */
.deck-row-char::before, .deck-row-char::after {
  content: "";
  position: absolute;
  border-color: #E6A39D;
  opacity: .55;
  pointer-events: none;
}
.deck-row-char::before {
  inset: 0; left: 50%;
  border-left: 1px dashed #E6A39D;
  transform: translateX(-.5px);
  width: 0;
}
.deck-row-char::after {
  inset: 0; top: 50%;
  height: 0;
  border-top: 1px dashed #E6A39D;
}
.deck-row-info { min-width: 0; }
.deck-row-pinyin { font-size: 16px; font-weight: 700; line-height: 1.2; }
.deck-row-example {
  font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deck-row-arrow {
  border: 0; background: none; padding: 0;
  width: 20px; height: 20px; color: var(--muted);
  display: grid; place-items: center;
}
.deck-row-arrow svg { width: 20px; height: 20px; }
/* ---------------------------------------------------------------- Search */
.search-page { padding: 12px 16px 20px; }
.search-page-head { align-items: center; }
.search-page-head h1 { font-size: 30px; font-weight: 800; }
.search-field {
  background: var(--paper);
  border: 1.5px solid var(--line2);
  border-radius: 14px;
  box-shadow: 0 2px 0 var(--line);
}
.search-result {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 0 var(--line);
}
/* ---------------------------------------------------------------- Quiz */
.study {
  height: 100dvh;
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  overflow: hidden;
}
.study-top {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
}
.study-counter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
/* The quiz top bar reuses the Home hands-free capsule (.hf-capsule) verbatim —
   same pill, glyph and switch in both standard and hands-free mode. */
/* Star progress row */
.star-row {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  min-height: 26px;
  padding: 0 2px;
}
.star {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  position: relative;
  flex: 0 0 auto;
}
.star svg { width: 20px; height: 20px; display: block; overflow: visible; }
.star .star-shape {
  fill: none;
  stroke: #B4B2A9;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.star.done .star-shape { fill: var(--lc, #B4B2A9); stroke: var(--lc, #B4B2A9); }
.star.missed .star-shape { stroke: #D85A30; }
.star.missed::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 50%;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: #D85A30;
}
.star.current::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid #EF9F27;
  border-radius: 50%;
}
.star.current .star-shape { stroke: #B4B2A9; }
/* Card stage */
.study-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.study-card-wrap { flex: 1; min-height: 0; position: relative; }
.card-strip-viewport {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  display: flex;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.card-strip-viewport::-webkit-scrollbar { display: none; }
.card-strip-track { display: flex; width: 100%; height: 100%; }
.strip-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.strip-slide-card { width: 100%; height: 100%; display: flex; }
.strip-card {
  width: 100%;
  height: 100%;
  perspective: 1400px;
  position: relative;
  cursor: pointer;
  outline: none;
}
.strip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.strip-card.flipped .strip-card-inner { transform: rotateY(180deg); }
.strip-face {
  position: absolute;
  inset: 0;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 4px 0 var(--line);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
  overflow: hidden;
}
.strip-front { justify-content: center; padding-bottom: 84px; }
.study-char-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--muted);
}
.study-char-hint mark {
  padding: 0 2px;
  border-radius: 4px;
  background: #FBE7C4;
  color: var(--ink);
}
.strip-back {
  transform: rotateY(180deg);
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 28px;
}
.strip-card.retry-card .strip-face { border-style: dashed; }
.tianzige {
  width: 290px;
  height: 290px;
  max-width: 100%;
  position: relative;
  border: 2px solid var(--red);
  border-radius: 4px;
  display: grid;
  place-items: center;
  flex: none;
}
.tianzige::before, .tianzige::after {
  content: "";
  position: absolute;
  border-color: #E6A39D;
  opacity: .75;
}
.tianzige::before {
  left: 50%; top: 8%; bottom: 8%;
  border-left: 1.5px dashed #E6A39D;
  transform: translateX(-.75px);
}
.tianzige::after {
  top: 50%; left: 8%; right: 8%;
  border-top: 1.5px dashed #E6A39D;
  transform: translateY(-.75px);
}
.study-char {
  font: 190px/1 "LXGW WenKai", "KaiTi", "STKaiti", serif;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.study-back-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.study-back-pinyin { font-size: 34px; font-weight: 800; color: var(--red); }
.study-back-meaning { font-size: 22px; font-weight: 700; color: var(--ink); }
.strip-card .lv-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
}
/* Speaker button inside the quiz card */
.speaker-btn {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 60px; height: 60px;
  margin-left: -30px;
  border-radius: 50%;
  border: 2px solid var(--l0s);
  background: var(--l0t);
  color: var(--l0k);
  display: grid;
  place-items: center;
  z-index: 3;
}
.speaker-btn svg { width: 26px; height: 26px; }
.speaker-btn:active { transform: scale(.96); filter: brightness(.95); }
.speaker-btn.playing { animation: speaker-pulse 900ms ease-in-out infinite; }
.speaker-btn.level-0 { border-color: var(--l0s); background: var(--l0t); color: var(--l0k); }
.speaker-btn.level-1 { border-color: var(--l1s); background: var(--l1t); color: var(--l1k); }
.speaker-btn.level-2 { border-color: var(--l2s); background: var(--l2t); color: var(--l2k); }
.speaker-btn.level-3 { border-color: var(--l3s); background: var(--l3t); color: var(--l3k); }
.speaker-btn.level-4 { border-color: var(--l4s); background: var(--l4t); color: var(--l4k); }
.speaker-btn.level-5 { border-color: var(--l5s); background: var(--l5t); color: var(--l5k); }
@keyframes speaker-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.study.hands-free-mode .speaker-btn { display: none; }
/* Grade buttons */
.grade-row {
  flex: none;
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.grade-btn {
  flex: 1;
  height: 84px;
  border-radius: 18px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.grade-btn .grade-icon { width: 30px; height: 30px; display: block; }
.grade-btn.not-yet { border: 2px solid var(--amber); color: var(--amber-ink); }
.grade-btn.slow { border: 2px solid var(--line2); color: var(--ink); }
.grade-btn.got-it { border: 2px solid var(--green); color: var(--green); background: transparent; }
.grade-btn:active:not(:disabled) { transform: scale(.97); filter: brightness(.92); }
.grade-btn:disabled { opacity: .55; cursor: wait; }
/* Hands-free action row */
.hf-action-row { flex: none; display: flex; gap: 10px; }
.hf-action {
  flex: 1;
  height: 84px;
  border-radius: 18px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  border: 2px solid var(--amber);
  color: var(--amber-ink);
}
.hf-action.neutral { border-color: var(--line2); color: var(--ink); }
.hf-action-icon { width: 28px; height: 28px; }
.hf-action:active { transform: scale(.97); filter: brightness(.94); }
/* Hands-free status pill, sits inside the card */
.status-pill {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 250px;
  height: 60px;
  margin-left: -125px;
  border-radius: 30px;
  background: var(--paper);
  border: 2px solid var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  z-index: 4;
  overflow: hidden;
}
.hf-status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.hf-badge {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid; place-items: center;
  flex: none;
  box-shadow: 0 0 0 4px rgba(178, 58, 47, .18);
}
.hf-badge svg { width: 20px; height: 20px; }
.hf-status {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf-wave {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
}
.hf-wave i {
  display: block;
  width: 5px;
  border-radius: 3px;
  background: var(--red);
  animation: hf-wave 900ms ease-in-out infinite alternate;
}
.hf-wave i:nth-child(1) { height: 10px; animation-delay: 0ms; }
.hf-wave i:nth-child(2) { height: 22px; animation-delay: 120ms; }
.hf-wave i:nth-child(3) { height: 14px; animation-delay: 240ms; }
.hf-wave i:nth-child(4) { height: 26px; animation-delay: 360ms; }
.hf-wave i:nth-child(5) { height: 12px; animation-delay: 480ms; }
@keyframes hf-wave {
  from { transform: scaleY(.55); }
  to { transform: scaleY(1); }
}
.hf-checking {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700;
}
.hf-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--seg);
  border-top-color: var(--red);
  animation: spin 900ms linear infinite;
}
.hf-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.hf-feedback-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hf-feedback-icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
  font-size: 18px; font-weight: 800;
}
.hf-feedback-icon svg { width: 20px; height: 20px; }
.hf-feedback-text { min-width: 0; }
.hf-feedback-title { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-feedback-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-heard { display: none; }
.hf-replay, .hf-mini {
  border: 0; background: none; padding: 0;
  color: var(--muted); font-size: 12px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
  white-space: nowrap;
}
.hf-actions { display: flex; gap: 8px; margin-left: auto; }
.hf-teach-text {
  position: absolute; left: 50%; bottom: 92px;
  transform: translateX(-50%);
  max-width: 280px; text-align: center;
  font-size: 14px; color: var(--muted);
}
/* Hands-free mode toggles */
.study.hands-free-mode .grade-row { display: none; }
.study.hands-free-mode #hfActionRow { display: flex; }
.study:not(.hands-free-mode) .status-pill,
.study:not(.hands-free-mode) #hfActionRow { display: none; }
.study.browse-mode .grade-row,
.study.browse-mode #hfActionRow,
.study.browse-mode .study-hf-toggle { display: none; }
/* Session arrows (keep existing behavior, quieter) */
.study-arrow {
  position: absolute;
  top: calc(50% - 44px);
  width: 34px; height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 30px;
  line-height: 1;
  padding: 0;
  opacity: .45;
  z-index: 5;
}
.study-arrow.prev { left: -6px; }
.study-arrow.next { right: -6px; }
.study-arrow:disabled { opacity: .12; }
@media (hover: none) {.study-arrow { display: none; }}
/* ---------------------------------------------------------- Session done */
.study-done {
  position: fixed;
  inset: 0;
  z-index: 18;
  background: var(--bg);
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.study-done[hidden] { display: none; }
.done-top {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.done-deck-name {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  font-size: 16px; font-weight: 700;
  max-width: 60%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.done-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hero-star-wrap { width: 116px; height: 116px; position: relative; }
.hero-star { width: 116px; height: 116px; display: block; overflow: visible; }
.hero-halo { fill: #FAEEDA; transform-origin: 66px 66px; }
.hero-star-shape {
  fill: #F4B400; stroke: #C98A1E; stroke-width: 4;
  stroke-linejoin: round;
  transform-origin: 66px 66px;
}
.hero-sparkles { stroke: #EF9F27; stroke-width: 4; }
.hero-sparkles .spark { transform-origin: center; }
.done-hero h2 { margin: 0; font-size: 30px; font-weight: 800; }
.done-summary { margin: 0; font-size: 14px; color: var(--muted); }
.result-stars { padding: 0 4px; }
.result-stars .star.current::before { display: none; }
.progress-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 4px 0;
}
.ring-wrap { position: relative; width: 200px; height: 200px; flex: none; }
.done-ring { width: 200px; height: 200px; display: block; }
.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
}
.ring-center strong { font-size: 52px; font-weight: 800; line-height: 1; }
.ring-center span { font-size: 13px; font-weight: 700; color: var(--muted); }
.result-chips { display: flex; flex-direction: column; gap: 8px; }
.result-chip {
  height: 34px;
  padding: 0 13px 0 10px;
  border-radius: 12px;
  border: 1.5px solid var(--line2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 800;
  background: var(--paper);
  align-self: flex-start;
}
.result-chip svg { width: 18px; height: 18px; margin-right: 4px; }
.result-chip-count { font-size: 18px; font-weight: 800; }
.result-chip-label { font-size: 16px; font-weight: 800; }
.result-chip.got-it { background: #D7EDDF; border-color: #23784A; color: #1B5E3A; }
.result-chip.slow { background: #EADFC9; border-color: #CDBB9C; color: #2C241B; }
.result-chip.not-yet { background: #FBE7C4; border-color: #C98A1E; color: #7A4A00; }
.done-caption { text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 10px; }
.done-legend { gap: 8px; }
.done-legend .legend-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--muted); font-size: 11px; font-weight: 600;
}
.done-legend .legend-item i { width: 22px; height: 5px; border-radius: 2px; }
.done-legend .legend-item b { font-size: 14px; font-weight: 700; color: var(--ink); }
.done-spacer { flex: 1; min-height: 4px; }
.done-actions { display: flex; gap: 10px; }
.done-actions .btn-main { flex: 1.2; }
.done-actions .btn-outline { flex: 1; }
.done-actions .solo { flex: 1; }
.btn-main, .btn-outline {
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--ui-font);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.btn-main {
  background: var(--red);
  border: 2.5px solid var(--red);
  color: #fff;
}
.btn-outline {
  background: transparent;
  border: 2.5px solid var(--line2);
  color: var(--ink);
}
.btn-main svg, .btn-outline svg { width: 20px; height: 20px; }
.btn-main:active, .btn-outline:active { transform: scale(.97); filter: brightness(.92); }
/* Animation */
.hero-star.playing .hero-star-shape {
  animation: hero-pop 750ms cubic-bezier(.2, 1.4, .4, 1) both;
}
.hero-star.playing .hero-halo { animation: halo-in 500ms ease-out both; }
.hero-star.playing .spark { animation: sparkle 1.8s ease-in-out infinite; }
.hero-star.playing .spark.s2 { animation-delay: 250ms; }
.hero-star.playing .spark.s3 { animation-delay: 500ms; }
.hero-star.playing .spark.s4 { animation-delay: 750ms; }
.hero-star.landed .hero-star-shape { animation: hero-bob 2.6s ease-in-out infinite; }
.hero-star.landed .spark { animation: sparkle 1.8s ease-in-out infinite; }
.hero-star.landed .spark.s2 { animation-delay: 250ms; }
.hero-star.landed .spark.s3 { animation-delay: 500ms; }
.hero-star.landed .spark.s4 { animation-delay: 750ms; }
@keyframes hero-pop {
  0% { transform: scale(.25) rotate(-30deg); }
  60% { transform: scale(1.18) rotate(7deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes halo-in {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes sparkle {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes hero-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(2deg); }
}
.star.pop { animation: star-pop 260ms cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes star-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {.hero-star.playing .hero-star-shape,
  .hero-star.playing .hero-halo,
  .hero-star.playing .spark,
  .hero-star.landed .hero-star-shape,
  .star.pop { animation: none !important; }
.hf-wave i { animation: none; }
.strip-card-inner { transition: none; }}
/* Small screens (360 px) */
@media (max-width: 380px) {
  .brand-title { font-size: 24px; }
  .app-top { padding: 0 12px; }
  .home, .deck-page { padding-left: 12px; padding-right: 12px; }
  .study { padding-left: 12px; padding-right: 12px; }
  .study-done { padding-left: 12px; padding-right: 12px; }
  .tianzige { width: 260px; height: 260px; }
  .study-char { font-size: 170px; }
  .progress-block { gap: 14px; }
  .ring-wrap, .done-ring { width: 180px; height: 180px; }
}
.folder-admin { display: grid; gap: 8px; margin-bottom: 16px; }
.folder-admin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.folder-admin-row strong { flex: 1 1 140px; font-size: 14px; }
.folder-admin-row select { max-width: 220px; }
.folder-admin-row button {
  border: 1px solid var(--line2);
  background: transparent;
  border-radius: 10px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
}
.folder-admin-empty { color: var(--muted); font-size: 13px; }
/* --------------------------------------------- legacy app.css overrides */
.study { position: fixed; inset: 0; z-index: 35; }
.study-top { padding: 0; display: flex; }
.study-stage {
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  overflow: visible;
  touch-action: auto;
}
.study-card-wrap {
  --study-card-size: 100%;
  display: flex;
  width: 100%;
  gap: 0;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
}
.card-strip-viewport {
  --strip-vertical-pad: 0px;
  --strip-meta-space: 0px;
  width: 100%;
  height: 100%;
  touch-action: pan-x;
}
.card-strip-track {
  --strip-slide: 100%;
  padding-inline: 0;
  width: 100%;
}
.strip-slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  place-items: unset;
  scroll-snap-align: start;
}
.strip-card {
  width: 100%;
  height: 100%;
  box-shadow: none;
  border-radius: 22px;
}
.strip-face { padding: 14px; border-radius: 22px; }
.strip-card .strip-face { border-width: 1.5px; }
.tianzige {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  aspect-ratio: auto;
  width: 290px;
  height: 290px;
}
.study-char { font-size: 190px; }
.study-back-pinyin { font-size: 34px; }
.study-back-meaning { font-size: 22px; }
.deck-row-char { border-width: 1.5px; font-size: 28px; }
.deck-row2 .level-bar.deck-level { margin-top: 4px; }
@media (max-width: 380px) {.tianzige { width: 260px; height: 260px; }
.study-char { font-size: 170px; }}
.tianzige .study-char { line-height: 1; }
/* Hands-free: keep the card and status pill on screen in every state. */
.study.hands-free-mode .card-strip-viewport { visibility: visible; }
.study.hands-free-mode.hf-listening #handsFreePanel { display: flex; }
.study.hands-free-mode.hf-listening .strip-card {
  animation: none;
  box-shadow: 0 4px 0 var(--line);
}
.status-pill.feedback .hf-status-line { display: none; }
.status-pill.feedback { padding: 0 12px; }
.status-pill.feedback .hf-feedback {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
}
.status-pill.feedback .hf-feedback-main { flex: 1; min-width: 0; }
.status-pill.feedback .hf-feedback-text { flex: 1; min-width: 0; }
.status-pill.feedback .hf-feedback-icon { width: 28px; height: 28px; font-size: 15px; }
.status-pill.feedback .hf-replay { margin-left: 6px; }
/* Status text has to survive long messages inside the fixed 250x60 pill. */
.status-pill .hf-status {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.status-pill .hf-wave { margin-left: 4px; flex: none; }
.status-pill .hf-badge { flex: none; }
.study-done { align-items: stretch; }
.hero-halo { transform-origin: 50px 50px; }
.hero-star-shape { transform-origin: 50px 50px; }
.status-pill .hf-status { position: static; transform: none; }
.status-pill .hf-checking { flex-direction: row; font-size: 15px; }
/* 田字格: full-width dotted cross, resetting every inherited pseudo rule. */
.tianzige::before,
.tianzige::after {
  content: "";
  position: absolute;
  border: 0;
  background: none;
  opacity: 1;
  width: auto;
  height: auto;
  pointer-events: none;
}
.tianzige::before {
  left: 0;
  right: 0;
  top: 50%;
  bottom: auto;
  height: 0;
  border-top: 1.5px dashed #E6A39D;
  transform: translateY(-0.75px);
}
.tianzige::after {
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  width: 0;
  border-left: 1.5px dashed #E6A39D;
  transform: translateX(-0.75px);
}
.star.landed { animation: slot-land 420ms ease-out; }
@media (prefers-reduced-motion: reduce) {.star.landed { animation: none; }}
/* Deck page: one continuous card, rows divided by hairlines. */
.deck-page .card-list {
  display: block;
  gap: 0;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 3px 0 var(--line);
  overflow: hidden;
}
.deck-page .deck-row {
  border: 0;
  border-bottom: 1px solid #EADFC9;
  border-radius: 0;
  background: var(--paper);
}
.deck-page .deck-row:last-child { border-bottom: 0; }
/* Settings and Folders don't need the library tree. */
.parent.plain-tab .tree-panel { display: none; }
.parent.plain-tab .parent-layout { grid-template-columns: minmax(0, 1fr); }
.folder-admin-heading {
  margin: 8px 0 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tabs { flex-wrap: wrap; }
@media (max-width: 430px) {.tabs button { padding: 7px 6px; font-size: 11.5px; }
.folder-admin-row strong { flex: 1 1 90px; }
.folder-admin-row button { padding: 5px 7px; }}
.parent-layout { grid-template-columns: minmax(0, 1fr); }
.library-summary {
  margin: 2px 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.folder-admin + .data-note { margin-top: 18px; }
.new-field { display: flex; flex-direction: column; gap: 6px; }
.new-field-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.new-field input,
.new-select-wrap select {
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  border: 1.5px solid var(--line2);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  padding: 0 14px;
  font-family: var(--ui-font);
  font-size: 17px;
  font-weight: 600;
  outline: none;
}
.new-field input::placeholder { color: #A89F8D; font-weight: 500; }
.new-field input:focus,
.new-select-wrap select:focus {
  border: 2.5px solid var(--red);
  padding: 0 12.5px;
}
.new-field-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}
.new-select-wrap { position: relative; display: block; }
.new-select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 42px; }
.new-select-wrap > svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--muted);
  pointer-events: none;
}
.new-save {
  width: 100%;
  height: 56px;
  flex: 0 0 auto;
  border: 2.5px solid var(--red);
  border-radius: 18px;
  background: var(--red);
  color: #fff;
  font-family: var(--ui-font);
  font-size: 18px;
  font-weight: 800;
  transition: transform .08s ease, filter .08s ease;
}
.new-save:active { transform: scale(.98); filter: brightness(.92); }
.new-save:disabled { opacity: .45; }
.new-char-tile {
  align-self: center;
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 2px solid var(--red);
  border-radius: 6px;
  background: var(--paper);
  display: grid;
  place-items: center;
  position: relative;
}
.new-char-tile .tianzige {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  transform: none;
}
.new-char-tile .tianzige::before { top: 8%; bottom: 8%; opacity: .45; }
.new-char-tile .tianzige::after { left: 8%; right: 8%; opacity: .45; }
#newCharTileChar {
  position: relative;
  z-index: 1;
  font: 76px/1 "LXGW WenKai", "KaiTi", "STKaiti", serif;
  color: var(--ink);
}
.new-char-tile:empty { visibility: hidden; }
/* ------------------------------------------------------------ add sheet */
.add-sheet-overlay {
  display: flex;
  align-items: flex-end;
  padding: 0;
  background: rgba(44, 36, 27, .42);
}
.add-sheet {
  width: 100%;
  background: var(--paper);
  border-top: 1.5px solid var(--line);
  border-radius: 22px 22px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  animation: sheet-up .2s ease-out;
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.add-sheet h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}
.add-sheet-row {
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  margin-top: 8px;
  border: 2.5px solid var(--line2);
  border-radius: 16px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.add-sheet-row:first-of-type { margin-top: 0; }
.add-sheet-row:active { transform: scale(.99); filter: brightness(.96); }
.add-sheet-icon { width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
.add-sheet-icon svg { width: 26px; height: 26px; display: block; }
.add-sheet-row > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.add-sheet-row strong { font-size: 17px; font-weight: 800; line-height: 1.15; }
.add-sheet-row small { font-size: 13px; color: var(--muted); line-height: 1.25; }
/* ------------------------------------------------------------- add pages */
.add-page { padding: 12px 16px 20px; }
.add-top {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.add-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}
.add-spacer { width: 44px; height: 44px; flex: 0 0 44px; }
.add-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-top: 16px; }
.add-body { display: flex; flex-direction: column; gap: 16px; }
.add-body[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.field-counter { font-size: 12px; font-weight: 600; color: var(--muted); }
.field input {
  height: 52px;
  width: 100%;
  padding: 0 14px;
  border: 1.5px solid var(--line2);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: 600 17px/1.2 var(--ui-font);
  outline: none;
}
.field input::placeholder { color: #A89F8D; font-weight: 500; }
.field input:focus {
  border: 2.5px solid var(--red);
  padding: 0 13px;
}
.field-error { font-size: 12px; font-weight: 600; color: var(--red); }
.select-wrap { position: relative; }
.select-wrap select {
  width: 100%;
  height: 52px;
  padding: 0 42px 0 14px;
  border: 1.5px solid var(--line2);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: 600 17px/1.2 var(--ui-font);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
.select-wrap select:focus { border: 2.5px solid var(--red); }
.select-wrap > svg {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: var(--muted);
  pointer-events: none;
}
.readonly-row {
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
}
.readonly-row[hidden] { display: none; }
.readonly-row b { color: var(--ink); margin-left: 4px; }
.char-preview { display: flex; justify-content: center; padding-bottom: 4px; }
.char-preview-grid {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 2px solid var(--red);
  border-radius: 4px;
  position: relative;
}
.char-preview-grid .study-char,
.char-preview-grid > span {
  font: 76px/1 "LXGW WenKai", "KaiTi", "STKaiti", serif;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.add-footer { flex: none; padding-top: 12px; }
.btn-primary {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 18px;
  background: var(--red);
  color: #fff;
  font: 800 18px/1 var(--ui-font);
}
.btn-primary:active { transform: scale(.98); filter: brightness(.92); }
.btn-primary:disabled { opacity: .4; }
.char-toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 4;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.char-toast[hidden] { display: none; }
.folder-empty {
  padding: 6px 2px 2px;
  font-size: 14px;
  color: var(--muted);
}
.play-all:disabled { opacity: .4; }
.play-folder:disabled, .play-deck:disabled { opacity: .4; }
.level-bar[hidden], .legend-row[hidden], .folder-level[hidden] { display: none; }
.deck-page .card-list:empty { display: none; }
/* --------------------------------------------------------------- settings */
.settings-page { padding: 12px 16px 20px; }
.settings-top {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.settings-top h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}
.settings-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: 12px;
}
.settings-group { margin-bottom: 14px; }
.settings-group-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.settings-saved { font-size: 13px; font-weight: 600; color: var(--muted); }
.settings-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 2px 0 var(--line);
  overflow: hidden;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 14px;
  border-bottom: 1px solid var(--seg);
  background: var(--paper);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row-button,
.settings-row-link {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--seg);
  border-radius: 0;
  text-align: left;
  color: var(--ink);
  text-decoration: none;
  font: inherit;
}
.settings-row-button:last-child,
.settings-row-link:last-child { border-bottom: 0; }
.settings-row-button:active,
.settings-row-link:active { background: #FFFAF0; }
.settings-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 0;
}
.settings-row-label { font-size: 16px; font-weight: 600; line-height: 1.2; }
.settings-row-sub { font-size: 12px; color: var(--muted); line-height: 1.3; }
.settings-chevron {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--muted);
}
.settings-chevron svg { width: 20px; height: 20px; display: block; }
.settings-history-row {
  width: 100%;
  margin-bottom: 14px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 2px 0 var(--line);
  min-height: 68px;
  padding: 0 14px;
}
.stepper { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.stepper-btn {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line2);
  background: var(--paper);
  box-shadow: 0 2px 0 var(--line);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.stepper-btn::after { content: ""; position: absolute; inset: -5px; }
.stepper-btn:active { transform: scale(.96); filter: brightness(.94); }
.stepper-value {
  min-width: 38px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 800 17px/1 var(--ui-font);
  text-align: center;
}
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--seg);
  flex: none;
}
.segmented button {
  height: 30px;
  padding: 0 10px;
  border: 1.5px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #5E5345;
  font: 700 13px/1 var(--ui-font);
}
.segmented button.selected {
  background: var(--paper);
  border-color: var(--line2);
  box-shadow: 0 1px 3px rgba(76, 55, 30, .18);
  color: var(--ink);
}
.ui-switch {
  width: 38px;
  height: 22px;
  padding: 0;
  border-radius: 11px;
  border: 1.5px solid var(--line2);
  background: var(--track, var(--bartrack));
  position: relative;
  flex: none;
}
.ui-switch .knob {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(76, 55, 30, .3);
  transition: left .15s ease;
}
.ui-switch[aria-checked="true"] {
  background: var(--red);
  border-color: var(--red-edge);
}
.ui-switch[aria-checked="true"] .knob { left: 18px; }
.settings-audio-card { padding: 14px; }
.settings-audio-head { border-bottom: 0; padding: 0; min-height: 0; }
.audio-track {
  height: 10px;
  margin-top: 12px;
  border-radius: 5px;
  background: var(--bartrack);
  overflow: hidden;
}
.audio-fill {
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: var(--red);
  transition: width .3s ease;
}
.settings-audio-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.offline-audio-block + .offline-audio-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.offline-audio-hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.btn-outline-red {
  height: 44px;
  padding: 0 14px;
  border: 2.5px solid var(--red);
  border-radius: 14px;
  background: transparent;
  color: var(--red);
  font: 700 14px/1 var(--ui-font);
}
.btn-outline-red:active { transform: scale(.97); filter: brightness(.94); }
.btn-outline-red:disabled { opacity: .5; }
.settings-note { margin: 0 2px 12px; font-size: 13px; color: var(--muted); }
.settings-data-note { margin-top: 16px; font-size: 12px; overflow-wrap: anywhere; }
.settings-data-note code { font-size: 11px; }
.settings-mic-card { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 380px) {.settings-page { padding-left: 12px; padding-right: 12px; }
.settings-top { margin: 0 -12px; padding: 0 12px; }}
.settings-history-row { text-align: left; }
.settings-row-button .settings-row-text { text-align: left; }
.segmented button { padding: 0 8px; font-size: 12.5px; }
#settingsSubContent > .btn-outline-red { margin-top: 12px; }
.settings-scroll { overflow-anchor: none; }.hot-badge {
  display: inline-block;
  vertical-align: 1px;
  padding: 1px 6px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: var(--seg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ----------------------------------------------------- folders + confirm */
.folder-page-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--seg);
}
.folder-page-row:last-of-type { border-bottom: 0; }
.folder-page-actions { display: flex; gap: 6px; flex: none; }
.btn-outline-small {
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--line2);
  border-radius: 11px;
  background: var(--paper);
  color: var(--ink);
  font: 700 13px/1 var(--ui-font);
}
.btn-outline-small.danger { color: var(--red-edge); border-color: var(--line2); }
.btn-outline-small:disabled { opacity: .4; }
.btn-outline-small:active:not(:disabled) { transform: scale(.97); filter: brightness(.95); }
.folder-new-row {
  justify-content: flex-start;
  color: var(--red);
  font-weight: 700;
  min-height: 52px;
  border-bottom: 0;
}
.confirm-sheet-message { margin: 4px 4px 16px; font-size: 14px; color: var(--muted); }
.confirm-sheet-actions { display: flex; gap: 10px; }
.confirm-sheet-actions .btn-outline,
.confirm-sheet-actions .btn-delete { flex: 1; height: 52px; }
.btn-delete {
  border: 0;
  border-radius: 18px;
  background: var(--red-edge);
  color: #fff;
  font: 800 15px/1 var(--ui-font);
}
.btn-delete:active { transform: scale(.98); filter: brightness(.92); }
.btn-outline-grey {
  width: 100%;
  height: 48px;
  border: 2.5px solid var(--line2);
  border-radius: 16px;
  background: transparent;
  color: var(--red-edge);
  font: 700 15px/1 var(--ui-font);
}
.btn-outline-grey:active { transform: scale(.98); filter: brightness(.95); }
.add-footer { display: flex; flex-direction: column; gap: 10px; }
.card-detail-pill { margin-top: 8px; align-self: center; }
.card-detail-decks { margin-top: 4px; }
.readonly-input { opacity: .7; background: transparent !important; }
#deckPickerList { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.char-preview { flex-direction: column; align-items: center; gap: 8px; }

/* ------------------------------------------------------------ history/import */
.history-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.history-tile { background: var(--paper); border: 1.5px solid var(--line); border-radius: 18px; padding: 12px 12px 10px; box-shadow: 0 2px 0 var(--line); }
.history-tile strong { display: block; font-size: 28px; font-weight: 800; line-height: 1.1; }
.history-tile span { font-size: 12px; font-weight: 700; color: var(--muted); }
.most-missed { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px; }
.most-missed-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.most-missed-tile { width: 44px; height: 44px; border-width: 1.5px; }
.most-missed-tile span { font: 28px/1 "LXGW WenKai", "KaiTi", "STKaiti", serif; }
.most-missed-count { font-size: 11px; color: var(--muted); font-weight: 700; }
.history-filters { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }
.review-chip { height: 34px; padding: 0 12px; border: 2.5px solid var(--amber); border-radius: 999px; background: transparent; color: var(--amber-ink); font: 700 13px/1 var(--ui-font); }
.review-chip.active { background: var(--amber); color: #fff; }
.history-run-row { align-items: center; }
.history-run-side { display: flex; align-items: center; gap: 8px; flex: none; }
.history-pill { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line2); font-size: 10px; font-weight: 800; white-space: nowrap; }
.history-pill.not-finished { background: var(--seg); color: var(--muted); }
.history-pill.review { background: #FBE7C4; border-color: #C98A1E; color: #7A4A00; }
.history-pill.reviewed { background: #D7EDDF; border-color: #23784A; color: #1B5E3A; }
.import-page-card { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.import-file { display: inline-flex; align-items: center; justify-content: center; height: 44px; }
.import-page-card textarea { width: 100%; min-height: 120px; border: 1.5px solid var(--line2); border-radius: 14px; padding: 12px; background: var(--paper); font: 16px/1.4 var(--ui-font); }
.import-commit { height: 52px; flex: 1; }
.import-file-row { display: flex; gap: 10px; align-items: center; }
.history-detail-char { width: 42px; height: 42px; border: 1.5px solid var(--red); border-radius: 8px; display: grid; place-items: center; font: 24px/1 "LXGW WenKai", "KaiTi", serif; flex: none; }
.history-detail-items { margin: 12px 0; }
/* ------------------------------------------------ speech cascade settings */
.settings-select {
  height: 38px;
  max-width: 190px;
  padding: 0 8px;
  border: 1.5px solid var(--line2);
  border-radius: 11px;
  background: var(--paper);
  color: var(--ink);
  font: 600 13px/1 var(--ui-font);
}
.settings-select:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.history-cascade {
  margin: 2px 0 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #FFFAF0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.history-cascade strong { color: var(--ink); font-weight: 700; }
.history-cascade .cascade-flag { color: var(--red); font-weight: 700; }
.history-label-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.history-label-row .btn { font-size: 12px; padding: 6px 10px; }
.history-label-row .btn.active { background: var(--red); border-color: var(--red); color: #fff; }
.history-take-label { margin-top: 6px; }
.history-detail-entry { border-bottom: 1px solid var(--seg); padding-bottom: 10px; }
.history-detail-entry:last-child { border-bottom: 0; }
.history-detail-entry > .settings-row { border-bottom: 0; }
/* Inline settings help */
.settings-label-with-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.settings-info-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  flex: none;
}
.settings-info-btn svg { width: 18px; height: 18px; display: block; }
.settings-info-btn:hover { background: var(--seg); color: var(--ink); }
.settings-info-btn:active { background: var(--seg); color: var(--ink); }
.info-sheet-body {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* ------------------------------------------------------------ Hot lists */
.study-top-left,
.study-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.study-top-left { gap: 10px; }
.study-counter {
  position: static;
  transform: none;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.study-flame.filled {
  background: #FBE3DF;
  border-color: #B23A2F;
  box-shadow: 0 2px 0 #E2B3AC;
  color: #B23A2F;
}
.study-flame .flame-icon { width: 22px; height: 22px; display: block; }

/* Flame button used on deck rows */
.flame-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #A89F8D;
  display: grid;
  place-items: center;
  flex: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.flame-btn .flame-disc {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .12s ease, transform .08s ease;
}
.flame-btn .flame-icon { width: 20px; height: 20px; display: block; }
.flame-btn.filled { color: #B23A2F; }
.flame-btn.filled .flame-disc { background: #FBE3DF; }
.flame-btn:active .flame-disc { transform: scale(.94); }
.flame-btn:disabled { opacity: .5; }

/* Quick-add toast with a Change link */
.hot-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 82;
  min-height: 48px;
  padding: 4px 6px 4px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #2C241B;
  color: #FFFDF7;
  border-radius: 16px;
  box-shadow: var(--shadow-strong);
  animation: hot-toast-in .16s ease-out;
}
.hot-toast[hidden] { display: none; }
@keyframes hot-toast-in { from { opacity: 0; transform: translateY(8px); } }
.hot-toast-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.hot-toast-change {
  flex: none;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #F4C27A;
  font-size: 14px;
  font-weight: 800;
}
.hot-toast-change:active { background: rgba(255, 253, 247, .1); }

/* Post-Not-yet offer, inside the bottom of the card */
.hot-offer {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  z-index: 6;
  background: #2C241B;
  color: #FFFDF7;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  animation: hot-toast-in .16s ease-out;
}
.hot-offer[hidden] { display: none; }
.hot-offer-main {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
}
.hot-offer-flame { width: 20px; height: 20px; flex: none; color: #F4C27A; display: grid; place-items: center; }
.hot-offer-flame svg { width: 20px; height: 20px; display: block; }
.hot-offer-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.hot-offer-other {
  flex: none;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #DDCFB8;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hot-offer-add {
  flex: none;
  height: 44px;
  min-width: 64px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: #B23A2F;
  color: #FFFDF7;
  font-size: 15px;
  font-weight: 800;
}
.hot-offer-add:active { filter: brightness(.92); }
.hot-offer-add:disabled { opacity: .6; }
.hot-offer-countdown {
  height: 3px;
  background: #5E5345;
}
.hot-offer-countdown i {
  display: block;
  height: 100%;
  width: 100%;
  background: #F4C27A;
  transform-origin: left center;
}

/* Session complete: add missed cards */
.done-hotlist-btn {
  width: 100%;
  height: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2.5px solid #B23A2F;
  border-radius: 16px;
  background: transparent;
  color: #B23A2F;
  font-size: 16px;
  font-weight: 800;
}
.done-hotlist-btn svg,
.done-hotlist-flame svg { width: 20px; height: 20px; display: block; }
.done-hotlist-flame { width: 20px; height: 20px; display: grid; place-items: center; }
.done-hotlist-btn:active:not(:disabled) { transform: scale(.98); filter: brightness(.95); }
.done-hotlist-btn:disabled {
  border-color: var(--line2);
  color: var(--muted);
  opacity: 1;
}

/* Picker sheet */
.hotlist-sheet {
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  padding-right: 16px;
}
.hotlist-grab {
  width: 40px;
  height: 5px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #DDCFB8;
  flex: none;
}
.hotlist-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  margin-bottom: 10px;
}
.hotlist-tile {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  font: 28px/1 "LXGW WenKai", "KaiTi", "STKaiti", serif;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
}
.hotlist-head-text { min-width: 0; }
.hotlist-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hotlist-head p {
  margin: 2px 0 0;
  font-size: 13px;
  color: #6E6253;
}
.hotlist-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  /* Keep the scrollbar from clipping the first column on either side. */
  direction: ltr;
  scrollbar-gutter: stable both-edges;
  padding-inline: 2px;
}
.hotlist-item {
  width: 100%;
  min-height: 60px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.hotlist-item:last-child { border-bottom: 0; }
.hotlist-item.is-last { border-bottom: 0; }
.hotlist-item:active { background: #FFFAF0; }
.hotlist-icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: #F1EFE8;
  color: #6E6253;
  display: grid;
  place-items: center;
}
.hotlist-icon svg { width: 20px; height: 20px; display: block; }
.hotlist-item.ticked .hotlist-icon { background: #FBE3DF; color: #B23A2F; }
.hotlist-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hotlist-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hotlist-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hotlist-count { font-size: 13px; color: #6E6253; }
.hotlist-tag {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  background: #FBE7C4;
  color: #7A4A00;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}
.hotlist-check {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  border: 2px solid #CDBB9C;
  display: grid;
  place-items: center;
  color: transparent;
}
.hotlist-check svg { width: 18px; height: 18px; display: block; }
.hotlist-item.ticked .hotlist-check {
  background: #23784A;
  border-color: #23784A;
  color: #FFFDF7;
}
.hotlist-new {
  width: 100%;
  min-height: 60px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 2px;
  border: 0;
  border-radius: 12px;
  background: #EFE5CF;
  margin-top: 8px;
  color: #6E6253;
  text-align: left;
  font-size: 17px;
  font-weight: 700;
}
.hotlist-new-icon {
  width: 40px;
  height: 40px;
  flex: none;
  margin-left: 2px;
  border-radius: 12px;
  background: rgba(255, 253, 247, .6);
  display: grid;
  place-items: center;
  color: #6E6253;
  font-size: 24px;
  font-weight: 600;
}
.hotlist-new-form {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 2px;
  margin-top: 8px;
}
.hotlist-new-row { display: flex; gap: 8px; }
.hotlist-new-row input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--line2);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
}
.hotlist-new-row input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.hotlist-new-row button {
  flex: none;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: #B23A2F;
  color: #FFFDF7;
  font-size: 15px;
  font-weight: 800;
}
.hotlist-new-row button:disabled { opacity: .5; }
.hotlist-error { font-size: 13px; font-weight: 600; color: #8F2C23; }
.hotlist-hint {
  flex: none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #F5EDDD;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}
.hotlist-hint strong { font-weight: 800; }
.hotlist-empty {
  padding: 20px 8px;
  text-align: center;
  font-size: 14px;
  color: #6E6253;
}
.hotlist-done {
  flex: none;
  width: 100%;
  height: 56px;
  margin-top: 12px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 900;
  background: #B23A2F;
  border: 2.5px solid #B23A2F;
  color: #FFFDF7;
}
/* Keep the quick-add toast clear of the grade buttons and the done actions */
.hot-toast.on-study { bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
.hot-toast.on-done { bottom: calc(148px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  .deck-row {
    grid-template-columns: 44px minmax(0, 1fr) auto 44px;
    gap: 8px;
    padding: 8px;
  }
  .deck-row-char { width: 44px; height: 44px; font-size: 26px; }
}

/* ------------------------------------------------------------ smart lists */
.hotlists-card {
  background: var(--folder);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 3px 0 var(--line);
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hotlists-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
}
.hotlists-head-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.hotlists-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.hotlists-count { font-size: 12px; font-weight: 600; color: var(--muted); }
.hotlists-rows { display: flex; flex-direction: column; gap: 8px; }
.hotlists-card.collapsed .hotlists-rows { display: none; }
.hotlists-card.open .collapse-toggle svg { transform: rotate(180deg); }
.hotlists-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
}
.hotlists-row:active { background: #FFFAF0; }
.hotlists-main { flex: 1; min-width: 0; }
.hotlists-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hotlists-name {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smart-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: #E6F1FB;
  border: 1px solid #B5D4F4;
  color: #0C447C;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}
.hotlists-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Smart list page */
.smart-page { padding: 12px 16px 20px; }
.smart-top {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.smart-top-title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
}
.smart-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-top: 10px; }
.smart-head { display: flex; align-items: center; gap: 12px; padding: 4px 2px 12px; }
.smart-play { width: 42px; height: 42px; }
.smart-head-text { min-width: 0; }
.smart-name {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smart-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.smart-banner {
  background: #E6F1FB;
  border: 1.5px solid #B5D4F4;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
  color: #0C447C;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.smart-empty {
  padding: 28px 8px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.smart-reason {
  font-size: 12px;
  font-weight: 600;
  color: #7A4A00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Builder */
.smart-templates { display: flex; flex-wrap: wrap; gap: 8px; }
.smart-chip {
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid var(--line2);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.smart-chip.active { background: #2C241B; border-color: #2C241B; color: #FFFDF7; }
.smart-match-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}
.smart-token {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--line2);
  background: #F5EDDD;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.smart-token-field {
  background: #E6F1FB;
  border-color: #B5D4F4;
  color: #0C447C;
}
.smart-token:active { filter: brightness(.96); }
.smart-rules { display: flex; flex-direction: column; gap: 8px; }
.smart-rules-empty { margin: 0; font-size: 13px; color: var(--muted); }
.smart-join {
  padding-left: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #8A7E6C;
}
.smart-rule {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 8px 10px 12px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 3px 0 var(--line);
}
.smart-rule-sentence {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.smart-rule-remove {
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}
.smart-rule-remove:active { background: var(--active); color: var(--red); }
.smart-add-rule {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed var(--line2);
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}
.smart-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #EFE5CF;
}
.smart-preview-count { flex: none; font-size: 14px; font-weight: 800; }
.smart-preview-chars { display: flex; flex-wrap: wrap; gap: 4px; }
.smart-preview-char {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  font: 16px/1 "LXGW WenKai", "KaiTi", "STKaiti", serif;
}

/* Rule sheet */
.rule-sheet { max-height: 90dvh; display: flex; flex-direction: column; }
.rule-sheet h2 { margin-bottom: 4px; }
.rule-sheet-sub {
  margin: 0 0 10px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.rule-sheet-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rule-sheet-groups { display: flex; flex-direction: column; }
.rule-sheet-label {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rule-sheet-label:first-child { margin-top: 0; }
.rule-sheet-row {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.rule-sheet-row:active { background: #FFFAF0; }
.rule-sheet-icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: #E6F1FB;
  color: #0C447C;
  display: grid;
  place-items: center;
}
.rule-sheet-icon svg { width: 20px; height: 20px; display: block; }
.rule-sheet-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rule-sheet-name { font-size: 16px; font-weight: 700; }
.rule-sheet-example { font-size: 13px; color: var(--muted); }
.rule-sheet-empty {
  padding: 24px 8px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.rule-choices { display: flex; flex-direction: column; }
.rule-choice {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.rule-choice:last-child { border-bottom: 0; }
.rule-choice:active { background: #FFFAF0; }
.rule-choice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rule-choice-name { font-size: 16px; font-weight: 600; }
.rule-choice-sub { font-size: 12px; color: var(--muted); }
.rule-choice-mark {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  border: 2px solid #CDBB9C;
}
.rule-choice-mark.multi { border-radius: 7px; }
.rule-choice.on .rule-choice-mark { border-color: #0C447C; background: #0C447C; }
.rule-choice.on .rule-choice-mark:not(.multi)::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
}
.rule-choice.on .rule-choice-mark.multi::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.rule-sheet-done { margin-top: 12px; }
.smart-token-static {
  display: inline-flex;
  align-items: center;
  cursor: default;
  background: #E6F1FB;
  border-color: #B5D4F4;
  color: #0C447C;
}
.smart-delete-btn {
  width: 100%;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--red);
  font-size: 15px;
  font-weight: 800;
}
.smart-delete-btn:active { opacity: .7; }
#smartDraftName { height: 48px; }
.smart-empty p { margin: 0 0 6px; }

/* Hot list edit sheet (Spec 9) */
.hotlist-edit-sheet .field { margin-top: 12px; }
.hotlist-delete-btn {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--red);
  font-size: 15px;
  font-weight: 800;
}
.hotlist-delete-btn:active { opacity: .7; }