/* ═══════════════════════════════════════════════════════════════════
   CAMVOCAB · REFINE LAYER  (v4.8.0)
   Loads LAST, after premium.css. Pure additive polish — touches none of
   the existing three stylesheets, so deleting this one file fully reverts.

   Direction (locked 2026-06): "A · 暖象牙 + 靛蓝"
     · Warm-ivory neutral canvas (cold blue-gray → warm ivory) = the main
       lever for a more premium feel. Applied to LIGHT mode only.
     · Keep indigo brand accent, slightly deepened. Scoped to the default
       indigo palette so the royal/emerald switcher is never broken.
     · One warm "delight" token (--joy, peach) reserved for reward /
       completion / celebration moments — never for everyday chrome.

   Sections:
     1. Color foundation (warm neutrals + deepened indigo + --joy)
     2. Dark-mode consistency fixes
     3. Listening: unit accordions + mini-player
     4. Wide-screen / Home right rail
     5. Mobile refinement
     6. Delight: celebration, skeletons, friendly empty states
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   0 · BRAND — Aivia Academy logo tile (replaces the old "CV" square)
   ───────────────────────────────────────────────────────────────────── */
.brand-logo {
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
.brand-logo::before, .brand-logo::after { content: none !important; display: none !important; }
.brand-logo svg { width: 100% !important; height: 100% !important; display: block; }

/* ─────────────────────────────────────────────────────────────────────
   2 · DARK-MODE CONSISTENCY
   ───────────────────────────────────────────────────────────────────── */

/* The Home greeting strip hard-codes a light gradient overlay on top of
   --surface (premium.css:963). In light mode that reads white; in dark mode
   the white overlay sat on the dark surface and produced a glaring white
   block. Re-tint per mode. */
html:not(.cv-dark) .home-greeting-strip {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(250, 247, 241, 0.82)),
    var(--surface) !important;
}
html.cv-dark .home-greeting-strip {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    var(--surface) !important;
  border-color: var(--hairline) !important;
}

/* Hero primary action button is hard-coded white; keep it readable as an
   accent button when the surrounding context is itself dark. */
html.cv-dark .hero-actions .primary-action {
  background: var(--accent) !important;
  color: #fff !important;
}

/* styles.css hard-codes rgba(255,255,255,.74) on many cards/rows/pills. That's
   fine on a light canvas but glares as a near-white block in dark mode (e.g. the
   assignment cards on 全部作业, the unit pills, reading cards). Re-tint to the dark
   surface so dark mode is uniformly dark. */
html.cv-dark .search-box,
html.cv-dark .unit-pill,
html.cv-dark .assignment-history-row,
html.cv-dark .ai-task,
html.cv-dark .reading-task-card,
html.cv-dark .reading-card,
html.cv-dark .admin-row,
html.cv-dark .reading-practice-card,
html.cv-dark .reading-history-metrics article,
html.cv-dark .student-detail-card {
  background: var(--surface) !important;
}
html.cv-dark .unit-pill:has(input:checked) { background: var(--accent-soft) !important; }
/* styles.css also hard-codes rgba(255,255,255,.62) on settings rows / daily sections,
   and #f7fafc on the teacher 完成情况 summary bar — both glared white in dark mode. */
html.cv-dark .settings-row,
html.cv-dark .setting-check,
html.cv-dark .settings-note,
html.cv-dark .daily-plan-stat,
html.cv-dark .daily-homework-section,
html.cv-dark .daily-learning-section {
  background: var(--surface-2) !important;
}
html.cv-dark .assignment-report summary {
  background: var(--surface-2) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}
html.cv-dark .assignment-report[open] summary { background: var(--accent-soft) !important; }

/* The 词汇作业 word-selection picker (老师工作台 → 词汇作业 → 章节单词) was never re-tinted
   for dark mode. Three hard-coded near-white surfaces in styles.css glared / went
   illegible against the dark canvas:
     · .vocab-picker-box   rgba(247,250,252,.82)  (styles.css:3509) — the whole container,
                            with its --ink heading "章节单词" turning near-white-on-near-white;
     · .vocab-word-option  #fff / #eef6ff(.selected) (styles.css:3550) — each word card,
                            with the headword's light --ink (#f3f5f8) effectively invisible;
     · .vocab-picker-empty #fff (styles.css:3635) — the "no matches" placeholder.
   Re-tint all three to the dark surfaces (container --surface-2, cards/placeholder --surface,
   matching this file's section-vs-card convention). The light --ink heading/headword then
   read as intended; POS/gloss/hint use --muted #8a93a3, which already reads on both. */
html.cv-dark .vocab-picker-box {
  background: var(--surface-2) !important;
  border-color: var(--hairline) !important;
}
html.cv-dark .vocab-picker-empty {
  background: var(--surface) !important;
}
html.cv-dark .vocab-word-option {
  background: var(--surface) !important;
  border-color: var(--hairline) !important;
}
html.cv-dark .vocab-word-option:hover {
  border-color: var(--accent-edge) !important;
}
html.cv-dark .vocab-word-option.selected {
  background: var(--accent-soft) !important;
  border-color: var(--accent-edge) !important;
  box-shadow: inset 0 0 0 1px var(--accent-edge) !important;
}
html.cv-dark .vocab-word-main strong { color: var(--ink) !important; }
html.cv-dark .vocab-word-option .vocab-word-number {
  background: var(--surface-3) !important;
  color: var(--ink-2) !important;
}
html.cv-dark .vocab-word-option.selected .vocab-word-number {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────
   4 · WIDE-SCREEN / HOME — use the horizontal space
   (the Today content was capped at 760px while the metric row spanned full
   width, leaving a large right gutter on desktop)
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 1181px) {
  /* Desktop Home becomes two columns: the app's content (left) + a sticky
     rail (right) that uses the space the old layout left empty. */
  body[data-view="today"] #view-today {
    max-width: 1180px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 24px !important;
    align-items: start !important;
  }
  body[data-view="today"] .today-focus-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0;
  }
  body[data-view="today"] .today-plan-card { width: 100% !important; }
  body[data-view="today"] .cv-home-rail { display: grid; }
  /* let the three progress cards breathe a little more on wide screens */
  .home-progress-cards { gap: 12px !important; }
}

/* Home right rail (injected by refine.js).
   Hidden by default → only the wide-screen Today rule above turns it on, so
   the mobile Home stays a single clean column with nothing extra. */
.cv-home-rail {
  display: none;
  position: sticky;
  top: 96px;
  gap: 12px;
  align-content: start;
}
.cv-rail-card {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: 16px;
  padding: 16px;
}
.cv-rail-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.cv-rail-quote {
  background:
    radial-gradient(120% 90% at 100% 0%, var(--joy-soft), transparent 68%),
    var(--surface);
}
.cv-rail-quote .cv-rail-eyebrow { color: var(--joy-ink); }
.cv-rail-quote-text {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 800;
}
.cv-rail-streak {
  background:
    radial-gradient(120% 90% at 0% 0%, var(--accent-soft), transparent 70%),
    var(--surface);
}
.cv-rail-streak .cv-rail-eyebrow { color: var(--accent-ink); }
.cv-streak-big { display: flex; align-items: baseline; gap: 8px; }
.cv-streak-big b {
  font-size: 34px;
  line-height: 1;
  font-weight: 850;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cv-streak-big span { font-size: 12px; color: var(--muted); font-weight: 800; }
.cv-streak-sub { margin-top: 8px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.cv-rail-streak-start .cv-streak-sub { margin-top: 4px; }

/* mini review flashcard in the rail */
.cv-rail-review .cv-rail-eyebrow { color: var(--accent-ink); justify-content: flex-start; }
.cv-rev-tag {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--joy-soft);
  color: var(--joy-ink);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.cv-rev-card {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}
.cv-rev-inner {
  position: relative;
  min-height: 140px;
  transition: transform 0.55s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.cv-rev-card.revealed .cv-rev-inner { transform: rotateY(180deg); }
.cv-rev-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 14px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background: var(--surface-2);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cv-rev-card:hover .cv-rev-face { border-color: var(--accent-edge); }
.cv-rev-face-back { transform: rotateY(180deg); background: var(--surface); }
.cv-rev-word {
  font-size: 23px;
  font-weight: 850;
  color: var(--ink);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.cv-rev-pos { margin-top: 5px; font-size: 11px; color: var(--muted); font-weight: 700; }
.cv-rev-hint { margin-top: 12px; font-size: 11px; color: var(--muted-2); }
.cv-rev-zh { font-size: 17px; font-weight: 850; color: var(--accent-ink); line-height: 1.25; overflow-wrap: anywhere; }
.cv-rev-ex {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html.cv-reduce-motion .cv-rev-inner { transition: none; }
@media (prefers-reduced-motion: reduce) { .cv-rev-inner { transition: none; } }
.cv-rev-actions { display: flex; gap: 8px; margin-top: 12px; }
.cv-rev-btn {
  flex: 1;
  padding: 9px 10px;
  border-radius: 11px;
  border: 1px solid var(--hairline-soft);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s var(--ease, ease), color 0.16s var(--ease, ease), border-color 0.16s var(--ease, ease);
}
.cv-rev-btn:hover { background: var(--surface); border-color: var(--accent-edge); }
.cv-rev-go { background: var(--accent); color: #fff; border-color: transparent; }
.cv-rev-go:hover { background: var(--accent-press); color: #fff; }

.cv-rail-actions { display: grid; gap: 8px; padding: 12px; }
.cv-rail-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background 0.18s var(--ease, ease), border-color 0.18s var(--ease, ease), transform 0.18s var(--ease, ease);
}
.cv-rail-link:hover {
  background: var(--surface);
  border-color: var(--accent-edge);
  transform: translateY(-1px);
}
.cv-rail-ic {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}
.cv-rail-ic .ic { width: 19px; height: 19px; }
.cv-rail-tx { min-width: 0; }
.cv-rail-tx strong { display: block; font-size: 13.5px; color: var(--ink); font-weight: 800; }
.cv-rail-tx small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-rail-arrow { color: var(--muted-2); line-height: 1; display:inline-flex; }
.cv-rail-arrow .ic { width:16px; height:16px; }
.cv-rev-next .ic { width:14px; height:14px; }

/* Empty-state mascot host (Rive, desktop only — injected by refine.js). */
.cv-mascot {
  display: grid;
  place-items: center;
  width: 152px;
  height: 152px;
  margin: 0 auto 8px;
}
.cv-mascot canvas { width: 152px; height: 152px; }

/* ─────────────────────────────────────────────────────────────────────
   3 · LISTENING — calmer long list, clearer now-playing, section rhythm
   ───────────────────────────────────────────────────────────────────── */

/* Row: subtle hover lift + the play affordance fills with accent on hover. */
.book-audio-row {
  transition: transform 0.18s var(--ease, ease), box-shadow 0.18s var(--ease, ease),
              border-color 0.18s var(--ease, ease), background 0.18s var(--ease, ease) !important;
}
@media (hover: hover) {
  .book-audio-row:hover {
    transform: translateY(-1px);
    border-color: var(--accent-edge) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .book-audio-row:hover .book-audio-play {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: transparent !important;
  }
}
.book-audio-play { transition: transform 0.14s var(--ease, ease), background 0.14s, color 0.14s !important; }
.book-audio-play:active { transform: scale(0.9); }
.book-audio-row.active { box-shadow: inset 0 0 0 1px var(--accent-edge), var(--shadow-sm) !important; }

/* Now-playing card sticks just under the (sticky) topbar while you scroll. */
.listen-player-card {
  position: sticky !important;
  top: 101px !important;                /* flush under the desktop topbar (101px tall) */
  z-index: 18 !important;
  box-shadow: var(--shadow-lg) !important;
  /* Opaque base under the tinted gradient so the scrolling list never bleeds through. */
  background: linear-gradient(135deg, var(--accent-soft-2), var(--surface)), var(--surface) !important;
}
@media (max-width: 768px) {
  /* mobile topbar stacks the search onto a 2nd row → it is 141px tall */
  .listen-player-card { top: 141px !important; }
}

/* Track-range section headers (inserted by refine.js into the grid). */
.cv-listen-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 2px 2px;
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cv-listen-divider:first-child { margin-top: 2px; }
.cv-listen-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline-soft);
}
.cv-listen-divider .cv-div-book {
  color: var(--ink);
  font-weight: 850;
}
.cv-listen-divider .cv-div-count {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
   5 · MOBILE REFINEMENT
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  /* protect content from notches on the sides (bottom already handled) */
  .main {
    padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
  }
  /* active bottom-tab gets a clear pill behind its icon */
  .mobile-tab .mt-icon {
    transition: background 0.2s var(--ease, ease), transform 0.2s var(--ease, ease);
    border-radius: 13px;
    padding: 5px 12px;
    position: relative;
  }
  /* W2.5 教师端「批改作业」待批角标 */
  .mobile-tab .mt-badge {
    position: absolute;
    top: -4px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 99px;
    background: #e11d48;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
  }
  .mobile-tab .mt-badge[hidden] { display: none; }
  .mobile-tab.active .mt-icon,
  .mobile-tab.sheet-active .mt-icon {
    background: var(--accent-soft);
    transform: translateY(-1px);
  }
  .mobile-tab.active { color: var(--accent-ink) !important; }
  /* a touch more breathing room inside cards on phones */
  .surface-card { padding: 20px !important; }
  .book-audio-row { min-height: 64px; }
}

@media (max-width: 560px) {
  /* The topbar felt cramped because the redundant "词汇搜索" label pill and the
     "深色" toggle text competed with the input. Drop both and let the search
     field own the row — clearer and fully usable. */
  .search-box #searchLabel { display: none !important; }
  .search-box input { width: 100% !important; min-width: 0 !important; opacity: 1 !important; }
  .cv-theme-toggle span { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   6 · DELIGHT — skeletons, completion celebration, friendlier empty states
   ───────────────────────────────────────────────────────────────────── */

/* Loading shimmer overlay (applied by refine.js to loading cards). */
@keyframes cv-shimmer { 0% { background-position: -160% 0; } 100% { background-position: 160% 0; } }
.cv-loading-shimmer { position: relative; overflow: hidden; }
.cv-loading-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, 0.5) 50%, transparent 68%);
  background-size: 200% 100%;
  animation: cv-shimmer 1.25s linear infinite;
  pointer-events: none;
}
html.cv-dark .cv-loading-shimmer::after {
  background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, 0.07) 50%, transparent 68%);
  background-size: 200% 100%;
}

/* Completion celebration: pop the result number + a confetti burst. */
@keyframes cv-pop { 0% { transform: scale(0.62); opacity: 0; } 55% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.cv-celebrate-pop { animation: cv-pop 0.62s var(--ease, ease) both; display: inline-block; }

.cv-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  overflow: hidden;
}
.cv-confetti i {
  position: absolute;
  top: -14px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
  animation: cv-fall var(--d, 1.5s) var(--ease, cubic-bezier(0.2, 0.6, 0.2, 1)) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes cv-fall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate3d(var(--x, 0), 108vh, 0) rotate(var(--r, 540deg)); opacity: 0.95; }
}

/* Warmer, friendlier empty state — peach wash + delight-toned sparkle. */
html:not(.cv-dark) .empty-state-card {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--joy-soft), transparent 70%),
    var(--surface) !important;
}
.empty-state-card .icon,
.empty-state-card .icon .ic { color: var(--joy-ink) !important; }
.empty-state-card .icon {
  animation: cv-empty-bob 3.4s var(--ease, ease) infinite;
}
@keyframes cv-empty-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Always honour reduced-motion. */
html.cv-reduce-motion .cv-confetti,
html.cv-reduce-motion .empty-state-card .icon { animation: none !important; }
html.cv-reduce-motion .cv-celebrate-pop { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cv-confetti { display: none !important; }
  .empty-state-card .icon { animation: none !important; }
  .cv-celebrate-pop { animation: none !important; }
}

/* ============================================================
   7. Referral / 邀请有礼 — share view, poster, landing banner
   ============================================================ */
.cv-ref-wrap { display: flex; flex-direction: column; gap: 16px; }

.cv-ref-hero {
  background:
    radial-gradient(130% 120% at 0% 0%, var(--accent-soft), transparent 60%),
    var(--surface) !important;
}
.cv-ref-hero h2 { margin: 6px 0 6px; }
.cv-ref-hero .muted { max-width: 56ch; }

.cv-ref-stat-row { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.cv-ref-stat {
  flex: 1 1 130px; min-width: 120px;
  background: var(--surface-2);
  border-radius: var(--radius, 16px);
  padding: 14px 16px;
}
.cv-ref-stat-num {
  font-size: 28px; font-weight: 900; line-height: 1; color: var(--accent-ink);
  display: flex; align-items: baseline; gap: 4px;
}
.cv-ref-stat-num small { font-size: 13px; font-weight: 700; color: var(--muted); }
.cv-ref-stat-lab { font-size: 13px; margin-top: 6px; }

.cv-ref-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px; }
@media (max-width: 860px) { .cv-ref-grid { grid-template-columns: 1fr; } }

