/* 部署时由 tools/bundle-css.cjs 按 index.html 原顺序合并，源文件：tokens.css, styles.css, ultimate.css, premium.css, refine.css, member-center.css, cv-anim.css, cv-milestone.css, academy-theme.css, cv-quota.css, academy-skins.css, learning-journey.css, learning-recovery-ui.css, question-feedback.css, learning-followup.css, learning-evidence.css, verification.css, teacher-remediation.css, listening-activity.css, navigation-ux.css */
/* ==== tokens.css ==== */
/* CAMVOCAB 5.4.2 · global design tokens
   Single source for the base theme, dark mode, and all palettes. */

:root {
  color-scheme: light;
  font-family: Nunito, Quicksand, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;

  /* Legacy aliases still used by styles.css. */
  --soft: #f4f7fb;
  --panel: rgba(255, 255, 255, .88);
  --line: rgba(32, 47, 76, .12);
  --blue: #2457a6;
  --cyan: #3c8fb5;
  --yellow: #d39a2f;
  --coral: #d96a55;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-soft: 0 14px 42px rgba(24, 39, 75, .08);

  /* Warm-ivory light foundation. */
  --bg: #f2efe9;
  --bg-tint: #f7f5f0;
  --surface: #ffffff;
  --surface-2: #f5f2ec;
  --surface-3: #e9e5dc;
  --ink: #211f2b;
  --ink-2: #3b3947;
  --muted: #696773;
  --muted-2: #605e6a;
  --hairline: rgba(60, 50, 35, 0.10);
  --hairline-soft: rgba(60, 50, 35, 0.055);

  /* Default palette: indigo. */
  --accent: #544bc4;
  --accent-press: #463db0;
  --accent-ink: #3a328f;
  --accent-soft: rgba(84, 75, 196, 0.10);
  --accent-soft-2: rgba(84, 75, 196, 0.06);
  --accent-glow: rgba(84, 75, 196, 0.30);
  --accent-edge: rgba(84, 75, 196, 0.30);
  --accent-2: #9a7df0;

  /* Semantic colors. */
  --green: #1a9c52;
  --green-strong: #1f8a54;        /* 强调绿底(打卡CTA)，双主题同值，白字≈4.4:1 */
  --green-strong-press: #1a7548;
  --green-ink: #117a3e;
  --green-soft: rgba(26, 156, 82, 0.10);
  --red: #e0382b;
  --red-ink: #b22a20;
  --red-soft: rgba(224, 56, 43, 0.09);
  --amber: #d98a00;
  --amber-ink: #8f5b00;
  --amber-soft: rgba(217, 138, 0, 0.12);
  --purple: #7c5cd6;
  --purple-soft: rgba(124, 92, 214, 0.10);
  --cv-rose: #c2385a;
  --cv-rose-soft: #fdeef2;

  /* Shape and depth. */
  --r-xs: 12px;
  --r-sm: 16px;
  --r: 22px;
  --r-lg: 28px;
  --r-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.05), 0 1px 2px rgba(16, 24, 40, 0.03);
  --shadow: 0 2px 6px rgba(16, 24, 40, 0.04), 0 12px 28px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.08), 0 30px 60px rgba(16, 24, 40, 0.10);
  --shadow-accent: 0 5px 14px rgba(84, 75, 196, 0.24);

  /* Glass and ambient surfaces. */
  --glass-side: rgba(252, 250, 246, 0.78);
  --glass-top: rgba(242, 239, 233, 0.74);
  --glass-bar: rgba(255, 253, 249, 0.84);
  --glass-sheet: rgba(255, 253, 249, 0.92);
  --glass-drawer: rgba(255, 253, 249, 0.97);
  --stripe: rgba(70, 55, 35, 0.022);
  --wash: radial-gradient(70% 50% at 100% -8%, rgba(84, 75, 196, 0.06), transparent 70%), radial-gradient(60% 45% at 0% 100%, rgba(154, 125, 240, 0.05), transparent 70%);
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l1.9 6.5 6.5 1.9-6.5 1.9L12 18.4l-1.9-6.5L3.6 10l6.5-1.9z'/%3E%3Cpath d='M19 14l.9 2.6 2.6.9-2.6.9L19 21l-.9-2.6L15.5 17.5l2.6-.9z'/%3E%3C/svg%3E");

  /* Palette-aware hero and auth surfaces. */
  --hero-grad: linear-gradient(140deg, #2a2566 0%, #1c1846 54%, #12102e 100%);
  --hero-glow-1: radial-gradient(circle, rgba(154, 125, 240, 0.40), transparent 62%);
  --hero-glow-2: radial-gradient(circle, rgba(84, 75, 196, 0.30), transparent 64%);
  --auth-grad: radial-gradient(120% 90% at 0% 0%, #221d52 0%, #181445 46%, #0e0c2a 100%);
  --gold: #c79a3b;
  --gold-ink: #9a7320;
  --gold-soft: rgba(199, 154, 59, 0.14);
  --hero-pill: rgba(154, 125, 240, 0.28);
  --hero-pill-edge: rgba(154, 125, 240, 0.50);

  /* Reward, motion, and typography. */
  --joy: #f59e6b;
  --joy-ink: #c2622f;
  --joy-soft: #fdeee4;
  --joy-edge: rgba(245, 158, 107, 0.42);
  --joy-grad: linear-gradient(135deg, #f7b07f 0%, #f2895a 100%);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.18s;
  --t: 0.32s;
  --t-slow: 0.6s;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "PingFang SC", "Helvetica Neue", "Inter", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-display: "Nunito", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, "Cascadia Mono", monospace;
}

/* Keep an explicit indigo scope for persisted palette settings. It precedes
   cv-dark so the dark token winners remain unchanged. */
html[data-palette="indigo"] {
  --accent: #544bc4;
  --accent-press: #463db0;
  --accent-ink: #3a328f;
  --accent-soft: rgba(84, 75, 196, 0.10);
  --accent-soft-2: rgba(84, 75, 196, 0.06);
  --accent-glow: rgba(84, 75, 196, 0.30);
  --accent-edge: rgba(84, 75, 196, 0.30);
  --accent-2: #9a7df0;
  --hero-grad: linear-gradient(140deg, #2a2566 0%, #1c1846 54%, #12102e 100%);
  --hero-glow-1: radial-gradient(circle, rgba(154, 125, 240, 0.40), transparent 62%);
  --hero-glow-2: radial-gradient(circle, rgba(84, 75, 196, 0.30), transparent 64%);
  --auth-grad: radial-gradient(120% 90% at 0% 0%, #221d52 0%, #181445 46%, #0e0c2a 100%);
  --hero-pill: rgba(154, 125, 240, 0.28);
  --hero-pill-edge: rgba(154, 125, 240, 0.50);
}

html.cv-dark {
  color-scheme: dark;
  --bg: #0d0f14;
  --bg-tint: #12141b;
  --surface: #181b22;
  --surface-2: #1f232c;
  --surface-3: #2a2f3a;
  --ink: #f3f5f8;
  --ink-2: #c3cad6;
  --muted: #a5adbb;
  --muted-2: #969eae;
  --hairline: rgba(255, 255, 255, 0.11);
  --hairline-soft: rgba(255, 255, 255, 0.06);

  --accent: #7d7bf5;
  --accent-press: #6f6df0;
  --accent-ink: #bdbcff;
  --accent-soft: rgba(125, 123, 245, 0.16);
  --accent-soft-2: rgba(125, 123, 245, 0.10);
  --accent-glow: rgba(125, 123, 245, 0.45);
  --accent-edge: rgba(125, 123, 245, 0.45);
  --accent-2: #9a8bff;

  --green: #34c77b;
  --green-strong: #1f8a54;
  --green-strong-press: #1a7548;
  --green-ink: #6fe3a6;
  --green-soft: rgba(52, 199, 123, 0.15);
  --red: #ff6f62;
  --red-ink: #ff9d94;
  --red-soft: rgba(255, 111, 98, 0.15);
  --amber: #f0b232;
  --amber-ink: #f4c46a;
  --amber-soft: rgba(240, 178, 50, 0.16);
  --purple: #a78bfa;
  --purple-soft: rgba(167, 139, 250, 0.16);
  --cv-rose: #f7a8bf;
  --cv-rose-soft: rgba(194, 56, 90, 0.20);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 14px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5), 0 36px 70px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 5px 14px rgba(125, 123, 245, 0.32);

  --glass-side: rgba(19, 21, 27, 0.78);
  --glass-top: rgba(13, 15, 20, 0.72);
  --glass-bar: rgba(20, 22, 28, 0.84);
  --glass-sheet: rgba(28, 31, 38, 0.92);
  --glass-drawer: rgba(22, 25, 32, 0.97);
  --stripe: rgba(255, 255, 255, 0.03);
  --wash: radial-gradient(70% 50% at 100% -8%, rgba(125, 123, 245, 0.12), transparent 70%), radial-gradient(60% 45% at 0% 100%, rgba(154, 139, 255, 0.08), transparent 70%);

  /* The explicit indigo scope must not leak its light hero into dark mode. */
  --hero-grad: linear-gradient(140deg, #232a63 0%, #181d46 54%, #11132e 100%);
  --hero-glow-1: radial-gradient(circle, rgba(124, 109, 255, 0.42), transparent 62%);
  --hero-glow-2: radial-gradient(circle, rgba(91, 91, 214, 0.30), transparent 64%);
  --auth-grad: radial-gradient(120% 90% at 0% 0%, #1b2150 0%, #141943 46%, #0c0f28 100%);
  --hero-pill: rgba(124, 109, 255, 0.30);
  --hero-pill-edge: rgba(140, 123, 255, 0.50);

  --joy: #f7b07f;
  --joy-ink: #ffd9bf;
  --joy-soft: rgba(245, 158, 107, 0.16);
  --joy-edge: rgba(247, 176, 127, 0.45);
}

html[data-palette="royal"] {
  --accent: #1d4ed8;
  --accent-press: #1843b8;
  --accent-ink: #1e40af;
  --accent-soft: rgba(29, 78, 216, 0.10);
  --accent-soft-2: rgba(29, 78, 216, 0.055);
  --accent-glow: rgba(29, 78, 216, 0.32);
  --accent-edge: rgba(29, 78, 216, 0.30);
  --accent-2: #3b82f6;
  --shadow-accent: 0 6px 18px rgba(29, 78, 216, 0.30);
  --wash: radial-gradient(70% 50% at 100% -8%, rgba(84, 75, 196, 0.06), transparent 70%), radial-gradient(60% 45% at 0% 100%, rgba(154, 125, 240, 0.05), transparent 70%);
  --hero-grad: linear-gradient(140deg, #14305c 0%, #0c2150 55%, #0a1838 100%);
  --hero-glow-1: radial-gradient(circle, rgba(212, 175, 55, 0.30), transparent 62%);
  --hero-glow-2: radial-gradient(circle, rgba(59, 130, 246, 0.34), transparent 64%);
  --auth-grad: radial-gradient(120% 90% at 0% 0%, #14305c 0%, #0d2350 46%, #081530 100%);
  --gold: #c79a3b;
  --gold-ink: #8a6519;
  --gold-soft: rgba(199, 154, 59, 0.16);
  --hero-pill: rgba(212, 175, 55, 0.20);
  --hero-pill-edge: rgba(212, 175, 55, 0.52);
}

html.cv-dark[data-palette="royal"] {
  --accent: #5b8cf0;
  --accent-press: #4d7eea;
  --accent-ink: #bcd2ff;
  --accent-soft: rgba(91, 140, 240, 0.16);
  --accent-soft-2: rgba(91, 140, 240, 0.10);
  --accent-glow: rgba(91, 140, 240, 0.45);
  --accent-edge: rgba(91, 140, 240, 0.45);
  --accent-2: #7aa5f5;
  --shadow-accent: 0 6px 18px rgba(91, 140, 240, 0.5);
  --wash: radial-gradient(70% 50% at 100% -8%, rgba(29, 78, 216, 0.07), transparent 70%), radial-gradient(60% 45% at 0% 100%, rgba(199, 154, 59, 0.06), transparent 70%);
  --hero-grad: linear-gradient(140deg, #0f213f 0%, #0a1838 55%, #070f24 100%);
  --gold: #d8b25a;
  --gold-ink: #f0d089;
  --gold-soft: rgba(216, 178, 90, 0.18);
}

html[data-palette="emerald"] {
  --accent: #0d9488;
  --accent-press: #0b7d72;
  --accent-ink: #0f766e;
  --accent-soft: rgba(13, 148, 136, 0.10);
  --accent-soft-2: rgba(13, 148, 136, 0.055);
  --accent-glow: rgba(13, 148, 136, 0.30);
  --accent-edge: rgba(13, 148, 136, 0.30);
  --accent-2: #14b8a6;
  --shadow-accent: 0 6px 18px rgba(13, 148, 136, 0.28);
  --wash: radial-gradient(70% 50% at 100% -8%, rgba(84, 75, 196, 0.06), transparent 70%), radial-gradient(60% 45% at 0% 100%, rgba(154, 125, 240, 0.05), transparent 70%);
  --hero-grad: linear-gradient(140deg, #0d5246 0%, #073d34 55%, #04302a 100%);
  --hero-glow-1: radial-gradient(circle, rgba(20, 184, 166, 0.34), transparent 62%);
  --hero-glow-2: radial-gradient(circle, rgba(201, 168, 106, 0.26), transparent 64%);
  --auth-grad: radial-gradient(120% 90% at 0% 0%, #0d5246 0%, #08453a 46%, #04302a 100%);
  --gold: #b9852f;
  --gold-ink: #8a611f;
  --gold-soft: rgba(185, 133, 47, 0.15);
  --hero-pill: rgba(201, 168, 106, 0.22);
  --hero-pill-edge: rgba(201, 168, 106, 0.52);
  --purple: #0d9488;
  --purple-soft: rgba(13, 148, 136, 0.10);
}

html.cv-dark[data-palette="emerald"] {
  --accent: #2dd4bf;
  --accent-press: #25c2ad;
  --accent-ink: #99f6e4;
  --accent-soft: rgba(45, 212, 191, 0.16);
  --accent-soft-2: rgba(45, 212, 191, 0.10);
  --accent-glow: rgba(45, 212, 191, 0.42);
  --accent-edge: rgba(45, 212, 191, 0.45);
  --accent-2: #5eead4;
  --shadow-accent: 0 6px 18px rgba(45, 212, 191, 0.45);
  --wash: radial-gradient(70% 50% at 100% -8%, rgba(13, 148, 136, 0.07), transparent 70%), radial-gradient(60% 45% at 0% 100%, rgba(201, 168, 106, 0.06), transparent 70%);
  --hero-grad: linear-gradient(140deg, #093d34 0%, #06302a 55%, #04241f 100%);
  --gold: #d2b884;
  --gold-ink: #ecd6a8;
  --gold-soft: rgba(210, 184, 132, 0.18);
}

/* ==== styles.css ==== */




body {
  margin: 0;
  min-height: 100vh;
  background-image: radial-gradient(circle at 15% 50%, rgba(26, 115, 232, 0.03), transparent 25%),
                    radial-gradient(circle at 85% 30%, rgba(16, 185, 129, 0.03), transparent 25%);
  overflow-x: hidden;
}

button, input, select { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }



.ambient-a {
  display: none;
}

.ambient-b {
  display: none;
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.auth-layout {
  display: grid;
  align-items: stretch;
}

.mobile-confirm {
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 34px;
  text-align: center;
}

.mobile-confirm h1 {
  margin: 8px 0 0;
  font-size: 36px;
}

.mobile-confirm p {
  margin: 0;
  line-height: 1.7;
}

.auth-story,
.auth-card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.auth-story {
  align-content: space-between;
}





.auth-card {
  display: grid;
  align-content: start;
  gap: 16px;
}

.auth-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.auth-head h2 {
  margin: 6px 0 0;
}

.status-pill,
.role-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}





.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.auth-tabs button {
  min-height: 42px;
  border: 0;
}



.auth-form {
  display: grid;
}

.auth-form label {
  display: grid;
  gap: 7px;
}

.auth-form input,
.auth-form select {
  width: 100%;
  outline: 0;
}

.auth-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.agreement-check {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 10px !important;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(156, 184, 220, .42);
  border-radius: 16px;
  background: rgba(255,255,255,.66);
}

.auth-form .agreement-check {
  margin: 0 0 4px !important;
  cursor: pointer;
}

.agreement-check input {
  width: 18px !important;
  min-height: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  cursor: pointer;
}

.agreement-check span {
  font-size: 12px;
  line-height: 1.55;
  cursor: pointer;
}

.app-shell {
  margin: 0 auto;
  display: grid;
}

.sidebar {
  position: sticky;
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(156, 184, 220, .35);
}

.brand-mark {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--blue), var(--green));
  box-shadow: 0 16px 32px rgba(37, 99, 235, .24);
}

.brand strong, .brand span { display: block; }
.brand strong { font-size: 17px; }
.brand span { color: var(--muted); font-size: 12px; margin-top: 2px; }

.nav {
  display: grid;
}

.nav-item {
  width: 100%;
  display: grid;
  text-align: left;
}






.nav-item small { margin-top: 2px; }

.mini-card {
  margin-top: auto;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(238,247,255,.82));
  border: 1px solid var(--line);
}

.quote-card strong {
  display: block;
  margin-top: 8px;
}

.quote-meter {
  height: 6px;
  margin-top: 14px;
  border-radius: 99px;
  overflow: hidden;
}

.quote-meter span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
}

.main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

.topbar-title {
  min-width: 0;
}

.topbar h1 {
  margin: 4px 0 0;
  line-height: 1.05;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-menu-tools {
  display: none;
}

.search-box {
  width: min(320px, 30vw);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}

.search-box span {
  font-size: 12px;
  font-weight: 800;
}

.search-box input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
}

.global-search-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.settings-page {
  display: grid;
  gap: 18px;
}

.settings-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.settings-card {
  display: grid;
  gap: 14px;
  align-content: start;
}

.settings-list {
  display: grid;
  gap: 8px;
}

.settings-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(156, 184, 220, .36);
  border-radius: 14px;
  background: rgba(255, 255, 255, .62);
}

.settings-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.settings-row strong {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

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

.settings-class-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-class-list span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(156, 184, 220, .36);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
}



.settings-join-class {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.settings-join-class input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(156, 184, 220, .46);
  padding: 0 13px;
}

.settings-join-class button {
  min-height: 44px;
  white-space: nowrap;
}

.settings-note {
  padding: 12px 14px;
  border: 1px solid rgba(26, 115, 232, .18);
  border-radius: 16px;
  background: rgba(229, 240, 255, .52);
  line-height: 1.5;
}

.setting-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(156, 184, 220, .36);
  border-radius: 14px;
  background: rgba(255, 255, 255, .62);
  font-weight: 800;
}

@media (max-width: 560px) {
  .settings-join-class {
    grid-template-columns: minmax(0, 1fr);
  }
}

.danger-action {
  background: #e11d48 !important;
  color: #fff !important;
}

/* R7-fix：旧「大字」规则（body 17px）删除——新实现是 refine.css 的整体 zoom，避免双重放大 */

html.cv-reduce-motion *,
html.cv-reduce-motion *::before,
html.cv-reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

.search-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}



.search-results {
  display: grid;
  gap: 8px;
}

.search-result {
  display: grid;
  grid-template-columns: auto minmax(72px, max-content) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  text-align: left;
}

.search-result span {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.search-result strong,
.search-result small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.search-result em {
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.pill-button, .icon-button, .secondary-action, .primary-action {
  border: 0;
  border-radius: 99px;
  min-height: 48px;
  padding: 0 18px;
  font-weight: 800;
  transition: all .2s ease;
}

.wechat-action {
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--green) 38%, transparent);
  border-radius: 18px;
  background: var(--green-soft);
  color: var(--green-ink);
  font-weight: 900;
}

.wechat-bind-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
  background: var(--green-soft);
}

.wechat-bind-panel h3,
.wechat-bind-panel p {
  margin: 0;
}

.wechat-bind-panel label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 850;
}

.wechat-bind-panel input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(156, 184, 220, .48);
  padding: 0 14px;
  outline: 0;
}

.wechat-qr-panel {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
  background: var(--green-soft);
  text-align: center;
}

.wechat-qr-panel h3,
.wechat-qr-panel p {
  margin: 0;
}

.qr-box {
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(156, 184, 220, .38);
}

.qr-box img {
  width: 170px;
  height: 170px;
  border-radius: 14px;
}





.primary-action:hover, .secondary-action:hover, .pill-button:hover, .icon-button:hover {
  transform: translateY(-2px);
}

.primary-action:disabled,
.secondary-action:disabled,
.pill-button:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  opacity: .48;
  transform: none;
  box-shadow: none;
}

.menu-toggle { display: none; width: 48px; padding: 0; }

.hero-grid {
  display: grid;
}



.hero-panel, .progress-panel, .surface-card, .metric-card, .word-card, .question-card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.hero-panel {
  position: relative;
}

.hero-panel::after {
  inset: auto -60px -120px auto;
  border-radius: 50%;
}



.hero-copy h2 {
  max-width: 760px;
  line-height: 1.04;
}

.hero-copy p {
  margin: 0;
}

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

.learning-visual {
  position: relative;
  min-height: 240px;
}

.orbit {
  position: absolute;
  inset: 20px;
  border: 1px dashed rgba(37, 99, 235, .22);
  border-radius: 42% 58% 52% 48%;
  animation: spinSlow 18s linear infinite;
}

.orbit-two {
  inset: 48px 18px 26px 54px;
  border-color: rgba(35, 178, 109, .24);
  animation-duration: 22s;
  animation-direction: reverse;
}

.letter-tile, .student-avatar {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 26px;
  font-weight: 950;
  box-shadow: 0 18px 42px rgba(45, 79, 136, .16);
}

.letter-tile {
  width: 78px;
  height: 78px;
  color: #fff;
  font-size: 42px;
}

.tile-a { left: 26px; top: 44px; background: var(--blue); animation: bob 3.8s ease-in-out infinite; }
.tile-b { right: 38px; top: 22px; background: var(--green); animation: bob 4.3s ease-in-out infinite .2s; }
.tile-c { right: 78px; bottom: 30px; background: var(--yellow); animation: bob 4s ease-in-out infinite .4s; }

.student-avatar {
  left: 50%;
  top: 52%;
  width: 124px;
  height: 124px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .9);
  color: var(--blue);
  font-size: 34px;
  border: 1px solid rgba(156, 184, 220, .42);
}

.progress-panel {
  min-height: 150px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  justify-items: start;
  align-items: center;
  text-align: left;
  gap: 18px;
}

.ring {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--green) 0deg, rgba(37, 99, 235, .12) 0deg);
}

.ring span {
  width: 86px;
  height: 86px;
  border-radius: inherit;
  display: grid;
  place-items: center;
  font-size: 24px;
}

.progress-panel strong {
  display: block;
  font-size: 22px;
}

.progress-panel p {
  line-height: 1.6;
  margin: 8px 0 0;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-grid.compact {
  margin-bottom: 18px;
}

.metric-card {
  position: relative;
  overflow: hidden;
}

.metric-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -54px;
  bottom: -72px;
  border-radius: 50%;
  opacity: .18;
  background: currentColor;
}

.metric-card span, .metric-card small { display: block; color: var(--muted); font-weight: 750; }
.metric-card strong { display: block; margin: 10px 0 2px; line-height: 1; }
.metric-card.blue { color: var(--blue); }
.metric-card.green { color: var(--green); }
.metric-card.peach { color: var(--coral); }
.metric-card.purple { color: var(--purple); }

.view {
  min-width: 0;
  display: none;
}
.view.active { display: block; }

.view-grid {
  display: grid;
}

.today-focus-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  align-items: start;
}

.today-plan-card {
  width: 100%;
}



.surface-card h2, .surface-card h3 {
  margin: 0 0 12px;
}

.field-stack { display: grid; gap: 12px; }

.field {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 760;
}

.option-field {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.option-field legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

select, input[type="number"], input[type="search"] {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  outline: 0;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 17px;
  background: var(--accent-soft);
  border: 1px solid rgba(156, 184, 220, .42);
}

.segmented-control label {
  display: block;
}

.segmented-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-control span {
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 900;
}



.unit-tools {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.text-button {
  border: 1px solid rgba(156, 184, 220, .48);
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
}

.unit-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 3px;
}

.unit-pill {
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(156, 184, 220, .48);
  border-radius: 14px;
  padding: 8px 10px;
  font-weight: 850;
}

.unit-pill input { width: 16px; height: 16px; }

.unit-pill small { font-size: 11px; }
.multi-unit-pills { max-height: 300px; }

.home-level-picker {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(156, 184, 220, .38);
}

.home-level-picker span {
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.home-level-picker strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  line-height: 1;
}

.home-level-picker p {
  margin: 8px 0 0;
  line-height: 1.5;
}

.home-level-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-level-option {
  min-height: 92px;
  display: grid;
  gap: 4px;
  align-content: center;
  text-align: left;
  border: 1px solid rgba(156, 184, 220, .5);
  padding: 12px;
  cursor: pointer;
}



.home-level-option strong {
  margin: 0;
  font-size: 30px;
}

.home-level-option small {
  font-weight: 800;
}

.level-lock {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(37, 99, 235, .14);
}

.level-lock span,
.level-lock small {
  font-size: .82rem;
  font-weight: 750;
}

.level-lock strong {
  font-size: 1.2rem;
  line-height: 1.1;
}

.task-list { display: grid; }

.task-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.task-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-weight: 950;
}

.task-row strong, .task-row span { display: block; }
.task-row span, .muted { color: var(--muted); }
.task-row strong,
.task-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.daily-plan-summary,
.daily-plan-overview {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: stretch;
  padding: 12px;
}











.daily-plan-summary div,
.daily-plan-stat {
  min-width: 0;
}

.daily-plan-stat {
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, .12);
}

.daily-plan-stat.homework-stat {
  border-color: rgba(124, 58, 237, .18);
}

.daily-plan-stat.learning-stat {
  border-color: rgba(22, 163, 74, .18);
}

.daily-plan-summary span,
.daily-plan-summary small,
.daily-plan-stat span,
.daily-plan-stat small {
  display: block;
  color: var(--muted);
  font-size: .82rem;
}

.daily-plan-summary strong,
.daily-plan-stat strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1.1;
  margin: 3px 0;
}

.daily-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.daily-section + .daily-section {
  margin-top: 6px;
}





.daily-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 2px 0;
}

.daily-section-head div {
  min-width: 0;
}

.daily-section-head strong {
  font-size: .95rem;
}

.daily-section-head small {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  line-height: 1.35;
}

.daily-section-head span {
  font-size: .86rem;
  font-weight: 850;
  white-space: nowrap;
}

.daily-target-editor {
  padding: 14px;
}

.daily-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.daily-target-block {
  min-width: 0;
}

.daily-target-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 12px;
}

.daily-target-head span {
  color: var(--muted);
  font-size: .86rem;
}

.daily-target-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto)) minmax(110px, 1fr);
  gap: 8px;
  align-items: end;
}



.daily-target-controls.linked-quiz-controls {
  grid-template-columns: 1fr;
}

.daily-linked-quiz {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 14px;
  background: rgba(37, 99, 235, .06);
}

.daily-linked-quiz span,
.daily-linked-quiz small {
  color: var(--muted);
  font-size: .84rem;
}

.daily-linked-quiz strong {
  color: var(--blue);
  font-size: 1.12rem;
  white-space: nowrap;
}

.daily-target-input {
  margin: 0;
}

.daily-target-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.daily-task-row {
  align-items: center;
  grid-template-columns: 46px minmax(0, 1fr) minmax(116px, auto);
}

.daily-task-main {
  min-width: 0;
}



.daily-task-title-line strong {
  flex: 1 1 auto;
}











.daily-mini-progress {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
  width: min(100%, 220px);
  min-width: 0;
}

.daily-mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.daily-task-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.assignment-archive {
  display: grid;
  gap: 16px;
}

.assignment-archive-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.assignment-archive-hero .secondary-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.assignment-archive-hero .ic {
  width: 16px;
  height: 16px;
}

.assignment-archive-list-card {
  display: grid;
  gap: 14px;
}

.assignment-section-subtitle {
  margin: -4px 0 0;
  font-size: .9rem;
  line-height: 1.45;
}

.assignment-timeline {
  display: grid;
  gap: 10px;
}

.assignment-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(156, 184, 220, .34);
  border-radius: 16px;
  background: rgba(255,255,255,.74);
}

.assignment-history-row.expired,
.assignment-history-row.archived {
  opacity: .84;
}

.assignment-history-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--blue);
  font-weight: 950;
}

.assignment-history-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.assignment-history-title strong,
.assignment-history-main p,
.assignment-history-main small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.assignment-history-main p,
.assignment-history-main small {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.assignment-history-meta b {
  color: var(--ink);
  font-weight: 800;
}

.assignment-history-words {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  opacity: .85;
}

.assignment-review-line {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(94, 120, 255, .08);
  color: var(--ink);
  font-size: .86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.assignment-status,
.assignment-archive-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.assignment-status.completed {
  color: var(--green-ink);
  background: var(--green-soft);
}

.assignment-status.in_progress {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.assignment-status.not_started {
  color: var(--muted);
  background: var(--surface-2);
}

.assignment-status.expired,
.assignment-status.closed,
.assignment-status.archived,
.assignment-archive-label {
  color: var(--amber-ink);
  background: var(--amber-soft);
}

.assignment-history-actions {
  display: flex;
  justify-content: flex-end;
  min-width: 86px;
}

.all-assignment-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.all-assignment-card.active {
  border-color: rgba(22, 163, 74, .22);
}

.all-assignment-card.expired,
.all-assignment-card.closed {
  border-color: rgba(245, 158, 11, .24);
}

.daily-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

.training-grid {
  align-items: start;
}

.training-workspace {
  display: grid;
  gap: 16px;
}

.training-mode-grid {
  display: grid;
}

.training-action-card {
  min-height: 150px;
  display: grid;
  gap: 14px;
  align-content: space-between;
  padding: 18px;
}

.training-action-card span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 900;
}

.training-action-card strong {
  display: block;
  font-size: 17px;
  font-weight: 950;
}

.training-action-card p {
  margin: 6px 0 0;
  line-height: 1.5;
}

.inline-ai-coach {
  display: grid;
  gap: 12px;
}



.wrong-ai-coach {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.writing-prompt-generator {
  display: grid;
}



.writing-prompt-head strong {
  display: block;
}

.writing-prompt-head span {
  display: block;
  margin-top: 3px;
}







.writing-prompt-suggestion {
  display: grid;
}



.writing-prompt-suggestion p,
.writing-prompt-suggestion small {
  margin: 0;
  line-height: 1.5;
}

.word-card {
  display: grid;
  gap: 18px;
  align-content: center;
  text-align: center;
  padding: 30px;
}

.word-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  font-weight: 850;
}

.word-title {
  margin: 0;
  font-size: clamp(46px, 7vw, 82px);
  line-height: .98;
}

.word-meaning {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
}

.word-meaning small {
  display: block;
  margin-top: 8px;
  font-size: .9rem;
  line-height: 1.5;
}

.word-meaning span {
  display: block;
  animation: meaningFade .18s ease both;
}

.word-meaning.meaning-revealed {
  cursor: pointer;
  border-radius: 14px;
  padding: 8px 12px;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.word-meaning.meaning-revealed:hover {
  background: rgba(37, 99, 235, .07);
  transform: translateY(-1px);
}

.meaning-switch {
  min-width: 72px;
}

@keyframes meaningFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.word-example {
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.65;
}

.study-tools {
  width: min(820px, 100%);
  margin: 4px auto 0;
  display: grid;
  gap: 12px;
}

.tool-cluster {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  text-align: left;
}

.tool-cluster span,
.tool-cluster strong {
  display: block;
}

.tool-cluster span {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tool-cluster strong {
  margin-top: 4px;
  font-size: 14px;
}

.tool-button-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tool-button-grid .primary-action,
.tool-button-grid .secondary-action {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 15px;
}

.audio-feedback {
  min-height: 24px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}



.study-flow-actions {
  padding-top: 4px;
}

.card-actions, .inline-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.card-actions button,
.inline-actions button {
  -webkit-tap-highlight-color: transparent;
}

.question-card {
  padding: 26px;
}

.question-prompt {
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.1;
  margin: 0 0 18px;
}

.options {
  display: grid;
  gap: 10px;
}

.option {
  min-height: 58px;
  padding: 13px 16px;
  text-align: left;
  font-weight: 760;
}




.option:disabled {
  cursor: default;
}

.feedback {
  margin-top: 14px;
  padding: 14px 16px;
  line-height: 1.55;
}




.writing-grid {
  align-items: start;
}

.upload-drop {
  min-height: 190px;
  display: grid;
  place-items: center;
  gap: 6px;
  margin: 16px 0;
  padding: 22px;
  text-align: center;
  cursor: pointer;
}

.upload-drop input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload-drop span {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.upload-drop strong {
  font-size: 22px;
}

.upload-drop small {
  max-width: 280px;
  line-height: 1.55;
}

.writing-workspace {
  display: grid;
  gap: 16px;
}

.writing-preview {
  min-height: 300px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(156, 184, 220, .38);
}

.writing-preview img {
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  display: block;
}

.empty-preview {
  font-weight: 850;
}

.writing-textarea-label {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.writing-textarea-label span {
  font-weight: 900;
}

.writing-textarea-label textarea {
  min-height: 260px;
  width: 100%;
  resize: vertical;
  border: 1px solid rgba(156, 184, 220, .48);
  padding: 16px;
  font: inherit;
  line-height: 1.65;
}

.writing-next-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
}



.mini-field {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 900;
}

.mini-field input,
.mini-field select {
  min-height: 44px;
  border: 1px solid rgba(156, 184, 220, .48);
  padding: 0 13px;
  font: inherit;
}

.writing-review-panel {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.writing-review-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(37, 99, 235, .16);
}

.writing-review-head h3 {
  margin: 4px 0 0;
}

.writing-review-head > strong {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 42px;
  line-height: 1;
}

.writing-review-head small {
  font-size: 14px;
}

.writing-score-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.writing-score-grid.native-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.writing-score-grid.cambridge-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.writing-score-grid article {
  min-height: 84px;
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 14px;
  border: 1px solid rgba(156, 184, 220, .35);
}

.writing-score-grid span {
  font-size: 12px;
  font-weight: 850;
}

.writing-score-grid strong {
  font-size: 25px;
}

.writing-score-grid small {
  font-size: 12px;
  font-weight: 800;
}

.sentence-feedback-list {
  display: grid;
  gap: 10px;
}

.native-tip-list {
  display: grid;
  gap: 10px;
}

.native-tip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 12px;
  padding: 14px 16px;
  border: 1px solid rgba(37, 99, 235, .18);
}

.native-tip strong,
.native-tip span {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  line-height: 1.35;
}



.native-tip span {
  font-weight: 900;
}

.native-tip p {
  grid-column: 1 / -1;
  margin: 0;
  line-height: 1.55;
}

.essay-version-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.essay-version-grid > :only-child {
  grid-column: 1 / -1;
}

.sentence-feedback {
  padding: 14px 16px;
  border: 1px solid rgba(156, 184, 220, .36);
}

.sentence-feedback strong {
  display: block;
  line-height: 1.5;
}

.sentence-feedback p {
  margin: 8px 0 5px;
}

.sentence-feedback small {
  line-height: 1.5;
}

.assignment-select-card {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(47,140,104,.16);
}

.assignment-select-card strong,
.assignment-brief h3 {
  color: #203452;
}

.assignment-select-card span,
.assignment-brief p {
  color: var(--muted);
  line-height: 1.55;
}

.assignment-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(32,47,76,.08);
}

.assignment-brief h3,
.assignment-brief p {
  margin: 4px 0 0;
}

.assignment-brief > span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.practice-review {
  margin-top: 16px;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(156, 184, 220, .38);
}





.practice-review span {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.practice-review strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.review-detail {
  display: grid;
  gap: 10px;
  margin: 0;
}

.review-detail div {
  padding: 12px;
  border: 1px solid rgba(156, 184, 220, .28);
}

.review-detail dt {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.review-detail dd {
  margin: 0;
  line-height: 1.55;
}

.review-audio-actions {
  justify-content: flex-start;
}

.quiz-review-panel {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--joy-edge);
  background: var(--joy-soft);
}

.quiz-review-panel.good {
  border-color: color-mix(in srgb, var(--green) 28%, transparent);
  background: var(--green-soft);
}

.quiz-review-panel.good strong,
.quiz-review-head strong {
  color: var(--ink);
  font-size: 16px;
}

.quiz-review-panel.good small,
.quiz-review-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quiz-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quiz-review-list {
  display: grid;
  gap: 10px;
}

.quiz-review-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(156, 184, 220, .28);
  background: rgba(255,255,255,.78);
}

.quiz-review-card strong {
  color: var(--ink);
  font-size: 18px;
}

.quiz-review-card p {
  margin: 0;
  color: #263a5d;
  line-height: 1.55;
}

.word-list {
  display: grid;
  gap: 10px;
}

.speaking-list-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin: 22px 0 12px;
}

.speaking-list-head h3 {
  margin-bottom: 0;
}

.speaking-list-head span {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.ai-challenge-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.ai-challenge-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.ai-challenge-head h3 {
  margin: 0 0 6px;
  font-size: 30px;
}

.ai-challenge-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-challenge-tools span {
  min-width: 46px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.icon-action {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(156, 184, 220, .48);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.icon-action:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.ai-challenge-head p,
.ai-task p,
.ai-result-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.ai-task {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(156, 184, 220, .32);
}

.ai-task span,
.ai-answer-field span {
  color: #2452a3;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.ai-task strong {
  font-size: 17px;
}

.ai-answer-field {
  display: grid;
  gap: 8px;
  opacity: .86;
}

.ai-answer-field textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  border: 1px solid rgba(156, 184, 220, .48);
  padding: 14px;
  font: inherit;
  line-height: 1.5;
  outline: 0;
}



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

.ai-actions .muted-action {
  opacity: .78;
}

.ai-result {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(35,178,109,.32);
}



.ai-result-copy {
  display: grid;
  gap: 6px;
}



.ai-pronunciation-result {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(35, 178, 109, .24);
}

.ai-score-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compact-word {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.compact-word strong { font-size: 18px; }
.compact-word p { margin: 4px 0 0; line-height: 1.5; }
.compact-word small {
  display: block;
  margin-top: 8px;
  line-height: 1.5;
}

.compact-word-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.word-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(156, 184, 220, .42);
  background: rgba(255,255,255,.76);
  color: #5c6b83;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.word-status.learned {
  color: #2457a6;
  background: rgba(37, 99, 235, .08);
  border-color: rgba(37, 99, 235, .18);
}

.word-status.mastered {
  color: var(--green-ink);
  background: var(--green-soft);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

.word-status.review {
  color: var(--joy-ink);
  background: var(--joy-soft);
  border-color: var(--joy-edge);
}

.wrong-word-card {
  align-items: start;
}

.wrong-word-card .word-meta {
  justify-content: flex-start;
  margin-bottom: 8px;
}

.compact-metrics {
  grid-template-columns: 1fr;
  margin-top: 14px;
}

.check-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(156, 184, 220, .42);
}

.check-row input {
  width: 18px;
  height: 18px;
}

.check-row span {
  font-weight: 900;
}

.check-row small {
  font-size: 12px;
  font-weight: 800;
}

.reading-list {
  display: grid;
  gap: 14px;
}

.reading-audio-source {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  margin: 14px 0;
}

.reading-audio-source .option-field {
  margin: 0;
}

.reading-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 8px;
}

.reading-mode-tabs button {
  min-height: 74px;
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: start;
  padding: 14px 16px;
  border: 1px solid rgba(156, 184, 220, .42);
  text-align: left;
  cursor: pointer;
}



.reading-mode-tabs strong {
  font-size: 16px;
  font-weight: 950;
}

.reading-mode-tabs span {
  font-size: 12px;
  font-weight: 850;
}

.reading-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.reading-task-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.reading-task-card {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(156, 184, 220, .38);
  text-align: left;
  cursor: pointer;
}



.reading-task-card strong {
  font-size: 16px;
  line-height: 1.35;
}

.reading-task-card small,
.reading-task-card em {
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.reading-task-status {
  width: fit-content;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}





.reading-detail {
  min-width: 0;
}

.reading-empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
}

.reading-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.reading-overview article {
  min-height: 104px;
  display: grid;
  align-content: center;
  padding: 16px;
  border: 1px solid rgba(156, 184, 220, .36);
}

.reading-overview strong {
  display: block;
  font-size: 32px;
  line-height: 1;
}

.reading-overview span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 850;
}

.reading-card {
  padding: 18px;
  border: 1px solid rgba(156, 184, 220, .38);
  display: grid;
  gap: 16px;
}

.reading-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reading-card-head h3 {
  margin: 10px 0 6px;
  font-size: 24px;
}

.reading-card-head small {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 800;
}

.reading-progress {
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
}

.reading-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.sentence-list {
  display: grid;
  gap: 10px;
}

.sentence-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(156, 184, 220, .34);
}

.sentence-index {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 950;
}



.sentence-row p {
  margin: 0;
  line-height: 1.6;
}

.sentence-actions {
  display: flex;
  gap: 8px;
}

.sentence-actions .primary-action,
.sentence-actions .secondary-action {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 14px;
}



.reading-paragraph-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.reading-paragraph-copy small {
  font-weight: 800;
  line-height: 1.5;
}

.reading-audio-status {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
}

.reading-ai-guidance {
  display: grid;
  gap: 4px;
  max-width: 100%;
}

.reading-ai-guidance small {
  font-weight: 750;
}

.reading-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 340px;
}

.token-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.token-list span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}



.token-list.compact {
  gap: 4px;
}

.token-list.compact span {
  min-height: 22px;
  padding: 0 7px;
  font-size: 11px;
}

.section-title {
  margin: 20px 0 12px;
  font-size: 20px;
}

.admin-list {
  display: grid;
  gap: 10px;
}

.admin-row {
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid rgba(156, 184, 220, .36);
}

.admin-row strong,
.admin-row p {
  display: block;
}

.admin-row p,
.admin-row small {
  margin: 4px 0 0;
  line-height: 1.5;
}

.class-card-actions {
  margin-top: 10px;
  justify-content: flex-start;
}

.mini-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.mini-form label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 850;
}

.mini-form input,
.mini-form select {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(156, 184, 220, .48);
  border-radius: 15px;
  background: rgba(255, 255, 255, .86);
  color: var(--ink);
  padding: 0 12px;
  outline: 0;
}

.divider {
  height: 1px;
  margin: 16px 0;
}

.class-qr {
  width: 154px;
  display: grid;
  gap: 6px;
  justify-items: center;
}

.class-qr img {
  width: 118px;
  height: 118px;
  border-radius: 14px;
  border: 1px solid rgba(156, 184, 220, .36);
}

.class-qr small {
  max-width: 154px;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 11px;
}

.nowrap {
  white-space: nowrap;
}

.class-qr .class-qr-code {
  overflow-wrap: normal;
  white-space: nowrap;
  font-weight: 800;
}

.class-qr-copy {
  font-size: 12px;
  padding: 4px 10px;
  min-height: 0;
}

.student-result-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.student-candidate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(156, 184, 220, .36);
}

.student-candidate strong {
  display: block;
}

.student-candidate p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}



.data-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid rgba(156, 184, 220, .36);
}

.data-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(156, 184, 220, .28);
  vertical-align: top;
}



.data-table tr:last-child td {
  border-bottom: 0;
}

.teacher-dashboard {
  display: grid;
  gap: 16px;
}

.teacher-workspace {
  display: grid;
  gap: 14px;
}

.teacher-class-switcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) auto;
  gap: 16px;
  align-items: end;
  position: sticky;
  top: 14px;
  z-index: 5;
}

.teacher-class-switcher h2,
.teacher-class-switcher p {
  margin: 4px 0 0;
}

.teacher-class-picker {
  display: grid;
  gap: 7px;
}

.teacher-class-picker span {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.teacher-class-picker select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(36, 87, 166, .28);
  padding: 0 12px;
  font-weight: 850;
  outline: 0;
}

.teacher-top-actions {
  display: flex;
  justify-content: flex-end;
}

.teacher-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
}

.teacher-tabs button {
  min-height: 40px;
  border: 0;
  padding: 0 14px;
  font-weight: 900;
  cursor: pointer;
}



.teacher-panel.hidden {
  display: none !important;
}

.teacher-class-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-hero,
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.dashboard-hero h2,
.section-head h3 {
  margin: 4px 0 0;
}

.section-head > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.dashboard-metrics {
  display: grid !important;
}

.analytics-grid,
.teacher-writing-grid,
.teacher-reading-grid,
.teacher-vocab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* W2.7 词汇布置页：宽屏下左栏（表单+选词）加宽，选词网格随宽度自动 3–4 列，
   摆脱「904 词一屏只见 14 个」；右栏已布置列表保持紧凑 */
@media (min-width: 1100px) {
  .teacher-vocab-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .teacher-vocab-grid .vocab-word-picker {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    max-height: 520px;
  }
}

.assignment-study-panel {
  display: grid;
  gap: 10px;
}

.assignment-study-panel h2 {
  margin: 4px 0 0;
}

.assignment-progress-row,
.reading-full-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.assignment-progress-row strong {
  font-size: 24px;
  color: #203452;
}

.assignment-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.assignment-step {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(156, 184, 220, .38);
  border-radius: 12px;
  background: #fff;
}

.assignment-step span,
.assignment-step small,
.assignment-tricky-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.assignment-step strong {
  color: var(--ink);
  font-size: 18px;
}

.assignment-step.done {
  border-color: color-mix(in srgb, var(--green) 34%, transparent);
  background: var(--green-soft);
}

.assignment-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.assignment-quiz-aside {
  display: grid;
  gap: 12px;
}

.assignment-tricky-field input {
  margin-top: 6px;
}

.quiz-scope-field {
  display: grid;
  gap: 8px;
}

.question-detail {
  margin: -4px 0 18px;
  color: var(--muted);
  line-height: 1.55;
}

.vocab-quick-actions {
  flex-wrap: wrap;
}

.vocab-picker-box {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(156, 184, 220, .42);
  border-radius: 16px;
  background: rgba(247, 250, 252, .82);
}

.vocab-picker-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 12px;
  align-items: end;
}

.vocab-picker-head strong,
.vocab-picker-head span {
  display: block;
}

.vocab-picker-head strong {
  color: var(--ink);
  font-size: 15px;
}

.vocab-picker-head span,
.vocab-picker-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.vocab-picker-head label {
  margin: 0;
}

.vocab-word-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding: 2px;
}

.vocab-word-option {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 42px minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 10px;
  align-items: center;
  text-align: left;
  border: 1px solid rgba(156, 184, 220, .44);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 10px;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.vocab-word-option:hover {
  transform: translateY(-1px);
  border-color: rgba(36, 87, 166, .38);
  box-shadow: 0 10px 20px rgba(36, 87, 166, .08);
}

.vocab-word-option.selected {
  background: var(--accent-soft);
  border-color: rgba(36, 87, 166, .62);
  box-shadow: inset 0 0 0 1px rgba(36, 87, 166, .14);
}

.vocab-word-number {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef3f8;
  color: #536477;
  font-size: 12px;
  font-weight: 900;
}

.vocab-word-option.selected .vocab-word-number {
  background: #2457a6;
  color: #fff;
}

.vocab-word-main,
.vocab-word-main small {
  min-width: 0;
}

.vocab-word-main strong,
.vocab-word-main small,
.vocab-word-meaning {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-word-main strong {
  font-size: 15px;
  color: var(--ink);
}

.vocab-word-main small,
.vocab-word-meaning {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.vocab-word-meaning {
  line-height: 1.35;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.vocab-picker-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.vocab-assignment-card small {
  display: block;
  margin-top: 4px;
}

.assignment-report {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding-top: 6px;
}

.assignment-report summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(156, 184, 220, .38);
  border-radius: 12px;
  background: #f7fafc;
  cursor: pointer;
  color: var(--ink);
  font-weight: 900;
}

.assignment-report summary span,
.assignment-report summary strong {
  font-size: 13px;
}

.assignment-report[open] summary {
  border-color: rgba(36, 87, 166, .34);
  background: var(--accent-soft);
}

.assignment-report-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.assignment-report-metrics article,
.assignment-heat {
  padding: 10px;
  border: 1px solid rgba(156, 184, 220, .34);
  border-radius: 12px;
  background: #fff;
}

.assignment-report-metrics span,
.assignment-report-metrics small,
.assignment-heat strong {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.assignment-report-metrics strong {
  display: block;
  margin: 4px 0;
  color: var(--ink);
  font-size: 22px;
}

.assignment-heat {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.assignment-common-issues {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(156, 184, 220, .34);
  border-radius: 14px;
  background: rgba(245, 249, 255, .78);
}

.assignment-common-head,
.assignment-common-issues > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.assignment-common-issues strong,
.assignment-common-issues span,
.assignment-common-issues small {
  display: block;
}

.assignment-common-issues strong {
  color: var(--ink);
  font-weight: 950;
}

.assignment-common-issues span,
.assignment-common-issues small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.assignment-common-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 10px;
}

.assignment-common-grid article {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(156, 184, 220, .28);
  border-radius: 12px;
  background: rgba(255,255,255,.78);
}

.assignment-common-grid article:only-child {
  grid-column: 1 / -1;
}

.assignment-common-sentences {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.assignment-common-sentences div {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(156, 184, 220, .22);
}

.assignment-common-sentences div:first-child {
  padding-top: 0;
  border-top: 0;
}

.assignment-common-sentences p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 760;
}

.assignment-report-table {
  margin-top: 10px;
}

.reading-full-card {
  margin: 16px 0;
  padding: 14px;
  border-radius: 16px;
  background: #f7fafc;
  border: 1px solid rgba(156, 184, 220, .38);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.reading-full-card > div {
  display: grid;
  gap: 4px;
}

.reading-full-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.reading-full-text {
  grid-column: 1 / -1;
  max-height: 280px;
  overflow: auto;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--hairline);
}

.reading-full-text p {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 10px;
  color: #253655;
  line-height: 1.75;
}

.reading-full-text p:last-child {
  margin-bottom: 0;
}

.reading-full-text p span {
  color: #2457a6;
  font-size: 12px;
  font-weight: 950;
}

.reading-full-issues {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.reading-practice-summary,
.reading-practice-result {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(229, 240, 255, .58);
  border: 1px solid rgba(37, 99, 235, .16);
}

.reading-practice-summary strong,
.reading-practice-result strong {
  display: block;
  color: var(--ink);
}

.reading-practice-summary small,
.reading-practice-result p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.reading-practice-modal {
  width: min(780px, 100%);
}

.reading-practice-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.reading-practice-card {
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(156, 184, 220, .34);
  background: rgba(255,255,255,.74);
}

.reading-practice-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reading-practice-card-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.reading-practice-card-head strong {
  font-size: 14px;
  font-weight: 950;
}

.reading-practice-card p {
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
  font-weight: 760;
}

.reading-practice-card > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.45;
}



.reading-practice-audio {
  width: 100%;
}

.reading-history-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(156, 184, 220, .28);
}

.section-head.compact {
  margin-bottom: 0;
}

.reading-history-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.reading-history-metrics article {
  padding: 10px;
  border: 1px solid rgba(156, 184, 220, .34);
  border-radius: 12px;
  background: rgba(255,255,255,.74);
}

.reading-history-metrics span,
.reading-history-metrics small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.reading-history-metrics strong {
  display: block;
  margin: 4px 0;
  color: var(--ink);
  font-size: 22px;
}

.reading-history-list {
  display: grid;
  gap: 8px;
}

.reading-history-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.reading-history-card strong,
.reading-history-card small {
  display: block;
}

.reading-history-card small,
.reading-history-card p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  margin: 3px 0 0;
}

.reading-history-score-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.reading-history-score-row span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(36,87,166,.08);
  color: #2457a6;
  font-size: 11px;
  font-weight: 950;
}

.reading-history-empty {
  margin: 0;
}

.reading-teacher-status {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(36,87,166,.08);
  color: #2457a6;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.reading-teacher-status.done {
  color: #1f7655;
  background: rgba(47,140,104,.1);
}

.reading-teacher-status.warn {
  color: #9a4b1f;
  background: rgba(245,158,11,.14);
}

.reading-teacher-status.todo {
  color: #667085;
  background: rgba(102,112,133,.1);
}

.teacher-reading-history {
  min-width: 180px;
}

.teacher-reading-history summary {
  cursor: pointer;
  color: #2457a6;
  font-size: 12px;
  font-weight: 950;
}

.teacher-reading-history-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.teacher-reading-history-list article {
  display: grid;
  gap: 5px;
  padding: 8px;
  border-radius: 10px;
  background: #f7fafc;
  border: 1px solid rgba(156,184,220,.3);
}

.teacher-reading-history-list strong,
.teacher-reading-history-list small {
  display: block;
}

.teacher-reading-history-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chart-card {
  display: grid;
  gap: 18px;
}

.bar-chart {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.bar-item {
  min-width: 0;
  display: grid;
  gap: 7px;
  justify-items: center;
}

.bar-track {
  width: 100%;
  height: 118px;
  display: flex;
  align-items: end;
}

.bar-track span {
  width: 100%;
  display: block;
}

.bar-item strong {
  font-size: 16px;
}

.bar-item small {
  font-size: 11px;
  font-weight: 800;
}

/* W2.2 小屏柱状图：7 列等分收缩，日期标签永不折行（原 11px 在 ≤360px 会参差折行） */
@media (max-width: 640px) {
  .bar-chart {
    gap: 6px;
  }

  .bar-item small {
    font-size: 10px;
    white-space: nowrap;
  }
}

.distribution-list {
  display: grid;
  gap: 14px;
}

.distribution-list article {
  display: grid;
  gap: 8px;
}

.distribution-list article > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.distribution-list span {
  font-weight: 850;
}

.distribution-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
}

.distribution-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
}




.assignment-form textarea,
.mini-form textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid rgba(156, 184, 220, .48);
  border-radius: 15px;
  background: rgba(255,255,255,.86);
  color: var(--ink);
  padding: 12px;
  outline: 0;
  font: inherit;
  line-height: 1.55;
}

.mini-form input[type="datetime-local"] {
  min-height: 46px;
}

.assignment-list,
.submission-list {
  display: grid;
  gap: 10px;
}

.reading-admin-form .inline-actions {
  justify-content: flex-start;
}

.reading-voice-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.assignment-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(32,47,76,.09);
}

.assignment-card strong,
.assignment-card p,
.assignment-card small {
  display: block;
}

.reading-assignment-card small,
.tts-job-card small {
  overflow-wrap: anywhere;
}

.tts-job-card .status-pill {
  align-self: center;
}

.student-detail-panel {
  margin-top: 16px;
}

.student-detail-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(156, 184, 220, .34);
}

.student-detail-card h3,
.student-detail-card h4,
.student-detail-card p {
  margin: 0;
}

.student-detail-metrics {
  display: grid !important;
}

.student-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.student-detail-grid h4 {
  margin-bottom: 10px;
  font-size: 15px;
}

.student-activity-list {
  display: grid;
  gap: 8px;
}

.student-activity-list article {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(32,47,76,.08);
}

.student-activity-list strong {
  line-height: 1.45;
}

.student-activity-list span,
.student-activity-list small {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.assignment-card p,
.assignment-card small {
  margin: 4px 0 0;
  line-height: 1.5;
}

.submission-split {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.submission-card {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  text-align: left;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(32,47,76,.09);
  color: #203452;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}



.submission-card span {
  font-size: 12px;
  font-weight: 850;
}

.submission-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.submission-detail-card {
  display: grid;
  gap: 14px;
}

.submission-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.submission-meta div {
  padding: 12px;
  border: 1px solid rgba(32,47,76,.06);
}

.submission-meta dt {
  font-size: 12px;
  font-weight: 850;
}

.submission-meta dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.submission-image {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(32,47,76,.08);
}

.speech-target {
  margin: 10px 0 18px;
  padding: 18px;
  line-height: 1.7;
}

.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
}

.speech-modal {
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  position: relative;
  padding: 26px;
}









.speech-target {
  max-height: min(300px, 34vh);
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.75;
}

.modal-close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 24px;
}

.recorder-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(156, 184, 220, .4);
}

.level-bar {
  height: 10px;
  margin: 12px 0 8px;
  border-radius: 99px;
  overflow: hidden;
}

.level-bar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
}

.speech-result {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.speech-target-review p {
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.75;
}

.speech-target-review mark {
  padding: 1px 4px;
  border-radius: 6px;
  background: #fff1b8;
  color: #8a4b0f;
  font-weight: 900;
}

.problem-word-list span {
  display: grid;
  gap: 2px;
  align-items: start;
}

.problem-word-list span strong {
  font-size: 13px;
}

.problem-word-list span small {
  font-size: 11px;
  font-weight: 800;
  color: #9b3f32;
}

.speech-diagnostic {
  display: grid;
  gap: 8px;
}

.speech-diagnostic p {
  margin: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.speech-diagnostic span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.speech-diagnostic code {
  white-space: normal;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

.score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.score-card {
  padding: 14px;
  border: 1px solid rgba(156, 184, 220, .38);
}

.score-card span { font-size: 12px; font-weight: 800; }
.score-card strong { display: block; margin-top: 6px; font-size: 30px; }

.hidden { display: none !important; }

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

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

@keyframes floatBlob {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(22px, 18px, 0) scale(1.04); }
}

@media (max-width: 1120px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-story { min-height: 460px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 14px auto 14px 14px;
    width: 292px;
    height: auto;
    z-index: 30;
    transform: translateX(-116%);
    transition: transform .22s ease;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .menu-toggle { display: inline-grid; place-items: center; }
  .hero-grid, .hero-panel, .view-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .learning-visual { min-height: 230px; }
}

@media (max-width: 760px) {
  .auth-screen { padding: 12px; align-items: start; }
  .auth-story, .auth-card { border-radius: 24px; padding: 20px; }
  .auth-story { min-height: auto; gap: 34px; }
  .auth-story h1 { margin-top: 42px; font-size: 44px; }
  .app-shell { padding: 12px; gap: 14px; }
  .topbar {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .topbar-title .eyebrow {
    display: none;
  }
  .topbar h1 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .top-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
  .top-actions > :not(.search-box) {
    display: none !important;
  }
  .search-box { width: 100%; }
  .hero-panel, .progress-panel, .surface-card, .question-card { border-radius: 24px; }
  .hero-panel { padding: 20px; min-height: auto; }
  .hero-copy h2 { font-size: 38px; }
  .learning-visual { min-height: 180px; }
  .letter-tile { width: 62px; height: 62px; font-size: 34px; border-radius: 20px; }
  .student-avatar { width: 100px; height: 100px; font-size: 28px; border-radius: 22px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unit-pills, .reading-overview, .reading-mode-tabs, .training-mode-grid, .score-grid { grid-template-columns: 1fr; }
  .word-card { min-height: 360px; padding: 22px; }
  .tool-cluster { grid-template-columns: 1fr; }
  .sentence-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .sentence-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-word { grid-template-columns: 1fr; }
  .analytics-grid, .teacher-writing-grid, .teacher-reading-grid, .teacher-vocab-grid, .teacher-class-tools, .teacher-class-switcher, .student-detail-grid, .submission-split, .assignment-brief, .reading-workspace, .reading-audio-source { grid-template-columns: 1fr; }
  .assignment-progress-row, .reading-full-card { display: grid; align-items: stretch; }
  .assignment-step-grid { grid-template-columns: 1fr; }
  .assignment-result-grid { grid-template-columns: 1fr; }
  .assignment-report-metrics,
  .assignment-common-grid {
    grid-template-columns: 1fr;
  }
  .assignment-report summary { display: grid; }
  .dashboard-hero, .section-head { display: grid; }
  .submission-meta { grid-template-columns: 1fr; }
  .admin-row, .student-candidate, .assignment-archive-hero, .assignment-history-row { grid-template-columns: 1fr; }
  .assignment-history-icon { width: 40px; height: 40px; }
  .assignment-history-title { align-items: flex-start; }
  .assignment-history-actions { justify-content: stretch; min-width: 0; }
  .recorder-card { grid-template-columns: 1fr; }
  .reading-actions { max-width: none; justify-content: stretch; }
  .teacher-class-switcher { position: static; }
  .teacher-top-actions { justify-content: stretch; }
}

@media (max-width: 460px) {
  .card-actions, .inline-actions { display: grid; grid-template-columns: 1fr; }
  .tool-button-grid { grid-template-columns: 1fr; }
  .primary-action, .secondary-action, .pill-button { width: 100%; }
}





.ambient {
  opacity: .22;
  filter: blur(14px);
}

.ambient-a {
  background: radial-gradient(circle, rgba(36, 87, 166, .28), transparent 68%);
}

.ambient-b {
  background: radial-gradient(circle, rgba(47, 140, 104, .18), transparent 70%);
}





.auth-story,
.auth-card,
.mobile-confirm,
.sidebar,
.topbar,
.hero-panel,
.progress-panel,
.surface-card,
.metric-card,
.word-card,
.question-card,
.speech-modal {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}





.auth-story {
  align-content: start;
}

.agreement-check,
.wechat-bind-panel,
.wechat-qr-panel,
.feedback,
.practice-review,
.review-detail div,
.reading-card,
.reading-overview article,
.task-row,
.compact-word,
.check-row,
.admin-row,
.student-candidate,
.data-table-wrap,
.recorder-card,
.score-card,
.tool-cluster,
.unit-pill,
.option,
.sentence-row,
.speech-target {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(32,47,76,.1);
  background: rgba(255,255,255,.82);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}

.brand {
  border-bottom-color: rgba(32,47,76,.1);
}

.brand-mark {
  border-radius: 11px;
  background: linear-gradient(145deg, #1d4f96, #2f8c68);
  box-shadow: 0 14px 32px rgba(36,87,166,.22);
}













.mini-card {
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(245,248,252,.82));
}



.topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
}





.top-actions {
  gap: 8px;
  min-width: 0;
}

.role-chip,
.status-pill,
.badge {
  border-color: rgba(36,87,166,.14);
  border-radius: 999px;
  color: #2457a6;
  background: rgba(36,87,166,.07);
}

.search-box {
  width: min(360px, 33vw);
  border-color: rgba(32,47,76,.12);
}

.search-box span {
  white-space: nowrap;
}

.global-search-panel {
  position: relative;
  z-index: 20;
  border-color: rgba(32,47,76,.12);
}

.search-result {
  grid-template-columns: auto minmax(72px, max-content) minmax(0, 1fr) auto;
}

@media (max-width: 380px) {
  .search-result em {
    font-size: 0;
  }

  .search-result em::after {
    content: "›";
    font-size: 16px;
  }
}

/* 学习页保留词汇查询；会员与回顾页不显示。教师/管理员维持各自搜索域。 */
body[data-view="growth"] .top-actions .search-box,
body[data-view="referral"] .top-actions .search-box,
body[data-view="speaking"] .top-actions .search-box,
body[data-view="member"] .top-actions .search-box {
  display: none;
}





.pill-button,
.icon-button,
.secondary-action,
.primary-action,
.wechat-action,
.text-button {
  border-radius: 999px;
  min-height: 44px;
  font-weight: 820;
}



.secondary-action,
.pill-button,
.icon-button,
.text-button {
  color: #263852;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(32,47,76,.12);
}

.wechat-action {
  color: #1f7655;
  background: rgba(47,140,104,.08);
  border-color: rgba(47,140,104,.18);
}

.primary-action:hover,
.secondary-action:hover,
.pill-button:hover,
.icon-button:hover,
.wechat-action:hover,
.text-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(24,39,75,.1);
}







.hero-panel::after {
  inset: auto -90px -130px auto;
  border-radius: 50%;
}

.hero-copy h2 {
  max-width: 600px;
}



.learning-visual {
  min-height: 330px;
  display: grid;
  place-items: center;
}

.orbit,
.letter-tile,
.student-avatar {
  display: none;
}

.console-window {
  width: min(430px, 100%);
  border: 1px solid rgba(32,47,76,.12);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  box-shadow: 0 28px 70px rgba(24,39,75,.14);
  animation: consoleFloat 5.5s ease-in-out infinite;
}

.console-head {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(32,47,76,.08);
  background: #f7f9fc;
}

.console-head span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfd7e6;
}

.console-head b {
  margin-left: auto;
  color: #6f7787;
  font-size: 12px;
}

.console-body {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  padding: 14px;
}

.console-rail {
  grid-row: 1 / 3;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  background: #f3f6fa;
}

.console-rail i {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(32,47,76,.08);
}

.console-rail i:nth-child(2) {
  background: #2457a6;
}

.console-card {
  border: 1px solid rgba(32,47,76,.1);
  border-radius: 12px;
  background: #fff;
  padding: 18px;
}

.console-card small {
  color: #6f7787;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.console-card strong {
  display: block;
  margin: 10px 0;
  color: #172033;
  font-size: 38px;
  line-height: 1;
}

.console-card p {
  margin: 0;
  color: #697486;
  line-height: 1.55;
}

.console-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.console-card span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(36,87,166,.08);
  color: #2457a6;
  font-size: 12px;
  font-weight: 820;
}

.score-preview {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px;
}

.score-preview strong {
  grid-column: 2;
  grid-row: 1 / 3;
  color: #2f8c68;
  font-size: 46px;
}

.progress-panel {
  min-height: 128px;
}

.ring {
  background: conic-gradient(#2f8c68 0deg, rgba(36,87,166,.1) 0deg);
}





.metric-card::after {
  opacity: .08;
}



.view-grid > *,
.surface-card,
.question-card,
.word-card {
  min-width: 0;
}

.surface-card,
.question-card,
.word-card {
  border-radius: 12px;
}



.surface-card h2,
.surface-card h3,
.question-prompt,
.word-title {
  font-weight: 780;
}



.segmented-control,
.auth-tabs {
  border-radius: 999px;
}

.segmented-control span,
.auth-tabs button {
  border-radius: 999px;
}

.segmented-control input:checked + span,
.auth-tabs button.active {
  background: #2457a6;
  color: #fff;
  box-shadow: none;
}



.unit-pill:hover,
.check-row:hover {
  transform: translateY(-1px);
  border-color: rgba(36,87,166,.24);
}

.unit-pill:has(input:checked),
.check-row:has(input:checked) {
  border-color: rgba(36,87,166,.42);
  background: rgba(36,87,166,.06);
}















.task-row,
.compact-word,
.reading-card,
.admin-row,
.student-candidate,
.option {
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.task-row:hover,
.compact-word:hover,
.reading-card:hover,
.admin-row:hover,
.student-candidate:hover,
.option:hover {
  transform: translateY(-1px);
  border-color: rgba(36,87,166,.22);
  box-shadow: 0 12px 28px rgba(24,39,75,.07);
}

.task-icon,
.sentence-index {
  border-radius: 10px;
  background: rgba(36,87,166,.08);
  color: #2457a6;
}



.option.correct,
.practice-review.good,
.feedback.good {
  color: #1f7655;
  background: rgba(47,140,104,.08);
  border-color: rgba(47,140,104,.2);
}

.option.wrong,
.practice-review.bad,
.feedback.bad,
.text-button.danger {
  color: #b84d3c;
  background: rgba(217,106,85,.08);
  border-color: rgba(217,106,85,.2);
}

.reading-progress,
.level-bar {
  background: rgba(36,87,166,.1);
}

.reading-progress span,
.level-bar span,
.quote-meter span {
  background: linear-gradient(90deg, #2f8c68, #2457a6);
}





.data-table td,
.data-table th {
  border-bottom-color: rgba(32,47,76,.08);
}







@keyframes consoleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  
}

@media (max-width: 1120px) {
  .app-shell {
    padding: 12px;
  }

  .sidebar {
    border-radius: 12px;
  }

  .hero-panel,
  .view-grid {
    grid-template-columns: 1fr;
  }

  .learning-visual {
    min-height: 300px;
  }
}

@media (max-width: 760px) {
  .auth-story,
  .auth-card,
  .hero-panel,
  .progress-panel,
  .surface-card,
  .question-card,
  .word-card {
    border-radius: 12px;
  }

  .topbar {
    grid-template-columns: auto 1fr;
  }

  .topbar-title .eyebrow {
    display: none;
  }

  .topbar h1 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
  }

  .top-actions > :not(.search-box) {
    display: none !important;
  }

  .search-box {
    grid-column: 1 / -1;
    width: 100%;
  }

  .mobile-menu-tools {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(156, 184, 220, .34);
    border-radius: 14px;
    background: rgba(247, 250, 252, .86);
  }

  .mobile-menu-tools .role-chip,
  .mobile-menu-tools .pill-button {
    width: 100%;
    justify-content: center;
  }

  .hero-panel {
    padding: 20px;
  }

  .hero-copy h2 {
    font-size: 42px;
  }

  .console-window {
    width: 100%;
  }

  .console-body {
    grid-template-columns: 1fr;
  }

  .console-rail {
    display: none;
  }

  .score-preview {
    grid-template-columns: 1fr;
  }

  .daily-plan-summary,
  .daily-plan-overview,
  .daily-target-controls {
    grid-template-columns: 1fr;
  }

  .reading-practice-summary,
  .reading-practice-result {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .daily-plan-actions {
    justify-content: flex-start;
  }

  .daily-plan-actions .secondary-action {
    min-height: 40px;
    padding: 0 14px;
  }

  .daily-target-grid {
    grid-template-columns: 1fr;
  }

  .vocab-picker-head,
  .vocab-word-picker {
    grid-template-columns: 1fr;
  }

  .vocab-word-option {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .vocab-word-meaning {
    grid-column: 2;
  }

  .daily-target-head {
    display: grid;
  }

  .daily-task-actions {
    justify-content: flex-start;
  }

  .daily-task-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .daily-task-row .daily-task-actions {
    grid-column: 2;
  }

  .daily-mini-progress {
    min-width: 0;
  }

  .writing-prompt-head {
    display: grid;
  }

  .writing-prompt-controls {
    grid-template-columns: 1fr;
  }

  .score-preview strong {
    grid-column: auto;
    grid-row: auto;
  }

  .metric-grid,
  .reading-overview,
  .home-level-options,
  .score-grid,
  .ai-score-grid,
  .writing-score-grid.native-grid,
  .essay-version-grid,
  .native-tip,
  .unit-pills {
    grid-template-columns: 1fr;
  }

  .speaking-list-head,
  .ai-challenge-head,
  .ai-actions {
    display: grid;
    align-items: stretch;
  }

  .ai-challenge-card {
    border-radius: 12px;
    padding: 14px;
  }

  .ai-challenge-tools {
    justify-content: flex-start;
  }

  .ai-challenge-head h3 {
    font-size: 26px;
  }

  .sentence-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sentence-actions {
    grid-column: 1 / -1;
  }

  .reading-history-metrics,
  .reading-history-card {
    grid-template-columns: 1fr;
  }

  .reading-history-score-row {
    justify-content: flex-start;
  }

  .teacher-reading-history {
    min-width: 0;
  }
}

@media (max-width: 460px) {
  .top-actions .primary-action,
  .top-actions .secondary-action,
  .top-actions .pill-button,
  .top-actions .wechat-action {
    width: 100%;
  }

  .top-actions {
    grid-template-columns: 1fr;
  }
}

/* W3.4 记录流类型筛选 chips + 未出分折叠（成长页口语流、教师端学生详情共用） */
.growth-stream-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 10px;
}

.growth-filter-chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.growth-filter-chip:hover { border-color: var(--accent-edge); color: var(--accent-ink); }

.growth-filter-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.growth-unscored-toggle {
  display: inline-block;
  margin-top: 8px;
  border: none;
  background: transparent;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 0;
}

.growth-unscored-toggle:hover { text-decoration: underline; }

.tl-unscored { color: var(--muted); font-size: 11px; white-space: nowrap; }

.growth-timeline--unscored .tl-row { opacity: .78; }

.teacher-activity-filters { margin: 6px 0 10px; }

/* ==== ultimate.css ==== */
/* ═══════════════════════════════════════════════════════════════════
   CAMVOCAB · PREMIUM LIGHT THEME  (v4.0)
   Direction: Apple-grade calm + Duolingo warmth, for Cambridge English.
   This file loads LAST and reskins every view the app renders.
   Design goals:
     · Kill the "堆砌感": more whitespace, fewer borders, calmer color.
     · One confident accent (blue) + neutral surfaces + semantic green/red.
     · Strong type hierarchy (SF Pro / 苹方), generous radii, soft depth.
     · Rich-but-tasteful motion (reveal, hover lift, press, count-up).
   ═══════════════════════════════════════════════════════════════════ */

/* smooth cross-fade when toggling */
body, .sidebar, .topbar, .surface-card, .metric-card, .word-card, .question-card,
.mobile-tabbar, .tab-sheet, .data-table, .option, input, select, textarea {
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease) !important;
}

/* ═══ GLOBAL ═══ */
html { scroll-behavior: smooth; }

body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.011em;
}

/* faint atmospheric wash (kept extremely subtle) */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    var(--wash) !important;
  mask-image: none !important;
}

.ambient { display: none !important; }

* { box-sizing: border-box; }

h1, h2, h3, h4 { font-family: var(--font-display) !important; letter-spacing: -0.018em; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* ═══════════════════════════════════════════════════════════════════
   AUTH SCREEN — cinematic, airy split
   ═══════════════════════════════════════════════════════════════════ */
.auth-screen {
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(91, 91, 214, 0.12), transparent 60%),
    radial-gradient(55% 50% at 92% 92%, rgba(124, 92, 214, 0.08), transparent 60%),
    var(--bg) !important;
  padding: 28px !important;
}

.auth-layout {
  width: min(1140px, 100%) !important;
  gap: 0 !important;
  grid-template-columns: 1.06fr 0.94fr !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--hairline-soft) !important;
}

.auth-story {
  position: relative !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  padding: 56px !important;
  min-height: 600px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.auth-story::before {
  content: '' !important;
  position: absolute !important;
  top: -18% !important; left: -14% !important;
  width: 560px !important; height: 560px !important;
  filter: blur(40px) !important;
  border-radius: 50% !important; pointer-events: none !important;
}
.auth-story::after {
  content: '' !important;
  position: absolute !important;
  bottom: -20% !important; right: -12% !important;
  width: 480px !important; height: 480px !important;
  filter: blur(46px) !important;
  border-radius: 50% !important; pointer-events: none !important;
}
.auth-story .brand,
.auth-story h1,
.auth-story p { position: relative; z-index: 2; }
.auth-story .brand { border-bottom: none !important; padding-bottom: 0 !important; }
.auth-story .brand-mark {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  box-shadow: 0 10px 30px rgba(91, 91, 214, 0.5) !important;
  color: #fff !important;
}
.auth-story .brand strong { color: #fff !important; }
.auth-story .brand span { color: rgba(255, 255, 255, 0.6) !important; }
.auth-story h1 {
  font-size: clamp(46px, 5.6vw, 80px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 20px !important;
  max-width: 600px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #ffffff 30%, rgba(255,255,255,0.72) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.auth-story p {
  color: rgba(255, 255, 255, 0.66) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  max-width: 440px !important;
  margin: 0 !important;
}

.auth-card-container {
  background: var(--surface) !important;
  border-left: 1px solid var(--hairline-soft) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.auth-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: 420px !important;
  padding: 48px 44px !important;
}
.auth-head h2 {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.025em !important;
}
.auth-head .eyebrow { color: var(--muted-2) !important; }

.auth-tabs {
  background: var(--surface-2) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: 14px !important;
  padding: 4px !important;
}
.auth-tabs button {
  background: transparent !important;
  color: var(--muted) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: color var(--t-fast) var(--ease) !important;
}
.auth-tabs button.active {
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}

.auth-form { gap: 15px !important; }
.auth-form label { color: var(--ink-2) !important; font-size: 13px !important; font-weight: 600 !important; }
.auth-form input,
.auth-form select {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 13px !important;
  color: var(--ink) !important;
  min-height: 50px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important;
}
.auth-form input:focus,
.auth-form select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
  outline: none !important;
}
.auth-form input::placeholder { color: var(--muted-2) !important; }
.auth-row-options { color: var(--muted) !important; }
.auth-row-options label { color: var(--muted) !important; font-weight: 500 !important; }
.auth-row-options input[type="checkbox"] { accent-color: var(--accent) !important; }
.auth-row-options span { color: var(--accent) !important; font-weight: 600 !important; }

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS — shared
   ═══════════════════════════════════════════════════════════════════ */
.primary-action,
.secondary-action,
.pill-button,
.icon-button,
.wechat-action,
.text-button {
  border-radius: var(--r-pill) !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease) !important;
}
.primary-action {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--shadow-accent) !important;
}
/* 5.10.3: nothing lifts on hover (on phones the raised state stuck after a tap); a press is one small scale. */
.primary-action:hover {
  background: var(--accent-press) !important;
  box-shadow: 0 10px 26px var(--accent-glow) !important;
}
.primary-action:active { transform: scale(.98) !important; }

.secondary-action,
.pill-button,
.icon-button {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--shadow-xs) !important;
}
.secondary-action:hover,
.pill-button:hover,
.icon-button:hover {
  background: var(--surface) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent-edge) !important;
  box-shadow: var(--shadow-sm) !important;
}
.secondary-action:active,
.pill-button:active,
.icon-button:active { transform: scale(.98) !important; }

/* Auth wide buttons */
.auth-form .primary-action {
  border-radius: 13px !important;
  padding: 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.auth-form .wechat-action,
.wechat-action {
  background: var(--green-soft) !important;
  color: var(--green-ink) !important;
  border: 1px solid rgba(26, 156, 82, 0.2) !important;
  border-radius: 13px !important;
  font-weight: 600 !important;
}
.wechat-disabled,
.wechat-action:disabled,
#settingsBindWechat:disabled,
#bindExistingWechatBtn:disabled,
#bindCurrentWechatBtn:disabled {
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.2) !important;
  transform: none !important;
  box-shadow: none !important;
}
.wechat-disabled:hover,
.wechat-action:disabled:hover,
#settingsBindWechat:disabled:hover,
#bindExistingWechatBtn:disabled:hover,
#bindCurrentWechatBtn:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}
.auth-switch-note { color: var(--muted) !important; }
.auth-switch-note button { color: var(--accent) !important; font-weight: 700 !important; background: none !important; border: none !important; box-shadow: none !important; }
.auth-note { color: var(--muted-2) !important; }

.agreement-check,
.auth-form .agreement-check {
  border-color: var(--hairline-soft) !important;
  background: var(--surface-2) !important;
  border-radius: 13px !important;
}
.agreement-check span { color: var(--muted) !important; }
.agreement-check input { accent-color: var(--accent) !important; }

.status-pill,
.role-chip {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent-edge) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: var(--r-pill) !important;
}
.status-pill.good { background: var(--green-soft) !important; color: var(--green-ink) !important; border-color: rgba(26,156,82,.2) !important; }
.status-pill.bad { background: var(--red-soft) !important; color: var(--red-ink) !important; border-color: rgba(224,56,43,.2) !important; }

.mobile-confirm {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-lg) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow) !important;
}
.mobile-confirm p { color: var(--muted) !important; }

.wechat-bind-panel,
.wechat-qr-panel {
  border-color: rgba(26, 156, 82, 0.18) !important;
  background: var(--green-soft) !important;
  border-radius: var(--r-sm) !important;
}
.wechat-bind-panel h3, .wechat-qr-panel h3 { color: var(--ink) !important; }
.wechat-bind-panel p, .wechat-qr-panel p { color: var(--muted) !important; }
.wechat-bind-panel label { color: var(--ink-2) !important; }
.wechat-bind-panel input { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 12px !important; }
.qr-box { background: var(--surface) !important; border-color: var(--hairline) !important; border-radius: 18px !important; }

.feedback {
  background: var(--surface-2) !important;
  border: 1px solid var(--hairline-soft) !important;
  color: var(--ink-2) !important;
  border-radius: var(--r-sm) !important;
}
.feedback.good { background: var(--green-soft) !important; color: var(--green-ink) !important; border-color: rgba(26,156,82,.2) !important; }
.feedback.bad { background: var(--red-soft) !important; color: var(--red-ink) !important; border-color: rgba(224,56,43,.2) !important; }

/* ═══════════════════════════════════════════════════════════════════
   APP SHELL · SIDEBAR · NAV
   ═══════════════════════════════════════════════════════════════════ */
.app-shell {
  background: transparent !important;
  width: min(1500px, 100%) !important;
  max-width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
  grid-template-columns: 268px minmax(0, 1fr) !important;
}
/* overflow safety: let the content column shrink instead of pushing wide */
.main { min-width: 0 !important; }
.view, .view-grid, .hero-grid, .metric-grid { min-width: 0 !important; }

.sidebar {
  background: var(--glass-side) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border: none !important;
  border-right: 1px solid var(--hairline-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100vh !important;
  top: 0 !important;
  width: 268px !important;
  padding: 26px 18px !important;
  gap: 18px !important;
}
.sidebar .brand { padding: 0 10px 18px !important; border-bottom: 1px solid var(--hairline-soft) !important; }
.sidebar .brand-mark {
  width: 42px !important; height: 42px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  box-shadow: 0 8px 20px rgba(91, 91, 214, 0.3) !important;
  font-size: 15px !important;
  color: #fff !important;
}
.sidebar .brand strong { color: var(--ink) !important; font-size: 16px !important; font-weight: 700 !important; }
.sidebar .brand span { color: var(--muted-2) !important; font-size: 11px !important; }

.nav { gap: 3px !important; border-top: none !important; padding-top: 0 !important; }
.nav-item {
  border: none !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  padding: 11px 14px !important;
  min-height: 48px !important;
  margin: 0 !important;
  font-weight: 500 !important;
  position: relative !important;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease) !important;
}
.nav-item:hover { background: var(--surface-2) !important; color: var(--ink) !important; transform: none !important; }
.nav-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
  padding-left: 14px !important;
  border-left: none !important;
}
.nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important; top: 50% !important;
  width: 4px !important; height: 20px !important;
  transform: translateY(-50%) !important;
  border-radius: 99px !important;
  background: var(--accent) !important;
}
.nav-item span { font-weight: 600 !important; font-size: 14px !important; }
.nav-item small { color: var(--muted-2) !important; font-size: 11px !important; opacity: 1 !important; }
.nav-item.active small { color: var(--accent-ink) !important; opacity: 0.66 !important; }

.mini-card,
.quote-card {
  background: var(--surface-2) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
.quote-card .eyebrow { color: var(--accent) !important; }
.quote-card strong { color: var(--ink-2) !important; font-weight: 600 !important; font-size: 15px !important; line-height: 1.5 !important; }
.quote-meter { background: var(--accent-soft) !important; }
.quote-meter span { background: var(--accent) !important; }

/* ═══════════════════════════════════════════════════════════════════
   MAIN · TOPBAR · SEARCH
   ═══════════════════════════════════════════════════════════════════ */
.main {
  background: transparent !important;
  padding: 0 36px 120px !important;
  gap: 28px !important;
}

.topbar {
  background: var(--glass-top) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border: none !important;
  border-bottom: 1px solid var(--hairline-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 0 20px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 25 !important;
}
.topbar h1 {
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}
.topbar .eyebrow { color: var(--muted-2) !important; }

.search-box {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: var(--shadow-xs) !important;
  min-height: 46px !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important;
}
.search-box:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-soft) !important; }
.search-box input { color: var(--ink) !important; background: transparent !important; }
.search-box span { color: var(--muted-2) !important; }

.pill-button {
  border-radius: 11px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
}
.role-chip { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }

.global-search-panel {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-lg) !important;
}
.search-panel-head { color: var(--muted) !important; }
.search-panel-head strong { color: var(--ink) !important; }
.search-result {
  background: var(--surface-2) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: var(--ink) !important;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease) !important;
}
.search-result:hover { background: var(--accent-soft-2) !important; transform: translateX(3px) !important; box-shadow: none !important; border-color: transparent !important; }
.search-result span { color: var(--accent) !important; }
.search-result small { color: var(--muted) !important; }
.search-result em { color: var(--ink) !important; }

/* ═══════════════════════════════════════════════════════════════════
   UNIVERSAL · eyebrow + surface cards
   ═══════════════════════════════════════════════════════════════════ */
.eyebrow {
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

.surface-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important;
  padding: 26px !important;
}
.surface-card h2, .surface-card h3 { color: var(--ink) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
/* remove the old gradient underline gimmick */
.surface-card h2::before, .surface-card h3::before { display: none !important; }
.surface-card .muted, .muted { color: var(--muted) !important; }

/* ═══════════════════════════════════════════════════════════════════
   HERO + METRICS — the de-cluttered student dashboard
   ═══════════════════════════════════════════════════════════════════ */
.hero-grid {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

.hero-panel {
  border: none !important;
  border-radius: var(--r-lg) !important;
  min-height: 0 !important;
  padding: 28px 34px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 32px !important;
  color: #fff !important;
}

/* merged today-progress block (ring lives inside the hero now) */
.hero-progress {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  border-radius: var(--r) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  min-width: 0 !important;
}
.hero-progress .ring {
  width: 96px !important; height: 96px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}
.hero-progress .ring span {
  width: 70px !important; height: 70px !important;
  background: #0c1834 !important;
  color: #fff !important;
  font-size: 21px !important;
  font-family: var(--font-display) !important;
}
.hero-progress-meta { text-align: left !important; display: grid !important; gap: 3px !important; }
.hero-progress-label {
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.09em !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
.hero-progress-meta strong { font-size: 17px !important; font-weight: 700 !important; color: #fff !important; }
.hero-progress-meta small { font-size: 12.5px !important; color: rgba(255, 255, 255, 0.62) !important; }
.hero-progress-meta small b { color: #7fd0a0 !important; font-weight: 800 !important; }
.hero-progress.assignment-progress-widget {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: min(540px, 46vw) !important;
  max-width: 100% !important;
  padding: 14px !important;
}
.assignment-progress-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}
.assignment-progress-head strong {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: right !important;
}
.assignment-progress-scroll {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 1px 2px 4px !important;
  scrollbar-width: thin !important;
}
.assignment-progress-card {
  flex: 0 0 clamp(136px, 13vw, 162px) !important;
  scroll-snap-align: start !important;
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 180px !important;
  padding: 12px !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
.assignment-progress-card.empty {
  background: rgba(255,255,255,0.045) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.assignment-progress-card-top {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.assignment-progress-card-top span {
  color: rgba(255,255,255,0.62) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
.assignment-progress-card-top strong {
  color: #fff !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
.assignment-progress-card.empty .assignment-progress-card-top strong {
  font-size: 18px !important;
  color: rgba(255,255,255,0.72) !important;
}
.assignment-progress-card small {
  color: rgba(255,255,255,0.56) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
.assignment-progress-bar {
  height: 6px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.14) !important;
}
.assignment-progress-bar i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #3ddc84, #7fd0ff) !important;
}
.assignment-progress-card.reading .assignment-progress-bar i { background: linear-gradient(90deg, #7fb6ff, #a78bfa) !important; }
.assignment-progress-card.writing .assignment-progress-bar i { background: linear-gradient(90deg, #ffd166, #ff8a7a) !important; }
/* Decorative glows must stay OUT of the grid flow (premium.css forces
   ::before/::after to display:block; keep them absolutely positioned so
   they don't become grid items and shove the real columns around). */
.hero-panel::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important; z-index: 0 !important;
}
.hero-panel::after { pointer-events: none !important; z-index: 0 !important; }
.hero-copy { position: relative !important; z-index: 2 !important; }
.hero-copy .eyebrow { color: #7fb6ff !important; }
.hero-copy h2 {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: clamp(26px, 2.3vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  margin: 6px 0 6px !important;
}
.hero-copy p { color: rgba(255, 255, 255, 0.66) !important; font-size: 14.5px !important; line-height: 1.6 !important; margin-top: 4px !important; max-width: 560px !important; }

.hero-stats-row { display: flex !important; gap: 14px !important; margin: 26px 0 !important; flex-wrap: wrap !important; }
.hero-stat {
  display: flex !important; flex-direction: column !important; gap: 5px !important;
  padding: 14px 20px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  min-width: 104px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important;
}
.hero-stat:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255,255,255,0.22) !important; }
.hero-stat-label { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; color: rgba(255, 255, 255, 0.55) !important; }
.hero-stat strong { font-size: 26px !important; font-weight: 700 !important; color: #fff !important; line-height: 1 !important; letter-spacing: -0.02em !important; }
.hero-stat-warn { color: #ff8a7a !important; }

.hero-actions { margin-top: 16px !important; }
.hero-actions .primary-action { background: #fff !important; color: #0b1430 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important; }
.hero-actions .primary-action:hover { background: #fff !important; color: #0b1430 !important; box-shadow: 0 12px 30px rgba(0,0,0,0.3) !important; }
.hero-actions .secondary-action {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
.hero-actions .secondary-action:hover { background: rgba(255,255,255,0.18) !important; color: #fff !important; border-color: rgba(255,255,255,0.3) !important; }

/* legacy hero illustration — keep hidden */
.learning-visual, .orbit, .letter-tile, .student-avatar, .console-window { display: none !important; }

/* Progress ring panel */
.progress-panel {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 28px !important;
}
.ring {
  background: var(--surface-3) !important;
  background: conic-gradient(var(--accent) 0deg, var(--surface-3) 0deg) !important;
  border-radius: 50% !important;
}
.ring span { background: var(--surface) !important; color: var(--ink) !important; font-weight: 700 !important; }
.progress-panel strong { color: var(--ink) !important; font-weight: 700 !important; }
.progress-panel p { color: var(--muted) !important; }

/* Metric grid — calmed: neutral surface, accent only on the number */
.metric-grid { gap: 14px !important; }
/* The home hero + metric strip belong to the Today view only — keep them
   hidden everywhere else, at every breakpoint (overrides the mobile
   display:grid below). Scoped to the DIRECT children of .main so the
   in-view metric grids (teacher KPIs, training/tricky/admin stats, which
   live nested inside #view-* panels) are never affected. */
body:not([data-view="today"]) .main > .hero-grid,
body:not([data-view="today"]) .main > .metric-grid { display: none !important; }
/* Teacher dashboard has 6 metrics — keep them in two even rows of 3 on desktop
   (avoids the orphaned card + big gap left by a 5-col grid). */
.metric-grid.dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.metric-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-left: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-xs) !important;
  min-height: 116px !important;
  padding: 20px 22px !important;
}
.metric-card:hover { border-color: var(--hairline-soft) !important; }
.metric-card::after { display: none !important; }   /* remove the big color blob */
.metric-card span { color: var(--muted) !important; font-weight: 600 !important; font-size: 13px !important; }
.metric-card strong { color: var(--ink) !important; font-size: 34px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; font-family: var(--font-display) !important; }
.metric-card small { color: var(--muted-2) !important; }
/* color variants reduced to a small top dot of accent on the value only */
.metric-card.blue strong { color: var(--accent) !important; }
.metric-card.green strong { color: var(--green) !important; }
.metric-card.peach strong { color: var(--red) !important; }
.metric-card.purple strong { color: var(--purple) !important; }
.metric-card.blue, .metric-card.green, .metric-card.peach, .metric-card.purple {
  background: var(--surface) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   VIEW CONTENT — generic cards, forms, controls
   ═══════════════════════════════════════════════════════════════════ */
.view-grid { gap: 22px !important; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) !important; }

.task-list { gap: 10px !important; }
.task-row {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-sm) !important;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important;
}
.task-row:hover { box-shadow: var(--shadow-sm) !important; border-color: var(--hairline) !important; }
.task-row strong { color: var(--ink) !important; }
.task-row span { color: var(--muted) !important; }
.task-icon { background: var(--accent-soft) !important; color: var(--accent) !important; border-radius: 13px !important; }

/* selects + inputs */
select,
input[type="number"],
input[type="search"] {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
}
select:focus,
input[type="number"]:focus,
input[type="search"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
  outline: none !important;
}
.field { color: var(--muted) !important; }

/* segmented + tabs */
.segmented-control, .auth-tabs { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; }
.segmented-control span { color: var(--muted) !important; }
.segmented-control input:checked + span {
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}

.unit-pill {
  background: var(--surface) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease) !important;
}
.unit-pill:hover { border-color: var(--accent-edge) !important; }
.unit-pill:has(input:checked) { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.unit-pill input { accent-color: var(--accent) !important; }
.unit-pill small { color: var(--muted-2) !important; }

.home-level-picker { border-color: var(--hairline-soft) !important; background: var(--surface-2) !important; border-radius: var(--r-sm) !important; }
.home-level-picker span { color: var(--accent) !important; }
.home-level-picker strong { color: var(--ink) !important; }
.home-level-picker p { color: var(--muted) !important; }
.home-level-option {
  border-color: var(--hairline) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-radius: 14px !important;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease) !important;
}
.home-level-option:hover { border-color: var(--accent-edge) !important; }
.home-level-option.active { border-color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
.home-level-option strong { color: var(--ink) !important; }
.home-level-option small { color: var(--muted) !important; }
.level-lock { background: var(--accent-soft-2) !important; border-color: var(--accent-edge) !important; border-radius: 13px !important; }
.level-lock span, .level-lock small { color: var(--muted) !important; }
.level-lock strong { color: var(--accent-ink) !important; }

/* Today-plan header: title + compact level chip (level lives in Settings now) */
.today-plan-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 4px;
}
.today-plan-head .eyebrow { margin: 0 !important; }
.today-plan-head h2 { margin: 4px 0 0 !important; }
.home-level-chip {
  display: inline-grid; grid-template-columns: auto auto; align-items: center;
  column-gap: 12px; row-gap: 0;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer; text-align: left;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.home-level-chip:hover { border-color: var(--accent-edge); box-shadow: var(--shadow-sm); }
.home-level-chip .hlc-k { grid-column: 1; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.home-level-chip .hlc-v { grid-column: 1; font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--accent-ink); }
.home-level-chip .hlc-sub { grid-column: 1; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.home-level-chip .hlc-go { grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.home-level-chip .hlc-go .ic { width: 18px; height: 18px; }

/* Compact level grid inside the settings drawer */
.settings-level-options { margin-top: 12px !important; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; gap: 8px !important; }
.settings-level-options .home-level-option { min-height: 76px !important; padding: 10px 12px !important; border-radius: 13px !important; }
.settings-level-options .home-level-option strong { font-size: 22px !important; }
.settings-level-options .home-level-option small { font-size: 10.5px !important; }

.check-row { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 14px !important; }
.check-row input { accent-color: var(--accent) !important; }
.check-row span { color: var(--ink) !important; }
.check-row small { color: var(--muted) !important; }

.text-button { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink-2) !important; min-height: 36px !important; }
.text-button.danger { color: var(--red-ink) !important; border-color: rgba(224,56,43,.3) !important; background: var(--red-soft) !important; }
.divider { background: var(--hairline-soft) !important; }

/* ═══════════════════════════════════════════════════════════════════
   STUDY · WORD CARD · QUIZ
   ═══════════════════════════════════════════════════════════════════ */
.word-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  min-height: 460px !important;
}
.word-title { color: var(--ink) !important; letter-spacing: -0.03em !important; font-weight: 800 !important; font-family: var(--font-display) !important; }
.word-meaning { color: var(--ink-2) !important; }
.word-meaning small { color: var(--muted) !important; }
.word-example { color: var(--muted) !important; }
.badge { background: var(--accent-soft) !important; color: var(--accent-ink) !important; font-size: 11px !important; border-radius: var(--r-pill) !important; }

.tool-cluster { background: var(--surface-2) !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.tool-cluster span { color: var(--accent) !important; }
.tool-cluster strong { color: var(--ink) !important; }
.audio-feedback { color: var(--muted) !important; }
.audio-feedback.good { color: var(--green-ink) !important; }

/* "Try a sentence" / "Use it in a sentence" — AI 造句 CTA.
   Was an orphaned left-aligned button; make it a clean separated CTA. */
.inline-ai-coach {
  margin-top: 6px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--hairline-soft) !important;
}
.inline-ai-coach > .secondary-action {
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-edge) !important;
  color: var(--accent-ink) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.inline-ai-coach > .secondary-action::before {
  content: "" !important;
  width: 18px !important; height: 18px !important; flex-shrink: 0 !important;
  background: currentColor !important;
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l1.9 6.5 6.5 1.9-6.5 1.9L12 18.4l-1.9-6.5L3.6 10l6.5-1.9z'/%3E%3Cpath d='M19 14l.9 2.6 2.6.9-2.6.9L19 21l-.9-2.6L15.5 17.5l2.6-.9z'/%3E%3C/svg%3E") !important;
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l1.9 6.5 6.5 1.9-6.5 1.9L12 18.4l-1.9-6.5L3.6 10l6.5-1.9z'/%3E%3Cpath d='M19 14l.9 2.6 2.6.9-2.6.9L19 21l-.9-2.6L15.5 17.5l2.6-.9z'/%3E%3C/svg%3E") !important;
}
.inline-ai-coach > .secondary-action:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: var(--shadow-accent) !important;
}

.compact-word { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--r-sm) !important; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important; }
.compact-word:hover { box-shadow: var(--shadow-sm) !important; }
.compact-word strong { color: var(--ink) !important; }
.compact-word p { color: var(--muted) !important; }
.compact-word small { color: var(--muted-2) !important; }

.question-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.question-prompt { color: var(--ink) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; }
.option {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 16px !important;
  color: var(--ink) !important;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important;
}
.option:hover { border-color: var(--accent) !important; background: var(--accent-soft-2) !important; transform: translateX(3px) !important; box-shadow: var(--shadow-xs) !important; }
.option.correct { background: var(--green-soft) !important; border-color: var(--green) !important; color: var(--green-ink) !important; }
.option.wrong { background: var(--red-soft) !important; border-color: var(--red) !important; color: var(--red-ink) !important; }

.practice-review { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r) !important; }
.practice-review.good { background: var(--green-soft) !important; border-color: rgba(26,156,82,.2) !important; }
.practice-review.bad { background: var(--red-soft) !important; border-color: rgba(224,56,43,.2) !important; }
.practice-review span { color: var(--accent) !important; }
.practice-review strong { color: var(--ink) !important; }
.review-detail div { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: 13px !important; }
.review-detail dt { color: var(--muted-2) !important; }
.review-detail dd { color: var(--ink-2) !important; }

/* Training mode cards */
.training-card-icon {
  width: 46px !important; height: 46px !important;
  display: grid !important; place-items: center !important;
  border-radius: 14px !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.training-card-icon svg { width: 22px !important; height: 22px !important; }
.training-card-icon.tci-practice { background: var(--accent-soft) !important; color: var(--accent) !important; }
.training-card-icon.tci-quiz { background: var(--green-soft) !important; color: var(--green) !important; }
.training-card-icon.tci-wrong { background: var(--amber-soft) !important; color: var(--amber-ink, var(--amber)) !important; }

/* Training options as expandable panels:
   · desktop (>1180px) = always open, non-interactive (looks like cards)
   · mobile (<=1180px) = collapsed to a compact icon+title row, tap to expand */
.training-action-card.tac { display: grid !important; align-content: start !important; }
.tac > summary {
  list-style: none;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
}
.tac > summary::-webkit-details-marker { display: none; }
.tac-head { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tac-head span { color: var(--accent) !important; font-size: 12px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .05em; }
.tac-head strong { color: var(--ink) !important; font-size: 17px !important; font-weight: 700 !important; }
.tac-chevron { flex-shrink: 0; color: var(--muted-2); transition: transform 0.28s var(--ease); }
.tac[open] .tac-chevron { transform: rotate(180deg); }
.tac-body { margin-top: 14px; gap: 12px; }
.tac[open] > .tac-body { display: grid; }
/* Keep all three cards identical at EVERY width: always expanded,
   button always visible, no collapse chevron. (Quick 3-way access on
   mobile still lives in the bottom-tab popup.) */
.tac > .tac-body { display: grid !important; }
.tac > summary { cursor: default !important; }
.tac-chevron { display: none !important; }
.tac-body p { margin: 0; color: var(--muted) !important; line-height: 1.55; }
.tac-body .primary-action, .tac-body .secondary-action { width: 100%; }

/* Per-type button color — unified format, distinct hue matching each icon.
   Practice = accent · Quiz = green · Review = amber. */
.tac-body button[data-jump="practice"] {
  background: var(--accent) !important; color: #fff !important; border: none !important;
  box-shadow: 0 6px 16px var(--accent-glow) !important;
}
.tac-body button[data-jump="practice"]:hover { background: var(--accent-press) !important; }
.tac-body button[data-jump="quiz"] {
  background: var(--green) !important; color: #fff !important; border: none !important;
  box-shadow: 0 6px 16px rgba(26,156,82,0.30) !important;
}
.tac-body button[data-jump="quiz"]:hover { background: var(--green-ink) !important; color: #fff !important; }
.tac-body button[data-jump="wrong"] {
  background: var(--amber) !important; color: #fff !important; border: none !important;
  box-shadow: 0 6px 16px rgba(217,138,0,0.30) !important;
}
.tac-body button[data-jump="wrong"]:hover { background: #bf7a00 !important; color: #fff !important; }
.tac-body button[data-jump]:hover { transform: none !important; }
.tac-body button[data-jump]:active { transform: translateY(0) scale(0.985) !important; }

/* Consistent layout at EVERY width: the three cards always stack in one
   column, so each colored button gets the same full-card-width treatment
   (no jump between 3-up on desktop and stacked on mobile). */
.training-mode-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
.tac-body button[data-jump] { min-height: 50px !important; }

@media (max-width: 1180px) {
  .training-action-card.tac { min-height: 0 !important; }
}

.training-action-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important;
}
.training-action-card:hover { box-shadow: var(--shadow) !important; border-color: var(--accent-edge) !important; }
.training-action-card span { color: var(--accent) !important; }
.training-action-card strong { color: var(--ink) !important; }
.training-action-card p { color: var(--muted) !important; }

/* ═══════════════════════════════════════════════════════════════════
   READING
   ═══════════════════════════════════════════════════════════════════ */
.reading-mode-tabs button { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 14px !important; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important; }
.reading-mode-tabs button:hover { transform: none !important; }
.reading-mode-tabs button.active { border-color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: none !important; }
.reading-mode-tabs strong { color: var(--ink) !important; }
.reading-mode-tabs span { color: var(--muted) !important; }

.reading-task-card { background: var(--surface) !important; border-color: var(--hairline-soft) !important; color: var(--ink) !important; border-radius: 14px !important; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important; }
.reading-task-card:hover { transform: translateX(3px) !important; box-shadow: var(--shadow-xs) !important; }
.reading-task-card.active { border-color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: none !important; }
.reading-task-card strong { color: var(--ink) !important; }
.reading-task-card small, .reading-task-card em { color: var(--muted) !important; }
.reading-task-status { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.reading-task-status.done { background: var(--green-soft) !important; color: var(--green-ink) !important; }
.reading-task-status.last { background: var(--amber-soft) !important; color: var(--amber-ink, var(--amber)) !important; }
.reading-overview article { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.reading-overview strong { color: var(--ink) !important; }
.reading-overview span { color: var(--muted) !important; }
.reading-card { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r) !important; }
.reading-card-head h3 { color: var(--ink) !important; }
.reading-card-head small { color: var(--muted) !important; }
.reading-progress { background: var(--surface-3) !important; }
.reading-progress span { background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important; }
.sentence-row { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: 14px !important; }
.sentence-index { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border-radius: 12px !important; }
.sentence-index.done { background: var(--green-soft) !important; color: var(--green-ink) !important; }
.sentence-row p { color: var(--ink) !important; }
.reading-paragraph-copy small { color: var(--muted) !important; }
.reading-audio-status { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.reading-ai-guidance small { color: var(--muted) !important; }
.token-list span { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.token-list.difficult span { background: var(--red-soft) !important; color: var(--red-ink) !important; }

/* ═══════════════════════════════════════════════════════════════════
   SPEAKING + AI
   ═══════════════════════════════════════════════════════════════════ */
.speaking-list-head span { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.ai-challenge-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
}
.ai-challenge-head h3 { color: var(--ink) !important; }
.ai-challenge-head p { color: var(--muted) !important; }
.ai-challenge-tools span { color: var(--accent) !important; }
.icon-action { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--accent) !important; border-radius: 12px !important; }
.ai-task { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: 14px !important; }
.ai-task span { color: var(--accent) !important; }
.ai-task strong { color: var(--ink) !important; }
.ai-task p { color: var(--muted) !important; }
.ai-answer-field span { color: var(--accent) !important; }
.ai-answer-field textarea { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 14px !important; box-shadow: none !important; }
.ai-answer-field textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-soft) !important; }
.ai-result { background: var(--green-soft) !important; border-color: rgba(26,156,82,.2) !important; border-radius: var(--r-sm) !important; }
.ai-result.needs-review { background: var(--red-soft) !important; border-color: rgba(224,56,43,.2) !important; }
.ai-result-copy strong { color: var(--ink) !important; }
.ai-result-copy p { color: var(--muted) !important; }

/* ═══════════════════════════════════════════════════════════════════
   WRITING
   ═══════════════════════════════════════════════════════════════════ */
.upload-drop {
  border: 1.5px dashed var(--accent-edge) !important;
  background: var(--accent-soft-2) !important;
  border-radius: var(--r) !important;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease) !important;
}
.upload-drop:hover { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.upload-drop span { color: var(--accent) !important; }
.upload-drop strong { color: var(--ink) !important; }
.upload-drop small { color: var(--muted) !important; }
.writing-preview { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.empty-preview { color: var(--muted-2) !important; }
.writing-textarea-label span { color: var(--ink) !important; }
.writing-textarea-label textarea { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: var(--r-sm) !important; }
.writing-next-note { background: var(--accent-soft-2) !important; color: var(--muted) !important; border-radius: var(--r-sm) !important; }
.writing-next-note strong { color: var(--accent-ink) !important; }
.writing-review-head { background: var(--accent-soft) !important; border-color: var(--accent-edge) !important; border-radius: var(--r-sm) !important; }
.writing-review-head h3 { color: var(--ink) !important; }
.writing-review-head > strong { color: var(--accent) !important; }
.writing-review-head small { color: var(--muted) !important; }
.writing-score-grid article { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.writing-score-grid span { color: var(--muted) !important; }
.writing-score-grid strong { color: var(--ink) !important; }
.writing-score-grid small { color: var(--muted-2) !important; }
.sentence-feedback { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.sentence-feedback strong { color: var(--ink) !important; }
.sentence-feedback p { color: var(--red-ink) !important; }
.sentence-feedback small { color: var(--green-ink) !important; }
.native-tip { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.native-tip strong { color: var(--red-ink) !important; background: var(--red-soft) !important; }
.native-tip span { color: var(--green-ink) !important; background: var(--green-soft) !important; }
.native-tip p { color: var(--muted) !important; }
.assignment-select-card { background: var(--green-soft) !important; border-color: rgba(26,156,82,.18) !important; border-radius: var(--r-sm) !important; }
.assignment-select-card strong { color: var(--ink) !important; }
.assignment-select-card span { color: var(--muted) !important; }
.assignment-brief { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.assignment-brief h3 { color: var(--ink) !important; }
.assignment-brief p { color: var(--muted) !important; }
.assignment-brief > span { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border-color: var(--accent-edge) !important; }

/* ── 自动生成作文题目 · 整体重排（修复溢出/重叠，手机+电脑都稳）── */
.writing-prompt-generator {
  background: var(--surface-2) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  padding: 20px !important;
  gap: 16px !important;
}
.writing-prompt-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.writing-prompt-head > div { min-width: 0 !important; }
.writing-prompt-head strong { color: var(--ink) !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: -0.01em !important; }
.writing-prompt-head span { color: var(--muted) !important; font-weight: 500 !important; font-size: 12.5px !important; }
.writing-prompt-head small {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent-edge) !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
/* controls: topic grows, count compact, button full-width row of its own when tight */
.writing-prompt-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 104px !important;
  grid-template-areas: "topic count" "btn btn" !important;
  gap: 12px !important;
  align-items: end !important;
}
.writing-prompt-controls .mini-field:nth-of-type(1) { grid-area: topic !important; }
.writing-prompt-controls .mini-field:nth-of-type(2) { grid-area: count !important; }
.writing-prompt-controls > .secondary-action,
.writing-prompt-controls > #generateWritingPrompt {
  grid-area: btn !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  background: var(--accent) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-accent) !important;
}
.writing-prompt-controls > .secondary-action:hover,
.writing-prompt-controls > #generateWritingPrompt:hover { background: var(--accent-press) !important; color: #fff !important; transform: none !important; }
.writing-prompt-controls > .secondary-action[disabled] { opacity: 0.6 !important; box-shadow: none !important; transform: none !important; }
.writing-prompt-controls .mini-field { color: var(--muted) !important; min-width: 0 !important; gap: 6px !important; font-size: 12px !important; font-weight: 600 !important; }
.writing-prompt-controls .mini-field input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
/* suggestions: responsive cards, never overflow */
.writing-prompt-suggestions {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important;
}
.writing-prompt-suggestion {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.writing-prompt-suggestion > div { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.writing-prompt-suggestion strong { color: var(--ink) !important; font-weight: 700 !important; line-height: 1.45 !important; overflow-wrap: anywhere !important; }
.writing-prompt-suggestion p, .writing-prompt-suggestion small { color: var(--muted) !important; overflow-wrap: anywhere !important; }
.writing-prompt-suggestion > .secondary-action { width: 100% !important; margin-top: 2px !important; min-height: 42px !important; }
.mini-field { color: var(--muted) !important; }
.mini-field input, .mini-field select { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 11px !important; }
#writingPrompt, #writingAssignmentSelect { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 12px !important; }
#writingPrompt::placeholder { color: var(--muted-2) !important; }
.level-lock.writing-level-lock { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; }

/* ═══════════════════════════════════════════════════════════════════
   TEACHER + ADMIN
   ═══════════════════════════════════════════════════════════════════ */
.dashboard-hero {
  background: linear-gradient(135deg, var(--accent-soft-2), var(--surface)) !important;
  border-color: var(--hairline-soft) !important;
  border-radius: var(--r) !important;
}
.dashboard-hero .eyebrow { color: var(--accent) !important; }
.dashboard-hero h2, .section-head h3, .section-title { color: var(--ink) !important; }
.section-head span { color: var(--muted) !important; }
.section-head .eyebrow { color: var(--accent) !important; }

.teacher-class-switcher { background: var(--surface) !important; border-color: var(--hairline-soft) !important; box-shadow: var(--shadow-sm) !important; }
.teacher-class-picker span { color: var(--accent) !important; }
.teacher-class-picker select { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 12px !important; }

.teacher-tabs { background: var(--surface-2) !important; border: 1px solid var(--hairline-soft) !important; border-radius: 14px !important; }
.teacher-tabs button { background: transparent !important; color: var(--muted) !important; border-radius: 10px !important; }
.teacher-tabs button:hover { background: var(--surface) !important; color: var(--ink) !important; }
.teacher-tabs button.active { background: var(--accent) !important; color: #fff !important; box-shadow: var(--shadow-accent) !important; }

.chart-card { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--r) !important; box-shadow: var(--shadow-sm) !important; }
.bar-track { border-color: var(--hairline-soft) !important; }
.bar-track span { background: linear-gradient(180deg, var(--accent-2), var(--accent)) !important; }
.bar-item strong { color: var(--ink) !important; }
.bar-item small { color: var(--muted-2) !important; }
.distribution-track { background: var(--surface-3) !important; }
.distribution-track span { background: var(--accent) !important; }
.distribution-track.green span { background: var(--green) !important; }
.distribution-track.purple span { background: var(--purple) !important; }
.distribution-list span { color: var(--muted) !important; }
.distribution-list article > div:first-child { color: var(--ink) !important; }

.data-table-wrap { border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.data-table { background: var(--surface) !important; }
.data-table th { background: var(--surface-2) !important; color: var(--muted) !important; border-color: var(--hairline-soft) !important; font-weight: 600 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
.data-table td { color: var(--ink) !important; border-color: var(--hairline-soft) !important; }
.data-table tr:nth-child(even) td { background: var(--stripe) !important; }
.data-table tbody tr { transition: background var(--t-fast) var(--ease) !important; }
.data-table tr:hover td { background: var(--accent-soft-2) !important; }

.admin-row { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important; }
.admin-row:hover { box-shadow: var(--shadow-sm) !important; border-color: var(--accent-edge) !important; }
.admin-row strong { color: var(--ink) !important; }
.admin-row p, .admin-row small { color: var(--muted) !important; }
.student-candidate { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: 14px !important; }
.student-candidate strong { color: var(--ink) !important; }
.student-candidate p { color: var(--muted) !important; }
.mini-form label { color: var(--muted) !important; }
.mini-form input, .mini-form select, .mini-form textarea, .assignment-form textarea { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; border-radius: 12px !important; }
.class-qr img { border-color: var(--hairline) !important; background: #fff !important; }
.submission-card, .teacher-submission-card { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: 14px !important; color: var(--ink) !important; }
.submission-card:hover { border-color: var(--accent-edge) !important; box-shadow: var(--shadow-sm) !important; }
.submission-card span { color: var(--accent) !important; }
.submission-card small { color: var(--muted) !important; }
.submission-meta div { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: 12px !important; }
.submission-meta dt { color: var(--muted-2) !important; }
.submission-meta dd { color: var(--ink-2) !important; }
.submission-image { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; }
.student-detail-card { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.student-detail-grid h4 { color: var(--ink) !important; }
.student-activity-list article { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: 12px !important; }
.student-activity-list strong { color: var(--ink) !important; }
.student-activity-list span, .student-activity-list small { color: var(--muted) !important; }
.assignment-card { background: var(--surface) !important; border-color: var(--hairline-soft) !important; border-radius: 14px !important; }
.assignment-card p, .assignment-card small { color: var(--muted) !important; }

/* ═══════════════════════════════════════════════════════════════════
   MODAL — speech
   ═══════════════════════════════════════════════════════════════════ */
.modal-mask { background: rgba(20, 24, 40, 0.4) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
.speech-modal {
  background: var(--surface) !important;
  border: 1px solid var(--hairline-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--ink) !important;
  animation: cv-modal-in 0.4s var(--ease) both !important;
}
@keyframes cv-modal-in { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: none; } }
.speech-modal .eyebrow { color: var(--accent) !important; }
.speech-modal h2 { color: var(--ink) !important; }
.speech-target { background: var(--accent-soft-2) !important; color: var(--ink-2) !important; border-radius: var(--r-sm) !important; }
.ai-coach-modal { width: min(780px, 100%) !important; }
.ai-coach-modal .ai-challenge-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.ai-coach-modal .ai-challenge-head { padding-right: 48px !important; }
.ai-coach-target { margin-bottom: 16px !important; }
.recorder-card { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.recorder-card strong { color: var(--ink) !important; }
.level-bar { background: var(--surface-3) !important; }
.level-bar span { background: var(--accent) !important; }
.score-card { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; border-radius: var(--r-sm) !important; }
.score-card span { color: var(--muted) !important; }
.score-card strong { color: var(--ink) !important; }

/* ═══════════════════════════════════════════════════════════════════
   MOTION — reveal, view-enter, button loading, empty state
   ═══════════════════════════════════════════════════════════════════ */
.primary-action.loading, .secondary-action.loading { position: relative !important; color: transparent !important; pointer-events: none !important; }
.primary-action.loading::after, .secondary-action.loading::after {
  content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important;
  width: 16px !important; height: 16px !important; margin: -8px 0 0 -8px !important;
  border: 2px solid rgba(255,255,255,0.35) !important; border-top-color: #fff !important;
  border-radius: 50% !important; animation: cv-spin 0.7s linear infinite !important;
}
.secondary-action.loading::after { border-color: var(--hairline) !important; border-top-color: var(--ink) !important; }
@keyframes cv-spin { to { transform: rotate(360deg); } }

@keyframes view-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.view.active { animation: view-enter 0.5s var(--ease) both !important; }

/* JS-driven scroll reveal (off with the app's 减少动效 switch as well as the system setting) */
.cv-reveal { opacity: 0; transform: translateY(20px); }
.cv-reveal.cv-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
html.cv-reduce-motion .cv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* count-up flash */
.cv-counting { color: var(--accent) !important; transition: color 0.4s var(--ease); }

.empty-state-card {
  text-align: center !important; padding: 48px 24px !important;
  background: var(--surface-2) !important;
  border: 1.5px dashed var(--hairline) !important;
  border-radius: var(--r) !important;
  color: var(--muted) !important;
}
.empty-state-card .icon { font-size: 40px !important; margin-bottom: 14px !important; display: block !important; }
.empty-state-card h3 { color: var(--ink) !important; margin-bottom: 8px !important; }

.workbench-loading { color: var(--ink) !important; }
.workbench-loading .eyebrow { color: var(--accent) !important; }
.workbench-loading p { color: var(--muted) !important; }
.spinner-dots span { background: var(--accent) !important; }
@keyframes cv-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

/* ── Skeleton shimmer — premium loading feel (no logic change) ──────
   1) Loading "正在读取…" feedback messages get a soft moving sheen.
   2) Metric numbers still showing the raw "--" placeholder are masked
      by a shimmering pill until enhance.js sees a real value arrive. */
@keyframes cv-shimmer { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } }

.feedback:not(.bad):not(.good) {
  position: relative !important;
  overflow: hidden !important;
}
.feedback:not(.bad):not(.good)::after {
  content: "" !important;
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%) !important;
  background-size: 200% 100% !important;
  animation: cv-shimmer 1.5s var(--ease) infinite !important;
  pointer-events: none !important;
}
.cv-dark .feedback:not(.bad):not(.good)::after {
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%) !important;
  background-size: 200% 100% !important;
}

/* metric value skeleton (toggled by enhance.js via .cv-skeleton) */
.metric-card strong.cv-skeleton,
.metric-card.blue strong.cv-skeleton,
.metric-card.green strong.cv-skeleton,
.metric-card.peach strong.cv-skeleton,
.metric-card.purple strong.cv-skeleton,
.hero-stat strong.cv-skeleton {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  position: relative !important;
  border-radius: 8px !important;
  background: linear-gradient(100deg, var(--surface-3) 30%, var(--surface-2) 50%, var(--surface-3) 70%) !important;
  background-size: 200% 100% !important;
  animation: cv-shimmer 1.4s var(--ease) infinite !important;
  min-width: 2.2em !important;
  display: inline-block !important;
}
.hero-stat strong.cv-skeleton {
  background: linear-gradient(100deg, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 70%) !important;
  background-size: 200% 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DAILY PLAN (today)
   ═══════════════════════════════════════════════════════════════════ */
.daily-plan-summary, .daily-plan-overview { background: var(--surface-2) !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--r-sm) !important; box-shadow: none !important; }
.daily-plan-overview.no-homework { grid-template-columns: minmax(0, 1fr) auto !important; }
.daily-plan-actions { display: flex !important; align-items: stretch !important; justify-content: flex-end !important; gap: 8px !important; flex-wrap: wrap !important; min-width: 0 !important; }
.daily-plan-actions .secondary-action { min-height: 44px !important; }
.daily-refresh-action { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.daily-refresh-action .ic { width: 16px !important; height: 16px !important; }
.daily-plan-stat { background: var(--surface) !important; border-radius: 13px !important; border-color: var(--hairline-soft) !important; }
.daily-plan-stat.homework-stat { border: 1px solid rgba(124,92,214,.18) !important; background: var(--purple-soft) !important; }
.daily-plan-stat.learning-stat { border: 1px solid rgba(26,156,82,.18) !important; background: var(--green-soft) !important; }
.daily-plan-stat span { color: var(--muted) !important; }
.daily-plan-stat strong { color: var(--ink) !important; }
.daily-plan-stat small { color: var(--muted-2) !important; }
.daily-section { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--r-sm) !important; box-shadow: none !important; }
.daily-homework-section { background: linear-gradient(135deg, var(--purple-soft), var(--surface)) !important; border-color: rgba(124,92,214,.15) !important; }
.daily-learning-section { background: linear-gradient(135deg, var(--green-soft), var(--surface)) !important; border-color: rgba(26,156,82,.15) !important; }
.daily-section-head strong { color: var(--ink) !important; }
.daily-section-head small { color: var(--muted) !important; }
.daily-section-head span { color: var(--accent) !important; }
.daily-task-row { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: 13px !important; }
.daily-task-row.homework-task { border-color: rgba(124,92,214,.18) !important; }
.daily-task-row.learning-task { border-color: rgba(26,156,82,.16) !important; }
.daily-task-row.homework-task .task-icon { background: var(--purple-soft) !important; color: var(--purple) !important; }
.daily-task-row.learning-task .task-icon { background: var(--green-soft) !important; color: var(--green) !important; }
.daily-task-row.completed .task-icon { background: var(--green) !important; color: #fff !important; }
.daily-task-row.in_progress .task-icon, .daily-task-row.partial .task-icon { background: var(--accent) !important; color: #fff !important; }
.daily-task-row strong { color: var(--ink) !important; }
.daily-task-row span { color: var(--muted) !important; }
.daily-task-title-line { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 10px !important; min-width: 0 !important; }
.daily-task-title-line strong { min-width: 0 !important; }
.daily-task-title-line .daily-status { display: inline-flex !important; flex: 0 0 auto !important; margin-top: -2px !important; }
.daily-status { background: var(--surface-2) !important; color: var(--muted) !important; }
.daily-mini-progress { background: var(--surface-3) !important; }
.daily-mini-progress i { background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important; }
.today-plan-card { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; }
.daily-target-editor { background: var(--surface-2) !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--r-sm) !important; box-shadow: none !important; }
.daily-target-editor label { color: var(--muted) !important; }
.daily-target-editor input, .daily-target-editor select { background: var(--surface) !important; border: 1px solid var(--hairline) !important; color: var(--ink) !important; border-radius: 11px !important; }
.daily-target-controls .secondary-action.active { border-color: var(--accent) !important; background: var(--accent-soft) !important; color: var(--accent-ink) !important; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR  (injected by enhance.js)
   ═══════════════════════════════════════════════════════════════════ */
.mobile-tabbar { display: none; }

/* Never show the mobile tab bar / popup sheet on the login screen */
body:has(#authScreen:not(.hidden)) .mobile-tabbar,
body:has(#authScreen:not(.hidden)) .tab-sheet { display: none !important; }

/* Training popup action sheet (mobile) */
.tab-sheet {
  position: fixed;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100vw - 24px));
  transform: translateX(-50%) translateY(12px) scale(0.98);
  transform-origin: bottom center;
  background: var(--glass-sheet);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--hairline-soft);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: grid;
  gap: 4px;
  z-index: 96;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.tab-sheet.open { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
.tab-sheet-title { padding: 9px 12px 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-2); }
.tab-sheet button {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 58px;
  border: none; background: transparent;
  border-radius: 15px; padding: 0 12px;
  font-family: var(--font); cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tab-sheet button:hover { background: var(--surface-2); }
.tab-sheet button:active { background: var(--surface-2); transform: scale(0.985); }
.tab-sheet .ts-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03); }
.tab-sheet .ts-icon svg { width: 22px; height: 22px; }
/* Tasteful per-item colour system — soft tint + vivid icon. */
.tab-sheet .ts-icon.tci-indigo { background: rgba(91, 91, 214, 0.13);  color: #5b5bd6; }
.tab-sheet .ts-icon.tci-blue   { background: rgba(40, 104, 240, 0.13); color: #2868f0; }
.tab-sheet .ts-icon.tci-green  { background: rgba(26, 156, 82, 0.14);  color: #169a52; }
.tab-sheet .ts-icon.tci-amber  { background: rgba(217, 138, 0, 0.15);  color: #d98a00; }
.tab-sheet .ts-icon.tci-teal   { background: rgba(13, 148, 136, 0.14); color: #0d9488; }
.tab-sheet .ts-icon.tci-cyan   { background: rgba(8, 145, 178, 0.14);  color: #0891b2; }
.tab-sheet .ts-icon.tci-violet { background: rgba(124, 58, 237, 0.13); color: #7c3aed; }
.tab-sheet .ts-icon.tci-rose   { background: rgba(225, 29, 107, 0.13); color: #e11d6b; }
.tab-sheet .ts-icon.tci-purple { background: rgba(124, 92, 214, 0.14); color: #7c5cd6; }
/* legacy aliases (kept so older markup still themes) */
.tab-sheet .ts-icon.tci-practice { background: var(--accent-soft); color: var(--accent); }
.tab-sheet .ts-icon.tci-quiz { background: var(--green-soft); color: var(--green); }
.tab-sheet .ts-icon.tci-wrong { background: var(--amber-soft); color: var(--amber); }
.tab-sheet .ts-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.tab-sheet .ts-text strong { font-size: 15px; font-weight: 650; color: var(--ink); }
.tab-sheet .ts-text small { font-size: 12px; color: var(--muted); }
.tab-sheet .ts-arrow { display: grid; place-items: center; width: 22px; color: var(--muted-2); opacity: 0.7; flex-shrink: 0; }
.tab-sheet .ts-arrow svg { width: 17px; height: 17px; }
.tab-sheet button:hover .ts-arrow { color: var(--accent); opacity: 1; transform: translateX(2px); }
/* brighten vivid icons in dark mode for contrast */
html.cv-dark .tab-sheet .ts-icon.tci-indigo { color: #9a9af5; }
html.cv-dark .tab-sheet .ts-icon.tci-blue   { color: #6f9bff; }
html.cv-dark .tab-sheet .ts-icon.tci-green  { color: #45d488; }
html.cv-dark .tab-sheet .ts-icon.tci-amber  { color: #f0b232; }
html.cv-dark .tab-sheet .ts-icon.tci-teal   { color: #2dd4bf; }
html.cv-dark .tab-sheet .ts-icon.tci-cyan   { color: #34c3e0; }
html.cv-dark .tab-sheet .ts-icon.tci-violet { color: #a78bfa; }
html.cv-dark .tab-sheet .ts-icon.tci-rose   { color: #fb6aa0; }
html.cv-dark .tab-sheet .ts-icon.tci-purple { color: #b9a3f5; }

@media (max-width: 1180px) {
  :root {
    --cv-mobile-tabbar-clearance: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-tabbar {
    display: grid !important;
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--glass-bar);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-top: 1px solid var(--hairline-soft);
  }
  .mobile-tab {
    appearance: none;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 4px 2px;
    border-radius: 14px;
    color: var(--muted);
    font-family: var(--font);
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .mobile-tab .mt-icon { position: relative; font-size: 21px; line-height: 1; }
  
  .mobile-tab.active .mt-icon { transform: translateY(-1px) scale(1.08); }
  .mobile-tab.sheet-active { color: var(--accent-ink); }
  .mobile-tab:active { transform: scale(0.92); }

  /* keep page content clear of the fixed bottom bar */
  .main { padding-bottom: var(--cv-mobile-tabbar-clearance) !important; }
  .view.active { scroll-padding-bottom: var(--cv-mobile-tabbar-clearance); }
}
.tab-sheet.sheet-compact { width: min(360px, calc(100vw - 32px)); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
  /* hero stacks: copy on top, today-progress below as a full-width strip */
  .hero-panel { grid-template-columns: 1fr !important; gap: 22px !important; }
  .hero-progress {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .hero-progress .ring { width: 96px !important; height: 96px !important; flex-shrink: 0 !important; }
  .hero-progress .ring span { width: 70px !important; height: 70px !important; font-size: 20px !important; }
  .hero-progress-meta { text-align: left !important; }
  .hero-progress.assignment-progress-widget {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .assignment-progress-head {
    gap: 6px !important;
  }
  .assignment-progress-head strong {
    width: 100% !important;
    text-align: left !important;
    font-size: 15px !important;
  }
  .assignment-progress-scroll {
    gap: 8px !important;
    padding: 1px 1px 5px !important;
  }
  .assignment-progress-card {
    flex-basis: clamp(150px, 58vw, 190px) !important;
    max-width: 190px !important;
    padding: 11px !important;
  }
  .assignment-progress-card-top strong {
    font-size: 20px !important;
  }

  /* sidebar becomes a slide-in drawer */
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    transform: translateX(-104%) !important;
    width: 290px !important;
    z-index: 100 !important;
    border-radius: 0 22px 22px 0 !important;
    background: var(--glass-drawer) !important;
    box-shadow: var(--shadow-lg) !important;
    transition: transform var(--t) var(--ease) !important;
  }
  body.nav-open .sidebar { transform: translateX(0) !important; left: 0 !important; }
  body.nav-open::after {
    content: "" !important;
    position: fixed !important; inset: 0 !important;
    z-index: 95 !important;
    background: rgba(20, 24, 40, 0.34) !important;
    backdrop-filter: blur(2px) !important;
  }

  .menu-toggle {
    display: grid !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 12px !important;
  }

  .main { padding: 0 24px 124px !important; gap: 22px !important; }

  /* ── Topbar declutter (760–1180 tablet band fix) ──────────────────
     Was: full desktop action cluster crammed next to ☰, title squashed
     to 3 lines, AND the same tools duplicated in the drawer + tab bar.
     Now: row 1 = ☰ + title; row 2 = full-width search + theme toggle.
     Role chip / CloudBase / WeChat / logout live only in the drawer. */
  .topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "menu title" "actions actions" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
  }
  .menu-toggle { grid-area: menu !important; }
  .topbar-title { grid-area: title !important; min-width: 0 !important; }
  .topbar-title h1 {
    font-size: 22px !important;
    white-space: normal !important;
    margin: 0 !important;
  }
  .top-actions {
    grid-area: actions !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  /* keep the search box + the theme toggle; everything else → drawer */
  .top-actions > :not(.search-box):not(.cv-theme-toggle) { display: none !important; }
  .top-actions .search-box { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
  .top-actions .cv-theme-toggle {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    order: 2 !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  /* Content-first on small screens: surface the thing to LEARN immediately
     (word card / quiz / mode cards / workspace) and push the settings &
     controls panel below it — no long scroll past the setup step. */
  .view-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .view-grid > aside { order: 2 !important; }
  .view-grid > :not(aside) { order: 1 !important; }
  .training-mode-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  /* 登录卡在手机上原本被 .auth-screen 的 28px 内边距挤成比登录后的 App(16px 边距)更窄的一张卡。
     把手机端登录页边距对齐 App 内容边距,登录框与登录后宽度一致,避免"登录时窗口偏窄"的观感(#4)。 */
  .auth-screen { padding: 16px !important; }
  .auth-layout { grid-template-columns: 1fr !important; border-radius: 26px !important; }
  .auth-story { display: none !important; }
  .auth-card-container { border-left: none !important; }
  .auth-card { padding: 32px 20px !important; }

  .main { padding: 0 16px var(--cv-mobile-tabbar-clearance, 104px) !important; gap: 20px !important; }
  .topbar { padding: 18px 0 16px !important; }
  .hero-panel { padding: 30px 24px !important; }
  .hero-copy h2 { font-size: clamp(26px, 6vw, 34px) !important; }
  .metric-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .metric-grid.dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .surface-card { padding: 20px !important; }
}

@media (max-width: 560px) {
  
  .metric-grid.dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  
  .metric-card strong { font-size: 26px !important; }
  body[data-view="today"] .home-scroll-list {
    max-height: min(390px, calc(100dvh - 260px));
  }
  .word-card { min-height: 360px !important; }
  .top-actions .primary-action, .top-actions .secondary-action, .top-actions .pill-button:not(.cv-theme-toggle), .top-actions .wechat-action { width: 100% !important; }
}

/* Phone: compact each view so it fits much closer to a single screen */
@media (max-width: 768px) {
  :root {
    --cv-mobile-tabbar-clearance: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  .main { gap: 16px !important; padding-bottom: var(--cv-mobile-tabbar-clearance) !important; }
  body[data-view="today"] .home-scroll-list,
  body[data-view="today"] .home-action-list,
  body[data-view="today"] .daily-checkin-section {
    scroll-padding-bottom: var(--cv-mobile-tabbar-clearance);
  }
  
  body[data-view="today"] .today-plan-card {
    margin-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .surface-card { padding: 18px !important; }
  
  .hero-copy h2 { margin: 6px 0 8px !important; }
  .hero-copy p { font-size: 14px !important; }
  .hero-stats-row { margin: 18px 0 !important; }
  .hero-stat { padding: 11px 14px !important; min-width: 0 !important; flex: 1 !important; }
  .progress-panel { padding: 20px !important; }
  .word-card { gap: 14px !important; padding: 22px !important; }
  .question-card { padding: 20px !important; }
  .view-grid { gap: 14px !important; }
  .surface-card h2, .surface-card h3 { font-size: 19px !important; }

  /* ── Minimal mobile Home ──────────────────────────────────────────
     The Home view stacked THREE stat blocks (hero stats + progress ring
     + 4 metric cards) before the daily plan — too much scrolling, and
     Accuracy/etc. repeated across all three. On phones we keep the one
     today-focused hero + the actual task list. The progress ring is
     dropped (redundant), and the 4 library-total metric cards become a
     single compact stat strip (option B). Desktop is unchanged. */
  .hero-grid { gap: 0 !important; }
  .progress-panel { display: none !important; }
  /* B方案: metric cards → one compact 4-up stat strip */
  .metric-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
  .metric-card { text-align: center !important; border-radius: 13px !important; }
  .metric-card span { font-size: 10.5px !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; }
  
  .metric-card small { display: none !important; }
  /* hero: trim to greeting + 3 quick stats + actions */
  #heroSubtitle { display: none !important; }
  .hero-panel { border-radius: 24px !important; }
  .hero-copy h2 { font-size: 26px !important; margin: 4px 0 0 !important; }
  .hero-stats-row { margin: 16px 0 16px !important; }
  .hero-stat { padding: 10px 10px !important; border-radius: 14px !important; }
  .hero-stat strong { font-size: 21px !important; }
  .hero-actions { display: flex !important; gap: 10px !important; margin-top: 4px !important; }
  .hero-actions .primary-action,
  .hero-actions .secondary-action { flex: 1 !important; min-height: 46px !important; padding: 0 12px !important; }
  /* daily plan sits right under the hero now — give it a touch more room */
  #view-today { margin-top: 2px !important; }

  /* ── Mobile daily/homework task row — fix cramped, misaligned button ──
     Was: status pill + button left-aligned & wrapping under the text,
     uneven heights. Now: action row spans under the content, status on
     the left and a tidy equal-height button on the right. */
  .daily-task-row .daily-task-actions {
    grid-column: 2 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 3px !important;
  }
  .daily-task-row .daily-status {
    min-height: 32px !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
  .daily-task-row .daily-task-actions .secondary-action {
    width: min(120px, 100%) !important;
    max-width: 120px !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    justify-self: end !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── Mobile density pass ──────────────────────────────────────────
     Phones had desktop-sized padding, oversized decorative headings and
     tall option tiles, so each block ate a lot of vertical space. Trim
     chrome (padding / decorative text / tile heights) while keeping the
     primary text at readable sizes, so more fits per screen. */

  /* outer cards a touch tighter */
  .surface-card { padding: 16px !important; }
  .today-plan-card h2 { font-size: 18px !important; margin-bottom: 12px !important; }

  /* level picker: drop the long helper line, shrink heading + tiles */
  .home-level-picker { padding: 12px !important; gap: 10px !important; margin: 0 0 12px !important; border-radius: 16px !important; }
  .home-level-picker > div:first-child { display: flex !important; align-items: baseline !important; gap: 8px !important; flex-wrap: wrap !important; }
  .home-level-picker span { font-size: 10.5px !important; }
  .home-level-picker strong { font-size: 17px !important; margin-top: 0 !important; }
  .home-level-picker p { display: none !important; }
  .home-level-options { gap: 8px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .home-level-option { min-height: 0 !important; padding: 9px 8px !important; gap: 2px !important; text-align: center !important; border-radius: 12px !important; }
  .home-level-option:hover { transform: none !important; }
  .home-level-option span { font-size: 13px !important; font-weight: 700 !important; }
  .home-level-option strong { font-size: 16px !important; }
  .home-level-option small { font-size: 10.5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

  /* daily plan overview + sections: tighter padding & gaps */
  .daily-plan-overview { padding: 12px !important; gap: 8px !important; }
  .daily-plan-overview.no-homework { grid-template-columns: 1fr !important; }
  .daily-plan-actions { justify-content: flex-start !important; }
  .daily-plan-actions .secondary-action { min-height: 40px !important; padding: 0 14px !important; }
  .daily-plan-stat { padding: 10px 12px !important; border-radius: 12px !important; }
  .daily-plan-stat strong { font-size: 18px !important; }
  .daily-section { padding: 12px !important; border-radius: 14px !important; }
  .daily-section-head { margin-bottom: 8px !important; }
  .daily-section-head strong { font-size: 14px !important; }
  .daily-section-head small { font-size: 11px !important; }

  /* task rows: slimmer icon + padding */
  .daily-task-row { padding: 10px !important; gap: 10px !important; border-radius: 13px !important; }
  .daily-task-row .task-icon,
  .task-row .task-icon { width: 38px !important; height: 38px !important; border-radius: 11px !important; font-size: 13px !important; }
  .daily-task-row strong, .task-row strong { font-size: 14px !important; }
  .daily-task-row span, .task-row span { font-size: 12px !important; }

  /* ── Density pass · all other views ───────────────────────────── */
  /* Vocabulary / word card */
  .word-card { padding: 18px !important; gap: 12px !important; min-height: 0 !important; }
  .word-title { font-size: 34px !important; }
  .word-meaning { font-size: 15px !important; }
  .badge { font-size: 11px !important; padding: 3px 9px !important; }
  .compact-word { padding: 12px !important; }
  .unit-pill { padding: 10px 12px !important; }
  .segmented-control { padding: 3px !important; }
  .segmented-control span { padding: 8px 6px !important; font-size: 13px !important; }

  /* Quiz / practice */
  .question-card { padding: 16px !important; gap: 12px !important; }
  .question-prompt { font-size: 17px !important; }
  .option { padding: 13px 14px !important; border-radius: 13px !important; font-size: 14px !important; }
  .practice-review { padding: 14px !important; }
  .review-detail div { padding: 10px !important; }

  /* Training cards */
  .training-action-card { padding: 14px !important; }
  .training-card-icon { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
  .tac-head strong { font-size: 15px !important; }

  /* Reading */
  .reading-mode-tabs { gap: 8px !important; }
  .reading-mode-tabs button { padding: 12px !important; }
  .reading-overview { gap: 8px !important; }
  .reading-overview article { padding: 12px !important; }
  .reading-task-card { padding: 12px !important; }
  .reading-card { padding: 14px !important; }
  .sentence-row { padding: 12px !important; gap: 10px !important; }
  .sentence-index { width: 34px !important; height: 34px !important; }

  /* Speaking / AI */
  .ai-challenge-card { padding: 16px !important; }
  .ai-task { padding: 12px !important; }
  .ai-answer-field textarea { padding: 12px !important; }

  /* Writing */
  .upload-drop { padding: 18px !important; }
  .writing-preview { padding: 12px !important; }
  .writing-textarea-label textarea { padding: 12px !important; }
  .assignment-brief { padding: 14px !important; }
  .writing-score-grid { gap: 8px !important; }
  .writing-score-grid article { padding: 12px !important; }
  .writing-review-head { padding: 14px !important; }

  /* Teacher / Admin */
  .dashboard-hero { padding: 16px !important; }
  .teacher-class-switcher { padding: 14px !important; }
  .teacher-tabs { gap: 2px !important; padding: 4px !important; overflow-x: auto !important; }
  .teacher-tabs button { padding: 9px 12px !important; font-size: 13px !important; white-space: nowrap !important; }
  .chart-card { padding: 14px !important; }
  .admin-row { padding: 12px !important; }
  .submission-card, .teacher-submission-card { padding: 12px !important; }
  .mini-form input, .mini-form select, .mini-form textarea { padding: 10px 12px !important; }

  /* analytics grids that were fixed 2-col → stack on phone */
  .analytics-grid { grid-template-columns: 1fr !important; }

  /* ── Global overflow safety (phones) ──────────────────────────────
     Guard against any wide child (tables, long tokens, code) forcing
     horizontal scroll or pushing a card past the viewport edge. */
  .surface-card, .word-card, .question-card, .ai-challenge-card,
  .reading-card, .chart-card, .training-action-card, .hero-panel,
  .daily-section, .daily-plan-overview { max-width: 100% !important; }
  .data-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .word-title, .question-prompt, .reading-card p, .sentence-row p,
  .ai-task p, .writing-prompt-suggestion strong, .admin-row strong {
    overflow-wrap: anywhere !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.16); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); background-clip: padding-box; }
.cv-dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); background-clip: padding-box; }
.cv-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); background-clip: padding-box; }

/* theme toggle button */
.cv-theme-toggle { white-space: nowrap !important; font-weight: 600 !important; }
.cv-dark .modal-mask { background: rgba(0, 0, 0, 0.55) !important; }

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cv-reveal { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.4 · PREMIUM ICON SYSTEM + SETTINGS DRAWER + ACCOUNT FOOTER
   Line-icon set (inline SVG sprite) replaces emoji across the shell;
   Settings moves from a nav page into a right-side glass drawer.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base line-icon ─────────────────────────────────────────────── */
.ic {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.18em;
}
.ic * {
  stroke-width: inherit;
  stroke-linecap: inherit;
  stroke-linejoin: inherit;
}
.ic-sm { width: 15px; height: 15px; }
.ic-head { width: 18px; height: 18px; color: var(--accent); }

/* ── Sidebar nav: icon + 2-line label ───────────────────────────── */
.nav-item {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.nav-ic { display: grid; place-items: center; width: 22px; height: 22px; }
.nav-ic .ic { width: 20px; height: 20px; }
.nav-tx { display: grid; min-width: 0; }
.nav-item.active .nav-ic .ic { color: var(--accent-ink); }

/* ── Topbar: search icon + quick theme toggle ───────────────────── */
.search-box .search-ic { width: 17px; height: 17px; color: var(--muted-2); flex: none; }
.cv-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.cv-theme-toggle .ic { width: 17px; height: 17px; }
.cv-theme-toggle span { font-size: 13px; }

/* ── Sidebar account footer (settings entry) ────────────────────── */
.account-footer { margin-top: 4px; }
.account-footer[hidden] { display: none !important; }
.account-chip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.account-chip:hover { border-color: var(--accent-edge); box-shadow: var(--shadow-xs); }
.account-chip:active { transform: translateY(0) scale(0.99); }
.account-avatar {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; font-size: 14px;
}
.account-meta { display: grid; gap: 1px; min-width: 0; flex: 1; }
.account-meta small { font-size: 11px; color: var(--muted-2); line-height: 1.2; }
.account-meta strong {
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-gear { width: 18px; height: 18px; color: var(--muted-2); flex: none; }
.account-chip:hover .account-gear { color: var(--accent); }

/* ── Settings drawer + scrim ────────────────────────────────────── */
.settings-scrim {
  position: fixed; inset: 0;
  z-index: 115;
  background: rgba(20, 24, 40, 0.40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.settings-scrim[hidden] { display: none; }
body.settings-open .settings-scrim { opacity: 1; }

.settings-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--glass-drawer);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-left: 1px solid var(--hairline-soft);
  box-shadow: var(--shadow-lg);
  transform: translateX(104%);
  transition: transform var(--t) var(--ease);
  will-change: transform;
}
.settings-drawer[hidden] { display: none; }
body.settings-open .settings-drawer { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 22px 16px;
  border-bottom: 1px solid var(--hairline-soft);
}
.drawer-head .eyebrow { color: var(--accent); }
.drawer-head h2 { margin: 3px 0 0; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.drawer-head-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.drawer-close { width: 40px !important; min-height: 40px !important; padding: 0 !important; }
.drawer-close .ic { width: 18px; height: 18px; }
.drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px 20px calc(28px + env(safe-area-inset-bottom, 0px));
}
.drawer-body .settings-card { margin: 0; }

/* ── Card heads + action buttons with icons ─────────────────────── */
.card-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.settings-ver { font-size: 11px; color: var(--muted-2); }
.settings-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.settings-actions .ic { width: 17px; height: 17px; }
.settings-class-list span {
  background: var(--surface) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}
.settings-class-list .muted { color: var(--muted) !important; }
.settings-join-class input {
  background: var(--surface) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
}
.settings-join-class input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
  outline: none !important;
}
.empty-state-card .icon .ic { width: 26px; height: 26px; color: var(--accent); }
.quote-card .eyebrow .ic { width: 13px; height: 13px; color: var(--accent); }

/* On phones the right drawer is effectively full-bleed */
@media (max-width: 560px) {
  .settings-drawer { width: 100vw; border-left: none; border-radius: 0; }
}

/* ── Login Rive illustration ────────────────────────────────────── */
.auth-story-rive {
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 48px !important;
}

.auth-story-rive .brand,
.auth-story-rive .auth-rive-panel,
.auth-story-rive .auth-story-copy {
  position: relative !important;
  z-index: 2 !important;
}

.auth-rive-panel {
  width: 100% !important;
  height: clamp(260px, 42vh, 360px) !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  margin: 4px 0 2px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background: #e8e3e8 !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22) !important;
}

.auth-rive-panel canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.auth-rive-loading {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(15, 23, 42, 0.44) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  pointer-events: none !important;
}

.auth-rive-ready .auth-rive-loading {
  opacity: 0 !important;
}

.auth-rive-unavailable .auth-rive-panel {
  display: none !important;
}

.auth-story-rive .auth-story-copy {
  display: grid !important;
  gap: 12px !important;
}

.auth-story-rive .auth-story-copy h1 {
  margin: 0 !important;
  max-width: 560px !important;
  font-size: clamp(30px, 3.2vw, 46px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

.auth-story-rive .auth-story-copy p {
  margin: 0 !important;
  max-width: 480px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.auth-password-input-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.auth-password-input-wrap input {
  padding-right: 54px !important;
}

.auth-password-toggle {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 11px !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  background: var(--surface-2) !important;
  outline: none !important;
}

.auth-password-toggle canvas {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  pointer-events: none !important;
}

.auth-password-error input {
  border-color: #c2410c !important;
  box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.12) !important;
}

.auth-row-options {
  align-items: center !important;
}

.auth-row-options label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.auth-row-options input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 4px !important;
  flex: 0 0 auto !important;
}

@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-4px); }
}

.auth-shake {
  animation: authShake 0.38s ease-in-out !important;
}

.assignment-common-issues,
.assignment-common-grid article,
.reading-practice-summary,
.reading-practice-result,
.reading-practice-card {
  background: var(--surface) !important;
  border-color: var(--hairline-soft) !important;
}

.assignment-common-issues strong,
.assignment-common-sentences p,
.reading-practice-summary strong,
.reading-practice-result strong,
.reading-practice-card p {
  color: var(--ink) !important;
}

.assignment-common-issues span,
.assignment-common-issues small,
.reading-practice-summary small,
.reading-practice-result p,
.reading-practice-card > small,
.reading-practice-card-head span {
  color: var(--muted) !important;
}

.reading-practice-card-head strong {
  color: var(--accent) !important;
}

@media (max-width: 1120px) {
  .auth-rive-panel { height: clamp(250px, 38vh, 320px) !important; }
  .auth-story-rive .auth-story-copy h1 { font-size: clamp(30px, 5vw, 44px) !important; }
}

@media (max-width: 900px) {
  .auth-story-rive { display: none !important; }
}

/* Student/mobile stability pass: keep every student view clear of the fixed
   bottom tabs, and make mobile dialogs/input controls usable on small iPhones. */
@media (max-width: 768px) {
  

  input,
  select,
  textarea,
  .search-box input,
  .listen-search input,
  .mini-field input,
  .mini-field select,
  .settings-join-class input,
  .settings-password-form input {
    font-size: 16px !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;
    margin-left: auto !important;
    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;
  }

  

  .assignment-archive,
  .assignment-type-groups,
  .assignment-type-list,
  .assignment-timeline {
    min-width: 0 !important;
  }

  .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;
  }
}

@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;
  }
}

/* ==== premium.css ==== */
/* ═══════════════════════════════════════════════════════════════════
   CAMVOCAB · PREMIUM POLISH LAYER  (v4.6.0)
   Loads LAST, after ultimate.css. Adds:
     1. Three switchable color themes (indigo / royal / emerald) × light+dark
     2. Token-driven hero + auth gradients (palette-aware)
     3. Typographic + depth refinement ("追求极致")
     4. Settings drawer polish (palette swatches, grouped)
     5. Mobile / touch refinement
     6. Growth Archive, Teacher Report, Admin components
     7. Print styles (parent display + teacher brief)
   Switch palette via  <html data-palette="indigo|royal|emerald">.
   ═══════════════════════════════════════════════════════════════════ */

/* ════════════ HERO + AUTH — now palette-driven ════════════ */
.hero-panel {
  background: var(--hero-grad) !important;
  box-shadow: 0 18px 48px rgba(12, 16, 38, 0.28) !important;
}
.hero-panel::before {
  background: var(--hero-glow-1) !important;
  opacity: 1 !important;
  display: block !important;
}
/* second ambient glow on the hero, lower-left */
.hero-panel::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  width: 320px; height: 320px;
  left: -90px; bottom: -120px;
  background: var(--hero-glow-2) !important;
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.auth-story { background: var(--auth-grad) !important; }
.auth-story::before { background: var(--hero-glow-1) !important; }
.auth-story::after { background: var(--hero-glow-2) !important; }

/* ════════════ TYPOGRAPHY — premium refinement ════════════ */
.hero-panel h2,
.auth-story h1 {
  text-shadow: 0 1px 18px rgba(8, 11, 30, 0.35);
}
.hero-panel .eyebrow { letter-spacing: 0.16em !important; }
/* hero stat numbers — crisp, faintly lifted on the dark panel */
.hero-stat strong, .hero-stats-row strong {
  text-shadow: 0 1px 10px rgba(8, 11, 30, 0.3) !important;
  font-variant-numeric: tabular-nums;
}
/* big numbers everywhere use tabular figures so they don't jitter on count-up */
.metric-card strong, .ring span, .daily-plan-stat strong { font-variant-numeric: tabular-nums; }
/* section heads / card titles a touch tighter */
.section-head h3, .surface-card > h2, .surface-card > h3 { letter-spacing: -0.01em; }

/* ════════════ DEPTH + MICRO-INTERACTION ════════════ */
.metric-card { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important; }
.metric-card:hover { box-shadow: var(--shadow-lg) !important; }
.surface-card:hover { box-shadow: var(--shadow) ; }
/* primary action: 5.10.3 drops the hover sheen (matte buttons); the loading spinner
   (ultimate.css .primary-action.loading::after) is the only ::after left. */
.primary-action { position: relative; overflow: hidden; }
/* nav active indicator — smoother, palette-aware bar */
.nav-item.active { box-shadow: inset 0 0 0 1px var(--accent-edge); }
/* focus-visible ring everywhere for accessibility + polish */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent-edge) !important;
  border-radius: 8px;
}

/* progress ring — slightly thicker premium look handled in JS gradient;
   ensure the inner hole is crisp */
.ring { box-shadow: var(--shadow-sm) !important; }

/* ════════════ SETTINGS DRAWER — palette swatches + grouping ════════════ */
.palette-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.palette-swatch {
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  padding: 10px; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); border: 1.5px solid transparent;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.palette-swatch:hover { box-shadow: var(--shadow-sm); }
.palette-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.palette-swatch .swatch-strip { height: 26px; border-radius: 8px; display: flex; overflow: hidden; }
.palette-swatch .swatch-strip i { flex: 1; }
.palette-swatch .swatch-name { font-size: 12px; font-weight: 700; color: var(--ink); text-align: center; }
.palette-swatch .swatch-check { display: none; }
.palette-swatch.active .swatch-check { display: inline; color: var(--accent); }
/* settings: tidy section rhythm */
.settings-card + .settings-card { margin-top: 14px; }
.settings-note { color: var(--muted) !important; }
.settings-seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; }
.settings-seg button {
  border: none; background: transparent; color: var(--muted); font-weight: 700; font-size: 13px;
  padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: all var(--t-fast) var(--ease);
}
.settings-seg button.active { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-xs); }

/* ════════════ MOBILE / TOUCH REFINEMENT ════════════ */
@media (max-width: 768px) {
  .hero-panel { padding: 28px 22px !important; min-height: 232px !important; }
  .hero-panel h2 { font-size: clamp(26px, 7vw, 34px) !important; }
  .hero-stats-row { gap: 8px !important; }
  .hero-stat, .hero-stats-row > div { min-width: 0 !important; flex: 1 1 0 !important; padding: 10px 8px !important; }
  .metric-card { min-height: 96px !important; padding: 15px 16px !important; }
  .metric-card strong { font-size: 28px !important; }
  .section-head { gap: 8px; }
  /* comfortable tap targets */
  .primary-action, .secondary-action, .pill-button, .nav-item, .tab-btn { min-height: 44px; }
  .palette-picker { gap: 8px; }
}
@media (max-width: 560px) {
  .hero-stats-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
  .hero-actions { flex-direction: column !important; }
  .hero-actions .primary-action, .hero-actions .secondary-action { width: 100% !important; }
}

/* ════════════ GROWTH ARCHIVE ════════════ */
.growth-archive { display: flex; flex-direction: column; gap: 16px; }
.growth-hero { background: var(--hero-grad) !important; color: #fff !important; border: none !important; overflow: hidden; position: relative; }
.growth-hero::after { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -160px; background: var(--hero-glow-1); pointer-events: none; }
.growth-hero .eyebrow { color: rgba(255,255,255,0.62) !important; letter-spacing: 0.16em; }
.growth-hero h2 { color: #fff !important; text-shadow: 0 1px 16px rgba(8,11,30,0.35); }
.growth-hero .muted { color: rgba(255,255,255,0.66) !important; }
.growth-hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.growth-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.growth-hero-actions .secondary-action { background: rgba(255,255,255,0.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.22) !important; }
.growth-hero-actions .secondary-action:hover { background: rgba(255,255,255,0.2) !important; }
.growth-insight {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px; padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff; font-weight: 600; font-size: 13.5px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.growth-insight .ic { width: 16px; height: 16px; color: #ffd479; flex: none; }
.growth-summary-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.growth-summary-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.growth-summary-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255,255,255,.14);
  color: #fff;
}
.growth-summary-icon .ic { width: 19px; height: 19px; }
.growth-summary-card.tone-mastered .growth-summary-icon { background: rgba(255,213,121,.2); color: #ffe29d; }
.growth-summary-card.tone-tricky .growth-summary-icon { background: rgba(116,230,183,.2); color: #9cf0ca; }
.growth-summary-card.tone-streak .growth-summary-icon { background: rgba(255,170,90,.22); color: #ffd09d; }
.growth-summary-copy { min-width: 0; }
.growth-summary-copy small,
.growth-summary-copy strong,
.growth-summary-copy em { display: block; min-width: 0; }
.growth-summary-copy small { color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; }
.growth-summary-copy strong {
  margin-top: 1px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.growth-summary-copy em {
  margin-top: 3px;
  color: rgba(255,255,255,.6);
  font-size: 10.5px;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.growth-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; position: relative; z-index: 1; }
.growth-stat { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 16px 16px 14px; backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 2px; }
.growth-stat-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.14); margin-bottom: 6px; }
.growth-stat-ic .ic { width: 19px; height: 19px; color: #fff; }
.growth-stat.tone-flame .growth-stat-ic { background: rgba(255,170,90,0.28); }
.growth-stat strong { font-size: 30px; font-weight: 800; color: #fff; font-family: var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.growth-stat-label { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9); }
.growth-stat small { font-size: 11px; color: rgba(255,255,255,0.58); }
.growth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.growth-grid.one-column { grid-template-columns: 1fr; }
.growth-grid > section { margin: 0; }

/* heatmap */
.gh-grid { display: flex; gap: 4px; overflow-x: auto; padding: 6px 2px 2px; }
.gh-col { display: flex; flex-direction: column; gap: 4px; }
.gh-cell { width: 14px; height: 14px; border-radius: 4px; flex: none; background: var(--surface-3); }
.gh-cell.gh-empty { background: transparent; }
.heat-legend { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.heat-legend .gh-cell { width: 12px; height: 12px; }

/* mastery curve */
.growth-curve { margin-top: 6px; }
.curve-svg { width: 100%; height: 150px; display: block; }
.curve-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.curve-area { fill: var(--accent-soft); stroke: none; }
.curve-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.curve-foot strong { color: var(--accent-ink); font-size: 14px; }

/* tricky trend */
.tricky-trend { display: flex; flex-direction: column; gap: 14px; }
.tricky-bar { height: 12px; border-radius: 999px; background: var(--red-soft); overflow: hidden; }
.tricky-done { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width var(--t) var(--ease); }
.tricky-legend { display: flex; gap: 12px; }
.tricky-legend > div { flex: 1; background: var(--surface-2); border-radius: 14px; padding: 12px; text-align: center; }
.tricky-legend strong { display: block; font-size: 26px; font-weight: 800; font-family: var(--font-display); }
.tricky-legend strong.ok { color: var(--green); }
.tricky-legend strong.warn { color: var(--red); }
.tricky-legend small { color: var(--muted); font-size: 12px; }

/* timelines */
.growth-timeline { display: flex; flex-direction: column; }
.tl-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline-soft); }
.tl-row:last-child { border-bottom: none; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 4px var(--accent-soft); }
.tl-body { flex: 1; min-width: 0; }
.tl-body strong { display: block; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-body small { color: var(--muted); font-size: 12px; }
.score-badge { font-weight: 800; font-size: 14px; padding: 4px 11px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.score-badge.ok { background: var(--green-soft); color: var(--green-ink); }
.score-badge.mid { background: var(--amber-soft); color: var(--amber-ink, var(--amber)); }
.score-badge.low { background: var(--red-soft); color: var(--red-ink); }
@media (max-width: 900px) {
  .growth-grid { grid-template-columns: 1fr; }
  .growth-summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .growth-stat-row { grid-template-columns: repeat(2, 1fr); }
  .growth-stat strong { font-size: 26px; }
  .growth-hero-head { display: block; }
  .growth-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-top: 14px;
  }
  .growth-hero-actions .secondary-action {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
    white-space: normal;
  }
  .growth-insight {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    border-radius: 13px;
    line-height: 1.5;
  }
  .growth-summary-row { gap: 8px; }
  .growth-summary-card { gap: 8px; padding: 11px 10px; }
  .growth-summary-icon { width: 32px; height: 32px; border-radius: 10px; }
  .growth-summary-icon .ic { width: 17px; height: 17px; }
  .growth-summary-copy strong { font-size: 21px; }
}

@media (max-width: 340px) {
  .growth-summary-icon { width: 30px; height: 30px; }
}

/* v4.6.0: Home growth entry, Words training entry, Listen book audio library */
.home-growth-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background: var(--surface-2);
}
.home-growth-icon,
.listen-card-icon,
.listen-hero-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}
.home-growth-icon .ic,
.listen-card-icon .ic,
.listen-hero-icon .ic { width: 21px; height: 21px; }
.home-growth-copy { min-width: 0; }
.home-growth-copy strong,
.home-growth-copy span { display: block; min-width: 0; }
.home-growth-copy strong { color: var(--ink); font-weight: 750; }
.home-growth-copy span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-growth-entry .secondary-action {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
}

.words-training-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
}
.words-training-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.words-training-head strong { color: var(--ink); font-weight: 750; }
.words-training-head span { color: var(--muted); font-size: 12px; }
.words-training-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.words-training-actions .secondary-action {
  justify-content: flex-start;
  min-height: 42px;
  gap: 8px;
}
.words-training-actions .ic { width: 17px; height: 17px; }

.listen-view {
  display: grid;
  gap: 16px;
}
.listen-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.listen-hero h2 { margin-bottom: 6px; }
.listen-source-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.listen-source-line span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
}
.listen-hero-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--green-soft);
  color: var(--green);
}
.listen-hero-icon .ic { width: 28px; height: 28px; }
.listen-library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.listen-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.listen-library-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 108px;
  text-align: left;
}
button.listen-library-card {
  width: 100%;
  border: 1px solid var(--hairline-soft);
  color: inherit;
  font-family: var(--font);
}
button.listen-library-card.active {
  border-color: var(--accent-edge);
  background: var(--accent-soft-2);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.listen-library-card div:last-child { min-width: 0; }
.listen-library-card span,
.listen-library-card strong,
.listen-library-card small { display: block; }
.listen-library-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.listen-library-card strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}
.listen-library-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.listen-level-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.listen-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 12px 0;
  padding: 0 14px;
  border: 1px solid var(--hairline-soft);
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--muted);
}
.listen-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 750;
}
.listen-search input::placeholder { color: var(--muted); font-weight: 650; }
.listen-level-pill {
  min-height: 62px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font);
  cursor: pointer;
  display: grid;
  gap: 2px;
  place-items: center;
}
.listen-level-pill.active {
  border-color: var(--accent-edge);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.listen-level-pill span { font-weight: 800; }
.listen-level-pill small { color: var(--muted); font-size: 11px; }
.listen-group-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.listen-group-pill {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
}
.listen-group-pill.active {
  border-color: var(--accent-edge);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.listen-group-pill strong {
  font-size: 13px;
  line-height: 1.1;
}
.listen-group-pill small {
  color: var(--muted);
  font-size: 11px;
}
.listen-player-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 16px;
  align-items: center;
  border-color: var(--accent-edge) !important;
}
.listen-player-copy { min-width: 0; }
.listen-player-copy h3 {
  margin: 4px 0 4px;
  overflow-wrap: anywhere;
}
.listen-player-card audio {
  width: 100%;
  min-width: 0;
}
.listen-list-card .section-head { margin-bottom: 12px; }
.book-audio-list {
  display: grid;
  gap: 8px;
}
.book-audio-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 42px;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: 16px;
  background: var(--surface-2);
}
.book-audio-row.active {
  border-color: var(--accent-edge);
  background: var(--accent-soft-2);
}
.book-audio-play,
.book-audio-favorite {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hairline-soft);
  border-radius: 13px;
  background: var(--surface);
  color: var(--accent);
}
.book-audio-play .ic,
.book-audio-favorite .ic {
  width: 18px;
  height: 18px;
}
.book-audio-row.active .book-audio-play {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.book-audio-favorite.active {
  background: var(--gold-soft);
  color: var(--gold-ink);
  border-color: rgba(199, 154, 59, 0.28);
}
.book-audio-favorite.active .ic {
  fill: currentColor;
}
.book-audio-main {
  min-width: 0;
}
.book-audio-main strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-audio-main small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-audio-track {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.listen-empty-inner {
  padding: 26px 12px;
  text-align: center;
}
.listen-empty-card .empty-state-card { text-align: center; }
.listen-empty-card .empty-state-card .icon {
  display: inline-grid;
  place-items: center;
  margin-bottom: 10px;
  color: var(--accent);
}

@media (max-width: 900px) {
  .listen-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listen-level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .listen-player-card { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .home-growth-entry {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 10px;
    gap: 10px;
  }
  .home-growth-icon { width: 38px; height: 38px; border-radius: 12px; }
  .home-growth-copy span { font-size: 11px; }
  .home-growth-entry .secondary-action {
    min-height: 34px;
    padding: 0 12px;
  }
  .listen-hero {
    align-items: flex-start;
  }
  .listen-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }
  .listen-library-grid,
  .listen-level-grid { grid-template-columns: 1fr; }
  .listen-library-card {
    min-height: 0;
    padding: 14px !important;
  }
  .listen-group-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .listen-group-pill { min-width: 0; }
  
  .book-audio-track {
    grid-column: 2 / 4;
    justify-self: start;
  }
  .book-audio-main strong,
  .book-audio-main small {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .book-audio-main small { -webkit-line-clamp: 1; }
}

/* ════════════ TEACHER REPORTS ════════════ */
.teacher-brief-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.completion-ring { position: relative; width: 84px; height: 84px; border-radius: 50%; flex: none;
  background: var(--surface-3);
  background: conic-gradient(var(--accent) calc(var(--pct, 0) * 3.6deg), var(--surface-3) 0); display: grid; place-items: center; }
.completion-ring span { width: 62px; height: 62px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.completion-ring.big { width: 108px; height: 108px; }
.completion-ring.big span { width: 82px; height: 82px; font-size: 24px; }
.completion-meta { flex: 1; min-width: 180px; }
.completion-meta h3 { margin: 2px 0 4px; }
.brief-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hardword-table .rank-cell { font-weight: 800; color: var(--accent-ink); font-family: var(--font-display); width: 34px; }
.hardword-table td { vertical-align: middle; }
.hw-bar { display: inline-block; vertical-align: middle; width: 84px; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-right: 8px; }
.hw-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--red)); border-radius: 999px; }

.report-overlay { position: fixed; inset: 0; background: rgba(10,12,20,0.55); z-index: 1200; display: none; overflow: auto; backdrop-filter: blur(4px); }
body.brief-open { overflow: hidden; }
body.brief-open .report-overlay { display: block; }
.report-overlay-bar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 20px; background: var(--glass-drawer); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--hairline); }
.report-overlay-bar > div { display: flex; gap: 8px; }
.report-overlay-body { max-width: 880px; margin: 24px auto; padding: 0 16px 64px; }
.report-sheet { background: var(--surface); border-radius: var(--r); padding: 36px; box-shadow: var(--shadow-lg); }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--accent); padding-bottom: 18px; margin-bottom: 20px; }
.report-head h1 { font-size: 27px; margin: 4px 0 6px; font-family: var(--font-display); letter-spacing: -0.02em; }
.report-head p { color: var(--muted); font-size: 13px; }
.report-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.report-metric { background: var(--surface-2); border-radius: 14px; padding: 14px 16px; }
.report-metric span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.report-metric strong { font-size: 24px; font-weight: 800; font-family: var(--font-display); color: var(--ink); }
.report-section { margin-top: 22px; }
.report-section h2 { font-size: 16px; margin-bottom: 12px; }
.report-foot { margin-top: 22px; color: var(--muted); font-size: 12px; text-align: center; }
@media (max-width: 560px) { .report-metrics { grid-template-columns: repeat(2, 1fr); } .report-sheet { padding: 22px; } }

/* ════════════ ADMIN CONSOLE ════════════ */
.admin-console { display: flex; flex-direction: column; gap: 16px; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-search { min-width: 240px; max-width: 320px; }
.admin-search input { width: 100%; }
.role-badge, .status-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.01em; }
.role-badge.role-admin { background: var(--purple-soft); color: var(--purple); }
.role-badge.role-teacher { background: var(--accent-soft); color: var(--accent-ink); }
.role-badge.role-student { background: var(--green-soft); color: var(--green-ink); }
.status-badge.st-ok { background: var(--green-soft); color: var(--green-ink); }
.status-badge.st-warn { background: var(--amber-soft); color: var(--amber-ink, var(--amber)); }
.status-badge.st-bad { background: var(--red-soft); color: var(--red-ink); }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); margin-bottom: 8px; }
.admin-row strong { display: block; }
.admin-row p { color: var(--muted); font-size: 12px; margin-top: 2px; }
.admin-account-wrap { min-width: 0; }
.admin-account-groups { display: flex; flex-direction: column; gap: 18px; }
.admin-account-group { min-width: 0; }
.admin-account-group-head { margin-bottom: 10px; }
.admin-account-group-head p { margin-top: 3px; font-size: 12px; }
.admin-account-empty { padding: 14px 16px; border: 1px dashed var(--hairline); border-radius: var(--r-sm); color: var(--muted); background: var(--surface-2); font-size: 13px; }
.account-table code, .data-table code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; background: var(--surface-2); padding: 2px 7px; border-radius: 6px; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } .admin-search { max-width: none; } }

/* ════════════ v4.7.1 Home simplification + Growth share report ════════════ */
body[data-view="today"] .main > .hero-grid,
body[data-view="today"] .main > .metric-grid {
  display: none !important;
}

body[data-view="today"] #view-today {
  max-width: 1040px;
  margin: 0 auto;
}

body[data-view="today"] .today-focus-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

.student-home {
  display: grid;
  gap: 14px;
}

.home-command-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) auto;
  gap: 14px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(246,249,252,0.82)),
    var(--surface);
}

.home-command-copy {
  min-width: 0;
}

.home-command-copy h2 {
  margin: 2px 0 6px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
}

.home-command-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 13px;
}

.home-command-progress {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  background: var(--surface-2);
}

.home-command-progress strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.home-command-progress span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.home-command-actions {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.home-command-actions .primary-action,
.home-command-actions .secondary-action {
  min-height: 42px;
  white-space: nowrap;
}

.home-command-actions .primary-action {
  padding: 0 18px;
}

.home-progress-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-progress-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px 11px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: none;
}

.home-progress-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}

.home-progress-icon .ic {
  width: 19px;
  height: 19px;
}

.home-progress-card > div {
  min-width: 0;
}

.home-progress-card strong,
.home-progress-card b,
.home-progress-card small {
  display: block;
  min-width: 0;
}

.home-progress-card strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.home-progress-card b {
  margin-top: 2px;
  color: var(--ink);
  font-size: 23px;
  line-height: 1.05;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

.home-progress-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-progress-card .daily-mini-progress {
  grid-column: 1 / -1;
}

.home-progress-card.tone-blue .home-progress-icon { background: var(--accent-soft); color: var(--accent); }
.home-progress-card.tone-purple .home-progress-icon { background: var(--purple-soft); color: var(--purple); }
.home-progress-card.tone-green .home-progress-icon { background: var(--green-soft); color: var(--green); }
.home-progress-card.empty { opacity: 0.82; }

.home-action-list {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background: var(--surface);
}

.home-scroll-list {
  display: grid;
  gap: 8px;
  max-height: 430px;
  overflow: auto;
  padding-right: 2px;
}

.home-scroll-list .feedback {
  margin: 0;
}

.home-shortcut-strip {
  display: grid;
  gap: 10px;
}

.home-shortcut-strip .home-growth-entry,
.home-shortcut-strip .assignment-shortcut-row {
  margin-top: 0;
}

.home-shortcut-strip .assignment-shortcut-row {
  border: 1px solid var(--hairline-soft) !important;
  background: var(--surface-2) !important;
}

.home-greeting-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(246,249,252,0.86)),
    var(--surface);
}

.home-hello-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(36,87,166,0.18);
}

.home-hello-copy {
  min-width: 0;
}

.home-hello-copy span,
.home-hello-copy strong,
.home-hello-copy small {
  display: block;
  min-width: 0;
}

.home-hello-copy span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-hello-copy strong {
  margin-top: 1px;
  color: var(--ink);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.08;
  font-family: var(--font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-hello-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  /* F8 止血批: 桌面也允许换行，最多 2 行，不再把“点击作业卡片开始”截成“点…” */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-greeting-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.home-greeting-tools .home-level-chip {
  min-height: 42px;
  padding: 7px 9px;
  border-radius: 12px;
  grid-template-columns: auto auto;
  column-gap: 8px;
}

.home-greeting-tools .home-level-chip .hlc-k,
.home-greeting-tools .home-level-chip .hlc-sub {
  display: none;
}

.home-greeting-tools .home-level-chip .hlc-v {
  font-size: 17px;
}

.home-greeting-tools .home-level-chip .hlc-go {
  width: 28px;
  height: 28px;
}

.home-greeting-tools .secondary-action {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  white-space: nowrap;
}

.daily-task-row.clickable,
.assignment-history-row.clickable {
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.daily-task-row.clickable:hover,
.assignment-history-row.clickable:hover {
  border-color: var(--accent-edge) !important;
  box-shadow: var(--shadow-sm);
}

.daily-task-row.clickable:focus-visible,
.assignment-history-row.clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.assignment-open-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

.assignment-type-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 12px;
}

.assignment-type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.assignment-type-pill.tone-blue { background: var(--accent-soft); color: var(--accent-ink); border-color: rgba(36,87,166,0.16); }
.assignment-type-pill.tone-purple { background: var(--purple-soft); color: var(--purple); border-color: rgba(124,92,214,0.16); }
.assignment-type-pill.tone-green { background: var(--green-soft); color: var(--green-ink); border-color: rgba(26,156,82,0.16); }
.assignment-type-pill.tone-amber { background: var(--amber-soft); color: var(--amber-ink, var(--amber)); border-color: rgba(217,138,0,0.18); }

.assignment-type-groups {
  display: grid;
  gap: 12px;
}

.assignment-type-group {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background: var(--surface-2);
}

.assignment-type-group.tone-blue { background: linear-gradient(135deg, var(--accent-soft), var(--surface)); }
.assignment-type-group.tone-purple { background: linear-gradient(135deg, var(--purple-soft), var(--surface)); }
.assignment-type-group.tone-green { background: linear-gradient(135deg, var(--green-soft), var(--surface)); }
.assignment-type-group.tone-amber { background: linear-gradient(135deg, var(--amber-soft), var(--surface)); }

.assignment-type-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.assignment-type-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--accent);
  border: 1px solid var(--hairline-soft);
}

.assignment-type-icon .ic {
  width: 18px;
  height: 18px;
}

.assignment-type-group.tone-purple .assignment-type-icon { color: var(--purple); }
.assignment-type-group.tone-green .assignment-type-icon { color: var(--green); }
.assignment-type-group.tone-amber .assignment-type-icon { color: var(--amber-ink, var(--amber)); }

.assignment-type-head div {
  min-width: 0;
}

.assignment-type-head strong,
.assignment-type-head small {
  display: block;
  min-width: 0;
}

.assignment-type-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 820;
}

.assignment-type-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.assignment-type-head b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
}

.assignment-type-list {
  display: grid;
  gap: 8px;
}

.assignment-type-groups.home {
  gap: 10px;
}

.assignment-type-groups.home .assignment-type-group {
  padding: 10px;
  border-radius: 13px;
}

.assignment-type-groups.home .assignment-type-head {
  margin-bottom: 8px;
}

.assignment-type-groups.home .assignment-type-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

@media (max-width: 900px) {
  .home-command-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-command-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  body[data-view="today"] .main {
    gap: 12px !important;
  }
  .student-home {
    gap: 11px;
  }
  .today-plan-card {
    padding: 14px !important;
  }
  .home-greeting-strip {
    border-radius: 13px;
  }
  .home-hello-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 17px;
  }
  .home-hello-copy strong {
    font-size: 20px;
  }
  .home-hello-copy small {
    font-size: 11px;
  }
  .home-greeting-tools {
    grid-template-columns: auto auto auto;
  }
  
  .home-greeting-tools .home-level-chip .hlc-v {
    font-size: 15px;
  }
  .home-greeting-tools .home-level-chip .hlc-go {
    width: 24px;
    height: 24px;
  }
  
  .home-greeting-tools .daily-refresh-action span {
    display: none;
  }
  .today-plan-head {
    gap: 10px;
    margin-bottom: 10px;
  }
  .today-plan-head h2 {
    font-size: 18px !important;
    margin: 0;
  }
  .home-command-panel {
    padding: 13px;
    gap: 11px;
    border-radius: 13px;
  }
  .home-command-copy h2 {
    font-size: 24px;
  }
  .home-command-copy p {
    font-size: 12px;
  }
  .home-command-progress {
    padding: 11px;
  }
  .home-command-progress strong {
    font-size: 24px;
  }
  .home-command-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
  }
  .home-command-actions .primary-action,
  .home-command-actions .secondary-action {
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .home-command-actions .daily-refresh-action span {
    display: none;
  }
  
  
  .home-progress-icon {
    display: none;
  }
  
  
  .home-progress-card small {
    font-size: 10.5px;
  }
  .home-action-list {
    padding: 11px;
  }
  .home-scroll-list {
    max-height: 390px;
  }
  .assignment-type-summary {
    gap: 6px;
    margin: 7px 0 10px;
  }
  .assignment-type-pill {
    min-height: 26px;
    padding: 0 9px;
    font-size: 11px;
  }
  .assignment-type-group {
    padding: 10px;
  }
  .assignment-type-head {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .assignment-type-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .assignment-type-head strong {
    font-size: 13px;
  }
  .assignment-type-head small,
  .assignment-type-head b {
    font-size: 11px;
  }
}

@media (max-width: 390px) {
  .home-progress-cards {
    grid-template-columns: 1fr;
  }
}

/* ════════════ PRINT (student growth report + teacher brief) ════════════ */
@media print {
  .sidebar, .topbar, .mobile-tabbar, .ambient, .global-search-panel,
  .hero-grid, .metric-grid, .no-print, .settings-drawer, .settings-scrim,
  .growth-hero-actions, .daily-refresh-action { display: none !important; }
  body, .app-shell, .main { background: #fff !important; display: block !important; }
  .main { padding: 0 !important; margin: 0 !important; }
  .view:not(.active) { display: none !important; }
  .surface-card, .growth-stat, .metric-card { box-shadow: none !important; border: 1px solid #e2e2ea !important; break-inside: avoid; }
  .growth-hero, .report-hero { background: #f4f5fb !important; color: #1c1c28 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .growth-hero h2, .growth-hero .eyebrow, .growth-hero .muted, .growth-stat strong, .growth-stat-label, .growth-stat small { color: #1c1c28 !important; text-shadow: none !important; }
  .growth-stat { background: #fff !important; border: 1px solid #e2e2ea !important; }
  .gh-cell, .curve-area, .curve-line, .tricky-done, .score-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .growth-grid { grid-template-columns: 1fr 1fr !important; }
  /* teacher brief overlay → print only the sheet */
  body.brief-open .app-shell { display: none !important; }
  body.brief-open .report-overlay { display: block !important; position: static !important; background: #fff !important; backdrop-filter: none !important; overflow: visible !important; }
  .report-overlay-bar { display: none !important; }
  .report-overlay-body { margin: 0 !important; max-width: none !important; padding: 0 !important; }
  .report-sheet { box-shadow: none !important; padding: 0 !important; border: none !important; }
  .completion-ring { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .data-table { font-size: 11px; }
}

/* ════════════ REDUCE MOTION ════════════ */
html.cv-reduce-motion .primary-action::after,
html.cv-reduce-motion .hero-panel::before,
html.cv-reduce-motion .hero-panel::after { transition: none !important; animation: none !important; }

/* ==== refine.css ==== */
/* ═══════════════════════════════════════════════════════════════════
   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: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 16px 0;
}
.cv-rail-card + .cv-rail-card { border-top: 1px solid var(--hairline); }
.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: transparent;
}
.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: transparent;
}
.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: var(--cv-topbar-height, 80px) !important;
  z-index: 18 !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: var(--surface) !important;
}
@media (max-width: 900px), (max-height: 720px) {
  /* A tall player must not cover tracks or controls on compact screens. */
  #view-listen .listen-player-card { position: static !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-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 #view-reading .reading-task-list,
  body.cv-read-detail #view-reading .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: grid !important; min-width: 0; gap: 6px; }
  .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-block .essay-version-grid,
.writing-subview-card .essay-version-grid { grid-template-columns: minmax(0, 1fr); }
.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; }

.assignment-detail-mask { z-index: 140 !important; }
.assignment-detail-card {
  display: flex; flex-direction: column; width: min(880px, 100%); min-width: 0;
  max-height: calc(100dvh - 32px); overflow: hidden;
  background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); border-radius: 8px;
}
.assignment-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--hairline); flex: 0 0 auto;
}
.assignment-detail-head > div { min-width: 0; }
.assignment-detail-head h2 { margin: 4px 0 0; font-size: 22px; line-height: 1.4; overflow-wrap: anywhere; }
.assignment-detail-head .icon-button { flex: 0 0 44px; width: 44px; height: 44px; }
.assignment-detail-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 28px; }
.assignment-detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.assignment-detail-meta dt { font-size: 13px; color: var(--muted); }
.assignment-detail-meta dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.assignment-detail-notice { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 13px; margin: 20px 0 0; }
.assignment-detail-notice .ic-sm { flex-shrink: 0; }
.assignment-detail-section { padding-top: 24px; }
.assignment-detail-section + .assignment-detail-section { margin-top: 24px; border-top: 1px solid var(--hairline); }
.assignment-detail-section h3 { margin: 0 0 12px; font-size: 17px; }
.assignment-detail-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; margin: 8px 0; }
.assignment-detail-words, .assignment-detail-results { margin: 0; padding: 0; list-style: none; }
.assignment-detail-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.assignment-detail-words li { padding: 12px 0; border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }
.assignment-detail-words strong, .assignment-detail-words span { display: block; }
.assignment-detail-words span { margin-top: 4px; color: var(--muted); font-size: 14px; }
.assignment-detail-results li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.assignment-detail-results li > div { min-width: 0; overflow-wrap: anywhere; }
.assignment-detail-results small { display: block; color: var(--muted); margin-top: 6px; white-space: pre-wrap; }
.assignment-detail-results li > span { flex-shrink: 0; color: var(--accent-ink, var(--accent)); font-weight: 700; }
.assignment-detail-card .secondary-action { min-height: 44px; width: auto; flex-shrink: 0; }
@media (max-width: 600px) {
  .assignment-detail-mask.modal-mask { padding: 8px !important; }
  .assignment-detail-card { max-height: calc(100dvh - 16px); }
  .assignment-detail-head { padding: 16px; gap: 8px; }
  .assignment-detail-head h2 { font-size: 19px; }
  .assignment-detail-scroll { padding: 16px 16px max(24px, env(safe-area-inset-bottom)); }
  .assignment-detail-meta { gap: 14px; }
  .assignment-detail-words { grid-template-columns: minmax(0, 1fr); }
  .assignment-detail-results li { flex-wrap: wrap; gap: 10px; }
  .assignment-detail-results .secondary-action { max-width: 100%; }
}

.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: 18px; }
.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-head-meta .secondary-action { width: auto !important; min-height: 38px; padding: 0 13px; }
.usage-cost-overview {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(0, 1.55fr);
  gap: 24px;
  align-items: stretch;
  padding: 2px 0 18px;
  border-bottom: 1px solid var(--hairline);
}
.usage-cost-primary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.usage-cost-primary > span,
.usage-quick-metric > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.usage-cost-primary > strong {
  margin: 5px 0 4px;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.usage-cost-primary > small,
.usage-quick-metric > small { color: var(--muted); line-height: 1.4; }
.usage-cost-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.usage-quick-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 18px;
  border-left: 1px solid var(--hairline);
}
.usage-quick-metric > strong {
  margin: 5px 0 3px;
  color: var(--ink);
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.usage-note-disclosure {
  color: var(--muted);
  font-size: 12px;
}
.usage-note-disclosure > summary,
.usage-disclosure > summary {
  list-style: none;
  cursor: pointer;
}
.usage-note-disclosure > summary::-webkit-details-marker,
.usage-disclosure > summary::-webkit-details-marker { display: none; }
.usage-note-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}
.usage-note-disclosure > summary > span { color: var(--ink); font-weight: 700; white-space: nowrap; }
.usage-note-disclosure > summary > small { min-width: 0; flex: 1; }
.usage-note-body {
  display: grid;
  gap: 4px;
  padding: 10px 12px 2px;
  line-height: 1.45;
}
.usage-note-body strong { color: var(--ink); }
.usage-note-body small { color: var(--muted); }
.usage-resource-overview > .section-head { margin-bottom: 6px; }
.usage-resource-overview .section-head h3 { margin-bottom: 2px; }
.usage-resource-overview .section-head p { margin: 0; font-size: 12px; }
.usage-resource-summary-list { border-top: 1px solid var(--hairline); }
.usage-resource-summary-row {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(120px, auto) auto;
  gap: 16px;
  align-items: center;
  min-height: 64px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.usage-resource-name,
.usage-resource-cost { min-width: 0; }
.usage-resource-name strong,
.usage-resource-cost strong { display: block; color: var(--ink); font-size: 13px; line-height: 1.35; }
.usage-resource-name small,
.usage-resource-cost small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.usage-resource-cost { text-align: right; }
.usage-resource-cost strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.usage-resource-summary-row > .status-badge { justify-self: end; white-space: nowrap; }
.usage-pending-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.usage-pending-note .ic { flex: none; margin-top: 1px; }
.usage-disclosure {
  border-top: 1px solid var(--hairline);
}
.usage-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 8px 2px;
}
.usage-disclosure > summary > span { display: grid; gap: 2px; min-width: 0; }
.usage-disclosure > summary strong { color: var(--ink); font-size: 14px; }
.usage-disclosure > summary small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.usage-disclosure-chevron { flex: none; transition: transform .18s ease; }
.usage-disclosure[open] > summary .usage-disclosure-chevron,
.usage-note-disclosure[open] > summary .usage-disclosure-chevron { transform: rotate(180deg); }
.usage-disclosure-body { padding: 8px 0 2px; }
.usage-insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
  gap: 28px;
  align-items: start;
}
.usage-resource-panel { min-width: 0; }
.usage-config-note { margin: 0 0 10px; font-size: 12px; }
.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-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-cost-overview { grid-template-columns: 1fr; gap: 14px; }
  .usage-quick-metric:first-child { border-left: 0; padding-left: 0; }
  .usage-insights-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 700px) {
  .usage-monitor-card { gap: 14px; }
  .usage-monitor-head { gap: 8px; }
  .usage-head-meta { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .usage-cost-overview { padding-bottom: 14px; }
  .usage-cost-primary > strong { font-size: 30px; }
  .usage-cost-quick { gap: 0; }
  .usage-quick-metric { padding: 6px 10px; }
  .usage-quick-metric:first-child { padding-left: 0; }
  .usage-quick-metric > strong { font-size: clamp(15px, 4.2vw, 19px); }
  .usage-note-disclosure > summary { align-items: flex-start; flex-wrap: wrap; }
  .usage-note-disclosure > summary > small { flex-basis: calc(100% - 30px); margin-left: 24px; }
  .usage-note-disclosure > summary .usage-disclosure-chevron { margin-left: auto; }
  .usage-resource-summary-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 11px 0;
  }
  .usage-resource-cost { align-self: start; }
  .usage-resource-summary-row > .status-badge { grid-column: 1 / -1; justify-self: start; }
  .usage-disclosure > summary { min-height: 56px; }
  .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; }
}

@media (max-width: 380px) {
  .usage-cost-primary > small { font-size: 11px; }
  .usage-quick-metric { padding-inline: 7px; }
  .usage-quick-metric > span,
  .usage-quick-metric > small { font-size: 10.5px; }
  .usage-disclosure > summary small { font-size: 11px; }
}

/* 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;
}

.police-record-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.police-record-icon {
  display: block;
  width: 14px;
  height: 15px;
  object-fit: contain;
  flex: none;
}

.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 {
  /* 5.10.3-brand-ink：原来写死浅粉 #fbdbe3，暗色模式下浅粉底配浅粉字几乎看不清；改为随明暗模式混色 */
  background: color-mix(in srgb, var(--cv-rose) 16%, var(--surface)) !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;
}

/* Vocabulary homework: two real counters, no duplicate progress bar or step axis. */
#view-study .cv-assignment-sheet { align-self: start; }
#view-study .assignment-study-panel {
  gap: 16px;
  min-width: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}
#view-study .assignment-study-panel h2 {
  margin: -8px 0 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.assignment-study-meta {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.assignment-study-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.assignment-study-counts dt { font-size: 14px; font-weight: 500; }
.assignment-study-counts dd {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 4px 0 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.assignment-study-counts strong { font-size: 22px; font-weight: 700; }
.assignment-study-counts dd span { font-size: 15px; color: var(--muted); }
.assignment-study-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.assignment-study-actions,
.assignment-study-extra-actions { display: grid; gap: 8px; min-width: 0; }
#view-study .assignment-study-panel button {
  min-height: 44px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.assignment-study-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#view-study .assignment-study-links button {
  padding: 8px 0;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  transform: none !important;
}
.assignment-study-options > summary {
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.assignment-study-options-body { display: grid; gap: 12px; padding-top: 4px; }
.assignment-study-panel .assignment-tricky-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.assignment-study-panel .assignment-tricky-field small { font-size: 12px; font-weight: 400; color: var(--muted); }
.assignment-study-panel .assignment-tricky-field input {
  margin: 0;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  font-size: 16px;
}
.assignment-study-panel .assignment-study-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.assignment-study-records { display: grid; gap: 8px; margin: 0; }
.assignment-study-records > div { display: flex; justify-content: space-between; gap: 12px; }
.assignment-study-records dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
  #view-study .assignment-study-panel h2 { margin-top: 0; font-size: 20px; }
}

/* Quiz result review links retain their existing presentation. */

.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-card > :is(.eyebrow, #aqPreviewTitle) { box-sizing: border-box; padding-inline-end: 52px; overflow-wrap: anywhere; }
.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 ============ */

/* Unit choices respond to their own width, including the narrower Dot tool pane.
   Name and count have separate rows so long course labels keep their full text. */
.unit-pills {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  grid-auto-rows: minmax(max-content, auto);
}
.unit-pill {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 16px;
}
.unit-pill > .unit-pill-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  align-content: center;
}
.unit-pill .unit-pill-name {
  display: block;
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.unit-pill .unit-pill-count { white-space: nowrap; line-height: 1.4; }
.unit-pill > input { width: 16px; height: 16px; min-width: 16px; margin: 0; }

/* 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; }
/* v12: mark 已全局隐藏，三列模板会让 copy 落进 auto 列、tools 被 1fr 挤窄后向左溢出盖住 MEMBER 徽章。
   统一改两列：copy 弹性、tools 按内容宽度（与下方移动端 3683 的重排一致，移动端 !important 规则优先、不受影响）。 */
.home-greeting-strip { grid-template-columns: minmax(0, 1fr) auto; }
.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; }
/* 5.10.3-brand-ink：弱句「练这句」原来的橙色渐变被皮肤主按钮规则盖住，弱句按钮和普通按钮一样是主色。
   改为哑光暖橙实色（无渐变、无阴影），用 ID 选择器压过皮肤规则；白字对比度 ≥ 4.5:1。 */
html #view-reading .primary-action.reading-weak-cta {
  background: color-mix(in srgb, var(--joy-ink) 86%, #000) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}
html #view-reading .primary-action.reading-weak-cta:not(:disabled):hover { background: color-mix(in srgb, var(--joy-ink) 74%, #000) !important; }
html.cv-dark #view-reading .primary-action.reading-weak-cta { background: var(--joy) !important; color: #351a0b !important; }
html.cv-dark #view-reading .primary-action.reading-weak-cta:not(:disabled):hover { background: color-mix(in srgb, var(--joy) 86%, #fff) !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 / 5.4.52 quiet candidate
   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: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 8px 0 10px !important;
  box-shadow: none !important;
  overflow: visible;
}
.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: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
.student-home .home-check-row + .home-check-row,
.student-home .daily-checkin-card + .daily-checkin-card { border-top: 1px solid var(--hairline) !important; }
.student-home .daily-checkin-section .daily-checkin-card.done { background: transparent !important; padding: 12px 4px !important; }
.student-home .dc-subtask {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 0;
}
.student-home .dc-subtask + .dc-subtask { border-top: 1px solid var(--hairline-soft); }
.student-home .dc-subtask-title { white-space: normal; overflow-wrap: anywhere; }
.student-home .daily-section-head { padding-inline: 4px; }
.student-home .daily-section-head > div { min-width: 0; }
.student-home .daily-section-head > span { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.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: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !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 2px;
  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 2px 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: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-inline: 2px;
}
#view-assignments .daily-checkin-record-card + .daily-checkin-record-card { border-top: 1px solid var(--hairline) !important; }

/* Listening: unframed library and native disclosure; retain the player 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: 0 !important;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}
#view-listen .listen-mode-card {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 7px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
}
#view-listen .listen-mode-card.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent-edge) !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
}
#view-listen .listen-mode-card .listen-card-icon { width: 24px !important; height: 24px !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !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 details#listenCatalogOptions {
  display: block !important;
  min-width: 0;
  max-width: 100%;
  padding: 0 !important;
}
#view-listen .listen-catalog-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-height: 44px;
  padding: 8px 2px;
  color: var(--ink);
  font-size: 14px;
  list-style: none;
  cursor: pointer;
}
#view-listen .listen-catalog-summary::-webkit-details-marker { display: none; }
#view-listen .listen-catalog-summary > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#view-listen .listen-catalog-summary > :last-child { color: var(--accent-ink); }
#view-listen #listenCatalogOptions[open] > .listen-catalog-summary { border-bottom: 1px solid var(--hairline); }
#view-listen #listenCatalogOptions > .listen-level-grid,
#view-listen #listenCatalogOptions > .listen-group-grid { padding-block: 8px; min-width: 0; }
#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 { padding: 12px 0 !important; border: 0 !important; border-radius: 0 !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: preserve the layout and all sentence actions; remove nested shells. */
#view-reading > .reading-shell,
#view-reading > .reading-focused,
#view-reading .reading-catalog {
  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: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}
#view-reading .reading-mode-tabs button {
  min-height: 52px !important;
  padding: 8px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
}
#view-reading .reading-mode-tabs button.active { background: var(--accent-soft) !important; border-color: var(--accent-edge) !important; color: var(--accent-ink) !important; box-shadow: none !important; }
#view-reading .reading-task-card { border: 1px solid transparent !important; border-bottom-color: var(--hairline) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
#view-reading .reading-task-card:hover { transform: none !important; }
#view-reading .reading-card,
#view-reading .reading-full-card,
#view-reading .reading-history-panel,
#view-reading .reading-history-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-inline: 2px !important;
}
#view-reading .reading-full-card,
#view-reading .reading-history-card + .reading-history-card { border-top: 1px solid var(--hairline) !important; }
#view-reading .reading-history-metrics article { border-radius: 0 !important; background: transparent !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: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}
#view-writing .writing-mode-tabs button {
  min-height: 48px !important;
  padding: 8px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
}
#view-writing .writing-mode-tabs button.active { background: var(--accent-soft) !important; border-color: var(--accent-edge) !important; color: var(--accent-ink) !important; box-shadow: none !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; }
  .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: 0 !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 2px; gap: 8px; }
  #view-assignments .assignment-section-toggle small { display: none; }
  #view-assignments .assignment-collapsible-body { padding: 0 2px 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 0 !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: 100% !important;
    max-width: 100% !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; }
#view-reading .reading-playback-options {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#view-reading .reading-playback-options > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 2px;
  color: var(--accent-ink);
  font-size: 14px;
  list-style: none;
  cursor: pointer;
}
#view-reading .reading-playback-options > summary::-webkit-details-marker { display: none; }
#view-reading .reading-playback-options > summary > .ic:last-child { margin-left: auto; }
#view-reading .reading-playback-options[open] > summary { border-bottom: 1px solid var(--hairline); }
#view-reading .reading-playback-options fieldset { min-width: 0; margin: 8px 0 0; padding: 0; border: 0; }
#view-reading .reading-playback-options .segmented-control { max-width: 100%; flex-wrap: wrap; box-shadow: none; }
#view-reading .reading-audio-source .audio-feedback,
#view-reading .reading-audio-source .feedback { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* 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;
}

/* Preserve the learning-card controls exactly; quiet only the other pages. */
body:is([data-view="study"], [data-view="swipe"], [data-view="quiz"]) .primary-action:not(.home-main-cta-checkin) {
  box-shadow: var(--shadow-accent) !important;
}

html.cv-dark body:is([data-view="study"], [data-view="swipe"], [data-view="quiz"]) .primary-action:not(.home-main-cta-checkin) {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}
body:not([data-view="words"]):not([data-view="study"]):not([data-view="swipe"]):not([data-view="quiz"]) .primary-action:not(.home-main-cta-checkin) {
  box-shadow: none !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: 0 !important;
  background: transparent !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: 1px solid transparent !important;
  border-bottom-color: var(--hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#view-listen .book-audio-row.active {
  background: var(--green-soft) !important;
  border-color: var(--green) !important;
  box-shadow: none !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: 0 !important;
  background: transparent !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;
  background: var(--accent-soft) !important;
  box-shadow: none !important;
}
#view-reading .sentence-row { border-radius: 0 !important; }
#view-reading .sentence-row.is-weak { background: var(--joy-soft) !important; margin-inline: 0; }

/* 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-dashboard .student-detail-panel,
.teacher-panel > .surface-card,
.teacher-panel.surface-card,
.admin-console > .surface-card,
.admin-panel > .surface-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-inline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

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

.teacher-class-switcher > div:first-child p { max-width: 58ch; }
.teacher-class-picker select {
  min-width: 0;
  max-width: 100%;
  /* WebKit otherwise counts the native option text as page overflow. */
  overflow: clip;
}

.teacher-tabs,
.admin-tabs {
  border: 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-inline: 0 !important;
  box-shadow: none !important;
}

.teacher-tabs button,
.admin-tabs button { border: 1px solid transparent !important; border-radius: 4px !important; }

.teacher-tabs button.active,
.admin-tabs button.active { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border-color: var(--accent-edge) !important; box-shadow: none !important; }
.admin-tabs button.active .admin-tab-count { background: var(--amber-soft); color: var(--amber-ink); }

.teacher-dashboard .dashboard-metrics {
  gap: 0 !important;
  border: 0;
  border-block: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}

.teacher-dashboard .dashboard-metrics .metric-card {
  min-width: 0;
  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;
  border: 0;
  border-block: 1px solid var(--hairline);
  border-radius: 0;
}
.admin-console .admin-hero { color: var(--ink) !important; }
.admin-console .admin-hero::after { content: none; }
.admin-console .admin-hero h2,
.admin-console .admin-hero .growth-stat strong { color: var(--ink) !important; text-shadow: none !important; }
.admin-console .admin-hero .eyebrow,
.admin-console .admin-hero .muted,
.admin-console .admin-hero .growth-stat-label,
.admin-console .admin-hero .growth-stat small { color: var(--muted) !important; }
.admin-console .admin-hero .growth-hero-actions .secondary-action { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; }
.admin-console .admin-hero .growth-stat-ic { background: transparent; border-radius: 0; }
.admin-console .admin-hero .growth-stat-ic .ic { color: var(--accent-ink); }

.admin-hero .growth-stat {
  min-width: 0;
  min-height: 122px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none;
}

.admin-hero .growth-stat + .growth-stat { border-left: 1px solid var(--hairline-soft) !important; }

.admin-account-group { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.admin-account-group-head,
.admin-account-group-body { padding-inline: 0; }

.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 { background: transparent !important; }
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 var(--hairline-soft) !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: 0 !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; }
}

/* v11: 刷卡>「精学这个词」插曲 桌面端紧凑适配——覆盖层仅约 440×552，直接塞桌面词卡
   （82px 大标题 + 30px 内边距）必然溢出；此处把词卡压缩到覆盖层尺寸内。
   「返回词卡」sticky 常驻顶部，滚动精学内容时始终一眼可见、可点回。手机端（<=560px）
   走 flashcardHtmlMobile，不受影响。 */
@media (min-width: 561px) {
  .swipe-study-close{position:sticky;top:0;z-index:6;width:100%;justify-content:center;margin-bottom:12px;background:var(--surface)!important;border-bottom:1px solid var(--hairline-soft, rgba(0,0,0,.12));box-shadow:0 4px 12px rgba(60,50,30,.08);font-weight:700}
  .swipe-study .word-card{padding:14px !important;gap:10px !important;min-height:0 !important;align-content:start !important}
  .swipe-study .word-title{font-size:34px !important;line-height:1.05 !important}
  .swipe-study .word-meaning{font-size:15px !important;line-height:1.4 !important}
  .swipe-study .word-meaning small{font-size:12px !important}
  .swipe-study .word-example{font-size:13.5px !important}
  .swipe-study .tool-cluster{padding:12px !important}
  .swipe-study .cv-big-action{padding:10px 16px !important;font-size:14px !important}
  .swipe-study .cv-flow-hint{font-size:12px !important}
}
/* Third-edition Starters: keep the existing reading layout, add book navigation
   and persistent queue state without re-rendering the page during playback. */
.starters-catalog-filters { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
.starters-catalog-filters label { display:flex; flex:1 1 180px; max-width:340px; flex-direction:column; gap:6px; font-size:13px; font-weight:700; }
.starters-catalog-filters select { width:100%; min-height:42px; padding:8px 12px; border:1px solid var(--line,#dce4ec); border-radius:10px; background:var(--surface,#fff); color:inherit; font:inherit; }
.starters-full-actions,.starters-playback-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.starters-full-actions button,.starters-playback-controls button { width:auto!important; min-height:42px; }
.starters-playback-controls button[hidden] { display:none!important; }
.starters-reading-note { margin:4px 0; font-size:13px; line-height:1.65; color:var(--muted,#58657a); }
.starters-paragraph-row .reading-audio-status:empty,
.starters-reading-note[data-starters-resource-status]:empty { display:none; }
.starters-playback-status:empty { display:none; }
.starters-speaker { display:inline-block; color:var(--muted,#52647a); font-size:12px; font-weight:800; margin:0 8px 5px 0; line-height:1.5; }
.starters-effect-label { display:block; font-size:12px; color:var(--muted,#68748a); margin-top:5px; }
.starters-paragraph-row { transition:background-color .15s,border-color .15s; scroll-margin-top:100px; }
.starters-paragraph-row.is-playing,.reading-full-text p.is-playing { background:var(--accent-soft)!important; border-color:var(--accent-edge)!important; box-shadow:inset 0 0 0 1px var(--accent-edge); }
.starters-paragraph-row .reading-paragraph-copy p { margin-top:0; }
.starters-paragraph-row button:disabled,.starters-full-card button:disabled { opacity:.5; cursor:not-allowed; }
.starters-full-card .reading-full-text p { padding:10px; border-radius:8px; }
@media(max-width:600px) {
  .starters-catalog-filters { gap:8px; }
  .starters-catalog-filters label { flex-basis:130px; max-width:none; }
  .starters-paragraph-row .reading-actions { flex-wrap:wrap; gap:6px; }
  .starters-paragraph-row .reading-mini-btn { width:auto!important; min-height:40px; padding:8px 10px; }
  .starters-full-actions button { flex:1 1 auto; }
}

/* Override the legacy two-column full-reading card only for this textbook. */
#view-reading .reading-full-card.starters-full-card {
  display:grid;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:start;
  gap:12px;
}
#view-reading .starters-full-card > * { grid-column:1 / -1; min-width:0; }
#view-reading .starters-full-card > .starters-full-actions,
#view-reading .starters-full-card > .starters-playback-controls {
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
#view-reading .starters-full-card > .starters-full-actions > button,
#view-reading .starters-full-card > .starters-playback-controls > button {
  flex:0 0 auto;
  width:auto!important;
  max-width:100%;
  white-space:nowrap;
}
#view-reading .starters-full-card > .starters-playback-status { display:block; margin:0; }
#view-reading .starters-full-card > .starters-playback-status:empty { display:none; }
#view-reading .starters-material-meta { display:block; margin-top:5px; color:var(--muted,#58657a); font-size:13px; line-height:1.6; }
#view-reading .starters-playback-controls > [data-starters-device-note] { flex-basis:100%; }

/* Reading catalogue and text scroll independently on desktop. Mobile keeps
   the established list/detail flow, through the tablet breakpoint as well. */
#view-reading .reading-catalog { min-width: 0; min-height: 0; }
#view-reading .reading-catalog-heading { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; font-size: 14px; }
#view-reading .reading-catalog-heading span { color: var(--muted); }
#view-reading .reading-source-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0; background: transparent; border-radius: 0; }
#view-reading .reading-source-tabs button { flex: 1 1 100px; min-width: 0; min-height: 48px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; padding: 8px !important; border: 1px solid transparent !important; border-radius: 4px !important; background: transparent !important; color: var(--ink) !important; box-shadow: none !important; cursor: pointer; }
#view-reading .reading-source-tabs button.active { background: var(--accent-soft) !important; border-color: var(--accent-edge) !important; color: var(--accent-ink) !important; }
#view-reading .reading-source-tabs strong { font-size: 14px; }
#view-reading .reading-source-tabs span { font-size: 12px; }
#view-reading .reading-source-note { margin: 8px 4px; font-size: 13px; line-height: 1.6; color: var(--muted); }
#view-reading .reading-catalog .starters-catalog-filters { margin: 12px 0 0; gap: 8px; }
#view-reading .reading-catalog .starters-catalog-filters label { min-width: 0; flex: 1 1 100px; }
#view-reading .starters-catalog-filters select { height: 44px; min-height: 44px; font-size: 16px; }
#view-reading .reading-task-list:focus-visible, #view-reading .reading-detail:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#view-reading .reading-task-card strong { overflow-wrap: anywhere; }
#view-reading .sentence-row p, #view-reading .reading-full-text p { font-size: 18px !important; line-height: 1.75 !important; overflow-wrap: anywhere; }
#view-reading .starters-speaker { font-size: 14px; color: var(--ink-2, var(--ink)); }
#view-reading .reading-mini-btn, #view-reading .starters-full-actions button, #view-reading .starters-playback-controls button { min-height: 44px !important; }
#view-reading .starters-paragraph-row.is-playing, #view-reading .reading-full-text p.is-playing { background: var(--accent-soft) !important; border-color: var(--accent-edge) !important; box-shadow: inset 0 0 0 1px var(--accent-edge) !important; }
@media (min-width: 901px) {
  body[data-view="reading"] .main:has(.reading-shell) { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 16px !important; padding-bottom: 16px !important; overflow: hidden; }
  #view-reading:has(.reading-shell) { min-height: 0; overflow: hidden; }
  #view-reading > .reading-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
  #view-reading .reading-shell > .reading-audio-source, #view-reading .reading-shell > .reading-mode-tabs { flex: 0 0 auto; margin: 0 !important; }
  #view-reading .reading-shell .reading-workspace { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); align-items: stretch; }
  #view-reading .reading-shell .reading-workspace.is-empty { grid-template-columns: minmax(0, 1fr); }
  #view-reading .reading-catalog { display: flex; flex-direction: column; overflow: hidden; }
  #view-reading .reading-catalog-tools, #view-reading .reading-catalog-heading { flex: 0 0 auto; }
  #view-reading .reading-task-list { flex: 1 1 auto; min-height: 0 !important; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding: 2px 8px 12px 2px; }
  #view-reading .reading-shell .reading-detail { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding: 2px 8px 24px 2px; }
  #view-reading .reading-paragraph-row { grid-template-columns: auto minmax(0, 1fr); }
  #view-reading .reading-paragraph-row .reading-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 900px) {
  #view-reading .reading-workspace { grid-template-columns: minmax(0, 1fr); }
  #view-reading .reading-shell .reading-detail { display: none !important; }
  body.cv-read-detail #view-reading .reading-catalog, body.cv-read-detail #view-reading .reading-mode-tabs { display: none !important; }
  body.cv-read-detail #view-reading .reading-shell .reading-detail, #view-reading .reading-focused .reading-detail { display: block !important; }
  #view-reading .reading-mode-tabs { grid-template-columns: 1fr 1fr !important; }
  #view-reading .reading-mode-tabs button { min-height: 44px !important; }
  #view-reading .reading-audio-source { display: grid !important; min-width: 0; gap: 6px; margin: 0; }
  #view-reading .reading-task-card { min-height: 88px; }
  #view-reading .reading-task-card strong { font-size: 16px !important; line-height: 1.5; }
  #view-reading .cv-read-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 12px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; font-weight: 700; cursor: pointer; }
  #view-reading .reading-paragraph-row { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  #view-reading .reading-paragraph-row .reading-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
  #view-reading .reading-mini-btn { width: auto !important; padding: 8px 12px; }
  #view-reading .starters-material-meta { font-size: 14px; }
}

/* Keep the role and sentence in the wide text cell; bare text previously became
   an anonymous grid item in the 34px number column. */
#view-reading .reading-full-text { max-height: none; overflow: visible; }
#view-reading .reading-fulltext-drawer > summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
#view-reading .starters-full-card .reading-full-text p { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
#view-reading .reading-full-text p .starters-full-copy,
#view-reading .reading-full-text p .starters-full-sentence { display: block; min-width: 0; font: inherit; font-weight: 400; color: var(--ink) !important; }
#view-reading .starters-full-copy .starters-speaker { display: block; margin: 0 0 4px; }

#view-reading .reading-focused [data-cv-read-back] { display: none !important; }
@media (min-width: 901px) {
  #view-reading [data-cv-read-back] { display: none !important; }
  #view-reading .reading-shell > .reading-audio-source fieldset { position: relative; margin: 0; padding: 0; }
  #view-reading .reading-shell > .reading-audio-source legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #view-reading .reading-shell > .reading-mode-tabs button { min-height: 48px !important; display: flex; align-items: center; gap: 12px; }
  #view-reading .reading-task-card { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; min-height: 88px; }
  #view-reading .reading-task-card strong { grid-column: 1; grid-row: 1; font-size: 15px; line-height: 1.5; }
  #view-reading .reading-task-status { grid-column: 2; grid-row: 1; align-self: start; padding: 0 6px; }
  #view-reading .reading-task-card small { grid-column: 1 / -1; }
}
/* Rows size to their card. In the fixed-height desktop catalogue, auto rows otherwise shrink to the
   cards' 88px min-height once the list overflows, and longer text spills onto the next card. */
#view-reading .reading-task-list { grid-auto-rows: max-content; }
/* Complete-series cards: skill tag and status, a short heading, where it is in the book, opening lines. */
#view-reading .reading-task-card.is-complete-textbook { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; align-content: start; }
#view-reading .reading-task-card.is-complete-textbook .reading-task-status { grid-column: 2; grid-row: 1; align-self: start; }
#view-reading .reading-task-card.is-complete-textbook .reading-task-kind { grid-column: 1; grid-row: 1; align-self: center; min-width: 0; color: var(--accent-ink, var(--ink)); font-size: 12px; font-weight: 650; line-height: 1.5; letter-spacing: .02em; }
#view-reading .reading-task-card.is-complete-textbook strong { grid-column: 1 / -1; grid-row: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
#view-reading .reading-task-card.is-complete-textbook small { grid-column: 1 / -1; min-width: 0; }
#view-reading .reading-task-card.is-complete-textbook .reading-task-preview { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: italic; font-weight: 400; }
#view-reading .reading-task-card.is-complete-textbook .reading-task-topic { color: var(--ink) !important; font-size: 13.5px !important; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
/* Unit headings in the free-practice textbook catalogue, so the list follows the book's units. */
#view-reading .reading-unit-heading { margin: 14px 4px 2px; padding: 0 0 6px; border-bottom: 1px solid var(--hairline, rgba(0,0,0,.08)); color: var(--muted) !important; font-size: 13px !important; font-weight: 650; line-height: 1.4; letter-spacing: .01em; }
#view-reading .reading-task-list > .reading-unit-heading:first-child { margin-top: 4px; }
#view-reading .reading-unit-heading[hidden] { display: none !important; }
#view-reading .reading-card-head .reading-textbook-topic { margin: 2px 0 4px; color: var(--ink-2, var(--ink)); font-size: 17px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
@media (min-width: 901px) and (max-width: 1180px) {
  body[data-view="reading"] .main:has(.reading-shell) { padding-bottom: var(--cv-mobile-tabbar-clearance, 104px) !important; }
}

/* Secondary full-reading tools stay available without displacing sentence practice. */
#view-reading .reading-full-options { grid-column: 1 / -1; min-width: 0; }
#view-reading .reading-full-options > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: var(--accent-ink); font-size: 14px; font-weight: 700; list-style: none; }
#view-reading .reading-full-options > summary::-webkit-details-marker { display: none; }
#view-reading .reading-full-options > summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0; }
#view-reading .reading-full-options[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
#view-reading .reading-full-options > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#view-reading .reading-full-options-content { min-width: 0; display: grid; gap: 12px; }
#view-reading .reading-full-extra-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#view-reading .reading-full-extra-actions button { min-height: 44px; width: auto !important; }
#view-reading .starters-full-card > .starters-playback-controls:not(:has(button:not([hidden]), small:not([hidden]))) { display: none !important; }
#view-reading .reading-full-card, #view-reading .reading-full-card.starters-full-card { padding: 12px !important; gap: 8px !important; margin: 0 !important; }
#view-reading .reading-full-overview { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
#view-reading .reading-full-overview .eyebrow { display: none; }
#view-reading .reading-full-overview strong { font-size: 15px; }
#view-reading .reading-full-overview > span { font-size: 12px; }
#view-reading .reading-full-options > summary { border-top: 1px solid var(--hairline); }
#view-reading .reading-full-options[open] > summary { margin-bottom: 8px; }
#view-reading .reading-card-head > .muted { display: none; }
#view-reading .reading-card { gap: 12px; }
#view-reading .reading-card-head { margin-bottom: 0 !important; }
#view-reading .sentence-list-head { margin: 8px 0 0; }
#view-reading .sentence-list { margin-top: 0 !important; }
@media (max-width: 900px) {
  #view-reading .starters-full-card > .starters-full-actions > button { flex: 1 1 100px; }
}

/* Sentence practice leads; the full-reading section remains one focusable jump away. */
#view-reading .sentence-list-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
#view-reading .sentence-list-head > strong { margin-right: auto; }
#view-reading .sentence-list-head > small { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; }
#view-reading .reading-full-jump { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; max-width: 100%; color: var(--accent-ink); font-size: 13px; font-weight: 650; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
#view-reading .reading-full-jump > .ic { transform: rotate(90deg); flex-shrink: 0; }
#view-reading .reading-full-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
#view-reading .reading-full-card[id] { scroll-margin-block-start: 16px; }
#view-reading .reading-full-card[id]:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
#view-reading .reading-quota-status { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
#view-reading .reading-quota-retry, #speechModal .reading-quota-retry { display: inline-flex; align-items: center; min-height: 44px; width: auto !important; max-width: 100%; margin: 0 0 0 8px; padding: 4px; border: 0; background: transparent; color: var(--accent-ink); font-size: 13px; letter-spacing: 0; text-decoration: underline; white-space: normal; }
#view-reading .reading-quota-retry:focus-visible, #speechModal .reading-quota-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 360px) {
  #view-reading .sentence-list-head { gap: 4px 8px; }
  #view-reading .reading-full-jump { font-size: 12px; }
}

/* Only the sticky commands have a surface; the reading canvas stays uninterrupted. */
#view-reading .reading-detail-tools {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  padding: 4px 0;
  background: transparent;
  border: 0;
  pointer-events: none;
}
#view-reading .reading-detail-tools > :is(.reading-full-jump, .cv-read-back) {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--hairline) !important;
  border-radius: 6px;
  background: var(--surface-2) !important;
  color: var(--accent-ink) !important;
  font-size: 14px !important;
  font-weight: 650;
  line-height: 1.5;
  text-decoration: none;
  pointer-events: auto;
}
#view-reading .reading-detail-tools > .cv-read-back {
  position: static;
  width: auto !important;
  margin: 0 auto 0 0;
  white-space: normal;
}
#view-reading .reading-detail-tools > :is(.reading-full-jump, .cv-read-back):hover { background: var(--accent-soft) !important; }
#view-reading .reading-detail-tools > .cv-read-back .ic { flex-shrink: 0; }
@media (min-width: 901px) {
  #view-reading .reading-shell .reading-detail { padding-top: 0; }
}
#view-reading .reading-detail:has(> .reading-detail-tools) :is(.reading-full-card[id], .sentence-row, button, summary, a) {
  scroll-margin-block-start: calc(var(--reading-tools-height, 80px) + env(safe-area-inset-top, 0px) + 12px);
}

/* Task origin stays a light, keyboard-accessible command, never a new card. */
.view > .workspace-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  max-width: 100%;
  width: auto !important;
  margin: 0 0 6px;
  padding: 4px 8px;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  font-size: 14px;
  white-space: normal;
}
.workspace-back .ic { flex: none; }
.workspace-back span { overflow-wrap: anywhere; }

/* Isolated teacher result routes, using the existing light/dark theme tokens. */
#teacherStudentDetail { scroll-margin-top: 88px; min-width: 0; }
.teacher-student-name { max-width: 100%; min-height: 44px; white-space: normal; overflow-wrap: anywhere; text-align: left; font-weight: 700 !important; }
[data-view-student][aria-pressed="true"] { color: var(--accent-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
.teacher-reading-results { border-top: 1px solid var(--hairline); margin-top: 16px; padding-top: 12px; min-width: 0; }
.teacher-reading-results-mask { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .45); }
.teacher-reading-results-dialog { position: relative; width: min(820px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); min-width: 0; overflow: auto; overscroll-behavior: contain; background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); border-radius: 8px; padding: 20px; }
.teacher-reading-results-dialog header { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.teacher-reading-results-dialog h2 { font-size: 20px; line-height: 1.4; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.teacher-reading-results-dialog .modal-close { position: static; float: none; flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.teacher-result-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.teacher-result-toolbar label { display: grid; gap: 4px; min-width: 0; max-width: 100%; }
.teacher-result-toolbar input { width: 180px; max-width: 100%; min-height: 44px; }
.teacher-result-toolbar button, .teacher-result-pages button, [data-refresh-teacher-student] { width: auto !important; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.teacher-result-group { min-width: 0; }
.teacher-result-group h4 { font-size: 15px; margin: 16px 0 8px; }
.teacher-reading-record { border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; min-width: 0; padding: 0; background: transparent; }
.teacher-reading-record summary { cursor: pointer; min-height: 48px; padding: 12px 0; overflow-wrap: anywhere; }
.teacher-reading-record summary strong { font-size: 15px; }
.teacher-reading-record summary span { display: block; font-size: 13px; margin-top: 4px; color: var(--muted); }
.teacher-reading-record-body { min-width: 0; overflow-wrap: anywhere; padding-bottom: 12px; }
.teacher-reading-record-body p { margin: 8px 0; }
.teacher-reading-record-body h5 { font-size: 14px; margin-bottom: 8px; }
.teacher-result-text { white-space: pre-wrap; line-height: 1.8; }
.teacher-result-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 16px; }
.teacher-result-scores dt { font-size: 12px; color: var(--muted); }
.teacher-result-scores dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; }
.teacher-result-pages { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 12px; }
.teacher-checkin-student-row .daily-checkin-days { display: flex; flex-wrap: wrap; gap: 4px; }
.teacher-result-day { flex: 0 0 44px; width: 44px !important; height: 44px; padding: 0 !important; border-radius: 4px !important; background: var(--surface-2) !important; color: var(--ink) !important; }
.teacher-result-day.done { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border-color: var(--accent-edge) !important; }
.teacher-result-open { min-height: 44px; max-width: 100%; white-space: normal; }
@media (max-width: 600px) {
  .teacher-reading-results-mask { padding: 8px; }
  .teacher-reading-results-dialog { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 12px; }
  .teacher-checkin-student-row:has(.teacher-result-open) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .teacher-checkin-student-row:has(.teacher-result-open) > div { min-width: 0; overflow-wrap: anywhere; }
  .teacher-result-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-result-toolbar { gap: 8px; }
}
/* Membership confirmation is outside view roots, so background reads keep drafts intact. */
.account-membership-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}
.account-membership-status > span { min-width: 0; }
.account-membership-status > button { flex: 0 0 36px; width: 36px; height: 36px; padding: 8px; }

/* 5.4.48: Keep assignment state and its next action in one visual group. */
#view-assignments .assignment-history-actions {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 72px;
}
#view-assignments .assignment-history-actions .assignment-status,
#view-assignments .assignment-history-actions .assignment-archive-label {
  justify-content: center;
}
@media (max-width: 900px) {
  #view-assignments .assignment-history-row {
    grid-template-columns: 40px minmax(0, 1fr) 72px !important;
    align-items: center;
  }
}
@media (max-width: 560px) {
  #view-assignments .assignment-history-row {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: start;
  }
  #view-assignments .assignment-history-actions {
    grid-column: 2;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    margin-top: 4px;
  }
}

/* WeChat confirmation shares the existing auth surface and theme tokens. */
#wechatQrPanel, #wechatBindPanel { padding: 16px 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0; }
#wechatQrPanel h3, #wechatBindPanel h3 { font-size: 20px; line-height: 1.4; }
#wechatQrPanel p, #wechatBindPanel p { max-width: 100%; overflow-wrap: anywhere; line-height: 1.6; }
#wechatQrPanel .wechat-request-context, #wechatBindPanel .wechat-request-context { font-size: 14px; color: var(--muted) !important; }
#wechatQrBox { box-sizing: border-box; width: 208px; height: 208px; padding: 8px; max-width: 100%; border: 0; border-radius: 8px !important; background: #fff !important; }
#wechatQrBox img { width: 192px; height: 192px; max-width: 100%; object-fit: contain; border-radius: 0; }
#wechatQrBox:has(button) { width: auto; height: auto; padding: 8px 0; background: transparent !important; }
#wechatQrPanel button, #wechatBindPanel button { min-height: 44px; width: auto; }
#authScreen #loginForm > .auth-wide-action {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 56px;
  min-height: 56px;
  padding: 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 22px;
  border-radius: 8px !important;
}
#authScreen #loginForm > .auth-wide-action:not(.loading) { color: #fff !important; }
#authScreen :is(#wechatLoginBtn, #createWechatAccountBtn) {
  background: #07c160 !important;
  background-image: none !important;
  border: 1px solid #07c160 !important;
  color: #fff !important;
  box-shadow: none !important;
  width: 100% !important;
  min-height: 46px;
  border-radius: 8px !important;
}
#authScreen :is(#wechatLoginBtn, #createWechatAccountBtn):hover:not(:disabled) {
  background: #06b258 !important;
  border-color: #06b258 !important;
}
#authScreen :is(#wechatLoginBtn, #createWechatAccountBtn):disabled {
  background: #84d9ad !important;
  border-color: #84d9ad !important;
  color: #fff !important;
  opacity: 1;
}
#wechatBindPanel .wechat-new-account {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
#wechatBindPanel .wechat-new-account > span,
#wechatBindPanel .wechat-new-account > small {
  color: var(--muted);
  line-height: 1.5;
  font-size: 14px;
}
#wechatSettingsModal { z-index: 12100 !important; }
#wechatSettingsModal :is(.wechat-binding-dialog,h3,p,strong,span,[data-wechat-settings-status]) { transition: none !important; }
.settings-wechat-modal .wechat-binding-dialog {
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  text-align: center;
  padding: 28px 24px;
  background: var(--surface, #fff) !important;
  color: var(--ink, #182c48) !important;
}
#wechatSettingsModal .wechat-binding-dialog h3 { padding-inline: 24px; color: var(--ink, #182c48) !important; }
#wechatSettingsModal .wechat-binding-dialog p { margin: 12px 0 20px; line-height: 1.6; color: var(--muted, #506682) !important; }
.wechat-binding-account { display: grid; gap: 4px; padding: 16px 0; margin-bottom: 20px; border-block: 1px solid var(--hairline, #dce5ef); overflow-wrap: anywhere; }
#wechatSettingsModal .wechat-binding-account strong { font-size: 20px; color: var(--ink, #182c48) !important; }
.wechat-binding-account span { font-size: 14px; color: var(--muted, #506682); }
#wechatSettingsModal .modal-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 10px; border-radius: 8px; border: 0; color: inherit !important; background: transparent !important; box-shadow: none !important; }
#wechatSettingsModal .qr-box { box-sizing: border-box; width: 208px; height: 208px; padding: 8px; max-width: 100%; margin: 0 auto 16px; border: 0; border-radius: 8px; background: #fff !important; }
.settings-wechat-modal .qr-box img { width: 192px; height: 192px; max-width: 100%; object-fit: contain; border-radius: 0; }
#wechatSettingsModal [data-wechat-settings-status] { margin-block: 16px; padding: 0; background: transparent !important; color: var(--muted, #506682) !important; border: 0; box-shadow: none; }
.settings-wechat-modal a.primary-action { display: inline-flex; text-decoration: none; }

/* Four visible history rows, with headers outside each scroll area. */
#view-growth .growth-history-card { display: flex; flex-direction: column; min-width: 0; transform: none !important; }
#view-growth .growth-history-card > .section-head { flex: 0 0 auto; display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#view-growth .growth-history-card .section-head h3 { margin: 0; min-width: 0; font-size: 18px; line-height: 26px; }
#view-growth .growth-history-scroll {
  --history-row-height: 72px;
  height: calc(var(--history-row-height) * 4);
  min-height: 0;
  margin-top: auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scroll-padding-block: 4px;
  -webkit-overflow-scrolling: touch;
}
#view-growth .growth-history-scroll .tl-row { box-sizing: border-box; height: var(--history-row-height); min-height: var(--history-row-height); padding: 6px; gap: 10px; }
#view-growth .growth-history-scroll .tl-body strong { font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; }
#view-growth .growth-history-scroll .tl-body small { display: block; line-height: 18px; white-space: nowrap; }
#view-growth .growth-history-scroll :is(.score-badge,.tl-dot,.tl-unscored) { flex-shrink: 0; }
#view-growth .growth-history-scroll:focus-visible,
#view-growth .growth-history-scroll .tl-row.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#view-growth [data-learning-evidence-growth]:empty { display: none; }
@media (max-width: 600px) {
  #view-growth .growth-history-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #view-growth .growth-history-scroll { --history-row-height: 76px; }
  #view-growth .growth-history-card .section-head { gap: 8px; }
  #view-growth .growth-history-card .section-head > .muted { white-space: nowrap; }
}
@media print {
  #view-growth .growth-history-scroll { height: auto; overflow: visible; }
  #view-growth .growth-history-scroll .tl-row { height: auto; break-inside: avoid; }
  #view-growth .growth-history-scroll .tl-body strong { display: block; overflow: visible; }
}
html.cv-dark #wechatSettingsModal .wechat-binding-dialog,
html.cv-dark #wechatSettingsModal .wechat-binding-dialog h3,
html.cv-dark #wechatSettingsModal .wechat-binding-account strong { color: #edf3ff !important; }
html.cv-dark #wechatSettingsModal .wechat-binding-dialog p { color: #b6c7de !important; }
@media (max-width: 460px) {
  .settings-wechat-modal .wechat-binding-dialog { padding: 24px 20px; }
  .settings-wechat-modal .primary-action, .settings-wechat-modal .secondary-action { width: auto; min-height: 44px; }
}

/* Keep long membership account names clear of the dialog close button. */
/* Reserve the original close button's space; long names remain fully readable. */
.member-admin-dialog #memberAdminDialogTitle {
  padding-right: 48px;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.member-admin-dialog .member-dialog-account {
  overflow-wrap: anywhere;
}

/* ═══ 5.10.3-calm-ui · 发音按钮“正在启动”状态（audio 流，只追加）═══
   从点下到出声：喇叭图标轻轻呼吸（沿用 cvSpk），按钮颜色、尺寸、可点状态都不变；只有文字的“播放”按钮整体轻微呼吸。
   系统“减少动态效果”由 ultimate.css 全局处理；这里补上应用自己的“减少动画”开关。 */
.is-audio-loading .ic { animation: cvSpk .9s ease-in-out infinite; }
[data-wrong-play].is-audio-loading, [data-review-play].is-audio-loading { animation: cvSpkSoft 1s ease-in-out infinite; }
/* 这两类按钮若带图标（例如手机难词本的图标式“播放”），只让整个按钮呼吸一次，图标不再叠加一层。 */
:is([data-wrong-play], [data-review-play]).is-audio-loading .ic { animation: none; }
@keyframes cvSpkSoft { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
html.cv-reduce-motion .is-audio-loading,
html.cv-reduce-motion .is-audio-loading .ic,
html.cv-reduce-motion .cv-big-action.cv-playing .ic { animation: none !important; }

/* ═══ 5.10.3-calm-ui · 手机词卡顶部（R20，audio 流，只追加）═══
   单元 · 词性 · 状态 · 3/50 合成一行灰字；听 / 跟读 / 完成 三步改成三个小圆点（当前步拉长）。只影响 ≤560px 的 .cv-wc-m 手机卡。 */
.cv-wc-m .cv-wc-meta { flex-wrap: nowrap !important; min-height: 22px; }
.cv-wc-m .cv-wc-line {
  flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12.5px; font-weight: 600; line-height: 1.6; color: var(--muted); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.cv-wc-m .cv-wc-meta .cv-card-gear { flex: 0 0 auto; }
/* 作业卡右侧有 34px 齿轮：左边垫一个同宽的空位，让这行灰字和下面的圆点、单词居中对齐（不支持 :has 的浏览器保持原样）。 */
.cv-wc-m .cv-wc-meta:has(> .cv-card-gear)::before { content: ""; flex: 0 0 34px; }
.cv-wc-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0 0 2px; }
/* 未到的步骤用 --muted 的浅色（原来的 --hairline 只有约 1.2:1，几乎看不见）；已完成和当前步用主色，当前步拉长。 */
.cv-wc-dots i { display: block; width: 6px; height: 6px; border-radius: 999px; background: var(--muted); opacity: .55; transition: width .2s ease, background-color .2s ease; }
.cv-wc-dots i.is-done { background: var(--accent); opacity: 1; }
.cv-wc-dots i.is-on { width: 18px; background: var(--accent); opacity: 1; }
html.cv-reduce-motion .cv-wc-dots i { transition: none; }
/* 第 3 步的两行 AI 额度提示（卡片直接子元素）：只在快用完 / 已用完时显示；额度刷新时 app.js 会就地改它们的 is-* 状态类。 */
.cv-wc-m > .quota-hint[data-quota-feature]:not(.is-low):not(.is-empty) { display: none !important; }

/* 5.10.3 刷卡引擎：只渲染当前卡前后几张，卡片按 top: i*100% 绝对定位；拖动中不做过渡（由 JS 控制） */
.swipe-track{position:relative}
.swipe-track > .swp2-card{position:absolute;left:0;right:0;height:100%}
.swipe-track.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}
@media (hover:hover) and (pointer:fine){ .swipe-track > .swp2-card:not(.swp2-end){cursor:grab} }

/* ===== 5.10.3 手机刷卡固定（swipe-fit，Claude 2026-11-03）=====
   手机上刷卡正在显示时，页面不上下滚动，卡片高度由 app.js 的 swipeFit() 按标题栏和底栏之间剩下的空间设定。
   卡片上方收紧：
   - 隐藏「单词训练 / 学习级别」行；
   - 「Dot 带我学」缩成顶栏小圆钮（这两条朗读打开文章时也用）；
   - 二级标签只留文字；
   - 单词刷卡时「只显单词 / 单词+释义」挪进单元那一行（短标签），进度数字浮在卡片右上角；
   - 手势提示浮在卡片上，不再把卡片往下推。
   用 :has 判断「当前页里有刷卡」，离开刷卡立刻恢复。不支持 :has 的浏览器保持原样，app.js 同样判断后不设高度。
   搜索结果打开时、或屏幕太矮放不下（app.js 加 .cv-swipe-nofit）时不锁滚动。 */
.swipe-seg .sw-s{display:none}
@media (max-width:560px){
  html:not(.cv-swipe-nofit):has(.view.active #swipeStage):not(:has(#globalSearchPanel:not(.hidden))),
  html:not(.cv-swipe-nofit):has(.view.active #swipeStage):not(:has(#globalSearchPanel:not(.hidden))) body{overflow:hidden !important;overscroll-behavior:none}
  html:is(:has(.view.active #swipeStage), :has(> body.cv-read-detail[data-view="reading"])) #appShell #dot-original-topbar.topbar{row-gap:0 !important}
  html:is(:has(.view.active #swipeStage), :has(> body.cv-read-detail[data-view="reading"])) #appShell #dot-original-topbar.topbar .topbar-title{display:none !important}
  html:is(:has(.view.active #swipeStage), :has(> body.cv-read-detail[data-view="reading"])) #appShell #dot-original-topbar.topbar #dot-shell-return-entry:not([hidden]){
    position:absolute !important;grid-area:auto !important;grid-column:auto !important;grid-row:auto !important;top:8px !important;right:112px !important;
    width:44px !important;height:44px !important;min-height:44px !important;padding:0 !important;gap:0 !important;justify-content:center !important;font-size:0 !important;z-index:2
  }
  html:is(:has(.view.active #swipeStage), :has(> body.cv-read-detail[data-view="reading"])) #appShell #dot-original-topbar.topbar #dot-shell-return-entry:not([hidden])::before{width:22px;height:22px}
  html:has(.view.active #swipeStage) .words-mode-toggle.vocab-mode-toolbar .wm-btn{flex-direction:row !important;justify-content:center !important;padding-block:7px !important;min-height:0 !important}
  html:has(.view.active #swipeStage) .words-mode-toggle.vocab-mode-toolbar .wm-btn svg{display:none !important}
  html:has(.view.active #swipeStage) .cv-study-topbar{gap:6px !important;margin-bottom:8px !important}
  html:has(.view.active #swipeStage) .swipe-review{position:relative}
  html:has(.view.active #swipeStage) .swipe-review > .swipe-gesture-hint{position:absolute !important;right:8px;left:auto;margin:10px 0 0 !important;max-width:calc(100% - 16px);z-index:6}
  /* 作业刷卡：「返回作业」、显示模式、进度放一行 */
  html:has(.view.active #swipeStage) .swipe-bar{flex-wrap:nowrap}
  html:has(.view.active #swipeStage) .swipe-bar #swipeBack{width:auto !important;flex:0 1 auto;min-height:36px;padding:6px 12px !important;white-space:nowrap}
  html:has(.view.active #swipeStage) .swipe-bar .swipe-prog{margin-left:auto}
  /* 单词刷卡：显示模式挪进单元行（app.js 移动节点并加 .has-swipe-seg / .seg-moved） */
  html:has(.view.active #swipeStage) .cv-word-rangebar.has-swipe-seg{grid-template-columns:minmax(0,1fr) auto auto !important}
  html:has(.view.active #swipeStage) .cv-word-rangebar.has-swipe-seg .cv-word-range-switch{min-width:0 !important;padding-inline:8px !important}
  /* 「更换」两个字换成小箭头，给单元名多留宽度（按钮本身的 aria-label 仍是「更换词卡范围」） */
  html:has(.view.active #swipeStage) .cv-word-rangebar.has-swipe-seg .cv-word-range-switch{gap:4px !important}
  html:has(.view.active #swipeStage) .cv-word-rangebar.has-swipe-seg .cv-word-range-switch span{font-size:0}
  html:has(.view.active #swipeStage) .cv-word-rangebar.has-swipe-seg .cv-word-range-switch span::after{content:"";display:block;width:6px;height:6px;margin:0 2px 3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
  html:has(.view.active #swipeStage) .cv-word-rangebar .swipe-seg{align-self:center}
  html:has(.view.active #swipeStage) .cv-word-rangebar .swipe-seg button{padding:6px 8px}
  html:has(.view.active #swipeStage) .cv-word-rangebar .swipe-seg .sw-l{display:none}
  html:has(.view.active #swipeStage) .cv-word-rangebar .swipe-seg .sw-s{display:inline}
  html:has(.view.active #swipeStage) .swipe-review.seg-moved > .swipe-bar{position:absolute;top:8px;right:10px;margin:0;z-index:5;pointer-events:none}
  html:has(.view.active #swipeStage) .swipe-review.seg-moved .swipe-prog{padding:2px 8px;border-radius:10px;font-size:12px;background:var(--surface)}
  html:has(.view.active #swipeStage) .swipe-review.seg-moved > .swipe-gesture-hint{margin-top:34px !important}
}
@media (max-width:350px){
  /* 很窄的屏，品牌字缩小，给 Dot 小圆钮让位 */
  html:is(:has(.view.active #swipeStage), :has(> body.cv-read-detail[data-view="reading"])) #appShell #dot-original-topbar.topbar .academy-mobile-brand{font-size:14px !important;letter-spacing:0 !important}
}
/* 卡片不够高时（由 swipeFit() 标记 .is-compact）收紧卡内间距，避免标签、单词、按钮互相挤压 */
.swipe-stage.is-compact .swp2-card{padding:12px 16px}
.swipe-stage.is-compact .swp2-badges{top:10px}
.swipe-stage.is-compact .swp2-word{font-size:30px}
.swipe-stage.is-compact .swp2-flip{margin-top:10px}
.swipe-stage.is-compact .swp2-actions{margin-top:10px}
.swipe-stage.is-compact .swp2-mean{font-size:17px}
.swipe-stage.is-compact .swp2-ex{margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.swipe-review[data-mode="both"] .swipe-stage.is-compact .swp2-flipcard .swp2-badges{margin-bottom:8px}

/* ===== 5.10.3 手机朗读显示（Claude 2026-11-03）=====
   打开文章后让第一句尽早露出、每句少占点高度；按钮仍保持 44px 高，方便点。只改样式，不动朗读和评分逻辑。 */
@media (max-width:560px){
  /* 顶部「示范音频状态」提示平时是空的，却占着 24px，空的时候收起 */
  #view-reading .reading-audio-source:has(> #readingAudioFeedback:empty){display:none !important}
  html[data-ds][data-visual-world] body #view-reading .reading-detail .reading-detail-tools{padding:4px 2px 6px !important}
  html[data-ds][data-visual-world] body #view-reading .sentence-list .sentence-row{padding-block:10px !important;column-gap:8px !important}
  html[data-ds][data-visual-world] body #view-reading .sentence-list .sentence-row .starters-speaker{margin-bottom:2px !important}
  html[data-ds][data-visual-world] body #view-reading .sentence-list .sentence-row .sentence-actions{margin-top:4px !important}
}
@media (max-width:767px){
  /* 吸顶的「返回文章列表 / 全文测评」原是半透明，往下滚时压在句子和按钮上看着乱；改成不透明加轻阴影，像浮在上面的按钮 */
  html[data-ds][data-visual-world] body #view-reading .reading-detail-tools > .cv-read-back{background:color-mix(in srgb, var(--surface) 90%, var(--ink)) !important;box-shadow:0 2px 10px rgba(20,30,60,.16) !important}
  html[data-ds][data-visual-world] body #view-reading .reading-detail-tools > .reading-full-jump{background:color-mix(in srgb, var(--surface) 86%, var(--accent)) !important;box-shadow:0 2px 10px rgba(20,30,60,.16) !important}
}

/* ==== member-center.css ==== */
/* Aivia Member Center · 5.4.27 Commercial v2
   Extends the established warm-canvas workbench. Member status is informative;
   only server-confirmed state can authorize learning access. */

#view-member {
  width: 100%;
  min-width: 0;
}

.member-console {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.member-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: 28px;
  overflow: hidden;
  padding: 30px;
  border-radius: 22px;
  background: var(--hero-grad);
  color: #fff;
}

.member-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -110px -170px auto;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--hero-glow-1);
  pointer-events: none;
}

.member-hero-copy {
  align-self: center;
  max-width: 680px;
}

.member-kicker,
.member-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.member-kicker {
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .92);
}

.member-hero h2 {
  max-width: 15ch;
  margin: 16px 0 10px;
  color: #fff !important;
  font-family: var(--font-display);
  font-size: clamp(29px, 3vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.18;
  letter-spacing: -.02em !important;
  text-wrap: balance;
}

.member-hero-copy > p {
  max-width: 64ch;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: 15px;
  line-height: 1.75;
}

.member-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 20px;
}

.member-hero-points span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .88);
  font-size: 12.5px;
  font-weight: 700;
}

.member-hero-points .ic {
  width: 16px;
  height: 16px;
  color: #d9d5ff;
}

.member-beneficiary {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .09);
}

.member-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.member-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

.member-status.is-active {
  background: var(--green-soft);
  color: var(--green-ink);
}

.member-status.is-free {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.member-status.is-expired,
.member-status.is-pending {
  background: var(--amber-soft);
  color: var(--amber-ink);
}

.member-status.is-loading {
  background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .92);
}

.member-beneficiary .member-status {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.member-beneficiary .member-status.is-active {
  background: rgba(73, 214, 137, .18);
  color: #bdf4d4;
}

.member-beneficiary .member-status.is-expired,
.member-beneficiary .member-status.is-pending {
  background: rgba(240, 178, 50, .18);
  color: #f7d58e;
}

.member-icon-action,
.member-dialog-close {
  appearance: none;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.member-icon-action:hover { background: rgba(255, 255, 255, .12); }
.member-icon-action:focus-visible,
.member-dialog-close:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 2px;
}

.member-beneficiary > small {
  color: rgba(255, 255, 255, .60);
  font-size: 12px;
  font-weight: 700;
}

.member-beneficiary > strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: #fff;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
}

.member-beneficiary > span,
.member-beneficiary > p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, .70);
  font-size: 12px;
  line-height: 1.55;
}

.member-beneficiary dl {
  display: grid;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 18px;
}

.member-beneficiary dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.member-beneficiary dt,
.member-beneficiary dd {
  margin: 0;
  font-size: 12px;
}

.member-beneficiary dt { color: rgba(255, 255, 255, .58); }
.member-beneficiary dd { color: rgba(255, 255, 255, .90); font-weight: 700; text-align: right; }

.member-purchase,
.member-live-usage,
.member-value,
.member-benefits {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
}

.member-refresh-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.member-refresh-action:hover { border-color: var(--accent-edge); background: var(--accent-soft-2); }
.member-refresh-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 2px; }
.member-refresh-action:disabled { opacity: .58; cursor: wait; }

.member-live-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
}

.member-live-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, .72fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 10px;
  border-bottom: 1px solid var(--hairline-soft);
}

.member-live-row:nth-child(odd) { padding-right: 20px; border-right: 1px solid var(--hairline-soft); }
.member-live-row:nth-child(even) { padding-left: 20px; }

.member-live-label,
.member-live-count {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.member-live-label strong,
.member-live-count strong,
.member-live-label small,
.member-live-count small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.member-live-label strong { color: var(--ink); font-size: 13px; line-height: 1.4; }
.member-live-label small,
.member-live-count small { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.member-live-count { text-align: right; }
.member-live-count strong { color: var(--accent-ink); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.member-live-row.is-exhausted .member-live-count strong { color: var(--red-ink); }

.member-live-meter {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.member-live-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
}

.member-live-row.is-exhausted .member-live-meter i { background: var(--red-ink); }

.member-live-foot {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.member-live-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 14px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
}

.member-live-empty > .ic { width: 22px; height: 22px; color: var(--accent); }
.member-live-empty > div { display: grid; gap: 3px; min-width: 0; }
.member-live-empty strong { color: var(--ink); font-size: 13px; }
.member-live-empty span { overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.45; }
.member-live-empty.is-error > .ic { color: var(--amber-ink); }

.home-member-quota {
  display: grid;
  grid-template-columns: auto minmax(135px, .8fr) minmax(0, 1.8fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  background: var(--surface);
}

.home-member-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.home-member-mark .ic { width: 20px; height: 20px; }
.home-member-plan { display: grid; gap: 2px; min-width: 0; }
.home-member-plan strong { color: var(--ink); font-size: 13px; }
.home-member-plan small { overflow: hidden; color: var(--muted); font-size: 10.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.home-member-quota > .secondary-action { min-height: 40px !important; white-space: nowrap; }

/* 首页额度折叠条（5.4.27-v6）：默认单行，点击标题行原地展开全部 8 项额度。 */
.home-member-quota.home-member-quota-fold { display: block; padding: 8px 12px; }
.home-member-quota-head { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.home-member-quota-head .home-member-plan { flex: 1; }
.home-member-quota-more { display: inline-flex; flex: none; align-items: center; gap: 2px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.home-member-quota-more .ic { width: 12px; height: 12px; transition: transform .18s ease; }
.home-member-quota-fold.is-open .home-member-quota-more .ic { transform: rotate(90deg); }
.home-member-quota-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline-soft); }
.home-member-quota-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 0; }
.home-member-quota-cell { display: grid; gap: 3px; min-width: 0; padding: 2px 6px; }
.home-member-quota-cell small { overflow: hidden; color: var(--muted); font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.home-member-quota-cell strong { color: var(--ink); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-member-quota-cell strong.is-empty { color: #c2410c; }
.home-member-quota-bar { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: var(--hairline-soft); }
.home-member-quota-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.home-member-quota-bar i.is-low { background: #ea580c; }
.home-member-quota-memberlink { width: 100%; min-height: 38px !important; margin-top: 8px; }
.home-member-quota.is-loading,
.home-member-quota.is-error { grid-template-columns: auto minmax(0, 1fr) auto; }
.home-member-quota.is-loading > div,
.home-member-quota.is-error > div { display: grid; gap: 2px; min-width: 0; }
.home-member-quota.is-loading > div strong,
.home-member-quota.is-error > div strong { color: var(--ink); font-size: 13px; }
.home-member-quota.is-loading > div small,
.home-member-quota.is-error > div small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.member-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.member-section-kicker { color: var(--accent-ink); }

.member-section-heading h3,
.member-admin-head h3,
.member-admin-dialog h3 {
  margin: 4px 0 0;
  color: var(--ink) !important;
  font-family: var(--font-display);
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.member-price-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.member-purchase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr);
  gap: 18px;
  min-width: 0;
}

.member-offer-list {
  display: grid;
  gap: 9px;
}

.member-offer-list.is-retail-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.member-offer {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 26px;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  min-height: 78px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}

@media (hover: hover) {
  .member-offer:hover {
    border-color: var(--accent-edge);
    background: var(--accent-soft-2);
    transform: translateY(-1px);
  }
}

.member-offer:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 2px;
}

.member-offer.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft-2);
}

.member-offer-period,
.member-offer-price {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.member-offer-period strong {
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.35;
}

.member-offer-period small,
.member-offer-price small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.member-offer-price { text-align: right; }
.member-offer-price strong {
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.member-offer-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--muted);
}

.member-offer.is-selected .member-offer-check {
  background: var(--accent);
  color: #fff;
}

/* ===== 正式零售价营销卡（v7/v8 单纵排左右结构） ===== */
.member-offer.is-retail {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  min-height: 0;
  padding: 20px 58px 20px 22px;
  border-width: 2px;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(34, 31, 58, .04);
}

@media (hover: hover) {
  .member-offer.is-retail:hover {
    box-shadow: 0 10px 26px rgba(84, 75, 196, .14);
  }
}

.member-offer.is-retail.is-selected {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%, color-mix(in srgb, var(--accent) 13%, var(--surface)) 100%);
  box-shadow: 0 12px 30px rgba(84, 75, 196, .18);
}

.member-offer.is-retail .member-offer-check {
  position: absolute;
  top: 16px;
  right: 18px;
}

.member-offer-main {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.member-offer-side {
  display: grid;
  gap: 4px;
  flex: none;
  justify-items: end;
  text-align: right;
}

.member-offer-badge {
  position: absolute;
  top: -11px;
  left: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

.member-offer-badge.is-gold {
  background: linear-gradient(90deg, #b8860b, #d9a52b);
}

.member-offer-plan {
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 800;
}

.member-offer-title {
  font-size: 19px;
  line-height: 1.3;
}

.member-offer-pitch {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.member-offer-pricerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.member-offer-now {
  color: #d4380d;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.member-offer-now small {
  margin-right: 1px;
  font-size: 14px;
  font-weight: 800;
}

.member-offer-was {
  color: #a49ec0;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.member-offer-daily {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--accent-soft-2);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.member-offer-save {
  color: #0d7a5f;
  font-size: 11.5px;
  font-weight: 800;
}

/* ===== Free 试运营卡（v7） ===== */
.member-free-card {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1.5px dashed var(--hairline);
  border-radius: 12px;
  background: var(--surface-2);
}

.member-free-kicker {
  color: #b8860b;
  font-size: 12.5px;
  font-weight: 850;
}

.member-free-title {
  display: block;
  margin-top: 2px;
  font-size: 16px;
}

.member-free-card-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.member-free-trial {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #efdda6;
  border-radius: 10px;
  background: #fdf3d7;
  color: #6b5410;
  font-size: 12.5px;
  line-height: 1.65;
}

.member-free-trial strong {
  color: #8a5a00;
}

/* ===== 为什么升级 · 价值锚定区（v7） ===== */
.member-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.member-value-card {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 16px 16px 14px 20px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-2);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}

@media (hover: hover) {
  .member-value-card:hover {
    box-shadow: 0 8px 22px rgba(34, 31, 58, .08);
    transform: translateY(-2px);
  }
}

.member-value-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
  background: var(--accent);
}

.member-value-cap {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.member-value-mult {
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.member-value-mult small {
  margin-left: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.member-value-range {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.member-value-card p {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 700;
}

.member-value-foot {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.member-checkout-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px;
  border-radius: 12px;
  background: var(--surface-2);
}

.member-mobile-checkout { display: none; }

.member-account-rule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--accent-ink);
}

.member-account-rule > .ic { flex: none; margin-top: 2px; }
.member-account-rule p { display: grid; gap: 2px; margin: 0; }
.member-account-rule strong { color: var(--ink); font-size: 13px; }
.member-account-rule span { color: var(--muted); font-size: 12px; line-height: 1.5; }

.member-checkout-choice {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 12px;
}

.member-checkout-choice strong {
  max-width: 65%;
  overflow-wrap: anywhere;
  color: var(--ink);
  text-align: right;
}

.member-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 8px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
  cursor: pointer;
}

.member-acceptance.is-checked {
  border-color: var(--accent);
  background: var(--accent-soft-2);
}

.member-acceptance input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.member-acceptance-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.member-acceptance-note button {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.member-checkout-action,
.member-orders-action {
  width: 100% !important;
  min-height: 48px !important;
  justify-content: center;
}

.member-orders-action { margin-top: 8px; }

.member-checkout-panel .primary-action:disabled {
  opacity: .62;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.member-orders-action:disabled { opacity: .55; cursor: not-allowed; }

.member-checkout-foot {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.member-message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-soft-2);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.55;
}

.member-message > .ic { flex: none; margin-top: 1px; }
.member-message.warn { background: var(--amber-soft); color: var(--amber-ink); }
.member-message.bad { background: var(--red-soft); color: var(--red-ink); }
.member-message.good { background: var(--green-soft); color: var(--green-ink); }

.member-quota-table {
  min-width: 0;
  border-top: 1px solid var(--hairline);
}

.member-quota-head,
.member-quota-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(110px, .55fr) minmax(120px, .55fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 12px 10px;
  border-bottom: 1px solid var(--hairline-soft);
}

.member-quota-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.member-quota-head span:not(:first-child),
.member-quota-row span { text-align: right; }

.member-quota-row strong,
.member-quota-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}

.member-quota-row strong { color: var(--ink); }
.member-quota-row span { color: var(--muted); font-variant-numeric: tabular-nums; }
.member-quota-row span:last-child { color: var(--accent-ink); font-weight: 800; }

.member-usage-notes {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.member-usage-notes p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.member-usage-notes .ic { flex: none; margin-top: 1px; color: var(--accent); }

/* Admin membership is an operational tool: compact rows, no marketing hero. */
.admin-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }

.member-admin-panel { min-width: 0; }

.member-admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.member-admin-head p {
  max-width: 68ch;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.member-admin-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.member-admin-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.member-admin-summary span {
  display: grid;
  gap: 3px;
  min-height: 76px;
  padding: 13px 15px;
  color: var(--muted);
  font-size: 12px;
}

.member-admin-summary span + span { border-left: 1px solid var(--hairline-soft); }
.member-admin-summary strong { color: var(--ink); font-family: var(--font-display); font-size: 23px; line-height: 1.1; }

.member-admin-search {
  width: min(100%, 480px);
  margin: 16px 0 10px;
}

.member-admin-list {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--hairline);
}

.member-admin-row {
  display: grid;
  grid-template-columns: 38px minmax(170px, 1fr) minmax(160px, .65fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px 4px;
  border-bottom: 1px solid var(--hairline-soft);
}

.member-admin-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 900;
}

.member-admin-person,
.member-admin-state {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.member-admin-person strong,
.member-admin-person span,
.member-admin-state small,
.member-admin-state em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.member-admin-person strong { color: var(--ink); font-size: 13.5px; }
.member-admin-person span,
.member-admin-state small,
.member-admin-state em { color: var(--muted); font-size: 11.5px; font-style: normal; line-height: 1.4; }
.member-admin-state .member-status { min-height: 24px; padding-block: 3px; }

.member-admin-manage { min-height: 42px !important; white-space: nowrap; }
.member-admin-manage:disabled { opacity: .58; cursor: not-allowed; }

.member-admin-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 28px 16px;
  color: var(--muted);
  text-align: center;
}

.member-admin-empty .ic { width: 25px; height: 25px; margin-bottom: 4px; }
.member-admin-empty strong { color: var(--ink); font-size: 14px; }
.member-admin-empty span,
.member-admin-limit { color: var(--muted); font-size: 12px; }
.member-admin-limit { margin: 10px 0 0; }

body.member-dialog-open { overflow: hidden; }

.member-admin-dialog-mask,
.member-qr-dialog-mask {
  position: fixed;
  z-index: 10020;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 13, 20, .56);
}

.member-admin-dialog,
.member-qr-dialog {
  position: relative;
  width: min(100%, 580px);
  max-height: min(760px, calc(100dvh - 40px));
  overflow: auto;
  padding: 24px;
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.member-qr-dialog {
  width: min(100%, 700px);
}

.member-qr-layout {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-top: 18px;
}

.member-qr-image {
  display: grid;
  place-items: center;
  min-height: 244px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: #fff;
}

.member-qr-image img {
  display: block;
  width: 220px;
  height: 220px;
  object-fit: contain;
}

.member-qr-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.member-qr-copy > strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
}

.member-qr-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.member-qr-copy .member-dialog-audit { margin-top: 2px; }

.member-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  border-color: var(--hairline);
  background: var(--surface-2);
}

.member-dialog-account {
  margin: 6px 48px 18px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.member-duration-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.member-duration-options legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}

.member-duration-options label { min-width: 0; cursor: pointer; }
.member-duration-options input { position: absolute; opacity: 0; pointer-events: none; }
.member-duration-options span {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.member-duration-options input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.member-duration-options input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 2px;
}

.member-admin-dialog .field { margin-top: 12px; }
.member-admin-dialog textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}

.member-admin-dialog textarea:focus,
.member-admin-dialog input:focus {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.member-custom-days.hidden { display: none !important; }

.member-dialog-audit {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-soft-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.member-dialog-audit .ic { flex: none; color: var(--accent); }

.member-dialog-message {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--accent-soft-2);
  color: var(--ink-2);
  font-size: 12px;
}

.member-dialog-message.hidden { display: none; }
.member-dialog-message.warn { background: var(--amber-soft); color: var(--amber-ink); }
.member-dialog-message.bad { background: var(--red-soft); color: var(--red-ink); }
.member-dialog-message.good { background: var(--green-soft); color: var(--green-ink); }

.danger-action.is-confirming {
  border-color: var(--red-ink) !important;
  background: var(--red-soft) !important;
  color: var(--red-ink) !important;
}

.member-dialog-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

@media (max-width: 980px) {
  .member-hero { grid-template-columns: minmax(0, 1fr) minmax(245px, 300px); padding: 24px; }
  .member-purchase-grid { grid-template-columns: minmax(0, 1fr); }
  .member-checkout-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); gap: 10px 18px; }
  .member-checkout-choice { grid-column: 1; }
  .member-checkout-action,
  .member-orders-action { grid-column: 2; }
  .member-checkout-action { grid-row: 1 / span 2; align-self: end; }
  .member-orders-action { grid-row: 3; margin-top: 0; }
  .member-checkout-foot { grid-column: 1 / -1; }
  .home-member-quota { grid-template-columns: auto minmax(130px, .7fr) minmax(0, 1.5fr) auto; gap: 10px; }
}

@media (max-width: 620px) {
  .member-qr-dialog-mask { align-items: end; padding: 0; }
  .member-qr-dialog {
    width: 100%;
    max-height: calc(100dvh - 18px);
    padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
  }
  .member-qr-layout { grid-template-columns: 1fr; gap: 14px; }
  .member-qr-image { width: min(100%, 244px); min-height: auto; margin: 0 auto; }
  .member-qr-image img { width: min(220px, 66vw); height: min(220px, 66vw); }
}

@media (max-width: 760px) {
  .member-console { gap: 12px; }
  .member-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; border-radius: 16px; }
  .member-hero h2 { max-width: 18ch; font-size: 30px !important; }
  .member-beneficiary { min-height: 0; }
  .member-purchase,
  .member-live-usage,
  .member-value,
  .member-benefits { padding: 18px; border-radius: 12px; }
  .member-value-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .member-value-card p { margin-top: 4px; }
  .member-offer-list.is-retail-list { gap: 12px; }
  .member-offer.is-retail { padding: 16px 46px 16px 16px; gap: 12px; }
  .member-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .member-price-note { text-align: left; }
  .member-checkout-panel { display: flex; }
  .member-checkout-action,
  .member-orders-action { width: 100% !important; }
  .member-quota-head,
  .member-quota-row { grid-template-columns: minmax(125px, 1fr) minmax(78px, .6fr) minmax(86px, .65fr); gap: 8px; padding-inline: 4px; }
  .member-live-list { grid-template-columns: minmax(0, 1fr); }
  .member-live-row:nth-child(odd),
  .member-live-row:nth-child(even) { padding-inline: 4px; border-right: 0; }
  .home-member-quota { grid-template-columns: auto minmax(0, 1fr) auto; }
  .admin-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .member-admin-head { flex-direction: column; }
  .member-admin-head-actions { width: 100%; justify-content: space-between; }
  .member-admin-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .member-admin-state { grid-column: 2; }
  .member-admin-manage { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 560px) {
  /* Room for the checkout bar, which now rides just above the bottom tab bar (.main already clears the tab bar). */
  .member-console { padding-bottom: 84px; }
  .member-console:not(:has(> .member-mobile-checkout)) { padding-bottom: 0; }
  .member-hero { padding: 20px 16px; }
  .member-hero h2 { margin-top: 14px; font-size: 27px !important; }
  .member-hero-copy > p { font-size: 14px; }
  .member-hero-points { display: grid; }
  .member-beneficiary { padding: 16px; }
  .member-purchase,
  .member-live-usage,
  .member-value,
  .member-benefits { padding: 15px 13px; }
  .member-offer { grid-template-columns: minmax(0, 1fr) auto 22px; gap: 9px; min-height: 74px; padding: 12px 10px; }
  .member-offer.is-retail { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 16px 16px 16px; }
  .member-offer.is-retail .member-offer-check { top: 12px; right: 12px; }
  .member-offer-side { display: flex; align-items: baseline; gap: 8px; justify-items: start; text-align: left; }
  .member-offer.is-retail:hover { box-shadow: none; }
  .member-offer-price strong { font-size: 21px; }
  .member-offer-period small { max-width: 18ch; }
  .member-quota-head { display: none; }
  .member-quota-table { border-top: 0; }
  .member-quota-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label label" "free member";
    gap: 6px 12px;
    padding: 11px 4px;
  }
  .member-quota-row strong { grid-area: label; }
  .member-quota-row span:nth-of-type(1) { grid-area: free; text-align: left; }
  .member-quota-row span:nth-of-type(1)::before { content: "Free · "; color: var(--muted); font-weight: 600; }
  .member-quota-row span:nth-of-type(2) { grid-area: member; }
  .member-quota-row span:nth-of-type(2)::before { content: "Member · "; color: var(--accent-ink); font-weight: 600; }
  .member-live-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label count" "meter meter"; gap: 7px 12px; }
  .member-live-label { grid-area: label; }
  .member-live-count { grid-area: count; }
  .member-live-meter { grid-area: meter; }
  .member-refresh-action { width: 100%; }
  .member-live-empty { grid-template-columns: auto minmax(0, 1fr); }
  .member-live-empty > .secondary-action { grid-column: 1 / -1; width: 100% !important; }
  .home-member-quota { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
  .home-member-quota > .secondary-action { grid-column: 1 / -1; width: 100% !important; }
  .member-mobile-checkout {
    position: fixed;
    z-index: 110;
    left: 10px;
    right: 10px;
    /* Above the tab bar (its measured height + 16px, see enhance.js) so the tabs stay reachable. */
    bottom: max(calc(10px + env(safe-area-inset-bottom, 0px)), calc(var(--cv-mobile-tabbar-clearance, 0px) - 6px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 9px 10px 9px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--hairline));
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 14px 36px rgba(31, 35, 58, .22);
    backdrop-filter: blur(16px);
  }
  .member-mobile-checkout > span { display: grid; gap: 1px; min-width: 0; }
  .member-mobile-checkout small { color: var(--muted); font-size: 10.5px; }
  .member-mobile-checkout strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .member-mobile-checkout .primary-action { flex: none; width: auto !important; min-height: 44px !important; padding-inline: 14px !important; }
  .member-mobile-checkout .primary-action:disabled { opacity: .6; cursor: not-allowed; box-shadow: none !important; }
  .member-admin-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member-admin-summary span { min-height: 64px; padding: 10px 5px; text-align: center; }
  .member-admin-summary span + span { border-top: 0; border-left: 1px solid var(--hairline-soft); }
  .member-admin-summary strong { font-size: 20px; }
  .member-admin-row { grid-template-columns: 36px minmax(0, 1fr); padding: 12px 0; }
  .member-admin-state { grid-column: 2; }
  .member-admin-manage { grid-column: 1 / -1; grid-row: auto; width: 100% !important; }
  .member-admin-dialog-mask { align-items: end; padding: 0; }
  .member-admin-dialog { width: 100%; max-height: calc(100dvh - 18px); padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .member-duration-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-dialog-actions { display: grid; grid-template-columns: 1fr; }
  .member-dialog-actions > * { width: 100% !important; }
}

@media (max-width: 340px) {
  .member-offer { grid-template-columns: minmax(0, 1fr) auto; }
  .member-offer-check { display: none; }
  .member-offer-period small { display: none; }
  .member-checkout-panel { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .member-offer { transition: none; }
}

@media print {
  #view-member .member-checkout-action,
  #view-member .member-orders-action,
  #view-member .member-icon-action,
  #view-member .member-mobile-checkout,
  .member-admin-dialog-mask,
  .member-qr-dialog-mask { display: none !important; }
}

/* ===== 会员身份徽章（方案 B：徽章 + 转化引导） ===== */
.account-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.account-crown {
  position: absolute; right: -4px; bottom: -4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, #b8860b, #d9a52b);
  color: #fff; display: grid; place-items: center;
  border: 2px solid var(--surface);
}
.account-crown .ic { width: 10px; height: 10px; }
.account-name-row { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.account-tier-pill {
  font-size: 10px; font-weight: 800; padding: 2px 7px;
  border-radius: 999px; letter-spacing: .02em; flex-shrink: 0;
}
.account-tier-pill.is-member { background: linear-gradient(90deg, #b8860b, #d9a52b); color: #fff; }
.account-tier-pill.is-free { background: var(--surface-2); color: var(--muted); border: 1px solid var(--hairline); }

.home-hello-name-row { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
/* v11: 长用户名允许换行，避免 MEMBER 徽章被挤出可视区 */
.home-hello-copy .home-hello-name-row strong { max-width: 100%; min-width: 0; overflow-wrap: break-word; }
/* 小屏修正：refine.css 会把 .home-hello-copy 下所有 span 隐藏（原本只藏问候小字），
   名字行和会员 pill 必须显式抢回显示权，否则手机端名字消失 */
.home-greeting-strip .home-hello-copy .home-hello-name-row { display: inline-flex !important; }
.home-greeting-strip .home-hello-copy .hello-tier-pill { display: inline-flex !important; }
.hello-tier-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800; padding: 3px 9px;
  border-radius: 999px; border: 0; font: inherit; cursor: default;
  flex-shrink: 0; white-space: nowrap;
}
.hello-tier-pill .ic { width: 12px; height: 12px; }
.hello-tier-pill.is-member { background: linear-gradient(90deg, #b8860b, #d9a52b); color: #fff; }
button.hello-tier-pill.is-free {
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--hairline); cursor: pointer;
  font-size: 11px; font-weight: 800;
}
button.hello-tier-pill.is-free:hover { color: var(--brand); border-color: var(--brand); }

@media print {
  .account-crown, .account-tier-pill, .hello-tier-pill { display: none !important; }
}

/* ==================== v15: 自学计划行改造（非班级学生首页 + 全部作业页） ====================
   背景：v14 及以前，自学模式把「自学计划·新词·测验目标·可测」塞进问候区 small 小字，
   320px 下被右侧工具列挤压到 91px 宽、堆叠 5 行；「调整」入口是工具列里的白色幽灵胶囊，
   与计划文案分离，用户看不出它管的是计划。
   方案：计划信息独立成 .home-plan-row 通栏行（问候区网格第四项），
   「调整计划」改为品牌实心小胶囊紧跟计划文案。整条行是 strip 的直属 div，
   不经过 .home-hello-copy 下的 span/small，天然避开 refine.css 的全局隐藏规则（v10 坑）。 */
.home-plan-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-top: 10px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  background: var(--accent-soft);
}
.home-plan-text {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
}
.home-plan-text > .ic { flex: none; opacity: .7; }
.home-plan-hint {
  font-style: normal;
  color: var(--muted);
  font-weight: 600;
}
/* 「调整计划」按钮：品牌实心小胶囊。醒目，但尺寸层级仍小于主 CTA「继续学习」 */
.home-plan-adjust-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  min-height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(36, 87, 166, 0.22);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.home-plan-adjust-action:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(36, 87, 166, 0.28);
}
.home-plan-adjust-action:active { transform: translateY(0); }
.home-plan-adjust-action .ic { width: 14px; height: 14px; }
.home-plan-adjust-action.is-open { background: var(--accent-ink); }
/* 首次引导：未点过调整入口的自学用户，按钮右上角呼吸小红点；点过一次永久消失 */
.home-plan-adjust-action.is-hinted::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--surface);
  animation: cvPlanAdjustPulse 1.6s ease-in-out infinite;
}
@keyframes cvPlanAdjustPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.32); }
}
@media (prefers-reduced-motion: reduce) {
  .home-plan-adjust-action.is-hinted::after { animation: none; }
}
/* 小屏：refine.css 3685 行把 strip 压成 padding 4px 2px 2px，计划行需要呼吸感 */
@media (max-width: 560px) {
  .home-greeting-strip.is-self { padding-bottom: 10px !important; }
  .home-plan-row { margin-top: 8px; padding: 7px 8px 7px 10px; gap: 8px; }
  .home-plan-text { font-size: 12px; }
  .home-plan-adjust-action { min-height: 36px; padding: 0 12px; font-size: 12px; }
}
/* v15 补丁：计划文案分段整体换行，防止小屏孤字断行 */
.home-plan-seg { white-space: nowrap; }
.home-plan-sep { font-style: normal; color: var(--muted); opacity: .7; }

/* ==================== v16: 小屏用户名自适应缩字号 ====================
   320px 实测：9 字形用户名「测试支付002安卓」在 21px 固定字号下被硬裁半字（无省略号）。
   改 clamp 视宽自适应：560→20px 上限，390→约19px，320→约15.7px；并收紧字距。
   省略号仍作兜底（更长名字极端情况），先缩字号再截断。 */
@media (max-width: 560px) {
  .home-greeting-strip .home-hello-name-row strong {
    font-size: clamp(14px, 4.9vw, 20px) !important;
    letter-spacing: -0.01em;
  }
}
@media (max-width: 360px) {
  /* 极限小屏再给名字列腾宽约 10px：徽章内边距收紧、工具列间隙收窄 */
  .home-greeting-tools { gap: 6px !important; }
  .home-greeting-tools .home-level-chip { padding-left: 7px !important; padding-right: 7px !important; }
}

/* ==================== v17: 小屏首页密度优化（≤560px） ====================
   实测 390px：顶部 topbar 高 141px、底部五键导航 76px、区块间距 12~20px，
   小屏首屏干货太少。压顶/底/中段间距，内容区净增约 70px。
   顶栏触控区域至少 44px，导航键至少 46px。 */
@media (max-width: 560px) {
  /* 顶部保持触控尺寸，搜索独占第二行；实际高度由顶栏测量维护。 */
  .topbar { padding: 10px 0 8px !important; row-gap: 8px !important; }
  .topbar .menu-toggle { width: 44px !important; height: 44px !important; min-height: 44px !important; }
  .topbar .top-actions { gap: 8px !important; }
  .topbar .top-actions .search-box { height: 44px !important; min-height: 44px !important; }
  .topbar .top-actions .search-box input { height: 42px !important; min-height: 42px !important; }
  .topbar .top-actions .cv-theme-toggle { min-width: 44px; height: 44px !important; min-height: 44px !important; padding: 0 10px !important; }

  /* —— 中部：页面级间距与首页区块间距 —— */
  .main { gap: 12px !important; }          /* ultimate ≤900px 原为 20px */
  .student-home { gap: 8px !important; }   /* refine 4693 原为 12px */

  /* —— 底部：五键导航 76 → ~62px，内容让位区同步收缩 —— */
  :root { --cv-mobile-tabbar-clearance: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .mobile-tabbar { padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-tab { min-height: 46px !important; gap: 2px !important; padding: 3px 2px !important; }
  .mobile-tab .mt-icon { font-size: 19px !important; padding: 4px 10px !important; }
}
/* v17 补丁：听力吸顶偏移由 refine.js 的顶栏测量值维护。 */
@media (max-width: 560px) {
  .listen-player-card { top: var(--cv-topbar-height, 80px) !important; }
}

/* ==================== v18: 商标去外圈色块（侧边栏 + 登录页） ====================
   问题：.brand-logo 的 svg 商标（i-logo，自带紫色圆角方块）被外层 .brand-mark
   渐变底+投影裹了一圈，两种紫色相叠形成"大一圈的色块"，深色模式更明显；
   refine.css:26 的透明化规则优先级（0,1,0）不敌 ultimate.css 的
   .sidebar .brand-mark / .auth-story .brand-mark（0,2,0 !important），一直没生效。
   另外侧边栏瓷砖被 flex 挤压成 36×42，logo 竖向拉伸变形。 */
.brand-mark.brand-logo {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  flex: none !important;
}
.sidebar .brand-mark.brand-logo { width: 42px !important; height: 42px !important; }
.auth-story .brand-mark.brand-logo { width: 50px !important; height: 50px !important; }
.brand-mark.brand-logo svg { width: 100% !important; height: 100% !important; display: block !important; }

/* ==================== v20: 写作模块优化（历史写作卡 + 按级别题型 chips） ==================== */
/* 历史写作：分隔线列表，整条头部保留折叠入口，小屏默认折叠由 JS 判定。 */
#view-writing .writing-history-card {
  width: min(100%, 1120px); min-width: 0; margin: 0 auto 12px;
  padding: 0 !important; overflow: visible;
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--hairline-soft) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.writing-history-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-width: 0; min-height: 44px; padding: 12px 0; margin: 0;
  background: none; border: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink); border-radius: inherit;
}
.writing-history-head:hover { background: var(--accent-soft); }
.writing-history-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wh-head-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.wh-head-tx strong { font-size: 15px; font-weight: 700; }
.wh-head-tx span { font-size: 12px; color: var(--muted-2); }
.wh-chevron { flex: none; color: var(--muted-2); transition: transform 0.2s var(--ease); }
.writing-history-card:not(.is-folded) .wh-chevron { transform: rotate(180deg); }
.writing-history-list { border-top: 1px solid var(--hairline-soft); }
.writing-history-card.is-folded .writing-history-list { display: none; }
.writing-history-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-width: 0; min-height: 44px; padding: 10px 0;
  background: none; border: none; border-bottom: 1px solid var(--hairline-soft);
  cursor: pointer; text-align: left; font: inherit; color: var(--ink);
}
.writing-history-row:last-child { border-bottom: none; }
.writing-history-row:hover { background: var(--accent-soft); }
.writing-history-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wh-date { flex: none; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.wh-title { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-src {
  flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink);
}
.wh-src.teacher { background: var(--purple-soft); color: var(--purple); }
.wh-score { flex: none; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.wh-score.muted { color: var(--muted-2); font-weight: 500; }
.writing-history-empty { padding: 13px 0; font-size: 12.5px; color: var(--muted-2); }

/* 题型 chips：占 controls 栅格首行（仅 .has-types 时模板生效，少儿级别无 chips 不多占间距）。
   注意必须带 #view-writing 前缀：refine.css:5372 用 ID 选择器（1,1,0）写死了两行模板，否则会像初版一样被压住。 */
#view-writing .writing-prompt-generator.has-types .writing-prompt-controls {
  grid-template-areas: "types types" "topic count" "btn btn" !important;
}
.writing-type-row { grid-area: types; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.writing-type-label { flex: none; max-width: 100%; overflow-wrap: anywhere; font-size: 12px; font-weight: 600; color: var(--muted); }
.writing-type-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; max-width: 100%; box-sizing: border-box;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  border-radius: 6px; padding: 6px 12px; box-shadow: none;
  white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.4;
  font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.writing-type-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.writing-type-chip.on { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent-ink); box-shadow: none; }
.writing-type-chip:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; box-shadow: none !important; }
.writing-type-badge { background: var(--purple-soft) !important; color: var(--purple) !important; }

/* 小屏紧凑化（390px / 320px）：压缩内边距与间距，保证一屏能放下更多内容 */
@media (max-width: 560px) {
  .writing-history-head { padding: 12px 0; }
  .wh-head-tx strong { font-size: 14px; }
  .writing-history-row { padding: 9px 0; gap: 8px; }
  .wh-title { font-size: 12.5px; }
  .wh-src { font-size: 10.5px; padding: 2px 6px; }
  .wh-score { font-size: 12px; }
  .writing-history-empty { padding: 11px 0; }
  .writing-type-row { gap: 6px; }
  .writing-type-chip { padding: 5px 11px; font-size: 12px; }
  /* 题型在首行，主题与题数同排，生成按钮独占一行。 */
  #view-writing .writing-prompt-generator.has-types .writing-prompt-controls {
    grid-template-areas: "types types" "topic count" "btn btn" !important;
  }
}

/* ==================== v22: 移动端细节修复 + 写作线性流程 ==================== */
/* 修1 · 手机/平板顶栏：汉堡(左)+标题(中)+主题切换(右) 同一行，搜索框独占第二行。
   ultimate.css:1700 的 ≤1180px 栅格原为 "menu title"/"actions actions"：搜索框与主题按钮同在第二行，
   无搜索页隐藏搜索框后，不额外保留搜索行。
   display:contents 让 search/theme 直接参与顶栏栅格；无搜索页只保留一行。 */
@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "menu title theme" "search search search" !important;
  }
  .topbar .top-actions { display: contents !important; }
  .topbar .top-actions .search-box { grid-area: search !important; width: 100% !important; min-width: 0 !important; }
  .topbar .top-actions .cv-theme-toggle { grid-area: theme !important; }
  body[data-view="growth"] .topbar,
  body[data-view="referral"] .topbar,
  body[data-view="speaking"] .topbar,
  body[data-view="member"] .topbar {
    grid-template-areas: "menu title theme" !important;
    row-gap: 0 !important;
  }
}

/* 修2 · 写作回看弹窗（手机端）：贴边全宽底部抽屉 + 关闭按钮独占头部一行 + AI 子页紧凑美化 */
@media (max-width: 760px) {
  .writing-viewer-mask.modal-mask,
  .writing-subview-mask.modal-mask { padding: 0 !important; }
  .writing-viewer-card,
  .writing-subview-card {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* 叉号原来 sticky+浮动盖住标题区；改为在文档流里独占一行靠右，圆形小号，滚动时吸附顶部。
     注意必须 float:none——浮动会让后面的 BFC 容器（评分面板 display:grid）按"避让浮动"收窄 44px。 */
  .writing-viewer-card > .modal-close,
  .writing-subview-card > .modal-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 0 8px auto !important;
    float: none !important;
    top: 10px !important;
    border-radius: 50% !important;
    border: 1px solid var(--hairline) !important;
  }
  /* AI/老师意见子页：收敛标题区、评分维度 3 列紧凑排布（原来一屏只能看到一两个维度卡） */
  .writing-subview-card .writing-review-panel { gap: 12px !important; }
  .writing-subview-card .writing-review-head { padding: 14px 16px !important; border-radius: 14px !important; }
  .writing-subview-card .writing-review-head > strong { font-size: 34px !important; }
  .writing-subview-card .writing-review-head h3 { font-size: 16px !important; }
  .writing-subview-card .writing-score-grid.cambridge-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    gap: 8px !important;
  }
  .writing-subview-card .writing-score-grid article {
    min-height: 0 !important;
    padding: 10px 6px !important;
    gap: 3px !important;
    text-align: center !important;
    justify-items: center !important;
  }
  .writing-subview-card .writing-score-grid span { font-size: 11px !important; }
  .writing-subview-card .writing-score-grid strong { font-size: 19px !important; }
  .writing-subview-card .writing-score-grid small { font-size: 10.5px !important; font-weight: 600 !important; }
  .writing-subview-card .essay-version-grid textarea { min-height: 120px !important; }
}

/* 修3 · 生成题目按钮（手机端）：恢复整行宽、文字居中。
   v20 小屏模板 "topic topic"/"count btn" 把按钮挤进 84px 半行，文字视觉偏位被裁。 */
@media (max-width: 560px) {
  #view-writing .writing-prompt-controls {
    grid-template-areas: "topic count" "btn btn" !important;
  }
  #view-writing #generateWritingPrompt {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* 修4 · 练习进度点：第一题/最后一题放大 1.5 倍时两侧被裁，改为从边缘原点向内放大 */
.session-dots i.current:first-of-type { transform-origin: left center !important; }
.session-dots i.current:last-of-type { transform-origin: right center !important; }

/* 修5a · 所有尺寸按 DOM 顺序展示任务、作文、建议；只有步骤2内部响应式分列。 */
#view-writing .writing-flow-shell {
  display: block !important;
  overflow: visible;
}

#view-writing .writing-mode-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-width: 0;
}
#view-writing .writing-mode-toolbar > .writing-mode-tabs {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}
#view-writing .writing-history-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  width: auto;
  min-width: 44px;
  min-height: 44px !important;
  max-width: 100%;
  padding: 8px 10px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 修5b · 历史写作卡：分数按档位着色成徽章（配合 app.js 的 tier 类） */
.wh-score {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.wh-score.wh-top { color: var(--green-ink); background: var(--green-soft); }
.wh-score.wh-good { color: var(--accent-ink); background: var(--accent-soft); }
.wh-score.wh-ok { color: var(--amber-ink); background: var(--amber-soft); }
.wh-score.wh-low { color: var(--red-ink); background: var(--red-soft); }
.wh-score.muted { background: transparent; padding-inline: 0; }

/* ==================== 5.4.29: CAE/中考评分 + 历史写作弱网状态 ==================== */
.writing-history-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.writing-history-error > span { min-width: 0; line-height: 1.55; }
.writing-history-retry {
  flex: none;
  min-height: 38px !important;
  padding: 0 14px !important;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .writing-history-error { align-items: flex-start; flex-direction: column; }
  .writing-history-retry { width: 100%; min-height: 44px !important; }
  #view-writing .writing-score-grid.cambridge-grid.is-four,
  .writing-subview-card .writing-score-grid.cambridge-grid.is-four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #view-writing .writing-score-grid.cambridge-grid.is-four article {
    min-width: 0;
    padding: 11px 8px;
    text-align: center;
    justify-items: center;
  }
  #view-writing .writing-score-grid.cambridge-grid.is-four span,
  #view-writing .writing-score-grid.cambridge-grid.is-four small {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* ==================== v-b1: 听力播放器增强（倍速/AB复读/听过标记/听完引导）+ 刷卡手势一次性提示 ==================== */
/* 原生 <audio controls> 在手机端没有倍速、任何端都没有段内循环，故加自定义控件行 */
.listen-custom-controls {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 10px;
}
.listen-speed, .listen-ab {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  position: relative;
}
.listen-ctl-label {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.listen-ctl-label .ic { width: 14px; height: 14px; }
.listen-ctl-btn {
  border: 1px solid var(--hairline); background: var(--surface); color: var(--muted);
  border-radius: var(--r-pill); padding: 5px 12px; min-height: 32px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.listen-ctl-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.listen-ctl-btn.active,
.listen-ctl-btn.armed { background: var(--accent); border-color: var(--accent); color: #fff; }
.listen-ctl-btn:disabled { opacity: 0.45; cursor: default; }
.listen-ctl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 听过标记：行内小对勾 + 次数，弱存在感不抢标题 */
.book-audio-heard {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 2px; font-size: 11px; color: var(--muted-2);
}
.book-audio-heard .ic { width: 11px; height: 11px; color: var(--green-ink); }

/* 听完引导条：绿色反馈条 + 三个下一步动作，自然播完才出现 */
.listen-finish-hint {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 10px; padding: 10px 12px;
  border-radius: 12px; background: var(--green-soft); color: var(--green-ink);
  font-size: 12.5px; font-weight: 600;
}
.listen-finish-hint[hidden] { display: none; }
.listen-finish-hint > span { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; }
.listen-finish-hint > span .ic { width: 14px; height: 14px; }

/* 一次性引导气泡：复用齿轮提示的配色与小三角（.session-gear-hint 只在练习场景媒体块里出现，这里做通用版）。
   v-b1r2：改为文档流内紧凑盒（width:fit-content），独占一行自然占位，避免 absolute 悬垂遮挡下方标题/卡片 */
.cv-coach-bubble {
  display: flex; align-items: center; gap: 8px;
  position: relative; box-sizing: border-box;
  width: fit-content; max-width: 280px; margin-top: 8px; padding: 9px 12px;
  background: var(--accent); color: #fff;
  font-size: 12px; line-height: 1.45; font-weight: 500; text-align: left;
  border-radius: 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.cv-coach-bubble::after {
  content: ""; position: absolute; top: -5px; left: 40px;
  width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg);
}
/* 刷卡气泡右对齐贴在进度指示下方，三角对准进度 */
.swipe-gesture-hint { margin-left: auto; margin-right: 2px; }
.swipe-gesture-hint::after { left: auto; right: 26px; }

@media (max-width: 560px) {
  .listen-custom-controls { gap: 8px 12px; }
  .listen-ctl-btn { min-height: 36px; padding: 6px 12px; }
  .listen-finish-hint { padding: 10px; }
  .listen-finish-hint > span { flex-basis: 100%; }
  .cv-coach-bubble { max-width: min(280px, 100%); }
}

/* ==================== v25: 听力目录可辨识化 ====================
   目录只使用现有可靠元数据：真实标题、教材/分册、Track 与页码；缺失标题时保留 Track，绝不猜 Unit。 */
#view-listen .listen-catalog-guide {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  min-width: 0; max-width: 100%;
  margin: 0 0 10px;
  padding: 4px 0 12px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--hairline-soft);
}

#view-listen .listen-catalog-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--muted);
  background: transparent;
}

#view-listen .listen-catalog-mark .ic { width: 20px; height: 20px; }

#view-listen .listen-catalog-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#view-listen .listen-catalog-copy > span {
  display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0;
  overflow-wrap: anywhere;
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
}

/* v31：已听计数挪到 kicker 行（短文本不截断），小字行只留教材·Track·页码 */
#view-listen .listen-catalog-count {
  margin-left: 0;
  font-style: normal;
  font-weight: 700;
  opacity: .68;
}

#view-listen .listen-catalog-copy strong {
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

#view-listen .listen-catalog-copy small {
  min-width: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
}

#view-listen .listen-catalog-play {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  box-shadow: none;
}

#view-listen .listen-catalog-play .ic { width: 20px; height: 20px; }
#view-listen .listen-catalog-play:hover { filter: brightness(1.04); }
#view-listen .listen-catalog-play:active { transform: scale(.96); }
#view-listen .listen-catalog-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

#view-listen .book-audio-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px 14px !important;
}

#view-listen .book-audio-row {
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  gap: 8px !important;
  min-height: 64px !important;
  padding: 7px 6px !important;
}

#view-listen .book-audio-main {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

#view-listen .book-audio-main > strong {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#view-listen .book-audio-subline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#view-listen .book-audio-meta {
  display: flex !important;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-listen .book-audio-meta .book-audio-track { display: inline-flex !important; }
#view-listen .book-audio-meta > span:not(.book-audio-meta-sep) { flex: none; }
#view-listen .book-audio-meta-sep { color: var(--muted-2); }

#view-listen .book-audio-heard {
  flex: none;
  margin: 0;
  white-space: nowrap;
}

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

@media (max-width: 900px) {
  #view-listen .book-audio-list { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 560px) {
  #view-listen .listen-list-card { padding: 10px !important; }
  #view-listen .listen-catalog-guide {
    gap: 9px;
  }
  #view-listen .listen-catalog-copy strong { font-size: 14px; }
  #view-listen .listen-catalog-copy small { font-size: 11px; }
  #view-listen .book-audio-row { gap: 6px !important; padding-inline: 2px !important; }
  #view-listen .book-audio-main > strong { font-size: 13.5px !important; }
  #view-listen .book-audio-subline { gap: 6px; }
}

@media (max-width: 360px) {
  #view-listen .listen-catalog-guide { gap: 7px; }
  #view-listen .listen-catalog-copy small { font-size: 11px; }
  #view-listen .book-audio-row { grid-template-columns: 44px minmax(0, 1fr) 44px !important; gap: 4px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #view-listen .listen-catalog-play { transition: none !important; }
}

/* v31r2：≤380px 的「全部」模式下，行内与引导卡的分册段与级别页签/分组条重复，摘除后把宽度让给页码，避免「第 N 页」被截 */
@media (max-width: 380px) {
  #view-listen .book-audio-list[data-mode="all"] .ba-kind-book,
  #view-listen .book-audio-list[data-mode="all"] .ba-kind-book + .book-audio-meta-sep,
  #view-listen .listen-catalog-guide .ba-kind-book,
  #view-listen .listen-catalog-guide .ba-kind-book + .book-audio-meta-sep { display: none; }
}

/* v5.4.32: local text recovery, separate from scoring and submission state. */
#view-writing .writing-draft-notice {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  min-width: 0;
  padding-block: 12px;
  border-block: 1px solid var(--border);
  color: var(--ink);
}
#view-writing .writing-draft-notice > div { min-width: 0; }
#view-writing .writing-draft-warning { grid-column: 1 / -1; }
#view-writing .writing-draft-notice p,
#view-writing .writing-draft-warning { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
#view-writing .writing-draft-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#view-writing .writing-draft-actions button { min-height: 44px; width: auto; white-space: normal; }
#view-writing .writing-draft-warning[hidden] { display: none !important; }
#studentClassSyncFeedback [data-retry-class-sync] { min-height: 44px; }
#studentClassSyncFeedback .feedback { overflow-wrap: anywhere; }

/* Local writing disclosure and teacher class controls; preserve panel visibility. */
#view-writing textarea#writingPrompt {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 88px;
  max-height: 240px;
  box-sizing: border-box;
  overflow: auto;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  font-family: inherit;
  font-size: 16px !important;
  line-height: 1.5;
}
#view-writing .writing-generator-disclosure {
  min-width: 0;
  border-top: 1px solid var(--hairline-soft);
}
#view-writing .writing-generator-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding-block: 4px;
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
#view-writing .writing-generator-disclosure > summary::-webkit-details-marker { display: none; }
#view-writing .writing-generator-disclosure > summary:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}
#view-writing .writing-generator-disclosure > summary .ic { flex: none; }
#view-writing .writing-generator-disclosure[open] > summary .ic { transform: rotate(90deg); }
#view-writing .writing-generator-disclosure > .writing-prompt-generator {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding: 8px 0 4px !important;
}
#view-writing .writing-generator-disclosure .writing-type-row { gap: 8px; }
#view-writing .writing-generator-disclosure .writing-type-chip {
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
#view-writing .writing-generator-disclosure .writing-prompt-controls input { font-size: 16px !important; }

#view-teacher .teacher-class-switcher {
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px) 44px;
  gap: 12px;
}
#view-teacher .teacher-class-context,
#view-teacher .teacher-class-picker { min-width: 0; }
#view-teacher .teacher-class-context { align-self: center; }
#view-teacher #teacherWorkspaceTitle {
  font-size: 18px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
#view-teacher #teacherClassFilter {
  min-width: 0;
  max-width: 100%;
  height: 44px;
  min-height: 44px !important;
  box-sizing: border-box;
  font-size: 16px !important;
}
#view-teacher #refreshTeacherTop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
}
@media (max-width: 900px) {
  #view-teacher .teacher-class-switcher { grid-template-columns: minmax(0, 1fr) 44px; }
  #view-teacher .teacher-class-context { grid-column: 1 / -1; }
  #view-teacher .teacher-writing-grid,
  #view-teacher .teacher-reading-grid,
  #view-teacher .submission-split { grid-template-columns: minmax(0, 1fr); }
}

/* 5.4.36: writing review feedback, scoped to the existing review output. */
#writingReviewOutput { scroll-margin-block: 140px 110px; }
#writingReviewOutput .writing-review-wait {
  min-width: 0;
  max-width: 100%;
  margin-top: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
#writingReviewOutput .writing-review-wait .cv-anim-load { padding: 8px 0; }
#writingReviewOutput .writing-review-wait .cv-anim-copy { min-width: 0; }
#writingReviewOutput .writing-review-wait .cv-anim-copy strong,
#writingReviewOutput .writing-review-wait .cv-anim-copy span {
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
#writingReviewOutput .writing-review-wait-time {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
/* calm-ui: the wait is a thin bar now (cv-anim.css end); it still pauses off-screen. */
#writingReviewOutput .writing-review-wait.is-paused .cvh::after { animation-play-state: paused !important; }
#writingSubReviewModal .writing-subview-card > .modal-close {
  position: static !important;
  float: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px auto !important;
}

/* 5.4.55: reading publication and daily target selection, without extra cards. */
#createReadingMaterialForm [hidden],
#createDailyCheckinForm [hidden] { display: none !important; }
#createReadingMaterialForm .reading-textbook-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  grid-column: 1 / -1;
  min-width: 0;
}
#createReadingMaterialForm .reading-textbook-passage,
#readingTextbookPreview,
#createReadingMaterialForm .reading-completion-note,
#createReadingMaterialForm .reading-custom-audio { grid-column: 1 / -1; min-width: 0; }
#createReadingMaterialForm .reading-custom-audio { display: grid; gap: 12px; }
#createReadingMaterialForm label,
#createDailyCheckinForm label { min-width: 0; }
#createReadingMaterialForm input,
#createReadingMaterialForm select,
#createReadingMaterialForm textarea,
#createDailyCheckinForm input,
#createDailyCheckinForm select,
#createDailyCheckinForm textarea { min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 16px; }
#createReadingMaterialForm select,
#createDailyCheckinForm select,
#createDailyCheckinForm input[type="search"] { min-height: 44px; }
#createReadingMaterialForm select,
#createDailyCheckinForm select {
  height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#createReadingMaterialForm .reading-completion-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
#readingTextbookPreview .reading-textbook-selection { display: grid; gap: 4px; padding-block: 8px; }
#readingTextbookPreview strong { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
#readingTextbookPreview small { color: var(--muted); line-height: 1.6; }
#readingTextbookPreview .reading-textbook-preview {
  border-top: 1px solid var(--line);
  padding-block: 8px;
  max-height: 260px;
  overflow: auto;
  overscroll-behavior: contain;
}
#readingTextbookPreview summary { cursor: pointer; min-height: 44px; align-content: center; font-size: 14px; }
#readingTextbookPreview p { font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
#createReadingMaterialForm.is-textbook .reading-publish-actions { grid-template-columns: minmax(0, 1fr); }
#createDailyCheckinForm .checkin-target-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
  margin-block: 8px;
}
#createDailyCheckinForm .checkin-target-tools label { margin: 0; }
#createDailyCheckinForm [data-checkin-selected-count] { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
#createDailyCheckinForm .checkin-target-opt { flex: 0 0 auto; height: auto; min-height: 44px; align-items: start; box-sizing: border-box; }
#createDailyCheckinForm .checkin-target-opt input { margin-top: 5px; flex: none; width: 18px; height: 18px; }
#createDailyCheckinForm .checkin-target-opt span { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
#createDailyCheckinForm .checkin-target-fieldset { min-width: 0; }
#createDailyCheckinForm .checkin-target-multi { max-height: 300px; overscroll-behavior: contain; }
#view-reading .reading-sync-button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
#view-reading .reading-catalog-heading { display: flex; align-items: center; gap: 8px; }
#view-reading .reading-catalog-heading > span { margin-left: auto; }
#createReadingMaterialForm :focus-visible,
#createDailyCheckinForm :focus-visible,
#view-reading .reading-sync-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 420px) {
  #createReadingMaterialForm .reading-textbook-picker { grid-template-columns: minmax(0, 1fr); }
  #createDailyCheckinForm .checkin-target-tools { gap: 6px; }
}

/* State recovery stays inline; it must not cover the audio player or other controls. */
.listen-sync-status,
.listen-audio-error {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 13px;
  line-height: 1.6;
}
.listen-sync-status { color: var(--muted); padding-block: 4px; }
.listen-sync-status[hidden], .listen-audio-error[hidden] { display: none; }
.listen-sync-status > span, .listen-audio-error > span { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.listen-sync-status button, .listen-audio-error button { flex: 0 0 auto; width: auto !important; min-height: 44px; white-space: nowrap; }
#passwordChangeForm { min-width: 0; }
#passwordChangeForm input { min-width: 0; width: 100%; box-sizing: border-box; font-size: 16px; }
#passwordChangeForm .auth-wide-action { min-height: 44px; white-space: normal; }
#passwordChangeForm .auth-note { overflow-wrap: anywhere; line-height: 1.6; }

/* ==== cv-anim.css ==== */
/* ========================================================================
   cv-anim.css · 批1 手感层 + 全局基建
   仅在沙盒 camvocab-动效实验-v5.2.0。消费 app 令牌(--accent/--surface/--ink…)，
   浅/深两套底色自动适配；增强现有全局类，命名前缀 cv-anim-；不改业务逻辑。
   尊重 app 的 html.cv-reduce-motion 与系统 prefers-reduced-motion。
   点位：A1 按钮 · A2 开关 · A3 输入 · A7 分段 · A6 Toast · A5 骨架(工具)
   ======================================================================== */

/* ── 基座：奖励点睛(双主题, 仅奖励处用) + 缓动 ── */
:root{
  --cv-reward:#f59e6b;
  --cv-reward-strong:#e5824a;
  --cv-spring:cubic-bezier(.34,1.4,.5,1);   /* 回弹 */
  --cv-ease:cubic-bezier(.3,.7,.4,1);
}
html.cv-dark{
  --cv-reward:#ffb27a;
  --cv-reward-strong:#ff9d5c;
}

/* ═══════════ A1 · 按钮 ═══════════ */
/* 主 CTA：靛蓝渐变 + 按压回弹。5.10.3：悬停不再上浮(触屏上会"卡"在浮起状态)，
   各类按钮按下统一轻缩到 .98 */
.primary-action{
  background:linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 92%) !important;
  transition:transform .18s var(--cv-spring), box-shadow .22s var(--cv-ease),
             background .2s ease, filter .2s ease !important;
}
.primary-action:hover{ filter:brightness(1.03); }
.primary-action:active{
  transform:scale(.98) !important;
  box-shadow:0 3px 10px -2px var(--accent-glow) !important;
  transition-duration:.06s !important;
}
/* 次按钮 / 药丸按钮 / 图标按钮：轻按压 */
.secondary-action, .pill-button, .icon-button{
  transition:transform .18s var(--cv-spring), box-shadow .2s var(--cv-ease),
             background .18s ease, border-color .18s ease !important;
}
.secondary-action:active, .pill-button:active, .icon-button:active{ transform:scale(.98) !important; transition-duration:.06s !important; }

/* ═══════════ A3 · 输入框聚焦柔光 ═══════════ */
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
textarea:focus,
select:focus{
  box-shadow:0 0 0 3px var(--accent-glow) !important;
  border-color:var(--accent) !important;
  transition:box-shadow .18s var(--cv-ease), border-color .18s ease !important;
}
.search-box{ transition:box-shadow .2s var(--cv-ease), border-color .2s ease; }
.search-box:focus-within{
  box-shadow:0 0 0 3px var(--accent-glow) !important;
  border-color:var(--accent) !important;
}

/* ═══════════ A7 · 分段切换：平滑 + 按压反馈 ═══════════ */
.segmented-control span, .segmented-control button, .segmented-control label,
.settings-seg button, .swipe-seg button, .words-mode-toggle .wm-btn{
  transition:background .24s var(--cv-ease), color .2s ease,
             box-shadow .24s var(--cv-ease), transform .12s var(--cv-spring) !important;
}
.settings-seg button:active, .swipe-seg button:active, .words-mode-toggle .wm-btn:active,
.segmented-control span:active, .segmented-control button:active, .segmented-control label:active{
  transform:scale(.98) !important;
}

/* ═══════════ A2 · 开关：果冻拨杆(设置抽屉 + 登录记住我) ═══════════ */
.setting-check input[type=checkbox],
.auth-row-options input[type=checkbox]{
  -webkit-appearance:none !important; appearance:none !important;
  position:relative !important; box-sizing:border-box !important;
  width:42px !important; height:24px !important; min-width:42px !important;
  flex:0 0 auto !important; vertical-align:middle !important;
  margin:0 9px 0 0 !important; padding:0 !important;
  border-radius:999px !important; background:var(--surface-3) !important;
  border:1px solid var(--hairline) !important; box-shadow:none !important;
  cursor:pointer !important;
  transition:background .3s var(--cv-spring), border-color .2s ease !important;
}
.setting-check input[type=checkbox]::before,
.auth-row-options input[type=checkbox]::before{
  content:""; position:absolute; top:1px; left:1px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.32);
  transition:transform .34s var(--cv-spring), width .18s var(--cv-spring) !important;
}
.setting-check input[type=checkbox]:checked,
.auth-row-options input[type=checkbox]:checked{
  background:var(--accent) !important; border-color:var(--accent) !important;
}
.setting-check input[type=checkbox]:checked::before,
.auth-row-options input[type=checkbox]:checked::before{ transform:translateX(18px); }
/* 拨动时滑块短暂拉伸=果冻感 */
.setting-check input[type=checkbox]:active::before,
.auth-row-options input[type=checkbox]:active::before{ width:24px; }
.setting-check input[type=checkbox]:checked:active::before,
.auth-row-options input[type=checkbox]:checked:active::before{ transform:translateX(14px); width:24px; }
.setting-check input[type=checkbox]:focus-visible,
.auth-row-options input[type=checkbox]:focus-visible{ box-shadow:0 0 0 3px var(--accent-glow) !important; }

/* ═══════════ A6 · Toast 统一四态 ═══════════ */
.cv-anim-toast{
  position:fixed; left:50%; top:22px; transform:translate(-50%,-150%);
  z-index:99999; display:flex; align-items:center; gap:10px;
  max-width:min(90vw,420px); padding:12px 15px;
  border-radius:14px; background:var(--surface); color:var(--ink);
  border:1px solid var(--hairline); box-shadow:var(--shadow-lg);
  font-size:14px; font-weight:600; line-height:1.4;
  opacity:0; pointer-events:auto; cursor:pointer;
  transition:transform .42s var(--cv-spring), opacity .3s ease;
}
.cv-anim-toast.cv-anim-in{ transform:translate(-50%,0); opacity:1; }
.cv-anim-toast-ic{
  width:20px; height:20px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:50%; color:#fff; font-size:12px; font-weight:800;
}
.cv-anim-toast-ic .ic{ width:12px; height:12px; stroke-width:2.1; }
.cv-anim-toast--success{ border-left:3px solid var(--green); }
.cv-anim-toast--success .cv-anim-toast-ic{ background:var(--green); }
.cv-anim-toast--info{ border-left:3px solid var(--accent); }
.cv-anim-toast--info .cv-anim-toast-ic{ background:var(--accent); }
.cv-anim-toast--warn{ border-left:3px solid #e0a53a; }
.cv-anim-toast--warn .cv-anim-toast-ic{ background:#e0a53a; }
.cv-anim-toast--error{ border-left:3px solid var(--red); }
.cv-anim-toast--error .cv-anim-toast-ic{ background:var(--red); }
/* 顺带升级已有 swipeToast 观感(不改其调用) */
.swipe-toast{
  border-radius:14px !important;
  box-shadow:var(--shadow-lg) !important;
  border:1px solid var(--hairline) !important;
}

/* ═══════════ A5 · 列表骨架工具(基于现有 cv-shimmer 关键帧) ═══════════ */
.cv-anim-skel{ display:flex; flex-direction:column; gap:12px; }
.cv-anim-skel-row{
  display:flex; align-items:center; gap:12px; padding:14px;
  border-radius:14px; background:var(--surface); border:1px solid var(--hairline);
}
.cv-anim-skel-lines{ flex:1; display:flex; flex-direction:column; gap:8px; }
.cv-anim-skel-av{ width:40px; height:40px; border-radius:50%; flex:0 0 auto; }
.cv-anim-skel-bar{ height:12px; border-radius:6px; }
.cv-anim-skel-bar.sm{ width:45%; }
.cv-anim-skel-bar.md{ width:70%; }
.cv-anim-skel-av, .cv-anim-skel-bar{
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size:280% 100%;
  animation:cv-shimmer 1.25s linear infinite;
}

/* ═══════════ 减弱动效：app 设置 + 系统偏好下停掉本层动画 ═══════════ */
html.cv-reduce-motion .primary-action, html.cv-reduce-motion .secondary-action,
html.cv-reduce-motion .pill-button, html.cv-reduce-motion .icon-button,
html.cv-reduce-motion input, html.cv-reduce-motion textarea, html.cv-reduce-motion select,
html.cv-reduce-motion .search-box, html.cv-reduce-motion .segmented-control *,
html.cv-reduce-motion .settings-seg button, html.cv-reduce-motion .swipe-seg button,
html.cv-reduce-motion .words-mode-toggle .wm-btn,
html.cv-reduce-motion .setting-check input[type=checkbox],
html.cv-reduce-motion .setting-check input[type=checkbox]::before,
html.cv-reduce-motion .auth-row-options input[type=checkbox],
html.cv-reduce-motion .auth-row-options input[type=checkbox]::before,
html.cv-reduce-motion .cv-anim-toast,
html.cv-reduce-motion .cv-anim-skel-av, html.cv-reduce-motion .cv-anim-skel-bar,
html.cv-reduce-motion .swipe-review[data-mode="word"] .swp2-flipcard .swp2-inner{
  transition-duration:.01ms !important; animation-duration:.01ms !important;
}
@media (prefers-reduced-motion:reduce){
  .primary-action, .secondary-action, .pill-button, .icon-button,
  input, textarea, select, .search-box, .segmented-control *,
  .settings-seg button, .swipe-seg button, .words-mode-toggle .wm-btn,
  .setting-check input[type=checkbox], .setting-check input[type=checkbox]::before,
  .auth-row-options input[type=checkbox], .auth-row-options input[type=checkbox]::before,
  .cv-anim-toast, .cv-anim-skel-av, .cv-anim-skel-bar,
  .swipe-review[data-mode="word"] .swp2-flipcard .swp2-inner{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   批2 · 奖励层 (由 cv-reward.js 解耦挂接;不改 app.js 业务逻辑)
   B2 答题反馈 · B3 结果卡 · B5 难词毕业 · B6 录音 · B4 打卡
   暖橙 --cv-reward 只在奖励/庆祝点睛;答对绿用 app 的 --green。
   ═══════════════════════════════════════════════════════════════════════ */

/* —— B2 答题反馈 —— */
@keyframes cv-b2-pop{0%{transform:scale(.55);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@keyframes cv-b2-shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(7px)}45%{transform:translateX(-5px)}60%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
.cv-b2-correct-anim{animation:cv-b2-pop .42s var(--cv-spring)}
.cv-b2-wrong-anim{animation:cv-b2-shake .5s ease}
.cv-b2-check{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;width:20px;height:20px;
  border-radius:50%;background:var(--green,#3fa87a);color:#fff;font-size:12px;font-weight:800;line-height:1;
  vertical-align:middle;animation:cv-b2-pop .44s var(--cv-spring) .06s both}
.cv-b2-check .ic{ width:12px; height:12px; stroke-width:2.2; }

/* —— B3 结果卡:分数环 + 分维度卡 stagger —— */
@property --cv-b3-deg{syntax:'<angle>';inherits:false;initial-value:0deg}
.cv-b3-ring{--cv-b3-deg:0deg;position:relative;width:128px;height:128px;border-radius:50%;margin:2px auto 16px;
  display:grid;place-items:center;
  background:conic-gradient(var(--cv-reward) var(--cv-b3-deg), color-mix(in srgb,var(--ink,#2c2a35) 12%,transparent) 0deg);
  transition:--cv-b3-deg 1.1s cubic-bezier(.3,.7,.4,1)}
.cv-b3-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--surface,#fff)}
.cv-b3-ring-in{position:relative;text-align:center;line-height:1.1}
.cv-b3-ring-num{font-size:30px;font-weight:800;color:var(--ink,#2c2a35);font-variant-numeric:tabular-nums}
.cv-b3-ring-sub{font-size:11.5px;color:var(--muted,#8888a0);margin-top:3px}
.cv-b3-stagger{animation:cv-b2-pop .5s var(--cv-ease) both}

/* —— B5 难词毕业:椭圆描边 + 勾(覆盖层,独立于卡片) —— */
.cv-b5-ov{position:fixed;z-index:99997;pointer-events:none}
.cv-b5-ov svg{overflow:visible;display:block}
.cv-b5-ell{fill:none;stroke:var(--accent,#544bc4);stroke-width:3.6;stroke-linecap:round;
  stroke-dasharray:560;stroke-dashoffset:560;animation:cv-b5-draw 1s cubic-bezier(.4,.9,.5,1) forwards}
@keyframes cv-b5-draw{to{stroke-dashoffset:0}}
.cv-b5-tick{transform:scale(0);transform-origin:center;opacity:0;animation:cv-b2-pop .42s var(--cv-spring) .68s forwards}

/* —— B6 录音:红胶囊闪烁 + 外圈波纹 + 计时 —— */
@keyframes cv-b6-blink{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes cv-b6-ripple{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.3);opacity:0}}
.cv-b6-recording{position:relative;background:var(--red,#e0664e) !important;border-color:var(--red,#e0664e) !important;
  color:#fff !important;animation:cv-b6-blink 1s ease-in-out infinite}
.cv-b6-recording::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--red,#e0664e);
  animation:cv-b6-ripple 1.4s ease-out infinite;pointer-events:none}
.cv-b6-timer{display:inline-block;margin-left:8px;font-variant-numeric:tabular-nums;font-weight:700}

/* —— B4 打卡:弹卡 + 连续天数气泡 —— */
@keyframes cv-b4-pop{0%{transform:scale(.66);opacity:0}55%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}}
.cv-b4-pop{animation:cv-b4-pop .6s var(--cv-spring)}
/* 打卡完成时弹出的「🔥 连续N」气泡。原来 top:-9px 顶出卡片上沿、又压在右侧按钮上方 → 悬空错位。
   改成卡内右上角一枚干净的小药丸(不顶出、加底衬更像徽章),2.6s 后自动消失。 */
.cv-b4-streak{position:absolute;top:8px;right:10px;display:inline-flex;align-items:center;gap:3px;
  font-size:12.5px;font-weight:800;color:var(--cv-reward);
  background:var(--surface);border:1px solid var(--hairline-soft);border-radius:999px;padding:2px 8px;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  animation:cv-b4-pop .6s var(--cv-spring) both;z-index:20;pointer-events:none}
.cv-b4-streak .ic{width:14px;height:14px;flex:none}
.cv-b4-streak span{line-height:1}
.swipe-toast .ic{width:16px;height:16px;margin-left:3px;vertical-align:-3px}

/* —— 批2 reduced-motion 降级 —— */
html.cv-reduce-motion .cv-b2-correct-anim, html.cv-reduce-motion .cv-b2-wrong-anim,
html.cv-reduce-motion .cv-b2-check, html.cv-reduce-motion .cv-b3-ring,
html.cv-reduce-motion .cv-b3-stagger, html.cv-reduce-motion .cv-b5-ell,
html.cv-reduce-motion .cv-b5-tick, html.cv-reduce-motion .cv-b6-recording,
html.cv-reduce-motion .cv-b6-recording::after, html.cv-reduce-motion .cv-b4-pop,
html.cv-reduce-motion .cv-b4-streak{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
@media (prefers-reduced-motion:reduce){
  .cv-b2-correct-anim,.cv-b2-wrong-anim,.cv-b2-check,.cv-b3-ring,.cv-b3-stagger,
  .cv-b5-ell,.cv-b5-tick,.cv-b6-recording,.cv-b6-recording::after,.cv-b4-pop,.cv-b4-streak{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   难词库手机端重排 (方案A · 行动优先) — 只调布局,不改数据逻辑
   ═══════════════════════════════════════════════════════════════════════ */
#view-wrong .cvw-head{display:flex;flex-direction:column;gap:10px}
#view-wrong .cvw-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#view-wrong .cvw-top h2{font-size:19px;font-weight:800;margin:0;letter-spacing:-.01em;flex:0 0 auto;white-space:nowrap}
#view-wrong .cvw-top .cvw-due{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
#view-wrong .cvw-due{font-size:12px;font-weight:700;white-space:nowrap;border-radius:999px;padding:5px 11px;
  color:var(--cv-reward-strong,#e5824a);background:var(--cv-reward-100,#fdeadd);
  font-variant-numeric:tabular-nums}
#view-wrong .cvw-due-empty{color:var(--muted);background:var(--surface-2)}
#view-wrong .cvw-info{margin-left:auto;flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--hairline);background:var(--surface);color:var(--muted);
  font-style:italic;font-weight:700;font-size:13px;cursor:pointer;line-height:1}
#view-wrong .cvw-info:hover{border-color:var(--accent);color:var(--accent)}
#view-wrong .cvw-intro{font-size:12.5px;color:var(--muted);line-height:1.55;
  background:var(--surface-2);border-radius:10px;padding:10px 12px}
#view-wrong .cvw-intro[hidden]{display:none}
#view-wrong .cvw-intro-x{margin-left:6px;color:var(--accent);font-weight:700;
  background:none;border:none;cursor:pointer;font:inherit;font-size:12.5px;white-space:nowrap}
#view-wrong .cvw-actions{display:flex;flex-direction:column;gap:8px}
#view-wrong .cvw-cta{font-size:15px;padding:14px}
#view-wrong .cvw-row{display:flex;gap:8px;align-items:stretch}
/* 覆盖 styles.css 给 .secondary-action 的 width:100%(否则挤爆一行);难词测验取内容宽,开关占余下 */
#view-wrong .cvw-quiz{flex:0 1 auto !important;width:auto !important;white-space:nowrap;padding-left:20px;padding-right:20px}
#view-wrong .cvw-switch{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--hairline);border-radius:11px;background:var(--surface);
  padding:9px 12px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--ink)}
#view-wrong .cvw-switch-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-wrong .cvw-switch-track{width:34px;height:19px;border-radius:999px;background:var(--surface-3);
  position:relative;flex:0 0 auto;transition:background .2s ease}
#view-wrong .cvw-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s var(--cv-spring,ease)}
#view-wrong .cvw-switch.is-on{border-color:color-mix(in srgb,var(--green,#3fa87a) 40%,transparent)}
#view-wrong .cvw-switch.is-on .cvw-switch-track{background:var(--green,#3fa87a)}
#view-wrong .cvw-switch.is-on .cvw-switch-track::after{transform:translateX(15px)}
html.cv-reduce-motion #view-wrong .cvw-switch-track,
html.cv-reduce-motion #view-wrong .cvw-switch-track::after{transition-duration:.01ms !important}
/* 关键:覆盖全局"内容优先"(ultimate .view-grid>aside{order:2})——难词库让控制头置顶,词表在下 */
#view-wrong .view-grid > aside.cvw-head{ order:1 !important; }
#view-wrong .view-grid > section{ order:2 !important; }

/* ═══ 禁止双指/双击缩放(保留滚动)——顶/底栏不再因缩放跳动 ═══ */
html{ touch-action:pan-x pan-y; }

/* ═══ 首页加载态卡片宽度对齐(修复"老鼠跑轮框比加载后窄") ═══
   .today-focus-layout 是 grid-template-columns:minmax(0,1fr),但 1fr 只有在容器"确定宽度"时才铺满;
   手机端它没有确定宽度(refine.css 的 width:100% 只在 @min-width:1181px 桌面生效),于是 1fr 退化成
   按"内容"定宽 → 加载态内容短("正在同步老师作业…"/老鼠) → 整框被 shrink-wrap 成很窄;加载后内容多才变宽。
   这里给首页容器链补上"全宽",让加载态和加载后一样宽。 */
body[data-view="today"] #view-today,
body[data-view="today"] .today-focus-layout,
body[data-view="today"] .today-plan-card{ width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

/* ═══ B1 词卡翻面(批3):刷卡"只显单词"模式点卡翻面——正面=单词,背面=单词+释义+例句。
   关键架构:外层 .swp2-card 保持平面(参与上下滑动、可命中点击),只翻内层 .swp2-inner;
   操作栏(.swp2-actions)在 inner 外的平面上——始终可点(翻不回来/例句点不到 的根因就是旧版把整卡旋转,
   旋转层让点击落到轨道上)。严格限定 data-mode=word 才翻;"单词+释义"(both)模式两面平铺、不翻。 ═══ */
.swp2-flipcard .swp2-inner{ position:relative; width:100%; flex:1 1 auto; }
.swp2-flipcard .swp2-face{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.swp2-rev-word{ display:none; }
.swp2-play-ex{
  margin-top:2px; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--hairline-soft, rgba(0,0,0,.16)); background:var(--surface); color:var(--accent);
  padding:7px 15px; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer;
}
.swp2-play-ex .ic{ width:15px; height:15px; }
/* 导航提示改为文档流(原 absolute 会压在操作按钮上);只首卡有,自然落在操作栏下方,不再重叠 */
.swipe-review .swp2-flipcard .swp2-nav{ position:static; margin-top:6px; }

/* —— WORD 模式:只给"当前这张"卡片(.swp2-at,由 swipePosition 标记)启用 3D 翻面上下文;
   其余卡片保持平面 → 上下滑动的合成负担与 both 模式一致,一样顺滑。 —— */
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at{ perspective:1400px; }
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at .swp2-inner{
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.72,.3,1);
}
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at.on .swp2-inner{ transform:rotateY(180deg); }
/* 版式对所有卡一致(5.10.3 刷卡跟手后:慢拖时下一张会露出来,若它用平铺版式,单词会顶到卡沿、和词性标签叠在一起);
   3D 相关(背面隐藏)仍只给当前卡。 */
.swipe-review[data-mode="word"] .swp2-flipcard .swp2-face{
  position:absolute; inset:0; padding:8px 26px; box-sizing:border-box;
}
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at .swp2-face{
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at .swp2-back{ transform:rotateY(180deg); }
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at .swp2-rev{ opacity:1 !important; visibility:visible !important; margin:0; }
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at .swp2-rev-word{ display:block; font-size:24px; font-weight:700; color:var(--ink); letter-spacing:.3px; margin-bottom:8px; }
/* 非当前卡:平面,只显正面(背面藏起),零 3D 开销 */
.swipe-review[data-mode="word"] .swp2-flipcard:not(.swp2-at) .swp2-back{ display:none; }
/* 例句朗读只在"当前卡翻到背面"时出现;操作栏在平面上,按钮始终可命中 */
.swipe-review[data-mode="word"] .swp2-play-ex{ display:none; }
.swipe-review[data-mode="word"] .swp2-flipcard.swp2-at.on .swp2-play-ex{ display:inline-flex; }
/* 翻到背面(操作栏多一个"朗读例句")时,隐藏首卡的"滑一次走一个"提示,避免叠字 */
.swipe-review[data-mode="word"] .swp2-flipcard.on .swp2-nav{ display:none; }

/* —— BOTH 模式:两面平铺、不翻;隐藏背面重复的小号单词与"点一下看释义"提示 —— */
.swipe-review[data-mode="both"] .swp2-flipcard .swp2-face{ position:static; }
.swipe-review[data-mode="both"] .swp2-rev-word{ display:none; }
.swipe-review[data-mode="both"] .swp2-flipcard .swp2-flip{ display:none; }
/* 徽章默认 absolute(top:26px),平铺后前面板不再撑满整卡→徽章会压到单词上。both 模式下让徽章回到文档流,叠在单词上方。 */
.swipe-review[data-mode="both"] .swp2-flipcard .swp2-badges{ position:static; margin:0 0 12px; }
/* both 模式底部有"朗读例句"按钮,首卡的"滑一次走一个"提示会被压叠,隐掉(提示在 word 模式正面仍在) */
.swipe-review[data-mode="both"] .swp2-flipcard .swp2-nav{ display:none; }

/* ═══════════════════════════════════════════════════════════════════════
   C 登录页(批3 · 场景层)
   C1 输入=手账缝线虚线描边 + focus 高亮 + 错误 shake + 校验提示(shake/提示由 cv-anim.js 派发)
   C3 整页背景=象牙+淡靛 缓慢流动氛围
   C4 登录|注册 tab=白胶囊滑动(与 A7 分段统一)
   仅作用于 .auth-screen;登录后 #authScreen display:none 自动消失。
   ═══════════════════════════════════════════════════════════════════════ */

/* —— C3 整页背景缓慢流动(fixed 铺满视口,不撑滚动区、不裁剪长表单) —— */
.auth-screen{ position:relative; }
.auth-screen::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 24%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%),
    radial-gradient(34% 40% at 84% 78%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 64%),
    radial-gradient(30% 34% at 74% 16%, color-mix(in srgb, var(--surface-3) 65%, transparent), transparent 60%);
  animation:cv-auth-flow 34s ease-in-out infinite alternate;
  will-change:transform;
}
.auth-screen > *{ position:relative; z-index:1; }
@keyframes cv-auth-flow{
  0%  { transform:translate3d(-3%,-2%,0) rotate(0deg)  scale(1.06); }
  50% { transform:translate3d(2%,3%,0)   rotate(6deg)  scale(1.13); }
  100%{ transform:translate3d(4%,-1%,0)  rotate(-4deg) scale(1.07); }
}

/* —— C4 登录|注册 tab 白胶囊滑动 —— */
.auth-tabs{ position:relative; }
.auth-tabs::before{
  content:''; position:absolute; top:4px; bottom:4px; left:4px;
  width:calc(50% - 4px); border-radius:10px;
  background:var(--surface); box-shadow:var(--shadow-sm);
  transition:transform .34s cubic-bezier(.34,1.28,.42,1);
  z-index:0;
}
.auth-tabs:has(#showRegisterBtn.active)::before{ transform:translateX(100%); }
.auth-tabs button{ position:relative; z-index:1; }
/* 让滑动胶囊成为唯一指示物:去掉 active 按钮自带的底色/阴影(保留字色变化) */
.auth-tabs button.active{ background:transparent !important; box-shadow:none !important; }

/* —— C1 输入 手账缝线虚线描边 —— */
.auth-form input, .auth-form select,
.wechat-bind-panel input{
  border-style:dashed !important;
  border-width:1.5px !important;
  border-color:color-mix(in srgb, var(--accent) 24%, var(--hairline)) !important;
}
.auth-form input:focus, .auth-form select:focus,
.wechat-bind-panel input:focus{
  border-style:solid !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 4px var(--accent-soft) !important;
}
/* —— C1 校验错误:shake + 玫红虚线(玫红=[[cv-rose]] 点睛,仅提示,不与奖励暖橙冲突) —— */
.auth-form input.cv-auth-bad, .auth-form select.cv-auth-bad{
  border-style:dashed !important;
  border-color:var(--cv-rose, #c2385a) !important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--cv-rose, #c2385a) 16%, transparent) !important;
  animation:cv-auth-shake .46s cubic-bezier(.36,.07,.19,.97);
}
@keyframes cv-auth-shake{
  10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)}
}
.cv-auth-hint{
  display:block; margin-top:6px; font-size:12px; font-weight:600;
  color:var(--cv-rose, #c2385a); letter-spacing:.2px;
}

/* —— C 减弱动效降级 —— */
html.cv-reduce-motion .auth-screen::before,
html.cv-reduce-motion .auth-tabs::before,
html.cv-reduce-motion .auth-form input.cv-auth-bad,
html.cv-reduce-motion .auth-form select.cv-auth-bad{
  animation-duration:.01ms !important; transition-duration:.01ms !important;
}
@media (prefers-reduced-motion:reduce){
  .auth-screen::before, .auth-tabs::before,
  .auth-form input.cv-auth-bad, .auth-form select.cv-auth-bad{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   B7 写作框(批3 · 场景层)
   写作 textarea focus=边框呼吸微光;标题行右侧=靛蓝铅笔 EDIT 按钮(点击聚焦并滚入视野)
   仅 compose 那个 textarea(#writingOcrText)加 EDIT;只读回看 textarea 不呼吸(:not([readonly]))
   ═══════════════════════════════════════════════════════════════════════ */
.writing-textarea-label textarea:focus:not([readonly]){
  border-color:var(--accent) !important;
  outline:none !important;
  animation:cv-b7-breathe 2.4s ease-in-out infinite;
}
@keyframes cv-b7-breathe{
  0%,100%{ box-shadow:0 0 0 2px var(--accent-soft), 0 0 8px 0 rgba(84,75,196,.12); }
  50%    { box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 16px 2px rgba(84,75,196,.22); }
}

/* 标题行:标题 + 右侧 EDIT */
.cv-b7-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* 铅笔「编辑」按钮。5.10.3：改成浅色次按钮(主题浅底 + 主题深色字)，不再用渐变、光晕和大写字距；
   键盘焦点是 2px 主题色描边(全局 button:focus-visible 会去掉 outline，这里要 !important 补回) */
.cv-b7-edit{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  padding:0 14px; min-height:34px;
  font-size:13px; font-weight:650; letter-spacing:0; text-transform:none;
  color:var(--accent-ink); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius:999px; cursor:pointer;
  background:var(--accent-soft); background-image:none;
  box-shadow:none;
  transition:background-color .16s var(--ease,ease), transform .12s var(--ease,ease);
}
.cv-b7-edit:active{ transform:scale(.98); transition:transform .1s ease; }
.cv-b7-edit:focus-visible{ outline:2px solid var(--accent) !important; outline-offset:2px; box-shadow:none !important; border-radius:999px; }
.cv-b7-pencil{ width:15px; height:15px; display:block; overflow:visible; transform-origin:50% 50%; }
@media (hover:hover) and (pointer:fine){
  .cv-b7-edit:hover{ background:color-mix(in srgb, var(--accent) 14%, var(--surface)); }
  html.cv-dark .cv-b7-edit:hover{ background:color-mix(in srgb, var(--accent) 14%, var(--accent-soft)); }
  .cv-b7-edit:hover .cv-b7-pencil{ animation:cv-b7-write .6s ease-in-out infinite; }
}
@keyframes cv-b7-write{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  25%{ transform:translate(1px,-1px) rotate(-6deg); }
  50%{ transform:translate(1.6px,0) rotate(0deg); }
  75%{ transform:translate(1px,1px) rotate(6deg); }
}
@keyframes cv-b7-stroke{
  0%{ stroke-dashoffset:10; opacity:.55; } 55%{ stroke-dashoffset:0; opacity:.9; } 100%{ stroke-dashoffset:0; opacity:0; }
}

/* —— B7 减弱动效降级 —— */
html.cv-reduce-motion .writing-textarea-label textarea:focus:not([readonly]),
html.cv-reduce-motion .cv-b7-edit .cv-b7-pencil{ animation-duration:.01ms !important; }
@media (prefers-reduced-motion:reduce){
  .writing-textarea-label textarea:focus:not([readonly]),
  .cv-b7-edit .cv-b7-pencil{ animation-duration:.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   A4 学习背景库(批3 · 场景层)
   html[data-bg] body::after 铺一层淡纸纹(z-index:-1,压在氛围洗色 body::before[-2] 之上、
   内容之下)。全部象牙底 + 淡靛低对比;深色下换稍亮靛蓝。设置里卡片单选,default=纯净(无 data-bg)。
   纯静态,无动画。
   ═══════════════════════════════════════════════════════════════════════ */
html[data-bg]{ --cv-bg-ink:rgba(84,75,196,.12); --cv-bg-ink-2:rgba(84,75,196,.07); }
html.cv-dark[data-bg]{ --cv-bg-ink:rgba(160,152,244,.11); --cv-bg-ink-2:rgba(160,152,244,.06); }
html[data-bg] body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-repeat:repeat;
}
/* 点阵纸:细密圆点 */
html[data-bg="dots"] body::after{
  background-image:radial-gradient(var(--cv-bg-ink) 1.4px, transparent 1.6px);
  background-size:22px 22px;
}
/* 作业本:方格线 */
html[data-bg="grid"] body::after{
  background-image:
    linear-gradient(var(--cv-bg-ink-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--cv-bg-ink-2) 1px, transparent 1px);
  background-size:26px 26px;
}
/* 象牙波点:大号交错圆点 */
html[data-bg="polka"] body::after{
  background-image:
    radial-gradient(var(--cv-bg-ink) 5px, transparent 6px),
    radial-gradient(var(--cv-bg-ink) 5px, transparent 6px);
  background-size:48px 48px; background-position:0 0, 24px 24px;
}
/* 米色折纸:交错斜向折痕 */
html[data-bg="origami"] body::after{
  background-image:
    repeating-linear-gradient(45deg, var(--cv-bg-ink-2) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-45deg, var(--cv-bg-ink-2) 0 1px, transparent 1px 44px);
}

/* —— A4 设置里的背景单选卡 —— */
.bg-picker{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:8px; margin-top:8px;
  --cv-bg-ink:rgba(84,75,196,.18); --cv-bg-ink-2:rgba(84,75,196,.11);
}
html.cv-dark .bg-picker{ --cv-bg-ink:rgba(160,152,244,.20); --cv-bg-ink-2:rgba(160,152,244,.12); }
.bg-swatch{
  display:flex; flex-direction:column; gap:6px; padding:6px; cursor:pointer;
  border-radius:14px; border:1.5px solid var(--hairline); background:var(--surface);
  transition:border-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease), transform .1s var(--ease,ease);
}
.bg-swatch:active{ transform:scale(.97); }
.bg-swatch.active{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.bg-swatch-prev{
  display:block; height:44px; border-radius:9px;
  background-color:var(--surface-2,var(--bg)); background-repeat:repeat;
  border:1px solid var(--hairline-soft,rgba(0,0,0,.05));
}
.bg-swatch-name{
  display:flex; align-items:center; justify-content:space-between; gap:4px;
  font-size:12px; font-weight:700; color:var(--ink);
}
.bg-swatch .swatch-check{ opacity:0; color:var(--accent); font-weight:900; }
.bg-swatch.active .swatch-check{ opacity:1; }
.cv-bgsw-none{ background-image:none; }
.cv-bgsw-dots{ background-image:radial-gradient(var(--cv-bg-ink) 1.4px, transparent 1.6px); background-size:11px 11px; }
.cv-bgsw-grid{
  background-image:linear-gradient(var(--cv-bg-ink-2) 1px,transparent 1px),linear-gradient(90deg,var(--cv-bg-ink-2) 1px,transparent 1px);
  background-size:12px 12px;
}
.cv-bgsw-polka{
  background-image:radial-gradient(var(--cv-bg-ink) 3px,transparent 4px),radial-gradient(var(--cv-bg-ink) 3px,transparent 4px);
  background-size:20px 20px; background-position:0 0,10px 10px;
}
.cv-bgsw-origami{
  background-image:repeating-linear-gradient(45deg,var(--cv-bg-ink-2) 0 1px,transparent 1px 12px),repeating-linear-gradient(-45deg,var(--cv-bg-ink-2) 0 1px,transparent 1px 12px);
}

/* ═══════════════════════════════════════════════════════════════════════
   成长档案(calm-ui 5.10.3):去掉 2026-07 的「涂鸦手账」装饰——波浪下划线、铅笔/角落涂鸦、
   头图太阳和星簇、歪角统计卡、卡片 ±0.5° 旋转,让它在所有风格下都像一份干净的学习档案。
   卡片的边框、圆角、阴影交给设计系统(aivia-ds.css 的 .surface-card);这里只保留不影响外观的定位。
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --cv-icon-check:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M20%206L9%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
}
#view-growth .growth-grid > .surface-card,
#view-growth > .growth-archive .growth-grid > .surface-card,
#view-growth .growth-hero{ position:relative; overflow:visible; }

/* 老师端学生总表"掌握"头牌数:暖色点睛(成就),白底上取较深暖色保证可读 */
.cv-tea-master{ color:#bf6a2a; font-weight:850; font-size:15px; font-variant-numeric:tabular-nums; }
html.cv-dark .cv-tea-master{ color:var(--joy, #f59e6b); }

/* ═══ 首页成长入口条:学过 + 掌握 双数(让学生心里有数)。掌握=成就,用暖色点睛(方向A) ═══ */
.home-growth-stats{ display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 14px; margin-top:3px; }
.hg-stat{ font-size:12px; color:var(--muted); display:inline-flex; align-items:baseline; gap:3px; white-space:nowrap; }
.hg-stat b{ font-size:16px; font-weight:850; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:.2px; }
.hg-stat--master b{ color:var(--joy, #f59e6b); }
.hg-stat--dim{ color:var(--muted-2, var(--muted)); }
.hg-stat--dim, .hg-stat--dim b{ font-weight:600; }

/* ═══ 精学顶部工具条(Q3):精学|刷卡 + 词卡范围「只学新词|全部单词」两条常显选择条 ═══ */
.cv-study-topbar{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 0 10px; }
.cv-study-topbar .words-mode-toggle{ margin:0; }
.cv-study-topbar .cv-study-scope{ margin:0; }
@media (min-width:721px){
  .cv-study-topbar{ flex-direction:row; justify-content:center; flex-wrap:wrap; }
}

/* ═══ calm-ui 5.10.3:角色只留 Dot —— 加载和空状态换成安静的样子 ═══
   跑轮小老鼠(.cvh,加载中)和水豚(.cvc,空状态)不再显示。标记仍由 app.js 生成,文字、role=status 都不变,
   这里只换外观:加载是一条细的往返进度条(和启动画面 #cvSplash 的进度条同一款),空状态是一个线条图标。
   小老鼠的标记留在 app.js 的 cvHamsterMarkup 里,人设档案以后要在 Dot 日记里用它(Comma)。 */
:root{
  --cv-icon-empty:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2012h-6l-2%203h-4l-2-3H2%22%2F%3E%3Cpath%20d%3D%22M5.45%205.11%202%2012v6a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-6l-3.45-6.89A2%202%200%200%200%2016.76%204H7.24a2%202%200%200%200-1.79%201.11z%22%2F%3E%3C%2Fsvg%3E");
}
.cvh, .cvc{ font-size:0 !important; transform:none !important; flex:none; margin:0 !important; }
.cvh > *, .cvc > *{ display:none !important; }
/* 加载:96×3 的细轨道,一小段动作色来回滑动;放在文字下面 */
.cvh{
  order:2; width:96px !important; height:3px !important; border-radius:2px; overflow:hidden;
  background:var(--hairline, #dfe3ea);
}
.cvh::after{
  content:""; display:block; width:32px; height:100%; border-radius:inherit;
  background:var(--academy-action, var(--accent, #544bc4));
  animation:cv-calm-travel 1.4s ease-in-out infinite alternate;
}
@keyframes cv-calm-travel{ to{ transform:translateX(64px); } }
.cv-anim-compact{ flex-direction:column; align-items:flex-start; justify-content:center; gap:10px; }
/* 空状态:浅底圆里一个线条图标,颜色随主题 */
.cvc{
  display:grid !important; place-items:center; width:48px !important; height:48px !important;
  border-radius:50%; background:var(--surface-2, #f2f4f7); color:var(--muted, #6b7280);
}
.cvc::before{
  content:""; width:22px; height:22px; background:currentColor;
  -webkit-mask:var(--cv-icon-empty) center / contain no-repeat; mask:var(--cv-icon-empty) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce){ .cvh::after{ animation:none; transform:translateX(32px); } }
html.cv-reduce-motion .cvh::after{ animation:none; transform:translateX(32px); }

/* ==== cv-milestone.css ==== */
/* 学生成长成就:8 条成长线、45 枚可信徽章。 */
.cv-ms-shelf {
  --ms-surface: var(--surface, #fff);
  --ms-surface-2: var(--surface-2, #f7f5f0);
  --ms-surface-3: var(--surface-3, #e9e5dc);
  --ms-line: var(--hairline, rgba(60, 50, 35, .12));
  --ms-ink: var(--ink, #211f2b);
  --ms-muted: var(--muted, #706e7a);
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 2px 0 6px;
}

.cv-ms-shelf button { font: inherit; letter-spacing: 0; }
.cv-ms-shelf svg,
.cv-ms-dialog svg { display: block; width: 1em; height: 1em; }

.cv-ms-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 0 2px;
}
.cv-ms-head > div { min-width: 0; }
.cv-ms-head span {
  display: block;
  margin-bottom: 2px;
  color: var(--accent-ink, #3a328f);
  font-size: 11px;
  font-weight: 800;
}
.cv-ms-head h3 {
  margin: 0;
  color: var(--ms-ink);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0;
}
.cv-ms-head > div > small {
  display: block;
  margin-top: 3px;
  color: var(--ms-muted);
  font-size: 11.5px;
  line-height: 1.45;
}
.cv-ms-head p {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0 0 2px;
  color: var(--ms-muted);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: right;
}
.cv-ms-head p strong { color: var(--accent, #544bc4); font-size: 17px; font-variant-numeric: tabular-nums; }
.cv-ms-head p span { white-space: nowrap; }

.cv-ms-focus {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent, #544bc4) 18%, var(--ms-line));
  border-radius: 16px;
  background: var(--ms-surface);
  box-shadow: 0 8px 24px rgba(42, 36, 75, .06);
}
.cv-ms-focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 39px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ms-line);
  background: color-mix(in srgb, var(--accent, #544bc4) 4%, var(--ms-surface));
}
.cv-ms-focus-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-ink, #3a328f);
  font-size: 10.5px;
  font-weight: 850;
}
.cv-ms-focus-head span .ic { width: 14px; height: 14px; }
.cv-ms-focus-head small { color: var(--ms-muted); font-size: 10px; }
.cv-ms-focus-journey {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
}
.cv-ms-focus-piece {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-width: 0;
  min-height: 118px;
  padding: 15px 18px;
  border: 0;
  background: transparent;
  color: var(--ms-ink);
  cursor: pointer;
  text-align: left;
}
.cv-ms-focus-piece.is-starting { cursor: default; }
.cv-ms-focus-piece > .ic { width: 16px; height: 16px; color: var(--ms-muted); }
.cv-ms-focus-piece > .cv-ms-emblem {
  width: 58px;
  height: 58px;
  margin: 0;
}
.cv-ms-focus-piece > .cv-ms-emblem::before { inset: 4px; border-width: 4px; }
.cv-ms-focus-piece > .cv-ms-emblem::after { inset: 12px; }
.cv-ms-focus-piece > .cv-ms-emblem .cv-ms-glyph .ic { width: 21px; height: 21px; }
.cv-ms-focus-piece > .cv-ms-emblem .cv-ms-rank {
  right: -1px;
  bottom: 1px;
  min-width: 20px;
  height: 20px;
  padding-inline: 4px;
  font-size: 8.5px;
}
.cv-ms-focus-piece > .cv-ms-emblem .cv-ms-crown { top: -5px; }
.cv-ms-focus-piece > .cv-ms-emblem .cv-ms-crown .ic { width: 19px; height: 19px; }
.cv-ms-focus-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--cat, var(--accent, #544bc4)) 11%, var(--ms-surface));
  color: var(--cat, var(--accent, #544bc4));
}
.cv-ms-focus-icon .ic { width: 27px; height: 27px; }
.cv-ms-focus-copy,
.cv-ms-focus-copy small,
.cv-ms-focus-copy strong,
.cv-ms-focus-copy em { display: block; min-width: 0; }
.cv-ms-focus-copy small { color: var(--cat, var(--accent, #544bc4)); font-size: 10.5px; font-weight: 850; }
.cv-ms-focus-copy strong { margin-top: 2px; overflow: hidden; color: var(--ms-ink); font-size: 16px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.cv-ms-focus-copy em { margin-top: 3px; color: var(--ms-muted); font-size: 11px; font-style: normal; line-height: 1.45; }
.cv-ms-focus-copy .cv-ms-focus-progress-row { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.cv-ms-focus-progress {
  display: block;
  flex: 1;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cat, var(--accent, #544bc4)) 11%, var(--ms-surface-2));
}
.cv-ms-focus-progress i { display: block; height: 100%; border-radius: inherit; background: var(--cat, var(--accent, #544bc4)); }
.cv-ms-focus-value { min-width: 35px; color: var(--cat, var(--accent, #544bc4)); font-size: 10.5px; font-variant-numeric: tabular-nums; text-align: right; }
.cv-ms-focus-connector { position: relative; display: grid; place-items: center; color: var(--accent, #544bc4); }
.cv-ms-focus-connector::before { position: absolute; right: 0; left: 0; height: 1px; background: var(--ms-line); content: ""; }
.cv-ms-focus-connector span { z-index: 1; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--ms-line); border-radius: 50%; background: var(--ms-surface); }
.cv-ms-focus-connector .ic { width: 15px; height: 15px; }
.cv-ms-focus-note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 0;
  padding: 9px 16px;
  border-top: 1px solid var(--ms-line);
  background: var(--ms-surface-2);
  color: var(--ms-muted);
  font-size: 11px;
  line-height: 1.45;
}
.cv-ms-focus-note > .ic { flex: none; width: 15px; height: 15px; color: var(--accent, #544bc4); }
.cv-ms-focus-note strong { color: var(--ms-ink); }
.cv-ms-focus-complete-body { display: flex; align-items: center; gap: 14px; padding: 17px 18px; }
.cv-ms-focus-complete-body > span:last-child,
.cv-ms-focus-complete-body small,
.cv-ms-focus-complete-body strong,
.cv-ms-focus-complete-body em { display: block; }
.cv-ms-focus-complete-body small { color: var(--accent-ink, #3a328f); font-size: 10.5px; font-weight: 800; }
.cv-ms-focus-complete-body strong { margin-top: 2px; color: var(--ms-ink); font-size: 16px; }
.cv-ms-focus-complete-body em { margin-top: 3px; color: var(--ms-muted); font-size: 11px; font-style: normal; }

.cv-ms-weekly {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  align-items: center;
  gap: 14px 22px;
  min-width: 0;
  padding: 14px 2px 2px;
  border-top: 1px solid var(--ms-line);
}
.cv-ms-week-main,
.cv-ms-week-main span,
.cv-ms-week-main strong,
.cv-ms-week-main small { display: block; min-width: 0; }
.cv-ms-week-kicker { color: var(--accent-ink, #3a328f); font-size: 10.5px; font-weight: 850; }
.cv-ms-week-main strong { margin-top: 3px; color: var(--ms-ink); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.cv-ms-week-main small { margin-top: 3px; color: var(--ms-muted); font-size: 10.8px; line-height: 1.45; }
.cv-ms-week-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}
.cv-ms-week-metric {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 50px;
  padding: 4px 10px;
}
.cv-ms-week-metric + .cv-ms-week-metric { border-left: 1px solid var(--ms-line); }
.cv-ms-week-metric > .ic { width: 18px; height: 18px; color: var(--accent, #544bc4); }
.cv-ms-week-metric span,
.cv-ms-week-metric strong,
.cv-ms-week-metric small { display: block; min-width: 0; }
.cv-ms-week-metric strong { color: var(--ms-ink); font-size: 17px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cv-ms-week-metric small { margin-top: 2px; color: var(--ms-muted); font-size: 9.8px; line-height: 1.3; overflow-wrap: anywhere; }
.cv-ms-week-history {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid var(--ms-line);
}
.cv-ms-week-history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 4px 0;
  color: var(--ms-ink);
  cursor: pointer;
  list-style: none;
}
.cv-ms-week-history summary::-webkit-details-marker { display: none; }
.cv-ms-week-history summary > span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cv-ms-week-history summary .ic { flex: none; width: 15px; height: 15px; color: var(--accent, #544bc4); }
.cv-ms-week-history summary strong { font-size: 11.5px; }
.cv-ms-week-history summary small { overflow: hidden; color: var(--ms-muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.cv-ms-week-history summary > .ic { transition: transform .18s ease; }
.cv-ms-week-history[open] summary > .ic { transform: rotate(180deg); }
.cv-ms-week-history ol { display: grid; gap: 0; margin: 0; padding: 0 0 4px; list-style: none; }
.cv-ms-week-history li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 0;
  border-top: 1px solid var(--ms-line);
}
.cv-ms-week-history-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--cat) 10%, var(--ms-surface)); color: var(--cat); }
.cv-ms-week-history-icon .ic { width: 16px; height: 16px; }
.cv-ms-week-history li > span:nth-child(2),
.cv-ms-week-history li strong,
.cv-ms-week-history li small { display: block; min-width: 0; }
.cv-ms-week-history li strong { overflow: hidden; color: var(--ms-ink); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.cv-ms-week-history li small,
.cv-ms-week-history time { color: var(--ms-muted); font-size: 10px; }
.cv-ms-week-history time { white-space: nowrap; }
.cv-ms-week-empty { grid-column: 1 / -1; min-width: 0; }
.cv-ms-week-empty .cv-anim-empty { min-height: 116px; padding-block: 4px; }
.cv-ms-week-empty-copy { display: grid; gap: 4px; min-height: 80px; place-content: center; text-align: center; }
.cv-ms-week-empty-copy strong { color: var(--ms-ink); font-size: 14px; }
.cv-ms-week-empty-copy small { color: var(--ms-muted); font-size: 11px; }
.cv-ms-week-loader { justify-self: end; width: 22px; height: 22px; border: 2px solid var(--ms-line); border-top-color: var(--accent, #544bc4); border-radius: 50%; animation: cv-ms-week-spin .8s linear infinite; }
@keyframes cv-ms-week-spin { to { transform: rotate(360deg); } }

.cv-ms-collection { min-width: 0; padding-top: 14px; border-top: 1px solid var(--ms-line); }
.cv-ms-collection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 4px 2px 6px;
  color: var(--ms-ink);
}
.cv-ms-collection-head > span,
.cv-ms-collection-head strong,
.cv-ms-collection-head small { display: block; min-width: 0; }
.cv-ms-collection-head strong { font-size: 17px; }
.cv-ms-collection-head small { margin-top: 2px; color: var(--ms-muted); font-size: 11.5px; }
.cv-ms-collection-head button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-ink, #3a328f);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}
.cv-ms-collection-head button .ic { width: 16px; height: 16px; transition: transform .18s ease; }
.cv-ms-collection.is-expanded .cv-ms-collection-head button .ic { transform: rotate(180deg); }
.cv-ms-collection-head button:focus-visible,
.cv-ms-tabs button:focus-visible,
.cv-ms-badge:focus-visible,
.cv-ms-dialog-close:focus-visible {
  outline: 2px solid var(--accent, #544bc4);
  outline-offset: 3px;
}

.cv-ms-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
  padding: 10px 0 12px;
}
.cv-ms-tabs button {
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 59px;
  padding: 8px 10px;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  background: var(--ms-surface);
  color: var(--ms-muted);
  cursor: pointer;
  text-align: left;
}
.cv-ms-tab-icon {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 10px;
  background: var(--ms-surface-2);
  color: var(--cat);
}
.cv-ms-tab-icon .ic { width: 18px; height: 18px; }
.cv-ms-tabs button span:not(.cv-ms-tab-icon),
.cv-ms-tabs button strong,
.cv-ms-tabs button small { display: block; min-width: 0; }
.cv-ms-tabs button strong { overflow: hidden; color: var(--ms-ink); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.cv-ms-tabs button small { margin-top: 1px; font-size: 10px; font-variant-numeric: tabular-nums; }
.cv-ms-tabs button.is-active {
  border-color: color-mix(in srgb, var(--cat) 38%, var(--ms-line));
  background: color-mix(in srgb, var(--cat) 10%, var(--ms-surface));
  color: var(--cat);
}
.cv-ms-tab-progress { width: 100%; height: 3px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: var(--ms-surface-3); }
.cv-ms-tab-progress i { display: block; height: 100%; border-radius: inherit; background: var(--cat); }
.cv-ms-category-panel[hidden] { display: none; }

.cv-ms-category { min-width: 0; padding-top: 6px; }
.cv-ms-category-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.cv-ms-category-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--cat) 11%, var(--ms-surface));
  color: var(--cat);
}
.cv-ms-category-icon .ic { width: 21px; height: 21px; }
.cv-ms-category-head h4 { margin: 0; color: var(--ms-ink); font-size: 17px; letter-spacing: 0; }
.cv-ms-category-head p { margin: 2px 0 0; color: var(--ms-muted); font-size: 11.5px; line-height: 1.45; }
.cv-ms-category-head > strong { color: var(--cat); font-size: 19px; font-variant-numeric: tabular-nums; }

.cv-ms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  min-width: 0;
}
.cv-ms-badge {
  position: relative;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  width: 100%;
  min-width: 0;
  min-height: 224px;
  padding: 17px 10px 12px;
  overflow: hidden;
  border: 1px solid var(--ms-line);
  border-radius: 14px;
  background: var(--ms-surface);
  color: var(--ms-ink);
  cursor: pointer;
  text-align: center;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .045);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .cv-ms-badge:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cat) 32%, var(--ms-line)); box-shadow: 0 7px 19px rgba(32, 28, 62, .08); }
}

.cv-ms-emblem {
  --tier-ring: #b8bbc3;
  --tier-core: #edf0f2;
  --tier-ink: #4e5662;
  --tier-halo: 0px;
  position: relative;
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  margin: 1px 0 10px;
  border-radius: 50%;
  isolation: isolate;
}
.cv-ms-emblem::before {
  position: absolute;
  z-index: -2;
  inset: 7px;
  border: 5px solid var(--tier-ring);
  border-radius: 50%;
  background: var(--tier-core);
  box-shadow: 0 5px 12px rgba(23, 26, 42, .13), inset 0 2px 2px rgba(255, 255, 255, .56), 0 0 0 var(--tier-halo) color-mix(in srgb, var(--tier-ring) 16%, transparent);
  content: "";
}
.cv-ms-emblem::after {
  position: absolute;
  z-index: -1;
  inset: 18px;
  border: 2px solid color-mix(in srgb, white 64%, var(--cat));
  border-radius: 50%;
  background: var(--cat);
  box-shadow: inset 0 -7px 12px color-mix(in srgb, black 13%, transparent), inset 0 5px 8px rgba(255, 255, 255, .18);
  content: "";
}
.cv-ms-glyph { position: relative; z-index: 2; display: grid; place-items: center; color: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.cv-ms-glyph .ic { width: 32px; height: 32px; transition: transform .18s ease, filter .18s ease; }
.cv-ms-emblem[data-glyph-stage="2"] .cv-ms-glyph .ic { transform: scale(1.08); }
.cv-ms-emblem[data-glyph-stage="3"] .cv-ms-glyph .ic { filter: drop-shadow(0 0 4px rgba(255, 246, 209, .32)); transform: scale(1.16); }
.cv-ms-rank {
  position: absolute;
  z-index: 4;
  right: 4px;
  bottom: 7px;
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding: 0 5px;
  border: 2px solid var(--ms-surface);
  border-radius: 999px;
  background: var(--tier-ring);
  color: var(--tier-ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(20, 20, 35, .18);
}
.cv-ms-crown,
.cv-ms-stars { position: absolute; z-index: 4; color: var(--tier-ring); pointer-events: none; }
.cv-ms-crown { top: -4px; left: 50%; display: none; transform: translateX(-50%); }
.cv-ms-crown .ic { width: 25px; height: 25px; fill: color-mix(in srgb, var(--tier-ring) 26%, transparent); }
.cv-ms-stars { inset: 0; display: none; }
.cv-ms-stars .ic { position: absolute; width: 13px; height: 13px; fill: color-mix(in srgb, var(--tier-ring) 22%, transparent); }
.cv-ms-stars .ic:first-child { top: 14px; left: 3px; }
.cv-ms-stars .ic:nth-child(2) { top: 4px; right: 8px; width: 10px; height: 10px; }
.cv-ms-stars .ic:last-child { right: 1px; bottom: 22px; width: 9px; height: 9px; }

.cv-ms-emblem[data-tier="2"] { --tier-ring: #92aaa5; --tier-core: #e8f2ef; --tier-ink: #263d39; }
.cv-ms-emblem[data-tier="3"] { --tier-ring: #7798bc; --tier-core: #e7eff8; --tier-ink: #233f5e; --tier-halo: 2px; }
.cv-ms-emblem[data-tier="4"] { --tier-ring: #6d67b8; --tier-core: #ecebfa; --tier-ink: #282454; --tier-halo: 3px; }
.cv-ms-emblem[data-tier="5"] { --tier-ring: #c08b32; --tier-core: #fbefd6; --tier-ink: #4a3310; --tier-halo: 3px; }
.cv-ms-emblem[data-tier="6"] { --tier-ring: #d16f5f; --tier-core: #f9e4df; --tier-ink: #55241c; --tier-halo: 4px; }
.cv-ms-emblem[data-tier="7"] { --tier-ring: #d5a840; --tier-core: #343149; --tier-ink: #34250a; --tier-halo: 5px; }
.cv-ms-emblem[data-tier="8"] { --tier-ring: #e1b74f; --tier-core: #242333; --tier-ink: #2f2107; --tier-halo: 7px; }
.cv-ms-emblem[data-tier="4"]::before,
.cv-ms-emblem[data-tier="5"]::before,
.cv-ms-emblem[data-tier="6"]::before { border-width: 6px; }
.cv-ms-emblem[data-tier="7"]::before,
.cv-ms-emblem[data-tier="8"]::before { border-width: 7px; box-shadow: 0 7px 17px rgba(20, 18, 36, .24), inset 0 0 0 2px color-mix(in srgb, white 22%, transparent), 0 0 0 var(--tier-halo) color-mix(in srgb, var(--tier-ring) 19%, transparent); }
.cv-ms-emblem[data-tier="7"]::after,
.cv-ms-emblem[data-tier="8"]::after { border-color: color-mix(in srgb, var(--tier-ring) 72%, white); background: color-mix(in srgb, var(--cat) 76%, #222033); }
.cv-ms-emblem[data-tier="5"] .cv-ms-stars,
.cv-ms-emblem[data-tier="6"] .cv-ms-stars,
.cv-ms-emblem[data-tier="7"] .cv-ms-stars,
.cv-ms-emblem[data-tier="8"] .cv-ms-stars { display: block; }
.cv-ms-emblem[data-tier="7"] .cv-ms-crown,
.cv-ms-emblem[data-tier="8"] .cv-ms-crown { display: block; }

.cv-ms-badge-title { width: 100%; color: var(--ms-ink); font-size: 14px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.cv-ms-badge-condition { min-height: 32px; margin-top: 3px; color: var(--ms-muted); font-size: 10.8px; line-height: 1.45; overflow-wrap: anywhere; }
.cv-ms-badge-progress { display: block; width: min(92px, 82%); height: 5px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: var(--ms-line); }
.cv-ms-badge-progress i { display: block; height: 100%; border-radius: inherit; background: var(--cat); }
.cv-ms-badge-state { margin-top: 6px; color: var(--cat); font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cv-ms-badge-tier { margin-top: auto; padding-top: 6px; color: var(--ms-muted); font-size: 9.8px; }
.cv-ms-badge.is-locked { background: var(--ms-surface-2); box-shadow: none; }
.cv-ms-badge.is-locked .cv-ms-emblem { filter: grayscale(.86); opacity: .61; }
.cv-ms-badge.is-locked .cv-ms-emblem::after { border-color: var(--ms-line); background: var(--ms-surface-2); box-shadow: none; }
.cv-ms-badge.is-locked .cv-ms-emblem::before { border-color: var(--ms-surface-3); background: var(--ms-surface-2); box-shadow: inset 0 0 0 1px var(--ms-line); }
.cv-ms-badge.is-locked .cv-ms-glyph { color: var(--ms-muted); filter: none; }
.cv-ms-badge.is-locked .cv-ms-rank { background: var(--ms-surface-3); color: var(--ms-muted); }
.cv-ms-badge.is-locked .cv-ms-crown,
.cv-ms-badge.is-locked .cv-ms-stars { display: none; }

.cv-ms-dialog {
  --ms-surface: var(--surface, #fff);
  --ms-surface-2: var(--surface-2, #f7f5f0);
  --ms-surface-3: var(--surface-3, #e9e5dc);
  --ms-line: var(--hairline, rgba(60, 50, 35, .12));
  --ms-ink: var(--ink, #211f2b);
  --ms-muted: var(--muted, #706e7a);
  width: min(540px, calc(100% - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 16px;
  background: var(--surface, #fff);
  color: var(--ink, #211f2b);
  box-shadow: 0 20px 62px rgba(27, 25, 46, .24);
}
.cv-ms-dialog::backdrop { background: rgba(18, 18, 30, .48); backdrop-filter: blur(4px); }
.cv-ms-dialog-close {
  position: sticky;
  z-index: 3;
  top: 12px;
  float: right;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 12px 12px -54px 0;
  padding: 0;
  border: 1px solid var(--hairline, rgba(60, 50, 35, .12));
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--ink, #211f2b);
  cursor: pointer;
}
.cv-ms-dialog-close .ic { width: 19px; height: 19px; }
.cv-ms-dialog-body { display: grid; justify-items: center; padding: 30px 24px 24px; text-align: center; }
.cv-ms-dialog-body > .cv-ms-emblem { width: 126px; height: 126px; margin: 6px 0 12px; transform: scale(1.12); }
.cv-ms-dialog-kicker { color: var(--cat); font-size: 11px; font-weight: 800; }
.cv-ms-dialog-body h3 { margin: 3px 0 0; font-size: 24px; letter-spacing: 0; }
.cv-ms-dialog-body > p { margin: 5px 0 18px; color: var(--muted, #706e7a); font-size: 13px; }
.cv-ms-dialog-body dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  border-top: 1px solid var(--hairline, rgba(60, 50, 35, .12));
  border-bottom: 1px solid var(--hairline, rgba(60, 50, 35, .12));
}
.cv-ms-dialog-body dl div { min-width: 0; padding: 12px 7px; }
.cv-ms-dialog-body dl div + div { border-left: 1px solid var(--hairline, rgba(60, 50, 35, .12)); }
.cv-ms-dialog-body dt { color: var(--muted, #706e7a); font-size: 10px; }
.cv-ms-dialog-body dd { margin: 2px 0 0; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cv-ms-series { display: flex; gap: 7px; width: 100%; margin-top: 18px; padding: 2px 1px 8px; overflow-x: auto; scrollbar-width: thin; }
.cv-ms-series span { flex: 0 0 auto; min-width: 68px; padding: 8px 7px; border: 1px solid var(--hairline, rgba(60, 50, 35, .12)); border-radius: 8px; background: var(--surface-2, #f7f5f0); }
.cv-ms-series span.is-current { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 10%, var(--surface, #fff)); }
.cv-ms-series span.is-done strong { color: var(--cat); }
.cv-ms-series strong,
.cv-ms-series small { display: block; }
.cv-ms-series strong { font-size: 10.5px; }
.cv-ms-series small { margin-top: 2px; color: var(--muted, #706e7a); font-size: 9.5px; }

/* 新徽章提示：普通徽章为轻提示，重要节点先聚光再自动收成轻提示。 */
.cv-ms-unlock-layer {
  --ms-surface: var(--surface, #fff);
  --ms-surface-2: var(--surface-2, #f7f5f0);
  --ms-line: var(--hairline, rgba(60, 50, 35, .12));
  --ms-ink: var(--ink, #211f2b);
  --ms-muted: var(--muted, #706e7a);
  position: fixed;
  z-index: 120;
  inset: 0;
  pointer-events: none;
}
.cv-ms-unlock-backdrop {
  position: absolute;
  inset: 0;
  display: none;
  border: 0;
  background: rgba(18, 18, 30, .38);
  pointer-events: auto;
  animation: cv-ms-unlock-backdrop-in .24s ease-out both;
}
.cv-ms-unlock-card {
  position: absolute;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: min(408px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  padding: 14px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--cat) 24%, var(--ms-line));
  border-radius: 16px;
  background: var(--ms-surface);
  color: var(--ms-ink);
  box-shadow: 0 18px 48px rgba(25, 22, 48, .19);
  pointer-events: auto;
}
.cv-ms-unlock-emblem {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
}
.cv-ms-unlock-emblem > .cv-ms-emblem {
  width: 68px;
  height: 68px;
  margin: 0;
}
.cv-ms-unlock-emblem .cv-ms-emblem::before { inset: 5px; border-width: 4px; }
.cv-ms-unlock-emblem .cv-ms-emblem::after { inset: 13px; }
.cv-ms-unlock-emblem .cv-ms-glyph .ic { width: 23px; height: 23px; }
.cv-ms-unlock-emblem .cv-ms-rank {
  right: -1px;
  bottom: 2px;
  min-width: 21px;
  height: 21px;
  padding-inline: 4px;
  font-size: 9px;
}
.cv-ms-unlock-emblem .cv-ms-crown { top: -5px; }
.cv-ms-unlock-emblem .cv-ms-crown .ic { width: 20px; height: 20px; }
.cv-ms-unlock-emblem .cv-ms-stars .ic:first-child { top: 8px; left: 0; }
.cv-ms-unlock-emblem .cv-ms-stars .ic:nth-child(2) { top: 0; right: 5px; }
.cv-ms-unlock-emblem .cv-ms-stars .ic:last-child { right: -1px; bottom: 13px; }
.cv-ms-unlock-copy,
.cv-ms-unlock-copy small,
.cv-ms-unlock-copy strong,
.cv-ms-unlock-copy em { display: block; min-width: 0; }
.cv-ms-unlock-copy small {
  color: var(--cat);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
}
.cv-ms-unlock-copy strong {
  margin-top: 2px;
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}
.cv-ms-unlock-copy em {
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--ms-muted);
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.45;
}
.cv-ms-unlock-actions { display: flex; align-items: center; gap: 5px; }
.cv-ms-unlock-actions button {
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--cat) 11%, var(--ms-surface));
  color: color-mix(in srgb, var(--cat) 88%, var(--ms-ink));
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
}
.cv-ms-unlock-actions button[data-cv-ms-unlock-dismiss] {
  display: grid;
  place-items: center;
  width: 38px;
  padding: 0;
  background: transparent;
  color: var(--ms-muted);
}
.cv-ms-unlock-actions .ic { width: 17px; height: 17px; }
.cv-ms-unlock-actions button:focus-visible {
  outline: 2px solid var(--cat);
  outline-offset: 2px;
}
.cv-ms-unlock-layer.is-toast .cv-ms-unlock-card {
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  animation: cv-ms-unlock-toast-in .34s cubic-bezier(.16, 1, .3, 1) both;
}
.cv-ms-unlock-layer.is-spotlight .cv-ms-unlock-backdrop { display: block; }
.cv-ms-unlock-layer.is-spotlight .cv-ms-unlock-card {
  top: 50%;
  left: 50%;
  width: min(438px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  animation: cv-ms-unlock-spotlight-in .42s cubic-bezier(.16, 1, .3, 1) both;
}
.cv-ms-unlock-layer.is-switching .cv-ms-unlock-card,
.cv-ms-unlock-layer.is-leaving .cv-ms-unlock-card,
.cv-ms-unlock-layer.is-leaving .cv-ms-unlock-backdrop {
  opacity: 0;
  transition: opacity .15s ease-out;
}

@keyframes cv-ms-unlock-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cv-ms-unlock-toast-in {
  from { opacity: .3; transform: translateY(-10px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes cv-ms-unlock-spotlight-in {
  from { opacity: .3; transform: translate(-50%, calc(-50% + 16px)) scale(.97); filter: blur(4px); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

html.cv-dark .cv-ms-focus,
html.cv-dark .cv-ms-tabs button,
html.cv-dark .cv-ms-badge,
html.cv-dark .cv-ms-dialog-close { box-shadow: none; }
html.cv-dark .cv-ms-unlock-card { box-shadow: 0 18px 48px rgba(0, 0, 0, .36); }

@media (max-width: 760px) {
  .cv-ms-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .cv-ms-weekly { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cv-ms-week-loader { justify-self: start; }
}

@media (max-width: 680px) {
  .cv-ms-head { align-items: center; }
  /* detail-polish-v1: 计数保持单行「已点亮 4/45 枚」，不再 grid 堆叠出孤字 */
  .cv-ms-head p { flex-wrap: nowrap; white-space: nowrap; font-size: 11.5px; }
  .cv-ms-head p strong { font-size: 15px; }
  .cv-ms-focus-head { padding-inline: 13px; }
  .cv-ms-focus-journey { grid-template-columns: 1fr; }
  .cv-ms-focus-connector { height: 22px; margin: 0 14px; }
  .cv-ms-focus-connector span { width: 26px; height: 26px; transform: rotate(90deg); }
  .cv-ms-focus-piece { min-height: 94px; padding: 12px 13px; }
  .cv-ms-focus-piece > .cv-ms-emblem,
  .cv-ms-focus-icon { width: 52px; height: 52px; }
  .cv-ms-focus-piece > .cv-ms-emblem::before { inset: 4px; }
  .cv-ms-focus-piece > .cv-ms-emblem::after { inset: 11px; }
  .cv-ms-focus-note { align-items: start; padding-inline: 13px; }
  .cv-ms-week-metric { grid-template-columns: 21px minmax(0, 1fr); gap: 5px; padding-inline: 6px; }
  .cv-ms-week-metric > .ic { width: 16px; height: 16px; }
  .cv-ms-collection-head { align-items: end; }
  .cv-ms-tabs button { grid-template-columns: 32px minmax(0, 1fr); min-height: 56px; padding: 7px 8px; }
  .cv-ms-tab-icon { width: 32px; height: 32px; }
  .cv-ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .cv-ms-badge { min-height: 212px; padding-inline: 7px; }
  .cv-ms-emblem { width: 86px; height: 86px; }
  .cv-ms-glyph .ic { width: 29px; height: 29px; }
  .cv-ms-category-head p { max-width: 33ch; }
  .cv-ms-unlock-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    width: auto;
    padding: 12px;
  }
  .cv-ms-unlock-layer.is-toast .cv-ms-unlock-card,
  .cv-ms-unlock-layer.is-spotlight .cv-ms-unlock-card {
    top: auto;
    right: 10px;
    bottom: max(82px, calc(68px + env(safe-area-inset-bottom)));
    left: 10px;
    width: auto;
    transform: none;
    animation: cv-ms-unlock-mobile-in .34s cubic-bezier(.16, 1, .3, 1) both;
  }
  .cv-ms-unlock-emblem,
  .cv-ms-unlock-emblem > .cv-ms-emblem { width: 58px; height: 58px; }
  .cv-ms-unlock-emblem .cv-ms-glyph .ic { width: 20px; height: 20px; }
  .cv-ms-unlock-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@keyframes cv-ms-unlock-mobile-in {
  from { opacity: .3; transform: translateY(14px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (max-width: 360px) {
  .cv-ms-head h3 { font-size: 18px; }
  .cv-ms-head p { font-size: 11px; }
  .cv-ms-head p strong { font-size: 15px; }
  .cv-ms-head > div > small { max-width: 190px; }
  .cv-ms-week-main strong { font-size: 14px; }
  .cv-ms-week-metric { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .cv-ms-week-metric > .ic { display: none; }
  .cv-ms-week-history summary small { display: none; }
  .cv-ms-focus-copy strong { font-size: 14.5px; }
  .cv-ms-focus-copy em { font-size: 10.5px; }
  .cv-ms-collection-head strong { font-size: 16px; }
  .cv-ms-collection-head small { max-width: 190px; }
  .cv-ms-tabs { gap: 6px; }
  .cv-ms-tabs button { grid-template-columns: 30px minmax(0, 1fr); padding-inline: 7px; }
  .cv-ms-tab-icon { width: 30px; height: 30px; }
  .cv-ms-tabs button strong { font-size: 10.8px; }
  .cv-ms-category-head { grid-template-columns: auto minmax(0, 1fr); }
  .cv-ms-category-head > strong { display: none; }
  .cv-ms-badge { min-height: 204px; }
  .cv-ms-emblem { width: 80px; height: 80px; }
  .cv-ms-dialog-body { padding-inline: 16px; }
  .cv-ms-dialog-body dl { grid-template-columns: 1fr; }
  .cv-ms-dialog-body dl div + div { border-top: 1px solid var(--hairline, rgba(60, 50, 35, .12)); border-left: 0; }
  .cv-ms-unlock-card { right: 8px !important; left: 8px !important; padding: 11px; }
  .cv-ms-unlock-copy strong { font-size: 14px; }
  .cv-ms-unlock-copy em { font-size: 11px; }
  .cv-ms-unlock-actions button:first-child { flex: 1; }
}

@media print {
  .cv-ms-collection-head,
  .cv-ms-tabs,
  .cv-ms-dialog { display: none !important; }
  .cv-ms-badge { break-inside: avoid; box-shadow: none; }
}

html.cv-reduce-motion .cv-ms-badge,
html.cv-reduce-motion .cv-ms-collection-head button .ic,
html.cv-reduce-motion .cv-ms-glyph .ic,
html.cv-reduce-motion .cv-ms-week-loader,
html.cv-reduce-motion .cv-ms-week-history summary > .ic,
html.cv-reduce-motion .cv-ms-unlock-card,
html.cv-reduce-motion .cv-ms-unlock-backdrop { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cv-ms-badge,
  .cv-ms-collection-head button .ic,
  .cv-ms-glyph .ic,
  .cv-ms-week-loader,
  .cv-ms-week-history summary > .ic,
  .cv-ms-unlock-card,
  .cv-ms-unlock-backdrop { animation: none !important; transition: none !important; }
}

/* W1.4 字号下限：成长档案可见文本统一提到 ≥11px（原最小 8.5px，中小学生与家长可读性不足） */
.cv-ms-focus-head span,
.cv-ms-focus-copy small,
.cv-ms-focus-copy em,
.cv-ms-focus-value,
.cv-ms-focus-complete-body small,
.cv-ms-week-kicker,
.cv-ms-week-main small,
.cv-ms-week-metric small,
.cv-ms-week-history summary small,
.cv-ms-week-history time,
.cv-ms-tabs button small,
.cv-ms-badge-condition,
.cv-ms-badge-state,
.cv-ms-badge-tier,
.cv-ms-dialog-body dt,
.cv-ms-series strong,
.cv-ms-series small { font-size: 11px; }

.growth-summary-copy em { font-size: 11px; }

.cv-ms-focus-head small { font-size: 11px; }
.cv-ms-rank { font-size: 11px; }
.cv-ms-focus-piece > .cv-ms-emblem .cv-ms-rank { font-size: 11px; min-width: 22px; height: 22px; }
.cv-ms-unlock-emblem .cv-ms-rank { font-size: 11px; min-width: 23px; height: 23px; }

/* Compact help icon, with a full touch target and theme-aware explanation. */
.growth-summary-copy { position: relative; }
.growth-info-label { display: inline-block; position: relative; padding-right: 18px; white-space: nowrap; }

.growth-info-dot {
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex: none;
  margin-left: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  vertical-align: 1px;
}

.growth-info-dot > .ic {
  width: 17px;
  height: 17px;
  color: var(--muted, #40536b);
}
.growth-info-dot:hover > .ic,
.growth-info-dot[aria-expanded="true"] > .ic { color: var(--accent, #076be8); }

.growth-info-dot:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

.growth-tip-bubble {
  position: absolute;
  z-index: 6;
  top: 100%;
  left: 0;
  margin-top: 6px;
  width: min(280px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--ink-2, #334767);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7;
  white-space: pre-line;
  text-align: left;
  box-shadow: 0 8px 24px rgba(23, 38, 74, .16);
}
.cv-dark .growth-tip-bubble { background: #293137; color: #edf2f6; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }

.growth-tip-bubble[hidden] { display: none; }

/* 右侧卡片（连续活跃卡固定在最后）气泡改为右对齐，防溢出视口 */
.growth-summary-card:last-child .growth-tip-bubble { left: auto; right: 0; }

/* ==== academy-theme.css ==== */
/* Aivia 5.5.29. The illustrated theme owns visual surfaces; legacy modules retain
   their layout/state/gesture contracts. No learning or permission state lives here. */

@font-face {
  font-family: "Aivia Italianno";
  src: url("assets/fonts/aivia-italianno-latin-v1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aivia Song";
  src: url("assets/fonts/aivia-song-tagline-v1.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html[data-visual-world="academy"] {
  --bg: #edf7fa;
  --bg-tint: #edf6fc;
  --academy-canvas-sky: #e8f4ff;
  --academy-canvas-air: #edf7fa;
  --academy-canvas-garden: #e4f4ec;
  --academy-canvas-veil: linear-gradient(115deg,rgb(232 244 255 / 98%),rgb(237 247 250 / 94%) 52%,rgb(234 248 242 / 80%));
  --academy-canvas-scene: url("assets/academy/scenes/campus-canvas-day-v1.webp");
  --academy-canvas-size: min(760px,80vw);
  --surface: #fff;
  --surface-2: #f2f7fc;
  --surface-3: #e6eff8;
  --ink: #17264a;
  --ink-2: #334767;
  --muted: #40536b;
  --muted-2: #40536b;
  --hairline: #d7e4f1;
  --hairline-soft: #e7eef6;
  --line: var(--hairline);
  --panel: var(--surface);
  --soft: var(--surface-2);
  --r-xs: 8px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --radius: 8px;
  --radius-sm: 8px;
  --glass-side: var(--surface);
  --glass-top: var(--surface);
  --glass-bar: var(--surface);
  --glass-sheet: var(--surface);
  --glass-drawer: var(--surface);
  --shadow-xs: 0 2px 4px rgb(36 82 125 / 4%);
  --shadow-sm: 0 4px 12px rgb(36 82 125 / 6%);
  --shadow: 0 8px 24px rgb(36 82 125 / 8%);
  --shadow-lg: 0 16px 48px rgb(25 60 96 / 16%);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
  --font-display: "Nunito", -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
  --academy-scene-ink: #132b51;
  --academy-action: #076be8;
  --academy-action-hover: #0053bd;
}
html[data-visual-world="academy"][data-palette="indigo"] {
  --accent: #0065df;
  --accent-press: #0053bd;
  --accent-ink: #0053bd;
  --accent-soft: #e8f2ff;
  --accent-soft-2: #f1f7ff;
  --accent-edge: #99c7ff;
  --accent-glow: transparent;
  --accent-2: #1685ef;
  --shadow-accent: 0 4px 10px rgb(0 101 223 / 13%);
}
html[data-visual-world="academy"][data-palette="royal"] {
  --academy-action: #1d4ed8;
  --academy-action-hover: #1843b8;
}
html[data-visual-world="academy"][data-palette="emerald"] {
  --academy-action: #0b7d72;
  --academy-action-hover: #09695f;
}
html[data-visual-world="academy"].cv-dark {
  --bg: #16191e;
  --bg-tint: #1b1f25;
  --academy-canvas-sky: #1b222b;
  --academy-canvas-air: #1b2327;
  --academy-canvas-garden: #20302d;
  --academy-canvas-veil: linear-gradient(115deg,rgb(27 34 43 / 98%),rgb(27 35 39 / 94%) 52%,rgb(32 48 45 / 86%));
  --academy-canvas-scene: url("assets/academy/scenes/campus-canvas-night-v1.webp");
  --surface: #20242b;
  --surface-2: #292e36;
  --surface-3: #363c45;
  --ink: #f4f3f0;
  --ink-2: #dddfe4;
  --muted: #b9bec8;
  --muted-2: #aeb6c3;
  --hairline: #48515e;
  --hairline-soft: #353d48;
  --green-ink: #83d7aa;
  --green-soft: #23382f;
  --red-ink: #ffaaa5;
  --red-soft: #452d30;
  --amber-ink: #edc478;
  --amber-soft: #3e3427;
  color-scheme: dark;
  --shadow: 0 8px 24px rgb(0 0 0 / 14%);
  --shadow-lg: 0 16px 48px rgb(0 0 0 / 35%);
}
html[data-visual-world="academy"].cv-dark[data-palette="indigo"] {
  --accent: #76b8ff;
  --accent-press: #a1cfff;
  --accent-ink: #a1cfff;
  --accent-soft: #233e5f;
  --accent-soft-2: #203347;
  --accent-edge: #4b80b5;
}

/* Shared controls and typography, including dialogs and operational surfaces. */
html[data-visual-world="academy"] body {
  --wash: var(--academy-canvas-veil),var(--academy-canvas-scene) right bottom / var(--academy-canvas-size) auto no-repeat,linear-gradient(115deg,var(--academy-canvas-sky),var(--academy-canvas-air) 52%,var(--academy-canvas-garden));
  --academy-scene-day: url("assets/academy/scenes/words-day-v1.webp");
  --academy-scene-night: url("assets/academy/scenes/words-night-v1.webp");
  --academy-scene-day-small: url("assets/academy/scenes/words-day-small-v1.webp");
  --academy-scene-night-small: url("assets/academy/scenes/words-night-small-v1.webp");
  --academy-banner: var(--academy-scene-day);
  --academy-banner-small: var(--academy-scene-day-small);
  background-color: var(--bg) !important;
  color: var(--ink);
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
}
html[data-visual-world="academy"].cv-dark body {
  --academy-banner: var(--academy-scene-night);
  --academy-banner-small: var(--academy-scene-night-small);
}
html[data-visual-world="academy"]:not([data-bg]) body { background-image: none; }
/* Reuse the existing non-interactive fixed canvas. Keep the user's paper layer above it. */
html[data-visual-world="academy"][data-bg] { --cv-bg-ink: rgb(59 104 135 / 8%); --cv-bg-ink-2: rgb(59 104 135 / 5%); }
html[data-visual-world="academy"].cv-dark[data-bg] { --cv-bg-ink: rgb(160 191 187 / 8%); --cv-bg-ink-2: rgb(160 191 187 / 5%); }
html[data-visual-world="academy"] :is(h1,h2,h3,h4,button,input,textarea,select,label) { letter-spacing: 0 !important; }
html[data-visual-world="academy"] :is(h1,h2,h3,h4) { font-family: var(--font) !important; }
html[data-visual-world="academy"] :is(button,input,textarea,select) { font-family: inherit; }
html[data-visual-world="academy"] :is(button,a,input,textarea,select,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}
html[data-visual-world="academy"] :is(input,textarea,select) { box-sizing: border-box; max-width: 100%; min-width: 0; }
html[data-visual-world="academy"] select { min-height: 44px !important; padding-inline: 12px; }
/* Native macOS select painting otherwise ignores the shared control height. */
html[data-visual-world="academy"] select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 32px !important;
  background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%) !important;
  background-position: calc(100% - 17px) 50%,calc(100% - 12px) 50% !important;
  background-size: 5px 5px !important;
  background-repeat: no-repeat !important;
}
@media (forced-colors: active) {
  html[data-visual-world="academy"] select:not([multiple]):not([size]) { appearance: auto; -webkit-appearance: auto; background-image: none !important; }
}
html[data-visual-world="academy"] :is(input,textarea,select):focus {
  outline: 2px solid var(--accent) !important;
  outline-offset: -2px !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
html[data-visual-world="academy"] :is(button,a,summary):focus:not(:focus-visible) { outline: none !important; }
html[data-visual-world="academy"] :is(.primary-action,.cv-wc-next,.cv-wc-say,.home-main-cta,.task-entry-action.is-primary,.listen-mode-card.active,.book-audio-play,.listen-catalog-play,.academy-play-toggle):focus-visible {
  outline-color: #fff !important;
  outline-offset: -4px !important;
}
html[data-visual-world="academy"] :is(.primary-action,.cv-wc-next,.cv-wc-say,.home-main-cta,.task-entry-action.is-primary) {
  color: #fff !important;
  background: var(--academy-action) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 650 !important;
  text-shadow: none !important;
}
html[data-visual-world="academy"] :is(.secondary-action,.cv-wc-know,.cv-wc-tool,.pill-button,.icon-button) {
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html[data-visual-world="academy"] :is(.primary-action,.secondary-action,.cv-wc-next,.cv-wc-know,.cv-wc-tool,.cv-wc-say) {
  min-height: 44px;
  line-height: 1.4;
  white-space: normal;
}
html[data-visual-world="academy"] :is(.primary-action,.secondary-action,.cv-wc-next,.cv-wc-know):disabled {
  opacity: .48 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}
html[data-visual-world="academy"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select) {
  border-radius: 8px !important;
  border-style: solid !important;
  border-color: var(--hairline) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  min-width: 0;
}
html[data-visual-world="academy"] ::placeholder { color: var(--muted-2) !important; opacity: 1; }
html[data-visual-world="academy"] :is(.badge,.status-pill,.role-chip) { box-shadow: none !important; }
html[data-visual-world="academy"] .secondary-action.danger-action { color: var(--red-ink) !important; border-color: var(--red-soft) !important; }
html[data-visual-world="academy"] .primary-action.danger-action { color: #fff !important; background: #b22a20 !important; }
html[data-visual-world="academy"] .badge { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
html[data-visual-world="academy"] .ic { flex-shrink: 0; }
html[data-visual-world="academy"].cv-dark .primary-action:not(.loading) { color: #fff !important; }
html[data-visual-world="academy"] :is(.primary-action,.secondary-action).loading { color: transparent !important; }

/* Login artwork stays beside the form, and above it on compact screens. */
html[data-visual-world="academy"] .auth-screen {
  --academy-welcome: url("assets/academy/scenes/welcome-day-v1.webp");
  background: #e9f6ff !important;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 40px 40px 20px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
html[data-visual-world="academy"] .auth-layout {
  width: min(1120px,100%) !important;
  grid-template-columns: minmax(0,1fr) minmax(340px,430px) !important;
  gap: 64px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  min-height: 650px;
}
html[data-visual-world="academy"] .auth-screen::before,
html[data-visual-world="academy"] .auth-screen::after { content: none; animation: none !important; will-change: auto; }
html[data-visual-world="academy"] .auth-story {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: flex-start;
  padding: 16px 0 0 !important;
  gap: 46px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
html[data-visual-world="academy"] .auth-story::before,
html[data-visual-world="academy"] .auth-story::after { content: none !important; }
html[data-visual-world="academy"] .auth-story .academy-welcome-art {
  content: "" !important;
  position: relative !important;
  inset: auto !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  filter: none !important;
  aspect-ratio: 3 / 2;
  flex: none;
  background: var(--academy-welcome) right center / cover no-repeat !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: none;
  --academy-art-x: linear-gradient(to right,transparent,rgb(0 0 0 / 14%) 3%,rgb(0 0 0 / 58%) 7%,#000 13%,#000 87%,rgb(0 0 0 / 58%) 93%,rgb(0 0 0 / 14%) 97%,transparent);
  --academy-art-y: linear-gradient(to bottom,transparent,rgb(0 0 0 / 14%) 5%,rgb(0 0 0 / 60%) 12%,#000 23%,#000 74%,rgb(0 0 0 / 64%) 86%,rgb(0 0 0 / 16%) 95%,transparent);
  -webkit-mask-image: var(--academy-art-x),var(--academy-art-y);
  mask-image: var(--academy-art-x),var(--academy-art-y);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
html[data-visual-world="academy"] .auth-story .brand strong { color: #10254a !important; font-size: 27px !important; }
html[data-visual-world="academy"] .auth-story .brand span { color: #405d80 !important; font-size: 12px !important; }
html[data-visual-world="academy"] .brand-mark.brand-logo { background: none !important; box-shadow: none !important; flex: none; }
html[data-visual-world="academy"] .brand-mark.brand-logo svg { width: 100%; height: 100%; }
html[data-visual-world="academy"] .auth-story-copy { width: 100%; min-width: 0; max-width: 100%; gap: 0 !important; margin: 0 !important; padding: 0 !important; }
html[data-visual-world="academy"] .auth-story .auth-story-copy h1 { color: #10254a !important; font-family: "Aivia Italianno", "Apple Chancery", "Segoe Script", cursive !important; font-weight: 400 !important; font-synthesis: none; font-size: 72px !important; line-height: 1.05 !important; letter-spacing: 0 !important; margin: 0 0 18px !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
html[data-visual-world="academy"] .auth-story .auth-story-copy p { color: #304b6a !important; font-family: "Aivia Song", "Songti SC", "SimSun", serif !important; font-weight: 500 !important; font-size: 18px !important; line-height: 1.8 !important; letter-spacing: 0 !important; max-width: 24em; margin: 0 !important; }
html[data-visual-world="academy"] .auth-story .auth-story-copy p span { display: inline-block; }
html[data-visual-world="academy"] .auth-card-container { padding: 0 !important; background: none !important; border: 0 !important; align-self: center; }
html[data-visual-world="academy"] .auth-card {
  width: 100%; box-sizing: border-box;
  padding: 30px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-lg) !important;
}
html[data-visual-world="academy"] .auth-head h2 { font-size: 22px !important; margin: 0 !important; }
html[data-visual-world="academy"] .auth-companions { position: relative; width: 100%; height: 164px; overflow: hidden; border-radius: 8px; background: #e8e3e8; margin-bottom: 18px; }
html[data-visual-world="academy"] .auth-companions canvas { position: absolute; top: 50%; left: 50%; display: block; width: min(100%,280px); height: auto; aspect-ratio: 9 / 8; transform: translate(-50%,-54%); clip-path: inset(0 16%); pointer-events: none; }
html[data-visual-world="academy"] .auth-companions.is-unavailable { display: none; }
html[data-visual-world="academy"] .auth-tabs { background: none !important; padding: 0 !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--hairline) !important; gap: 0; }
html[data-visual-world="academy"] .auth-tabs button { background: none !important; color: var(--muted) !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: 2px solid transparent !important; }
html[data-visual-world="academy"] .auth-tabs button.active { border-bottom-color: var(--accent) !important; color: var(--accent-ink) !important; }
html[data-visual-world="academy"] .auth-form label { font-size: 14px !important; line-height: 1.5; }
html[data-visual-world="academy"] .auth-form input:not([type="checkbox"]) { min-height: 48px; font-size: 16px !important; }
html[data-visual-world="academy"] .auth-form .primary-action { min-height: 48px; }
html[data-visual-world="academy"] .auth-form .wechat-action { background: var(--surface) !important; border: 1px solid var(--hairline) !important; border-radius: 8px !important; color: var(--green-ink) !important; box-shadow: none !important; min-height: 46px; }
html[data-visual-world="academy"] .auth-password-toggle { width: 44px !important; height: 44px !important; color: var(--muted) !important; background: transparent !important; }
html[data-visual-world="academy"] .auth-password-toggle[aria-pressed="true"] { color: var(--accent) !important; background: var(--accent-soft) !important; }
html[data-visual-world="academy"] .auth-public-footer { width: min(1120px,100%); color: #234467 !important; background: rgb(245 251 255 / 94%); padding: 12px 16px; border-radius: 8px; box-sizing: border-box; }
html[data-visual-world="academy"] .auth-public-footer :is(a,button) { color: #234467 !important; }

/* A continuous campus canvas; navigation and actual learning tools stay opaque. */
html[data-visual-world="academy"] .app-shell { width: min(1760px,100%) !important; grid-template-columns: 232px minmax(0,1fr) !important; }
html[data-visual-world="academy"] .sidebar { width: 232px !important; background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 24px 16px 16px !important; gap: 14px !important; }
html[data-visual-world="academy"] .sidebar .brand { padding: 0 0 18px !important; gap: 9px; }
html[data-visual-world="academy"] .sidebar .brand strong { font-size: 19px !important; color: var(--accent-ink) !important; }
html[data-visual-world="academy"] .sidebar .brand-mark { width: 36px !important; height: 36px !important; }
html[data-visual-world="academy"] .nav-item { border-radius: 8px !important; padding: 10px 12px !important; min-height: 46px !important; }
html[data-visual-world="academy"] .nav-item.active { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
html[data-visual-world="academy"] .nav-item.active::before { width: 3px !important; height: 22px !important; left: 0 !important; }
html[data-visual-world="academy"] .nav-item .ic { width: 21px; height: 21px; stroke-width: 1.8; }
html[data-visual-world="academy"] .nav-item:not(.active) { color: var(--ink-2) !important; }
html[data-visual-world="academy"] .nav-item :is(.nav-ic,.ic),
html[data-visual-world="academy"] .mobile-tabbar .mt :is(.mt-icon,.mt-ic,.ic) { color: inherit !important; }
html[data-visual-world="academy"] .quote-card { padding: 16px 16px 86px !important; border: 0 !important; border-radius: 8px !important; background: var(--accent-soft-2) url("assets/academy/empty.webp") right -4px bottom -16px / 118px no-repeat !important; }
html[data-visual-world="academy"] .quote-card .eyebrow { letter-spacing: 0 !important; text-transform: none; font-size: 12px !important; }
html[data-visual-world="academy"] .quote-card strong { font-size: 14px !important; line-height: 1.6 !important; }
html[data-visual-world="academy"] .account-chip { border-radius: 8px !important; box-shadow: none !important; background: var(--surface-2) !important; }
html[data-visual-world="academy"] .main { padding: 0 24px 60px !important; gap: 22px !important; align-content: start; background-color: transparent !important; }
/* The shell owns the page width; individual views must not add a second gutter. */
html[data-visual-world="academy"] body .main > .view,
html[data-visual-world="academy"] body .main > #view-today {
  width: 100% !important; max-width: none !important; margin-inline: 0 !important;
}
html[data-visual-world="academy"] .member-console { max-width: none; margin-inline: 0; }
html[data-visual-world="academy"] .academy-mobile-brand { display: none; }
html[data-visual-world="academy"] .topbar {
  margin-inline: -24px;
  padding: 80px 24px 24px !important;
  min-height: 220px;
  box-sizing: border-box;
  background: transparent !important;
  position: relative !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-areas: "title" !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
}
html[data-visual-world="academy"] .topbar::before,
html[data-visual-world="academy"] .topbar::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: min(100%,660px);
  background: var(--academy-banner) right center / cover no-repeat;
  /* Feather the artwork itself so every edge reveals the real page canvas. */
  --academy-art-x: linear-gradient(to right,transparent,rgb(0 0 0 / 12%) 8%,rgb(0 0 0 / 52%) 18%,#000 32%,#000 87%,rgb(0 0 0 / 66%) 94%,rgb(0 0 0 / 16%) 98%,transparent);
  --academy-art-y: linear-gradient(to bottom,transparent,rgb(0 0 0 / 28%) 7%,#000 22%,#000 56%,rgb(0 0 0 / 80%) 68%,rgb(0 0 0 / 30%) 86%,transparent);
  -webkit-mask-image: var(--academy-art-x),var(--academy-art-y);
  mask-image: var(--academy-art-x),var(--academy-art-y);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}
html[data-visual-world="academy"] .topbar > * { position: relative; z-index: 1; }
html[data-visual-world="academy"] .topbar .topbar-title { grid-area: title; width: 49%; min-width: 0; }
html[data-visual-world="academy"] .topbar .topbar-title > .eyebrow { display: none !important; }
html[data-visual-world="academy"] .topbar h1 { color: var(--academy-scene-ink) !important; font-size: 34px !important; line-height: 1.3; overflow-wrap: anywhere; }
html[data-visual-world="academy"] .topbar .top-actions { display: flex !important; position: absolute; top: 16px; right: 24px; max-width: calc(100% - 48px); gap: 8px; align-items: center; }
html[data-visual-world="academy"] .search-box { border-radius: 8px !important; border: 1px solid var(--hairline) !important; background: var(--surface) !important; box-shadow: none !important; min-width: 0; }
html[data-visual-world="academy"] .search-box input { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-visual-world="academy"] .search-box:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-visual-world="academy"] .search-box input:focus { outline: none !important; }
html[data-visual-world="academy"] .topbar .search-box { position: relative; z-index: 1; width: 340px; height: 44px !important; min-height: 44px !important; padding: 0 12px !important; box-sizing: border-box; }
html[data-visual-world="academy"] .topbar .search-box #globalSearch { min-width: 0; width: 100%; height: 42px !important; min-height: 42px !important; padding-block: 0 !important; background: transparent !important; }
html[data-visual-world="academy"] .topbar #searchLabel { display: none !important; }
html[data-visual-world="academy"] .topbar .cv-theme-toggle { flex: none; min-width: 44px; height: 44px !important; min-height: 44px !important; }
html[data-visual-world="academy"] body[data-view="today"] .topbar { min-height: 72px; padding-block: 18px !important; background: transparent !important; }
html[data-visual-world="academy"] body[data-view="today"] .topbar h1 { color: var(--ink) !important; }
html[data-visual-world="academy"] body[data-view="today"] .topbar::before,
html[data-visual-world="academy"] body[data-view="today"] .topbar::after { content: none; }
html[data-visual-world="academy"] body:is([data-view="today"],[data-view="assignments"],[data-view="teacher"],[data-view="admin"]) {
  --academy-scene-day: url("assets/academy/scenes/plan-day-v1.webp");
  --academy-scene-night: url("assets/academy/scenes/plan-night-v1.webp");
  --academy-scene-day-small: url("assets/academy/scenes/plan-day-small-v1.webp");
  --academy-scene-night-small: url("assets/academy/scenes/plan-night-small-v1.webp");
}
html[data-visual-world="academy"] body[data-view="listen"] {
  --academy-scene-day: url("assets/academy/scenes/listen-day-v1.webp");
  --academy-scene-night: url("assets/academy/scenes/listen-night-v1.webp");
  --academy-scene-day-small: url("assets/academy/scenes/listen-day-small-v1.webp");
  --academy-scene-night-small: url("assets/academy/scenes/listen-night-small-v1.webp");
}
html[data-visual-world="academy"] body:is([data-view="reading"],[data-view="speaking"]) {
  --academy-scene-day: url("assets/academy/scenes/reading-day-v1.webp");
  --academy-scene-night: url("assets/academy/scenes/reading-night-v1.webp");
  --academy-scene-day-small: url("assets/academy/scenes/reading-day-small-v1.webp");
  --academy-scene-night-small: url("assets/academy/scenes/reading-night-small-v1.webp");
}
html[data-visual-world="academy"] body[data-view="writing"] {
  --academy-scene-day: url("assets/academy/scenes/writing-day-v1.webp");
  --academy-scene-night: url("assets/academy/scenes/writing-night-v1.webp");
  --academy-scene-day-small: url("assets/academy/scenes/writing-day-small-v1.webp");
  --academy-scene-night-small: url("assets/academy/scenes/writing-night-small-v1.webp");
}
html[data-visual-world="academy"] body:is([data-view="growth"],[data-view="member"],[data-view="referral"]) {
  --academy-scene-day: url("assets/academy/scenes/growth-day-v1.webp");
  --academy-scene-night: url("assets/academy/scenes/growth-night-v1.webp");
  --academy-scene-day-small: url("assets/academy/scenes/growth-day-small-v1.webp");
  --academy-scene-night-small: url("assets/academy/scenes/growth-night-small-v1.webp");
}
html[data-visual-world="academy"] body:is([data-view="teacher"],[data-view="admin"]) .topbar { min-height: 184px; }
html[data-visual-world="academy"] body:is([data-view="teacher"],[data-view="admin"]) .topbar::before,
html[data-visual-world="academy"] body:is([data-view="teacher"],[data-view="admin"]) .topbar::after { width: 430px; }

/* Today: retain equal task weight and all existing progress/usage semantics. */
html[data-visual-world="academy"] .home-greeting-strip {
  position: relative;
  min-height: 216px;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-content: center;
  gap: 16px !important;
  padding: 28px 34% 26px 28px !important;
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}
html[data-visual-world="academy"] .home-greeting-strip::before,
html[data-visual-world="academy"] .home-greeting-strip::after {
  content: "" !important;
  position: absolute; inset: 0 0 0 auto;
  width: min(100%,648px); height: auto;
  background: var(--academy-banner) right center / auto 100% no-repeat;
  --academy-art-x: linear-gradient(to right,transparent,rgb(0 0 0 / 20%) 22%,#000 52%,#000 86%,transparent);
  --academy-art-y: linear-gradient(to bottom,transparent,#000 22%,#000 56%,rgb(0 0 0 / 30%) 86%,transparent);
  -webkit-mask-image: var(--academy-art-x),var(--academy-art-y);
  mask-image: var(--academy-art-x),var(--academy-art-y);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 1; transform: none; pointer-events: none;
}
html[data-visual-world="academy"] .home-greeting-strip > * { position: relative; }
html[data-visual-world="academy"] .home-greeting-strip .home-hello-copy { min-width: 0; grid-column: 1 / -1; }
html[data-visual-world="academy"] .home-greeting-strip .home-hello-copy > span:first-child { display: block !important; color: #2c506f !important; font-size: 14px !important; font-weight: 500; margin-bottom: 8px; }
html[data-visual-world="academy"] .home-greeting-strip .home-hello-name-row { display: flex !important; flex-wrap: wrap; gap: 9px; align-items: center; }
html[data-visual-world="academy"] .home-greeting-strip .home-hello-name-row strong { color: #102b4f !important; font-size: 32px !important; line-height: 1.25; overflow-wrap: anywhere; text-transform: none; }
html[data-visual-world="academy"] .home-greeting-strip .home-hello-copy small { display: block !important; color: #2c506f !important; font-size: 13px !important; max-width: 36ch; margin-top: 12px; line-height: 1.5; }
html[data-visual-world="academy"] .home-greeting-strip .home-greeting-tools { position: absolute; top: 14px; right: 14px; gap: 8px; }
html[data-visual-world="academy"] .home-greeting-strip .home-plan-row { grid-column: 1 / -1; padding: 0; margin: 0; color: #243c58; border: 0; flex-wrap: wrap; }
html[data-visual-world="academy"] .home-greeting-strip .home-plan-text { color: #243c58; }
html[data-visual-world="academy"] .home-greeting-strip .home-plan-adjust-action { min-height: 36px; }
html[data-visual-world="academy"] .student-home { gap: 20px !important; }
html[data-visual-world="academy"] .student-home :is(.home-check-row,.daily-checkin-card) { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: 8px !important; padding: 14px !important; box-shadow: none !important; }
html[data-visual-world="academy"] .student-home .home-check-row + .home-check-row { margin-top: 8px; }
html[data-visual-world="academy"] .student-home .home-checklist { gap: 0; }
html[data-visual-world="academy"] .student-home .daily-checkin-section .daily-checkin-card.done { background: var(--green-soft) !important; padding: 14px !important; }
html[data-visual-world="academy"] .home-member-quota-strip { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--hairline) !important; border-radius: 0 !important; padding-inline: 0 !important; }
html[data-visual-world="academy"] .home-shortcut-strip { border-radius: 0 !important; background: transparent !important; }
html[data-visual-world="academy"] .student-home .home-main-cta.has-sub { align-items: flex-start; gap: 4px; padding: 10px 16px !important; text-align: left; }
html[data-visual-world="academy"] .home-main-cta .home-cta-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
html[data-visual-world="academy"] .home-main-cta .home-cta-task-title { color: inherit; opacity: 1; font-size: 12px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }

/* Words: no new image, no new transform/height/touch rule on the swipe engine. */
html[data-visual-world="academy"] :is(.word-card,.swp2-front,.swp2-back) { background: var(--surface) !important; color: var(--ink) !important; }
html[data-visual-world="academy"] .word-card { border: 1px solid var(--hairline) !important; border-radius: 16px !important; box-shadow: var(--shadow-sm) !important; padding: 28px !important; }
html[data-visual-world="academy"] .word-card .word-title { color: var(--ink) !important; font-family: var(--font-display) !important; font-size: 54px !important; line-height: 1.18 !important; overflow-wrap: anywhere; background: none !important; -webkit-text-fill-color: currentColor !important; margin: 26px 0 16px !important; }
html[data-visual-world="academy"] .word-card .word-meaning { font-size: 20px !important; line-height: 1.5 !important; }
html[data-visual-world="academy"] .word-card .cv-meaning-dim { font-size: 14px !important; font-style: normal !important; }
html[data-visual-world="academy"] .word-card .word-example { font-size: 17px; line-height: 1.7; }
html[data-visual-world="academy"] .word-card .tool-cluster { background: transparent !important; border: 0 !important; border-top: 1px solid var(--hairline-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 18px 0 0 !important; }
html[data-visual-world="academy"] .cv-wc-tool { border-radius: 8px !important; }
html[data-visual-world="academy"] :is(.cv-word-scope-chooser,.cv-study-sheet) { background: var(--surface) !important; box-shadow: none !important; border: 0 !important; border-radius: 12px !important; }
html[data-visual-world="academy"] .cv-word-scope-option { background: var(--surface) !important; border-radius: 8px; }
html[data-visual-world="academy"] .cv-word-scope-option:nth-child(2) > b { background: var(--green-soft); color: var(--green-ink); }
html[data-visual-world="academy"] .cv-word-scope-option:nth-child(4) > b { background: var(--amber-soft); color: var(--amber-ink); }
html[data-visual-world="academy"] .swipe-seg { border-radius: 8px; }
html[data-visual-world="academy"] .swipe-seg button[aria-pressed="true"] { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }

/* Learning workspaces are unframed; only actual items and tools have edges. */
html[data-visual-world="academy"] :is(.reading-shell,.listen-list-card,.writing-step,.assignment-collapsible,.growth-summary-grid) { box-shadow: none !important; border-radius: 0 !important; }
html[data-visual-world="academy"] :is(.reading-shell,.listen-list-card) { background: transparent !important; }
html[data-visual-world="academy"] .reading-mode-tabs button { border-radius: 8px !important; }
html[data-visual-world="academy"] .reading-mode-tabs button.active { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
html[data-visual-world="academy"] :is(.reading-task-card,.book-audio-row) { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: 8px !important; box-shadow: none !important; }
html[data-visual-world="academy"] .reading-task-card.active { border-color: var(--accent-edge) !important; background: var(--accent-soft-2) !important; }
html[data-visual-world="academy"] #view-reading .reading-task-card[hidden] { display: none !important; }
html[data-visual-world="academy"] .reading-catalog-search { display: grid; grid-template-columns: 18px minmax(0,1fr) 44px; align-items: center; gap: 4px; min-height: 46px; flex: 0 0 auto; margin-bottom: 12px; padding-left: 12px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); color: var(--muted); }
html[data-visual-world="academy"] .reading-catalog-search:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-visual-world="academy"] #readingCatalogSearch { width: 100%; min-width: 0; height: 44px; padding: 0 4px; border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; color: var(--ink); font-size: 16px; }
html[data-visual-world="academy"] #readingCatalogSearch::-webkit-search-cancel-button { -webkit-appearance: none; }
html[data-visual-world="academy"] #readingCatalogClear { width: 44px; height: 44px; padding: 10px; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--muted); }
html[data-visual-world="academy"] #readingCatalogClear[hidden] { display: block !important; visibility: hidden; }
html[data-visual-world="academy"] .reading-search-empty { margin: 12px 4px; color: var(--muted); font-size: 14px; line-height: 1.6; }
html[data-visual-world="academy"] body.cv-poster-open { overflow: hidden; }
html[data-visual-world="academy"] .cv-poster-modal { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow-y: auto; }
html[data-visual-world="academy"] .cv-poster-box { width: min(360px,100%); max-height: calc(100vh - 24px); max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))); padding: 12px; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-radius: 8px; }
html[data-visual-world="academy"] .cv-poster-box > * { flex: none; }
html[data-visual-world="academy"] .cv-poster-close { position: sticky; inset: 0 0 auto auto; z-index: 1; align-self: flex-end; width: 44px; height: 44px; padding: 11px; background: var(--surface-2); color: var(--ink); }
html[data-visual-world="academy"] .cv-poster-tip { color: var(--ink-2); font-size: 14px; opacity: 1; }
html[data-visual-world="academy"] .cv-poster-img { height: auto; border-radius: 8px; box-shadow: none; }
html[data-visual-world="academy"] .cv-poster-dl { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; text-decoration: none; font-size: 15px; font-weight: 650; }
html[data-visual-world="academy"] .listen-player-card { background: var(--surface) !important; border: 1px solid var(--hairline) !important; border-radius: 12px !important; box-shadow: none !important; }
html[data-visual-world="academy"] :is(.listen-mode-card.active,.listen-level-pill.active,.listen-group-pill.active) { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
html[data-visual-world="academy"] .listen-catalog-guide { border-radius: 8px !important; background: var(--surface) !important; box-shadow: none !important; }
html[data-visual-world="academy"] :is(.writing-capture-grid,.writing-prompt-box,.writing-controls) { min-width: 0; }
html[data-visual-world="academy"] #view-writing .writing-step { border: 0 !important; border-bottom: 1px solid var(--hairline) !important; padding: 22px 0 !important; background: transparent !important; }
html[data-visual-world="academy"] #view-writing .writing-step::before { content: none !important; }
html[data-visual-world="academy"] #view-writing .writing-step.is-current { background: transparent !important; }
html[data-visual-world="academy"] .writing-ocr-pending { padding-block: 12px 16px; margin-bottom: 16px; border-block: 1px solid var(--hairline); font-size: 14px; line-height: 1.6; }
html[data-visual-world="academy"] .writing-ocr-pending p { margin: 0 0 4px; color: var(--ink-2); }
html[data-visual-world="academy"] .writing-ocr-pending summary { min-height: 44px; padding-block: 10px; color: var(--accent-ink); cursor: pointer; }
html[data-visual-world="academy"] .writing-ocr-pending-text { max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; background: var(--surface-2); color: var(--ink); }
html[data-visual-world="academy"] .writing-ocr-pending-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
html[data-visual-world="academy"] .writing-ocr-pending-actions button { min-height: 44px; flex: 1 1 140px; }
html[data-visual-world="academy"] :is(.writing-result,.writing-review-panel) { color: var(--ink); }
html[data-visual-world="academy"] .writing-review-context { margin: 12px 0; padding-block: 10px; border-block: 1px solid var(--hairline); color: var(--ink-2); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
html[data-visual-world="academy"] #view-writing textarea[readonly] { background-color: var(--surface-2) !important; color: var(--ink) !important; cursor: text; }
/* WebKit includes a disabled native option's intrinsic width in page overflow. */
html[data-visual-world="academy"] #writingAssignmentSelect:disabled { overflow: hidden; }
html[data-visual-world="academy"] #writingEditBtn:disabled { background: var(--surface-2) !important; color: var(--muted) !important; box-shadow: none !important; cursor: not-allowed; }
html[data-visual-world="academy"] [data-retry-writing-detail] { min-height: 44px; margin-top: 8px; }
html[data-visual-world="academy"] .writing-review-hero { background: var(--green-soft) !important; border-radius: 8px !important; color: var(--ink) !important; }
html[data-visual-world="academy"] :is(.assignment-history-row,.daily-checkin-record-card) { background: var(--surface) !important; border-radius: 8px !important; }
html[data-visual-world="academy"] .assignment-history-row { border: 1px solid var(--hairline-soft) !important; }
/* Assignments: one overview, one heading per type, then the actual tasks. */
html[data-visual-world="academy"] #view-assignments .assignment-archive { gap: 24px !important; }
html[data-visual-world="academy"] #view-assignments .assignment-overview-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 0 16px; border-bottom: 1px solid var(--hairline); }
html[data-visual-world="academy"] #view-assignments .assignment-overview-counts { display: flex; flex-wrap: wrap; gap: 8px 24px; min-width: 0; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
html[data-visual-world="academy"] #view-assignments .assignment-overview-counts > div { display: flex; gap: 6px; align-items: baseline; }
html[data-visual-world="academy"] #view-assignments .assignment-overview-counts dd { margin: 0; color: var(--ink); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-visual-world="academy"] #view-assignments .assignment-archive-refresh { width: 44px !important; min-width: 44px !important; height: 44px !important; flex: none; border-radius: 8px !important; }
html[data-visual-world="academy"] #view-assignments .assignment-sync-status { margin: -12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
html[data-visual-world="academy"] #view-assignments .assignment-archive-section { gap: 8px !important; padding: 0 !important; }
html[data-visual-world="academy"] #view-assignments .assignment-archive-section .section-head { display: flex !important; flex-wrap: nowrap !important; align-items: baseline; gap: 12px; margin: 0; }
html[data-visual-world="academy"] #view-assignments .assignment-archive-section .section-head > span { flex: none; color: var(--muted); font-size: 13px; }
html[data-visual-world="academy"] #view-assignments .assignment-section-subtitle { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
html[data-visual-world="academy"] #view-assignments .assignment-type-groups { gap: 24px; }
html[data-visual-world="academy"] #view-assignments .assignment-type-group { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html[data-visual-world="academy"] #view-assignments .assignment-type-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
html[data-visual-world="academy"] #view-assignments .assignment-type-icon { width: 24px; height: 24px; padding: 0; background: transparent; color: var(--accent-ink); border: 0; border-radius: 0; }
html[data-visual-world="academy"] #view-assignments .assignment-type-icon .ic { width: 18px; height: 18px; }
html[data-visual-world="academy"] #view-assignments .assignment-type-head > div { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
html[data-visual-world="academy"] #view-assignments .assignment-type-head h4 { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; font-weight: 650; }
html[data-visual-world="academy"] #view-assignments .assignment-type-head small { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
html[data-visual-world="academy"] #view-assignments .assignment-history-row { padding: 16px !important; }
html[data-visual-world="academy"] #view-assignments .assignment-history-icon { color: var(--accent-ink); background: var(--accent-soft); }
html[data-visual-world="academy"] #view-assignments .assignment-history-main p { font-size: 13px; }
html[data-visual-world="academy"] #view-assignments .assignment-history-main small { font-size: 12px; }
html[data-visual-world="academy"] #view-assignments .assignment-history-main .assignment-history-meta { line-height: 1.65; }
html[data-visual-world="academy"] #view-assignments .assignment-collapsible { border-top: 1px solid var(--hairline) !important; }
html[data-visual-world="academy"] #view-assignments .assignment-collapsible-body { padding: 8px 0 0; border: 0; }
@media (max-width:600px) {
  html[data-visual-world="academy"] #view-assignments .assignment-overview-counts { gap: 6px 12px; font-size: 12px; }
  html[data-visual-world="academy"] #view-assignments .assignment-history-row { padding: 12px !important; }
  html[data-visual-world="academy"] #view-assignments .assignment-history-icon { width: 30px; height: 34px; border-radius: 8px; }
}
html[data-visual-world="academy"] :is(.cv-ms-focus,.growth-weekly-panel) { background: var(--surface) !important; box-shadow: none !important; border-radius: 8px !important; }
html[data-visual-world="academy"] :is(.growth-summary-card,.cv-ms-head,.cv-ms-collection) { background: transparent !important; box-shadow: none !important; }

/* Membership shares the same work surface; only plans and account status are framed. */
html[data-visual-world="academy"] #view-member .member-hero { background: transparent !important; color: var(--ink); border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; padding: 12px 0 28px; }
html[data-visual-world="academy"] #view-member .member-hero::after { content: none; }
html[data-visual-world="academy"] #view-member .member-hero h2 { color: var(--ink) !important; font-size: 30px !important; line-height: 1.35; }
html[data-visual-world="academy"] #view-member .member-kicker { color: var(--accent-ink); background: var(--accent-soft); border: 0; }
html[data-visual-world="academy"] #view-member :is(.member-hero-copy > p,.member-hero-points span) { color: var(--ink-2); }
html[data-visual-world="academy"] #view-member .member-hero-points .ic { color: var(--accent-ink); }
html[data-visual-world="academy"] #view-member .member-beneficiary { background: var(--surface-2); border: 1px solid var(--hairline-soft); border-radius: 8px; color: var(--ink); }
html[data-visual-world="academy"] #view-member .member-beneficiary :is(strong,dd) { color: var(--ink); }
html[data-visual-world="academy"] #view-member .member-beneficiary :is(small,span:not(.member-status),p,dt) { color: var(--muted); }
html[data-visual-world="academy"] #view-member .member-beneficiary dl > div { border-color: var(--hairline); }
html[data-visual-world="academy"] #view-member .member-beneficiary .member-status { background: var(--accent-soft); color: var(--accent-ink); }
html[data-visual-world="academy"] #view-member .member-beneficiary .member-status.is-active { background: var(--green-soft); color: var(--green-ink); }
html[data-visual-world="academy"] #view-member .member-beneficiary .member-status:is(.is-expired,.is-pending) { background: var(--amber-soft); color: var(--amber-ink); }
html[data-visual-world="academy"] #view-member .member-icon-action { min-width: 44px; min-height: 44px; }
html[data-visual-world="academy"] #view-member .member-icon-action:hover { background: var(--accent-soft); }
html[data-visual-world="academy"] #view-member :is(.member-purchase,.member-live-usage,.member-value,.member-benefits) { border: 0; border-radius: 0; padding: 12px 0 24px; background: transparent; }
html[data-visual-world="academy"] #view-member :is(.member-value-card,.member-free-card,.member-offer) { border-radius: 8px; box-shadow: none !important; }
html[data-visual-world="academy"] #view-member .member-value-card { padding: 16px; transform: none; }
html[data-visual-world="academy"] #view-member .member-value-card::before { content: none; }
html[data-visual-world="academy"] #view-member .member-offer.is-selected { background: var(--accent-soft-2); border-color: var(--accent); }
html[data-visual-world="academy"] #view-member .member-offer-badge { background: var(--academy-action); color: #fff; }
html[data-visual-world="academy"] #view-member .member-offer-badge.is-gold { background: var(--amber-soft); color: var(--amber-ink); }
html[data-visual-world="academy"] #view-member .member-offer-now { color: var(--accent-ink); }
html[data-visual-world="academy"] #view-member .member-offer-was { color: var(--muted); }
html[data-visual-world="academy"] #view-member .member-offer-save { color: var(--green-ink); }
html[data-visual-world="academy"] #view-member .member-free-kicker { color: var(--amber-ink); }
html[data-visual-world="academy"] #view-member .member-free-trial { background: var(--amber-soft); color: var(--amber-ink); border: 0; border-radius: 8px; }
html[data-visual-world="academy"] #view-member .member-free-trial strong { color: inherit; }

/* Teacher/admin: retain dense tables and column visibility contracts. */
html[data-visual-world="academy"] #view-admin .admin-console { min-width: 0; }
html[data-visual-world="academy"] #view-admin .admin-panel > .surface-card { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 20px 0 !important; }
html[data-visual-world="academy"] #view-admin .admin-panel > .surface-card + .surface-card { border-top: 1px solid var(--hairline) !important; }
html[data-visual-world="academy"] #view-admin :is(h2,h3) { letter-spacing: 0 !important; }
html[data-visual-world="academy"] #view-admin h2 { font-size: 22px !important; }
html[data-visual-world="academy"] #view-admin h3 { font-size: 17px !important; }
html[data-visual-world="academy"] #view-admin :is(button,input,select,summary) { min-height: 44px !important; }
html[data-visual-world="academy"] #view-admin :is(.section-head,.settings-actions,.table-actions) { flex-wrap: wrap; gap: 12px; }
html[data-visual-world="academy"] #view-admin .admin-search { width: min(100%,400px); min-width: 0; }
html[data-visual-world="academy"] #view-admin .admin-search input { width: 100%; min-width: 0; font-size: 16px; }
html[data-visual-world="academy"] #view-admin :is(.admin-panel,.mini-form,.field,.data-table-wrap) { min-width: 0; }
html[data-visual-world="academy"] #view-admin :is(td,.feedback,.member-message,button) { overflow-wrap: anywhere; }
html[data-visual-world="academy"] #view-admin .feedback { white-space: normal; }
html[data-visual-world="academy"] #view-admin .admin-account-group { border-radius: 0; border: 0; border-top: 1px solid var(--hairline); background: transparent; box-shadow: none; }
html[data-visual-world="academy"] #view-admin :is(#adminAccountMatchCount,#adminAccountNoResults,#adminVocabImportMessage) { margin-block: 12px; }
html[data-visual-world="academy"] #view-admin [data-admin-located] { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft-2); }
html[data-visual-world="academy"] #view-admin [data-admin-located] td { background: transparent !important; }
html[data-visual-world="academy"] #view-admin .admin-account-group.search-empty { display: none; }
@media (max-width:600px) {
  html[data-visual-world="academy"] #view-admin :is(.admin-hero,.admin-panel) .section-head { align-items: flex-start; }
  html[data-visual-world="academy"] #view-admin .admin-search { width: 100%; }
  html[data-visual-world="academy"] #view-admin .table-actions { display: flex; }
  html[data-visual-world="academy"] #view-admin .table-actions button { min-width: 44px; padding-inline: 10px; white-space: normal; }
  html[data-visual-world="academy"] #view-admin #vocabUploadFile { width: 100%; max-width: 100%; }
  html[data-visual-world="academy"] #view-admin .mini-form { grid-template-columns: minmax(0,1fr); }
}
html[data-visual-world="academy"] :is(.teacher-tabs,.admin-tabs) { background: none !important; border: 0 !important; border-bottom: 1px solid var(--hairline) !important; padding: 0 0 10px !important; }
html[data-visual-world="academy"] :is(.teacher-tabs,.admin-tabs) button { min-height: 44px !important; border-radius: 8px !important; }
html[data-visual-world="academy"] :is(.teacher-tabs,.admin-tabs) button.active { background: var(--accent-soft) !important; border-color: transparent !important; }
html[data-visual-world="academy"] :is(.teacher-dashboard,.teacher-workspace,.admin-shell) h2 { font-size: 22px !important; }
html[data-visual-world="academy"] :is(.teacher-dashboard,.teacher-workspace,.admin-shell) h3 { font-size: 17px !important; }
html[data-visual-world="academy"] :is(.teacher-dashboard,.teacher-workspace,.admin-shell) table { background: var(--surface); }
html[data-visual-world="academy"] :is(.teacher-dashboard,.teacher-workspace,.admin-shell) th { background: var(--surface-2) !important; color: var(--muted) !important; }
html[data-visual-world="academy"] :is(.teacher-class-card,.class-card) { border-radius: 8px !important; background: var(--surface) !important; box-shadow: none !important; }
html[data-visual-world="academy"] #view-teacher .teacher-roster { min-width: 0; padding-block: 18px; border-block: 1px solid var(--hairline); }
html[data-visual-world="academy"] #view-teacher .teacher-roster :is(.section-head,.teacher-roster-tools,.teacher-roster-footer) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
html[data-visual-world="academy"] #view-teacher .teacher-roster .section-head { margin-bottom: 16px; }
html[data-visual-world="academy"] #view-teacher .teacher-roster h3 { margin: 0; }
html[data-visual-world="academy"] #view-teacher .teacher-roster-tools { margin-bottom: 12px; }
html[data-visual-world="academy"] #view-teacher .teacher-roster-search { display: grid; grid-template-columns: 20px minmax(0,1fr) 44px; align-items: center; gap: 8px; width: min(100%,380px); min-width: 0; min-height: 46px; padding-inline: 12px 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; }
html[data-visual-world="academy"] #view-teacher #teacherRosterSearch { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; min-width: 0; width: 100%; min-height: 44px; padding: 0 !important; font-size: 16px !important; }
html[data-visual-world="academy"] #view-teacher #teacherRosterSearch::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
html[data-visual-world="academy"] #view-teacher .teacher-roster-search:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-visual-world="academy"] #view-teacher #teacherRosterClear { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); }
html[data-visual-world="academy"] #view-teacher :is(#teacherRosterCount,.teacher-roster-footer) { font-size: 14px; color: var(--muted); }
html[data-visual-world="academy"] #view-teacher .teacher-roster-footer { padding-top: 12px; }
html[data-visual-world="academy"] #view-teacher .teacher-roster .data-table-wrap { max-height: 560px; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 0; background: transparent; }
html[data-visual-world="academy"] #view-teacher .teacher-roster :is(.teacher-student-name,.td-action button) { min-height: 44px; white-space: normal; overflow-wrap: anywhere; text-align: left; }
html[data-visual-world="academy"] #view-teacher .teacher-roster .teacher-student-name { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 6px 0 !important; border-radius: 4px !important; color: var(--accent-ink) !important; font-weight: 700 !important; line-height: 1.5; }
html[data-visual-world="academy"] #view-teacher .teacher-roster .td-action button { border-radius: 8px !important; text-align: center; }
html[data-visual-world="academy"] #view-teacher .teacher-roster .td-title { min-width: 110px; }
html[data-visual-world="academy"] #view-teacher .teacher-roster .student-detail-panel { margin-top: 20px; }
html[data-visual-world="academy"] #view-teacher .teacher-roster [hidden] { display: none !important; }
html[data-visual-world="academy"] #view-teacher .teacher-selection-message { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
html[data-visual-world="academy"] #view-teacher .teacher-selection-message[hidden] { display: none !important; }
html[data-visual-world="academy"] #view-teacher .teacher-draft-status { grid-column: 1 / -1; margin: 0; min-height: 22px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
html[data-visual-world="academy"] #view-teacher .teacher-result-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding-block: 16px; }
html[data-visual-world="academy"] #view-teacher .teacher-result-filters label { display: grid; gap: 6px; min-width: 0; flex: 1 1 170px; font-size: 13px; color: var(--muted); }
html[data-visual-world="academy"] #view-teacher .teacher-result-filters .teacher-result-search { flex: 2 1 220px; }
html[data-visual-world="academy"] #view-teacher .teacher-result-filters :is(input,select) { width: 100%; min-width: 0; min-height: 44px; font-size: 16px !important; border-radius: 8px !important; }
html[data-visual-world="academy"] #view-teacher .teacher-result-filters button { min-height: 44px; flex: 0 0 auto; }
html[data-visual-world="academy"] #view-teacher :is(.teacher-result-filter-count,.teacher-result-scope) { width: 100%; margin: 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
html[data-visual-world="academy"] #view-teacher .teacher-result-scope { padding-bottom: 16px; }
html[data-visual-world="academy"] #view-teacher :is(.teacher-checkin-student-row,.assignment-detail-target) [hidden],
html[data-visual-world="academy"] #view-teacher :is(.teacher-checkin-student-row[hidden],[data-result-filter-empty][hidden]) { display: none !important; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-card { border: 0 !important; border-top: 1px solid var(--hairline) !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 20px 0 !important; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-card-head { display: flex; align-items: start; flex-wrap: wrap; gap: 16px; padding-bottom: 16px; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-card-head > div:first-child { min-width: 0; flex: 1 1 240px; overflow-wrap: anywhere; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-score { flex: 0 1 auto; align-items: start; text-align: left; background: transparent !important; padding: 0 !important; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-score span { font-size: 13px; white-space: normal; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-students { gap: 0; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-student-row { border: 0 !important; border-top: 1px solid var(--hairline-soft) !important; border-radius: 0 !important; background: transparent !important; padding: 16px 0 !important; gap: 16px; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-student-row > div:first-child { flex: 1 1 220px; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-student-row strong { font-size: 15px; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-student-row small { font-size: 13px; line-height: 1.7; }
html[data-visual-world="academy"] #view-teacher .teacher-result-week { min-width: 0; flex: 0 1 332px; }
html[data-visual-world="academy"] #view-teacher .teacher-result-week > small { margin-bottom: 6px; }
html[data-visual-world="academy"] #view-teacher .teacher-result-week .daily-checkin-days { gap: 4px; }
html[data-visual-world="academy"] #view-teacher .teacher-result-week .teacher-result-day { border: 1px solid var(--hairline) !important; box-shadow: none !important; font-weight: 600; }
html[data-visual-world="academy"] #view-teacher .teacher-result-week .teacher-result-day.done { border-color: var(--accent-edge) !important; }
html[data-visual-world="academy"] #view-teacher .teacher-result-week .daily-checkin-days > span { width: 34px; height: 34px; border-radius: 4px; font-size: 13px; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-dashboard { min-width: 0; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-dashboard [hidden] { display: none !important; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-catalog .teacher-checkin-task-picker { flex: 3 1 280px; grid-template-columns: minmax(0,1fr); }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-task-picker select { overflow: hidden; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-dashboard [data-checkin-catalog-status] { min-height: 24px; font-size: 14px; overflow-wrap: anywhere; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-dashboard [data-checkin-catalog-status] p { margin: 0; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-dashboard :is(.feedback,.teacher-checkin-history) { overflow-wrap: anywhere; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-history { font-size: 13px; line-height: 1.7; color: var(--muted); }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-history button { min-height: 44px !important; font-size: 14px !important; text-align: left; white-space: normal; }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-history [data-checkin-history-error]:not(:empty) { color: var(--red-ink); }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px; border-top: 1px solid var(--hairline); }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-pagination span { font-size: 13px; line-height: 1.6; color: var(--muted); }
html[data-visual-world="academy"] #view-teacher .teacher-checkin-pagination button { min-height: 44px; min-width: 100px; white-space: normal; }
@media (max-width:680px) {
  html[data-visual-world="academy"] #view-teacher .teacher-result-filters .teacher-result-date { flex-basis: calc(100% - 70px); }
  html[data-visual-world="academy"] #view-teacher .teacher-result-filters :is(.teacher-result-search,label:not(.teacher-result-date)) { flex-basis: 100%; }
  html[data-visual-world="academy"] #view-teacher .teacher-checkin-student-row { display: flex; flex-direction: column; align-items: stretch; }
  html[data-visual-world="academy"] #view-teacher .teacher-checkin-student-row > div { flex: 0 1 auto !important; }
  html[data-visual-world="academy"] #view-teacher .teacher-checkin-pagination { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-visual-world="academy"] #view-teacher .teacher-checkin-pagination span { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  html[data-visual-world="academy"] #view-teacher .teacher-checkin-pagination button { width: 100%; min-width: 0; }
}
html[data-visual-world="academy"] #view-teacher .vocab-quick-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
html[data-visual-world="academy"] #view-teacher .vocab-quick-actions button { width: 100% !important; min-width: 0; min-height: 44px; padding: 8px 10px !important; border-radius: 8px !important; font-size: 14px !important; white-space: normal; line-height: 1.4; }
html[data-visual-world="academy"] #view-teacher :is(.reading-textbook-search,.reading-textbook-passage) { grid-column: 1 / -1; min-width: 0; }
html[data-visual-world="academy"] #view-teacher :is(#vocabAssignmentSearch,#readingTextbookSearch) { min-width: 0; min-height: 44px; font-size: 16px !important; }
html[data-visual-world="academy"] #view-teacher #vocabVisibleSelection { margin: 0; padding-block: 8px; font-size: 14px; color: var(--muted); }
@media (max-width:680px) {
  html[data-visual-world="academy"] #view-teacher .vocab-quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-visual-world="academy"] #view-teacher .teacher-roster-search { width: 100%; }
  html[data-visual-world="academy"] #view-teacher .teacher-roster .data-table-wrap { max-height: 620px; }
  html[data-visual-world="academy"] #view-teacher .teacher-roster .responsive-cards tr { border-radius: 8px; box-shadow: none; }
  html[data-visual-world="academy"] #view-teacher .teacher-roster .responsive-cards td.td-title { display: grid !important; grid-template-columns: minmax(0,1fr); min-width: 0; }
  html[data-visual-world="academy"] #view-teacher .teacher-roster .responsive-cards td.td-title br { display: none; }
  html[data-visual-world="academy"] #view-teacher .teacher-roster .responsive-cards td.td-title small { overflow-wrap: anywhere; }
  html[data-visual-world="academy"] #view-teacher .teacher-roster .teacher-student-name { font-size: 16px; }
}
html[data-visual-world="academy"] :is(.settings-drawer,.speech-modal,.writing-review-modal,.auth-doc-card,.modal-card) { background: var(--surface) !important; color: var(--ink); box-shadow: var(--shadow-lg) !important; }
html[data-visual-world="academy"] :is(.settings-section,.settings-block) { border-radius: 0 !important; box-shadow: none !important; }
/* Settings keep their original controls in four navigable, independent panels. */
html[data-visual-world="academy"] .settings-drawer { width: min(100vw,480px) !important; max-width: 100vw; }
html[data-visual-world="academy"] .settings-drawer .drawer-head { align-items: center; border: 0; flex: none; }
html[data-visual-world="academy"] .settings-drawer .drawer-close { width: 44px !important; min-height: 44px !important; }
html[data-visual-world="academy"] .settings-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); flex: none; margin-inline: 20px; border-bottom: 1px solid var(--hairline); }
html[data-visual-world="academy"] .settings-nav [role="tab"] { min-width: 0; min-height: 48px; padding: 10px 4px; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--muted) !important; font-size: 15px; font-weight: 600; }
html[data-visual-world="academy"] .settings-nav [aria-selected="true"] { border-bottom-color: var(--accent) !important; color: var(--accent-ink) !important; font-weight: 750; }
html[data-visual-world="academy"] .settings-drawer .drawer-body { display: block; padding-top: 0 !important; scroll-padding-top: 16px; }
html[data-visual-world="academy"] .settings-panel { min-width: 0; }
html[data-visual-world="academy"] .settings-panel[hidden] { display: none !important; }
html[data-visual-world="academy"] .settings-panel .settings-card { padding-block: 24px !important; }
html[data-visual-world="academy"] .settings-panel .section-head { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 12px; margin-bottom: 18px; }
html[data-visual-world="academy"] .settings-panel .section-head > span { margin-left: auto; font-size: 12px; flex: none; }
html[data-visual-world="academy"] .settings-panel .section-head .eyebrow { display: none; }
html[data-visual-world="academy"] .settings-panel h3 { margin: 0; font-size: 17px; line-height: 1.5; }
html[data-visual-world="academy"] .settings-row { gap: 16px; align-items: baseline; }
html[data-visual-world="academy"] .settings-row > span { flex: none; color: var(--muted); font-size: 14px; }
html[data-visual-world="academy"] .settings-row > strong { min-width: 0; overflow-wrap: anywhere; text-align: end; font-size: 14px; font-weight: 600; }
html[data-visual-world="academy"] .settings-panel .field { gap: 8px; margin-bottom: 16px; color: var(--ink-2); }
html[data-visual-world="academy"] .settings-password-form input { min-height: 44px; padding: 10px 12px; border-width: 1px; font-size: 16px !important; line-height: 1.4; }
html[data-visual-world="academy"] .settings-panel .settings-note { padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--muted); font-size: 13px; line-height: 1.65; }
html[data-visual-world="academy"] .settings-panel .field-label { margin: 0 0 8px; }
html[data-visual-world="academy"] .settings-panel .settings-field-label { margin: 24px 0 10px; }
html[data-visual-world="academy"] .settings-panel .settings-level-options { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px; margin-top: 16px; }
html[data-visual-world="academy"] .settings-panel .settings-level-option { min-width: 0; min-height: 64px; padding: 10px 12px; text-align: left; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); border-radius: 8px !important; }
html[data-visual-world="academy"] .settings-panel .settings-level-option.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
html[data-visual-world="academy"] .settings-level-option .settings-level-name { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; white-space: normal; }
html[data-visual-world="academy"] .settings-level-option small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; white-space: normal; }
html[data-visual-world="academy"] .settings-seg { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 8px; }
html[data-visual-world="academy"] .settings-seg button { min-height: 44px; }
html[data-visual-world="academy"] .settings-panel .palette-picker { gap: 8px; }
html[data-visual-world="academy"] .settings-panel .palette-swatch { min-width: 0; padding: 8px; border-radius: 8px; }
html[data-visual-world="academy"] .settings-panel .swatch-name { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-size: 13px; line-height: 1.5; }
html[data-visual-world="academy"] .settings-panel .bg-picker { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
html[data-visual-world="academy"] .settings-panel .bg-swatch { min-width: 0; }
html[data-visual-world="academy"] .settings-panel .bg-swatch-name { font-size: 13px; white-space: normal; }
html[data-visual-world="academy"] .settings-panel .setting-check { min-height: 48px; gap: 12px; padding: 10px 0; background: transparent; line-height: 1.55; }
html[data-visual-world="academy"] .settings-panel .setting-check input { flex: none; width: 18px; height: 18px; accent-color: var(--academy-action); }
html[data-visual-world="academy"] .settings-panel .settings-actions button { min-height: 44px; }
html[data-visual-world="academy"] #settingsLogout { background: transparent !important; color: var(--red-ink) !important; border-color: var(--hairline) !important; box-shadow: none !important; }
html[data-visual-world="academy"] #settingsLogout:focus-visible { outline-color: var(--red-ink) !important; }
html[data-visual-world="academy"] .settings-panel .settings-legal-links { display: grid; justify-items: start; gap: 8px; }
html[data-visual-world="academy"] .settings-legal-links :is(a,button) { min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
html[data-visual-world="academy"] .settings-panel .settings-legal-copy { font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  html[data-visual-world="academy"] .settings-drawer :is(input:not([type="checkbox"]),select,textarea) { font-size: 16px !important; }
  html[data-visual-world="academy"] .settings-nav { margin-inline: 18px; }
}
html[data-visual-world="academy"] .mobile-tabbar { background: var(--surface) !important; border-top: 1px solid var(--hairline) !important; box-shadow: none !important; backdrop-filter: none !important; }
html[data-visual-world="academy"] .mobile-tabbar .mt.active { color: var(--accent-ink) !important; }
html[data-visual-world="academy"] .mobile-tabbar .mt.active .mt-ic { background: var(--accent-soft) !important; }
html[data-visual-world="academy"] .tab-sheet { border-radius: 16px 16px 0 0 !important; background: var(--surface) !important; }
html[data-visual-world="academy"] .empty-state-card { background: var(--surface) !important; border: 1px solid var(--hairline-soft) !important; border-radius: 8px !important; box-shadow: none !important; }
html[data-visual-world="academy"] .empty-state-card::before { content: ""; display: block; width: 140px; height: 118px; margin: 0 auto 12px; background: url("assets/academy/empty.webp") center / contain no-repeat; }
html[data-visual-world="academy"] .empty-state-card > .icon { display: none !important; }

/* Listening: the catalog, list and single-player dock are one continuous tool. */
html[data-visual-world="academy"] #view-listen .listen-view { gap: 18px !important; }
html[data-visual-world="academy"] #view-listen .listen-mode-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 4px !important; border: 0 !important; padding: 4px !important; border-radius: 8px !important; background: var(--surface-2) !important; width: max-content; max-width: 100%; }
html[data-visual-world="academy"] #view-listen .listen-mode-card { width: auto !important; min-width: max-content !important; min-height: 46px !important; padding: 9px 12px !important; border: 1px solid transparent !important; border-radius: 6px !important; box-shadow: none !important; background: transparent !important; color: var(--ink-2) !important; }
html[data-visual-world="academy"] #view-listen .listen-mode-card.active { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--accent-ink) !important; box-shadow: var(--shadow-xs) !important; }
html[data-visual-world="academy"] #view-listen .listen-mode-card > div:not(.listen-card-icon) { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 8px; }
html[data-visual-world="academy"] #view-listen .listen-mode-card strong { order: -1; flex: none; white-space: nowrap !important; font-size: 16px !important; color: inherit !important; line-height: 1.4 !important; }
html[data-visual-world="academy"] #view-listen .listen-mode-card span { flex: none; white-space: nowrap !important; font-size: 12px !important; line-height: 1.4; color: inherit !important; opacity: .85; }
html[data-visual-world="academy"] #view-listen .listen-mode-card :is(.listen-card-icon,small) { display: none !important; }
html[data-visual-world="academy"] .academy-catalog-filters { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.5fr); align-items: center; gap: 20px; }
html[data-visual-world="academy"] .academy-catalog-filters > label:not(.listen-search-bar) { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; color: var(--muted); }
html[data-visual-world="academy"] .academy-catalog-filters > label > span { flex: none; }
html[data-visual-world="academy"] .academy-catalog-filters select { width: 100%; min-height: 46px; padding: 10px 30px 10px 12px; font-size: 15px; border: 1px solid var(--hairline); }
html[data-visual-world="academy"] #view-listen .academy-catalog-filters .listen-search-bar { margin: 0 !important; min-height: 46px !important; min-width: 0; padding: 0 12px !important; border: 1px solid var(--hairline) !important; background: var(--surface) !important; border-radius: 8px !important; }
html[data-visual-world="academy"] .academy-catalog-filters .listen-search-bar input { min-height: 44px; font-size: 15px !important; border: 0 !important; }
html[data-visual-world="academy"] #view-listen #listenCatalogOptions[data-academy-filters][hidden] { display: none !important; }
html[data-visual-world="academy"] #view-listen .listen-list-card { padding: 0 !important; border: 0 !important; }
html[data-visual-world="academy"] #view-listen .listen-list-card > .section-head { margin-bottom: 12px !important; align-items: center; }
html[data-visual-world="academy"] #view-listen .listen-list-card > .section-head h3 { font-size: 14px !important; color: var(--muted) !important; }
html[data-visual-world="academy"] #view-listen #listenListEyebrow { display: none !important; }
html[data-visual-world="academy"] #view-listen #listenListCount { font-size: 12px !important; color: var(--muted) !important; }
html[data-visual-world="academy"] #view-listen .book-audio-list { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
html[data-visual-world="academy"] #view-listen .book-audio-row { grid-template-columns: 52px minmax(0,1fr) 44px !important; align-items: center !important; min-height: 88px; gap: 18px !important; padding: 14px 18px !important; border: 1px solid var(--hairline-soft) !important; border-radius: 8px !important; background: var(--surface) !important; }
html[data-visual-world="academy"] #view-listen .book-audio-row.active .book-audio-main strong { color: var(--ink) !important; }
html[data-visual-world="academy"] #view-listen .book-audio-row.active .book-audio-play { background: var(--academy-action) !important; color: #fff !important; }
html[data-visual-world="academy"] #view-listen .book-audio-row:has(.book-audio-heard) { background: color-mix(in srgb,var(--green-ink) 7%,var(--surface)) !important; border-color: color-mix(in srgb,var(--green-ink) 16%,var(--surface)) !important; }
html[data-visual-world="academy"] #view-listen .book-audio-row.active { background: var(--accent-soft) !important; border-color: var(--accent-soft) !important; }
html[data-visual-world="academy"] #view-listen :is(.book-audio-play,.listen-catalog-play) { width: 50px !important; height: 50px !important; border-radius: 50% !important; border: 0 !important; background: var(--academy-action) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%) !important; }
html[data-visual-world="academy"] #view-listen .book-audio-play svg { width: 23px; height: 23px; fill: currentColor; }
html[data-visual-world="academy"] #view-listen .book-audio-main { min-width: 0; }
html[data-visual-world="academy"] #view-listen .book-audio-main strong { font-size: 19px !important; font-weight: 650 !important; line-height: 1.4 !important; }
html[data-visual-world="academy"] #view-listen .book-audio-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 5px; }
html[data-visual-world="academy"] #view-listen .book-audio-meta { font-size: 14px !important; line-height: 1.4 !important; color: var(--muted) !important; }
html[data-visual-world="academy"] #view-listen .book-audio-heard { font-size: 12px !important; color: var(--green-ink) !important; }
html[data-visual-world="academy"] #view-listen .book-audio-favorite { width: 44px !important; height: 44px !important; color: var(--muted) !important; background: transparent !important; border: 0 !important; }
html[data-visual-world="academy"] #view-listen .book-audio-favorite.active { color: var(--accent) !important; }
html[data-visual-world="academy"] #view-listen .book-audio-favorite.active svg { fill: currentColor; }
html[data-visual-world="academy"] #view-listen .listen-catalog-guide { margin-bottom: 14px; padding: 14px !important; border: 1px solid var(--accent-edge) !important; background: var(--accent-soft-2) !important; }
html[data-visual-world="academy"] #view-listen .listen-catalog-mark { background: transparent !important; }
html[data-visual-world="academy"] #view-listen .academy-player { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(260px,1.6fr); gap: 10px 24px !important; padding: 18px 20px !important; background: var(--surface) !important; box-sizing: border-box; border: 1px solid var(--hairline-soft) !important; border-radius: 12px !important; box-shadow: 0 0 28px rgb(40 94 156 / 12%) !important; }
html[data-visual-world="academy"] .academy-listen-docked #view-listen .academy-player { position: fixed !important; top: auto !important; bottom: var(--academy-dock-bottom,16px) !important; left: var(--academy-dock-left,256px) !important; right: var(--academy-dock-right,24px) !important; width: auto !important; max-width: none !important; margin: 0 !important; z-index: 35 !important; }
html[data-visual-world="academy"] .academy-listen-docked #view-listen { padding-bottom: var(--academy-player-clearance,200px) !important; }
html[data-visual-world="academy"] #view-listen .academy-player > audio { display: none !important; }
html[data-visual-world="academy"] #view-listen .academy-player .listen-player-copy { position: relative; padding-left: 78px; min-height: 70px; min-width: 0; align-content: center; }
html[data-visual-world="academy"] #view-listen .academy-player .listen-player-copy::before { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 70px; border-radius: 8px; background: var(--accent-soft-2) url("assets/academy/listen-ornament.webp") center / contain no-repeat; }
html[data-visual-world="academy"] #view-listen .academy-player .listen-player-copy .eyebrow { display: none !important; }
html[data-visual-world="academy"] #view-listen .academy-player .listen-player-copy h3 { font-size: 16px !important; line-height: 1.4; margin: 0 0 4px !important; overflow-wrap: anywhere; }
html[data-visual-world="academy"] #view-listen .academy-player .listen-player-copy p { font-size: 12px !important; line-height: 1.5; margin: 0 !important; overflow-wrap: anywhere; }
html[data-visual-world="academy"] .academy-audio-ui { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; min-width: 0; align-content: center; }
html[data-visual-world="academy"] .academy-timeline { display: flex; align-items: center; gap: 12px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
html[data-visual-world="academy"] .academy-timeline input { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 32px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
html[data-visual-world="academy"] .academy-timeline input::-webkit-slider-runnable-track { height: 5px; background: linear-gradient(to right,var(--accent) var(--played,0%),var(--accent-soft) var(--played,0%)); border-radius: 4px; }
html[data-visual-world="academy"] .academy-timeline input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin-top: -5px; border-radius: 50%; background: var(--accent); }
html[data-visual-world="academy"] .academy-timeline input::-moz-range-track { height: 5px; background: var(--accent-soft); }
html[data-visual-world="academy"] .academy-timeline input::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: var(--accent); }
html[data-visual-world="academy"] .academy-transport { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
html[data-visual-world="academy"] .academy-transport-button { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--muted) !important; border-radius: 50% !important; }
html[data-visual-world="academy"] .academy-transport-button:disabled { opacity: .35; cursor: not-allowed; }
html[data-visual-world="academy"] .academy-transport-button svg { width: 23px; height: 23px; }
html[data-visual-world="academy"] .academy-play-toggle { background: var(--academy-action) !important; color: #fff !important; width: 48px; height: 48px; }
html[data-visual-world="academy"] .academy-play-toggle svg { fill: currentColor; width: 22px; height: 22px; }
html[data-visual-world="academy"] .academy-volume[aria-pressed="true"] { color: var(--red-ink) !important; background: var(--red-soft) !important; }
html[data-visual-world="academy"] .academy-audio-status { font-size: 12px; color: var(--muted); }
html[data-visual-world="academy"] .academy-audio-status:empty { display: none; }
html[data-visual-world="academy"] .academy-speed-select { display: none; }
html[data-visual-world="academy"] .academy-volume-range { width: 76px; min-height: 32px; margin: 0; padding: 0; accent-color: var(--academy-action); }
html[data-visual-world="academy"] #view-listen .academy-row-state { color: var(--accent-ink); font-size: 12px; font-weight: 600; }
html[data-visual-world="academy"] #view-listen .academy-player .listen-custom-controls { grid-column: 1 / -1; justify-content: space-between; gap: 10px; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html[data-visual-world="academy"] #view-listen .academy-player .listen-ctl-btn { min-height: 36px; padding: 7px 12px; font-size: 12px; white-space: nowrap; flex: none; border: 1px solid var(--hairline) !important; border-radius: 6px !important; background: var(--surface) !important; color: var(--ink-2) !important; }
html[data-visual-world="academy"] #view-listen .academy-player .listen-ctl-btn:is(.active,.armed) { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border-color: var(--accent-edge) !important; }
html[data-visual-world="academy"] #view-listen .academy-player :is(.listen-ab-hint,.listen-finish-hint,.listen-audio-error) { grid-column: 1 / -1; margin: 0 !important; font-size: 12px; max-width: 100%; }
html[data-visual-world="academy"] #view-listen .academy-player .listen-ab-hint { padding: 8px 36px 8px 10px; background: var(--surface-2) !important; color: var(--ink-2) !important; border: 0 !important; box-shadow: none !important; }
html[data-visual-world="academy"] #view-listen .academy-player .listen-audio-error[hidden] { display: none !important; }
html[data-visual-world="academy"] #view-listen .academy-player .listen-finish-hint[hidden] { display: none !important; }

@media (max-width:1180px) {
  html[data-visual-world="academy"] #view-listen .academy-player .listen-ctl-btn { min-height: 44px; }
}
@media (max-width:360px) {
  html[data-visual-world="academy"] #view-listen .academy-transport { gap: 1px; }
  html[data-visual-world="academy"] #view-listen .academy-speed-select { width: 64px; padding-inline: 4px; flex: none; }
}

/* Other modules inherit the same readable workplane, not nested floating panels. */
html[data-visual-world="academy"] :is(#view-reading,#view-writing) :is(.reading-mode-tabs,.writing-mode-tabs) { border: 0 !important; background: var(--surface-2) !important; padding: 4px !important; border-radius: 8px !important; gap: 4px !important; }
html[data-visual-world="academy"] :is(#view-reading,#view-writing) :is(.reading-mode-tabs,.writing-mode-tabs) button { min-height: 44px; min-width: 0; border: 1px solid transparent !important; border-radius: 6px !important; background: transparent !important; padding-inline: 12px !important; }
html[data-visual-world="academy"] :is(#view-reading,#view-writing) :is(.reading-mode-tabs,.writing-mode-tabs) button.active { color: var(--accent-ink) !important; border-color: var(--hairline) !important; background: var(--surface) !important; box-shadow: var(--shadow-xs) !important; }
html[data-visual-world="academy"] #view-reading .reading-task-card { border: 1px solid var(--hairline) !important; border-radius: 8px !important; padding: 16px !important; }
html[data-visual-world="academy"] #view-writing .writing-mode-toolbar { flex-wrap: nowrap; gap: 8px; }
html[data-visual-world="academy"] #view-writing .writing-history-jump { border-radius: 6px !important; border: 0 !important; padding-inline: 6px; }
html[data-visual-world="academy"] :is(.reading-detail,.reading-article,.writing-workspace,.teacher-workspace,.admin-shell) { background: transparent !important; }
html[data-visual-world="academy"] #view-reading .reading-sentence { border-color: var(--hairline-soft) !important; border-radius: 8px !important; box-shadow: none !important; }
html[data-visual-world="academy"] #view-reading .reading-paragraph-row { border-color: var(--hairline-soft) !important; }
html[data-visual-world="academy"] #view-writing .writing-step-title { font-size: 18px !important; line-height: 1.5; }
html[data-visual-world="academy"] #view-writing .writing-textarea { line-height: 1.8 !important; padding: 18px !important; }
html[data-visual-world="academy"] :is(.settings-section,.settings-block) { padding-block: 18px !important; border-bottom: 1px solid var(--hairline-soft) !important; background: transparent !important; }
html[data-visual-world="academy"] #view-growth .growth-hero { background: var(--accent-soft-2) !important; color: var(--ink) !important; padding: 20px !important; border-radius: 8px !important; box-shadow: none !important; }
html[data-visual-world="academy"] #view-growth .growth-hero::after { content: none !important; }
html[data-visual-world="academy"] #view-growth .growth-hero :is(h2,.growth-summary-copy strong) { color: var(--ink) !important; text-shadow: none !important; }
html[data-visual-world="academy"] #view-growth .growth-hero :is(.eyebrow,.muted,.growth-summary-copy small,.growth-summary-copy em) { color: var(--muted) !important; }
html[data-visual-world="academy"] #view-growth .growth-hero .secondary-action { color: var(--accent-ink) !important; background: var(--surface) !important; border: 1px solid var(--hairline) !important; }
html[data-visual-world="academy"] #view-growth .growth-summary-icon { color: var(--accent-ink) !important; background: var(--accent-soft) !important; }
html[data-visual-world="academy"] #view-growth :is(.tone-tricky,.tone-mastered) .growth-summary-icon { color: var(--green-ink) !important; background: var(--green-soft) !important; }
html[data-visual-world="academy"] #view-growth .tone-streak .growth-summary-icon { color: var(--amber-ink) !important; background: var(--amber-soft) !important; }
html[data-visual-world="academy"] #view-growth .growth-insight { color: var(--ink-2) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 8px 0 !important; margin-top: 8px; backdrop-filter: none !important; }
html[data-visual-world="academy"] #view-growth .growth-summary-card { border: 0 !important; padding: 10px 4px !important; backdrop-filter: none !important; }
html[data-visual-world="academy"] #view-writing .writing-flow-shell { padding: 0 !important; }
html[data-visual-world="academy"] #view-writing .writing-step { padding-block: 16px !important; }
html[data-visual-world="academy"] #view-writing .writing-step-head { margin-bottom: 12px !important; }
html[data-visual-world="academy"] #view-writing .writing-mode-toolbar { margin-bottom: 0 !important; }
html[data-visual-world="academy"] :is(#view-teacher,#view-admin) :is(.surface-card,.teacher-workspace,.teacher-dashboard) { row-gap: 16px !important; }
html[data-visual-world="academy"] :is(#view-teacher,#view-admin) > .view-grid { gap: 16px !important; }
html[data-visual-world="academy"] :is(#view-teacher,#view-admin) .empty-state-card { min-height: 0 !important; padding: 18px !important; }
html[data-visual-world="academy"] :is(#view-teacher,#view-admin) .empty-state-card::before { width: 84px; height: 68px; margin-bottom: 8px; }
html[data-visual-world="academy"] .student-home :is(.daily-focus,.daily-focus-summary,.daily-section-head) { margin-block: 0 !important; }

@media (hover:hover) and (pointer:fine) {
  html[data-visual-world="academy"] :is(.primary-action,.cv-wc-next,.cv-wc-say):not(:disabled):hover { background: var(--academy-action-hover) !important; transform: none !important; }
  html[data-visual-world="academy"] :is(.secondary-action,.cv-wc-know,.cv-wc-tool):not(:disabled):hover { border-color: var(--accent-edge) !important; background: var(--accent-soft-2) !important; transform: none !important; }
  /* 5.10.3: pill and icon buttons do not lift either (refine.css raises all four by 1px); not while
     pressed, so the legacy .98 press (cv-anim.css) still shows where data-ds is off (admin). */
  html[data-visual-world="academy"] :is(.pill-button,.icon-button):not(:disabled):not(:active):hover { transform: none !important; }
}
@media (max-width:1180px) {
  html[data-visual-world="academy"] .app-shell { grid-template-columns: minmax(0,1fr) !important; }
  html[data-visual-world="academy"] .sidebar { width: min(300px,calc(100vw - 52px)) !important; }
  html[data-visual-world="academy"] body:not(.nav-open) .sidebar { visibility: hidden; }
  /* Keep inherited visibility immediate, including reduced-motion overrides. */
  html[data-visual-world="academy"] #mainNav { transition-property: none !important; }
  html[data-visual-world="academy"] .main { padding: 0 24px var(--cv-mobile-tabbar-clearance,100px) !important; }
  html[data-visual-world="academy"] body .main .topbar { margin-inline: -24px; padding: 12px 24px 26px !important; min-height: 240px; grid-template-columns: 44px minmax(0,1fr) 44px !important; grid-template-rows: 48px 1fr; grid-template-areas: "menu brand theme" "title title title" "search search search" !important; row-gap: 18px !important; column-gap: 10px !important; align-items: center !important; }
  html[data-visual-world="academy"] .topbar::before,
html[data-visual-world="academy"] .topbar::after { top: 72px; }
  html[data-visual-world="academy"] .academy-mobile-brand { display: block; grid-area: brand !important; min-width: 0; color: var(--accent-ink); font-size: 22px; font-weight: 750; text-align: center; }
  html[data-visual-world="academy"] .topbar .topbar-title { width: 50%; }
  html[data-visual-world="academy"] .topbar .top-actions { display: contents !important; }
  html[data-visual-world="academy"] .topbar #menuToggle { grid-area: menu !important; width: 44px !important; }
  html[data-visual-world="academy"] .topbar #themeToggle { grid-area: theme !important; width: 44px !important; min-width: 44px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 0 !important; }
  html[data-visual-world="academy"] .topbar .search-box { grid-area: search !important; width: 100%; min-width: 0 !important; max-width: none !important; }
  html[data-visual-world="academy"] body[data-view="member"] .main .topbar { grid-template-areas: "menu brand theme" "title title title" !important; }
  html[data-visual-world="academy"] body:is([data-view="assignments"],[data-view="listen"],[data-view="reading"],[data-view="writing"]) .main .topbar { grid-template-rows: 48px minmax(108px,1fr) auto; min-height: 284px; }
  html[data-visual-world="academy"] body:is([data-view="assignments"],[data-view="listen"],[data-view="reading"],[data-view="writing"]) .topbar::before,
html[data-visual-world="academy"] body:is([data-view="assignments"],[data-view="listen"],[data-view="reading"],[data-view="writing"]) .topbar::after { bottom: 88px; }
  html[data-visual-world="academy"] body:is([data-view="teacher"],[data-view="admin"]) .main .topbar { min-height: 200px; padding-block: 12px 18px !important; }
  html[data-visual-world="academy"] body:is([data-view="teacher"],[data-view="admin"]) .topbar .topbar-title { width: 100%; }
  html[data-visual-world="academy"] body:is([data-view="teacher"],[data-view="admin"]) .topbar::before,
html[data-visual-world="academy"] body:is([data-view="teacher"],[data-view="admin"]) .topbar::after { opacity: .28; }
  html[data-visual-world="academy"] .topbar h1 { font-size: 28px !important; }
  html[data-visual-world="academy"] body[data-view="today"] .main .topbar { grid-template-rows: 44px; grid-template-areas: "menu brand theme" "search search search" !important; min-height: 68px; padding: 12px 24px !important; }
  html[data-visual-world="academy"] body[data-view="today"] .topbar .topbar-title { display: none; }
}
@media (min-width:901px) and (max-width:1100px) {
  html[data-visual-world="academy"] .auth-story .auth-story-copy h1 { font-size: 60px !important; }
}
@media (max-width:900px) {
  html[data-visual-world="academy"] .auth-screen { --academy-welcome: url("assets/academy/scenes/welcome-day-small-v1.webp"); padding: 28px 24px 16px !important; }
  html[data-visual-world="academy"] .auth-layout { max-width: 480px !important; grid-template-columns: minmax(0,1fr) !important; min-height: 0; gap: 20px !important; }
  html[data-visual-world="academy"] .auth-story { padding: 0 !important; gap: 18px !important; }
  html[data-visual-world="academy"] .auth-story .academy-welcome-art { aspect-ratio: auto; height: 150px !important; background-position: center 64% !important; }
  html[data-visual-world="academy"] .auth-story .brand strong { font-size: 23px !important; }
  html[data-visual-world="academy"] .auth-story .auth-story-copy h1 { font-size: 56px !important; margin-bottom: 8px !important; }
  html[data-visual-world="academy"] .auth-story .auth-story-copy p { font-size: 15px !important; }
  html[data-visual-world="academy"] .auth-card-container { width: 100%; margin-bottom: 0; }
  html[data-visual-world="academy"] .auth-public-footer { font-size: 11px; }
  html[data-visual-world="academy"] .topbar { position: relative !important; }
}
@media (max-width:600px) {
  html[data-visual-world="academy"] { --academy-canvas-size: 420px; --academy-canvas-veil: linear-gradient(115deg,rgb(232 244 255 / 98%),rgb(237 247 250 / 94%) 52%,rgb(234 248 242 / 84%)); }
  html[data-visual-world="academy"].cv-dark { --academy-canvas-veil: linear-gradient(115deg,rgb(27 34 43 / 98%),rgb(27 35 39 / 96%) 52%,rgb(32 48 45 / 92%)); }
  html[data-visual-world="academy"] .main { padding: 0 16px var(--cv-mobile-tabbar-clearance,96px) !important; gap: 16px !important; }
  html[data-visual-world="academy"] body .main .topbar { margin-inline: -16px; padding: 10px 16px 24px !important; min-height: 184px; background: transparent !important; row-gap: 14px !important; }
  html[data-visual-world="academy"] .topbar::before,
html[data-visual-world="academy"] .topbar::after { top: 68px; background-image: var(--academy-banner-small); background-size: auto 100%; background-position: right center; --academy-art-x: linear-gradient(to right,transparent 12%,rgb(0 0 0 / 16%) 26%,rgb(0 0 0 / 62%) 44%,#000 58%,#000 86%,rgb(0 0 0 / 60%) 94%,transparent); }
  html[data-visual-world="academy"] .topbar h1 { color: var(--academy-scene-ink) !important; font-size: 26px !important; line-height: 1.3; }
  html[data-visual-world="academy"] .topbar .topbar-title { width: 52%; }
  html[data-visual-world="academy"] .academy-mobile-brand { font-size: 21px; white-space: nowrap; }
  html[data-visual-world="academy"] body:is([data-view="assignments"],[data-view="listen"],[data-view="reading"],[data-view="writing"]) .main .topbar { grid-template-rows: 44px minmax(96px,1fr) auto; min-height: 252px; }
  html[data-visual-world="academy"] body:is([data-view="assignments"],[data-view="listen"],[data-view="reading"],[data-view="writing"]) .topbar::before,
html[data-visual-world="academy"] body:is([data-view="assignments"],[data-view="listen"],[data-view="reading"],[data-view="writing"]) .topbar::after { bottom: 82px; }
  html[data-visual-world="academy"] body:is([data-view="study"],[data-view="review"],[data-view="practice"],[data-view="quiz"]) .main .topbar { min-height: 0; grid-template-rows: 44px; row-gap: 12px !important; padding-bottom: 14px !important; }
  html[data-visual-world="academy"] body:is([data-view="study"],[data-view="review"],[data-view="practice"],[data-view="quiz"]) .topbar::before,
html[data-visual-world="academy"] body:is([data-view="study"],[data-view="review"],[data-view="practice"],[data-view="quiz"]) .topbar::after { content: none; }
  html[data-visual-world="academy"] body:is([data-view="study"],[data-view="review"],[data-view="practice"],[data-view="quiz"]) .topbar .topbar-title { width: 100%; }
  html[data-visual-world="academy"] body:is([data-view="study"],[data-view="review"],[data-view="practice"],[data-view="quiz"]) .topbar h1 { font-size: 20px !important; color: var(--ink) !important; }
  html[data-visual-world="academy"] .academy-catalog-filters { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 10px; }
  html[data-visual-world="academy"] .academy-catalog-filters > label:not(.listen-search-bar) { gap: 6px; font-size: 12px; }
  html[data-visual-world="academy"] .academy-catalog-filters select { padding-inline: 8px 20px; font-size: 13px; min-height: 42px; }
  html[data-visual-world="academy"] #view-listen .academy-catalog-filters .listen-search-bar { grid-column: 1 / -1; min-height: 42px !important; }
  html[data-visual-world="academy"] #view-listen .listen-view { gap: 12px !important; }
  html[data-visual-world="academy"] #view-listen .listen-mode-card { flex: 1 1 0; min-height: 44px !important; padding: 8px 3px !important; }
  html[data-visual-world="academy"] #view-listen .listen-mode-card strong { font-size: 14px !important; }
  html[data-visual-world="academy"] #view-listen .listen-mode-card span { display: none !important; }
  html[data-visual-world="academy"] #view-listen .book-audio-row { grid-template-columns: 44px minmax(0,1fr) 44px !important; gap: 8px !important; padding: 12px 8px !important; min-height: 78px; }
  html[data-visual-world="academy"] #view-listen .book-audio-play { width: 44px !important; height: 44px !important; }
  html[data-visual-world="academy"] #view-listen .book-audio-favorite { width: 44px !important; min-height: 44px !important; }
  html[data-visual-world="academy"] #view-listen .book-audio-main strong { font-size: 16px !important; }
  html[data-visual-world="academy"] #view-listen .book-audio-meta { font-size: 12px !important; }
  html[data-visual-world="academy"] #view-listen .book-audio-subline { gap: 5px 12px; }
  html[data-visual-world="academy"] #view-listen .academy-player { grid-template-columns: minmax(0,1fr); padding: 12px !important; gap: 5px !important; border-radius: 12px 12px 0 0 !important; max-height: min(56vh,360px); overflow-y: auto; }
  html[data-visual-world="academy"] #view-listen .academy-player .listen-player-copy { padding-left: 54px; min-height: 44px; padding-right: 0; }
  html[data-visual-world="academy"] #view-listen .academy-player .listen-player-copy::before { width: 44px; height: 44px; }
  html[data-visual-world="academy"] #view-listen .academy-player .listen-player-copy h3 { font-size: 14px !important; }
  html[data-visual-world="academy"] #view-listen .academy-player .listen-player-copy p { font-size: 11px !important; }
  html[data-visual-world="academy"] .academy-audio-ui { gap: 0; }
  html[data-visual-world="academy"] .academy-timeline { gap: 8px; font-size: 11px; }
  html[data-visual-world="academy"] .academy-transport { justify-content: center; gap: 7px; }
  html[data-visual-world="academy"] .academy-speed-select { display: block; width: 68px; min-height: 44px; font-size: 12px; border: 1px solid var(--hairline); padding: 6px; }
  html[data-visual-world="academy"] .academy-volume-range { display: none; }
  html[data-visual-world="academy"] .academy-play-toggle { width: 44px; height: 44px; }
  html[data-visual-world="academy"] #view-listen .academy-player .listen-custom-controls { gap: 6px; flex-wrap: wrap; }
  html[data-visual-world="academy"] #view-listen .academy-player .listen-ctl-label { display: none; }
  html[data-visual-world="academy"] #view-listen .academy-player .listen-speed { display: none; }
  html[data-visual-world="academy"] #view-listen .academy-player .listen-ab { width: 100%; justify-content: center; }
  html[data-visual-world="academy"] #view-listen .academy-player .listen-ctl-btn { padding: 6px 10px; min-width: 44px; min-height: 44px; font-size: 12px; }
  html[data-visual-world="academy"] #view-listen .academy-player :is(.listen-speed,.listen-ab) { gap: 4px; }
  html[data-visual-world="academy"] body:is([data-view="teacher"],[data-view="admin"]) .topbar { background-image: none !important; }
  html[data-visual-world="academy"] .topbar .cv-theme-toggle { width: 44px !important; padding: 0 !important; }
  html[data-visual-world="academy"] .home-greeting-strip { min-height: 196px; padding: 42px 35% 20px 16px !important; gap: 12px !important; }
  html[data-visual-world="academy"] .home-greeting-strip::before,
html[data-visual-world="academy"] .home-greeting-strip::after { background-image: var(--academy-banner-small); --academy-art-x: linear-gradient(to right,transparent 25%,rgb(0 0 0 / 40%) 56%,#000 82%,rgb(0 0 0 / 64%) 94%,transparent); }
  html[data-visual-world="academy"] .home-greeting-strip .home-hello-name-row strong { font-size: 24px !important; }
  html[data-visual-world="academy"] .home-greeting-strip .home-hello-copy > span:first-child { font-size: 12px !important; margin-bottom: 6px; }
  html[data-visual-world="academy"] .home-greeting-strip .home-hello-copy small { font-size: 12px !important; margin-top: 8px; }
  html[data-visual-world="academy"] .home-greeting-strip .home-greeting-tools { top: 8px; right: 8px; }
  html[data-visual-world="academy"] .home-greeting-tools .home-level-chip { max-width: 112px; }
  html[data-visual-world="academy"] .home-greeting-strip .home-plan-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  html[data-visual-world="academy"] .home-greeting-strip .home-plan-text { font-size: 12px; }
  html[data-visual-world="academy"] .student-home { gap: 16px !important; }
  html[data-visual-world="academy"] .student-home .home-main-cta.has-sub { width: 100% !important; }
  html[data-visual-world="academy"] #view-member .member-hero h2 { font-size: 26px !important; }
  html[data-visual-world="academy"] .student-home :is(.home-check-row,.daily-checkin-card) { padding: 12px !important; }
  html[data-visual-world="academy"] .word-card { padding: 20px 16px !important; border-radius: 12px !important; }
  html[data-visual-world="academy"] .word-card .word-title { font-size: 40px !important; margin: 22px 0 16px !important; }
  html[data-visual-world="academy"] .word-card .word-meaning { font-size: 18px !important; }
  html[data-visual-world="academy"] .word-card .cv-meaning-dim { font-size: 13px !important; }
  html[data-visual-world="academy"] .word-card .cv-wc-tool { min-height: 56px !important; }
  html[data-visual-world="academy"] .word-card :is(.cv-wc-next,.cv-wc-know) { padding-inline: 8px !important; font-size: 15px !important; }
  html[data-visual-world="academy"] .auth-screen { background: #e9f6ff !important; padding: 16px 16px 12px !important; gap: 16px; }
  html[data-visual-world="academy"] .auth-layout { gap: 12px !important; }
  html[data-visual-world="academy"] .auth-story { gap: 12px !important; }
  html[data-visual-world="academy"] .auth-story .brand { gap: 8px; }
  html[data-visual-world="academy"] .auth-story .brand strong { font-size: 21px !important; }
  html[data-visual-world="academy"] .auth-story .brand span { font-size: 11px !important; }
  html[data-visual-world="academy"] .auth-story .auth-story-copy h1 { font-size: 44px !important; }
  html[data-visual-world="academy"] .auth-story .academy-welcome-art { height: 88px !important; }
  html[data-visual-world="academy"] .auth-card { padding: 16px 20px !important; border-radius: 12px !important; }
  html[data-visual-world="academy"] .auth-form { gap: 12px !important; }
  html[data-visual-world="academy"] .auth-card-container { margin-bottom: 0; }
  html[data-visual-world="academy"] .auth-public-footer { padding: 10px; order: 3; }
}
@media (max-width:360px) {
  html[data-visual-world="academy"] .main { padding-inline: 12px !important; }
  html[data-visual-world="academy"] body .main .topbar { margin-inline: -12px; padding-inline: 12px !important; }
  html[data-visual-world="academy"] .academy-mobile-brand { font-size: 19px; }
  html[data-visual-world="academy"] .topbar h1 { font-size: 24px !important; }
  html[data-visual-world="academy"] .home-greeting-strip .home-hello-name-row strong { font-size: 22px !important; }
  html[data-visual-world="academy"] .word-card .word-title { font-size: 34px !important; }
  html[data-visual-world="academy"] .auth-card { padding: 16px !important; }
}
/* Night is a separate scene, not a translucent daytime illustration. */
html[data-visual-world="academy"].cv-dark body .main .topbar { background: transparent !important; }
html[data-visual-world="academy"].cv-dark body .main .topbar::before,
html[data-visual-world="academy"].cv-dark body .main .topbar::after {
  background-image: var(--academy-banner);
  opacity: 1; filter: none;
}
html[data-visual-world="academy"].cv-dark .topbar h1 { color: var(--ink) !important; }
html[data-visual-world="academy"].cv-dark .home-greeting-strip { background-color: transparent !important; }
html[data-visual-world="academy"].cv-dark .home-greeting-strip .home-hello-name-row strong { color: var(--ink) !important; }
html[data-visual-world="academy"].cv-dark .home-greeting-strip :is(.home-hello-copy > span:first-child,.home-hello-copy small,.home-plan-row,.home-plan-text) { color: var(--ink-2) !important; }
html[data-visual-world="academy"].cv-dark #view-listen .book-audio-row:has(.book-audio-heard) { background: var(--surface-2) !important; border-color: var(--hairline-soft) !important; }
html[data-visual-world="academy"].cv-dark #view-listen .listen-catalog-guide { background: var(--surface-2) !important; border-color: var(--hairline) !important; }
html[data-visual-world="academy"].cv-dark .auth-screen { --academy-welcome: url("assets/academy/scenes/welcome-night-v1.webp"); background: var(--bg) !important; }
html[data-visual-world="academy"].cv-dark .auth-story :is(.brand strong,.auth-story-copy h1) { color: var(--ink) !important; }
html[data-visual-world="academy"].cv-dark .auth-story :is(.brand span,.auth-story-copy p) { color: var(--ink-2) !important; }
html[data-visual-world="academy"].cv-dark .auth-public-footer { color: var(--muted) !important; background: var(--surface); }
html[data-visual-world="academy"].cv-dark .auth-public-footer :is(a,button) { color: var(--ink-2) !important; }
@media (max-width:900px) {
  html[data-visual-world="academy"].cv-dark .auth-screen { --academy-welcome: url("assets/academy/scenes/welcome-night-small-v1.webp"); }
}
@media (max-width:600px) {
  html[data-visual-world="academy"].cv-dark body .main .topbar::before,
html[data-visual-world="academy"].cv-dark body .main .topbar::after { background-image: var(--academy-banner-small); }
}
@media (max-width:600px), (max-width:1000px) and (max-height:500px) {
  html[data-visual-world="academy"] .auth-companions { display: none; }
}
@media (max-height:500px) and (orientation:landscape) {
  html[data-visual-world="academy"] .academy-listen-docked #view-listen .academy-player { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; max-height: none; }
  html[data-visual-world="academy"] .academy-listen-docked #view-listen { padding-bottom: 0 !important; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-visual-world="academy"] :is(.auth-shake,.view.active,.home-plan-adjust-action.is-hinted::after) { animation: none !important; }
  html[data-visual-world="academy"] :is(.nav-item,.primary-action,.secondary-action,.home-check-row) { transition: none !important; }
}
@media (forced-colors:active) {
  html[data-visual-world="academy"] body::before { background: Canvas !important; }
  html[data-visual-world="academy"] body::after { background: none !important; }
  html[data-visual-world="academy"] :is(button,a,input,textarea,select,summary,[tabindex]):focus-visible { outline-color: Highlight !important; }
}
@media print {
  html[data-visual-world="academy"] body::before,
  html[data-visual-world="academy"] body::after { display: none !important; }
  html[data-visual-world="academy"] .main { background: #fff !important; }
}

/* Student check-in read states share the existing day/night surfaces. */
html[data-visual-world="academy"] :is(#view-today,#view-growth,#view-assignments) .checkin-read-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-block: 12px; padding: 12px 0; border: 0; border-radius: 0;
  background: transparent; color: var(--ink-2); box-shadow: none;
}
html[data-visual-world="academy"] .checkin-read-notice > span {
  flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere;
}
html[data-visual-world="academy"] :is(.checkin-read-retry,[data-refresh-checkin-records]) {
  min-height: 44px; min-width: 44px; max-width: 100%; height: auto;
  white-space: normal; overflow-wrap: anywhere; letter-spacing: 0;
}
html[data-visual-world="academy"] .checkin-history-pending {
  color: var(--muted); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere;
}
html[data-visual-world="academy"] .daily-checkin-section > .checkin-read-retry { width: fit-content !important; justify-self: start; }
html[data-growth-read-incomplete="true"] #view-today .cv-rail-streak { display: none !important; }
html[data-growth-read-incomplete="true"] #view-growth :is(.cv-ms-focus,.cv-ms-weekly) { display: none !important; }

/* The homepage keeps the original greeting/actions in the shared page header. */
.academy-home-masthead { display: none; }
@media (min-width:1181px) {
  html[data-visual-world="academy"] .topbar::before,
html[data-visual-world="academy"] .topbar::after {
    top: 64px; bottom: auto; width: min(55%,540px); height: auto;
    aspect-ratio: 1600 / 533; background-size: 100% 100%;
  }
}
html[data-visual-world="academy"] body[data-view="today"] .academy-home-masthead:not(:empty) {
  display: block; position: static; grid-area: masthead; min-width: 0;
}
html[data-visual-world="academy"] body[data-view="today"] .topbar:has(.academy-home-masthead:not(:empty)) {
  grid-template-areas: "masthead" !important;
  grid-template-rows: auto !important;
  padding: 80px 24px 0 !important; gap: 12px !important; min-height: 220px;
}
html[data-visual-world="academy"] body[data-view="today"] .topbar:has(.academy-home-masthead:not(:empty))::before,
html[data-visual-world="academy"] body[data-view="today"] .topbar:has(.academy-home-masthead:not(:empty))::after {
  /* Keep the tower inside the artwork instead of cropping it to the header. */
  content: ""; top: 64px; right: 24px; bottom: auto;
  width: min(100%,600px); height: auto; aspect-ratio: 1600 / 533;
  background-size: 100% 100%;
  --academy-art-y: linear-gradient(to bottom,transparent,#000 18px,#000 56%,rgb(0 0 0 / 80%) 68%,rgb(0 0 0 / 30%) 86%,transparent);
}
html[data-visual-world="academy"] body[data-view="today"] .topbar:has(.academy-home-masthead:not(:empty)) .topbar-title {
  display: block !important;
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
html[data-visual-world="academy"] .academy-home-masthead .home-greeting-strip {
  position: static; min-height: 140px; padding: 0 42% 16px 0 !important; margin: 0; gap: 10px !important;
}
html[data-visual-world="academy"] .academy-home-masthead .home-greeting-strip::before,
html[data-visual-world="academy"] .academy-home-masthead .home-greeting-strip::after { content: none !important; }
html[data-visual-world="academy"] .academy-home-masthead .home-greeting-tools { top: 16px; left: 24px; right: auto; }
html[data-visual-world="academy"] .academy-home-masthead .home-hello-copy small { margin-top: 8px; }
html[data-visual-world="academy"] .academy-home-masthead .home-plan-row { flex-direction: row; align-items: center; gap: 8px 12px; }
@media (max-width:1180px) {
  html[data-visual-world="academy"] .topbar #themeToggle span { display: none !important; }
  html[data-visual-world="academy"] body[data-view="today"] .main .topbar:has(.academy-home-masthead:not(:empty)) {
    grid-template-columns: 44px minmax(0,1fr) 44px !important;
    grid-template-areas: "menu brand theme" "search search search" "masthead masthead masthead" !important;
    grid-template-rows: 44px auto auto !important; padding: 12px 24px 0 !important; gap: 12px !important; min-height: 0;
  }
  html[data-visual-world="academy"] body[data-view="today"] .topbar:has(.academy-home-masthead:not(:empty))::before,
html[data-visual-world="academy"] body[data-view="today"] .topbar:has(.academy-home-masthead:not(:empty))::after { top: 172px; right: 0; width: min(100%,450px); }
  html[data-visual-world="academy"] .academy-home-masthead .home-greeting-tools { top: 4px; right: 0; left: auto; }
  html[data-visual-world="academy"] .academy-home-masthead .home-greeting-strip { position: relative; padding-top: 52px !important; min-height: 180px; }
  html[data-visual-world="academy"] body:is([data-view="assignments"],[data-view="study"],[data-view="listen"],[data-view="reading"],[data-view="writing"]) .main .topbar {
    grid-template-areas: "menu brand theme" "search search search" "title title title" !important;
    grid-template-rows: 44px auto minmax(96px,1fr) !important;
  }
  html[data-visual-world="academy"] body:is([data-view="assignments"],[data-view="study"],[data-view="listen"],[data-view="reading"],[data-view="writing"]) .topbar::before,
html[data-visual-world="academy"] body:is([data-view="assignments"],[data-view="study"],[data-view="listen"],[data-view="reading"],[data-view="writing"]) .topbar::after { top: 120px; bottom: 0; }
}
@media (min-width:768px) and (max-width:1180px) {
  html[data-visual-world="academy"] body:is([data-view="today"],[data-view="assignments"],[data-view="study"],[data-view="listen"],[data-view="reading"],[data-view="writing"]) .main .topbar {
    grid-template-columns: 44px minmax(180px,1fr) minmax(240px,340px) 44px !important;
    grid-template-areas: "menu brand search theme" "title title title title" !important;
    grid-template-rows: 44px minmax(108px,1fr) !important; min-height: 212px;
  }
  html[data-visual-world="academy"] body[data-view="today"] .main .topbar:has(.academy-home-masthead:not(:empty)) {
    grid-template-columns: 44px minmax(180px,1fr) minmax(240px,340px) 44px !important;
    grid-template-areas: "menu brand search theme" "masthead masthead masthead masthead" !important;
    grid-template-rows: 44px auto !important;
  }
  html[data-visual-world="academy"] .academy-mobile-brand { text-align: left; }
  html[data-visual-world="academy"] body:is([data-view="assignments"],[data-view="study"],[data-view="listen"],[data-view="reading"],[data-view="writing"]) .topbar::before,
html[data-visual-world="academy"] body:is([data-view="assignments"],[data-view="study"],[data-view="listen"],[data-view="reading"],[data-view="writing"]) .topbar::after { top: 72px; }
  html[data-visual-world="academy"] body[data-view="today"] .topbar:has(.academy-home-masthead:not(:empty))::before,
html[data-visual-world="academy"] body[data-view="today"] .topbar:has(.academy-home-masthead:not(:empty))::after { top: 116px; }
}
@media (max-width:600px) {
  html[data-visual-world="academy"] body[data-view="today"] .main .topbar:has(.academy-home-masthead:not(:empty)) { padding: 10px 16px 0 !important; }
  html[data-visual-world="academy"] .academy-home-masthead .home-greeting-strip { min-height: 150px; padding: 52px 0 10px !important; gap: 8px !important; }
  html[data-visual-world="academy"] .academy-home-masthead .home-hello-copy { padding-inline-end: 28%; }
  html[data-visual-world="academy"] .academy-home-masthead .home-hello-name-row strong { font-size: 24px !important; }
  html[data-visual-world="academy"] .academy-home-masthead .home-plan-row { margin-right: 0; flex-wrap: wrap; }
  html[data-visual-world="academy"] .academy-home-masthead .home-plan-adjust-action { min-height: 44px !important; }
  html[data-visual-world="academy"] body[data-view="study"] .main .topbar { grid-template-rows: 44px auto auto !important; min-height: 0; }
}

/* Local finding tools stay in the workflow, without adding another card. */
html[data-visual-world="academy"] .assignment-find-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-block: 16px 8px; padding-block: 12px; border-bottom: 1px solid var(--hairline);
}
html[data-visual-world="academy"] .assignment-find-input {
  flex: 1 1 260px; width: auto; min-width: 0; min-height: 44px; margin: 0;
  padding: 8px 12px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 8px; color: var(--ink); font-size: 16px;
}
html[data-visual-world="academy"] .assignment-find-bar select { width: auto; min-width: 128px; min-height: 44px; margin: 0; }
html[data-visual-world="academy"] .assignment-find-count { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
html[data-visual-world="academy"] .assignment-filter-empty { padding-block: 24px; color: var(--ink-2); text-align: center; }
html[data-visual-world="academy"] .assignment-filter-empty button { margin-inline: 8px; min-height: 44px; }
html[data-visual-world="academy"] .teacher-submission-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-block: 16px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 13px;
}
html[data-visual-world="academy"] .teacher-submission-footer button { min-height: 44px; width: auto !important; max-width: 100%; white-space: normal; }
/* WebKit can paint a long selected option past its correctly sized select box. */
html[data-visual-world="academy"] #view-teacher .assignment-form select:not([multiple]):not([size]) { overflow: hidden; text-overflow: ellipsis; }

html[data-visual-world="academy"] .global-search-panel {
  padding: 0 16px 12px; border-radius: 8px !important; max-height: 480px; max-height: min(60dvh,480px);
  overflow-y: auto; overscroll-behavior: contain; background: var(--surface) !important;
  scroll-padding-block: 64px 8px;
  border: 1px solid var(--hairline) !important; box-shadow: none !important;
}
html[data-visual-world="academy"] .search-panel-head {
  position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: auto minmax(0,1fr) 44px;
  align-items: center; gap: 12px; min-height: 56px; background: var(--surface); border-bottom: 1px solid var(--hairline);
}
html[data-visual-world="academy"] .search-panel-head > span { text-align: right; font-size: 12px; overflow-wrap: anywhere; }
html[data-visual-world="academy"] .search-result { border-radius: 6px !important; }
html[data-visual-world="academy"] .search-result:hover { transform: none !important; }
html[data-visual-world="academy"] .search-result:focus-visible { background: var(--accent-soft) !important; }
@media (min-width:901px) {
  html[data-visual-world="academy"] body[data-view="reading"] .main:has(> .global-search-panel:not(.hidden)) {
    height: auto; min-height: 100vh; min-height: 100dvh;
    grid-template-rows: auto auto minmax(360px,calc(100vh - 268px));
    grid-template-rows: auto auto minmax(360px,calc(100dvh - 268px)); overflow: visible;
  }
}
@media (max-width:600px) {
  html[data-visual-world="academy"] .assignment-find-bar { gap: 8px; }
  html[data-visual-world="academy"] .assignment-find-input { flex-basis: 100%; }
  html[data-visual-world="academy"] .assignment-find-count { margin-left: auto; }
  html[data-visual-world="academy"] .global-search-panel { padding-inline: 8px; }
  html[data-visual-world="academy"] .search-result {
    grid-template-columns: auto minmax(0,1fr) auto; gap: 4px 8px;
    grid-template-areas: "type title action" ". detail detail"; padding: 12px !important;
  }
  html[data-visual-world="academy"] .search-result > span { grid-area: type; }
  html[data-visual-world="academy"] .search-result > strong { grid-area: title; }
  html[data-visual-world="academy"] .search-result > small {
    grid-area: detail; white-space: normal; overflow-wrap: anywhere; line-height: 1.5;
  }
  html[data-visual-world="academy"] .search-result > em { grid-area: action; }
}

/* Two persistent scenes let CSS reverse a half-finished switch without a jump. */
html[data-visual-world="academy"] {
  --academy-theme-time: 600ms;
  --academy-theme-ease: cubic-bezier(.4,0,.2,1);
  --academy-day-veil: linear-gradient(115deg,rgb(232 244 255 / 98%),rgb(237 247 250 / 94%) 52%,rgb(234 248 242 / 80%));
  --academy-night-veil: linear-gradient(115deg,rgb(27 34 43 / 98%),rgb(27 35 39 / 94%) 52%,rgb(32 48 45 / 86%));
}
html[data-visual-world="academy"] body {
  --academy-art-day: var(--academy-scene-day);
  --academy-art-night: var(--academy-scene-night);
}
html[data-visual-world="academy"] body::before {
  background: var(--academy-day-veil),url("assets/academy/scenes/campus-canvas-day-v1.webp") right bottom / var(--academy-canvas-size) auto no-repeat,linear-gradient(115deg,#e8f4ff,#edf7fa 52%,#e4f4ec) !important;
}
.academy-night-canvas { display: none; }
html[data-visual-world="academy"] .academy-night-canvas {
  display: block; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--academy-night-veil),url("assets/academy/scenes/campus-canvas-night-v1.webp") right bottom / var(--academy-canvas-size) auto no-repeat,linear-gradient(115deg,#1b222b,#1b2327 52%,#20302d);
  opacity: 0;
  transition: opacity var(--academy-theme-time) var(--academy-theme-ease);
}
html[data-visual-world="academy"].cv-dark .academy-night-canvas { opacity: 1; }
html[data-visual-world="academy"] :is(.topbar,.home-greeting-strip)::before {
  background-image: var(--academy-art-day) !important;
  opacity: var(--academy-art-day-opacity,1) !important;
  transition: opacity var(--academy-theme-time) var(--academy-theme-ease) !important;
}
html[data-visual-world="academy"] :is(.topbar,.home-greeting-strip)::after {
  background-image: var(--academy-art-night) !important;
  opacity: 0 !important;
  transition: opacity var(--academy-theme-time) var(--academy-theme-ease) !important;
}
html[data-visual-world="academy"].cv-dark :is(.topbar,.home-greeting-strip)::before { opacity: 0 !important; }
html[data-visual-world="academy"].cv-dark :is(.topbar,.home-greeting-strip)::after { opacity: 1 !important; }
html[data-visual-world="academy"] .auth-screen {
  --academy-welcome-day: url("assets/academy/scenes/welcome-day-v1.webp");
  --academy-welcome-night: url("assets/academy/scenes/welcome-night-v1.webp");
}
html[data-visual-world="academy"] .auth-story .academy-welcome-art { background-image: none !important; }
html[data-visual-world="academy"] .academy-welcome-art::before,
html[data-visual-world="academy"] .academy-welcome-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--academy-welcome-day);
  background-position: inherit; background-size: inherit; background-repeat: no-repeat;
  opacity: 1; transition: opacity var(--academy-theme-time) var(--academy-theme-ease);
}
html[data-visual-world="academy"] .academy-welcome-art::after { background-image: var(--academy-welcome-night); opacity: 0; }
html[data-visual-world="academy"].cv-dark .academy-welcome-art::before { opacity: 0; }
html[data-visual-world="academy"].cv-dark .academy-welcome-art::after { opacity: 1; }
/* Apply color transitions only while changing theme, not to everyday clicks. */
html[data-visual-world="academy"].academy-theme-changing :where(body,.sidebar,.topbar,.surface-card,.metric-card,.mobile-tabbar,.tab-sheet,.settings-drawer,.data-table,.auth-screen,.auth-card,.auth-public-footer,.search-box,.home-member-quota-strip,.book-audio-row,.listen-catalog-guide,.listen-mode-card,input,select,textarea,h1,h2,h3,p,label,small,strong) {
  transition: background-color var(--academy-theme-time) var(--academy-theme-ease),border-color var(--academy-theme-time) var(--academy-theme-ease),color var(--academy-theme-time) var(--academy-theme-ease) !important;
}
html[data-visual-world="academy"].academy-theme-changing .academy-night-canvas {
  transition: opacity var(--academy-theme-time) var(--academy-theme-ease) !important;
}
@media (max-width:1180px) {
  html[data-visual-world="academy"] body:is([data-view="teacher"],[data-view="admin"]) { --academy-art-day-opacity: .28; }
}
@media (max-width:900px) {
  html[data-visual-world="academy"] .auth-screen {
    --academy-welcome-day: url("assets/academy/scenes/welcome-day-small-v1.webp");
    --academy-welcome-night: url("assets/academy/scenes/welcome-night-small-v1.webp");
  }
}
@media (max-width:600px) {
  html[data-visual-world="academy"] {
    --academy-day-veil: linear-gradient(115deg,rgb(232 244 255 / 98%),rgb(237 247 250 / 94%) 52%,rgb(234 248 242 / 84%));
    --academy-night-veil: linear-gradient(115deg,rgb(27 34 43 / 98%),rgb(27 35 39 / 96%) 52%,rgb(32 48 45 / 92%));
  }
  html[data-visual-world="academy"] body {
    --academy-art-day: var(--academy-scene-day-small);
    --academy-art-night: var(--academy-scene-night-small);
  }
}
html[data-visual-world="academy"].cv-reduce-motion { --academy-theme-time: 0ms; }
@media (prefers-reduced-motion:reduce) {
  html[data-visual-world="academy"] { --academy-theme-time: 0ms; }
}
@media (forced-colors:active) {
  html[data-visual-world="academy"] body::before { background: Canvas !important; }
  html[data-visual-world="academy"] .academy-night-canvas { display: none; }
}
@media print { html[data-visual-world="academy"] .academy-night-canvas { display: none; } }

/* Shared 5.6.1 workspace geometry. Skin changes never change these tracks. */
html[data-visual-world="academy"] :is(.reading-shell,.reading-workspace,.writing-flow-shell,.student-home,.cv-home-rail) { min-width: 0; }
html[data-visual-world="academy"] .reading-shell { align-items: stretch !important; }
html[data-visual-world="academy"] .topbar :is(.academy-search-toggle,.academy-search-close) {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 44px !important; height: 44px !important; min-width: 44px !important;
  padding: 0 !important; border: 1px solid var(--hairline) !important;
  border-radius: 8px !important; background: var(--surface) !important; color: var(--ink-2) !important;
}
html[data-visual-world="academy"] .topbar :is(.academy-search-toggle,.academy-search-close) svg { width: 20px; height: 20px; }
html[data-visual-world="academy"] .settings-tab-list {
  padding: 4px; gap: 4px; border-radius: 8px; background: var(--surface-2);
}
@media (max-width:600px) {
  html[data-visual-world="academy"] #appShell .main .topbar {
    grid-template-columns: 44px minmax(0,1fr) 44px 44px !important;
    grid-template-areas: "menu brand find theme" "title title title title" !important;
    grid-template-rows: 44px minmax(84px,1fr) !important;
    min-height: 176px; padding: 10px 16px 14px !important;
    column-gap: 6px !important; row-gap: 12px !important;
  }
  html[data-visual-world="academy"] #appShell .main .topbar.academy-search-open {
    grid-template-areas: "menu brand find theme" "search search search close" "title title title title" !important;
    grid-template-rows: 44px 44px minmax(84px,1fr) !important;
  }
  html[data-visual-world="academy"] #appShell .main .topbar .academy-mobile-brand { font-size: 18px; text-align: left; white-space: normal; line-height: 1.15; }
  html[data-visual-world="academy"] #appShell .topbar .academy-search-toggle { grid-area: find; }
  html[data-visual-world="academy"] #appShell .topbar .academy-search-close { grid-area: close; }
  html[data-visual-world="academy"] #appShell .topbar .search-box { grid-area: search !important; min-height: 44px !important; height: 44px !important; }
  html[data-visual-world="academy"] #appShell .topbar .search-box input { font-size: 16px !important; }
  html[data-visual-world="academy"] #appShell .topbar .topbar-title { width: 62%; }
  html[data-visual-world="academy"] #appShell .topbar h1 { font-size: 23px !important; }
  html[data-visual-world="academy"] #appShell .main .topbar::before,
  html[data-visual-world="academy"] #appShell .main .topbar::after {
    top: 64px; right: 0; bottom: auto; width: min(100%,450px); height: auto; aspect-ratio: 3;
  }
  html[data-visual-world="academy"] #appShell .main .topbar.academy-search-open::before,
  html[data-visual-world="academy"] #appShell .main .topbar.academy-search-open::after { top: 120px; }
  html[data-visual-world="academy"] body[data-view="today"] #appShell .main .topbar:has(.academy-home-masthead:not(:empty)) {
    grid-template-areas: "menu brand find theme" "masthead masthead masthead masthead" !important;
    grid-template-rows: 44px auto !important; min-height: 0; padding-bottom: 0 !important;
  }
  html[data-visual-world="academy"] body[data-view="today"] #appShell .main .topbar.academy-search-open:has(.academy-home-masthead:not(:empty)) {
    grid-template-areas: "menu brand find theme" "search search search close" "masthead masthead masthead masthead" !important;
    grid-template-rows: 44px 44px auto !important;
  }
  html[data-visual-world="academy"] body[data-view="today"] #appShell .topbar::before,
  html[data-visual-world="academy"] body[data-view="today"] #appShell .topbar::after { top: 104px; }
  html[data-visual-world="academy"] body[data-view="today"] #appShell .topbar.academy-search-open::before,
  html[data-visual-world="academy"] body[data-view="today"] #appShell .topbar.academy-search-open::after { top: 160px; }
  html[data-visual-world="academy"] body:is([data-view="study"],[data-view="practice"],[data-view="quiz"],[data-view="wrong"]) #appShell .main .topbar {
    grid-template-rows: 44px auto !important; min-height: 0;
  }
  html[data-visual-world="academy"] body:is([data-view="study"],[data-view="practice"],[data-view="quiz"],[data-view="wrong"]) #appShell .main .topbar.academy-search-open {
    grid-template-rows: 44px 44px auto !important;
  }
  html[data-visual-world="academy"] body:is([data-view="study"],[data-view="practice"],[data-view="quiz"],[data-view="wrong"]) #appShell .topbar .topbar-title { width: 100%; }
  html[data-visual-world="academy"] body:is([data-view="study"],[data-view="practice"],[data-view="quiz"],[data-view="wrong"]) #appShell .topbar::before,
  html[data-visual-world="academy"] body:is([data-view="study"],[data-view="practice"],[data-view="quiz"],[data-view="wrong"]) #appShell .topbar::after { content: none; }
  html[data-visual-world="academy"] #view-listen .listen-mode-grid { width: 100%; }
  html[data-visual-world="academy"] #view-listen .academy-catalog-filters :is(select,.listen-search-bar) { min-height: 44px !important; font-size: 16px; }
  html[data-visual-world="academy"] #view-listen .academy-player .listen-ctl-btn { min-height: 44px; }
  html[data-visual-world="academy"] #view-admin .admin-tabs { display: flex !important; overflow-x: auto; gap: 4px; padding: 4px; scroll-snap-type: x proximity; }
  html[data-visual-world="academy"] #view-admin .admin-tabs > button { flex: 0 0 auto; min-width: 64px; min-height: 44px; white-space: nowrap; scroll-snap-align: start; }
  html[data-visual-world="academy"] .home-member-quota-head,
  html[data-visual-world="academy"] #view-growth :is([data-growth-speaking-filter],[data-cv-ms-collection-toggle]),
  html[data-visual-world="academy"] #view-member :is([data-auth-doc],[data-member-quota-refresh]) {
    min-width: 44px !important; min-height: 44px !important;
  }
  html[data-visual-world="academy"] #view-member [data-auth-doc] { display: inline-flex; align-items: center; }
  html[data-visual-world="academy"] #authScreen :is(#showLoginBtn,#showRegisterBtn,#inlineRegisterBtn,.auth-public-footer button,.auth-public-footer a,.auth-doc-link) {
    min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center;
  }
  html[data-visual-world="academy"] #authScreen label:has(#rememberMe) { min-height: 44px; }
  html[data-visual-world="academy"] #authScreen .auth-agreement-hit {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; min-width: 44px; height: 44px; padding: 0; margin: 0; flex: none;
  }
  html[data-visual-world="academy"] #authScreen .auth-agreement-copy { min-width: 0; }
}
@media (max-width: 600px) {
  html[data-visual-world="academy"] .home-hello-name-row button.hello-tier-pill { min-height: 44px !important; }
  html[data-visual-world="academy"] :is(.tab-sheet-close, .session-context-back, .session-settings-gear, .session-gear-hint-x, .cvw-info, .cvw-intro-x) {
    min-width: 44px !important;
    min-height: 44px !important;
    flex-shrink: 0;
  }
  html[data-visual-world="academy"] .session-settings-gear { animation: none !important; }
  html[data-visual-world="academy"] .unit-tools button,
  html[data-visual-world="academy"] .multi-unit-pills .unit-pill { min-height: 44px !important; }
}

/* Workspace headers share one title line; artwork no longer determines their height. */
html[data-visual-world="academy"] body[data-view] #appShell .main .topbar,
html[data-visual-world="academy"] body[data-view] #appShell .main .topbar:has(.academy-home-masthead:not(:empty)) {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  grid-template-areas: "title actions" "masthead masthead" !important;
  grid-template-rows: auto auto !important;
  align-content: start; align-items: start !important;
  min-height: 152px !important; padding: 24px 24px 12px !important;
  gap: 8px 24px !important; overflow: visible !important; z-index: 3;
}
html[data-visual-world="academy"] #appShell .topbar .topbar-title {
  position: relative !important; display: flex !important; flex-direction: column; align-items: flex-start;
  width: 100% !important; height: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important;
  overflow: visible !important; clip-path: none !important; white-space: normal; gap: 4px; z-index: 4;
}
html[data-visual-world="academy"] #appShell .topbar h1 { margin: 0 !important; font-size: 28px !important; line-height: 1.3; }
html[data-visual-world="academy"] #appShell .topbar .top-actions {
  position: static; grid-area: actions; display: flex !important; max-width: 100%; gap: 8px;
}
html[data-visual-world="academy"] #appShell .topbar .search-box { width: 300px; max-width: 100%; }
html[data-visual-world="academy"] #appShell .topbar::before,
html[data-visual-world="academy"] #appShell .topbar::after {
  top: 66px !important; bottom: auto !important; right: 20px !important;
  width: min(42%,360px) !important; height: auto !important; aspect-ratio: 1600 / 533;
  background-size: 100% 100% !important; background-position: right center;
}
html[data-visual-world="academy"] #appShell .academy-home-masthead { grid-area: masthead; min-width: 0; }
html[data-visual-world="academy"] #appShell .academy-home-masthead .home-greeting-strip {
  position: static; display: flex !important; align-items: center; justify-content: flex-start;
  flex-wrap: wrap; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  gap: 8px 14px !important; width: fit-content; max-width: 100%;
}
html[data-visual-world="academy"] #appShell .academy-home-masthead .home-greeting-tools {
  position: static !important; display: flex; align-items: center; padding: 0 !important; margin: 0 !important;
}
html[data-visual-world="academy"] #appShell .home-class-context {
  display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px;
  min-width: 0; max-width: 32ch; overflow-wrap: anywhere;
}
html[data-visual-world="academy"] #appShell .home-class-context .ic { flex: none; }
html[data-visual-world="academy"] #appShell .home-greeting-tools .home-refresh-icon-action {
  width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important;
  padding: 10px !important; background: transparent !important; border: 0 !important; color: var(--muted);
}
html[data-visual-world="academy"] #appShell .academy-home-masthead .home-plan-row {
  margin: 0 !important; padding: 0 !important; width: auto; min-width: 0; flex-wrap: wrap;
}
html[data-visual-world="academy"] #appShell .home-plan-text { flex-wrap: wrap; }
html[data-visual-world="academy"] .learning-level {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--muted); font-size: 12px; line-height: 1.5; white-space: nowrap;
}
html[data-visual-world="academy"] .learning-level > strong { color: var(--ink-2); font-size: 12px; font-weight: 750; }
html[data-visual-world="academy"] .learning-level-help { position: static; padding: 0; margin: 0; border: 0; background: transparent; }
html[data-visual-world="academy"] .learning-level-help > summary {
  display: grid; place-items: center; list-style: none; width: 36px; height: 36px; min-width: 36px;
  padding: 0 !important; margin: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--muted);
}
html[data-visual-world="academy"] .learning-level-help > summary::-webkit-details-marker { display: none; }
html[data-visual-world="academy"] .learning-level-help > summary::after { content: none !important; }
html[data-visual-world="academy"] .learning-level-help > summary:is(:hover,:focus-visible),
html[data-visual-world="academy"] .learning-level-help[open] > summary { background: var(--surface-2); color: var(--accent-ink); }
html[data-visual-world="academy"] .learning-level-help .ic { width: 17px; height: 17px; }
html[data-visual-world="academy"] .learning-level-popover {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 40;
  width: min(292px,calc(100vw - 48px)); padding: 16px; box-sizing: border-box;
  border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); color: var(--ink-2);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%); white-space: normal; overflow-wrap: anywhere;
}
html[data-visual-world="academy"] .learning-level-popover > strong { color: var(--ink); font-size: 13px; }
html[data-visual-world="academy"] .learning-level-popover p { margin: 8px 0; font-size: 13px; line-height: 1.7; }
html[data-visual-world="academy"] .learning-level-popover button {
  display: inline-flex; align-items: center; gap: 6px; width: auto !important; min-height: 44px;
  padding: 8px 0; color: var(--accent-ink); border: 0; background: transparent; font-size: 13px;
}
html[data-visual-world="academy"] #workspaceLevel[hidden] { display: none !important; }
html[data-visual-world="academy"] #workspaceLevel { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; min-width: 0; max-width: 100%; }
html[data-visual-world="academy"] #workspaceLevel .learning-level,
html[data-visual-world="academy"] #workspaceLevel .learning-level > strong { font-size: 14px; }
html[data-visual-world="academy"] .workspace-class-context { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; max-width: 100%; color: var(--muted); font-size: 14px; line-height: 1.6; }
html[data-visual-world="academy"] .workspace-class-context::before { content: ''; width: 1px; height: 14px; align-self: center; background: var(--hairline); margin-right: 8px; flex: none; }
html[data-visual-world="academy"] .workspace-class-context > span { flex: none; }
html[data-visual-world="academy"] .workspace-class-context > strong { color: var(--ink-2); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
html[data-visual-world="academy"] body[data-view="today"] #appShell .main .topbar:not(:has(.academy-home-masthead:not(:empty))) { grid-template-rows: auto !important; grid-template-areas: "title actions" !important; min-height: 144px !important; }
html[data-visual-world="academy"] body[data-view="today"] #appShell .topbar::before,
html[data-visual-world="academy"] body[data-view="today"] #appShell .topbar::after { content: ''; }
html[data-visual-world="academy"] .academy-catalog-filters { grid-template-columns: minmax(180px,1fr) minmax(0,2fr); }
/* 5.10.3-listen-labels：有「单元」下拉时宽屏三列（教材 · 单元 · 搜索）；≤1180px 仍按下方单列规则 */
@media (min-width:1181px) {
  html[data-visual-world="academy"] #view-listen .academy-catalog-filters:has(> label:nth-child(3)) { grid-template-columns: minmax(150px,1fr) minmax(180px,1.4fr) minmax(180px,2fr); }
}
/* 教材音频标题带单元·板块·练习，手机上标题放宽到两行，并保留一行「Track · 第 N 页」（refine.css 原先整行隐藏） */
@media (max-width:560px) {
  html[data-visual-world="academy"] #view-listen .book-audio-main strong { white-space: normal !important; -webkit-line-clamp: 2 !important; }
  html[data-visual-world="academy"] #view-listen .book-audio-main small.book-audio-meta { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
}
@media (max-width:1180px) {
  html[data-visual-world="academy"] body[data-view="today"] #appShell .main .topbar:not(:has(.academy-home-masthead:not(:empty))) {
    grid-template-rows: 44px auto !important; grid-template-areas: "menu brand search theme" "title title title title" !important;
  }
  html[data-visual-world="academy"] body[data-view] #appShell .main .topbar,
  html[data-visual-world="academy"] body[data-view] #appShell .main .topbar:has(.academy-home-masthead:not(:empty)) {
    grid-template-columns: 44px minmax(0,1fr) minmax(200px,300px) 44px !important;
    grid-template-areas: "menu brand search theme" "title title title title" "masthead masthead masthead masthead" !important;
    grid-template-rows: 44px auto auto !important; min-height: 152px !important; padding: 12px 24px !important;
    gap: 8px 12px !important;
  }
  html[data-visual-world="academy"] #appShell .topbar .top-actions { display: contents !important; }
  html[data-visual-world="academy"] #appShell .topbar .academy-mobile-brand {
    display: flex; align-items: center; align-self: center; min-height: 44px;
    margin: 0; font-size: 18px; line-height: 1.2; text-align: left; white-space: nowrap;
  }
  html[data-visual-world="academy"] #appShell .topbar :is(#menuToggle,#themeToggle,.academy-search-toggle,.academy-search-close) {
    align-self: center; align-items: center; justify-content: center;
    width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
    margin: 0 !important; padding: 0 !important; border-radius: 8px !important; transform: none !important;
  }
  html[data-visual-world="academy"] #appShell .topbar :is(#menuToggle,#themeToggle,.academy-search-toggle,.academy-search-close) .ic { width: 20px; height: 20px; }
  html[data-visual-world="academy"] #appShell .topbar .topbar-title { width: 100% !important; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
  html[data-visual-world="academy"] #appShell .topbar::before,
  html[data-visual-world="academy"] #appShell .topbar::after { top: 64px !important; width: min(40%,300px) !important; right: 16px !important; }
  html[data-visual-world="academy"] .learning-level-help > summary { width: 44px; min-width: 44px; height: 44px; }
}
@media (max-width:767px) {
  html[data-visual-world="academy"] body[data-view="today"] #appShell .main .topbar:not(:has(.academy-home-masthead:not(:empty))) { grid-template-areas: "menu brand find theme" "title title title title" !important; }
  html[data-visual-world="academy"] body[data-view="today"] #appShell .main .topbar.academy-search-open:not(:has(.academy-home-masthead:not(:empty))) { grid-template-rows: 44px 44px auto !important; grid-template-areas: "menu brand find theme" "search search search close" "title title title title" !important; }
  html[data-visual-world="academy"] #workspaceLevel { gap: 0 8px; }
  html[data-visual-world="academy"] .workspace-class-context { gap: 6px; }
  html[data-visual-world="academy"] .workspace-class-context::before { margin-right: 2px; }
  html[data-visual-world="academy"] #appShell .topbar .academy-search-toggle { grid-area: find; }
  html[data-visual-world="academy"] #appShell .topbar .academy-search-close { grid-area: close; }
  html[data-visual-world="academy"] #appShell .topbar .search-box { grid-area: search !important; }
  html[data-visual-world="academy"] body[data-view] #appShell .main .topbar,
  html[data-visual-world="academy"] body[data-view] #appShell .main .topbar:has(.academy-home-masthead:not(:empty)) {
    grid-template-columns: 44px minmax(0,1fr) 44px 44px !important;
    grid-template-areas: "menu brand find theme" "title title title title" "masthead masthead masthead masthead" !important;
    grid-template-rows: 44px auto auto !important; min-height: 144px !important; padding: 10px 16px 8px !important;
    gap: 6px !important;
  }
  html[data-visual-world="academy"] body[data-view] #appShell .main .topbar.academy-search-open,
  html[data-visual-world="academy"] body[data-view] #appShell .main .topbar.academy-search-open:has(.academy-home-masthead:not(:empty)) {
    grid-template-areas: "menu brand find theme" "search search search close" "title title title title" "masthead masthead masthead masthead" !important;
    grid-template-rows: 44px 44px auto auto !important;
  }
  html[data-visual-world="academy"] #appShell .topbar .search-box { width: 100%; }
  html[data-visual-world="academy"] #appShell .topbar .topbar-title { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 8px !important; }
  html[data-visual-world="academy"] #appShell .topbar h1 { font-size: 23px !important; }
  html[data-visual-world="academy"] #appShell .topbar::before,
  html[data-visual-world="academy"] #appShell .topbar::after { top: 64px !important; width: min(42%,240px) !important; right: 0 !important; }
  html[data-visual-world="academy"] #appShell .topbar.academy-search-open::before,
  html[data-visual-world="academy"] #appShell .topbar.academy-search-open::after { top: 114px !important; }
  html[data-visual-world="academy"] #appShell .academy-home-masthead .home-greeting-strip.is-self { background: var(--surface-2) !important; padding: 8px !important; border-radius: 8px !important; }
  html[data-visual-world="academy"] .academy-catalog-filters { grid-template-columns: minmax(0,1fr); }
}

/* Free study uses one workspace; assignment requirements keep their own panel. */
html[data-visual-world="academy"] #view-study .cv-study-focused {
  grid-template-columns: minmax(0,1fr) !important;
  width: min(100%,1120px); margin-inline: auto;
}
html[data-visual-world="academy"] #view-study .cv-study-workspace-toolbar {
  width: min(100%,1120px); margin: 0 auto 16px; justify-content: space-between;
}
html[data-visual-world="academy"] #view-study .cv-study-workspace-toolbar .cv-word-rangebar {
  flex: 1 1 420px; width: 100%; max-width: 580px;
  grid-template-columns: minmax(0,1fr) auto auto;
}
html[data-visual-world="academy"] #view-study .has-word-list :is(select,.cv-word-range-switch,.cv-browse-words) {
  height: 44px !important; min-height: 44px !important;
}
html[data-visual-world="academy"] #view-study .cv-browse-words {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: auto !important; min-width: 44px; padding: 0 12px !important;
  font-size: 13px; white-space: nowrap;
}
html[data-visual-world="academy"] #view-study .cv-wordlist-short { display: none; }
html[data-visual-world="academy"] #view-study :is(.cv-study-listbar,.cv-study-list-range) {
  width: min(100%,1120px); margin: 0 auto 12px;
}
html[data-visual-world="academy"] #view-study .cv-study-listbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
}
html[data-visual-world="academy"] #view-study .cv-study-listbar > strong {
  flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere;
}
html[data-visual-world="academy"] #view-study .cv-study-listbar > button {
  width: auto !important; min-height: 44px; margin: 0; flex: 0 0 auto;
}
@media (max-width:899px) {
  html[data-visual-world="academy"] #view-study .cv-study-workspace-toolbar { align-items: stretch; }
  html[data-visual-world="academy"] #view-study .cv-study-workspace-toolbar .cv-word-rangebar {
    flex: none; max-width: none;
  }
}
@media (max-width:600px) {
  html[data-visual-world="academy"] #view-study .cv-study-workspace-toolbar .cv-word-rangebar { grid-template-columns: minmax(0,1fr) auto 56px; }
  html[data-visual-world="academy"] #view-study .cv-browse-words { padding: 0 !important; }
  html[data-visual-world="academy"] #view-study .cv-browse-words :is(.ic,.cv-wordlist-label) { display: none; }
  html[data-visual-world="academy"] #view-study .cv-wordlist-short { display: inline; }
  html[data-visual-world="academy"] #view-study .cv-study-listbar > strong { flex-basis: 100%; }
}

/* Background membership verification must not displace the active workspace. */
html[data-visual-world="academy"] #accountMembershipStatus.is-pending {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
html[data-visual-world="academy"] #appShell #viewTitle::after {
  content: ''; display: inline-block; width: 14px; height: 14px; margin-inline-start: 10px;
  border: 2px solid var(--hairline); border-top-color: var(--accent-ink); border-radius: 50%;
  vertical-align: middle; opacity: 0;
}
html[data-visual-world="academy"] #appShell.membership-pending #viewTitle::after {
  opacity: 1; animation: membership-sync .9s linear infinite;
}
@keyframes membership-sync { to { transform: rotate(360deg); } }
html.cv-reduce-motion #appShell #viewTitle::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { #appShell #viewTitle::after { animation: none !important; } }
html[data-visual-world="academy"] #view-writing .writing-compose-heading {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px;
}
html[data-visual-world="academy"] #view-writing .writing-compose-heading .writing-step-head { margin-bottom: 0; flex: 1 1 230px; }
html[data-visual-world="academy"] #view-writing .writing-direct-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto !important;
  min-height: 44px; padding: 8px 10px !important; color: var(--accent-ink); font-size: 14px;
}
@media (max-width:767px) {
  html[data-visual-world="academy"] #appShell .topbar .topbar-title { padding-top: 0 !important; gap: 0; }
  html[data-visual-world="academy"] #appShell .topbar .academy-mobile-brand { font-size: 17px; }
  html[data-visual-world="academy"] #view-study .cv-study-listbar { flex-wrap: nowrap; }
  html[data-visual-world="academy"] #view-study .cv-study-listbar > strong { flex: 1 1 auto; }
  html[data-visual-world="academy"] #view-study .wordlist-close {
    flex: 0 0 44px; width: 44px !important; min-width: 44px !important; height: 44px !important; padding: 0 !important;
  }
  html[data-visual-world="academy"] #view-study .wordlist-close span { display: none; }
  html[data-visual-world="academy"] .word-list .compact-word { padding-block: 12px !important; min-width: 0; }
  html[data-visual-world="academy"] .word-list .compact-word-title { flex-wrap: wrap; overflow-wrap: anywhere; }
  html[data-visual-world="academy"] .word-list .compact-word-ops {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 8px !important;
  }
  html[data-visual-world="academy"] .word-list .compact-word-ops .cw-mini {
    flex: 0 1 auto !important; width: auto !important; min-width: 84px; min-height: 44px !important;
    padding: 8px 14px !important; font-size: 14px !important; white-space: nowrap;
  }
  html[data-visual-world="academy"] #view-reading .reading-shell { gap: 12px !important; }
  html[data-visual-world="academy"] #view-reading .reading-catalog-heading { padding-block: 4px; min-height: 44px; }
  html[data-visual-world="academy"] #view-reading .reading-source-note { margin: 4px 0; font-size: 12px; }
  html[data-visual-world="academy"] #view-reading .reading-source-tabs { padding: 0; }
  html[data-visual-world="academy"] #view-reading .reading-source-tabs button { min-height: 44px; }
  html[data-visual-world="academy"] #view-reading .reading-detail {
    background: color-mix(in srgb,var(--surface) 94%,transparent) !important;
    border-radius: 8px; padding: 12px !important; min-width: 0; overflow-wrap: anywhere;
  }
  html[data-visual-world="academy"] #view-reading .reading-detail .cv-read-back { background: var(--surface-2); }
  html[data-visual-world="academy"] #view-writing .writing-step { padding-block: 14px; }
  html[data-visual-world="academy"] #view-writing .writing-clear-action {
    width: auto !important; justify-self: end; min-height: 44px !important; padding: 8px 12px !important;
  }
  html[data-visual-world="academy"] #view-writing .writing-upload-trigger { min-height: 84px !important; padding: 10px 12px !important; }
  html[data-visual-world="academy"] #view-writing .writing-upload-trigger strong { font-size: 17px !important; }
  html[data-visual-world="academy"] #view-writing #writingOcrText { scroll-margin-block: 16px 100px; }
  html[data-visual-world="academy"] #view-growth .growth-hero { padding: 16px !important; }
  html[data-visual-world="academy"] #view-growth .growth-hero-head { gap: 8px; }
  html[data-visual-world="academy"] #view-growth .growth-hero-head p { margin-block: 8px 0; }
  html[data-visual-world="academy"] #view-growth .growth-hero-actions { justify-content: flex-end; }
  html[data-visual-world="academy"] #view-growth #growthPrint { width: auto !important; min-height: 44px !important; font-size: 14px !important; padding: 8px 12px !important; }
  html[data-visual-world="academy"] #view-growth .growth-insight { margin-top: 0; }
}
@media (min-width:768px) and (max-width:1180px) {
  html[data-visual-world="academy"] .word-list .compact-word-ops .cw-mini {
    min-height: 44px !important; min-width: 84px; padding: 8px 14px !important;
  }
  html[data-visual-world="academy"] #view-study .wordlist-close { min-height: 44px; }
}
@media (max-width:359px) {
  html[data-visual-world="academy"] #appShell .topbar .academy-mobile-brand { font-size: 15px; white-space: normal; }
  html[data-visual-world="academy"] #appShell .topbar h1 { font-size: 22px !important; }
}

/* Question height follows its content, including feedback and inline coaching. */
@media (max-width:768px) {
  html[data-visual-world="academy"] #appShell .session-context-bar:has(.session-gear-hint) { flex-wrap: wrap; }
  html[data-visual-world="academy"] #appShell .training-grid.session-live .session-gear-hint {
    position: static; flex: 1 0 100%; width: 100%; max-width: none;
    box-sizing: border-box; justify-content: space-between; padding: 4px 10px;
    background: var(--surface-2); color: var(--muted); border-radius: 6px; box-shadow: none;
  }
  html[data-visual-world="academy"] #appShell .session-gear-hint::after { display: none; }
  html[data-visual-world="academy"] #appShell .session-gear-hint-x { color: inherit; }
  html[data-visual-world="academy"] #appShell .main:has(.view.active .training-grid.session-live) {
    padding-bottom: var(--cv-mobile-tabbar-clearance,calc(104px + env(safe-area-inset-bottom,0px))) !important;
  }
  html[data-visual-world="academy"] #appShell .training-grid.session-live > .question-card {
    height: auto !important; min-height: 0 !important; overflow: visible;
    padding: 16px !important; gap: 12px !important;
  }
  html[data-visual-world="academy"] #appShell .training-grid.session-live .session-q-body {
    flex: none; width: 100%; min-width: 0; max-height: none;
    overflow: visible; justify-content: flex-start;
  }
  html[data-visual-world="academy"] #appShell .training-grid.session-live .question-prompt {
    margin-bottom: 8px; overflow-wrap: anywhere;
  }
  html[data-visual-world="academy"] #appShell .training-grid.session-live .options { margin-top: 8px !important; }
  html[data-visual-world="academy"] #appShell .training-grid.session-live .option {
    min-height: 48px !important; padding: 12px !important; overflow-wrap: anywhere;
  }
  html[data-visual-world="academy"] #appShell .training-grid.session-live #sessionFeedback {
    scroll-margin-bottom: var(--cv-mobile-tabbar-clearance,104px);
  }
}

/* ==== cv-quota.css ==== */
/* Load after academy-theme.css; inherit its day/night and palette tokens.
   Mount .quota-drawer.modal-mask directly under body, outside transformed views.
   Keep .hidden in sync with [hidden]: legacy tabbar visibility checks .hidden.
   JS owns dialog focus, inert/scroll locking, close/refresh and quota decisions. */

:is(.quota-hint[data-quota-feature], .quota-summary, .quota-drawer, .quota-help-link),
:is(.quota-hint[data-quota-feature], .quota-summary, .quota-drawer) * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.quota-hint[data-quota-feature] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  min-width: 0;
  max-width: 100%;
  margin: 4px 0;
  padding: 0;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
  overflow-wrap: anywhere;
}

.quota-hint .quota-hint-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.quota-hint-main > .ic {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: inherit;
}

.quota-hint .quota-hint-copy {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.quota-hint-copy > span {
  min-width: 0;
  max-width: 100%;
  color: inherit;
}

.quota-hint .quota-hint-detail {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.quota-hint.is-low .quota-hint-main {
  color: var(--muted);
}

.quota-hint.is-low .quota-hint-number { color: #996312; font-weight: 650; }
.cv-dark .quota-hint.is-low .quota-hint-number { color: #edbc6f; }
.home-member-plan .quota-summary { margin: 0; padding: 0; border: 0; }
.quota-panel-head .quota-summary { margin: 4px 0 0; padding: 0; border: 0; }

.quota-hint.is-empty .quota-hint-main {
  color: var(--ink);
  font-weight: 650;
}

.quota-hint.is-unknown .quota-hint-main {
  color: var(--muted);
  font-weight: 400;
}

/* Details may be a root child or live inside .quota-hint-copy. */
.quota-hint:is(.is-low, .is-empty) .quota-hint-detail {
  display: block;
  flex-basis: 100%;
  width: 100%;
}

.quota-hint:is(.is-low, .is-empty) > .quota-hint-detail {
  order: 2;
  padding-inline-start: 0;
}

.quota-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  width: 100%;
  min-width: 0;
  margin: 12px 0;
  padding: 8px 0;
  border-block: 1px solid var(--hairline);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.quota-summary small {
  flex: 1 1 180px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Scoped controls do not inherit legacy raised-button motion or full widths. */
body :is(.quota-hint[data-quota-feature], .quota-summary, .quota-panel) button,
body .quota-help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto !important;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
  transform: none !important;
  transition: none !important;
}

.quota-hint button.quota-link,
.quota-hint button[data-quota-refresh],
.quota-summary button,
.quota-help-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body :is(.quota-hint[data-quota-feature], .quota-summary, .quota-panel) button:focus-visible,
body .quota-help-link:focus-visible,
.quota-panel-body:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

.quota-drawer,
.quota-drawer.modal-mask {
  position: fixed;
  inset: 0;
  /* speechModal: 50 / mobile 150; global toasts: 1200, 2400, 9000, 99999. */
  z-index: 300 !important;
  display: flex;
  /* Override legacy modal-mask's mobile alignment, padding and blur locally. */
  place-items: stretch !important;
  justify-content: flex-end;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  background: rgb(0 0 0 / 36%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  overscroll-behavior: contain;
}

.cv-dark .quota-drawer,
.cv-dark .quota-drawer.modal-mask {
  background: rgb(0 0 0 / 55%) !important;
}

.quota-drawer .quota-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(440px, 100%);
  min-width: 0;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.quota-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--hairline);
}

.quota-panel-head h2 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body .quota-panel .quota-panel-head > button {
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px;
  padding: 0;
  color: var(--ink-2) !important;
}

.quota-panel button .ic,
.quota-help-link .ic {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: inherit;
}

.quota-panel-body {
  min-width: 0;
  min-height: 0;
  padding: 8px max(20px, env(safe-area-inset-right, 0px)) 16px max(20px, env(safe-area-inset-left, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  overflow-wrap: anywhere;
}

.quota-group {
  min-width: 0;
  margin: 0;
  padding: 16px 0 0;
}

.quota-group + .quota-group {
  margin-top: 12px;
}

.quota-group h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}

.quota-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.quota-detail-label,
.quota-detail-count {
  min-width: 0;
  overflow-wrap: anywhere;
}

.quota-detail-count {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

:is(.quota-detail-label, .quota-detail-count) strong {
  display: block;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}

:is(.quota-detail-label, .quota-detail-count) small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.quota-detail-row.is-low .quota-detail-count strong {
  color: var(--accent-ink);
}

.quota-detail-row.is-empty .quota-detail-count strong {
  color: var(--ink);
}

.quota-detail-row.is-unknown .quota-detail-count strong {
  color: var(--muted);
  font-weight: 400;
}

.quota-panel-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 12px max(20px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body .quota-panel .quota-panel-footer button {
  padding: 8px 12px;
  border-color: var(--hairline) !important;
  background: var(--surface-2) !important;
}

.quota-panel-footer :is(p, small) {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  body :is(.quota-hint[data-quota-feature], .quota-summary, .quota-panel) button:hover,
  body .quota-help-link:hover {
    background: var(--surface-2) !important;
    text-decoration-thickness: 2px;
  }
}

@media (max-width: 600px) {
  .quota-drawer,
  .quota-drawer.modal-mask {
    align-items: flex-end !important;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
  }

  .quota-drawer .quota-panel {
    width: 100%;
    height: auto;
    max-height: min(84vh, calc(100vh - max(12px, env(safe-area-inset-top, 0px))));
    max-height: min(84dvh, calc(100dvh - max(12px, env(safe-area-inset-top, 0px))));
    border-radius: 8px 8px 0 0;
  }

  .quota-panel-head {
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  }

  .quota-panel-body,
  .quota-panel-footer {
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  }
}

@media (max-height: 480px) {
  .quota-drawer .quota-panel {
    overflow-y: auto;
    grid-template-rows: auto auto auto;
  }

  .quota-panel-body {
    overflow: visible;
  }
}

/* Both hiding mechanisms must win over the drawer's flex display. */
:is(.quota-drawer, .quota-hint[data-quota-feature], .quota-summary, .quota-help-link):is(.hidden, [hidden]),
:is(.quota-drawer, .quota-hint[data-quota-feature], .quota-summary) :is(.hidden, [hidden]) {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.quota-drawer, .quota-hint[data-quota-feature], .quota-summary, .quota-help-link),
  :is(.quota-drawer, .quota-hint[data-quota-feature], .quota-summary) * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

html.cv-reduce-motion :is(.quota-drawer, .quota-hint[data-quota-feature], .quota-summary, .quota-help-link),
html.cv-reduce-motion :is(.quota-drawer, .quota-hint[data-quota-feature], .quota-summary) * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

@media (forced-colors: active) {
  .quota-drawer .quota-panel {
    border: 1px solid CanvasText;
  }

  body :is(.quota-hint[data-quota-feature], .quota-summary, .quota-panel) button:focus-visible,
  body .quota-help-link:focus-visible,
  .quota-panel-body:focus-visible {
    outline-color: Highlight !important;
  }
}

/* ==== academy-skins.css ==== */
/* Approved 5.6.1 skins. Shared geometry lives in academy-theme.css. */
html[data-visual-world="academy"][data-skin="warm"] {
  --bg: #f0debf;
  --bg-tint: #f4e5ca;
  --surface: #fff3dc;
  --surface-2: #f5e7cd;
  --surface-3: #ead6b3;
  --ink: #282d25;
  --ink-2: #424638;
  --muted: #62604e;
  --muted-2: #62604e;
  --hairline: #ccba96;
  --hairline-soft: #dfcba7;
  --accent: #176346;
  --accent-press: #104e36;
  --accent-ink: #15583f;
  --accent-soft: #dbe5c9;
  --accent-soft-2: #edf0d9;
  --accent-edge: #819f7e;
  --accent-2: #34785a;
  --academy-action: #176346;
  --academy-action-hover: #104e36;
  --academy-scene-ink: var(--ink);
  --academy-sidebar: #ead6b3;
  --academy-canvas-sky: #f0debf;
  --academy-canvas-air: #f0debf;
  --academy-canvas-garden: #ecd9b8;
  --green-ink: #246441;
  --green-soft: #deead2;
  --green-strong: #246441;
  --green-strong-press: #174a2e;
  --amber-ink: #845513;
  --amber-soft: #f6e2b6;
  --red-ink: #a53226;
  --red-soft: #f4ddd0;
  --shadow-xs: 0 2px 4px rgb(76 61 31 / 4%);
  --shadow-sm: 0 4px 12px rgb(76 61 31 / 7%);
  --shadow: 0 8px 24px rgb(76 61 31 / 9%);
  --shadow-lg: 0 16px 48px rgb(43 36 23 / 20%);
  --shadow-accent: none;
  --blue: var(--accent);
  --cyan: var(--accent-2);
  --gold-ink: #845513;
}
html[data-visual-world="academy"][data-skin="warm"].cv-dark {
  --bg: #242321;
  --bg-tint: #2b2a25;
  --surface: #32312b;
  --surface-2: #39382f;
  --surface-3: #444339;
  --ink: #f1e8d7;
  --ink-2: #e1d9c7;
  --muted: #c1bba9;
  --muted-2: #c1bba9;
  --hairline: #646151;
  --hairline-soft: #4a473c;
  --accent: #a8cdb3;
  --accent-press: #c0dfc7;
  --accent-ink: #b2d8bd;
  --accent-soft: #354d3c;
  --accent-soft-2: #303e32;
  --accent-edge: #75957a;
  --accent-2: #98c5a6;
  --academy-action: #226449;
  --academy-action-hover: #2c7656;
  --academy-sidebar: #292823;
  --academy-canvas-sky: #242321;
  --academy-canvas-air: #242321;
  --academy-canvas-garden: #292a23;
  --green-ink: #a0d4ac;
  --green-soft: #354736;
  --green-strong: #226449;
  --green-strong-press: #2c7656;
  --amber-ink: #e0bd7c;
  --amber-soft: #4a4030;
  --red-ink: #ffb8a8;
  --red-soft: #51382f;
  --gold-ink: #e0bd7c;
  --shadow-xs: 0 2px 4px rgb(0 0 0 / 8%);
  --shadow-sm: 0 4px 12px rgb(0 0 0 / 12%);
  --shadow: 0 8px 24px rgb(0 0 0 / 16%);
  --shadow-lg: 0 16px 48px rgb(0 0 0 / 35%);
}
html[data-visual-world="academy"][data-skin="warm"] body::before { background: #f0debf !important; }
html[data-visual-world="academy"][data-skin="warm"] .academy-night-canvas { background: #242321; }
html[data-visual-world="academy"][data-skin="warm"] body {
  --academy-scene-day: url("assets/academy/skins/warm/library-day.webp");
  --academy-scene-night: url("assets/academy/skins/warm/library-night.webp");
  --academy-scene-day-small: url("assets/academy/skins/warm/library-day-small.webp");
  --academy-scene-night-small: url("assets/academy/skins/warm/library-night-small.webp");
}
html[data-visual-world="academy"][data-skin="warm"] body[data-view="listen"] {
  --academy-scene-day: url("assets/academy/skins/warm/listen-day.webp");
  --academy-scene-night: url("assets/academy/skins/warm/listen-night.webp");
  --academy-scene-day-small: url("assets/academy/skins/warm/listen-day-small.webp");
  --academy-scene-night-small: url("assets/academy/skins/warm/listen-night-small.webp");
}
html[data-visual-world="academy"][data-skin="warm"] body:is([data-view="study"],[data-view="practice"],[data-view="quiz"],[data-view="wrong"],[data-view="reading"],[data-view="writing"],[data-view="speaking"]) {
  --academy-scene-day: url("assets/academy/skins/warm/study-day.webp");
  --academy-scene-night: url("assets/academy/skins/warm/study-night.webp");
  --academy-scene-day-small: url("assets/academy/skins/warm/study-day-small.webp");
  --academy-scene-night-small: url("assets/academy/skins/warm/study-night-small.webp");
}
html[data-visual-world="academy"][data-skin="warm"] .auth-screen {
  --academy-welcome-day: url("assets/academy/skins/warm/library-day.webp");
  --academy-welcome-night: url("assets/academy/skins/warm/library-night.webp");
  background: var(--bg) !important;
}
html[data-visual-world="academy"][data-skin="warm"] .sidebar { background: var(--academy-sidebar) !important; }
html[data-visual-world="academy"][data-skin="warm"] :is(.auth-story .brand strong,.auth-story .auth-story-copy h1,.home-greeting-strip .home-hello-name-row strong) { color: var(--ink) !important; }
html[data-visual-world="academy"][data-skin="warm"] :is(.auth-story .auth-story-copy p,.auth-story .brand span,.auth-public-footer,.auth-public-footer a,.auth-public-footer button,.home-greeting-strip .home-hello-copy > span:first-child,.home-greeting-strip .home-hello-copy small,.home-greeting-strip .home-plan-row,.home-greeting-strip .home-plan-text) { color: var(--ink-2) !important; }
html[data-visual-world="academy"][data-skin="warm"] .auth-public-footer { background: var(--surface-2) !important; }
html[data-visual-world="academy"][data-skin="warm"] .auth-companions { background: var(--surface-2) !important; }
html[data-visual-world="academy"][data-skin="warm"] .topbar::before,
html[data-visual-world="academy"][data-skin="warm"] .topbar::after {
  --academy-art-x: linear-gradient(to right,transparent,#000 28%,#000 92%,transparent);
  --academy-art-y: linear-gradient(to bottom,transparent,#000 12%,#000 70%,transparent);
}
html[data-visual-world="academy"][data-skin="warm"] #view-listen .academy-player .listen-player-copy::before {
  background-image: var(--academy-banner-small);
  background-size: auto 100%;
  background-position: right center;
}
/* Skin previews are real artwork, not independent palette controls. */
html[data-visual-world="academy"] .academy-skin-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
html[data-visual-world="academy"] .academy-skin-picker [data-skin-select] {
  position: relative; display: flex; flex-direction: column; gap: 12px; align-items: stretch;
  min-width: 0; min-height: 44px; padding: 8px 8px 12px; text-align: left;
  border: 1px solid var(--hairline) !important; border-radius: 8px !important;
  background: var(--surface) !important; color: var(--ink) !important; box-shadow: none !important;
  font-size: 14px; font-weight: 650; line-height: 1.5;
}
html[data-visual-world="academy"] .academy-skin-picker [data-skin-select]::before {
  content: ""; display: block; aspect-ratio: 2.4; border-radius: 4px;
  background: #e8f4ff url("assets/academy/scenes/plan-day-small-v1.webp") center / cover no-repeat;
}
html[data-visual-world="academy"] .academy-skin-picker [data-skin-select="warm"]::before { background: #f0debf url("assets/academy/skins/warm/library-day-small.webp") center / cover no-repeat; }
html[data-visual-world="academy"].cv-dark .academy-skin-picker [data-skin-select="campus"]::before { background-image: url("assets/academy/scenes/plan-night-small-v1.webp"); }
html[data-visual-world="academy"].cv-dark .academy-skin-picker [data-skin-select="warm"]::before { background-image: url("assets/academy/skins/warm/library-night-small.webp"); }
html[data-visual-world="academy"] .academy-skin-picker [aria-pressed="true"] { border-color: var(--accent) !important; outline: 1px solid var(--accent); outline-offset: -2px; }
html[data-visual-world="academy"] .academy-skin-picker [aria-pressed="true"]::after {
  content: ""; position: absolute; right: 12px; bottom: 16px; width: 8px; height: 8px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg);
}
html[data-visual-world="academy"].academy-skin-changing :where(body,.sidebar,.topbar,.auth-screen,.auth-card,.settings-drawer,.mobile-tabbar,.word-card,.book-audio-row,.reading-task-card,.surface-card,button,input,textarea,select) {
  transition: background-color .35s ease,border-color .35s ease,color .35s ease !important;
}
@media (min-width:1181px) {
  html[data-visual-world="academy"][data-skin="warm"] body:not([data-view="teacher"]):not([data-view="admin"]) .topbar::before,
  html[data-visual-world="academy"][data-skin="warm"] body:not([data-view="teacher"]):not([data-view="admin"]) .topbar::after {
    top: 56px; right: 0; width: min(72%,600px); height: auto;
    aspect-ratio: 3; background-size: 100% 100%; background-position: right center;
  }
  html[data-visual-world="academy"][data-skin="warm"] body[data-view="today"] .topbar:has(.academy-home-masthead:not(:empty)) { min-height: 260px; }
}
@media (max-width:900px) {
  html[data-visual-world="academy"][data-skin="warm"] .auth-screen {
    --academy-welcome-day: url("assets/academy/skins/warm/library-day-small.webp");
    --academy-welcome-night: url("assets/academy/skins/warm/library-night-small.webp");
  }
}
@media (prefers-reduced-motion:reduce) {
  html[data-visual-world="academy"].academy-skin-changing * { transition: none !important; }
}
html[data-visual-world="academy"].cv-reduce-motion.academy-skin-changing * { transition: none !important; }
@media (forced-colors:active) {
  html[data-visual-world="academy"][data-skin="warm"] body::before { background: Canvas !important; }
  html[data-visual-world="academy"] .academy-skin-picker [aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* ==== learning-journey.css ==== */
.student-home .learning-journey, .completion-next {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  min-width: 0;
  padding: 14px 0;
  border-block: 1px solid var(--hairline);
  color: var(--ink, var(--text));
}
.home-overview-bar > .learning-journey { flex: 1 0 100%; grid-column: 1 / -1; order: 3; }
.continuity-notice { max-width: 880px; margin-inline: auto; min-width: 0; }
.continuity-notice h2 { font-size: 22px; line-height: 1.4; }
.continuity-notice .session-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.continuity-notice button { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.continuity-draft { padding-inline-start: 24px; overflow-wrap: anywhere; }
.continuity-draft li { padding-block: 12px; border-bottom: 1px solid var(--hairline); }
.quiz-sync-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-width: 0; margin-block: 8px 12px; color: var(--muted, var(--text)); font-size: 13px; line-height: 1.5; }
.quiz-sync-notice > span { flex: 1 1 240px; overflow-wrap: anywhere; }
.quiz-sync-notice .session-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-sync-notice button { min-height: 44px; max-width: 100%; width: auto !important; white-space: normal; overflow-wrap: anywhere; }
.quiz-sync-notice button[aria-disabled="true"] { opacity: .65; cursor: default; }
.question-card .feedback { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: normal; }
.learning-journey-copy { display: grid; gap: 4px; flex: 1 1 220px; min-width: 0; }
.learning-journey-copy strong { font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; color: var(--ink, var(--text)); }
.learning-journey-copy span, .learning-journey-copy small { font-size: 14px; line-height: 1.5; color: var(--ink-2, var(--text-secondary, var(--text))); }
.learning-journey-copy .learning-journey-category { font-size: 13px; font-weight: 600; color: var(--accent-ink, var(--text)); }
.student-home .learning-journey button, .completion-next button { width: auto !important; min-height: 44px; max-width: 100%; flex-shrink: 0; }
.student-home .learning-journey [data-journey], .completion-next [data-journey] { white-space: nowrap; font-size: 15px; line-height: 1.4; }
[data-refresh-growth-records] { min-inline-size: 12em !important; }
.completion-next { margin-top: 24px; border-bottom: 0; text-align: start; }
#listenPrefsRepairModal .speech-modal { width: min(620px, 100%); min-width: 0; }
#listenPrefsRepairTitle { padding-inline-end: 36px; margin: 0 0 12px; font-size: 22px; line-height: 1.4; }
.listen-prefs-intro, [data-listen-prefs-message] { line-height: 1.6; overflow-wrap: anywhere; }
.listen-prefs-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-block: 20px; margin-block: 20px; border-block: 1px solid var(--hairline); }
.listen-prefs-compare section { min-width: 0; }
.listen-prefs-compare h4 { margin: 0 0 8px; font-size: 16px; line-height: 1.5; }
.listen-prefs-summary { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.listen-prefs-compare summary { min-height: 44px; display: list-item; padding-block: 10px; cursor: pointer; color: var(--accent-ink, var(--text)); }
.listen-prefs-titles { max-height: 180px; overflow-y: auto; overscroll-behavior: contain; padding-inline-start: 20px; margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.listen-prefs-titles li + li { margin-top: 8px; }
.listen-prefs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.listen-prefs-actions button { flex: 1 1 200px; width: auto !important; min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .listen-prefs-compare { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-block: 16px; padding-block: 16px; }
}
@media (max-width: 600px) {
  .student-home .learning-journey { gap: 12px; }
  .learning-journey-copy { flex-basis: 100%; }
  .student-home .learning-journey button { flex: 1 1 auto; }
}

/* 5.10.3-startup-smooth：首页「接着做」卡片（没做完的练习，不管是不是当前级别） */
.student-home .home-practice-resume { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--hairline); color: var(--ink, var(--text)); }
.home-overview-bar > .home-practice-resume { flex: 1 0 100%; grid-column: 1 / -1; order: 3; }
.home-practice-resume .hpr-copy { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; }
.home-practice-resume .hpr-copy strong { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; color: var(--ink, var(--text)); }
.home-practice-resume .hpr-copy span { font-size: 14px; line-height: 1.5; color: var(--ink-2, var(--text-secondary, var(--text))); }
.home-practice-resume .hpr-copy .hpr-tag { font-size: 13px; font-weight: 600; color: var(--accent-ink, var(--text)); }
.home-practice-resume .hpr-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.student-home .home-practice-resume button { width: auto !important; min-height: 44px; max-width: 100%; flex-shrink: 0; }

/* ==== learning-recovery-ui.css ==== */
.learning-recovery {
  min-width: 0;
  margin-block: 8px 16px;
  border-block: 1px solid var(--hairline);
  color: var(--text, var(--ink));
  background: var(--surface);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
}
.learning-recovery[hidden] { display: none !important; }
.learning-recovery > summary { min-height: 44px; padding: 10px 12px; box-sizing: border-box; cursor: pointer; font-weight: 650; }
.learning-recovery-panel { padding: 0 12px 12px; min-width: 0; }
.learning-recovery-list { list-style: none; margin: 12px 0 0; padding: 0; }
.learning-recovery-list > li { padding-block: 12px; border-top: 1px solid var(--hairline); min-width: 0; }
.learning-recovery p { margin-block: 6px; white-space: pre-line; }
.learning-recovery strong { font-size: 15px; }
.learning-recovery p, .learning-recovery strong, .learning-recovery summary { overflow-wrap: anywhere; }
.learning-recovery-note { color: var(--text-secondary, var(--muted)); }
.learning-recovery-message:empty, .learning-recovery-note:empty { display: none; }
.learning-recovery-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.learning-recovery button { min-height: 44px; width: auto !important; max-width: 100%; border-radius: 6px; white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; background: var(--surface) !important; color: inherit !important; border: 1px solid var(--hairline) !important; box-shadow: none; }
.learning-recovery :is(button, summary):focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
.learning-recovery [data-stale] .learning-recovery-note { font-weight: 600; }
@media (max-width: 360px) { .learning-recovery-actions > button { flex: 1 1 112px; } }

/* ==== question-feedback.css ==== */
.question-feedback-entry { margin-block: 12px; }
dialog.question-feedback-dialog {
  width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-sizing: border-box;
  margin: auto; padding: 16px; overflow-y: auto; border: 1px solid var(--hairline, #b8c4d2); border-radius: 8px;
  background: var(--surface, #fff); color: var(--ink, #17264a); font-family: inherit; font-size: 16px; line-height: 1.5; letter-spacing: 0;
}
.question-feedback-dialog::backdrop { background: rgb(0 0 0 / 36%); }
.question-feedback-dialog header, .question-feedback-dialog footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.question-feedback-dialog h2 { font-size: 20px; line-height: 1.4; margin: 0; letter-spacing: 0; }
.question-feedback-dialog label { display: block; margin-top: 16px; }
.question-feedback-dialog select, .question-feedback-dialog textarea {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 8px;
  font: inherit; background: var(--surface, #fff); color: var(--ink, #17264a); border: 1px solid var(--hairline, #b8c4d2); border-radius: 6px;
}
.question-feedback-dialog textarea { resize: vertical; }
.question-feedback-dialog button, #appShell .question-feedback-entry {
  width: auto !important; min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  color: var(--ink, #17264a) !important; background: var(--surface, #fff) !important; border: 1px solid var(--hairline, #b8c4d2) !important;
  border-radius: 6px; padding: 8px 12px; font: inherit;
}
.question-feedback-dialog button:hover:not(:disabled) { background: var(--surface-2, #f2f7fc) !important; }
.question-feedback-dialog button:disabled { opacity: .6; cursor: default; }
.question-feedback-dialog :focus-visible, #appShell .question-feedback-entry:focus-visible { outline: 2px solid var(--accent, #0065df); outline-offset: 3px; }
.question-feedback-dialog p { overflow-wrap: anywhere; }
.question-feedback-dialog [role="status"] { min-height: 1.5em; }
.question-feedback-boundary, .question-feedback-dialog small { font-size: 14px; }

/* ==== learning-followup.css ==== */
/* Inherit both academy skins and day/night tokens; no independent palette. */
.learning-followup {
  min-width: 0;
  margin-block: 16px;
  padding-block: 16px;
  border-block: 1px solid var(--hairline);
  color: var(--ink);
  overflow-wrap: anywhere;
  letter-spacing: 0;
}
.learning-followup h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.5; }
.learning-followup [hidden] { display: none !important; }
.learning-followup p { margin: 8px 0; }
.learning-followup ol { margin: 12px 0; padding-inline-start: 24px; }
.learning-followup li + li { margin-block-start: 12px; }
.learning-followup blockquote { margin: 6px 0; color: var(--muted); white-space: pre-wrap; }
.learning-followup details { margin-block: 12px; min-width: 0; }
.learning-followup summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
.learning-followup .followup-original { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 75ch; }
.followup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.learning-followup .followup-actions button { width: auto; min-height: 44px; max-width: 100%; white-space: normal; }
.learning-followup > button { min-height: 44px; max-width: 100%; white-space: normal; }
#writingDraftRecovery details { min-width: 0; flex-basis: 100%; }
#writingDraftRecovery .followup-original { white-space: pre-wrap; overflow-wrap: anywhere; }
.followup-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-block: 12px; }
.followup-facts > div { min-width: 0; }
.followup-facts dt { color: var(--muted); }
.followup-facts dd { margin: 4px 0 0; white-space: pre-wrap; }
.reading-practice-modal .learning-followup { flex-shrink: 0; }
.reading-practice-card [data-practice-fact] { overflow-wrap: anywhere; }
@media (max-width: 460px) {
  .followup-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .learning-followup .followup-actions button { flex: 1 1 140px; }
  .reading-practice-modal .reading-practice-actions { flex-wrap: wrap; }
  .reading-practice-modal .reading-practice-actions button { min-height: 44px; width: auto; white-space: normal; }
}

/* ==== learning-evidence.css ==== */
.learning-evidence { padding: 20px 0; border-block: 1px solid var(--hairline, #d7e4f1); margin-block: 20px; color: var(--ink, #17264a); letter-spacing: 0; }
.learning-evidence h3 { font-size: 22px; margin: 0 0 16px; }
.learning-evidence h4 { font-size: 14px; margin: 0 0 12px; }
.evidence-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.learning-evidence dl, .evidence-word dl { margin: 0; }
.learning-evidence dl > div, .evidence-word dl > div { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(0, 2fr); gap: 12px; margin-block: 8px; align-items: baseline; }
.learning-evidence dd, .evidence-word dd { margin: 0; overflow-wrap: anywhere; }
.learning-evidence p, .learning-evidence summary, .evidence-word { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.learning-evidence details { margin-top: 12px; }
.learning-evidence summary { cursor: pointer; min-height: 32px; }
.learning-evidence summary:focus-visible { outline: 2px solid var(--accent, #0065df); outline-offset: 3px; }
.evidence-note { color: var(--muted, #40536b); margin: 12px 0 0; }
.evidence-word { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--hairline, #d7e4f1); }
.evidence-word details { margin-top: 12px; }
.evidence-word summary { cursor: pointer; }
.evidence-word li { margin-block: 8px; }
[data-evidence-status="needs_review"] { color: var(--red-ink, #b22a20); }
[data-evidence-status="delayed_verified"] { color: var(--green-ink, #117a3e); }
@media (max-width: 540px) { .evidence-columns { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* ==== verification.css ==== */
.verification-dialog {
  box-sizing: border-box;
  width: min(560px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--hairline, #d7e4f1);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--ink, #17264a);
  padding: 24px;
  font-family: var(--font, sans-serif);
  letter-spacing: 0;
}
/* Opaque backdrop keeps study-page hints out of the protected question view. */
.verification-dialog::backdrop { background: var(--bg, #edf7fa); }
.verification-dialog h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.4; }
.verification-dialog [data-status] {
  margin: 0 0 20px;
  color: var(--muted, #40536b);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.verification-dialog form { margin: 0; }
.verification-dialog fieldset { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.verification-dialog legend {
  width: 100%; margin-bottom: 12px; padding: 0;
  color: var(--ink, #17264a); font-size: 18px; font-weight: 700; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.verification-dialog label {
  display: flex; align-items: flex-start; gap: 12px; min-height: 48px;
  box-sizing: border-box; padding: 14px 10px; border-bottom: 1px solid var(--hairline-soft, #e7eef6);
  font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; cursor: pointer;
}
.verification-dialog label:has(input:checked) { background: var(--accent-soft, #e8f2ff); color: var(--ink, #17264a); }
.verification-dialog label:focus-within { outline: 2px solid var(--accent, #0065df); outline-offset: -2px; }
.verification-dialog input[type="radio"] {
  flex: 0 0 18px; width: 18px !important; height: 18px; min-height: 18px !important;
  margin: 3px 0 0; accent-color: var(--accent, #0065df);
}
.verification-dialog input:disabled { opacity: 1; }
.verification-dialog button {
  box-sizing: border-box; min-height: 44px; max-width: 100%; margin: 0; padding: 10px 16px;
  border: 1px solid var(--hairline, #d7e4f1) !important; border-radius: 8px !important;
  background: var(--surface, #fff) !important; color: var(--ink, #17264a) !important;
  font: 600 14px/1.5 var(--font, sans-serif); white-space: normal; overflow-wrap: anywhere;
  cursor: pointer; box-shadow: none !important;
}
.verification-dialog form > button { width: 100%; background: var(--academy-action, #076be8) !important; color: #fff !important; border-color: transparent !important; }
.verification-dialog [data-actions]:not(:empty) { margin-top: 12px; }
.verification-dialog [data-actions] button { width: 100%; background: var(--surface-2, #f2f7fc) !important; }
.verification-dialog [data-close] { display: block; margin: 16px 0 0 auto; }
.verification-dialog button:disabled { cursor: default; opacity: .55; }
.verification-dialog button:focus-visible { outline: 2px solid var(--accent, #0065df); outline-offset: 3px; }
@media (hover: hover) {
  .verification-dialog button:not(:disabled):hover { filter: brightness(.96); }
  .verification-dialog label:has(input:not(:disabled)):hover { background: var(--surface-2, #f2f7fc); }
}
@media (max-width: 380px) { .verification-dialog { padding: 20px 16px; } }
@media (forced-colors: active) {
  .verification-dialog label:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
  .verification-dialog button:disabled { opacity: 1; color: GrayText !important; }
}

/* ==== teacher-remediation.css ==== */
.teacher-remediation-mask {
  padding: 12px;
  overflow: auto;
}
.teacher-remediation-dialog {
  width: min(100%, 620px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 20px;
  margin: auto;
  box-sizing: border-box;
}
.teacher-remediation-dialog h2 { font-size: 20px; margin: 0; letter-spacing: 0; }
.teacher-remediation-dialog header,
.teacher-remediation-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.teacher-remediation-dialog footer { flex-wrap: wrap; margin-top: 16px; }
.teacher-remediation-dialog fieldset { min-width: 0; border: 0; padding: 0; margin: 16px 0; }
.teacher-remediation-dialog legend { font-weight: 700; margin-bottom: 12px; }
.teacher-remediation-dialog label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.teacher-remediation-dialog label:has(input[type="search"]) { display: grid; margin-top: 12px; }
.teacher-remediation-dialog input[type="search"] { width: 100%; min-width: 0; font-size: 16px; min-height: 44px; box-sizing: border-box; }
.teacher-remediation-dialog input[type="checkbox"],
.teacher-remediation-dialog input[type="radio"] { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; }
.teacher-remediation-roster { max-height: 240px; overflow: auto; border-block: 1px solid var(--hairline); }
.teacher-remediation-roster label { min-height: 48px; padding: 8px 2px; border-bottom: 1px solid var(--hairline); }
.teacher-remediation-roster label[hidden] { display: none; }
.teacher-remediation-roster small { display: block; }
.teacher-remediation-dialog :is(p, span, small, button),
#view-teacher :is(.teacher-remediation-summary, .teacher-remediation-followup, .teacher-remediation-evidence) {
  min-width: 0;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}
.teacher-remediation-dialog :is(button, .inline-actions label) { min-height: 44px; white-space: normal; }
#view-teacher .teacher-remediation-summary { border-block: 1px solid var(--hairline); padding-block: 12px; }
#view-teacher :is(.teacher-remediation-summary, .teacher-remediation-evidence, .teacher-remediation-followup) h4 { font-size: 16px; margin: 12px 0 8px; }
#view-teacher [data-teacher-remediation] { min-height: 44px; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.teacher-remediation-dialog :focus-visible,
#view-teacher :is([data-remediation-edit], [data-remediation-result], [data-teacher-remediation]):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 460px) {
  .teacher-remediation-dialog { padding: 14px; }
  .teacher-remediation-dialog footer :is(.primary-action, .secondary-action) { width: auto; flex: 1 1 100px; }
}

/* ==== listening-activity.css ==== */
/* Listening page (5.10.3 calm UI): hard segments, record-sync choices and the docked player.
   Phone = max-width 767px (design-system breakpoint). Desktop/tablet keep the hard-segment panel.
   Loads after academy-theme.css, so player overrides live here instead of there. */

/* ---------- Hard segments + record sync ---------- */
#view-listen .listen-activity {
  padding: 14px 18px;
  margin: 12px 0;
  border: 1px solid var(--ds-card-edge, var(--hairline));
  border-radius: var(--ds-r-card, 12px);
  color: var(--ink);
  background: var(--ds-card, var(--surface));
  min-width: 0;
  letter-spacing: 0;
}
#view-listen .listen-activity > :not(.listen-activity-track) { max-width: 760px; }
/* One plain line says what the button does (no hover-only tooltip), the button sits beside it. */
#view-listen .listen-activity-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
#view-listen .listen-activity-head .listen-activity-note { flex: 1 1 260px; margin: 0; }
/* Inside the card frame one divider above each block is enough (no hairline at the card's bottom edge). */
#view-listen :is(.listen-activity-conflict, .listen-activity-copies) {
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
  margin-block: 12px 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.6;
}
#view-listen .listen-activity h4 { margin: 12px 0 6px; font-size: 15px; }
#view-listen .listen-activity-copies summary { min-height: 44px; cursor: pointer; }
#view-listen .listen-activity-copies summary:focus-visible { outline: 2px solid var(--accent); }
#view-listen .listen-activity-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
#view-listen .listen-activity :is(p, strong, button) { overflow-wrap: anywhere; }
#view-listen .listen-activity :is(button, .listen-activity-status) {
  scroll-margin-block-start: 80px;
  scroll-margin-block-end: calc(var(--academy-player-clearance, 200px) + 24px);
}
#view-listen .listen-activity-note {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0;
}
#view-listen .listen-activity-status {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
  margin: 8px 0 0;
}
/* Stays in the accessibility tree for announcements, but takes no room while silent. */
#view-listen .listen-activity-status:empty { margin: 0; }
#view-listen .listen-bookmarks { padding: 0; margin: 10px 0 0; list-style: none; }
#view-listen .listen-bookmarks li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
#view-listen .listen-bookmarks li > div { display: flex; gap: 8px; }
#view-listen .listen-activity button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  max-width: 100%;
  padding: 6px 14px;
  white-space: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink) !important;
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 999px !important;
}
#view-listen .listen-activity button:hover:not(:disabled) { background: var(--accent-soft) !important; }
#view-listen .listen-activity button:disabled { opacity: .55; cursor: not-allowed; }
#view-listen .listen-activity button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Player (all widths) ---------- */
/* Small player buttons share the pill shape of every other small button. */
html[data-visual-world] #view-listen .academy-player .listen-ctl-btn { border-radius: 999px !important; }
/* The one-key A-B cycle is the phone control; desktop/tablet keep 设 A 点 / 设 B 点 / 取消复读. */
#view-listen [data-listen-ab="cycle"] { display: none !important; }
#view-listen .listen-finish-short { display: none; }
/* 今日听力打卡: "返回学习中心" keeps its own width (styles.css stretches .secondary-action at <=460px). */
#view-listen #listenFocusBack { width: auto !important; }

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  /* The panel folds away; app.js sets data-attention="1" while a record needs the student
     (conflict, unsent local record, storage blocked). Only the sync part shows then. */
  #view-listen .listen-activity:not([data-attention="1"]) { display: none !important; }
  #view-listen .listen-activity :is(.listen-activity-track, .listen-activity-copies) { display: none !important; }
  #view-listen .listen-activity-actions button { flex: 1 1 180px; }

  /* Player: title on one line, the transport, one A-B key. Hardware keys cover volume. */
  #view-listen :is(.academy-volume, .academy-volume-range, .listen-ab-hint, [data-listen-finish="reading"]) { display: none !important; }
  #view-listen .listen-ab :is(.listen-ctl-label, [data-listen-ab]:not([data-listen-ab="cycle"])) { display: none !important; }
  #view-listen .listen-ab [data-listen-ab="cycle"] { display: inline-flex !important; align-items: center; justify-content: center; }
  #view-listen .listen-player-copy { padding-left: 0 !important; min-height: 0 !important; }
  #view-listen .listen-player-copy::before { content: none !important; }
  #view-listen .listen-player-copy p { display: none !important; }
  #view-listen .listen-player-copy h3 {
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal !important;
  }
  /* "--:--" (duration not loaded yet / load failed) must not break across two lines. */
  #view-listen .academy-timeline > span { white-space: nowrap; }
  #view-listen .listen-finish-long { display: none; }
  #view-listen .listen-finish-short { display: inline; }
  /* "已播完" is short: keep it on the same row as 再听一遍 / 播放下一条 (member-center.css gives it a full row). */
  #view-listen .listen-finish-hint > span { flex-basis: auto; }
}
@media (max-width: 600px) {
  /* Single-column dock: the A-B key sits beside the title, not on a row of its own.
     Grid placement only; nothing is moved into .academy-audio-ui (academy-ui.js removes it on error). */
  html[data-visual-world] #view-listen .academy-player { grid-template-columns: minmax(0, 1fr) auto; }
  html[data-visual-world] #view-listen .academy-player .listen-player-copy { grid-column: 1; grid-row: 1; align-self: center; }
  html[data-visual-world] #view-listen .academy-player .listen-custom-controls { grid-column: 2 !important; grid-row: 1; align-self: center; }
  html[data-visual-world] #view-listen .academy-player .listen-ab { width: auto; }
  html[data-visual-world] #view-listen .academy-player .academy-audio-ui { grid-column: 1 / -1; }
  /* Room freed by the mute key: "0.75×" / "1.25×" fit beside the select arrow. */
  html[data-visual-world] #view-listen .academy-speed-select { width: 86px; }
}

/* ==== navigation-ux.css ==== */
/* Behavior guards; control placement and appearance belong to the Academy skin. */
html[data-visual-world="academy"] #appShell .topbar .search-box[hidden],
html[data-visual-world="academy"] #appShell .topbar .academy-search-toggle[hidden],
html[data-visual-world="academy"] #appShell .topbar .academy-search-close[hidden] {
  display: none !important;
}

#view-today > .phone-reminder {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (max-width: 900px) {
  body[data-view="reading"].cv-read-detail #view-reading .reading-detail > [data-cv-read-back] {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 3;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    white-space: normal;
    background: var(--surface) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 8px;
  }
}