.cv-ref-code-row { display: flex; align-items: center; gap: 16px; margin: 6px 0 12px; }
.cv-ref-code-box { flex: 1; min-width: 0; }
.cv-ref-label { font-size: 12px; }
.cv-ref-code {
  font-size: 30px; font-weight: 900; letter-spacing: 3px; color: var(--accent-ink);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.cv-ref-qr {
  width: 104px; height: 104px; border-radius: 12px; background: #fff;
  padding: 6px; box-shadow: var(--shadow-sm); flex: 0 0 auto;
}
.cv-ref-link {
  font-size: 12px; color: var(--muted); word-break: break-all;
  background: var(--surface-2); border-radius: 10px; padding: 8px 10px; margin-bottom: 12px;
}
.cv-ref-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-ref-hint { font-size: 12px; margin-top: 12px; line-height: 1.6; }

.cv-ref-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cv-ref-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--line, rgba(0,0,0,0.06));
}
.cv-ref-list li:last-child { border-bottom: 0; }
.cv-ref-ava {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.cv-ref-rank {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  background: var(--joy-soft); color: var(--joy-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px;
}
.cv-ref-li-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-ref-li-date { font-size: 12px; flex: 0 0 auto; }
.cv-ref-empty { display: block; border: 0 !important; line-height: 1.7; padding: 12px 4px !important; }
.cv-ref-locked { text-align: center; padding: 36px 24px !important; }

.cv-admin-referral .cv-ref-stat-row { margin-top: 6px; }
.cv-admin-ref-top { margin-top: 14px; }
.cv-admin-ref-top .eyebrow { margin-bottom: 4px; }

/* Reward toast inside the referral view. */
.cv-ref-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 700;
  padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 9000;
}
.cv-ref-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Poster preview modal. */
.cv-poster-modal {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(20, 18, 32, 0.62);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cv-poster-box {
  position: relative; width: min(360px, 92vw);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.cv-poster-tip { color: #fff; font-size: 13px; text-align: center; margin: 0; opacity: 0.92; line-height: 1.6; }
.cv-poster-img { width: 100%; border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,0.4); }
.cv-poster-dl { width: 100%; justify-content: center; }
.cv-poster-close {
  position: absolute; top: -10px; right: -10px; width: 34px; height: 34px;
  border-radius: 50%; border: 0; background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow);
}
.cv-poster-close .ic { width: 18px; height: 18px; }

/* ?ref= landing banner on the auth screen. */
.referral-landing {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(120deg, var(--accent-soft), var(--joy-soft));
  border: 1px solid var(--accent-edge);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 16px;
}
.referral-landing.hidden { display: none; }
.referral-landing-badge {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.referral-landing-badge .ic { width: 20px; height: 20px; }
.referral-landing-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.referral-landing-text strong { font-size: 14px; color: var(--accent-ink); line-height: 1.3; }
.referral-landing-text span { font-size: 12px; color: var(--ink-2); }

/* Auth story value props (landing copy). */
.auth-feature-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.auth-feature-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.auth-feature-list .ic { width: 18px; height: 18px; opacity: 0.92; flex: 0 0 auto; }
.auth-coverage { margin-top: 16px; font-size: 12px; opacity: 0.8; letter-spacing: 0.2px; }

/* Registration routing: commercial-style role/path selection without a long form. */
.auth-register-chooser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.auth-choice-card {
  min-width: 0;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s var(--ease, ease), background .16s var(--ease, ease), box-shadow .16s var(--ease, ease), transform .12s var(--ease, ease);
}

.auth-choice-card strong,
.auth-choice-card span {
  display: block;
  min-width: 0;
}

.auth-choice-card strong {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.25;
  color: var(--ink);
}

.auth-choice-card span {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

.auth-choice-card.active {
  border-color: var(--accent-edge);
  background: var(--accent-soft);
  box-shadow: 0 10px 24px rgba(91, 79, 214, .10);
}

.auth-choice-card.active strong { color: var(--accent-ink); }

.auth-choice-card:active { transform: scale(.98); }

.auth-inline-status {
  padding: 10px 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
}

.auth-inline-status.good {
  border-color: rgba(26, 156, 82, .22);
  background: var(--green-soft);
  color: var(--green-ink);
}

.auth-inline-status.bad {
  border-color: rgba(224, 56, 43, .22);
  background: var(--red-soft);
  color: var(--red-ink);
}

/* Dark-mode tuning. */
html.cv-dark .cv-ref-stat,
html.cv-dark .cv-ref-link { background: var(--surface-3); }
html.cv-dark .cv-ref-qr { background: #fff; }
html.cv-dark .referral-landing {
  background: linear-gradient(120deg, var(--accent-soft), rgba(245, 158, 107, 0.12));
  border-color: var(--accent-edge);
}
html.cv-dark .referral-landing-text strong { color: var(--accent-2); }

@media (max-width: 560px) {
  .auth-register-chooser { grid-template-columns: 1fr; gap: 7px; }
  .auth-choice-card {
    min-height: 64px;
    padding: 10px 12px;
  }
  .auth-choice-card strong { font-size: 13px; }
  .auth-choice-card span { font-size: 11px; }
  .cv-ref-code { font-size: 26px; letter-spacing: 2px; }
  .cv-ref-qr { width: 88px; height: 88px; }
  .cv-ref-actions .primary-action,
  .cv-ref-actions .secondary-action { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   8. Mobile compaction (<=560px) — one-screen learning
   Kids-first: cut wasted space on Word / Listen / Read / Writing so a
   child can learn without hunting and scrolling. Targets the exact
   spacing sources that made each view tall.
   ============================================================ */
@media (max-width: 560px) {
  /* slightly tighter cards across the learning views (was 20px @1180) */
  .surface-card { padding: 16px !important; }

  /* ---------- Word (study): compact, friendly mobile card ----------
     Phones render a dedicated card (.cv-wc-m) via flashcardHtmlMobile — Chinese
     + icon labels, no English cluster headers. Desktop keeps its full rich card. */
  .word-card.cv-wc-m {
    min-height: 0 !important; padding: 14px !important; gap: 10px !important;
    display: flex !important; flex-direction: column; text-align: center;
  }
  .cv-wc-m .word-meta { justify-content: center !important; gap: 5px !important; }
  .cv-wc-m .word-title { font-size: 30px !important; line-height: 1.08 !important; margin: 2px 0 !important; }
  .cv-wc-say {
    display: inline-flex; align-items: center; gap: 6px; align-self: center;
    padding: 8px 18px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--accent); color: #fff; font-weight: 800; font-size: 14px;
  }
  .cv-wc-say .ic { width: 18px; height: 18px; }
  .cv-wc-say:active { transform: scale(0.97); }
  .cv-wc-m .word-meaning {
    border: 1px dashed var(--accent-edge, rgba(0,0,0,.18)); border-radius: 14px;
    padding: 14px 12px !important; color: var(--muted); font-size: 14px !important; min-height: 0 !important;
  }
  .cv-wc-m .word-meaning.meaning-revealed {
    border: 0; background: var(--accent-soft); color: var(--ink); text-align: left;
  }
  .cv-wc-m .word-example { text-align: left; font-size: 13px !important; color: var(--ink-2); line-height: 1.5 !important; }
  .cv-wc-reveal { width: 100%; justify-content: center; }
  .cv-wc-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cv-wc-tool {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 4px; border: 1px solid var(--accent-edge, rgba(0,0,0,.10)); border-radius: 12px;
    background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 700; cursor: pointer;
  }
  .cv-wc-tool .ic { width: 18px; height: 18px; color: var(--accent-ink); }
  .cv-wc-tool:active { transform: scale(0.97); }
  .cv-wc-tool[disabled] { opacity: .42; }
  .cv-wc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cv-wc-know, .cv-wc-next {
    padding: 12px; border-radius: 14px; font-weight: 800; font-size: 14px; cursor: pointer; border: 0;
  }
  .cv-wc-know { background: var(--surface-2); color: var(--ink); border: 1px solid var(--accent-edge, rgba(0,0,0,.12)); }
  .cv-wc-next { background: var(--accent); color: #fff; }
  .cv-wc-know:active, .cv-wc-next:active { transform: scale(0.98); }

  /* ---------- Listen: drop hero + level filter, segmented tabs, slim rows ---------- */
  .listen-view { gap: 10px !important; }
  .listen-hero { display: none !important; }          /* big 教材音频库 block — wasted space */
  /* level is picked via the bottom-tab "Listen · 选择级别" sheet (enhance.js SHEETS.listen),
     which clicks the hidden [data-listen-level] pill — so keep the bulky level card hidden. */
  .listen-level-card { display: none !important; }
  .listen-mode-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .listen-mode-card {
    min-height: 0 !important; padding: 6px 5px !important;
    flex-direction: row !important; justify-content: center !important; align-items: center !important;
    text-align: center !important; gap: 5px !important;
  }
  .listen-mode-card .listen-card-icon { margin: 0 !important; width: 22px !important; height: 22px !important; border-radius: 8px !important; }
  .listen-mode-card .listen-card-icon svg, .listen-mode-card .listen-card-icon .ic { width: 14px !important; height: 14px !important; }
  .listen-mode-card span, .listen-mode-card small { display: none !important; } /* keep just the title */
  .listen-mode-card strong { font-size: 12px !important; white-space: nowrap !important; }
  .listen-mode-card .listen-card-icon { flex: none !important; }
  .listen-mode-card:active { transform: scale(0.96); }
  .listen-search-bar { margin: 2px 0 6px !important; }
  .listen-list-card { padding: 12px !important; }
  /* one clean line per track: drop the middle "Track NN" cell (it wrapped a 4th
     child into a 3-col grid) and the redundant subtitle, clamp title to 1 line */
  .book-audio-row {
    grid-template-columns: 40px minmax(0, 1fr) 38px !important;
    min-height: 0 !important; padding: 7px 8px !important; gap: 8px !important;
    align-items: center !important;
  }
  .book-audio-track { display: none !important; }
  .book-audio-main strong {
    display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden !important; line-height: 1.3 !important;
  }
  .book-audio-main small { display: none !important; }
  .book-audio-play { width: 38px !important; height: 38px !important; min-height: 0 !important; }
  .book-audio-favorite { width: 36px !important; height: 36px !important; min-height: 0 !important; }

  /* ---------- Read: minimal top + master-detail (list xor article) ----------
     Strip the informational chrome on phones — the page title is already in the
     topbar and the level lives in Settings. List mode = just a small mode switch
     + the article list. Detail mode = back button + the one article. */
  #view-reading > .surface-card > .eyebrow,
  #view-reading > .surface-card > h2,
  #view-reading > .surface-card > p.muted,
  #view-reading .reading-class-note,
  #view-reading .level-lock,
  .reading-audio-source,
  .reading-overview { display: none !important; }
  .reading-workspace { gap: 8px !important; }
  .reading-task-card { padding: 10px !important; gap: 5px !important; }
  /* mode switch → small segmented pills, side by side (drop the "X 篇 · Y 句" subline) */
  .reading-mode-tabs { grid-template-columns: 1fr 1fr !important; margin: 0 0 10px !important; gap: 6px !important; }
  .reading-mode-tabs button { min-height: 0 !important; padding: 9px 8px !important; border-radius: 12px !important; align-items: center !important; }
  .reading-mode-tabs button span { display: none !important; }
  .reading-mode-tabs button strong { font-size: 14px !important; }
  /* master-detail: list by default, one article once tapped */
  .reading-detail { display: none !important; }
  body.cv-read-detail .reading-task-list,
  body.cv-read-detail .reading-mode-tabs { display: none !important; }
  body.cv-read-detail .reading-detail { display: block !important; }
  /* 每日打卡「聚焦」进来的单篇文章不走 list/detail 切换（没有列表可点，也就无从触发
     cv-read-detail），必须直接常显，否则手机端这篇打卡文章会被 display:none 藏掉。 */
  .reading-focused .reading-detail { display: block !important; }
  /* 聚焦模式已有「返回今日计划」，隐藏移动层给 .reading-detail 注入的「返回文章列表」，避免两个返回按钮打架 */
  .reading-focused .cv-read-back, .reading-focused [data-cv-read-back] { display: none !important; }
  /* 手机屏小：朗读详情去掉冗余头部（播放方式在设置里已有；副标题多余），把正文往上提，压缩留白 */
  .reading-audio-source { display: none !important; }
  .reading-card-head p.muted { display: none !important; }
  .reading-card-head { margin-bottom: 8px !important; }
  .reading-card-head h3 { margin: 2px 0 !important; }
  .reading-card { padding: 12px !important; }
  .reading-full-card { padding: 12px !important; gap: 8px !important; margin-top: 8px !important; }
  .reading-full-card .eyebrow { margin-bottom: 0 !important; }
  .reading-assignment-reminder { padding: 8px 10px !important; margin: 2px 0 !important; }
  .sentence-list { margin-top: 10px !important; gap: 8px !important; }
  body.cv-read-detail .cv-read-back {
    display: inline-flex !important; align-items: center; gap: 6px;
    margin: 0 0 12px; padding: 9px 14px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-size: 14px;
  }
  body.cv-read-detail .cv-read-back .ic { width:16px; height:16px; }
  body.cv-read-detail .cv-read-back:active { transform: scale(0.96); }

  /* ---------- Writing: minimal top + stack columns + shrink preview/textarea/upload ---------- */
  /* strip decorative header + scoring-standard box (mode tabs auto-compact via .reading-mode-tabs) */
  #view-writing .writing-grid > aside > .eyebrow,
  #view-writing .writing-grid > aside > h2,
  #view-writing .writing-grid > aside > p.muted,
  #view-writing .writing-level-lock { display: none !important; }
  .writing-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .writing-preview { min-height: 130px !important; padding: 12px !important; }   /* big empty 作文照片预览 box */
  .writing-textarea-label textarea { min-height: 160px !important; padding: 12px !important; }
  .upload-drop { min-height: 120px !important; padding: 14px !important; margin: 10px 0 !important; }
  .writing-prompt-generator { padding: 12px !important; gap: 10px !important; }

  /* ---------- B: mobile quick wins (bigger touch targets, clearer state) ---------- */
  .home-greeting-tools .secondary-action, .home-level-chip { min-height: 44px !important; }
  .book-audio-play, .book-audio-favorite { min-width: 44px !important; min-height: 44px !important; }
  .growth-hero-actions .secondary-action { min-height: 44px !important; }
  /* greeting subtitle wraps to 2 lines instead of clipping the daily target with an ellipsis */
  .home-greeting-strip .home-hello-copy small {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4;
  }
  /* make the active listen mode tab unmistakable */
  .listen-mode-card.active { background: var(--accent-soft) !important; box-shadow: inset 0 0 0 2px var(--accent) !important; }
  .listen-mode-card.active strong { color: var(--accent-ink) !important; }
}

/* empty writing preview: hint line (both platforms) */
.empty-preview small { display: block; font-size: 12px; opacity: .65; margin-top: 6px; font-weight: 400; }

/* topbar title: long English on desktop, short Chinese on phones (avoids truncation) */
.vt-short { display: none; }
@media (max-width: 560px) { .vt-long { display: none; } .vt-short { display: inline; } }

/* ============================================================
   C1. Training (practice/quiz) — full-screen question on mobile
   During a live session the settings sidebar is hidden so the question
   is the hero; settings reappear when the session is empty/finished
   (and the bottom "Words" tab covers "back"). Desktop keeps two columns.
   ============================================================ */
/* P0-4: 移动端答题上下文条+点阵,桌面有侧栏不需要 */
.session-context-bar, .session-dots { display: none; }
@media (max-width: 768px) {
  .view-grid.training-grid.session-live { display: block !important; }
  .view-grid.training-grid.session-live > aside { display: none !important; }
  /* Lock the answering screen to EXACTLY one viewport so the page itself never scrolls.
     Drop the scroll-clearance padding while a live session is the active view, and size the
     card to fill topbar(141)→tabbar(72) precisely. Content scrolls INSIDE the card if a rare
     question is too tall (option A) — the page stays put. */
  .main:has(.view.active .training-grid.session-live) { padding-bottom: 0 !important; }
  .view-grid.training-grid.session-live > .question-card {
    width: 100% !important;
    height: calc(100dvh - 237px - env(safe-area-inset-bottom, 0px));
    min-height: 0 !important;
    display: flex !important; flex-direction: column;
    overflow: hidden;
  }
  /* question + options vertically centered; scroll inside the card if it overflows */
  .training-grid.session-live .session-q-body {
    flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0;
    overflow-y: auto;
  }
  /* P0-4: 答题上下文条——定高答题卡(overflow:hidden 的 flex 列)的非滚动首子元素,
     天然常驻顶部,不用也不能 position:sticky(真正的滚动器是 .session-q-body)。 */
  .training-grid.session-live .session-context-bar {
    display: flex; align-items: center; gap: 10px; flex: none; min-width: 0;
    padding: 8px 2px 10px; margin-bottom: 6px;
    border-bottom: 1px solid var(--hairline-soft, rgba(120,120,140,.16));
    position: relative; /* R12-A: 齿轮并入条内后,首次提示气泡以条为锚点绝对定位 */
  }
  .session-context-back {
    flex: none; display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 0; padding: 6px 8px 6px 0; margin: 0;
    font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer;
  }
  .session-context-title {
    flex: 1; min-width: 0; font-size: 14px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .session-context-count { flex: none; font-size: 12px; opacity: .72; font-variant-numeric: tabular-nums; }
  /* P0-4: 本组进度点阵(done/current/upcoming 三态,quiz 不上对错色——答题时不显示提示) */
  .training-grid.session-live .session-dots { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 6px 0 2px; }
  .session-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hairline-soft, rgba(120,120,140,.35)); }
  .session-dots i.done { background: var(--accent); opacity: .45; }
  .session-dots i.current { background: var(--accent); transform: scale(1.5); }
  .training-grid.session-live .session-dots.session-dots-bar { display: block; }
  .session-dots-bar .daily-mini-progress { margin: 0; }
}

/* ===== 三库词卡扩展：多例句、词形与中考固定搭配 ===== */
.cv-rich-vocab-details {
  display: grid;
  gap: 10px;
  width: min(100%, 760px);
  margin: 12px auto 2px;
  text-align: left;
}

.cv-vocab-more-examples,
.cv-collocations,
.cv-word-formation {
  border-top: 1px solid var(--hairline-soft, rgba(120, 120, 140, 0.16));
  padding-top: 10px;
}

.cv-vocab-more-examples > summary,
.cv-collocations > summary,
.cv-collocation-example > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  cursor: pointer;
  list-style: none;
  color: var(--ink, #242431);
  font-weight: 800;
}

.cv-vocab-more-examples > summary::-webkit-details-marker,
.cv-collocations > summary::-webkit-details-marker,
.cv-collocation-example > summary::-webkit-details-marker {
  display: none;
}

.cv-vocab-more-examples > summary small,
.cv-collocations > summary small {
  margin-left: auto;
  color: var(--muted, #747482);
  font-size: 12px;
  font-weight: 700;
}

.cv-vocab-more-examples > summary::after,
.cv-collocations > summary::after,
.cv-collocation-example > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.cv-vocab-more-examples[open] > summary::after,
.cv-collocations[open] > summary::after,
.cv-collocation-example[open] > summary::after {
  content: "−";
}

.cv-vocab-more-examples ol {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0 0 0 24px;
  color: var(--ink-2);
  line-height: 1.55;
}

.cv-word-formation > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted, #747482);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.cv-word-formation > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cv-word-formation b {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--hairline-soft, rgba(120, 120, 140, 0.16));
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}

.cv-collocation-list {
  max-height: min(38vh, 360px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}

.cv-collocation-row {
  padding: 10px 0;
  border-top: 1px solid var(--hairline-soft, rgba(120, 120, 140, 0.12));
}

.cv-collocation-main,
.cv-collocation-example > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cv-collocation-main > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.cv-collocation-main strong {
  overflow-wrap: anywhere;
  color: var(--ink, #242431);
  font-size: 15px;
}

.cv-collocation-main span {
  color: var(--muted, #747482);
  font-size: 13px;
  line-height: 1.4;
}

.cv-collocation-audio,
button.cv-collocation-audio {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px;
  min-height: 44px;
  padding: 0 !important;
  border: 1px solid var(--hairline-soft, rgba(120, 120, 140, 0.16));
  border-radius: 50% !important;
  background: var(--surface, #fff);
  color: var(--accent);
}

.cv-collocation-example {
  margin-top: 4px;
}

.cv-collocation-example > summary {
  width: fit-content;
  min-height: 36px;
  color: var(--accent);
  font-size: 12px;
}

.cv-collocation-example > div {
  padding: 2px 0 0 14px;
}

.cv-collocation-example p {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .cv-rich-vocab-details {
    gap: 8px;
    margin-top: 8px;
  }

  .cv-collocation-list {
    max-height: min(34vh, 280px);
    padding-right: 2px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  .cv-vocab-more-examples > summary,
  .cv-collocations > summary,
  .cv-collocation-example > summary {
    min-height: 44px;
  }

  .cv-collocation-row {
    padding: 9px 0;
  }
}

@media (max-width: 560px) {
  .question-card { padding: 16px !important; }
  .training-grid.session-live .question-prompt { font-size: 22px !important; line-height: 1.32 !important; }
  .training-grid.session-live .question-detail { font-size: 14px !important; }
  .training-grid.session-live .options { gap: 10px !important; margin-top: 18px !important; }
  /* answer options: comfortable, generous full-width tap rows */
  .question-card .option { min-height: 56px !important; font-size: 16px !important; border-radius: 14px !important; padding: 14px 16px !important; }
}

/* On touch devices :hover STICKS to the last-tapped element until you tap
   elsewhere — so after answering a quiz question the next question's option at the
   same spot inherited the accent hover highlight and looked "still selected".
   Neutralise the hover styling where there's no real hover (touch). */
@media (hover: none) {
  .option:hover {
    border-color: var(--hairline) !important;
    background: var(--surface) !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .unit-pill:hover { transform: none !important; }
}

/* ============================================================
   C2. Teacher workspace on a phone — compact metrics, scrollable tabs,
   non-sticky switcher, and the student table becomes slim cards
   (name + completion + 查看; the rest lives in the 查看 detail).
   Desktop console unchanged.
   ============================================================ */
.teacher-workspace,
.teacher-dashboard,
.teacher-panel,
.assignment-list,
.assignment-card,
.assignment-report,
.assignment-detail-target,
.assignment-detail-target > *,
.assignment-report > * {
  min-width: 0;
}

.assignment-report {
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.assignment-report .data-table-wrap {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 560px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .metric-card { min-height: 0 !important; padding: 12px !important; }
  .teacher-class-switcher { position: static !important; }
  /* Fold the 6 tabs onto two rows instead of clipping them in a scroll strip,
     so the active tab is never cut off at ~390px. */
  .teacher-tabs { flex-wrap: wrap !important; overflow-x: visible !important; -webkit-overflow-scrolling: auto; gap: 6px !important; }
  .teacher-tabs > * { flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; text-align: center !important; }

  /* reusable responsive table → slim cards (teacher + admin).
     Mark a cell .td-title (card header), .td-action (buttons), .td-hide-mobile (drop on card). */
  .data-table.responsive-cards thead { display: none !important; }
  .data-table.responsive-cards, .data-table.responsive-cards tbody { display: block !important; min-width: 0 !important; }
  .data-table.responsive-cards tr {
    display: block !important; background: var(--surface);
    border: 1px solid var(--accent-edge, rgba(0,0,0,.12)); border-radius: 14px;
    padding: 12px; margin-bottom: 10px;
  }
  .data-table.responsive-cards td {
    display: flex !important; justify-content: space-between; align-items: baseline;
    gap: 12px; text-align: right; padding: 5px 0 !important; border: 0 !important;
  }
  .data-table.responsive-cards td.td-hide-mobile { display: none !important; }
  .data-table.responsive-cards td[data-label]::before {
    content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 700;
    text-align: left; flex: 0 0 auto;
  }
  .data-table.responsive-cards td:not(.td-title) small { display: none !important; }
  .data-table.responsive-cards td.td-title { display: block !important; text-align: left; padding: 0 0 8px !important; border-bottom: 1px solid var(--accent-edge, rgba(0,0,0,.08)) !important; margin-bottom: 4px; }
  .data-table.responsive-cards td.td-title strong { font-size: 16px; }
  .data-table.responsive-cards td.td-action { display: block !important; padding-top: 10px !important; }
  .data-table.responsive-cards td.td-action::before { content: none; }
  .data-table.responsive-cards td.td-action .text-button { width: 100%; padding: 9px; background: var(--accent-soft); border-radius: 10px; color: var(--accent-ink); font-weight: 800; margin: 0; }
  .data-table.responsive-cards td.td-action .table-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .data-table.responsive-cards td.td-action .table-actions .text-button { width: auto; flex: 1 1 calc(50% - 3px); text-align: center; }

  .assignment-report summary > *,
  .assignment-detail-table td,
  .hardword-table td {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .assignment-summary-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .assignment-detail-table-wrap {
    overflow-x: hidden !important;
  }

  .assignment-detail-table td[data-label]::before,
  .hardword-table td[data-label]::before {
    max-width: 46%;
  }

  .hardword-table .hw-bar {
    width: min(112px, 42vw);
  }
}

/* ============================================================
   C4. Writing on a phone — fix the backwards flow.
   Was: empty preview + textarea on top, upload buried at the bottom.
   Now (CSS reorder, desktop two-column layout untouched): controls first
   (mode → prompt → upload → OCR/评阅 buttons), optional 题目生成器 sunk,
   then the preview / OCR-text / review area below.
   ============================================================ */
@media (max-width: 560px) {
  .writing-grid { display: flex !important; flex-direction: column !important; }
  .writing-grid > aside { order: 1 !important; display: flex !important; flex-direction: column !important; }
  .writing-grid > .writing-workspace { order: 2 !important; }
  .writing-grid > aside > .upload-drop { order: 4 !important; }
  .writing-grid > aside > .field-stack { order: 5 !important; }
  .writing-grid > aside > .writing-prompt-generator { order: 8 !important; }
  .writing-grid > aside > .feedback { order: 9 !important; }

  /* ---- phone declutter: drop empty boxes + verbose notes ---- */
  /* the big empty 作文照片预览 box only appears once a photo is added */
  .writing-preview:has(.empty-preview) { display: none !important; }
  /* fold the long "AI 评阅" explanation paragraph on phones */
  .writing-grid .writing-next-note { display: none !important; }
  /* teacher mode: keep the read-only 题目 card high (right under the picker) */
  .writing-grid > aside > .writing-task-fixed { order: 2 !important; }
  .writing-task-fixed { padding: 10px 12px !important; }
  .writing-task-fixed strong { font-size: 14px !important; }
  .writing-task-fixed small { display: none !important; }
}

/* ============================================================
   9. Sentence-coach (造句) modal — de-cluttered (desktop + mobile)
   One source for word+meaning, one task line, big 开口说, typed input folded.
   ============================================================ */
.cv-ai2-title { margin: 0 0 12px !important; font-size: 18px; }
.cv-ai2 .ai-challenge-head { align-items: flex-start; }
.cv-ai2-word h3 { margin: 0; font-size: 22px; }
.cv-ai2-word p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.cv-ai2-listen .ic { width: 20px; height: 20px; }
.cv-ai2-task {
  margin: 12px 0; padding: 10px 12px; border-radius: 12px;
  background: var(--accent-soft); color: var(--ink); font-size: 14px; line-height: 1.55;
}
.cv-ai2-task b { color: var(--accent-ink); }
.cv-ai2-actions { margin: 0 0 8px; }
.cv-ai2-actions .primary-action { width: 100%; justify-content: center; gap: 7px; }
.cv-ai2-actions .primary-action .ic { width: 18px; height: 18px; }
.cv-ai2-type { margin-top: 4px; }
.cv-ai2-type > summary {
  cursor: pointer; font-size: 13px; color: var(--accent-ink); font-weight: 700;
  list-style: none; padding: 6px 2px;
}
.cv-ai2-type > summary::-webkit-details-marker { display: none; }
.cv-ai2-type textarea {
  width: 100%; margin: 8px 0; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--accent-edge, rgba(0,0,0,.15)); background: var(--surface-2);
  color: var(--ink); font: inherit; resize: vertical;
}

/* ============================================================
   D. Listen sub-group chips + Home compaction (level/settings one row,
   smaller progress cards) + Quiz-option toggle + settings level focus.
   ============================================================ */

/* L1 — desktop already shows group pills inside the (visible) level card,
   so the phone-only group bar is hidden on wide screens. */
.listen-group-bar { display: none; }

/* W2 — Tricky-words "Quiz 带难词" is now a real toggle button (both platforms) */
.quiz-wrong-toggle { cursor: pointer; text-align: left; border: 1px solid transparent; transition: box-shadow .15s ease, transform .12s ease; }
.quiz-wrong-toggle.is-on { box-shadow: inset 0 0 0 2px var(--green, #2f9e6f); }
.quiz-wrong-toggle.is-off { opacity: .9; box-shadow: inset 0 0 0 1px var(--accent-edge, rgba(0,0,0,.14)); }
.quiz-wrong-toggle:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.quiz-wrong-toggle:active { transform: scale(0.98); }

/* H2 — flash the 学习级别 card when the home level chip jumps into Settings */
.settings-focus-flash { animation: cvSettingsFlash 1.6s ease; }
@keyframes cvSettingsFlash {
  0%, 100% { box-shadow: none; }
  12%, 58% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) { .settings-focus-flash { animation: none; } }

@media (max-width: 560px) {
  /* L1 — level sub-group as small Read-sized chips at the top of the list */
  .listen-group-bar {
    display: flex !important; gap: 6px !important; margin: 0 0 8px !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
  }
  .listen-group-chip {
    flex: 1 0 auto !important; white-space: nowrap !important; min-height: 0 !important;
    padding: 9px 12px !important; border-radius: 12px !important;
    border: 1px solid var(--accent-edge, rgba(0,0,0,.12)) !important;
    background: var(--surface-2) !important; color: var(--ink-2) !important;
    font-size: 13px !important; font-weight: 700 !important; cursor: pointer;
  }
  .listen-group-chip.active {
    background: var(--accent-soft) !important; color: var(--accent-ink) !important;
    box-shadow: inset 0 0 0 2px var(--accent) !important;
  }
  .listen-group-chip:active { transform: scale(0.97); }

  /* H1 — collapse the greeting strip to ONE row: avatar | name | level+settings.
     Drop the "Hello" eyebrow + subtitle on phones (same info is in the cards below). */
  .home-greeting-strip {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important; gap: 8px !important; padding: 8px 10px !important;
  }
  .home-greeting-strip .home-hello-mark { width: 34px !important; height: 34px !important; font-size: 16px !important; }
  .home-greeting-strip .home-hello-copy span,
  .home-greeting-strip .home-hello-copy small { display: none !important; }
  .home-greeting-strip .home-hello-copy strong { font-size: 16px !important; }
  .home-greeting-tools {
    grid-column: auto !important; grid-row: auto !important;
    display: flex !important; align-items: center !important; justify-content: flex-end !important;
    gap: 6px !important; width: auto !important;
  }
  .home-greeting-tools .home-level-chip { min-height: 38px !important; padding: 5px 8px !important; }
  .home-greeting-tools .secondary-action { min-height: 38px !important; padding: 0 8px !important; font-size: 12px !important; }

  /* H3 — slimmer progress cards: title + count on one line, thin bar below */
  .home-progress-cards { gap: 6px !important; }
  .home-progress-card {
    grid-template-columns: 1fr !important; padding: 8px 10px !important; gap: 5px !important;
  }
  .home-progress-card > div {
    display: flex !important; align-items: baseline !important;
    justify-content: space-between !important; gap: 8px !important; min-width: 0;
  }
  .home-progress-card strong { font-size: 11px !important; }
  .home-progress-card b { font-size: 16px !important; margin-top: 0 !important; }
  .home-progress-card small { display: none !important; }
  .home-progress-card .daily-mini-progress { grid-column: 1 / -1 !important; margin-top: 0 !important; }
}

/* ============================================================
   E. Home redesign — today progress ring + task checklist (H4)
   Replaces the 3 stat cards + grouped list. Works desktop + mobile.
   ============================================================ */
.home-today-ring { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.home-ring-wrap { position: relative; width: 56px; height: 56px; flex: none; }
.home-ring-wrap svg { display: block; width: 56px; height: 56px; }
.home-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 850; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.home-ring-num i { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 1px; }
.home-ring-copy { min-width: 0; }
.home-ring-copy strong { display: block; font-size: 15px; color: var(--ink); font-family: var(--font-display); font-weight: 800; line-height: 1.2; }
.home-ring-copy small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); line-height: 1.45; }

.home-checklist { display: flex; flex-direction: column; gap: 8px; }
.home-check-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--hairline-soft, rgba(0,0,0,.1)); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s var(--ease, ease), transform .12s var(--ease, ease); }
.home-check-row:hover { border-color: var(--accent); }
.home-check-row:active { transform: scale(0.99); }
.home-check-dot { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--hairline, rgba(0,0,0,.2)); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.home-check-dot.in_progress { border-color: var(--accent); }
.home-check-dot.done { border: none; background: var(--accent); color: #fff; }
.home-check-dot.done .ic { width: 13px; height: 13px; }
.home-check-main { flex: 1; min-width: 0; }
.home-check-main strong { display: block; font-size: 14px; color: var(--ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-check-main small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-check-go { flex: none; font-size: 12px; font-weight: 800; padding: 6px 13px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); }
.home-check-go.is-done { background: transparent; color: var(--muted); font-weight: 700; }

@media (max-width: 560px) {
  .home-today-ring { padding: 11px 12px !important; gap: 11px !important; }
  .home-ring-wrap, .home-ring-wrap svg { width: 48px !important; height: 48px !important; }
  .home-ring-copy strong { font-size: 14px !important; }
  .home-check-row { padding: 9px 11px !important; }
  .home-check-main strong { font-size: 13px !important; }
}

/* ============================================================
   F. Practice/Quiz settings — gear pill + first-time hint + bottom sheet (W1)
   Desktop keeps the two-column layout (aside always visible). On a phone,
   during a live session the aside is hidden (refine.css §C1); the gear
   re-exposes the same settings as a bottom sheet.
   ============================================================ */
.question-card { position: relative; }
/* R12-A: the gear now lives INSIDE the session context bar (it used to own a whole
   row — one of the reasons the answer area couldn't fit the feedback on phones).
   The bar itself is mobile-only (base display:none above), so desktop still gets
   its settings from the always-visible aside. */
.session-settings-gear {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; padding: 7px 14px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid var(--accent-edge, rgba(0,0,0,.10)); cursor: pointer;
}
.session-settings-gear .ic { width: 15px; height: 15px; }
.session-settings-gear:active { transform: scale(0.96); }
.session-gear-hint { display: none; }
.session-gear-hint-x { background: transparent; border: none; color: #fff; padding: 0; cursor: pointer; display: inline-flex; opacity: .85; }
.session-gear-hint-x .ic { width: 13px; height: 13px; }
.session-settings-scrim { display: none; }
.session-sheet-bar { display: none; }
.session-sheet-close { background: transparent; border: none; color: var(--ink-2, var(--ink)); padding: 4px; cursor: pointer; display: inline-flex; }
.session-sheet-close .ic { width: 18px; height: 18px; }

.quiz-wrong-option .check-row {
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: start;
}
.quiz-wrong-option .check-row input {
  margin-top: 2px;
}
.quiz-wrong-option .check-row span,
.quiz-wrong-option .check-row small {
  min-width: 0;
  overflow-wrap: anywhere;
}
.quiz-wrong-option .check-row small {
  grid-column: 2;
  line-height: 1.38;
  white-space: normal;
}

@keyframes cvGearPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes cvSessionSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* The view-enter animation (ultimate.css) animates `transform` with fill:both,
   which makes every .view.active a permanent containing block for position:fixed
   descendants — that pinned the settings bottom-sheet to the view box instead of
   the viewport (it floated mid-screen with its square bottom corners showing).
   Redefine the keyframes to fade-only (same name, loaded later → wins): keeps the
   entrance fade, drops the 14px slide, removes the transform containing block so
   the bottom-sheet (and any future fixed overlay inside a view) anchors correctly. */
@keyframes view-enter { from { opacity: 0; } to { opacity: 1; } }
/* F19 止血批: 移动/平板端底部 tab 切换入场从 0.5s 降到 0.18s，去掉“网页刷新感”。
   位移之前已移除（上面 keyframes 只剩淡入），这里只压时长；桌面 >1180px 不变。 */
@media (max-width: 1180px) {
  .view.active { animation-duration: 0.18s !important; }
}

/* P0-2 作业信息条:基线隐藏(桌面 >768px 有侧栏 aside,不重复渲染入口)。
   必须放在下面这个 768 媒体块之前——同特异性的 display:none 若写在块后,
   源序会把媒体块里的 display:flex 压回 none,信息条永远出不来。 */
.cv-assign-bar { display: none; }

@media (max-width: 768px) {
  .session-context-bar .session-settings-gear { flex: none; padding: 5px 10px; font-size: 12px; }
  .session-context-bar:has(.session-gear-hint) .session-settings-gear { animation: cvGearPulse 1.6s ease-in-out 3; }
  .training-grid.session-live .session-gear-hint {
    display: flex; align-items: center; gap: 8px;
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; max-width: 240px;
    background: var(--accent); color: #fff; font-size: 12px; line-height: 1.45;
    padding: 9px 12px; border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.22);
  }
  .training-grid.session-live .session-gear-hint::after {
    content: ""; position: absolute; top: -5px; right: 22px; width: 10px; height: 10px;
    background: var(--accent); transform: rotate(45deg);
  }

  /* ---------- settings bottom sheet ---------- */
  /* Transparent catcher only (tap-outside-to-close). NO dark dimming — the rest of
     the screen keeps its original colors, like the bottom-tab action sheets. */
  .session-settings-scrim,
  .cv-wordset-scrim {
    display: block; position: fixed; inset: 0; z-index: 140;
    background: transparent; opacity: 0; pointer-events: none;
  }
  body.session-settings-open .session-settings-scrim,
  body.cv-wordset-open .cv-wordset-scrim { opacity: 1; pointer-events: auto; }
  /* The bottom tab bar lives in a higher stacking context than this in-view sheet,
     so it covered the sheet's bottom (the Start button was unreachable). Hide it
     while the settings sheet is open — it's a modal. Also hide the now-redundant
     gear pill peeking from behind so the dimmed top reads clean. */
  body.session-settings-open .mobile-tabbar,
  body.cv-wordset-open .mobile-tabbar { display: none !important; }
  /* Study settings aside is hidden inline on mobile — it only appears as the gear sheet. */
  #view-study .view-grid > aside.cv-study-sheet { display: none; }
  /* P0-2 作业信息条:aside 藏掉后,561-768px 区间「作业测验」入口断掉——
     信息条把 作业名+学习/测验进度+作业测验按钮 常驻在卡片上方兜底。 */
  .cv-assign-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hairline-soft); }
  .cv-assign-bar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .cv-assign-bar-info strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cv-assign-bar-info span { font-size: 12px; color: var(--muted); }
  /* width:auto 必带 !important:styles.css 在 ≤460px 给 .primary-action 塞 width:100%,
     不压掉它按钮会独占一行、信息条被挤成两行(460px 竖排陷阱)。 */
  .cv-assign-bar .cv-assign-bar-quiz { flex: 0 0 auto; width: auto !important; min-height: 38px; padding: 8px 14px; font-size: 13px; }
  body.session-settings-open .session-context-bar { visibility: hidden !important; }
  body.session-settings-open .view-grid.training-grid.session-live > aside.session-settings-aside,
  body.cv-wordset-open #view-study .view-grid > aside.cv-study-sheet {
    display: flex !important; flex-direction: column; gap: 12px;
    /* Centered floating card, same width as the bottom-tab action sheet (Listen etc.).
       Centered via auto side-margins (not transform) so the slide-up animation is free. */
    position: fixed; left: 0; right: 0; margin: 0 auto !important;
    width: min(440px, calc(100vw - 24px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 141;
    /* Leave the topbar clear above; the card grows up to here then the unit list
       scrolls internally (header + Start button stay pinned). */
    max-height: calc(100dvh - 154px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0 16px 16px !important;
    border-radius: 22px;
    background: var(--glass-sheet) !important;
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border: 1px solid var(--hairline-soft);
    box-shadow: var(--shadow-lg) !important;
    animation: cvSessionSheetUp .26s ease;
  }
  /* Pin the "开始" footer so it's always visible — only the unit list scrolls. */
  body.session-settings-open .session-settings-aside .field-stack,
  body.cv-wordset-open .cv-study-sheet .field-stack {
    position: sticky; bottom: 0; z-index: 2;
    margin: 4px -16px -16px !important; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--glass-sheet); border-top: 1px solid var(--hairline-soft);
    -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  }
  /* sticky header keeps the grip + title + close visible while the body scrolls */
  body.session-settings-open .session-settings-aside .session-sheet-bar,
  body.cv-wordset-open .cv-study-sheet .session-sheet-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
    position: sticky; top: 0; z-index: 2; margin: 0 -16px 2px; padding: 12px 16px 10px;
    background: var(--surface); border-bottom: 1px solid var(--hairline-soft);
  }
  .session-sheet-grip { flex-basis: 100%; width: 38px; height: 4px; border-radius: 2px; background: var(--hairline, rgba(0,0,0,.18)); margin: 0 auto 10px; }
  .session-sheet-bar strong { flex: 1; font-size: 16px; font-weight: 800; color: var(--ink); }
  /* reset each group's own margin so the flex gap is the single source of spacing */
  body.session-settings-open .session-settings-aside > *,
  body.cv-wordset-open .cv-study-sheet > * { margin: 0 !important; }
  /* tone the level card down inside the sheet (it was a loud accent block) */
  body.session-settings-open .session-settings-aside .level-lock,
  body.cv-wordset-open .cv-study-sheet .level-lock {
    background: var(--surface-2, rgba(127,127,127,.07)) !important;
    border: 1px solid var(--hairline-soft) !important; color: var(--ink) !important;
  }
  body.session-settings-open .session-settings-aside .option-field legend,
  body.cv-wordset-open .cv-study-sheet .option-field legend,
  body.cv-wordset-open .cv-study-sheet .field { padding: 0; }
  body.session-settings-open .session-settings-aside .option-field legend,
  body.cv-wordset-open .cv-study-sheet .option-field legend,
  body.cv-wordset-open .cv-study-sheet .field {
    font-size: 12px; color: var(--muted); font-weight: 800;
  }
  /* the study unit picker is a single <select> inside a .field label —
     give the select room and match the sheet typography */
  body.cv-wordset-open .cv-study-sheet .field { display: flex; flex-direction: column; gap: 6px; }
  body.cv-wordset-open .cv-study-sheet .field > select { font-size: 14px; color: var(--ink); font-weight: 600; }
  body.session-settings-open .session-settings-aside .eyebrow,
  body.session-settings-open .session-settings-aside > h2,
  body.session-settings-open .session-settings-aside > p.muted,
  body.session-settings-open .session-settings-aside .training-back-action,
  body.cv-wordset-open .cv-study-sheet .eyebrow,
  body.cv-wordset-open .cv-study-sheet > h2 { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .session-context-bar:has(.session-gear-hint) .session-settings-gear { animation: none; }
  body.session-settings-open .view-grid.training-grid.session-live > aside.session-settings-aside,
  body.cv-wordset-open #view-study .view-grid > aside.cv-study-sheet { animation: none; }
}

/* ============================================================
   G. Mobile nav drawer — anchor to the visible viewport (iOS fix).
   ultimate.css gives the slide-in drawer height:100vh. On iOS the
   retractable toolbar makes 100vh TALLER than the visible area, so the
   account/settings footer slid below the bottom tab bar and mis-tapped
   when entering Settings. Anchor top:0 + bottom:0 (tracks the visible
   viewport, never overshoots), scroll inside if tall, pin the footer to
   the bottom, and keep it clear of the home indicator (safe-area).
   ============================================================ */
@media (max-width: 1180px) {
  .sidebar {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .sidebar .account-footer { margin-top: auto !important; }
}

/* ============================================================
   Writing: submit-limit meta + 作文回看 viewer
   Desktop = full-screen, AI + 老师评价 two blocks. Mobile = two buttons that
   each open a separate popup. Viewer sits above the bottom tab bar (z>90).
   ============================================================ */
.writing-submit-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.writing-submit-meta strong { color: var(--accent); font-variant-numeric: tabular-nums; }

/* Home sync skeleton — shown while the assignments archive loads, so the home
   never flashes the provisional daily-plan layout before the real checklist. */
.home-ring-skeleton {
  display: block; width: 56px; height: 56px; border-radius: 50%;
  border: 6px solid var(--hairline-soft, rgba(0,0,0,.1));
  border-top-color: var(--accent);
  animation: cv-ring-spin .9s linear infinite;
}
@keyframes cv-ring-spin { to { transform: rotate(360deg); } }
html.cv-reduce-motion .home-ring-skeleton { animation: none; }

/* Read-only teacher-assigned writing task (replaces the题目 input in teacher mode) */
.writing-task-fixed {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; margin: 2px 0 4px;
  border: 1px solid var(--hairline-soft, rgba(0,0,0,.08));
  border-radius: var(--r-sm, 12px);
  background: var(--accent-soft, rgba(60,80,180,.06));
}
.writing-task-fixed .wtf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.writing-task-fixed .wtf-head .eyebrow { margin: 0; }
.writing-task-fixed .wtf-ddl { font-size: 11.5px; font-weight: 800; color: var(--accent-ink, var(--accent)); white-space: nowrap; }
.writing-task-fixed strong { font-size: 15px; line-height: 1.4; }
.writing-task-fixed p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); white-space: pre-wrap; }
.writing-task-fixed small { color: var(--muted); font-size: 11.5px; }
.link-button { background: none; border: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }

.writing-viewer-mask { z-index: 140 !important; }
.writing-viewer-card {
  position: relative; width: min(1100px, 100%); max-height: calc(100dvh - 36px);
  overflow: auto; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 18px; padding: 22px;
}
.writing-viewer-card > .modal-close { position: absolute; top: 12px; right: 12px; }
.wv-essay { margin: 10px 0 16px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--hairline); }
.wv-essay-img { max-width: 100%; border-radius: 10px; margin: 8px 0; display: block; }
.wv-essay-text { white-space: pre-wrap; line-height: 1.7; color: var(--ink); }
.wv-desktop-blocks { display: flex; gap: 16px; align-items: flex-start; }
.wv-desktop-blocks .wv-block { flex: 1 1 0; min-width: 0; }
.wv-mobile-actions { display: none; }
.writing-teacher-review { display: flex; flex-direction: column; gap: 8px; }
.writing-teacher-review .wtr-score strong { font-size: 28px; color: var(--accent); }
.writing-teacher-review .wtr-score small { color: var(--muted); margin-left: 4px; }

.writing-subview-mask { z-index: 142 !important; }
.writing-subview-card {
  position: relative; width: min(620px, 100%); max-height: calc(100dvh - 36px);
  overflow: auto; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 18px; padding: 20px;
}
.writing-subview-card > .modal-close { position: absolute; top: 12px; right: 12px; }

@media (max-width: 768px) {
  .writing-viewer-card { width: 100%; max-height: calc(100dvh - 16px); padding: 18px; }
  .wv-desktop-blocks { display: none; }
  .wv-mobile-actions { display: flex; gap: 10px; }
  .wv-mobile-actions .secondary-action { flex: 1; }
}

/* ============================================================
   H. Reading assignment — completion is gated on a whole-passage score.
   Reminder banner in the reading detail (teacher task, not yet full-scored).
   ============================================================ */
.reading-assignment-reminder {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 6px; padding: 9px 12px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 13px; font-weight: 700; line-height: 1.45;
}
.reading-assignment-reminder .ic { width: 16px; height: 16px; flex: none; }
/* The reminder is a direct child of the .reading-full-card grid. Make it span the whole
   row so it never lands in the narrow `auto` column (which crushed the 1fr column to 0px,
   wrapping the heading + button to one character per line on mobile). */
.reading-full-card .reading-assignment-reminder { grid-column: 1 / -1; }
/* On mobile, stack the whole full-passage card in one column so heading/button/reminder/
   passage are all full-width (no narrow auto column to collapse). */
@media (max-width: 768px) {
  .reading-full-card { grid-template-columns: 1fr !important; }
}
/* Dark mode: the full-passage card + passage text had hardcoded light backgrounds
   (#f7fafc / rgba(255,255,255,.72)) that left the heading/text near-invisible in dark. */
html.cv-dark .reading-full-card { background: var(--surface-2); border-color: var(--hairline); }
html.cv-dark .reading-full-text { background: var(--surface); border-color: var(--hairline); }
html.cv-dark .reading-full-text p { color: var(--ink); }
html.cv-dark .reading-full-text p span { color: var(--accent); }

/* ============================================================
   I. Teacher — per-assignment completion roster (simplified).
   Tap an assignment → expand → two name lists: 已完成 / 未完成.
   ============================================================ */
.assignment-roster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.assignment-roster .roster-col { background: var(--surface-2, rgba(127,127,127,.06)); border: 1px solid var(--hairline-soft); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.assignment-roster .roster-head { font-size: 12px; font-weight: 800; margin-bottom: 8px; }
.assignment-roster .roster-col.is-done .roster-head { color: var(--green, #2f9e6f); }
.assignment-roster .roster-col.is-pending .roster-head { color: var(--muted); }
.assignment-roster .roster-names { display: flex; flex-wrap: wrap; gap: 6px; }
.assignment-roster .roster-names span { font-size: 12px; padding: 4px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--hairline-soft); color: var(--ink); }
.assignment-roster .roster-col.is-done .roster-names span { background: var(--green-soft, rgba(47,158,111,.14)); color: var(--green-ink, #1f7a52); border-color: transparent; }
.assignment-roster .roster-empty { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .assignment-roster { grid-template-columns: 1fr; } }

/* #12 Sticky topbar was semi-transparent, so scrolled content (class selector +
   刷新) ghosted through. Make it fully opaque (blur/border kept as-is).
   #f2efe9 = light --bg; #0d0f14 matches the dark --glass-top hue rgba(13,15,20). */
html:not(.cv-dark) .topbar { background: #f2efe9 !important; }
html.cv-dark .topbar { background: #0d0f14 !important; }

/* #15 Desktop: stop the answer area from leaving a big right/bottom gap by
   centering the question body within a sensible max width. Mobile is untouched. */
@media (min-width: 769px) {
  .training-grid.session-live .session-q-body { max-width: 720px; margin-inline: auto; }
}

/* #9 Teacher manual review controls under a writing submission (dark-safe). */
.teacher-review-box {
  margin-top: 14px; padding: 14px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 10px;
}
.teacher-review-box .teacher-review-grid {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.teacher-review-box .teacher-review-grid .mini-field { flex: 1 1 200px; }
.teacher-review-box .teacher-review-check { display: inline-flex; align-items: center; gap: 6px; }
.teacher-review-box .teacher-review-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.class-student-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.class-student-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 5px 7px 5px 9px;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface-2, rgba(127,127,127,.06));
  font-size: 12px;
  color: var(--ink);
}

.class-student-list .text-button {
  min-height: 24px;
  padding: 0 5px;
  font-size: 11px;
}

.class-student-list.empty {
  font-size: 12px;
  color: var(--muted);
}

.submission-review-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  border: 1px solid var(--hairline-soft);
  background: var(--surface-2, rgba(127,127,127,.06));
  color: var(--muted);
}

.submission-review-badge.done {
  border-color: transparent;
  background: var(--green-soft, rgba(47,158,111,.14));
  color: var(--green-ink, #1f7a52);
}

.submission-review-badge.pending {
  border-color: transparent;
  background: var(--amber-soft);
  color: var(--amber-ink);
}

.teacher-assignment-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.teacher-assignment-group + .teacher-assignment-group {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
}

.teacher-assignment-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
}

.teacher-assignment-group-head span {
  font-size: 12px;
  color: var(--muted);
}

.assignment-roster.writing-roster {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .assignment-roster.writing-roster { grid-template-columns: 1fr; }
  .teacher-assignment-group-head { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* Usage / cost monitoring in Admin. */
.usage-monitor-card { display: flex; flex-direction: column; gap: 16px; }
.usage-monitor-head { align-items: flex-start; }
.usage-head-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.usage-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.usage-stat-card strong { font-size: clamp(22px, 3vw, 34px); }
.usage-quality-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.usage-quality-strip strong { color: var(--ink); font-size: 12.5px; }
.usage-quality-strip small { color: var(--muted); }
.usage-quality-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .1);
  color: var(--accent);
  font-weight: 800;
  white-space: nowrap;
}
.usage-monitor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
  gap: 16px;
  align-items: start;
}
.usage-resource-panel,
.usage-side-panel { min-width: 0; }
.usage-resource-table th,
.usage-resource-table td { vertical-align: middle; }
.usage-resource-table small { color: var(--muted); }
.usage-resource-table .usage-source-note {
  display: block;
  max-width: 210px;
  margin-top: 3px;
  line-height: 1.35;
}
.usage-input {
  width: 92px;
  max-width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 7px 8px;
  font: inherit;
  font-size: 12px;
}
.usage-input.compact { width: 64px; }
.usage-config-actions {
  margin-top: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.usage-config-actions .feedback {
  margin: 0;
  padding: 8px 10px;
}
.usage-ranking-list { display: flex; flex-direction: column; gap: 8px; }
.usage-rank-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.usage-rank-row:last-child { border-bottom: 0; }
.usage-rank-index {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--accent);
  font-weight: 900;
}
.usage-rank-row strong { display: block; font-size: 13px; line-height: 1.3; }
.usage-rank-row small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.45; margin-top: 2px; }
.usage-trend-head { margin-top: 14px; }
.usage-trend-bars {
  height: 140px;
  display: grid;
  grid-template-columns: repeat(14, minmax(12px, 1fr));
  gap: 6px;
  align-items: end;
  padding-top: 8px;
}
.usage-trend-bar {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}
.usage-trend-bar span {
  display: block;
  min-height: 4px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--accent), rgba(127, 119, 221, .38));
}
.usage-trend-bar small {
  color: var(--muted);
  font-size: 10.5px;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .usage-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-monitor-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .usage-stat-grid { grid-template-columns: 1fr; }
  .usage-head-meta { justify-content: flex-start; }
  .usage-resource-table.responsive-cards tbody tr { gap: 8px; }
  .usage-resource-table.responsive-cards td[data-label] {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }
  .usage-input,
  .usage-input.compact { width: 100%; }
  .usage-trend-bars { gap: 4px; }
  .usage-trend-bar small { font-size: 10px; transform: rotate(-45deg); transform-origin: top center; }
}

/* Auth agreement: loaded last to prevent generic auth input styles from
   turning the mobile checkbox into a full-size text field. */
.auth-form .agreement-check {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
}

.auth-form .agreement-check input[type="checkbox"],
.agreement-check input[type="checkbox"] {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  padding: 0 !important;
  margin: 2px 0 0 !important;
  border-radius: 5px !important;
  flex: 0 0 18px !important;
  align-self: start !important;
  box-sizing: border-box !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  accent-color: var(--accent) !important;
}

.auth-agreement-copy {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.auth-doc-link {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  display: inline;
  font: inherit;
  font-weight: 900;
  line-height: inherit;
  padding: 0;
  text-align: left;
  vertical-align: baseline;
}

.auth-doc-link:hover,
.auth-doc-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-doc-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 3px;
  border-radius: 5px;
}

/* Public legal footer: visible on the unauthenticated home screen without
   competing with the login card or the mobile app navigation. */
.auth-screen {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  row-gap: 14px;
}

.auth-public-footer {
  width: min(1140px, 100%);
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 0 16px;
  color: var(--muted-2, var(--muted));
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.auth-public-links,
.auth-public-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
}

.auth-public-footer .auth-doc-link,
.auth-public-footer a {
  color: inherit;
  font-weight: 650;
  text-decoration: none;
}

.auth-public-footer a:hover,
.auth-public-footer a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.settings-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.settings-legal-links .auth-doc-link,
.settings-legal-links a {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  text-decoration: none;
}

.settings-legal-links a:hover,
.settings-legal-links a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.settings-legal-copy {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .auth-screen {
    align-content: start;
    row-gap: 12px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .auth-public-footer {
    padding-inline: 8px;
    font-size: 11px;
  }
}

.auth-doc-mask {
  z-index: 12000;
  padding: 18px;
}

.auth-doc-card {
  width: min(720px, calc(100vw - 28px));
  max-height: min(82vh, 760px);
  overflow: auto;
  padding: 24px;
  position: relative;
}

.auth-doc-card > .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.auth-doc-body {
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 8px;
}

.auth-doc-body h2 {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  margin: 0 42px 0 0;
  letter-spacing: 0;
}

.auth-doc-body h3 {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
  margin: 10px 0 0;
}

.auth-doc-body p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

.auth-doc-body .eyebrow {
  margin: 0;
}

.auth-doc-updated {
  color: var(--accent) !important;
  font-weight: 800;
}

@media (max-width: 560px) {
  .auth-doc-mask {
    align-items: flex-end;
    padding: 12px;
  }

  .auth-doc-card {
    width: calc(100vw - 24px);
    max-height: 84vh;
    border-radius: 20px;
    padding: 20px;
  }

  .auth-doc-body {
    gap: 9px;
    padding-right: 2px;
  }

.auth-doc-body p {
    font-size: 12.5px;
    line-height: 1.65;
  }
}

.settings-password-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hairline-soft);
  border-radius: 18px;
  background: var(--surface-2);
}

.settings-password-form .field-stack {
  gap: 10px;
}

.settings-password-form input {
  width: 100%;
}

.settings-password-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-password-actions button {
  min-width: 124px;
}

@media (max-width: 560px) {
  .settings-password-form {
    padding: 12px;
    border-radius: 16px;
  }

  .settings-password-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .settings-password-actions button {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   STUDY CARD — gated step-flow (5.2.0-word-card-gated-flow)
   听 → 跟读 → 完成. Inline (no modal) recording + scoring.
   ============================================================ */
.cv-steps {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin: 2px 0 4px;
}
.cv-step {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: var(--surface-2, rgba(0,0,0,.05)); color: var(--muted, #888);
  border: 1px solid var(--accent-edge, rgba(0,0,0,.10)); line-height: 1;
}
.cv-step b { font-weight: 800; margin-left: 1px; }
.cv-step.is-active { background: var(--accent, #4f46e5); color: #fff; border-color: transparent; }
.cv-step.is-done { background: var(--accent-soft, rgba(79,70,229,.14)); color: var(--accent-ink, var(--accent, #4f46e5)); border-color: transparent; }
.cv-step.is-done::before,
.cv-step.is-active::before { content: none; }

/* Meaning locked/dimmed until 听 done */
.word-meaning.cv-meaning-dim {
  opacity: .82; color: var(--muted, #8a8a8a);
  font-style: italic; font-size: 14px;
}
.word-meaning.cv-locked { cursor: default; }

/* Persistent mini speaker (听单词) — available at every later stage */
.cv-mini-speaker {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: var(--accent-soft, rgba(79,70,229,.12)); color: var(--accent-ink, var(--accent, #4f46e5));
  border: 1px solid var(--accent-edge, rgba(0,0,0,.10)); font-weight: 800; font-size: 12px;
}
.cv-mini-speaker .ic { width: 15px; height: 15px; }
.cv-mini-speaker:active { transform: scale(.97); }

.cv-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cv-wc-say-row { display: flex; justify-content: center; margin: 2px 0; }

/* Big primary stage action */
.cv-big-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 800; padding: 13px 20px; border-radius: 14px;
}
.cv-big-action .ic { width: 20px; height: 20px; }

/* Inline panel shell (recording / loading / score) */
.cv-inline-panel {
  margin-top: 10px; border-radius: 14px; padding: 12px;
  background: var(--surface-2, rgba(0,0,0,.04)); border: 1px solid var(--accent-edge, rgba(0,0,0,.08));
}
.cv-inline-panel.cv-loading { text-align: center; color: var(--muted, #888); font-weight: 700; }
.cv-inline-panel.cv-inline-error {
  background: rgba(220, 70, 70, .08); border-color: rgba(220,70,70,.28);
  color: #b23c3c; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between;
}

/* Waveform while recording */
.cv-recording { text-align: center; background: var(--accent-soft, rgba(79,70,229,.10)); border-color: transparent; }
.cv-wave {
  display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; margin-bottom: 8px;
}
.cv-wave i {
  display: block; width: 5px; border-radius: 3px; background: var(--accent, #4f46e5);
  animation: cvWave 900ms ease-in-out infinite;
}
.cv-wave i:nth-child(1) { height: 10px; animation-delay: 0ms; }
.cv-wave i:nth-child(2) { height: 22px; animation-delay: 120ms; }
.cv-wave i:nth-child(3) { height: 30px; animation-delay: 240ms; }
.cv-wave i:nth-child(4) { height: 16px; animation-delay: 360ms; }
.cv-wave i:nth-child(5) { height: 30px; animation-delay: 200ms; }
.cv-wave i:nth-child(6) { height: 22px; animation-delay: 80ms; }
.cv-wave i:nth-child(7) { height: 10px; animation-delay: 300ms; }
@keyframes cvWave {
  0%, 100% { transform: scaleY(.4); opacity: .65; }
  50% { transform: scaleY(1); opacity: 1; }
}
.cv-rec-hint { margin: 4px 0 0; font-size: 13px; color: var(--ink-2, #555); }
.cv-rec-stop { width: 100%; }

/* Pop-in for score results */
.cv-pop { animation: cvPop 260ms cubic-bezier(.2,.9,.3,1.2); }
@keyframes cvPop {
  from { transform: scale(.94) translateY(6px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.cv-inline-score .score-grid { margin-bottom: 8px; }
.cv-inline-score.needs-review { background: rgba(220,150,40,.08); border-color: rgba(220,150,40,.28); }
.cv-inline-score .cv-asr { font-size: 13px; color: var(--ink-2, #555); margin-bottom: 8px; }
.cv-inline-score .cv-asr b { color: var(--ink, #222); }
.cv-rerecord { margin-top: 4px; }

.cv-mic-escape {
  background: none; border: 0; color: var(--muted, #8a8a8a); font-size: 12px;
  text-decoration: underline; cursor: pointer; padding: 4px 2px; align-self: center;
}
.cv-stage-read .cv-mic-escape { display: block; margin: 6px auto 0; }

/* Gated Next button disabled state */
.cv-gated .study-flow-actions button[disabled],
.cv-gated .cv-wc-next[disabled] {
  opacity: .5; cursor: not-allowed; filter: grayscale(.3);
}

@media (max-width: 560px) {
  .cv-wc-m .cv-steps { margin: 0 0 2px; }
  .cv-wc-m .cv-mini-speaker { font-size: 12px; }
  .cv-wc-m .cv-inline-panel { text-align: center; }
  .cv-wc-m .cv-inline-panel.cv-inline-error { text-align: left; }
}

/* ── 已认识 (self-declared 认识/I-know-it skip) badge ─────────────────
   Distinct from 已学(经练习): a neutral warm chip so it reads as a
   self-declared skip, NOT the indigo "已学" practiced badge. The class
   comes from wordLearningStatus().kind === 'self_known'. */
.word-status.self_known {
  color: var(--amber-ink);
  background: var(--amber-soft);
  border-color: color-mix(in srgb, var(--amber) 28%, transparent);
}

/* ===================== v5.2.0 word-card polish ===================== */
/* (2) 释义去掉突兀的填充底 —— 干净排版，桌面/手机一致 */
.word-card .word-meaning.meaning-revealed { background: transparent !important; padding: 4px 6px !important; }
.word-card .word-meaning.meaning-revealed:hover { background: transparent !important; transform: none !important; }
.cv-wc-m .word-meaning,
.cv-wc-m .word-meaning.meaning-revealed {
  background: transparent !important; border: 0 !important; padding: 4px 6px !important;
  color: var(--ink) !important; font-size: 18px !important; line-height: 1.5 !important;
  text-align: center; font-style: normal !important; min-height: 0 !important;
}
.cv-wc-m .word-meaning small { color: var(--muted); font-size: 12px; margin-top: 6px; }
.cv-wc-m .word-meaning.cv-meaning-dim { color: var(--muted, #9a9a9a) !important; font-style: normal !important; font-size: 15px !important; }
.cv-wc-m .word-example { text-align: center; }

/* (1) 按钮：统一、整齐、图标文字居中对齐 */
.cv-big-action { font-weight: 700; letter-spacing: .2px; box-shadow: 0 6px 16px rgba(84,75,196,.16); }
.cv-wc-say.cv-big-action { width: 100%; justify-content: center; padding: 13px 20px; border-radius: 14px; }
.cv-wc-m .cv-wc-actions { gap: 10px; }
.cv-wc-know, .cv-wc-next {
  padding: 13px 12px; border-radius: 14px; font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.cv-wc-know { background: var(--surface-2); color: var(--ink); border: 1px solid var(--accent-edge, rgba(0,0,0,.12)); }
.cv-wc-next { background: var(--accent); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(84,75,196,.20); }
.cv-gated .cv-wc-next[disabled] { box-shadow: none; }
.cv-flow-hint { margin: 8px 0 2px; text-align: center; font-size: 12px; color: var(--muted, #9a9a9a); }
.cv-mini-speaker { padding: 6px 14px; font-weight: 700; }
.cv-wc-tool { font-weight: 700; }
/* 桌面卡片底部动作行整齐 */
.study-flow-actions { display: flex; gap: 10px; align-items: stretch; }
.study-flow-actions .secondary-action, .study-flow-actions .primary-action { min-height: 46px; border-radius: 12px; font-weight: 700; }
.study-flow-actions .primary-action { flex: 1 1 auto; justify-content: center; }
.study-flow-actions .secondary-action { justify-content: center; }

/* (3) 手机端：直接面对卡片，设置收进齿轮，去掉练习/测评/复习入口 */
.cv-card-gear {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid var(--accent-edge, rgba(0,0,0,.10));
}
.cv-card-gear .ic { width: 17px; height: 17px; }
.cv-card-gear:active { transform: scale(.95); }
.cv-wordset-scrim { display: none; }

@media (max-width: 768px) {
  .cv-card-gear { display: inline-flex; margin-left: auto; }
  /* P0-2 A1:561-768px 桌面卡也渲染齿轮(≤560px 走 .cv-wc-m 移动卡,不会双齿轮)。
     徽章与 34px 齿轮垂直居中对齐;齿轮 margin-left:auto 把徽章组带向左是纯外观、可接受。 */
  .word-card:not(.cv-wc-m) .word-meta { align-items: center; }
  .cv-wc-m .word-meta { align-items: center; flex-wrap: wrap; }
  #view-study .words-training-panel { display: none !important; }
  /* Study word-card settings sheet: reuse the practice bottom-sheet look.
     The actual sheet chrome (fixed position, glass bg, slide-in, sticky
     header/footer, grip/title/close) is shared with the practice sheet via
     the comma-extended selectors up in the .session-settings-aside block. */
}

/* 听发音播放中状态：图标脉动，播完才进入跟读 */
.cv-big-action.cv-playing { opacity: .9; cursor: default; }
.cv-big-action.cv-playing .ic { animation: cvSpk .9s ease-in-out infinite; }
@keyframes cvSpk { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* 跟读打分：good/excellent 评价 + 继续按钮 + 例句/造句占满整行 */
.cv-verdict { display: flex; justify-content: center; margin-bottom: 8px; }
.cv-verdict span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: .2px; }
.cv-verdict.good span { background: var(--green-soft); color: var(--green-ink); }
.cv-verdict.excellent span { background: rgba(232,170,40,.20); color: #8a5a00; }
.cv-verdict.cv-anim.good span { animation: cvVerdictPop .45s cubic-bezier(.2,.9,.3,1.25); }
.cv-verdict.cv-anim.excellent span { animation: cvVerdictPop .6s cubic-bezier(.2,.9,.3,1.4); }
@keyframes cvVerdictPop { 0% { transform: scale(.55); opacity: 0; } 55% { transform: scale(1.14); } 100% { transform: scale(1); opacity: 1; } }
.cv-score-actions { display: flex; gap: 10px; margin-top: 10px; }
.cv-score-actions .secondary-action, .cv-score-actions .primary-action { flex: 1; justify-content: center; min-height: 44px; border-radius: 12px; }
/* 例句 / 口语造句 占满整行（两端） */
.cv-stage-done .tool-button-grid { grid-template-columns: 1fr 1fr; width: 100%; gap: 10px; }
.cv-stage-done .tool-button-grid .secondary-action { width: 100%; justify-content: center; }
.cv-wc-m .cv-wc-tools { grid-template-columns: 1fr 1fr; }

/* 桌面词卡：每个 stage 段改单列块级，按钮满宽、底部动作均衡对齐 */
.cv-flow-tools .tool-cluster { display: block !important; }
.cv-flow-tools .tool-cluster > div:first-child { margin-bottom: 10px; }
.cv-flow-tools .cv-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cv-flow-tools .cv-big-action { width: 100%; }
.cv-flow-tools .tool-button-grid { grid-template-columns: 1fr 1fr !important; width: 100%; gap: 10px; }
.cv-flow-tools .tool-button-grid .secondary-action { width: 100%; justify-content: center; }
.cv-flow-tools .cv-inline-panel { width: 100%; box-sizing: border-box; }
.study-flow-actions { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; }
.study-flow-actions #toggleMeaningLang { flex: 0 0 auto; }
.study-flow-actions #knowCard { flex: 1; }
.study-flow-actions #nextCard { flex: 1.3; }

/* ⑥ 重点句复习卡片：句子横排在上，播放/录音/回放按钮横排均分在下（不再挤右侧） */
.reading-practice-card { display: block !important; }
.reading-practice-card > p { margin: 8px 0 4px; }
.reading-practice-card-head { margin-bottom: 2px; }
.reading-practice-actions { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.reading-practice-actions button { flex: 1 1 0; min-width: 108px; justify-content: center; }

/* #2 逐句读：序号+句子整行在上，播放/慢速/朗读 三键横排在下（句子不再被挤换行） */
.reading-paragraph-row { grid-template-columns: auto minmax(0, 1fr) !important; align-items: start; }
.reading-paragraph-row .sentence-actions { grid-column: 1 / -1; margin-top: 10px; flex-wrap: wrap; }
.reading-paragraph-row .sentence-actions .primary-action,
.reading-paragraph-row .sentence-actions .secondary-action { flex: 1 1 auto; min-width: 120px; justify-content: center; }

/* #3 历史记录：可展开抽屉（默认收起，点标题展开看历史分数） */
.reading-history-drawer { display: block; border: 1px solid var(--accent-edge, rgba(0,0,0,.1)); border-radius: 16px; padding: 0; background: var(--surface-2); }
.reading-history-drawer > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reading-history-drawer > summary::-webkit-details-marker { display: none; }
.reading-history-drawer .reading-history-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--accent-ink, #4f46e5); white-space: nowrap; }
.reading-history-drawer .reading-history-toggle::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; margin: 0 0 3px 2px; }
.reading-history-drawer[open] > summary .reading-history-toggle::after { transform: rotate(-135deg); margin-bottom: -2px; }
.reading-history-drawer[open] > summary { border-bottom: 1px solid var(--accent-edge, rgba(0,0,0,.08)); }
.reading-history-drawer .reading-history-metrics { padding: 12px 14px 4px; }
.reading-history-drawer .reading-history-list { padding: 4px 14px 14px; }

/* 跟读打分（方案C）：总分大字 + "查看各项"可展开各项，省空间 */
.cv-score-c { border: 0; padding: 0; margin-bottom: 8px; }
.cv-score-c > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cv-score-c > summary::-webkit-details-marker { display: none; }
.cv-score-num { display: inline-flex; align-items: baseline; gap: 6px; font-size: 32px; font-weight: 800; color: var(--ink); line-height: 1; }
.cv-score-num em { font-size: 13px; font-weight: 700; font-style: normal; color: var(--muted); }
.cv-score-more { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--accent-ink, #4f46e5); white-space: nowrap; }
.cv-score-more::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; margin: 0 0 3px 1px; }
.cv-score-c[open] > summary .cv-score-more::after { transform: rotate(-135deg); margin-bottom: -1px; }
.cv-score-c-subs { display: flex; gap: 6px; margin-top: 10px; }
.cv-score-c-subs span { flex: 1; text-align: center; background: var(--surface-1, rgba(0,0,0,.04)); border-radius: 10px; padding: 6px 2px; font-size: 12px; color: var(--muted); }
.cv-score-c-subs span b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); margin-top: 1px; }

/* Daily check-in: reading/listening habit tasks */
.daily-checkin-section { gap: 12px; }
.daily-checkin-section .daily-section-head small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.daily-checkin-card { align-items: stretch; cursor: default; }
.daily-checkin-card.done { border-color: color-mix(in srgb, var(--green) 28%, transparent); background: color-mix(in srgb, var(--surface) 88%, var(--green) 12%); }
.daily-checkin-card.pending { border-color: rgba(190,130,36,.28); background: color-mix(in srgb, var(--surface) 90%, rgba(190,130,36,.12)); }
.daily-checkin-card .task-icon { flex: 0 0 auto; }
.daily-checkin-main { min-width: 0; flex: 1; display: grid; gap: 3px; }
.daily-checkin-main .dc-status-line { display: contents; }
.daily-checkin-main strong,
.daily-checkin-main span,
.daily-checkin-main small { min-width: 0; overflow-wrap: anywhere; }
.daily-checkin-main span { color: var(--muted); font-size: 13px; }
.daily-checkin-main small { color: var(--muted); font-size: 12px; }
.daily-checkin-days { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.daily-checkin-days span { width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2, rgba(0,0,0,.05)); color: var(--muted); font-size: 12px; font-weight: 800; }
.daily-checkin-days span.done { background: var(--green-soft); color: var(--green-ink); }
.daily-checkin-card > button { flex: 0 0 auto; align-self: center; white-space: nowrap; }
.teacher-checkin-grid { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.4fr); gap: 18px; align-items: start; }
.teacher-checkin-form [data-checkin-target-wrap].hidden { display: none !important; }
.teacher-checkin-list { display: grid; gap: 12px; }
.teacher-checkin-card { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 12px; }
.teacher-checkin-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.teacher-checkin-card-head > div:first-child { min-width: 0; }
.teacher-checkin-card-head strong,
.teacher-checkin-card-head p,
.teacher-checkin-card-head small { overflow-wrap: anywhere; }
.teacher-checkin-score { min-width: 88px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2, rgba(0,0,0,.05)); text-align: center; }
.teacher-checkin-score strong { display: block; font-size: 22px; line-height: 1; }
.teacher-checkin-score span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.teacher-checkin-students { display: grid; gap: 8px; }
.teacher-checkin-student-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid var(--hairline-soft, rgba(0,0,0,.1)); border-radius: 12px; background: var(--surface); }
.teacher-checkin-student-row.done { border-color: color-mix(in srgb, var(--green) 22%, transparent); }
.teacher-checkin-student-row.pending { border-color: rgba(190,130,36,.24); background: color-mix(in srgb, var(--surface) 92%, rgba(190,130,36,.1)); }
.teacher-checkin-student-row > div:first-child { min-width: 0; }
.teacher-checkin-student-row strong,
.teacher-checkin-student-row small { display: block; min-width: 0; overflow-wrap: anywhere; }
.teacher-checkin-student-row small { color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
  .teacher-checkin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* 每日打卡：竖屏适当增高，完整显示作业标题(最多2行)+打卡记录(7天点)，按钮仍留行内右侧、不过高 */
  .daily-checkin-section .daily-section-head small.daily-checkin-subtitle { display: none; }
  .daily-checkin-card { align-items: flex-start; padding: 10px 11px; gap: 8px; }
  /* 卡片较窄(嵌套内边距)，缩小图标/按钮把宽度让给标题，标题才显得全 */
  .daily-checkin-card .task-icon { margin-top: 1px; width: 38px; height: 38px; flex: 0 0 38px; }
  .daily-checkin-card .task-icon svg, .daily-checkin-card .task-icon .ic { width: 20px; height: 20px; }
  .daily-checkin-card .dc-explain,
  .daily-checkin-card .dc-meta-extra { display: none; }   /* 说明句/级别·结束日期省略，控高度 */
  .daily-checkin-main { gap: 5px; min-width: 0; }
  .daily-checkin-main strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.35; }
  /* 连续天数一行、7天打卡点单独一行（不换乱），既显作业标题又显打卡记录 */
  .daily-checkin-main .dc-status-line { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
  .daily-checkin-card .daily-checkin-days { display: inline-flex; flex-wrap: nowrap; }
  .daily-checkin-card .daily-checkin-days span { width: 15px; height: 15px; font-size: 10.5px; }
  /* 覆盖全局 max-width:460px 的按钮满宽规则，让按钮回到行内右侧自适应宽度 */
  .daily-checkin-card > button { align-self: center; width: auto; flex: 0 0 auto; padding-inline: 11px; font-size: 13px; }
  .teacher-checkin-card-head,
  .teacher-checkin-student-row { align-items: stretch; flex-direction: column; }
  .teacher-checkin-score { width: 100%; box-sizing: border-box; }
}

/* 浏览词表：顶部标题栏 + 右上角「返回卡片」关闭按钮（手机上不必再滑到最底找返回） */
.wordlist-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wordlist-bar strong { font-size: 17px; }
.wordlist-close { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hairline-soft, rgba(0,0,0,.14)); background: var(--surface); color: var(--muted); font-size: 13px; cursor: pointer; }
.wordlist-close:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) {
  /* 手机上标题栏在词表顶部，一进来右上角叉号即可返回，不必再滑到最底 */
  .wordlist-bar { margin-bottom: 10px; }
  .wordlist-close span { display: none; }   /* 窄屏只留叉号图标 */
  .wordlist-close { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
}

/* ===== UI 优化 v5：新组件（门控引导 / 首页主CTA / 词卡组进度 / 空态CTA） ===== */
.cv-study-coach { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; background: transparent; }
.cv-study-coach-card { width: min(360px, 92vw); background: var(--surface); border: 1px solid var(--hairline-soft, rgba(0,0,0,.1)); border-radius: 18px; padding: 22px 20px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.cv-coach-emoji { font-size: 30px; line-height: 1; }
.cv-study-coach-card h3 { margin: 10px 0 12px; font-size: 18px; }
.cv-coach-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cv-coach-steps li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2, rgba(0,0,0,.04)); font-weight: 600; }
.cv-coach-steps li b { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; }
.cv-coach-note { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
.cv-coach-ok { width: 100%; justify-content: center; }

.home-main-cta { width: 100%; justify-content: center; gap: 8px; margin-top: 4px; font-size: 15px; padding-block: 12px; border-radius: 14px; }
.home-cta-play { display:inline-flex; align-items:center; }
.home-cta-play .ic { width:17px; height:17px; }
.home-main-cta-secondary { font-weight: 600; }
/* 班级学生作业全部完成后的「完成态」——非按钮、不跳转，只作收尾提示 */
.home-done-state { display: flex; align-items: center; color: var(--green-ink); background: var(--green-soft); font-weight: 600; cursor: default; }
.home-done-state .ic-sm { color: var(--green-ink); }
/* 作业做完、还差今日打卡时的欢快引导按钮（绿色，区别于靛蓝的「继续」）。
   .primary-action 在 ultimate.css 用了 background !important，这里必须同样 !important 才能盖过。 */
.home-main-cta.home-main-cta-checkin { background: var(--green-strong) !important; border-color: var(--green-strong) !important; color: #fff !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--green-strong) 28%, transparent) !important; }
.home-main-cta.home-main-cta-checkin:hover { background: var(--green-strong-press) !important; border-color: var(--green-strong-press) !important; }
/* P0-1 状态感知主CTA:测验态双行(主行「继续作业测验·还剩N组」+副行「已测x/N·测完即完成」)。
   不写配色——.primary-action 配色由 ultimate.css !important 钉死,这里只调排布。 */
.home-main-cta.has-sub { flex-direction: column; gap: 2px; padding-block: 10px; }
.home-cta-main { display: inline-flex; align-items: center; gap: 8px; }
.home-cta-sub { display: block; font-size: 12px; font-weight: 500; opacity: .85; line-height: 1.3; }
/* 首页作业行 mini 进度条(P0-1):只加间距,配色同样被 ultimate.css !important 钉死,不自定义。 */
.home-check-main .daily-mini-progress { margin-top: 5px; }

.cv-card-group-progress { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.cv-cgp-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2, rgba(0,0,0,.08)); overflow: hidden; }
.cv-cgp-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .25s var(--ease, ease); }
.cv-cgp-label { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); }

.empty-state-card .empty-state-cta { margin-top: 14px; }

/* ===== 刷卡复习（抖音式一次一个：难词本 + 单元浏览 + 就地精学） ===== */
.swipe-review{max-width:440px;margin:0 auto}
.swipe-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.swipe-bar .swipe-prog{margin-left:auto;font-size:13px;color:var(--muted);font-weight:700}
.swipe-seg{display:flex;gap:4px;background:var(--surface-2, rgba(0,0,0,.05));border:0.5px solid var(--hairline-soft, rgba(0,0,0,.1));border-radius:10px;padding:3px}
.swipe-seg button{border:none;background:transparent;padding:7px 12px;border-radius:7px;font-size:13px;color:var(--muted);cursor:pointer}
.swipe-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);border:0.5px solid var(--hairline-soft, rgba(0,0,0,.1));font-weight:600}
.swipe-stage{position:relative;overflow:hidden;overscroll-behavior:contain;height:min(70vh,600px);min-height:440px;border:0.5px solid var(--hairline-soft, rgba(0,0,0,.1));border-radius:18px;background:var(--surface);outline:none}
.swipe-track{height:100%;touch-action:none;overscroll-behavior:contain;transition:transform .34s cubic-bezier(.22,.61,.36,1);will-change:transform}
.swp2-card{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 26px;box-sizing:border-box;position:relative;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.swp2-badges{position:absolute;top:26px;left:0;right:0;display:flex;gap:8px;justify-content:center}
.swp2-pill{font-size:12px;padding:3px 10px;border-radius:20px;background:var(--surface-2, rgba(0,0,0,.05));color:var(--accent)}
.swp2-pill.u{color:var(--muted)}
.swp2-pill.done{color:var(--green-ink);background:var(--green-soft);display:inline-flex;align-items:center;gap:4px}
/* 单元通关恭喜面板 */
.cv-unit-done{text-align:center;padding-block:26px}
.cv-unit-done .empty-state-card{border:none;background:transparent}
.cv-unit-done-note{font-size:12px;text-align:center;margin:10px auto 0;max-width:320px}
/* 移动端底部 tab 快捷跳转失败时的轻提示 toast */
.cv-nav-hint{ position:fixed; left:50%; bottom:calc(72px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%) translateY(8px); max-width:88%; background:rgba(30,27,50,.94); color:#fff; font-size:13px; line-height:1.5; padding:10px 16px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.22); opacity:0; pointer-events:none; z-index:1200; transition:opacity .2s ease, transform .2s ease; text-align:center; }
.cv-nav-hint.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.swp2-word{font-size:42px;font-weight:700;color:var(--ink);letter-spacing:.5px;line-height:1.12}
.swp2-rev{margin-top:14px;transition:opacity .18s ease}
/* 只显单词模式：用 visibility:hidden 彻底移出绘制（不只是 opacity:0），
   否则 iOS Safari 会把例句/释义的旧绘制留成"白块残影"，要截图/重绘才消失。 */
.swp2-card:not(.on) .swp2-rev{opacity:0;visibility:hidden;pointer-events:none}
.swp2-card.on .swp2-rev{visibility:visible}
.swp2-mean{font-size:20px;color:var(--ink)}
.swp2-ex{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.6;max-width:260px}
.swp2-flip{margin-top:16px;font-size:13px;color:var(--muted)}
.swp2-card.on .swp2-flip{visibility:hidden}
.swp2-rail{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.swp2-rail button{width:46px;height:46px;border-radius:50%;border:0.5px solid var(--hairline-soft, rgba(0,0,0,.14));background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.swp2-rail button.deep{color:var(--accent);border-color:var(--accent)}
.swp2-rail button.remove{color:var(--green-ink)}
/* 明确的文字按钮：让「精学这个词」一眼可懂，取代原来看不懂的小星标。
   听发音也从悬浮小圆挪到这一行，避免圆钮压住例句文字。 */
.swp2-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:20px}
.swp2-actions .swp2-act.play{width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--hairline-soft, rgba(0,0,0,.16));background:var(--surface);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.swp2-deep{display:inline-flex;align-items:center;gap:6px;border:none;background:var(--accent);color:#fff;padding:10px 20px;border-radius:24px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(60,50,30,.14)}
.swp2-master{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--green-ink);background:var(--surface);color:var(--green-ink);padding:10px 16px;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer}
.swp2-nav{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:12px;color:var(--muted)}
.swp2-end{gap:6px}
.swp2-end-ic{font-size:34px;color:var(--green-ink)}
.swp2-end-actions{display:flex;gap:10px;margin-top:22px}
.swipe-study{position:absolute;inset:0;background:var(--surface);overflow:auto;padding:16px;box-sizing:border-box}
.swipe-study[hidden]{display:none}
.swipe-study-close{width:100%;justify-content:center;margin-bottom:12px}
/* 精学插曲里：隐藏「下一个」（翻卡由刷卡负责）与「认识」（会跳出插曲，属误触） */
.swipe-study #nextCard,.swipe-study #knowCard{display:none !important}
.swipe-study .cv-wc-actions{display:none !important}
.swipe-toast{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);background:var(--surface);border:0.5px solid var(--hairline-soft, rgba(0,0,0,.12));border-radius:20px;padding:7px 14px;font-size:13px;color:var(--ink);opacity:0;transition:opacity .2s ease;pointer-events:none}
.swipe-toast.show{opacity:1}
/* 手机端：把「切换条 + 刷卡舞台」整体收进一屏，避免卡片过高溢出、下拉时顶部滑到
   吸顶头部下被遮挡。用 dvh 排除移动端地址栏；切换条压缩为紧凑一/两行。 */
@media (max-width:560px){
  .swipe-review{max-width:100%}
  .words-mode-toggle{margin-bottom:8px;padding:3px}
  .words-mode-toggle .wm-btn{padding:7px 16px}
  .swipe-bar{gap:6px;margin-bottom:8px}
  .swipe-seg{padding:2px}
  .swipe-seg button{padding:6px 9px;font-size:12.5px}
  .swipe-bar .swipe-prog{font-size:12px}
  /* 减去：吸顶头部 + 切换条/刷卡条 + 底部固定标签栏及留白，让整张卡落在可视带内 */
  .swipe-stage{height:calc(100vh - 348px);height:calc(100dvh - 348px);min-height:300px}
  .swp2-card{padding:24px 20px}
  .swp2-badges{top:18px}
  .swp2-word{font-size:34px}
  .swp2-mean{font-size:18px}
  .swp2-actions{margin-top:16px}
}

/* 词卡页顶部 精学/刷卡 模式切换 */
.words-mode-toggle{display:flex;justify-content:center;gap:4px;background:var(--surface-2, rgba(0,0,0,.05));border:0.5px solid var(--hairline-soft, rgba(0,0,0,.1));border-radius:12px;padding:4px;margin:0 auto 14px;width:max-content;max-width:100%}
.words-mode-toggle .wm-btn{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;padding:8px 20px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.words-mode-toggle .wm-btn.on{background:var(--accent);color:#fff}

/* 精学 / 刷卡共用词卡范围。首次选择强调意图；进入词卡后只保留紧凑状态栏。 */
#view-study .cv-study-topbar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:0 0 10px}
#view-study .cv-study-topbar .words-mode-toggle{margin:0}
.cv-word-scope-shell{width:min(100%,760px);margin:0 auto}
.cv-word-scope-shell>.words-mode-toggle{margin-bottom:12px}
.cv-word-scope-chooser{padding:clamp(18px,3vw,28px);border-radius:16px}
.cv-word-scope-heading{text-align:center;max-width:520px;margin:0 auto 18px}
.cv-word-scope-heading h2{font-size:24px;line-height:1.25;margin:3px 0 7px;letter-spacing:0}
.cv-word-scope-heading p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.cv-word-scope-unit{display:flex;flex-direction:column;gap:6px;max-width:420px;margin:0 auto 14px;color:var(--muted);font-size:13px;font-weight:600}
.cv-word-scope-unit select{width:100%;min-width:0;height:44px;border:1px solid var(--hairline-soft,rgba(0,0,0,.14));background:var(--surface);color:var(--ink);border-radius:12px;padding:0 34px 0 12px;font-size:14px;cursor:pointer;text-overflow:ellipsis}
.cv-word-scope-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cv-word-scope-option{min-width:0;min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;border:1px solid var(--hairline-soft,rgba(0,0,0,.12));background:var(--surface);color:var(--ink);border-radius:12px;padding:14px 15px;cursor:pointer}
.cv-word-scope-option>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.cv-word-scope-option strong{font-size:16px;line-height:1.3;letter-spacing:0}
.cv-word-scope-option small{font-size:12px;line-height:1.45;color:var(--muted);font-weight:400;overflow-wrap:anywhere}
.cv-word-scope-option>b{flex:0 0 auto;min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--accent-soft,rgba(84,75,196,.1));color:var(--accent);font-size:13px}
.cv-word-scope-option:focus-visible,.cv-word-range-switch:focus-visible,.cv-word-scope-unit select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cv-word-rangebar{width:min(100%,520px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.cv-word-scope-unit.compact{margin:0;max-width:none;min-width:0}
.cv-word-scope-unit.compact select{height:40px;font-size:13px;border-radius:8px;background:var(--surface)}
.cv-word-scope-level{min-width:0;height:40px;display:flex;align-items:center;padding:0 12px;border:1px solid var(--hairline-soft,rgba(0,0,0,.12));border-radius:8px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-word-range-switch{height:40px;min-width:122px;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--accent-edge,rgba(84,75,196,.28));border-radius:8px;background:var(--surface);color:var(--ink);padding:0 11px;cursor:pointer}
.cv-word-range-switch strong{min-width:0;font-size:13px;line-height:1.2;white-space:nowrap}
.cv-word-range-switch span{font-size:12px;color:var(--accent);font-weight:700}
.cv-word-scope-aside-note{font-size:13px;line-height:1.55;margin:10px 0 0}
@media (hover:hover) and (pointer:fine){.cv-word-scope-option:hover{border-color:var(--accent-edge,rgba(84,75,196,.3));background:var(--surface-2)}}
@media (min-width:900px){
  #view-study .cv-study-topbar{flex-direction:row;flex-wrap:wrap}
  #view-study .cv-study-topbar .cv-word-rangebar{width:min(520px,calc(100% - 190px))}
}
@media (max-width:560px){
  .cv-word-scope-chooser{padding:16px 13px}
  .cv-word-scope-heading{margin-bottom:14px}
  .cv-word-scope-heading h2{font-size:24px}
  .cv-word-scope-options{grid-template-columns:1fr;gap:8px}
  .cv-word-scope-option{min-height:68px;padding:11px 12px}
  .cv-word-scope-option small{font-size:12px}
  .cv-word-scope-unit select,.cv-word-scope-unit.compact select{font-size:16px}
  .cv-word-rangebar{gap:6px}
  .cv-word-range-switch{min-width:112px;padding-inline:9px}
  .cv-word-range-switch strong{font-size:12px}
}
@media (max-width:340px){
  .words-mode-toggle .wm-btn{padding-inline:13px}
  .cv-word-range-switch{min-width:104px;gap:6px}
  .cv-word-range-switch strong{max-width:72px;overflow:hidden;text-overflow:ellipsis}
}
/* 有「刷卡单元」一行时，手机舞台再压低约一行，保证卡片落在底栏之上 */
@media (max-width:560px){ #view-study.has-swipe-unit .swipe-stage{ height:calc(100vh - 402px); height:calc(100dvh - 402px); } }
/* 每日打卡「聚焦」进入朗读/听力时的顶部返回栏（只显这一篇/这一条内容） */
.reading-focus-bar{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.reading-focus-bar .eyebrow{ margin:0; }
/* 老师端：每日打卡内容多选清单（可勾选多篇/多条） */
.checkin-target-multi{ display:flex; flex-direction:column; gap:4px; max-height:200px; overflow-y:auto; border:1px solid var(--hairline-soft, rgba(0,0,0,.14)); border-radius:10px; padding:8px; margin-top:4px; background:var(--surface); }
.mini-form .checkin-target-opt{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:400; cursor:pointer; padding:3px 2px; }
/* 明确把复选框限成小方块，否则会继承表单里 input 的满宽/大高度样式变得很大 */
.checkin-target-opt input[type="checkbox"]{ appearance:auto; -webkit-appearance:checkbox; accent-color:var(--accent); width:16px !important; min-width:16px !important; max-width:16px !important; height:16px !important; min-height:16px !important; max-height:16px !important; padding:0 !important; margin:0 !important; flex:0 0 16px !important; border-radius:4px; box-sizing:border-box; }
.mini-form .checkin-target-opt span{ flex:1; min-width:0; }
.checkin-target-empty{ font-size:13px; padding:6px 2px; }
/* 学生端：一个打卡任务含多篇/多条时的子项列表（各自完成、全部完成才算当日打卡） */
.dc-subtasks{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.dc-subtask{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--hairline-soft, rgba(0,0,0,.1)); border-radius:9px; background:var(--surface); }
.dc-subtask.done{ background:rgba(45,160,90,.08); border-color:rgba(45,160,90,.28); }
.dc-subtask-tick{ flex:0 0 auto; width:18px; text-align:center; color:var(--muted); font-weight:700; }
.dc-subtask.done .dc-subtask-tick{ color:var(--green-ink); }
.dc-subtask-title{ flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-subtask button{ flex:0 0 auto; padding:5px 12px; font-size:12.5px; width:auto; }

/* Student/mobile stability overrides. Loaded after ultimate/premium, so these
   are the final guards for iPhone layout, input zoom, and bottom-tab clearance. */
@media (max-width:768px){
  body[data-view="today"] .view.active,
  body[data-view="assignments"] .view.active,
  body[data-view="study"] .view.active,
  body[data-view="listen"] .view.active,
  body[data-view="practice"] .view.active,
  body[data-view="wrong"] .view.active,
  body[data-view="quiz"] .view.active,
  body[data-view="reading"] .view.active,
  body[data-view="writing"] .view.active,
  body[data-view="growth"] .view.active,
  body[data-view="referral"] .view.active{
    padding-bottom:calc(18px + var(--cv-mobile-tabbar-clearance,112px)) !important;
  }
  input,select,textarea,
  .search-box input,.listen-search input,.mini-field input,.mini-field select,
  .settings-join-class input,.settings-password-form input,.swipe-unit-field select{
    font-size:16px !important;
  }
  #view-listen .listen-view,
  #view-listen .listen-list-card,
  #view-listen .book-audio-list{
    padding-bottom:var(--cv-mobile-tabbar-clearance,112px) !important;
    scroll-padding-bottom:var(--cv-mobile-tabbar-clearance,112px) !important;
  }
  body:has(.modal-mask:not(.hidden)) .mobile-tabbar,
  body.settings-open .mobile-tabbar,
  body.brief-open .mobile-tabbar{ display:none !important; }
  .modal-mask{
    align-items:end !important;
    place-items:end center !important;
    padding:12px !important;
    z-index:150 !important;
  }
  .speech-modal,.reading-practice-modal,.writing-viewer-card,.writing-subview-card,.auth-doc-card{
    width:min(100%,calc(100vw - 24px)) !important;
    max-height:calc(100dvh - 24px - env(safe-area-inset-bottom,0px)) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important;
    border-radius:22px !important;
  }
  .speech-modal .modal-close,
  .reading-practice-modal > .modal-close,
  .writing-viewer-card > .modal-close,
  .writing-subview-card > .modal-close,
  .auth-doc-card > .modal-close{
    position:sticky !important;
    top:0 !important;
    float:right;
    z-index:4 !important;
    background:var(--surface) !important;
    box-shadow:var(--shadow-xs) !important;
  }
  .settings-drawer{ width:min(100vw,440px) !important; max-width:100vw !important; }
  .drawer-head{ padding-top:calc(18px + env(safe-area-inset-top,0px)) !important; }
  .drawer-body{ padding-bottom:calc(var(--cv-mobile-tabbar-clearance,112px) + env(safe-area-inset-bottom,0px)) !important; }
  .assignment-archive,.assignment-type-groups,.assignment-type-list,.assignment-timeline,
  .assignment-history-row,.home-check-row,.daily-checkin-card,.task-row{ min-width:0 !important; }
  .assignment-history-title,.daily-task-title-line{ gap:8px !important; }
  .assignment-history-title strong,.home-check-main strong,.daily-task-title-line strong{
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }
}

/* ===== mobile-sheet-ui-v1（2026-08-06）：底部弹层加把手 + 标题行 + ✕ 关闭钮 ===== */
.tab-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--muted-2);
  opacity: 0.45;
  margin: 2px auto 0;
}
.tab-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 4px;
}
.tab-sheet-head .tab-sheet-title { flex: 1; min-width: 0; }
.tab-sheet .tab-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  gap: 0;
  border-radius: 999px;
  color: var(--muted);
  flex-shrink: 0;
}
.tab-sheet .tab-sheet-close svg { width: 15px; height: 15px; }
.tab-sheet .tab-sheet-close:hover { background: var(--surface-2); color: var(--ink); }

/* 听力列表计数：窄屏只留"本级别 X 条"，隐藏"全部 Y 条"避免挤压标题。 */
@media (max-width: 520px) {
  #view-listen .listen-count-total { display: none; }
}

@media (max-width:560px){
  .assignment-archive-hero{ align-items:stretch !important; }
  .assignment-archive-hero .secondary-action,.assignment-history-actions,.home-check-go,.daily-task-actions{ flex:0 0 auto !important; }
  .assignment-history-row{ grid-template-columns:34px minmax(0,1fr) auto !important; gap:10px !important; }
  .assignment-history-main small,.home-check-main small,.daily-task-main > span{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  .tab-sheet{
    bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important;
    max-height:calc(100dvh - 108px - env(safe-area-inset-bottom,0px)) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* ===== 止血批 polish-v1（2026-07-03）新增组件 ===== */

/* F9 逾期红徽章：把“已逾期”状态(expired=过 DDL 未完成)从中性琥珀改成红色，
   与“已关闭/已归档”这类无害历史态区分开——红色只留给真问题。复用现有
   .assignment-status 徽章外形，仅改配色。 */
.assignment-status.expired {
  color: #c0392b !important;
  background: rgba(239,68,68,.10) !important;
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.28);
}
html.cv-dark .assignment-status.expired {
  color: #f0a595 !important;
  background: rgba(239,68,68,.16) !important;
}

/* F10 成长曲线低数据降级卡：数据太少时不画贴底直线/陡崖，改大数字 */
.growth-curve-lite {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 90px; padding: 6px 2px;
}
.growth-curve-lite .gcl-num {
  font-size: 30px; font-weight: 800; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.growth-curve-lite .gcl-cap { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* F14 奖励类图标染点睛暖色（替换 emoji 后用） */
.ic-joy { color: var(--joy, #f59e6b); }
.ic-status-tiny { width:10px !important; height:10px !important; stroke-width:2.2; }
.ic-status-small { width:14px !important; height:14px !important; stroke-width:2.1; }
.settings-inline-notice { display:flex; align-items:flex-start; gap:7px; }
.settings-inline-notice .ic { margin-top:3px; flex:none; color:var(--amber-ink, #a65d16); }
.palette-swatch.active .swatch-check, .bg-swatch .swatch-check { display:inline-flex; align-items:center; vertical-align:middle; }
.dc-subtask-tick { display:inline-flex; align-items:center; justify-content:center; }
.axis-dot .ic, .cv-step .ic, .sentence-index .ic { width:14px; height:14px; }
.cv-stage-done { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.cv-wc-next .ic, .session-context-back .ic { width:15px; height:15px; }
.pr-head .ic { width:17px; height:17px; vertical-align:-0.2em; }
.icon-action .ic, .modal-close .ic { width:20px; height:20px; }
/* 引导浮层顶部图标：换掉 👇 后给 SVG 一个合适尺寸 */
.cv-coach-emoji .ic { width: 32px; height: 32px; }

/* ============================================================
   动效实验（沙盒 anim-lab）：老鼠跑轮(处理等待) + 水豚(空状态)
   均改方向A配色、cv-anim 命名隔离、尊重减少动效。仅沙盒包。
   ============================================================ */
.cv-anim-load, .cv-anim-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 20px 12px;
  width: 100%; box-sizing: border-box; /* 填满父容器再居中——修复放进 flex 行卡片(如 .home-today-ring)时被推到左边 */
}
.cv-anim-copy { display: flex; flex-direction: column; gap: 4px; }
.cv-anim-copy strong { font-size: 15px; font-weight: 700; color: var(--ink, #211f2b); }
.cv-anim-copy span { font-size: 12.5px; color: var(--muted, #7c7a86); }
.cv-anim-empty .cv-anim-copy { margin-bottom: 2px; }

/* Student reading/writing empty states: keep the existing mascot language, but
   place it in the panel that remains visible on phones. */
#view-reading .reading-workspace.is-empty {
  grid-template-columns: minmax(0, 1fr);
}
#view-reading .reading-workspace.is-empty .reading-task-list {
  min-height: 320px;
  place-items: center;
}
#view-reading .reading-workspace.is-empty .cv-anim-empty,
#view-writing .writing-mode-state .cv-anim-empty,
#view-writing .writing-mode-state .cv-anim-load {
  width: min(100%, 560px);
  margin: 0 auto;
}
#view-reading .reading-workspace.is-empty .empty-state-cta,
#view-writing .writing-mode-state .empty-state-cta {
  width: auto !important;
  max-width: 100%;
}
#view-writing .writing-mode-state {
  display: none;
  min-height: 360px;
  align-items: center;
  border-top: 1px solid var(--hairline-soft);
}
#view-writing .writing-mode-unavailable .writing-mode-state {
  display: grid;
}
#view-writing .writing-mode-unavailable .writing-step {
  display: none;
}

/* 老鼠跑轮 —— 老鼠暖橙(点睛)，轮子/辐条靛蓝灰 */
.cvh { --dur: 1s; position: relative; width: 12em; height: 12em; font-size: 8px; }
.cvh-wheel, .cvh-hamster, .cvh-hamster div, .cvh-spoke { position: absolute; }
.cvh-wheel, .cvh-spoke { border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%; }
.cvh-wheel { background: radial-gradient(100% 100% at center, hsla(248,25%,72%,0) 47.8%, hsl(248,24%,74%) 48%); z-index: 2; }
.cvh-hamster { animation: cvh-run var(--dur) ease-in-out infinite; top: 50%; left: calc(50% - 3.5em); width: 7em; height: 3.75em; transform: rotate(4deg) translate(-0.8em,1.85em); transform-origin: 50% 0; z-index: 1; }
.cvh-head { animation: cvh-head var(--dur) ease-in-out infinite; background: #ea8a4e; border-radius: 70% 30% 0 100% / 40% 25% 25% 60%; box-shadow: 0 -0.25em 0 #f3b184 inset, 0.75em -1.55em 0 #f8d4bd inset; top: 0; left: -2em; width: 2.75em; height: 2.5em; transform-origin: 100% 50%; }
.cvh-ear { animation: cvh-ear var(--dur) ease-in-out infinite; background: #f4b6a8; border-radius: 50%; box-shadow: -0.25em 0 #ea8a4e inset; top: -0.25em; right: -0.25em; width: 0.75em; height: 0.75em; transform-origin: 50% 75%; }
.cvh-eye { animation: cvh-eye var(--dur) linear infinite; background-color: #3a2417; border-radius: 50%; top: 0.375em; left: 1.25em; width: 0.5em; height: 0.5em; }
.cvh-nose { background: #ef9d8a; border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%; top: 0.75em; left: 0; width: 0.2em; height: 0.25em; }
.cvh-body { animation: cvh-body var(--dur) ease-in-out infinite; background: #f8d4bd; border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%; box-shadow: 0.1em 0.75em 0 #ea8a4e inset, 0.15em -0.5em 0 #f3b184 inset; top: 0.25em; left: 2em; width: 4.5em; height: 3em; transform-origin: 17% 50%; transform-style: preserve-3d; }
.cvh-limb--fr, .cvh-limb--fl { clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%); top: 2em; left: 0.5em; width: 1em; height: 1.5em; transform-origin: 50% 0; }
.cvh-limb--fr { animation: cvh-frlimb var(--dur) linear infinite; background: linear-gradient(#f3b184 80%,#ef9d8a 80%); transform: rotate(15deg) translateZ(-1px); }
.cvh-limb--fl { animation: cvh-fllimb var(--dur) linear infinite; background: linear-gradient(#f8d4bd 80%,#f4b6a8 80%); transform: rotate(15deg); }
.cvh-limb--br, .cvh-limb--bl { border-radius: 0.75em 0.75em 0 0; clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%); top: 1em; left: 2.8em; width: 1.5em; height: 2.5em; transform-origin: 50% 30%; }
.cvh-limb--br { animation: cvh-brlimb var(--dur) linear infinite; background: linear-gradient(#f3b184 90%,#ef9d8a 90%); transform: rotate(-25deg) translateZ(-1px); }
.cvh-limb--bl { animation: cvh-bllimb var(--dur) linear infinite; background: linear-gradient(#f8d4bd 90%,#f4b6a8 90%); transform: rotate(-25deg); }
.cvh-tail { animation: cvh-tail var(--dur) linear infinite; background: #f4b6a8; border-radius: 0.25em 50% 50% 0.25em; box-shadow: 0 -0.2em 0 #ef9d8a inset; top: 1.5em; right: -0.5em; width: 1em; height: 0.5em; transform: rotate(30deg) translateZ(-1px); transform-origin: 0.25em 0.25em; }
.cvh-spoke { animation: cvh-spoke var(--dur) linear infinite; background: radial-gradient(100% 100% at center, hsl(248,24%,74%) 4.8%, hsla(248,24%,74%,0) 5%), linear-gradient(hsla(248,22%,70%,0) 46.9%, hsl(248,22%,74%) 47% 52.9%, hsla(248,22%,74%,0) 53%) 50% 50% / 99% 99% no-repeat; }
@keyframes cvh-run { from,to { transform: rotate(4deg) translate(-0.8em,1.85em); } 50% { transform: rotate(0) translate(-0.8em,1.85em); } }
@keyframes cvh-head { from,25%,50%,75%,to { transform: rotate(0); } 12.5%,37.5%,62.5%,87.5% { transform: rotate(8deg); } }
@keyframes cvh-eye { from,90%,to { transform: scaleY(1); } 95% { transform: scaleY(0); } }
@keyframes cvh-ear { from,25%,50%,75%,to { transform: rotate(0); } 12.5%,37.5%,62.5%,87.5% { transform: rotate(12deg); } }
@keyframes cvh-body { from,25%,50%,75%,to { transform: rotate(0); } 12.5%,37.5%,62.5%,87.5% { transform: rotate(-2deg); } }
@keyframes cvh-frlimb { from,25%,50%,75%,to { transform: rotate(50deg) translateZ(-1px); } 12.5%,37.5%,62.5%,87.5% { transform: rotate(-30deg) translateZ(-1px); } }
@keyframes cvh-fllimb { from,25%,50%,75%,to { transform: rotate(-30deg); } 12.5%,37.5%,62.5%,87.5% { transform: rotate(50deg); } }
@keyframes cvh-brlimb { from,25%,50%,75%,to { transform: rotate(-60deg) translateZ(-1px); } 12.5%,37.5%,62.5%,87.5% { transform: rotate(20deg) translateZ(-1px); } }
@keyframes cvh-bllimb { from,25%,50%,75%,to { transform: rotate(20deg); } 12.5%,37.5%,62.5%,87.5% { transform: rotate(-60deg); } }
@keyframes cvh-tail { from,25%,50%,75%,to { transform: rotate(30deg) translateZ(-1px); } 12.5%,37.5%,62.5%,87.5% { transform: rotate(10deg) translateZ(-1px); } }
@keyframes cvh-spoke { from { transform: rotate(0); } to { transform: rotate(-1turn); } }

/* 水豚 —— 暖棕，落在暖象牙底自然 */
.cvc { width: 14em; height: 10em; position: relative; z-index: 1; --color: #d68b4d; --color2: #6b4526; transform: scale(0.62); font-size: 10px; }
.cvc-cap { width: 100%; height: 7.5em; position: relative; z-index: 1; }
.cvc-ground { width: 100%; height: 2.5em; position: relative; z-index: 1; overflow: hidden; }
.cvc-body { width: 85%; height: 100%; background: linear-gradient(var(--color),90%,var(--color2)); border-radius: 45%; position: relative; z-index: 1; animation: cvc-movebody 1s linear infinite; }
.cvc-head { width: 7.5em; height: 7em; bottom: 0; right: 0; position: absolute; background-color: var(--color); z-index: 3; border-radius: 3.5em; box-shadow: -1em 0 var(--color2); animation: cvc-movebody 1s linear infinite; }
.cvc-ear { width: 2em; height: 2em; background: linear-gradient(-45deg,var(--color),90%,var(--color2)); top: 0; left: 0; border-radius: 100%; position: absolute; overflow: hidden; z-index: 3; }
.cvc-ear:nth-child(2) { left: 5em; background: linear-gradient(25deg,var(--color),90%,var(--color2)); }
.cvc-ear2 { width: 100%; height: 1em; background-color: var(--color2); bottom: 0; left: 0.5em; border-radius: 100%; position: absolute; transform: rotate(-45deg); }
.cvc-mouth { width: 3.5em; height: 2em; background-color: var(--color2); position: absolute; bottom: 0; left: 2.5em; border-radius: 50%; display: flex; justify-content: space-around; align-items: center; padding: 0.5em; }
.cvc-lips { width: 0.25em; height: 0.75em; border-radius: 100%; transform: rotate(-45deg); background-color: var(--color); }
.cvc-lips:nth-child(2) { transform: rotate(45deg); }
.cvc-eye { width: 2em; height: 0.5em; background-color: var(--color2); position: absolute; bottom: 3.5em; left: 1.5em; border-radius: 5em; transform: rotate(45deg); }
.cvc-eye:nth-child(4) { transform: rotate(-45deg); left: 5.5em; width: 1.75em; }
.cvc-leg { width: 6em; height: 5em; bottom: 0; left: 0; position: absolute; background: linear-gradient(var(--color),95%,var(--color2)); z-index: 2; border-radius: 2em; animation: cvc-movebody 1s linear infinite; }
.cvc-leg2 { width: 1.75em; height: 3em; bottom: 0; left: 3.25em; position: absolute; background: linear-gradient(var(--color),80%,var(--color2)); z-index: 2; border-radius: 0.75em; box-shadow: inset 0 -0.5em var(--color2); animation: cvc-moveleg 1s linear infinite; }
.cvc-leg2:nth-child(3) { width: 1.25em; left: 0.5em; height: 2em; animation: cvc-moveleg2 1s linear infinite 0.075s; }
.cvc-line { width: 50em; height: 0.5em; border-top: 0.5em dashed var(--color2); animation: cvc-moveline 10s linear infinite; }
@keyframes cvc-moveleg { 0% { transform: rotate(-45deg) translateX(-5%); } 50% { transform: rotate(45deg) translateX(5%); } 100% { transform: rotate(-45deg) translateX(-5%); } }
@keyframes cvc-moveleg2 { 0% { transform: rotate(45deg); } 50% { transform: rotate(-45deg); } 100% { transform: rotate(45deg); } }
@keyframes cvc-movebody { 0% { transform: translateX(0); } 50% { transform: translateX(2%); } 100% { transform: translateX(0); } }
@keyframes cvc-moveline { 0% { transform: translateX(0); opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; transform: translateX(-70%); } }

/* 朗读/口语评分弹窗内的老鼠 loader 间距 */
.cv-rec-loader { margin: 8px 0 4px; }

/* 行内小尺寸老鼠（口语打分、造句检查等窄面板用） */
.cv-anim-compact { flex-direction: row; gap: 14px; padding: 10px 12px; text-align: left; justify-content: flex-start; align-items: center; }
.cv-anim-compact .cvh { font-size: 4.5px; flex: none; }
.cv-anim-compact .cv-anim-copy { align-items: flex-start; }
.cv-anim-compact .cv-anim-copy strong { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .cvh *, .cvc * { animation: none !important; }
}

@media (max-width: 560px) {
  #view-reading .reading-workspace.is-empty .reading-task-list,
  #view-writing .writing-mode-state {
    min-height: 330px;
  }
  #view-reading .reading-workspace.is-empty .cv-anim-empty,
  #view-writing .writing-mode-state .cv-anim-empty,
  #view-writing .writing-mode-state .cv-anim-load {
    padding: 18px 8px;
  }
}

@media (max-width: 340px) {
  #view-reading .reading-workspace.is-empty .reading-task-list,
  #view-writing .writing-mode-state {
    min-height: 310px;
  }
  #view-reading .reading-workspace.is-empty .cv-anim-copy span,
  #view-writing .writing-mode-state .cv-anim-copy span {
    font-size: 12px;
    line-height: 1.5;
  }
}

/* ============================================================
   难词本(错题本)卡片布局重构 (2026-07-04)
   病灶：.compact-word 用 grid `1fr auto`，右侧4个横排文字按钮把 auto 列撑到 376px，
   内容列(1fr) 反被挤到 97px → 标签竖堆成6行、单词释义暴力换行、卡高 341px、整页近 9000px。
   改法：难词本卡片改单列纵向堆叠(内容独占整段宽度→标签天然横排一行)，操作按钮下沉为
   底部一条 hairline 工具条，「移出难词本」右推分区、玫红点睛防误触。标签已在 app.js 精简为3个。
   注：ultimate.css 对 .compact-word / 按钮下了 !important，覆盖这些具体属性处须带 !important；
   断点用 760/460(与 styles.css 一致)，勿用 560。
   ============================================================ */

/* 卡片：grid 1fr auto → 纵向 flex，内容独占整段宽度 */
#view-wrong .wrong-word-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px 14px;
}
#view-wrong .wrong-word-card > div:first-child { min-width: 0; }

/* 标签行：3个小 pill 横排一行，不再竖堆 */
#view-wrong .wrong-word-card .word-meta {
  justify-content: flex-start;
  gap: 6px;
  margin: 0 0 2px;
}
#view-wrong .wrong-word-card .badge {
  min-height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
#view-wrong .wrong-word-card .badge-wrong-count {
  background: var(--cv-rose-soft) !important;  /* 覆盖 ultimate.css `.badge{...!important}` */
  color: var(--cv-rose) !important;
}

/* 单词/释义/例句：整宽、行高压紧，释义最多2行、例句1行，保证卡矮可扫读 */
#view-wrong .wrong-word-card strong { font-size: 18px; line-height: 1.25; }
#view-wrong .wrong-word-card p {
  margin: 2px 0 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#view-wrong .wrong-word-card small {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 操作：底部工具条，横排小按钮 + hairline 分隔；「移出」右推分区、玫红点睛 */
#view-wrong .wrong-word-card .inline-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline-soft, rgba(120, 120, 140, 0.14));
}
#view-wrong .wrong-word-card .inline-actions .secondary-action,
#view-wrong .wrong-word-card .inline-actions .primary-action {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 11px;
  box-shadow: none !important;
}
#view-wrong .wrong-word-card .inline-actions .primary-action {
  margin-left: auto;                 /* 「移出难词本」推到最右，与3个学习动作分区 */
  color: var(--cv-rose) !important;
  background: var(--cv-rose-soft) !important;
  border: 1px solid transparent !important;
}
#view-wrong .wrong-word-card .inline-actions .primary-action:hover {
  background: #fbdbe3 !important;
}

/* 造句面板：flex 末子项天然全宽 */
#view-wrong .wrong-word-card .wrong-ai-coach { margin-top: 10px; }

/* 列表间距略收 */
#view-wrong .wrong-book-list { gap: 8px; }

/* 手机 ≤460：按钮仍一排(base flex,4个小按钮在360px内放得下,比2×2更紧凑)，触控加到42px；
   标签更小；释义放开到3行。「移出」靠 base 的 margin-left:auto 仍右推分区。 */
@media (max-width: 460px) {
  #view-wrong .wrong-word-card .inline-actions .secondary-action,
  #view-wrong .wrong-word-card .inline-actions .primary-action {
    min-height: 42px;
    width: auto;   /* 覆盖 styles.css `@460 .primary/secondary-action{width:100%}`，否则4按钮竖成4行 */
  }
  #view-wrong .wrong-word-card .badge { min-height: 18px; padding: 0 7px; font-size: 11px; }
  #view-wrong .wrong-word-card strong { font-size: 17px; }
  #view-wrong .wrong-word-card p { -webkit-line-clamp: 3; }
}

/* Mobile detail fixes: keep the track number scannable and give the writing
   topic enough room for its example placeholder. */
@media (max-width: 560px) {
  .book-audio-row {
    grid-template-columns: 40px minmax(0, 1fr) auto 38px !important;
  }
  .book-audio-track {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    font-size: 11px !important;
    white-space: nowrap;
  }
  .writing-prompt-controls {
    grid-template-columns: minmax(0, 1fr) 84px !important;
    grid-template-areas: "topic topic" "count btn" !important;
  }
}

/* ===== 三端大修 UI 独立批次：移动端层级、滚动与安全区 =====
   只修布局/可访问性，不改变现有品牌色、字号体系或组件外观。 */
body.settings-open,
body.dialog-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.settings-drawer,
.drawer-body {
  overscroll-behavior: contain;
}

/* 设置打开时底部导航已经隐藏，因此抽屉只保留真实安全区，不再重复预留整条导航高度。 */
.drawer-body {
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 1180px) {
  /* 平板也会显示固定底栏；所有模态层必须在其上方，并在打开时收起底栏。 */
  body:has(.modal-mask:not(.hidden)) .mobile-tabbar,
  body.dialog-open .mobile-tabbar,
  body.settings-open .mobile-tabbar,
  body.brief-open .mobile-tabbar,
  body.session-settings-open .mobile-tabbar {
    display: none !important;
  }

  .modal-mask { z-index: 150 !important; }
  .settings-scrim { z-index: 155 !important; }
  .settings-drawer { z-index: 160 !important; }
}

@media (max-width: 768px) {
  /* 页面只由 .main 统一为固定底栏留一次空间；各 view 不再叠加第二份 112px。 */
  body[data-view="today"] .view.active,
  body[data-view="assignments"] .view.active,
  body[data-view="study"] .view.active,
  body[data-view="listen"] .view.active,
  body[data-view="practice"] .view.active,
  body[data-view="wrong"] .view.active,
  body[data-view="quiz"] .view.active,
  body[data-view="reading"] .view.active,
  body[data-view="writing"] .view.active,
  body[data-view="growth"] .view.active,
  body[data-view="referral"] .view.active {
    padding-bottom: 18px !important;
  }

  body[data-view="practice"] .view.active:has(.session-live),
  body[data-view="quiz"] .view.active:has(.session-live) {
    padding-bottom: 0 !important;
  }

  #view-listen .listen-view,
  #view-listen .listen-list-card,
  #view-listen .book-audio-list {
    padding-bottom: 0 !important;
    scroll-padding-bottom: 18px !important;
  }

  /* 首页跟随整页自然滚动，避免卡片内部再出现一个抢手势的小滚动区。 */
  body[data-view="today"] .home-scroll-list {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .drawer-body {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   P0-3 quiz 离开确认层(.cv-quiz-guard)
   挂 document.body,z-index 120 > 底部 tab 栏 z-90;
   按钮刻意竖排(field-stack),styles.css 460px 下 width:100% 陷阱因此无害;
   不覆盖按钮颜色,不与 ultimate.css !important 对抗。
   ============================================================ */
.cv-quiz-guard {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .45);
  padding: 20px;
}

.cv-quiz-guard-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  padding: 20px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .25);
}

.cv-quiz-guard-card h3 {
  margin: 0 0 8px;
}

.cv-quiz-guard-card p {
  margin: 0 0 14px;
  color: var(--muted, #64748b);
}

.cv-quiz-guard-card .field-stack {
  gap: 8px;
}

/* ============================================================
   P1-2 进度口径统一:作业面板三步轴(.assignment-step-axis)
   + 折叠统计(.assignment-extra-stats) + 轮末结算复习本小卡(.review-book-card)
   全部为新增组件类;不动 ultimate.css 的 .badge/按钮 !important 规则。
   ============================================================ */
.assignment-step-axis {
  list-style: none;
  display: flex;
  margin: 4px 0;
  padding: 0;
}

.assignment-step-axis li {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
  position: relative;
  text-align: center;
}

.assignment-step-axis li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 12px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background: rgba(156, 184, 220, .5);
}

.assignment-step-axis li.done:not(:last-child)::after {
  background: rgba(47, 140, 104, .5);
}

.assignment-step-axis .axis-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  background: #eef3fa;
  color: var(--muted);
  border: 1px solid rgba(156, 184, 220, .5);
}

.assignment-step-axis li.done .axis-dot {
  background: #effcf5;
  color: #2f8c68;
  border-color: rgba(47, 140, 104, .4);
}

.assignment-step-axis .axis-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.assignment-step-axis li small {
  font-size: 11px;
  color: var(--muted);
}

.assignment-extra-stats summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
  padding: 4px 0;
}

.assignment-extra-stats[open] summary {
  margin-bottom: 8px;
}

.review-book-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed rgba(156, 184, 220, .55);
  border-radius: 12px;
  background: var(--surface, #fff);
  text-align: left;
}

.review-book-card strong {
  display: block;
  font-size: 14.5px;
}

.review-book-card small {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 460px) {
  /* styles.css 同断点给 .secondary-action 塞 width:100%,这里覆盖回 auto,防止「去复习」按钮撑满整行把小卡挤成竖排 */
  .review-book-card .secondary-action {
    width: auto;
    flex: 0 0 auto;
  }
}

/* P1-1 作业完成终局屏 */
.assignment-complete-final .assignment-complete-hero { text-align: center; padding: 8px 0 4px; }
.assignment-complete-trophy { display: inline-block; font-size: 56px; line-height: 1; margin-bottom: 6px; animation: cv-trophy-pop 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; }
.assignment-complete-trophy .ic { width:56px; height:56px; stroke-width:1.55; color:var(--joy-ink, #b96b25); }
.assignment-complete-title { margin: 4px 0 2px; }
@keyframes cv-trophy-pop { 0% { transform: scale(0.3) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.15) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
html.cv-reduce-motion .assignment-complete-trophy { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .assignment-complete-trophy { animation: none !important; } }

/* P1-3 作业测验体量预告弹层:mask/指标卡/关闭钮/按钮全部复用现有类,这里只补卡片尺寸与规则列表。
   styles.css @media(max-width:460) 会给 .primary-action/.secondary-action 塞 width:100%,
   弹层内两钮在手机上竖排铺满是想要的效果,故意不覆盖成 width:auto。 */
.assignment-quiz-preview-card { width: min(560px, 100%); max-height: min(80vh, 640px); overflow: auto; position: relative; padding: 24px 22px; border-radius: 24px; }
.assignment-quiz-preview-rules { margin: 14px 0 4px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.65; color: var(--muted, #5a6b8a); }
.assignment-quiz-preview-card .inline-actions { margin-top: 14px; }

/* ============ 5.3.0 R1 止血批A ============ */

/* R1-a 测评/单元选择块「已学」断字：数字与"已学"锁死在一行，格子内不折行 */
.unit-pill span { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.unit-pill span small { white-space: nowrap; flex: 0 0 auto; }

/* R1-b 「生成题目」等窄容器里的次级按钮禁止文字折行 */
.writing-prompt-controls .secondary-action,
#generateWritingPrompt { white-space: nowrap; }

/* R1-c 老师端柱状图：0 值不再画成满高底槽——轨道弱化为透明+底线，柱体贴底生长 */
.bar-track {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--hairline, rgba(120, 120, 140, .28)) !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.bar-track span {
  min-height: 0 !important;
  border-radius: 8px 8px 2px 2px !important;
}
html.cv-dark .bar-track { border-bottom-color: var(--hairline, rgba(255, 255, 255, .16)) !important; }

/* ============ 5.3.0 R2 止血批B（对比度与最小字号） ============ */

/* R2-c 暗色主题主按钮：白字对 #7d7bf5 仅 3.49:1，改用深墨字（≈5.2:1）。
   打卡绿底（refine 自己的 #1f8a54，级联真赢家）和 loading 透明字保持原色；
   .danger-action 不排除——其红底实际被 ultimate 的 accent 渐变盖掉，线上就是紫底，同样需要深墨字。 */
html.cv-dark .primary-action:not(.home-main-cta-checkin):not(.loading) { color: #14142a !important; }
html.cv-dark .primary-action:not(.home-main-cta-checkin):not(.loading) svg { color: inherit !important; }

/* ═══════════ 5.3.0 R5.1 今日计划 · A档去框（每屏最多一层带框容器） ═══════════
   原则：外壳透明、区块直接落在页面底色上；「当前作业」「每日打卡」各自是唯一一层卡，
   卡内行不再各自带框，用分隔线分组；完成态由绿色横幅统一表达（环隐藏）。 */

/* 1) 外层大卡壳 → 透明容器 */
body[data-view="today"] .today-plan-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2) 问候区去卡：小字问候行 + 大名字 + 班级副行；头像圆块隐藏（侧栏已有用户卡，删减台账#1） */
.home-greeting-strip,
html:not(.cv-dark) .home-greeting-strip,
html.cv-dark .home-greeting-strip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 2px 4px !important;
}
.home-greeting-strip .home-hello-mark { display: none !important; }
.home-hello-copy span {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  letter-spacing: .01em !important;
}
.home-hello-copy strong {
  font-size: 27px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.22 !important;
}
.home-hello-copy small {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  margin-top: 3px !important;
}

/* 3) 进度环去卡；全部完成（作业+打卡）时环隐藏、由绿色横幅统一表达 */
.student-home .home-today-ring {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 8px 2px !important;
}
.student-home .home-today-ring:has(+ .home-main-cta.home-done-state) { display: none !important; }
.home-main-cta.home-done-state {
  background: var(--green-soft) !important;
  color: var(--green-ink) !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}
.home-main-cta.home-done-state .ic-sm { width: 20px; height: 20px; }

/* 4) 「当前作业」「每日打卡」卡内行去框 → 分隔线 */
.home-action-list { border-radius: 16px !important; padding: 8px 16px 12px !important; }
.home-checklist { gap: 0 !important; }
.home-scroll-list { gap: 0 !important; }
.home-check-row {
  border: 0 !important;
  background: transparent !important;
  border-radius: 10px !important;
  padding: 12px 4px !important;
}
.home-check-row + .home-check-row { border-top: 1px solid var(--hairline-soft) !important; }
.home-check-row:hover { background: var(--surface-2) !important; border-color: transparent !important; }
.daily-checkin-section .daily-checkin-card {
  border: 0 !important;
  border-radius: 10px !important;
  padding: 12px 4px !important;
  background: transparent !important;
}
.daily-checkin-section .daily-checkin-card + .daily-checkin-card { border-top: 1px solid var(--hairline-soft) !important; }
.daily-checkin-section .daily-checkin-card.done { background: color-mix(in srgb, var(--green-soft) 55%, transparent) !important; padding: 12px 10px !important; }

/* 5) 「全部作业」捷径 → 轻量行（图标块与「作业中心」小标视觉冗余，删减台账#2） */
.home-shortcut-strip .assignment-shortcut-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  grid-template-columns: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 6px 4px !important;
  box-shadow: none !important;
}
.assignment-shortcut-row .task-icon { display: none !important; }
.assignment-shortcut-row .daily-status { display: none !important; }
.assignment-shortcut-row .daily-task-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}
.assignment-shortcut-row .daily-task-title-line { display: inline-flex !important; }
.assignment-shortcut-row .daily-task-main > span {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.assignment-shortcut-row .daily-task-actions { flex: none !important; margin: 0 !important; }

/* 5b) 移动端修正：旧压缩规则按「头像|名字|工具」三列布局，头像隐藏后需重排 */
@media (max-width: 560px) {
  .home-greeting-strip {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 4px 2px 2px !important;
  }
  .home-greeting-strip .home-hello-copy span { display: none !important; }
  .home-greeting-strip .home-hello-copy strong { font-size: 21px !important; }
  .home-greeting-strip .home-hello-copy small { display: block !important; font-size: 12px !important; }
  .assignment-shortcut-row .daily-task-main { width: auto !important; }
  .assignment-shortcut-row .daily-task-main > span { display: none !important; }
  /* styles.css 手机端给 .secondary-action 与 .daily-task-actions 塞 width:100%（项目已知陷阱），这里收回 */
  .assignment-shortcut-row .daily-task-actions { width: auto !important; }
  .assignment-shortcut-row .daily-task-actions .secondary-action { width: auto !important; }
}

/* 6) 右栏手机端回归：跟在主列下方（找回 streak 与快速过一词） */
@media (max-width: 1180px) {
  body[data-view="today"] .cv-home-rail {
    display: grid !important;
    position: static !important;
    margin-top: 18px;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}
@media (min-width: 561px) and (max-width: 1180px) {
  body[data-view="today"] .cv-home-rail { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ═══════════ 5.3.0 R5.2 朗读练习页 · A档去框 + 暖橙需练句 ═══════════
   reading-card 是唯一一层框；整篇总分区改为色差条（surface-2 圆角，无边框）；
   句子行去框改分隔线，按钮收敛为行内小操作；需练句整行暖橙渐变 + 「练这句」。 */

/* 整篇总分区：色差条 */
.reading-full-card {
  background: var(--surface-2) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.reading-fulltext-drawer { grid-column: 1 / -1; }
.reading-fulltext-drawer > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-ink);
  padding: 6px 0 2px;
  list-style-position: inside;
}
.reading-fulltext-drawer .reading-full-text { margin-top: 6px; }

/* 逐句练习列表头（指导语只说一次） */
.sentence-list-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 2px 4px;
}
.sentence-list-head strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.sentence-list-head small { font-size: 12.5px; color: var(--muted); }

/* 句子行：去框 → 分隔线 */
.sentence-row {
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  padding: 13px 4px !important;
}
.sentence-row + .sentence-row { border-top: 1px solid var(--hairline-soft) !important; }
.sentence-index {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  background: var(--surface-2);
  color: var(--muted);
  align-self: start;
  margin-top: 2px;
}
.sentence-index.done { background: var(--green-soft); color: var(--green-ink); }
.sentence-index.weak { background: var(--joy-soft); color: var(--joy-ink); }

/* 行内小操作按钮（覆盖 styles.css 把 actions 变两列网格拉伸按钮的旧规则） */
.sentence-actions.reading-actions {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px !important;
}
.reading-mini-btn {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  width: auto !important;
}
.reading-mini-btn .ic-sm { width: 13px; height: 13px; }
/* 覆盖本文件 2490-2493 的旧版行布局（flex:1 + min-width:120 会把小按钮拉满） */
.reading-paragraph-row .sentence-actions .primary-action.reading-mini-btn,
.reading-paragraph-row .sentence-actions .secondary-action.reading-mini-btn {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
}
.reading-paragraph-row .sentence-actions.reading-actions { margin-top: 8px; }
.sentence-actions .secondary-action.reading-mini-btn {
  background: transparent !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
}

/* 需练句：暖橙渐变整行 + 橙色行动点 */
.sentence-row.is-weak {
  background: linear-gradient(90deg, var(--joy-soft), transparent 72%) !important;
  margin: 0 -6px;
  padding: 13px 10px !important;
}
.sentence-row.is-weak + .sentence-row { border-top-color: transparent !important; }
.reading-weak-note { display: block; color: var(--joy-ink) !important; font-weight: 700; margin-top: 3px; }
.primary-action.reading-weak-cta {
  background: linear-gradient(135deg, #f7b07f, #f2895a) !important;
  border-color: transparent !important;
  color: #4a2410 !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--joy) 30%, transparent) !important;
}
html.cv-dark .primary-action.reading-weak-cta { color: #351a0b !important; }

/* 历史区块的三个指标盒去框（色差保留在抽屉内） */
.reading-history-metrics article {
  border: 0 !important;
  background: var(--surface-2) !important;
  border-radius: 12px !important;
}

@media (max-width: 560px) {
  .sentence-actions.reading-actions { justify-content: flex-start; }
  .sentence-actions .reading-mini-btn { width: auto !important; flex: 0 0 auto !important; }
}

/* ═══════════ 5.3.0 R5.3 词表 · 行去框 + 轻量行内操作 ═══════════
   （难词本 #view-wrong 已有自己的布局，不受影响） */
.word-list { gap: 0 !important; }
.word-list .compact-word {
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 12px 4px !important;
}
.word-list .compact-word:hover {
  transform: none !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}
.word-list .compact-word + .compact-word { border-top: 1px solid var(--hairline-soft) !important; }
.cw-mini {
  min-height: 32px !important;
  width: auto !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  border-radius: 9px !important;
  background: transparent !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  gap: 4px !important;
}
.cw-mini .ic-sm { width: 13px; height: 13px; }
@media (max-width: 560px) {
  .word-list .compact-word { grid-template-columns: 1fr !important; }
  .compact-word-ops { justify-content: flex-start; }
  .compact-word-ops .cw-mini { width: auto !important; flex: 0 0 auto !important; }
}

/* ═══════════ 5.3.0 R5.4 听力库 · 教材分组 + 编号网格 ═══════════
   行标题去重后行体极短，铺成自适应多列网格；分组条（refine.js 注入）横跨整行。 */
#view-listen .book-audio-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 4px 10px !important;
}
#view-listen .cv-listen-divider { grid-column: 1 / -1; }
#view-listen .book-audio-row {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 6px 8px !important;
  min-height: 44px;
}
#view-listen .book-audio-row:hover { background: var(--surface-2) !important; }
#view-listen .book-audio-row.active { background: var(--accent-soft) !important; }
#view-listen .book-audio-play { width: 34px !important; height: 34px !important; flex: none; }
#view-listen .book-audio-main strong {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-listen .book-audio-favorite { width: 32px !important; height: 32px !important; }
@media (max-width: 560px) {
  #view-listen .book-audio-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
}

/* ═══════════ 5.3.0 R5.5 学生·全部作业 · 四层嵌套 → 两层 ═══════════
   页头与区块壳透明化；类型分组卡是唯一一层框；作业行去框改分隔线。 */
#view-assignments .assignment-archive-hero,
#view-assignments .assignment-archive-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#view-assignments .assignment-archive-hero { padding: 4px 2px 0 !important; }
#view-assignments .assignment-archive-hero h2 { font-size: 24px; letter-spacing: -0.01em; }
/* mobile-sheet-ui-v1: 标题行（标题 + 图标刷新钮），说明压成一句。 */
#view-assignments .assignment-archive-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
#view-assignments .assignment-archive-title-row h2 { margin: 0; }
#view-assignments .assignment-archive-refresh {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px !important;
  flex-shrink: 0;
}
#view-assignments .assignment-archive-refresh svg { width: 16px; height: 16px; }
#view-assignments .assignment-archive-refresh[aria-busy="true"] svg { animation: cv-spin 0.9s linear infinite; }
#view-assignments .assignment-archive-section .section-head h3 { font-size: 17px; }
#view-assignments .assignment-type-group {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: 16px !important;
}
#view-assignments .assignment-history-row {
  border: 0 !important;
  background: transparent !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 12px 6px !important;
}
#view-assignments .assignment-history-row + .assignment-history-row { border-top: 1px solid var(--hairline-soft) !important; }
#view-assignments .assignment-history-row.clickable:hover { background: var(--surface-2) !important; transform: none !important; }

/* ═══════════ 5.3.0 R5.7 老师端 ═══════════ */
/* 空班级三步引导 */
.teacher-empty-guide {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--accent-soft);
}
.teacher-empty-guide strong { display: block; font-size: 14.5px; margin-bottom: 6px; }
.teacher-empty-guide ol { margin: 0 0 10px; padding-left: 20px; font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.teacher-empty-guide .secondary-action { width: auto !important; }

/* 布置词汇的选词格（R9 便捷性重做）：
   序号入流（不再绝对定位，杜绝错位）；单词 15px 完整可读；释义一行；
   选中态 = 主色描边 + 软底 + 右上角 ✓，一眼可辨、整格可点。 */
.vocab-word-option {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 1px 8px !important;
  align-items: baseline !important;
  min-height: 54px !important;
  padding: 9px 26px 9px 10px !important;
  border-radius: 12px !important;
}
.vocab-word-option .vocab-word-number {
  grid-row: 1;
  grid-column: 1;
  width: auto !important; height: auto !important;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--muted-2) !important;
  background: transparent !important;
  text-align: right;
}
.vocab-word-option .vocab-word-main {
  grid-row: 1;
  grid-column: 2;
  padding: 0 !important;
  min-width: 0;
}
.vocab-word-option .vocab-word-main strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-break: break-word;
  display: block;
}
.vocab-word-option .vocab-word-main small { display: none !important; }
.vocab-word-option .vocab-word-meaning {
  grid-row: 2;
  grid-column: 2;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vocab-word-option.selected {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
.vocab-word-option.selected::after {
  content: '';
  position: absolute;
  top: 6px; right: 8px;
  width: 14px; height: 14px;
  background: var(--accent-ink);
  -webkit-mask: var(--cv-icon-check) center / contain no-repeat;
  mask: var(--cv-icon-check) center / contain no-repeat;
}
@media (max-width: 560px) {
  .vocab-word-picker { grid-template-columns: 1fr !important; }
}

/* 协议/学习数据文档弹层：手机媒体块把 .modal-mask 压到 150（低于抽屉 160），
   这里把文档层重新抬到抽屉之上（R9-fix，任何视口生效） */
.auth-doc-mask { z-index: 12000 !important; }

/* 孤 tab 时底部让位清零（enhance.js 置 body.cv-no-tabbar）。
   R9-fix：hidden 属性和行内样式都可能被其它路径复位，这里用类选择器一锤定音。 */
body.cv-no-tabbar { --cv-mobile-tabbar-clearance: 0px; }
body.cv-no-tabbar .mobile-tabbar { display: none !important; }

/* R11b：老师底栏启用后（enhance.js 置 body.cv-teacher-tabbar），手机端页内那排
   区块 chip 与底栏重复 → 隐藏；桌面（>1180 无底栏）保留。
   底栏靠程序点击这些 chip 导航，display:none 不影响 .click()。删减台账#R11b */
@media (max-width: 1180px) {
  body.cv-teacher-tabbar .teacher-tabs { display: none !important; }
}

/* 禁用态主按钮降为幽灵样式，可用按钮的层级一目了然（写作页 OCR 钮等） */
.primary-action[disabled], .primary-action:disabled {
  background: var(--surface-2) !important;
  background-image: none !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  border: 1px dashed var(--hairline) !important;
}

/* ═══════════ 5.3.0 R5.6 成长档案 · 手机端徽章双列（原一行一枚要滚两三屏） ═══════════ */
@media (max-width: 560px) {
  .cv-ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 10px !important; }
  .cv-ms-grid .cv-b9-card { padding: 22px 8px 12px !important; }
}

/* ═══════════ 5.3.0 R6 无障碍 ═══════════ */
/* 跳到主内容（键盘 Tab 第一下出现）。
   只在已登录（应用壳可见）时存在——登录页上它会指向隐藏内容；
   配色用固定深墨底+白字，任何主题下对比度 ≥12:1（R7-fix）。 */
.cv-skip-link { display: none; }
html.cv-has-session .cv-skip-link {
  display: block;
  position: fixed;
  top: -48px; left: 12px;
  z-index: 100001;
  padding: 10px 16px;
  border-radius: 0 0 12px 12px;
  background: #14142a;
  color: #ffffff;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  transition: top .15s ease;
}
html.cv-has-session .cv-skip-link:focus-visible { top: 0; }

/* R10：「大字」功能按用户决策下线，规则移除（原 zoom 1.06） */

/* ═══════════ 5.3.0 R8 写作页 · A档去框（左右各一层卡，内部全部拉平） ═══════════ */
/* 页头字阶 */
#view-writing aside.surface-card > h2 { font-size: 22px; letter-spacing: -0.01em; margin-bottom: 2px; }

/* 评分标准框 → 一行小字 */
#view-writing .writing-level-lock {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 2px 2px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
#view-writing .writing-level-lock span,
#view-writing .writing-level-lock strong,
#view-writing .writing-level-lock small { white-space: nowrap !important; }
#view-writing .writing-level-lock span { font-size: 12px !important; color: var(--muted) !important; letter-spacing: 0 !important; text-transform: none !important; }
#view-writing .writing-level-lock strong { font-size: 12.5px !important; color: var(--accent-ink) !important; }
#view-writing .writing-level-lock small { font-size: 12px !important; color: var(--muted-2) !important; }

/* 自动生成题目区 → 分隔线小节（不再是卡中卡） */
#view-writing .writing-prompt-generator {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-top: 1px solid var(--hairline-soft) !important;
  border-radius: 0 !important;
  padding: 12px 2px 4px !important;
  margin-top: 8px !important;
}

/* 上传区：保留虚线拖放语义，但降饱和收高度 */
#view-writing .upload-drop {
  background: transparent !important;
  border: 1.5px dashed var(--hairline) !important;
  border-radius: 14px !important;
  padding: 14px 12px !important;
}
#view-writing .upload-drop:hover { border-color: var(--accent-edge, var(--accent)) !important; }
#view-writing .writing-upload-trigger {
  width: 100%;
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.writing-image-picker-card { width: min(440px, 100%); padding: 26px; }
.writing-image-picker-card h2 { margin: 4px 0 8px; padding-right: 48px; }
.writing-image-picker-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.writing-image-picker-actions button { min-width: 0; min-height: 88px; display: grid; place-content: center; gap: 4px; text-align: center; }
.writing-image-picker-actions strong,
.writing-image-picker-actions small { display: block; min-width: 0; overflow-wrap: anywhere; }
.writing-image-picker-actions small { font-size: 12px; font-weight: 600; opacity: .72; }

@media (max-width: 420px) {
  .writing-image-picker-card { width: calc(100vw - 24px) !important; padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important; }
  .writing-image-picker-actions { grid-template-columns: 1fr; }
  .writing-image-picker-actions button { min-height: 64px; }
}

.aivia-persistent-audio {
  position: fixed;
  left: -9999px;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: .001;
  pointer-events: none;
}

/* 右侧工作区：预览空态从"巨型虚线空框"降为一条浅色提示条 */
#view-writing .writing-preview:has(.empty-preview) {
  background: transparent !important;
  border: 1px dashed var(--hairline-soft) !important;
  min-height: 0 !important;
  padding: 10px 14px !important;
}
#view-writing .empty-preview { display: flex !important; align-items: baseline; gap: 8px; font-size: 12.5px !important; }
#view-writing .empty-preview small { font-size: 12px !important; }

/* 图片方向修正：旋转实际像素后再 OCR，手机与桌面都保持稳定三列。 */
#view-writing .writing-preview.has-image {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 12px !important;
}
#view-writing .writing-preview-media {
  width: 100%;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#view-writing .writing-image-tools {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  width: min(100%, 440px);
  margin: 0 auto;
}
#view-writing .writing-image-tools span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}
#view-writing .writing-rotate-btn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
#view-writing .writing-rotate-btn .ic { width:20px; height:20px; }

/* AI 评阅说明框 → 无框提示行 */
#view-writing .writing-next-note {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 2px !important;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
#view-writing .writing-next-note strong { font-size: 12.5px !important; flex: none; }
#view-writing .writing-next-note span { font-size: 12.5px !important; }

/* 手机端：左右两卡纵排间距收紧 */
@media (max-width: 760px) {
  #view-writing .writing-grid { gap: 14px !important; }
}

/* ============================================================
   R12 练习页一屏化（A+B+C+自动进题）— 用户拍板 2026-07-16
   A 页头去重：眉标手机隐藏(与上下文条重复;作业测评的不重复,保留)、齿轮并入上下文条(改在上方 F 段)
   B 反馈瘦身：答对=一行绿条(即按钮,0.8s 自动进下一题);答错删重复「释义」、播放按钮并排(删减台账#R12)
   C 答题后收起无关选项(仅手机):答对留绿项,答错留红+绿两项
   ============================================================ */
@media (max-width: 768px) {
  /* A) 「练习 · 第N/M题」眉标与上下文条的「练习 + N/M」逐字重复 */
  .training-grid.session-live .session-eyebrow:not(.is-assignment) { display: none; }
  /* justify-content:center 的滚动容器在内容溢出时顶部不可达(flex 经典坑),
     safe center 兜底;不支持的老浏览器忽略本行,行为与现状一致 */
  .training-grid.session-live .session-q-body { justify-content: safe center; }
  /* C) 答题后收起无关选项:复盘只看「你选的」和「正确的」 */
  .training-grid.session-live .options-answered .option:not(.correct):not(.wrong) { display: none; }
  .training-grid.session-live .options-answered::after {
    content: "其余选项已收起"; text-align: center;
    font-size: 11.5px; color: var(--muted); padding-top: 2px;
  }
}

/* B) 反馈块瘦身——双端生效(桌面同样受益,只是桌面本来放得下) */
.practice-review.pr-compact { padding: 12px 14px !important; gap: 10px; }
.practice-review.pr-compact .pr-head { display: block; margin: 0; font-size: 15px; line-height: 1.35; }
.practice-review.good .pr-head { color: var(--green-ink) !important; }
.practice-review.bad .pr-head { color: var(--red-ink) !important; }
/* 答对绿条:整条就是 #continuePractice 按钮,点击立刻进下一题(不等 0.8s 定时器) */
.practice-review.pr-autonext {
  appearance: none; -webkit-appearance: none; width: 100%; cursor: pointer;
  font: inherit; text-align: left;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px;
}
/* color 必带 !important:ultimate.css 有 .practice-review span{color:var(--accent)!important}(Codex审) */
.practice-review.pr-autonext .pr-sub { font-size: 12.5px; color: var(--muted) !important; justify-self: end; }
.practice-review.pr-autonext[disabled] { cursor: default; }
/* 0.8s 倒计时细线:答对确认的节奏可视化 */
.practice-review.pr-autonext.pr-counting::after {
  content: ""; grid-column: 1 / -1; justify-self: start;
  height: 3px; width: 100%; border-radius: 2px;
  background: color-mix(in srgb, var(--green) 45%, transparent);
  animation: cvPrDrain 0.8s linear forwards;
}
@keyframes cvPrDrain { from { width: 100%; } to { width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .practice-review.pr-autonext.pr-counting::after { animation: none; }
}
/* 答错反馈:例句盒 + 三钮一排 + 进度保存失败提示(旧版 answered 分支不显示该错误) */
.pr-example {
  background: var(--surface); border: 1px solid var(--hairline-soft);
  border-radius: 12px; padding: 8px 12px; font-size: 13.5px; line-height: 1.5;
}
.pr-example small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 800; margin-bottom: 2px; }
.pr-err { font-size: 12.5px; color: var(--red-ink); line-height: 1.4; }
.pr-actions { display: flex; gap: 8px; }
/* width:auto 必带 !important:styles.css 在 ≤460px 给 .secondary-action 塞 width:100%(老陷阱) */
.pr-actions .secondary-action { flex: 1; width: auto !important; min-height: 40px; padding: 8px 6px; font-size: 13px; }

/* 5.3.0 reliability v3: daily check-in history is a separate student record surface. */
.checkin-target-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.checkin-target-fieldset > legend {
  width: 100%;
  padding: 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.45;
}
.mini-form .checkin-target-opt { min-height: 44px; padding: 7px 6px; border-radius: 8px; }
.mini-form .checkin-target-opt:hover { background: var(--surface-2); }

.daily-checkin-records-section .section-head { align-items: flex-start; }
.daily-checkin-records-section .section-head p { margin: 4px 0 0; font-size: 12.5px; }
.daily-checkin-record-list { display: grid; gap: 10px; }
.daily-checkin-record-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background: var(--surface);
}
.daily-checkin-record-card.closed { opacity: .86; }
.daily-checkin-record-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.daily-checkin-record-head > div { min-width: 0; }
.daily-checkin-record-head strong,
.daily-checkin-record-head small { display: block; min-width: 0; overflow-wrap: anywhere; }
.daily-checkin-record-head small { margin-top: 3px; color: var(--muted); line-height: 1.4; }
.daily-checkin-record-metrics { display: flex; flex-wrap: wrap; gap: 8px; }
.daily-checkin-record-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
}
.daily-checkin-record-metrics b { color: var(--ink); font-size: 15px; }
.daily-checkin-record-days { display: grid; grid-template-columns: repeat(14, minmax(24px, 1fr)); gap: 5px; }
.daily-checkin-record-days span {
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 2px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted-2);
}
.daily-checkin-record-days span.done { background: var(--green-soft); color: var(--green-ink); }
.daily-checkin-record-days span.submitted:not(.done) { background: var(--amber-soft); color: var(--amber-ink); }
.daily-checkin-record-days i { font-style: normal; font-size: 10px; }
.daily-checkin-record-days b { font-size: 12px; }
.daily-checkin-record-days b { display:inline-flex; align-items:center; justify-content:center; }
.daily-checkin-record-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.daily-checkin-record-foot small { color: var(--muted); overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .daily-checkin-record-card { padding: 12px; }
  .daily-checkin-record-head { grid-template-columns: 36px minmax(0, 1fr); }
  .daily-checkin-record-head > .assignment-status { grid-column: 2; justify-self: start; }
  .daily-checkin-record-days { grid-template-columns: repeat(7, minmax(28px, 1fr)); }
  .daily-checkin-record-foot { align-items: stretch; flex-direction: column; }
  .daily-checkin-record-foot .secondary-action { width: 100% !important; min-height: 44px; }
}

/* 5.3.0 Admin information architecture: one focused workspace at a time. */
.admin-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background: var(--surface-2);
}
.admin-tabs button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent !important;
  color: var(--muted) !important;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  cursor: pointer;
}
.admin-tabs button:hover { background: var(--surface) !important; color: var(--ink) !important; }
.admin-tabs button.active {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: var(--shadow-accent);
}
.admin-tabs button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 36%, transparent);
  outline-offset: 2px;
}
.admin-tabs button > span:not(.admin-tab-count) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.admin-tabs .ic { flex: 0 0 auto; }
.admin-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.admin-tabs button.active .admin-tab-count { background: #fff; color: var(--accent); }
.admin-panel { display: grid; gap: 16px; min-width: 0; }
.admin-panel[hidden] { display: none !important; }
.admin-panel > .surface-card { min-width: 0; }

.admin-account-group {
  min-width: 0;
  overflow: clip;
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  background: var(--surface);
}
.admin-account-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.admin-account-group-head::-webkit-details-marker { display: none; }
.admin-account-group-head::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--muted);
  transform: rotate(45deg) translate(-2px, 2px);
  transition: transform .16s ease;
}
.admin-account-group[open] > .admin-account-group-head::after { transform: rotate(225deg) translate(-1px, -1px); }
.admin-account-group-head:hover { background: var(--surface-2); }
.admin-account-group-head:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: -3px;
}
.admin-account-group-head h3 { margin: 0; }
.admin-account-group-head p { margin: 3px 0 0; font-size: 12px; }
.admin-account-group-body { min-width: 0; padding: 0 14px 14px; }
.admin-account-group.search-empty { display: none; }

@media (max-width: 620px) {
  .admin-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-tabs button { min-height: 46px; padding: 9px 8px; font-size: 13px; }
  .admin-tab-count { min-width: 20px; height: 20px; padding: 0 5px; }
  .admin-panel[data-admin-panel="accounts"] > .surface-card > .section-head {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-panel .admin-search { width: 100%; min-width: 0; max-width: none; }
  .admin-account-group-head { padding: 12px; }
  .admin-account-group-body { padding: 0 10px 10px; }
}

/* Homepage refresh uses a dedicated fixed icon button across desktop and mobile. */
.home-greeting-tools .home-refresh-icon-action {
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 12px !important;
  line-height: 1 !important;
}

.home-greeting-tools .home-refresh-icon-action .ic {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

/* Weak-network outbox: explicit only while work is pending. */
.daily-refresh-action.pending-sync {
  border-color: color-mix(in srgb, var(--amber-ink) 34%, var(--hairline-soft)) !important;
  background: var(--amber-soft) !important;
  color: var(--amber-ink) !important;
}

.safe-sync-toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 2400;
  width: max-content;
  max-width: min(440px, calc(100vw - 28px));
  padding: 11px 14px;
  border: 1px solid var(--hairline-soft);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .18s ease, transform .18s ease;
}
.safe-sync-toast.show { opacity: 1; transform: translate(-50%, 0); }
.safe-sync-toast.warn { border-color: color-mix(in srgb, var(--amber-ink) 30%, var(--hairline-soft)); }
.safe-sync-toast.good { border-color: color-mix(in srgb, var(--green-ink) 28%, var(--hairline-soft)); }
.safe-sync-toast.bad { border-color: color-mix(in srgb, var(--red, #b42318) 30%, var(--hairline-soft)); }

@media (max-width: 760px) {
  .safe-sync-toast {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .safe-sync-toast { transition: none; }
}

/* Reading assignment: publish and audio preparation are equal, explicit actions. */
.reading-admin-form .reading-publish-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px;
  width: 100%;
}
.reading-admin-form .reading-publish-actions .reading-admin-action {
  width: 100% !important;
  min-width: 0;
  min-height: 46px;
  justify-content: center;
  white-space: normal;
  line-height: 1.25;
}
.reading-admin-form .reading-admin-action.needs-attention {
  background: var(--amber-soft) !important;
  color: var(--amber-ink) !important;
  border-color: color-mix(in srgb, var(--amber) 34%, var(--hairline-soft)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 10%, transparent) !important;
}
.reading-assignment-card > .inline-actions {
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 390px) {
  .reading-admin-form .reading-publish-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Final small-screen guard: keep every daily-check-in row inside 320px phones. */
@media (max-width: 640px) {
  .daily-checkin-card .daily-checkin-main {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    min-width: 0;
  }
  .dc-subtasks,
  .dc-subtask {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 420px) {
  .student-home .home-action-list {
    padding-inline: 10px !important;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .daily-checkin-section .daily-checkin-card {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 8px !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .daily-checkin-card .task-icon {
    grid-column: 1;
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .daily-checkin-card .daily-checkin-main {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .daily-checkin-card > button {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    margin-top: 3px;
  }
  .daily-checkin-card .daily-checkin-days {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 15px);
    gap: 4px;
  }
  .dc-subtasks { min-width: 0; width: 100%; max-width: 100%; }
  .dc-subtask {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .dc-subtask-title {
    min-width: 0;
    white-space: normal;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 340px) {
  .student-home .home-action-list { padding-inline: 8px !important; }
  .daily-checkin-card .daily-checkin-days { grid-template-columns: repeat(7, 14px); gap: 3px; }
  .dc-subtask { grid-template-columns: 18px minmax(0, 1fr); }
  .dc-subtask button { grid-column: 2; justify-self: start; }
}

/* ============================================================
   5.4.0 Student experience refinement
   Scope is intentionally limited to Today, Assignments, Listen, Reading,
   Writing and the Settings drawer. Words and all business actions are untouched.
   ============================================================ */

#view-today,
#view-assignments,
#view-listen,
#view-reading,
#view-writing,
#view-today > *,
#view-assignments > *,
#view-listen > *,
#view-reading > *,
#view-writing > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#view-listen audio,
#view-writing img,
#view-writing input,
#view-writing textarea,
#view-writing select,
.settings-drawer input,
.settings-drawer select {
  max-width: 100%;
  box-sizing: border-box;
}

/* Home: keep the 0/N progress model and equal task weight. The convenience
   action remains available, but no longer dominates the whole viewport. */
.student-home { gap: 12px !important; }
.student-home .home-main-cta {
  width: fit-content !important;
  max-width: 100%;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  justify-self: start;
}
.student-home .home-main-cta.has-sub { min-height: 50px !important; padding-block: 7px !important; }
.student-home .home-main-cta.home-done-state { width: 100% !important; border-radius: 8px !important; }
.student-home .home-today-ring { gap: 12px !important; }
.student-home .home-action-list {
  border-radius: 8px !important;
  padding: 8px 14px 10px !important;
  box-shadow: none !important;
}
.student-home .home-action-list > *,
.student-home .home-scroll-list,
.student-home .home-checklist,
.student-home .daily-section-head,
.student-home .home-check-row {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.student-home .home-check-row,
.student-home .daily-checkin-card { border-radius: 6px !important; }
.student-home .home-shortcut-strip { margin-top: -2px; }

/* Assignments: compact overview, one open current section, and clearly visible
   secondary disclosures for history and check-in records. */
#view-assignments .assignment-summary-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 4px 0 !important;
  border-top: 1px solid var(--hairline-soft) !important;
  border-bottom: 1px solid var(--hairline-soft) !important;
}
#view-assignments .assignment-summary-strip .metric-card {
  min-width: 0 !important;
  min-height: 66px !important;
  padding: 8px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}
#view-assignments .assignment-summary-strip .metric-card + .metric-card { border-left: 1px solid var(--hairline-soft) !important; }
#view-assignments .assignment-summary-strip .metric-card:hover { transform: none !important; box-shadow: none !important; }
#view-assignments .assignment-summary-strip .metric-card strong {
  margin: 3px 0 0 !important;
  font-size: 23px !important;
  line-height: 1.1 !important;
}
#view-assignments .assignment-summary-strip .metric-card small { display: none !important; }
#view-assignments .assignment-collapsible {
  display: block;
  overflow: clip;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
#view-assignments .assignment-section-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  list-style: none;
  cursor: pointer;
}
#view-assignments .assignment-section-toggle::-webkit-details-marker { display: none; }
#view-assignments .assignment-section-toggle > span { min-width: 0; }
#view-assignments .assignment-section-toggle strong,
#view-assignments .assignment-section-toggle small { display: block; min-width: 0; }
#view-assignments .assignment-section-toggle strong { color: var(--ink); font-size: 16px; }
#view-assignments .assignment-section-toggle small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#view-assignments .assignment-section-toggle b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
#view-assignments .assignment-section-toggle b::after { content: "⌄"; font-size: 16px; transition: transform .18s ease; }
#view-assignments details[open] > .assignment-section-toggle b::after { transform: rotate(180deg); }
#view-assignments .assignment-collapsible-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--hairline-soft);
}
#view-assignments .assignment-collapsible-body > .assignment-section-subtitle { display: none; }
#view-assignments .daily-checkin-record-card { border-radius: 8px !important; box-shadow: none !important; }

/* Listening: tabs and filters are lightweight controls; the audio list remains
   the single framed working surface. */
#view-listen .listen-hero {
  padding: 2px 2px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#view-listen .listen-mode-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface-2);
}
#view-listen .listen-mode-card {
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
}
#view-listen .listen-mode-card.active {
  background: var(--surface) !important;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent) !important;
}
#view-listen .listen-mode-card .listen-card-icon { width: 32px !important; height: 32px !important; border-radius: 7px !important; }
#view-listen .listen-mode-card small { display: none !important; }
#view-listen .listen-mode-card strong { font-size: 14px !important; }
#view-listen .listen-mode-card span { font-size: 11px !important; }
#view-listen .listen-search { border-radius: 8px !important; box-shadow: none !important; }
#view-listen .listen-level-card {
  padding: 12px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#view-listen .listen-level-pill,
#view-listen .listen-group-pill,
#view-listen .listen-group-chip { border-radius: 7px !important; box-shadow: none !important; }
#view-listen .listen-list-card { border-radius: 8px !important; box-shadow: none !important; }
#view-listen .book-audio-row { min-width: 0 !important; border-radius: 6px !important; }
#view-listen .book-audio-main { min-width: 0 !important; }

/* Reading: the page shell is layout, while the selected task remains the one
   framed learning surface. */
#view-reading > .reading-shell {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#view-reading .reading-class-note {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 7px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
}
#view-reading .reading-shell > .level-lock {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 0 2px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#view-reading .reading-shell > .level-lock span,
#view-reading .reading-shell > .level-lock strong,
#view-reading .reading-shell > .level-lock small {
  font-size: 12px !important;
  line-height: 1.4;
}
#view-reading .reading-shell > .level-lock strong { color: var(--accent-ink) !important; }
#view-reading .reading-shell > .level-lock small { color: var(--muted) !important; }
#view-reading .reading-mode-tabs {
  gap: 4px !important;
  padding: 4px;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface-2);
}
#view-reading .reading-mode-tabs button {
  min-height: 52px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
}
#view-reading .reading-mode-tabs button.active { background: var(--surface) !important; box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent) !important; }
#view-reading .reading-task-card { border-radius: 8px !important; box-shadow: none !important; }
#view-reading .reading-task-card:hover { transform: none !important; }
#view-reading .reading-card,
#view-reading .reading-full-card { border-radius: 8px !important; box-shadow: none !important; }

/* Writing: preserve the exact workflow and controls, but flatten inner chrome. */
#view-writing .writing-setup-panel,
#view-writing .writing-workspace { border-radius: 8px !important; box-shadow: none !important; }
#view-writing .writing-mode-tabs {
  gap: 4px !important;
  padding: 4px;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface-2);
}
#view-writing .writing-mode-tabs button {
  min-height: 48px !important;
  padding: 8px 11px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
}
#view-writing .writing-mode-tabs button.active { background: var(--surface) !important; box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent) !important; }
#view-writing .upload-drop,
#view-writing .writing-preview,
#view-writing .writing-textarea-label textarea,
#view-writing .writing-prompt-suggestion { border-radius: 8px !important; box-shadow: none !important; }
#view-writing .writing-prompt-controls > *,
#view-writing .field-stack > * { min-width: 0; }

/* Settings: sections read as one coherent sheet instead of stacked cards.
   Version information remains available in About, not in the account header. */
.settings-drawer { background: var(--surface) !important; }
.settings-drawer .drawer-head { padding: 20px 20px 14px !important; }
.settings-drawer .drawer-body {
  display: block !important;
  padding: 4px 20px calc(26px + env(safe-area-inset-bottom, 0px)) !important;
}
.settings-drawer .settings-card {
  margin: 0 !important;
  padding: 20px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hairline-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.settings-drawer .settings-card:last-child { border-bottom: 0 !important; }
.settings-drawer .settings-list { gap: 0 !important; }
.settings-drawer .settings-row {
  min-height: 42px !important;
  padding: 9px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hairline-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.settings-drawer .settings-row:last-child { border-bottom: 0 !important; }
.settings-drawer .settings-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}
.settings-drawer .settings-actions button { min-width: 0; min-height: 42px; border-radius: 8px !important; }
.settings-drawer .settings-actions .danger-action:last-child { grid-column: 1 / -1; }
.settings-drawer .settings-class-list span,
.settings-drawer .settings-seg,
.settings-drawer .setting-check,
.settings-drawer .settings-note { border-radius: 8px !important; }
.settings-drawer .settings-legal-links { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.settings-drawer .settings-legal-copy { color: var(--muted-2); font-size: 11px; }

@media (max-width: 760px) {
  .student-home .home-main-cta { min-height: 44px !important; }
  /* detail-polish-v1: 手机端隐藏卡片头部重复计数，进度只认顶部圆环一个出处 */
  .student-home .daily-section-count { display: none !important; }
  #view-assignments .assignment-archive-hero { grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; }
  #view-assignments .assignment-archive-hero .secondary-action { width: 42px !important; min-width: 42px !important; height: 42px; padding: 0 !important; overflow: hidden; color: transparent !important; gap: 0 !important; }
  #view-assignments .assignment-archive-hero .secondary-action .ic { color: var(--ink) !important; margin: auto; }
  #view-assignments .assignment-summary-strip .metric-card { padding: 8px 10px !important; text-align: center !important; }
  #view-assignments .assignment-summary-strip .metric-card span { font-size: 11px !important; white-space: normal !important; }
  #view-assignments .assignment-summary-strip .metric-card strong { font-size: 22px !important; }
  #view-reading .reading-mode-tabs,
  #view-writing .writing-mode-tabs { margin-top: 0 !important; }
  #view-writing .writing-setup-panel,
  #view-writing .writing-workspace { padding: 14px !important; }
}

@media (max-width: 560px) {
  .student-home .home-main-cta { width: fit-content !important; justify-self: start; }
  .student-home .home-action-list { padding-inline: 10px !important; }
  #view-assignments .assignment-archive { gap: 12px !important; }
  #view-assignments .assignment-archive-hero h2 { font-size: 20px !important; }
  #view-assignments .assignment-archive-hero p { font-size: 12px; line-height: 1.5; }
  #view-assignments .assignment-section-toggle { padding: 13px 12px; gap: 8px; }
  #view-assignments .assignment-section-toggle small { display: none; }
  #view-assignments .assignment-collapsible-body { padding: 0 10px 12px; }
  #view-listen .listen-mode-grid { gap: 3px !important; }
  #view-listen .listen-mode-card { min-height: 44px !important; padding: 6px !important; justify-content: center !important; }
  #view-listen .listen-mode-card .listen-card-icon { width: 24px !important; height: 24px !important; }
  #view-listen .listen-mode-card span,
  #view-listen .listen-mode-card small { display: none !important; }
  #view-listen .listen-mode-card strong { font-size: 12px !important; white-space: nowrap !important; }
  #view-listen .listen-mode-card .listen-card-icon { flex: none !important; }
  #view-listen .listen-list-card { padding: 10px !important; }
  #view-listen .book-audio-row { padding-inline: 5px !important; }
  #view-reading .reading-mode-tabs { padding: 3px; }
  #view-reading .reading-mode-tabs button { min-height: 42px !important; padding: 8px !important; }
  #view-writing .writing-mode-tabs { padding: 3px; }
  #view-writing .writing-mode-tabs button { min-height: 42px !important; }
  .settings-drawer .drawer-head { padding: 18px 18px 12px !important; }
  .settings-drawer .drawer-body { padding-inline: 18px !important; }
}

@media (max-width: 360px) {
  #view-assignments .assignment-summary-strip .metric-card { padding-inline: 5px !important; }
  #view-assignments .assignment-summary-strip .metric-card span { font-size: 10.5px !important; }
  #view-listen .book-audio-list { grid-template-columns: 1fr !important; }
  #view-writing .writing-prompt-controls { grid-template-columns: minmax(0, 1fr) 68px !important; }
  .settings-drawer .settings-actions { grid-template-columns: 1fr !important; }
  .settings-drawer .settings-actions .danger-action:last-child { grid-column: auto; }
}

@media (max-width: 340px) {
  #view-today .student-home .home-action-list {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
  }
}

/* ═══════════ 5.4.1 学习页二次收敛：少说明、清流程、稳字阶 ═══════════ */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  letter-spacing: 0;
  font-kerning: normal;
}

h1,
h2,
h3,
h4,
.view-title,
.primary-action,
.secondary-action {
  letter-spacing: 0 !important;
}

h1,
h2,
h3,
h4 { line-height: 1.25; }

.muted,
small { line-height: 1.5; }

/* Listen starts with the useful controls. The page title already lives in the
   app top bar, so no second title/description block is rendered. */
#view-listen .listen-view { gap: 12px !important; }
#view-listen .listen-mode-grid { margin-top: 0 !important; }
#view-listen .listen-level-card .section-head {
  margin-bottom: 8px !important;
  align-items: center;
}
#view-listen .listen-level-card .section-head .eyebrow { display: none !important; }
#view-listen .listen-level-card .section-head h3 {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

/* Read starts with the mode and playback controls. Class and level remain
   authoritative in Settings, without being repeated above every article. */
#view-reading .reading-shell > .reading-audio-source { margin-top: 0 !important; }
#view-reading .reading-shell > .reading-mode-tabs { margin-top: 0 !important; }

/* Writing is one continuous flow, not two unrelated columns. The three steps
   are separated by hairlines rather than nested cards. */
#view-writing .writing-grid {
  display: block !important;
  width: 100%;
  min-width: 0;
}

#view-writing .writing-flow-shell {
  width: min(100%, 1120px);
  min-width: 0;
  margin: 0 auto;
  padding: 22px 24px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: clip;
}

#view-writing .writing-mode-tabs { margin: 0 0 2px !important; }

#view-writing .writing-step {
  min-width: 0;
  padding: 20px 0;
  border-top: 1px solid var(--hairline-soft);
}

#view-writing .writing-step:first-of-type { border-top: 0; }

#view-writing .writing-step-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  min-width: 0;
}

#view-writing .writing-step-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}

#view-writing .writing-step-head > div { min-width: 0; }
#view-writing .writing-step-head strong,
#view-writing .writing-step-head small { display: block; min-width: 0; }
#view-writing .writing-step-head strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
#view-writing .writing-step-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

#view-writing .writing-step.is-current .writing-step-number {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
#view-writing .writing-step.is-done .writing-step-number {
  border-color: var(--accent-edge);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
#view-writing .writing-step.is-upcoming .writing-step-head { opacity: .72; }

#view-writing .writing-step-body,
#view-writing .writing-prompt-field,
#view-writing .writing-prompt-generator,
#view-writing .writing-prompt-controls,
#view-writing .writing-prompt-controls > *,
#view-writing .writing-capture-grid,
#view-writing .writing-capture-column,
#view-writing .writing-text-column,
#view-writing .writing-review-actions {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#view-writing .writing-prompt-field { width: 100%; }
#view-writing .writing-prompt-field input,
#view-writing .writing-prompt-controls input,
#view-writing .writing-textarea-label textarea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#view-writing .writing-capture-grid {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 18px;
}

#view-writing .writing-capture-column,
#view-writing .writing-text-column {
  display: grid;
  gap: 10px;
}

#view-writing .writing-upload-trigger {
  min-height: 112px !important;
  margin: 0 !important;
  padding: 14px 12px !important;
}
#view-writing .writing-upload-trigger span {
  letter-spacing: 0 !important;
  text-transform: none !important;
}
#view-writing .writing-upload-trigger strong { font-size: 19px !important; }

#view-writing .writing-preview:has(.empty-preview) { display: none !important; }
#view-writing .writing-preview.has-image { display: grid !important; }
#view-writing .writing-ocr-action,
#view-writing .writing-review-actions > .primary-action { width: 100% !important; }
#view-writing .writing-textarea-label textarea { min-height: 250px !important; }
#view-writing .writing-clear-action {
  width: auto !important;
  justify-self: end;
  min-height: 40px !important;
  padding-inline: 16px !important;
}

#view-writing .writing-review-actions {
  display: grid;
  gap: 8px;
}
#view-writing .writing-submit-meta { overflow-wrap: anywhere; }
#view-writing #writingReviewOutput:empty { display: none; }

/* The prompt generator keeps its button on a dedicated row. This fixes both
   the overflowing topic field and the clipped “生成题目” label on small phones. */
#view-writing .writing-prompt-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 92px !important;
  grid-template-areas: "topic count" "btn btn" !important;
  gap: 10px !important;
}
#view-writing .writing-prompt-controls .mini-field:nth-of-type(1) { grid-area: topic !important; }
#view-writing .writing-prompt-controls .mini-field:nth-of-type(2) { grid-area: count !important; }
#view-writing #generateWritingPrompt {
  grid-area: btn !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding-inline: 14px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

@media (max-width: 760px) {
  #view-writing .writing-flow-shell { padding: 14px !important; }
  #view-writing .writing-step { padding: 17px 0; }
  #view-writing .writing-capture-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #view-writing .writing-textarea-label textarea { min-height: 190px !important; }
  #view-writing .writing-clear-action { justify-self: stretch; width: 100% !important; }
}

@media (max-width: 560px) {
  input,
  select,
  textarea { font-size: 16px !important; }

  #view-writing .writing-flow-shell { padding: 12px !important; }
  #view-writing .writing-step-head {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
    margin-bottom: 12px;
  }
  #view-writing .writing-step-number { width: 28px; height: 28px; }
  #view-writing .writing-step-head strong { font-size: 15.5px; }
  #view-writing .writing-step-head small { font-size: 12px; }
  #view-writing .writing-upload-trigger { min-height: 96px !important; }
  #view-writing .writing-image-tools {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    width: 100% !important;
  }
  #view-writing .writing-prompt-controls {
    grid-template-columns: minmax(0, 1fr) 76px !important;
    grid-template-areas: "topic count" "btn btn" !important;
  }
}

@media (max-width: 340px) {
  #view-writing .writing-flow-shell { padding-inline: 10px !important; }
  #view-writing .writing-mode-tabs button {
    padding-inline: 6px !important;
    overflow-wrap: anywhere;
  }
  #view-writing .writing-mode-tabs button strong { font-size: 12.5px !important; }
  #view-writing .writing-prompt-controls {
    grid-template-columns: minmax(0, 1fr) 70px !important;
  }
}

/* ========================================================================== 
   5.4.2 · visual craft pass
   Preserve every workflow and data contract. This layer only improves
   hierarchy, tactile clarity, accessibility, and responsive geometry.
   ========================================================================== */

/* Crisp type and an unambiguous keyboard focus across all three roles. */
body,
button,
input,
select,
textarea { font-kerning: normal; }

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 42%, transparent) !important;
  outline-offset: 2px !important;
}

.primary-action,
.secondary-action,
.pill-button,
.icon-button {
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
    color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease) !important;
}

body:not([data-view="words"]) .primary-action:not(.home-main-cta-checkin) {
  box-shadow: var(--shadow-accent) !important;
}

html.cv-dark body:not([data-view="words"]) .primary-action:not(.home-main-cta-checkin) {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}

@media (hover: hover) and (pointer: fine) {
  .primary-action:hover,
  .secondary-action:hover,
  .pill-button:hover,
  .icon-button:hover { transform: translateY(-1px) !important; }
}

/* The 561-900px band previously inherited a compressed three-column task row.
   With its icon hidden, the title track could collapse to zero at 768px. */
@media (min-width: 561px) and (max-width: 900px) {
  .home-shortcut-strip .assignment-shortcut-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
  .assignment-shortcut-row .daily-task-main {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .assignment-shortcut-row .daily-task-title-line {
    display: flex !important;
    min-width: 0 !important;
  }
  .assignment-shortcut-row .daily-task-actions {
    grid-column: 2 !important;
    width: auto !important;
  }
  .assignment-shortcut-row .daily-task-actions .secondary-action {
    width: auto !important;
  }
}

/* Listening: retain the compact library, but make each track readable and
   comfortably operable. Playback uses success green only while active. */
#view-listen .listen-list-card {
  border-color: var(--hairline) !important;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-2)) !important;
}

#view-listen .book-audio-list {
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)) !important;
  gap: 3px 12px !important;
}

#view-listen .book-audio-row {
  min-height: 48px !important;
  padding: 5px 6px !important;
  border-radius: 8px !important;
}

#view-listen .book-audio-row.active {
  background: var(--green-soft) !important;
  box-shadow: inset 3px 0 0 var(--green) !important;
}

#view-listen .book-audio-row.active .book-audio-main strong { color: var(--green-ink) !important; }

#view-listen .book-audio-play,
#view-listen .book-audio-favorite {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
}

#view-listen .book-audio-row.active .book-audio-play {
  background: var(--green) !important;
  color: #fff !important;
}

#view-listen .book-audio-main strong { line-height: 1.35 !important; }

/* Reading: a quiet editorial work surface. Sentence geometry remains stable
   and mobile actions meet the 44px touch floor. */
#view-reading .reading-card {
  border-color: var(--hairline) !important;
  background: color-mix(in srgb, var(--surface) 97%, var(--surface-2)) !important;
}

#view-reading .reading-card-head {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--hairline-soft);
}

#view-reading .reading-card-head h3 { font-weight: 750 !important; }

#view-reading .sentence-row p {
  font-size: 15.5px !important;
  line-height: 1.68 !important;
}

#view-reading .reading-task-card.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--hairline)) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

/* Writing: clarify the existing three-step journey without adding cards or
   copy. The current step gets a slim guide; completed steps remain quiet. */
#view-writing .writing-flow-shell {
  border-color: transparent !important;
  background: transparent !important;
}

#view-writing .writing-step { position: relative; }

/* 每一步都有引导竖条：未开始=弱色，已完成=淡绿，当前=accent，三级状态一眼可辨。 */
#view-writing .writing-step::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 17px;
  bottom: 17px;
  width: 3px;
  border-radius: 999px;
  background: var(--hairline);
}

#view-writing .writing-step.is-done::before {
  background: color-mix(in srgb, var(--green) 55%, var(--hairline));
}

#view-writing .writing-step.is-current::before {
  background: var(--accent);
}

#view-writing .writing-upload-trigger {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--hairline)) !important;
  background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface)) !important;
}

#view-writing .writing-upload-trigger:hover {
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface)) !important;
}

#view-writing .writing-step-head small { color: var(--muted) !important; }

/* Teacher and admin are operational tools: connected metrics, restrained
   surfaces, sober geometry, and less decorative elevation. */
.teacher-workspace,
.admin-console { gap: 14px !important; }

.teacher-workspace > .surface-card,
.teacher-dashboard > .surface-card,
.teacher-panel > .surface-card,
.teacher-panel.surface-card,
.admin-panel > .surface-card {
  border-radius: 10px !important;
  border-color: var(--hairline) !important;
  box-shadow: none !important;
}

.teacher-class-switcher {
  position: static !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.teacher-class-switcher > div:first-child p { max-width: 58ch; }

.teacher-tabs,
.admin-tabs {
  border-radius: 10px !important;
  box-shadow: none !important;
}

.teacher-tabs button,
.admin-tabs button { border-radius: 7px !important; }

.teacher-tabs button.active,
.admin-tabs button.active { box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 26%, transparent) !important; }

.teacher-dashboard .dashboard-metrics {
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
}

.teacher-dashboard .dashboard-metrics .metric-card {
  min-height: 108px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.teacher-dashboard .dashboard-metrics .metric-card + .metric-card {
  border-left: 1px solid var(--hairline-soft) !important;
}

.teacher-dashboard .dashboard-metrics .metric-card:hover {
  transform: none !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

.teacher-dashboard .dashboard-metrics .metric-card strong { font-size: 30px !important; }

.teacher-dashboard .chart-card { min-height: 260px; }

.admin-hero .growth-stat-row {
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
}

.admin-hero .growth-stat {
  min-height: 122px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.07) !important;
}

.admin-hero .growth-stat + .growth-stat { border-left: 1px solid rgba(255,255,255,.12) !important; }

.admin-account-group { border-radius: 8px !important; }

.admin-account-group-head { min-height: 48px; }

/* Dark mode keeps depth through borders and surface steps instead of glow. */
html.cv-dark #view-listen .listen-list-card,
html.cv-dark #view-reading .reading-card,
html.cv-dark #view-writing .writing-flow-shell {
  background: var(--surface) !important;
}

html.cv-dark #view-writing .writing-upload-trigger {
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface)) !important;
}

/* Touch and compact-screen guarantees. Words remains intentionally untouched. */
@media (max-width: 768px), (pointer: coarse) {
  #view-listen .book-audio-play,
  #view-listen .book-audio-favorite,
  #view-reading .reading-mini-btn,
  #view-reading .reading-full-card button,
  .teacher-workspace button,
  .admin-console button,
  .modal-close {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 760px) {
  #view-listen .book-audio-list { grid-template-columns: minmax(0, 1fr) !important; }
  #view-listen .book-audio-row { padding-inline: 4px !important; }
  #view-writing .writing-step::before { left: -12px; }

  .teacher-dashboard .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .teacher-dashboard .dashboard-metrics .metric-card { min-height: 96px !important; padding: 12px !important; }
  .teacher-dashboard .dashboard-metrics .metric-card:nth-child(odd) { border-left: 0 !important; }
  .teacher-dashboard .dashboard-metrics .metric-card:nth-child(n + 3) { border-top: 1px solid var(--hairline-soft) !important; }

  .admin-hero .growth-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-hero .growth-stat { min-height: 108px; padding: 13px !important; }
  .admin-hero .growth-stat:nth-child(odd) { border-left: 0 !important; }
  .admin-hero .growth-stat:nth-child(n + 3) { border-top: 1px solid rgba(255,255,255,.12) !important; }
}

@media (max-width: 560px) {
  #view-reading .reading-card-head { padding-bottom: 10px; }
  #view-reading .sentence-row p { font-size: 15px !important; line-height: 1.62 !important; }

  .teacher-workspace,
  .admin-console { gap: 10px !important; }

  .teacher-workspace > .surface-card,
  .teacher-dashboard > .surface-card,
  .teacher-panel > .surface-card,
  .teacher-panel.surface-card,
  .admin-panel > .surface-card { border-radius: 8px !important; }

  .teacher-class-switcher { padding: 14px !important; }
  .teacher-class-switcher > div:first-child p { display: none; }
  .teacher-class-picker select { min-height: 46px !important; }

  .teacher-tabs { gap: 4px !important; padding: 4px !important; }
  .teacher-tabs > * { min-height: 44px !important; padding: 8px 7px !important; }

  .admin-tabs { gap: 4px !important; padding: 4px !important; }
  .admin-tabs button { min-height: 48px !important; }

  .data-table.responsive-cards tr {
    border-color: var(--hairline) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .data-table.responsive-cards td.td-title strong,
  .data-table.responsive-cards td.td-title small {
    display: inline;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body[data-view="today"] .home-level-chip,
  body[data-view="today"] .daily-refresh-action,
  body[data-view="today"] .assignment-shortcut-row .secondary-action,
  body[data-view="today"] .cv-rev-btn,
  #view-listen .listen-group-chip,
  #view-reading .reading-mode-tabs button,
  #view-writing .writing-mode-tabs button,
  #view-writing .cv-b7-edit,
  #view-writing .writing-clear-action {
    min-height: 44px !important;
  }

  body[data-view="today"] .daily-refresh-action,
  #view-assignments .assignment-archive-hero .secondary-action {
    width: 44px !important;
    min-width: 44px !important;
  }

  body[data-view="today"] .home-refresh-icon-action {
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 340px) {
  .teacher-tabs > * { font-size: 12px !important; padding-inline: 5px !important; }
  .admin-tabs button { font-size: 12px !important; padding-inline: 5px !important; }
  .admin-tabs .ic { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .primary-action,
  .secondary-action,
  .pill-button,
  .icon-button { transition: none !important; }
}

/* 5.4.2: one entry-control language for homework and daily check-in. */
.task-entry-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 72px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
}
button.task-entry-action {
  appearance: none;
  cursor: pointer;
}
.task-entry-action.is-primary {
  color: var(--on-accent, #fff);
  background: var(--accent);
  border-color: var(--accent);
}
.task-entry-action.is-secondary {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: var(--accent-edge, transparent);
}
button.task-entry-action:hover { filter: brightness(.97); }
button.task-entry-action:active { transform: translateY(1px); }
button.task-entry-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .task-entry-action {
    min-width: 64px;
    min-height: 44px;
    padding-inline: 11px;
  }
  .home-check-row > .task-entry-action,
  .daily-checkin-card > .task-entry-action { margin-left: auto; }
  .daily-checkin-record-foot .task-entry-action {
    width: auto !important;
    align-self: flex-end;
  }
}

/* 5.4.17: generated writing tasks hand off directly into the compose step. */
#view-writing .writing-prompt-suggestion.is-selected {
  border-color: var(--accent-edge) !important;
  background: var(--accent-soft-2) !important;
}

#view-writing .writing-prompt-suggestion > .secondary-action.is-selected {
  border-color: transparent !important;
  background: var(--green-soft) !important;
  color: var(--green-ink) !important;
  opacity: 1 !important;
  cursor: default !important;
  transform: none !important;
}

#view-writing .writing-selected-task {
  min-width: 0;
  margin: 0 0 16px;
  padding: 13px 14px 13px 16px;
  border-radius: 8px;
  background: var(--accent-soft-2);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--ink);
  overflow: hidden;
}

#view-writing .writing-selected-task:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}

#view-writing .writing-selected-task-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}

#view-writing .writing-selected-task-head > span {
  min-width: 0;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
}

#view-writing .writing-selected-task-head > button {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#view-writing .writing-selected-task-head > button:hover {
  background: var(--accent-soft);
}

#view-writing .writing-selected-task > strong,
#view-writing .writing-selected-task > p {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-writing .writing-selected-task > strong {
  font-size: 14.5px;
  line-height: 1.58;
}

#view-writing .writing-selected-task > p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

#view-writing .writing-selected-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

#view-writing .writing-selected-task-meta > span {
  position: relative;
  min-width: 0;
  padding-left: 11px;
  overflow-wrap: anywhere;
}

#view-writing .writing-selected-task-meta > span::before {
  content: '';
  position: absolute;
  top: .58em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 420px) {
  #view-writing .writing-selected-task {
    padding: 12px 12px 12px 14px;
  }

  #view-writing .writing-selected-task-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  #view-writing .writing-selected-task-head > button {
    width: fit-content !important;
    min-height: 36px;
    padding: 0;
  }

  #view-writing .writing-selected-task-meta {
    display: grid;
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-writing .writing-selected-task { scroll-behavior: auto; }
}