/* 部署时由 tools/bundle-css.cjs 按 index.html 原顺序合并，源文件：home-workspaces.css, academy-panorama.css, dot-companion.css, dot-learning-shell.css, student-startup.css, ux-refresh.css, aivia-ds.css, mobile-minimal.css, reading-library.css */
/* ==== home-workspaces.css ==== */
/* Class homepage: four learning workspaces and two quiet companion tools. */
html[data-visual-world="academy"] #view-today.active:has(.home-workspaces) {
  display: block !important; max-width: none !important; width: 100%; min-width: 0;
}
html[data-visual-world="academy"] #view-today:has(.home-workspaces) :is(.today-focus-layout,.today-plan-card,.today-plan-card > .task-list) {
  display: block !important; width: 100%; max-width: none !important; min-width: 0;
  padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html[data-visual-world="academy"] .home-workspaces { display: grid; gap: 20px !important; min-width: 0; }
html[data-visual-world="academy"] .home-overview-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px;
  padding: 0 0 20px; border-bottom: 1px solid var(--hairline);
}
html[data-visual-world="academy"] .home-completion { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: 13px; }
html[data-visual-world="academy"] .home-completion .home-refresh-icon-action {
  display: grid; place-items: center; flex: none; width: 44px !important; min-width: 44px !important; height: 44px !important;
  min-height: 44px !important; padding: 10px !important; margin: 0 !important; border: 0 !important;
  border-radius: 8px !important; background: transparent !important; color: var(--muted); box-shadow: none !important;
}
html[data-visual-world="academy"] .home-completion .home-refresh-icon-action:is(:hover,:focus-visible) { background: var(--surface-2) !important; color: var(--accent-ink); }
html[data-visual-world="academy"] .home-completion strong { color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
html[data-visual-world="academy"] .home-completion b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 4px; }
html[data-visual-world="academy"] .home-overview-bar .home-main-cta {
  width: auto !important; max-width: 100%; min-height: 44px; margin: 0 !important; padding: 10px 16px !important;
  border-radius: 8px !important; font-size: 14px !important; white-space: normal; overflow-wrap: anywhere;
}
html[data-visual-world="academy"] .home-overview-bar .home-cta-sub { font-size: 11px !important; max-width: 30ch; white-space: normal; }
html[data-visual-world="academy"] .home-overview-bar .home-member-quota {
  margin: 0 0 0 auto !important; padding: 0 !important; flex: 0 1 320px; min-width: 0;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html[data-visual-world="academy"] .home-overview-bar .home-member-quota-head { padding: 6px 0 !important; min-height: 48px; gap: 10px; }
html[data-visual-world="academy"] .home-overview-bar .home-member-mark { width: 36px; height: 36px; border-radius: 8px; }
html[data-visual-world="academy"] .home-overview-bar .home-member-quota-more { font-size: 12px; }
.home-refresh-label { display: none; }
@media (min-width:1181px) {
  html[data-visual-world="academy"] .home-overview-bar { column-gap: 20px; }
  html[data-visual-world="academy"] .home-completion .home-refresh-icon-action {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: auto !important; min-width: 88px !important; padding: 8px 12px !important;
    border: 1px solid var(--hairline) !important; background: var(--surface) !important;
    color: var(--ink-2); font-size: 13px !important; font-weight: 600; white-space: nowrap;
  }
  html[data-visual-world="academy"] .home-completion .home-refresh-label { display: inline; }
  html[data-visual-world="academy"] .home-completion .home-refresh-icon-action > svg { width: 16px; height: 16px; }
  html[data-visual-world="academy"] .home-overview-bar .home-member-quota { margin-left: 0 !important; flex: 0 1 232px !important; }
  html[data-visual-world="academy"] .home-overview-bar .home-member-quota-head {
    display: grid; grid-template-columns: 20px minmax(0,1fr) 14px; gap: 10px;
    padding: 7px 12px !important; min-height: 44px; border: 1px solid var(--hairline) !important;
    border-radius: 8px; background: var(--surface) !important;
  }
  html[data-visual-world="academy"] .home-overview-bar .home-member-quota-head:is(:hover,:focus-visible) { background: var(--surface-2) !important; }
  html[data-visual-world="academy"] .home-overview-bar .home-member-mark { width: 20px; height: 20px; background: transparent !important; }
  html[data-visual-world="academy"] .home-overview-bar .home-member-mark > svg { width: 20px; height: 20px; }
  html[data-visual-world="academy"] .home-overview-bar .home-member-plan strong { font-size: 12px; line-height: 1.35; }
  html[data-visual-world="academy"] .home-overview-bar .home-member-plan .quota-summary { white-space: normal; overflow: visible; overflow-wrap: anywhere; font-size: 10.5px; }
  html[data-visual-world="academy"] .home-overview-bar .home-member-quota-more { font-size: 0; }
  html[data-visual-world="academy"] .home-overview-bar .home-member-quota-more > svg { width: 14px; height: 14px; }
}
html[data-visual-world="academy"] .home-workspace-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(240px,.85fr);
  grid-template-areas: "vocab listen review" "reading writing records";
  align-items: stretch; gap: 20px; min-width: 0;
}
html[data-visual-world="academy"] .home-workspace {
  min-width: 0; padding: 20px !important; margin: 0 !important; border: 1px solid var(--hairline) !important;
  border-radius: 8px !important; background: var(--surface) !important; box-shadow: none !important;
  display: flex; flex-direction: column;
}
html[data-visual-world="academy"] .home-workspace-vocab { grid-area: vocab; }
html[data-visual-world="academy"] .home-workspace-listen { grid-area: listen; }
html[data-visual-world="academy"] .home-workspace-reading { grid-area: reading; }
html[data-visual-world="academy"] .home-workspace-writing { grid-area: writing; }
html[data-visual-world="academy"] .home-workspace-review { grid-area: review; }
html[data-visual-world="academy"] .home-workspace-records { grid-area: records; }
html[data-visual-world="academy"] :is(.home-workspace-review,.home-workspace-records) { background: color-mix(in srgb,var(--surface) 65%,var(--surface-2)) !important; }
html[data-visual-world="academy"] .home-workspace-head { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 16px; }
html[data-visual-world="academy"] .home-workspace-head > div { flex: 1; min-width: 0; }
html[data-visual-world="academy"] .home-workspace-head h2 { font-size: 18px !important; line-height: 1.4; color: var(--ink); font-weight: 750; margin: 0; letter-spacing: 0; }
html[data-visual-world="academy"] .home-workspace-head small { display: block; font-size: 12px; margin-top: 3px; color: var(--muted); overflow-wrap: anywhere; }
html[data-visual-world="academy"] .home-workspace-head .icon-button { margin-left: auto; width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 10px !important; background: transparent !important; border: 0 !important; color: var(--muted); }
html[data-visual-world="academy"] .home-workspace-head .icon-button:is(:hover,:focus-visible) { background: var(--surface-2) !important; color: var(--accent-ink); }
html[data-visual-world="academy"] .home-workspace-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; background: var(--surface-2); color: var(--accent-ink); }
html[data-visual-world="academy"] .home-workspace-tasks { display: flex !important; flex-direction: column; gap: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; flex: 1; }
html[data-visual-world="academy"] .home-workspace .home-check-row {
  display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 12px !important;
  align-items: center !important; padding: 16px 0 !important; margin: 0 !important;
  border: 0 !important; border-top: 1px solid var(--hairline) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; min-height: 110px;
}
html[data-visual-world="academy"] .home-workspace .home-check-row :is(.home-check-dot,.task-icon) { display: none !important; }
html[data-visual-world="academy"] .home-workspace :is(.home-check-main,.daily-checkin-main) { display: flex !important; flex-direction: column; align-items: flex-start; min-width: 0; gap: 6px !important; grid-column: 1; }
html[data-visual-world="academy"] .home-workspace :is(.home-check-main,.daily-checkin-main) > strong { font-size: 15px !important; line-height: 1.55; color: var(--ink) !important; overflow-wrap: anywhere; white-space: normal !important; }
html[data-visual-world="academy"] .home-workspace :is(.home-check-main > small,.dc-explain,.dc-meta) { font-size: 12px !important; line-height: 1.6; color: var(--muted) !important; white-space: normal !important; overflow-wrap: anywhere; }
/* Tablet and desktop only: phones keep refine.css's compact check-in card (mobile-minimal.css section B). */
@media (min-width: 768px) {
  html[data-visual-world="academy"] .home-workspace .dc-explain { display: block !important; }
  html[data-visual-world="academy"] .home-workspace .dc-meta-extra { display: inline !important; }
}
html[data-visual-world="academy"] .home-task-kind { display: inline-flex; font-size: 11px; font-weight: 700; line-height: 1.6; color: var(--accent-ink); background: var(--surface-2); padding: 2px 7px; border-radius: 4px; }
html[data-visual-world="academy"] .home-task-kind.is-checkin { color: var(--green-ink,var(--accent-ink)); }
html[data-visual-world="academy"] .home-workspace .task-entry-action {
  display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto;
  min-height: 44px !important; min-width: 52px !important; width: auto !important; max-width: 100%; padding: 8px 12px !important;
  border-radius: 6px !important; font-size: 13px !important; white-space: nowrap;
}
html[data-visual-world="academy"] .home-workspace .task-entry-action.is-primary { background: var(--surface-2) !important; color: var(--accent-ink) !important; border: 1px solid var(--hairline) !important; box-shadow: none !important; }
html[data-visual-world="academy"] .home-workspace .daily-checkin-multi { grid-template-columns: minmax(0,1fr) !important; }
html[data-visual-world="academy"] .home-workspace .dc-subtasks { width: 100%; margin: 6px 0 0; }
html[data-visual-world="academy"] .home-workspace .dc-subtask { display: grid; grid-template-columns: 16px minmax(0,1fr) auto; gap: 8px; padding: 8px 0; }
html[data-visual-world="academy"] .home-workspace .dc-subtask-title { min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 13px; }
html[data-visual-world="academy"] .home-workspace .dc-status-line { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-visual-world="academy"] .home-workspace .daily-mini-progress { width: 100%; height: 4px; margin: 3px 0 0; }
html[data-visual-world="academy"] .home-workspace-empty { display: grid; justify-items: start; align-content: center; flex: 1; min-height: 124px; padding: 16px 0; border-top: 1px solid var(--hairline); gap: 12px; }
html[data-visual-world="academy"] .home-workspace-empty p { margin: 0; color: var(--muted); font-size: 13px; }
html[data-visual-world="academy"] .home-workspace-empty button { display: inline-flex; align-items: center; gap: 8px; width: auto !important; min-height: 44px; padding: 8px 12px !important; font-size: 13px !important; color: var(--accent-ink) !important; background: var(--surface-2) !important; border-color: transparent !important; }
html[data-visual-world="academy"] .home-review-slot .cv-home-rail { display: block !important; position: static !important; width: 100%; padding: 0; margin: 0; }
html[data-visual-world="academy"] .home-workspace .cv-rail-card { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
html[data-visual-world="academy"] .home-workspace .cv-rail-eyebrow { color: var(--ink) !important; font-size: 16px !important; letter-spacing: 0 !important; min-height: 40px; margin: 0 0 16px; }
html[data-visual-world="academy"] .home-workspace .cv-rail-review .cv-rail-eyebrow { font-size: 18px !important; gap: 12px; }
html[data-visual-world="academy"] .home-workspace .cv-rail-review .cv-rail-eyebrow > svg { box-sizing: border-box; width: 40px; height: 40px; flex: 0 0 40px; padding: 10px; border-radius: 8px; background: var(--surface-2); color: var(--accent-ink); }
html[data-visual-world="academy"] .home-workspace .cv-rev-word { font-size: 28px; }
html[data-visual-world="academy"] .home-workspace .cv-rev-inner { display: grid; min-height: 172px; }
/* WebKit can paint both transparent grid faces despite backface-visibility.
   Keep both faces in layout for a stable height, but reveal exactly one face
   using the existing button state instead of relying on a 3D compositor. */
html[data-visual-world="academy"] .home-workspace .cv-rev-card .cv-rev-inner { transform: none; transform-style: flat; -webkit-transform-style: flat; transition: none; }
html[data-visual-world="academy"] .home-workspace .home-review-body { display: flex; flex-direction: column; gap: 8px; }
html[data-visual-world="academy"] .home-workspace .cv-rev-card { flex: 1 0 auto; display: grid; align-items: center; width: 100%; min-width: 0; }
html[data-visual-world="academy"] .home-workspace .cv-rev-actions { margin-top: auto; padding-top: 8px; flex: 0 0 auto; }
html[data-visual-world="academy"] .home-workspace .cv-rev-face { position: relative; grid-area: 1 / 1; border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 14px 0; transform: none; visibility: hidden; }
html[data-visual-world="academy"] .home-workspace .cv-rev-card:not(.revealed) .cv-rev-face-front,
html[data-visual-world="academy"] .home-workspace .cv-rev-card.revealed .cv-rev-face-back { visibility: visible; }
html[data-visual-world="academy"] .home-workspace .cv-rev-ex { display: block; overflow: visible; -webkit-line-clamp: unset; font-size: 13px; }
html[data-visual-world="academy"] .home-workspace .cv-rev-btn { min-width: 0; min-height: 44px; border-radius: 6px !important; padding: 8px; }
html[data-visual-world="academy"] .home-workspace .cv-rev-go { color: var(--accent-ink) !important; background: var(--surface-2) !important; border: 1px solid var(--hairline) !important; }
html[data-visual-world="academy"] .home-workspace .cv-streak-big { margin: 0 0 8px; }
html[data-visual-world="academy"] .home-workspace .cv-rail-streak .cv-rail-eyebrow { min-height: 0; margin: 0 0 8px; font-size: 12px !important; color: var(--muted) !important; }
html[data-visual-world="academy"] .home-workspace .cv-streak-sub { overflow-wrap: anywhere; font-size: 12px; }
.cv-streak-totals { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 12px; }
.cv-streak-totals > div { display: flex; flex-direction: column; gap: 2px; }
.cv-streak-totals span { font-size: 12px; color: var(--muted); }
.cv-streak-totals strong { font-size: 20px; line-height: 1.4; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.cv-streak-totals small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 4px; }
html[data-visual-world="academy"] .home-workspace .cv-rail-streak .cv-rail-eyebrow { display: none; }
html[data-visual-world="academy"] .home-record-links { display: grid; margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--hairline); gap: 2px; }
html[data-visual-world="academy"] .home-self-records { width: 100%; min-width: 0; }
html[data-visual-world="academy"] .home-record-links button { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 44px; padding: 8px 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink-2); text-align: left; font-size: 13px; }
html[data-visual-world="academy"] .home-record-links button span { flex: 1; }
html[data-visual-world="academy"] .home-record-links button:hover { color: var(--accent-ink); background: var(--surface-2); }
html[data-visual-world="academy"] .home-workspace-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 13px; }
html[data-visual-world="academy"] .home-workspace .feedback { padding: 8px 0 !important; font-size: 12px; background: transparent !important; }
html[data-visual-world="academy"].academy-theme-changing :is(.home-workspace,.home-workspace-icon,.home-task-kind,.home-record-links button) { transition: background-color .55s ease, border-color .55s ease, color .55s ease !important; }
@media (max-width: 1320px) {
  html[data-visual-world="academy"] .home-workspace-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: "vocab listen" "reading writing" "review records"; }
  html[data-visual-world="academy"] .home-overview-bar .home-member-quota { flex-basis: 280px; }
}
/* Only desktop panes scroll independently; touch layouts keep the full task list in page flow. */
@media screen and (min-width: 1181px) {
  html[data-visual-world="academy"] .home-workspace {
    height: clamp(324px, 34vh, 360px); min-height: 0; box-sizing: border-box;
  }
  html[data-visual-world="academy"] .home-workspace-grid.is-quiet .home-workspace { height: 324px; }
  html[data-visual-world="academy"] .home-workspace-head,
  html[data-visual-world="academy"] .home-workspace .cv-rail-review > .cv-rail-eyebrow { flex: 0 0 auto; min-height: 46px; }
  html[data-visual-world="academy"] .home-workspace [data-home-scroll] {
    flex: 1; min-height: 0; min-width: 0; overflow-y: auto;
    overscroll-behavior-y: contain; scrollbar-gutter: stable;
    scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
    padding-right: 8px !important;
  }
  html[data-visual-world="academy"] .home-workspace-tasks > * { flex-shrink: 0; }
  html[data-visual-world="academy"] .home-review-slot,
  html[data-visual-world="academy"] .home-review-slot .cv-home-rail { height: 100%; min-height: 0; }
  html[data-visual-world="academy"] .home-workspace .cv-rail-review { height: 100%; min-height: 0; display: flex; flex-direction: column; }
}
@media (max-width: 680px) {
  html[data-visual-world="academy"] .home-workspaces { gap: 16px !important; }
  html[data-visual-world="academy"] .home-workspace-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "vocab" "listen" "reading" "writing" "review" "records"; gap: 14px; }
  html[data-visual-world="academy"] .home-workspace { padding: 16px !important; }
  html[data-visual-world="academy"] .home-overview-bar { gap: 12px; padding-bottom: 16px; }
  html[data-visual-world="academy"] .home-completion { width: 100%; gap: 4px 12px; font-size: 12px; }
  html[data-visual-world="academy"] .home-completion b { font-size: 18px; margin-left: 2px; }
  html[data-visual-world="academy"] .home-completion .home-refresh-icon-action { margin-left: auto !important; }
  html[data-visual-world="academy"] .home-overview-bar .home-main-cta { width: 100% !important; }
  html[data-visual-world="academy"] .home-overview-bar .home-member-quota { flex: 1 1 100%; margin: 0 !important; }
  html[data-visual-world="academy"] .home-workspace-empty { min-height: 0; padding: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
  html[data-visual-world="academy"] .home-workspace-empty p { flex: 1 1 150px; }
  html[data-visual-world="academy"] .home-workspace .cv-rev-inner { min-height: 132px; }
  html[data-visual-world="academy"] .home-workspace .cv-rail-eyebrow { margin-bottom: 8px; }
  html[data-visual-world="academy"] .home-overview-bar .home-member-quota-head { min-height: 44px; padding-block: 0 !important; }
  html[data-visual-world="academy"] .home-overview-bar .home-member-plan .quota-summary { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  html[data-visual-world="academy"] .home-workspace-head { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-visual-world="academy"].academy-theme-changing :is(.home-workspace,.home-workspace-icon,.home-task-kind,.home-record-links button) { transition: none !important; }
}

/* ==== academy-panorama.css ==== */
/* Plan A: scenery lives behind the workspace and never determines its height. */
html[data-visual-world="academy"] {
  --panorama-day: url("assets/academy/panorama/campus-day-v1.webp");
  --panorama-night: url("assets/academy/panorama/campus-night-v1.webp");
  --panorama-day-rgb: 237 247 250;
  --panorama-night-rgb: 27 34 39;
  --panorama-position: center top;
}
html[data-visual-world="academy"][data-skin="warm"] {
  --panorama-day: url("assets/academy/panorama/warm-day-v1.webp");
  --panorama-night: url("assets/academy/panorama/warm-night-v1.webp");
  --panorama-day-rgb: 246 234 211;
  --panorama-night-rgb: 36 35 33;
}
html[data-visual-world="academy"] body::before,
html[data-visual-world="academy"][data-skin="warm"] body::before {
  background: linear-gradient(rgb(var(--panorama-day-rgb) / 96%) 0,rgb(var(--panorama-day-rgb) / 68%) 160px,transparent 420px),linear-gradient(90deg,rgb(var(--panorama-day-rgb) / 72%),rgb(var(--panorama-day-rgb) / 93%) 20%,rgb(var(--panorama-day-rgb) / 93%) 86%,rgb(var(--panorama-day-rgb) / 72%)),var(--panorama-day) var(--panorama-position) / cover no-repeat !important;
}
html[data-visual-world="academy"] .academy-night-canvas {
  background: linear-gradient(rgb(var(--panorama-night-rgb) / 96%) 0,rgb(var(--panorama-night-rgb) / 68%) 160px,transparent 420px),linear-gradient(90deg,rgb(var(--panorama-night-rgb) / 72%),rgb(var(--panorama-night-rgb) / 93%) 20%,rgb(var(--panorama-night-rgb) / 93%) 86%,rgb(var(--panorama-night-rgb) / 72%)),var(--panorama-night) var(--panorama-position) / cover no-repeat !important;
}
/* Remove the separate corner scenes, including the self-study masthead. */
html[data-visual-world="academy"] body[data-view] #appShell .main .topbar::before,
html[data-visual-world="academy"] body[data-view] #appShell .main .topbar::after,
html[data-visual-world="academy"] #appShell .home-greeting-strip::before,
html[data-visual-world="academy"] #appShell .home-greeting-strip::after { content: none !important; }
html[data-visual-world="academy"] #appShell .main { gap: 16px !important; }
@media (min-width:901px) {
  /* The status notice is an optional third row, not the flexible reading pane. */
  html[data-visual-world="academy"] body[data-view="reading"] #appShell .main:has(.reading-shell):has(> #accountMembershipStatus:not(.is-pending)) {
    grid-template-rows: auto auto minmax(0,1fr);
  }
}
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)),
html[data-visual-world="academy"] body[data-view="today"] #appShell .main .topbar:not(:has(.academy-home-masthead:not(:empty))) {
  min-height: 148px !important;
  height: auto !important;
  align-self: start;
  align-content: start;
  padding-block: 20px 0 !important;
  row-gap: 0 !important;
}
html[data-visual-world="academy"] #appShell .academy-home-masthead:empty { display: none; }
html[data-visual-world="academy"] #appShell .academy-home-masthead:not(:empty) { margin-top: 8px; }
/* The same panorama is reframed here so its landmarks survive the full-screen crop. */
html[data-visual-world="academy"] .academy-header-scene {
  position: fixed; top: 48px; right: max(0px,calc((100vw - 1760px) / 2)); width: min(62%,480px); height: 192px;
  opacity: var(--scenery-scroll-opacity,1);
  overflow: hidden; pointer-events: none; z-index: -1; contain: layout paint;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 52%,#000 92%,transparent),linear-gradient(transparent,#000 12%,#000 50%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 52%,#000 92%,transparent),linear-gradient(transparent,#000 12%,#000 50%,transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
html[data-visual-world="academy"] body[data-view] #appShell .main .topbar { z-index: auto !important; }
/* Frost only the small header controls; text and learning surfaces stay opaque. */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  html[data-visual-world="academy"] #appShell .topbar :is(#menuToggle,#themeToggle,.academy-search-toggle,.academy-search-close,.search-box) {
    background: color-mix(in srgb,var(--surface) 74%,transparent) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: none !important;
  }
  html[data-visual-world="academy"] #appShell .topbar :is(#menuToggle,#themeToggle,.academy-search-toggle,.academy-search-close,.search-box):is(:hover,:focus-within) {
    background: color-mix(in srgb,var(--surface) 92%,transparent) !important;
  }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  html[data-visual-world="academy"] #appShell .topbar :is(#menuToggle,#themeToggle,.academy-search-toggle,.academy-search-close,.search-box) {
    background: var(--surface) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
html[data-visual-world="academy"] .academy-scene-layer {
  position: absolute; inset: 0 0 auto; aspect-ratio: 3 / 2;
  background: var(--panorama-day) center top / 100% 100% no-repeat;
  opacity: 1; transition: opacity var(--academy-theme-time) var(--academy-theme-ease);
}
html[data-visual-world="academy"] .academy-scene-layer.is-night { background-image: var(--panorama-night); opacity: 0; }
html[data-visual-world="academy"].cv-dark .academy-scene-layer.is-day { opacity: 0; }
html[data-visual-world="academy"].cv-dark .academy-scene-layer.is-night { opacity: 1; }
/* Only the water texture moves; buildings, typography and controls remain stationary. */
html[data-visual-world="academy"] .academy-scene-detail {
  position: absolute; inset: 0; background: inherit;
  clip-path: polygon(17% 54%,87% 55%,93% 68%,72% 82%,30% 78%,11% 65%);
  filter: brightness(1.35); opacity: .15; transform-origin: 60% 60%;
  animation: academy-water-light 6s ease-in-out infinite alternate;
  animation-play-state: paused;
}
html[data-visual-world="academy"][data-skin="warm"] .academy-scene-detail {
  clip-path: polygon(57% 18%,64% 18%,64% 32%,57% 32%);
  filter: brightness(1.55); transform: none;
  animation-name: academy-library-light; animation-duration: 12s;
}
html[data-visual-world="academy"][data-skin="warm"] .is-day .academy-scene-detail { display: none; }
html[data-visual-world="academy"] .academy-scenery.is-playing .is-day .academy-scene-detail,
html[data-visual-world="academy"].cv-dark .academy-scenery.is-playing .is-night .academy-scene-detail { animation-play-state: running; }
html[data-visual-world="academy"].cv-dark .academy-scenery .is-day .academy-scene-detail { animation-play-state: paused; }
@keyframes academy-water-light {
  from { opacity: .12; transform: translateX(-1px) scaleX(1.002); }
  to { opacity: .58; transform: translateX(1px) scaleX(1.006); }
}
@keyframes academy-library-light { from { opacity: .08; } to { opacity: .4; } }
/* Password, registration and recovery use copper; WeChat retains its brand green. */
html[data-visual-world="academy"][data-skin="warm"] #authScreen {
  --academy-action: #914624; --academy-action-hover: #79391d;
}
html[data-visual-world="academy"][data-skin="warm"].cv-dark #authScreen {
  --academy-action: #a6532d; --academy-action-hover: #b65b31;
}
html[data-visual-world="academy"][data-skin="warm"] #authScreen .primary-action:not(.wechat-action) {
  background: var(--academy-action) !important;
}
html[data-visual-world="academy"][data-skin="warm"] #authScreen .primary-action:not(.wechat-action):not(.loading) { color: #fff !important; }
@media (hover:hover) {
  html[data-visual-world="academy"][data-skin="warm"] #authScreen .primary-action:not(.wechat-action):not(:disabled):hover { background: var(--academy-action-hover) !important; }
}
/* Paired photographs keep people still while the lighting crossfades. */
html[data-visual-world="academy"] #authScreen {
  position: relative; isolation: isolate; background: transparent !important;
  --panorama-day: url("assets/academy/login/campus-day-v1.webp");
  --panorama-night: url("assets/academy/login/campus-night-v1.webp");
}
html[data-visual-world="academy"][data-skin="warm"] #authScreen {
  --panorama-day: url("assets/academy/login/library-day-v1.webp");
  --panorama-night: url("assets/academy/login/library-night-v1.webp");
}
html[data-visual-world="academy"] .academy-auth-scene {
  position: fixed; inset: 0; overflow: hidden; z-index: -1;
  pointer-events: none; contain: layout paint;
}
html[data-visual-world="academy"] .academy-auth-scene > .academy-scene-layer {
  width: max(100%,177.78vh); height: auto; left: 50%; right: auto;
  transform: translateX(-50%); aspect-ratio: 1672 / 941;
}
html[data-visual-world="academy"] .academy-auth-scene::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,rgb(8 18 28 / 44%),transparent 58%),linear-gradient(90deg,rgb(8 18 28 / 32%),transparent 56%);
  pointer-events: none;
}
html[data-visual-world="academy"] #authScreen .auth-story .academy-welcome-art { display: none !important; }
html[data-visual-world="academy"] #authScreen .auth-story :is(.brand strong,.brand span,.auth-story-copy h1,.auth-story-copy p) {
  color: #fff !important; text-shadow: 0 2px 12px rgb(0 0 0 / 35%);
}
html[data-visual-world="academy"] #authScreen .auth-story { gap: 28px !important; }
html[data-visual-world="academy"] #authScreen .auth-card {
  background: var(--surface) !important;
  border: 0 !important;
  box-shadow: 0 16px 48px rgb(14 28 40 / 16%) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-visual-world="academy"] #authScreen .auth-companions,
html[data-visual-world="academy"] #authScreen .auth-companions canvas {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html[data-visual-world="academy"] .academy-auth-scene .academy-scene-detail {
  clip-path: polygon(72% 64%,100% 65%,100% 69%,76% 67%);
}
html[data-visual-world="academy"][data-skin="warm"] .academy-auth-scene .academy-scene-detail {
  clip-path: polygon(42% 62%,54% 62%,70% 100%,25% 100%);
  filter: brightness(1.2); animation-duration: 8s;
}
html[data-visual-world="academy"] #authScreen .auth-public-footer {
  background: color-mix(in srgb,var(--surface) 94%,transparent) !important;
}
html[data-visual-world="academy"] #workspaceLevel :is(.learning-level,.workspace-class-context) {
  color: var(--ink-2); font-size: 15px; font-weight: 600;
}
html[data-visual-world="academy"] #workspaceLevel :is(.learning-level,.workspace-class-context) > strong { font-size: 16px; font-weight: 750; color: var(--ink); }
html[data-visual-world="academy"] .home-completion {
  align-items: baseline; gap: 8px 16px; font-size: 15px; font-weight: 600;
  color: var(--ink-2); line-height: 1.5;
}
html[data-visual-world="academy"] .home-completion strong { font-size: 15px; font-weight: 600; line-height: inherit; }
html[data-visual-world="academy"] .home-completion b { font-size: 22px; line-height: 1.2; }
html[data-visual-world="academy"] .home-completion .home-refresh-icon-action { align-self: center; }
html[data-visual-world="academy"] .home-overview-bar { gap: 12px 24px; padding-bottom: 16px; }
/* The fixed panorama owns the reading veil, so view boundaries never cut it off. */
html[data-visual-world="academy"] #appShell .main > .view {
  background: transparent !important;
}
html[data-visual-world="academy"] #appShell .sidebar {
  background: color-mix(in srgb,var(--surface) 94%,transparent) !important;
}
html[data-visual-world="academy"].academy-theme-changing #appShell :is(.main > .view,.home-workspace,.home-workspace-icon) {
  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-skin-picker [data-skin-select="campus"]::before { background-image: url("assets/academy/panorama/campus-day-small-v1.webp"); }
html[data-visual-world="academy"] .academy-skin-picker [data-skin-select="warm"]::before { background-image: url("assets/academy/panorama/warm-day-small-v1.webp"); }
html[data-visual-world="academy"].cv-dark .academy-skin-picker [data-skin-select="campus"]::before { background-image: url("assets/academy/panorama/campus-night-small-v1.webp"); }
html[data-visual-world="academy"].cv-dark .academy-skin-picker [data-skin-select="warm"]::before { background-image: url("assets/academy/panorama/warm-night-small-v1.webp"); }
@media (max-width:1180px) {
  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)),
  html[data-visual-world="academy"] body[data-view="today"] #appShell .main .topbar:not(:has(.academy-home-masthead:not(:empty))) { min-height: 176px !important; padding-block: 12px 0 !important; row-gap: 8px !important; }
  html[data-visual-world="academy"] .academy-header-scene { top: 44px; right: 0; height: 164px; width: min(56%,400px); }
}
@media (max-width:767px) {
  html[data-visual-world="academy"] {
    --panorama-day: url("assets/academy/panorama/campus-day-small-v1.webp");
    --panorama-night: url("assets/academy/panorama/campus-night-small-v1.webp");
    --panorama-position: 80% top;
  }
  html[data-visual-world="academy"][data-skin="warm"] {
    --panorama-day: url("assets/academy/panorama/warm-day-small-v1.webp");
    --panorama-night: url("assets/academy/panorama/warm-night-small-v1.webp");
    --panorama-position: 78% top;
  }
  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)),
  html[data-visual-world="academy"] body[data-view="today"] #appShell .main .topbar:not(:has(.academy-home-masthead:not(:empty))) {
    min-height: 0 !important; padding-block: 8px 0 !important; row-gap: 8px !important;
    grid-template-areas: "menu brand find theme" "title title title title" !important;
    grid-template-rows: 44px auto !important;
  }
  html[data-visual-world="academy"] body[data-view] #appShell .main .topbar:has(.academy-home-masthead:not([hidden]):not(:empty)) {
    grid-template-areas: "menu brand find theme" "title title title title" "masthead masthead masthead masthead" !important;
    grid-template-rows: 44px auto auto !important;
  }
  html[data-visual-world="academy"] body[data-view] #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 auto !important;
  }
  html[data-visual-world="academy"] body[data-view] #appShell .main .topbar.academy-search-open:has(.academy-home-masthead:not([hidden]):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 .main { row-gap: 12px !important; align-content: start; }
  html[data-visual-world="academy"] #appShell .main > .view.active { margin-top: 0 !important; }
  html[data-visual-world="academy"] #appShell .topbar .topbar-title { padding-top: 0 !important; gap: 0; }
  html[data-visual-world="academy"] .academy-header-scene {
    top: 68px; right: 0; width: min(68%,300px); height: 164px;
  }
  html[data-visual-world="academy"] #workspaceLevel { max-width: 100%; }
  html[data-visual-world="academy"] #workspaceLevel .workspace-class-context::before { display: none; }
  html[data-visual-world="academy"] #authScreen {
    --panorama-day: url("assets/academy/login/campus-day-mobile-v1.webp");
    --panorama-night: url("assets/academy/login/campus-night-mobile-v1.webp");
  }
  html[data-visual-world="academy"][data-skin="warm"] #authScreen {
    --panorama-day: url("assets/academy/login/library-day-mobile-v1.webp");
    --panorama-night: url("assets/academy/login/library-night-mobile-v1.webp");
  }
  html[data-visual-world="academy"] .academy-auth-scene > .academy-scene-layer {
    width: max(100%,56.28lvh); left: 50%; transform: translateX(-50%); aspect-ratio: 941 / 1672;
  }
  html[data-visual-world="academy"] .academy-auth-scene { opacity: var(--scenery-scroll-opacity,1); }
  html[data-visual-world="academy"] .academy-auth-scene::after { background: linear-gradient(rgb(8 18 28 / 60%),rgb(8 18 28 / 35%) 230px,transparent 480px); }
  html[data-visual-world="academy"] #authScreen .auth-story { gap: 12px !important; }
  html[data-visual-world="academy"] #authScreen .auth-story-copy h1 {
    display: flex; flex-wrap: nowrap; justify-content: center; gap: .18em;
    white-space: nowrap; font-size: 28px !important; line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }
  html[data-visual-world="academy"] #authScreen .auth-story-copy h1 br { display: none; }
  html[data-visual-world="academy"] .academy-auth-scene .academy-scene-detail { clip-path: polygon(55% 55%,100% 55%,100% 65%,60% 61%); }
  html[data-visual-world="academy"][data-skin="warm"] .academy-auth-scene .academy-scene-detail { clip-path: polygon(43% 60%,57% 60%,85% 100%,13% 100%); }
  html[data-visual-world="academy"] .academy-scene-detail { animation-duration: 14s; }
  @keyframes academy-water-light {
    from { opacity: .1; transform: translateX(-.5px); }
    to { opacity: .4; transform: translateX(.5px); }
  }
  html[data-visual-world="academy"] #workspaceLevel :is(.learning-level,.workspace-class-context) { font-size: 14px; }
  html[data-visual-world="academy"] #workspaceLevel :is(.learning-level,.workspace-class-context) > strong { font-size: 15px; }
  html[data-visual-world="academy"] .home-completion,
  html[data-visual-world="academy"] .home-completion strong { font-size: 14px; }
  html[data-visual-world="academy"] .home-completion { column-gap: 10px; align-items: center; }
  html[data-visual-world="academy"] .home-completion b { font-size: 20px; }
}
@media (max-width:380px) {
  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)) { padding-inline: 12px !important; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-visual-world="academy"] .academy-scene-detail { display: none !important; animation: none !important; }
  html[data-visual-world="academy"].academy-theme-changing #appShell :is(.main > .view,.home-workspace,.home-workspace-icon) { transition: none !important; }
}
html[data-visual-world="academy"].cv-reduce-motion .academy-scene-detail { display: none !important; animation: none !important; }
html[data-visual-world="academy"].cv-reduce-motion.academy-theme-changing #appShell :is(.main > .view,.home-workspace,.home-workspace-icon) { transition: none !important; }
@media (forced-colors:active), print {
  html[data-visual-world="academy"] .academy-scenery { display: none !important; }
  html[data-visual-world="academy"] #authScreen { background: Canvas !important; }
  html[data-visual-world="academy"] body::before,
  html[data-visual-world="academy"][data-skin="warm"] body::before { background: Canvas !important; }
  html[data-visual-world="academy"] .academy-night-canvas { display: none !important; }
  html[data-visual-world="academy"] #appShell :is(.main > .view,.sidebar) { background: Canvas !important; }
}

/* ==== dot-companion.css ==== */
/* Isolated Dot extension. Load after the current Academy styles; no global reset. */
#avdot-panel, #avdot-launcher {
  --avdot-purple: #544bc4;
  --avdot-purple-dark: #3a328f;
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  letter-spacing: 0;
  box-sizing: border-box;
}
#avdot-panel *, #avdot-panel *::before, #avdot-panel *::after, #avdot-launcher * { box-sizing: border-box; letter-spacing: 0; }
#avdot-panel [hidden], #avdot-launcher[hidden] { display: none !important; }
#avdot-panel:not([open]) { display: none !important; }
#avdot-panel {
  position: fixed; inset: var(--avdot-top, 0px) 0 auto auto;
  margin: 0; width: min(424px, 100%); max-width: 100%;
  height: var(--avdot-height, 100dvh); max-height: var(--avdot-height, 100dvh);
  padding: 0; border: 0; border-radius: 0;
  color: var(--ink, #17264a); background: var(--surface, #fff);
  box-shadow: var(--shadow-lg, -8px 8px 30px rgb(0 0 0 / 18%));
  z-index: 1000; overflow: hidden;
}
#avdot-panel[open] { display: flex; flex-direction: column; }
#avdot-panel::backdrop { background: rgb(0 0 0 / 20%); }
#avdot-panel :is(h2,h3,p) { margin: 0; padding: 0; color: inherit; background: none; }
#avdot-panel .avdot-head {
  display: flex; flex: none; align-items: center; gap: 8px; padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top)); border-bottom: 1px solid var(--hairline, #d7e4f1);
  background: var(--surface, #fff); position: relative; z-index: 2;
}
#avdot-panel .avdot-heading { flex: 1; min-width: 0; padding-left: 4px; }
#avdot-panel .avdot-heading h2 { font: 650 20px/1.35 var(--font, sans-serif) !important; }
#avdot-panel .avdot-heading p { color: var(--muted, #40536b); font-size: 12px; line-height: 1.5; }
#avdot-panel .avdot-button, #avdot-launcher.avdot-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px !important; width: 44px; height: 44px !important; min-height: 44px !important;
  flex: 0 0 auto; margin: 0 !important; padding: 0 !important;
  font: 500 14px/1.45 var(--font, sans-serif); letter-spacing: 0 !important;
  color: var(--ink-2, #334767) !important; background: transparent !important;
  border: 0 !important; border-radius: 8px !important; box-shadow: none !important;
  cursor: pointer; touch-action: manipulation; transform: none;
  transition: background-color 150ms ease, color 150ms ease;
}
#avdot-launcher.avdot-button:not([hidden]) { display: inline-flex !important; }
#avdot-panel .avdot-button:hover:not(:disabled):not(.avdot-avatar) { background: var(--surface-2, #f2f7fc) !important; }
#avdot-panel .avdot-button:disabled { opacity: .45; cursor: default; }
#avdot-panel .avdot-button svg { width: 19px; height: 19px; flex: none; }
#avdot-panel :is(button,select,textarea,summary):focus:not(:focus-visible), #avdot-launcher:focus:not(:focus-visible) { outline: none !important; }
#avdot-panel :is(button,select,textarea,summary):focus-visible, #avdot-launcher:focus-visible { outline: 3px solid var(--dot-shell-accent, var(--avdot-purple)) !important; outline-offset: 2px !important; }
#avdot-panel .avdot-button.avdot-avatar, #avdot-launcher.avdot-avatar,
#avdot-panel .avdot-button.avdot-avatar:is(:hover,:active,:focus), #avdot-launcher.avdot-avatar:is(:hover,:active,:focus) {
  position: relative; background: var(--avdot-purple) !important; color: white !important;
  border-radius: 50% !important; width: 44px !important; height: 44px !important;
  transition: none !important;
}
.avdot-avatar .avdot-eyes { position: absolute; display: flex; gap: 7px; left: 14px; top: 18px; }
.avdot-avatar .avdot-eyes::before, .avdot-avatar .avdot-eyes::after { content: ""; width: 4px; height: 7px; border-radius: 3px; background: white; }
.avdot-avatar[data-state="idle"] .avdot-eyes { animation: avdot-glance 25s ease-in-out infinite; }
.avdot-avatar[data-state="idle"] .avdot-eyes::before, .avdot-avatar[data-state="idle"] .avdot-eyes::after { animation: avdot-blink 9s ease-in-out infinite; }
.avdot-avatar[data-state="thinking"] .avdot-eyes { transform: translate(2px, -2px); }
.avdot-avatar[data-state="thinking"] .avdot-eyes::before, .avdot-avatar[data-state="thinking"] .avdot-eyes::after { height: 5px; }
.avdot-avatar[data-state="listening"] .avdot-eyes { top: 16px; }
.avdot-avatar[data-state="listening"] .avdot-eyes::before, .avdot-avatar[data-state="listening"] .avdot-eyes::after { height: 10px; }
#avdot-panel .avdot-avatar[data-state="speaking"] { animation: avdot-speaking 900ms ease-in-out infinite alternate; }
.avdot-avatar:not([data-motion="active"]), .avdot-avatar:not([data-motion="active"]) .avdot-eyes,
.avdot-avatar:not([data-motion="active"]) .avdot-eyes::before, .avdot-avatar:not([data-motion="active"]) .avdot-eyes::after { animation-play-state: paused !important; }
@keyframes avdot-blink { 0%,38%,40%,100% { transform: scaleY(1); } 39% { transform: scaleY(.14); } }
@keyframes avdot-glance { 0%,45%,52%,100% { transform: translate(0,0); } 47%,50% { transform: translate(2px,-1px); } }
@keyframes avdot-speaking { from { transform: translateY(0); } to { transform: translateY(-2px); } }
#avdot-panel .avdot-context { display: flex; align-items: baseline; gap: 10px; padding: 12px 20px; background: var(--surface-2, #f2f7fc); font-size: 12px; line-height: 1.6; flex: none; }
#avdot-panel .avdot-level { font-weight: 700; color: var(--accent-ink, #0053bd); flex: none; }
#avdot-panel .avdot-context > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--muted, #40536b); }
#avdot-panel .avdot-scroll { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#avdot-panel .avdot-empty { padding: 32px 24px; }
#avdot-panel .avdot-empty h3 { font: 600 21px/1.45 var(--font, sans-serif) !important; max-width: 22ch; margin-bottom: 24px; overflow-wrap: anywhere; }
#avdot-panel .avdot-suggestions { display: grid; gap: 4px; }
#avdot-panel .avdot-suggestion { width: 100%; height: auto !important; text-align: left; justify-content: flex-start; padding: 12px 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--hairline-soft, #e7eef6) !important; overflow-wrap: anywhere; }
#avdot-panel .avdot-continue { width: auto; margin-top: 20px !important; color: var(--accent-ink, #0053bd) !important; }
#avdot-panel .avdot-notice { margin-top: 18px; color: var(--muted, #40536b); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
#avdot-panel .avdot-log { padding: 20px; }
#avdot-panel .avdot-log:empty { display: none; }
#avdot-panel .avdot-turn { margin-bottom: 28px; }
#avdot-panel .avdot-message { font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
#avdot-panel .avdot-message p { white-space: pre-wrap; }
#avdot-panel .avdot-speaker { display: block; font-size: 11px; font-weight: 650; color: var(--muted, #40536b); margin-bottom: 5px; }
#avdot-panel .avdot-user { margin-bottom: 20px; padding: 12px 14px; background: var(--surface-2, #f2f7fc); border-radius: 8px; font-size: 15px; }
#avdot-panel .avdot-assistant { padding-inline: 2px; }
#avdot-panel .avdot-replay { margin: 6px 0 0 -10px !important; color: var(--accent-ink, #0053bd) !important; }
#avdot-panel .avdot-error { padding-top: 12px; font-size: 13px; line-height: 1.6; color: var(--red-ink, #b22a20); overflow-wrap: anywhere; }
#avdot-panel .avdot-bottom { flex: none; padding: 8px 16px max(14px, env(safe-area-inset-bottom)); background: var(--surface, #fff); border-top: 1px solid var(--hairline-soft, #e7eef6); }
#avdot-panel .avdot-follow { display: flex; gap: 16px; padding-bottom: 4px; }
#avdot-panel .avdot-follow .avdot-button { width: auto; height: 36px !important; min-height: 36px !important; font-size: 12px; color: var(--accent-ink, #0053bd) !important; }
#avdot-panel .avdot-composer { border: 1px solid var(--hairline, #d7e4f1); border-radius: 8px; padding: 8px; background: var(--surface, #fff); }
#avdot-panel textarea {
  display: block; width: 100%; height: 68px; min-height: 48px !important; max-height: 112px;
  padding: 4px 6px !important; resize: none; overflow-y: auto;
  color: var(--ink, #17264a) !important; background: transparent !important; caret-color: currentColor;
  border: 0 !important; border-radius: 2px !important; box-shadow: none !important;
  font: 400 16px/1.6 var(--font, sans-serif) !important;
}
#avdot-panel textarea::placeholder { color: var(--muted, #40536b); opacity: 1; }
/* Text fields and an already-focused dialog control can retain :focus-visible after a tap. */
#avdot-panel[data-focus-input="pointer"] :is(button,select,textarea,summary):focus,
#avdot-launcher[data-focus-input="pointer"]:focus { outline: none !important; }
#avdot-panel .avdot-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 4px; }
#avdot-panel .avdot-toolbar .avdot-mic { width: auto; padding: 0 12px !important; color: #fff !important; background: var(--avdot-purple) !important; }
#avdot-panel .avdot-toolbar .avdot-mic:hover:not(:disabled) { background: var(--avdot-purple-dark) !important; }
#avdot-panel .avdot-composer.avdot-has-text .avdot-mic { color: var(--avdot-purple-dark) !important; background: var(--surface-2, #f2f7fc) !important; }
#avdot-panel .avdot-toolbar .avdot-send { margin-left: auto !important; color: #fff !important; background: var(--academy-action, #076be8) !important; }
#avdot-panel .avdot-toolbar .avdot-send:hover:not(:disabled) { background: var(--academy-action-hover, #0053bd) !important; }
#avdot-panel .avdot-composer:not(.avdot-has-text) .avdot-send { color: var(--ink-2, #334767) !important; background: transparent !important; }
#avdot-panel .avdot-toolbar [aria-pressed="true"] { color: var(--accent-ink, #0053bd) !important; background: var(--accent-soft, #e8f2ff) !important; }
#avdot-panel .avdot-toolbar .avdot-mic[aria-pressed="true"],
#avdot-panel .avdot-toolbar .avdot-mic[aria-pressed="true"]:hover:not(:disabled) { color: var(--red-ink, #b22a20) !important; background: var(--red-soft, #fff0f0) !important; }
#avdot-panel .avdot-record-time { order: 5; flex: 1 0 100%; color: var(--muted, #40536b); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#avdot-panel .avdot-options { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 8px; }
#avdot-panel .avdot-options label { display: flex; align-items: center; gap: 4px; color: var(--muted, #40536b); font-size: 11px; min-width: 0; }
#avdot-panel select { width: auto !important; min-width: 0; max-width: 125px; height: 36px !important; min-height: 36px !important; padding: 4px 20px 4px 6px !important; border: 0 !important; border-radius: 4px !important; background-color: var(--surface, #fff) !important; color: var(--ink-2, #334767) !important; box-shadow: none !important; font: 400 12px/1.4 var(--font, sans-serif) !important; }
#avdot-panel .avdot-status { padding: 6px 2px 0; color: var(--muted, #40536b); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#avdot-panel .avdot-remaining, #avdot-panel .avdot-retry { width: auto; height: 32px !important; min-height: 32px !important; color: var(--accent-ink, #0053bd) !important; font-size: 12px; line-height: 1.5; }
#avdot-panel .avdot-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The new 44px column exists only while a permitted student's entry is visible. */
@media (min-width: 768px) and (max-width: 1180px) {
  html[data-visual-world="academy"] body[data-view] #appShell .main .topbar:has(#avdot-launcher:not([hidden])) {
    grid-template-columns: 44px minmax(100px,1fr) minmax(100px,240px) 44px 44px !important;
    grid-template-areas: "menu brand search dot theme" "title title title title title" "masthead masthead masthead masthead masthead" !important;
  }
  #avdot-launcher { grid-area: dot; }
}
@media (max-width: 767px) {
  #avdot-panel { width: 100%; box-shadow: none; }
  #avdot-panel .avdot-head { padding: 12px; padding-top: max(12px, env(safe-area-inset-top)); }
  #avdot-panel .avdot-heading h2 { font-size: 18px !important; }
  #avdot-panel .avdot-empty { padding: 28px 20px; }
  #avdot-panel .avdot-context { padding-inline: 16px; }
  #avdot-panel .avdot-bottom { padding-inline: 12px; }
  html[data-visual-world="academy"] body[data-view] #appShell .main .topbar:has(#avdot-launcher:not([hidden])) {
    grid-template-columns: 44px minmax(0,1fr) 44px 44px 44px !important;
    grid-template-areas: "menu brand find dot theme" "title title title title title" "masthead masthead masthead masthead masthead" !important;
    grid-template-rows: 44px auto auto !important;
  }
  html[data-visual-world="academy"] body[data-view] #appShell .main .topbar.academy-search-open:has(#avdot-launcher:not([hidden])) {
    grid-template-areas: "menu brand find dot theme" "search search search search close" "title title title title title" "masthead masthead masthead masthead masthead" !important;
    grid-template-rows: 44px 44px auto auto !important;
  }
  html[data-visual-world="academy"] #appShell .topbar:has(#avdot-launcher:not([hidden])) .academy-mobile-brand { white-space: normal; overflow-wrap: normal; }
  #avdot-launcher { grid-area: dot; }
}
@media (max-height: 500px) {
  #avdot-panel .avdot-head { padding-block: 6px; }
  #avdot-panel .avdot-context { padding-block: 4px; }
  #avdot-panel .avdot-bottom { padding-block: 4px; }
  #avdot-panel textarea { height: 48px; }
  #avdot-panel .avdot-options { padding-top: 2px; }
  #avdot-panel .avdot-follow { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #avdot-panel *, #avdot-panel *::before, #avdot-panel *::after, #avdot-launcher, #avdot-launcher *, #avdot-launcher *::before, #avdot-launcher *::after { animation: none !important; transition: none !important; }
}
html.cv-reduce-motion #avdot-panel *, html.cv-reduce-motion #avdot-panel *::before, html.cv-reduce-motion #avdot-panel *::after,
html.cv-reduce-motion #avdot-launcher, html.cv-reduce-motion #avdot-launcher *, html.cv-reduce-motion #avdot-launcher *::before, html.cv-reduce-motion #avdot-launcher *::after { animation: none !important; transition: none !important; }
@media (forced-colors: active) {
  #avdot-panel { border: 1px solid CanvasText; }
  #avdot-panel .avdot-avatar, #avdot-launcher { forced-color-adjust: none; }
  #avdot-panel :is(button,select,textarea,summary):focus-visible, #avdot-launcher:focus-visible,
  #avdot-panel[data-focus-input="pointer"] :is(button,select,textarea,summary):focus,
  #avdot-launcher[data-focus-input="pointer"]:focus { outline: 3px solid Highlight !important; outline-offset: 2px !important; }
}

/* The learning shell docks this exact dialog; no second conversation or audio node. */
#avdot-panel.avdot-inline {
  position: relative; inset: auto; width: 100%; max-width: none;
  height: 100%; max-height: none; min-height: 0; margin: 0;
  background: transparent; color: var(--dot-shell-ink, #292844); box-shadow: none;
  z-index: auto; overflow: visible;
}
#avdot-panel.avdot-inline .avdot-head { border: 0; background: transparent; padding: 12px 0 10px; justify-content: center; flex-wrap: wrap; gap: 12px; }
#avdot-panel.avdot-inline .avdot-heading { flex: initial; padding: 0; }
#avdot-panel.avdot-inline .avdot-heading p { display: none; }
#avdot-panel.avdot-inline #avdot-close { display: none; }

#avdot-panel.avdot-inline .avdot-context { justify-content: center; padding: 6px 0; background: transparent; }
#avdot-panel.avdot-inline .avdot-scroll { flex: 1 1 auto; overflow: auto; max-height: min(46vh, 480px); }
#avdot-panel.avdot-inline .avdot-empty { padding: 24px 8px 20px; text-align: center; }
#avdot-panel.avdot-inline .avdot-empty h3 { max-width: none; margin-bottom: 20px; font-size: 30px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0; }
#avdot-panel.avdot-inline .avdot-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#avdot-panel.avdot-inline .avdot-suggestion { width: auto; min-width: 0 !important; justify-content: center; text-align: center; color: var(--dot-shell-accent-ink) !important; background: var(--dot-shell-soft) !important; border: 0 !important; border-radius: 10px !important; max-width: 100%; padding: 10px 14px !important; height: auto !important; line-height: 1.5; }
#avdot-panel.avdot-inline .avdot-notice { margin-top: 12px; font-size: 11px; }
#avdot-panel.avdot-inline .avdot-log { padding: 20px 12px 8px 2px; }
#avdot-panel.avdot-inline .avdot-turn { margin-bottom: 28px; }
#avdot-panel.avdot-inline .avdot-user { width: fit-content; max-width: 90%; margin-left: auto; padding: 12px 16px; border-radius: 12px; background: var(--dot-shell-soft); color: var(--dot-shell-ink); font-size: 15px; }
#avdot-panel.avdot-inline .avdot-bottom { padding: 8px 0 max(12px, env(safe-area-inset-bottom)); border: 0; background: transparent; }
#avdot-panel.avdot-inline .avdot-composer { border: 0; background: var(--dot-shell-surface); border-radius: 16px; padding: 12px; box-shadow:0 8px 28px rgb(41 40 68 / 6%); }
#avdot-panel.avdot-inline .avdot-send { background: #544bc4 !important; }
#avdot-panel.avdot-inline .avdot-level { color: #49409f; }
#avdot-panel.avdot-inline .avdot-remaining { display: none; }
#avdot-panel .avdot-preferences { margin: 4px 0 0; color: var(--muted,#40536b); font-size: 12px; }
#avdot-panel .avdot-preferences > summary { cursor: pointer; min-height: 36px; width: fit-content; padding: 8px 2px; }
#avdot-panel .avdot-preferences:not([open]) .avdot-options { display: none; }
#avdot-panel.avdot-inline .avdot-preferences:not([open]) { display: none; }
body[data-dot-shell="guided"] #avdot-panel.avdot-inline :is(.avdot-context,.avdot-notice,.avdot-preferences,.avdot-remaining) { display: none !important; }
@media (forced-colors: active) { #avdot-panel.avdot-inline .avdot-composer { border-color: CanvasText; } }

/* A saved learning event is distinct from words typed by the student. */
.avdot-event { color: var(--avdot-muted, #6c7283); background: transparent; font-size: .85rem; }
.avdot-event .avdot-speaker { font-weight: 500; }

/* Keep the companion present while the conversation itself stays uncluttered. */
#avdot-panel .avdot-head-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
#avdot-panel .avdot-head-tools .avdot-button { width: auto; padding-inline: 10px !important; }
#avdot-panel.avdot-inline .avdot-head-tools { flex-basis: 100%; order: 3; justify-content: flex-end; }
#avdot-panel.avdot-inline .avdot-heading { display: none; }
#avdot-panel.avdot-inline .avdot-head > .avdot-avatar { width: 76px !important; height: 76px !important; box-shadow: inset 0 -5px 12px rgb(32 23 102 / 16%), 0 10px 22px rgb(56 44 125 / 12%) !important; }
#avdot-panel.avdot-inline .avdot-head > .avdot-avatar .avdot-eyes { left: 26px; top: 30px; gap: 12px; }
#avdot-panel.avdot-inline .avdot-head > .avdot-avatar .avdot-eyes::before,#avdot-panel.avdot-inline .avdot-head > .avdot-avatar .avdot-eyes::after { width: 6px; height: 11px; }
#avdot-panel.avdot-inline .avdot-head > .avdot-avatar[data-state="listening"] .avdot-eyes { top: 27px; }
#avdot-panel.avdot-inline .avdot-head > .avdot-avatar[data-state="listening"] .avdot-eyes::before,#avdot-panel.avdot-inline .avdot-head > .avdot-avatar[data-state="listening"] .avdot-eyes::after { height: 15px; }
#avdot-panel.avdot-inline .avdot-head > .avdot-avatar::after { content: none; }
#avdot-panel.avdot-inline .avdot-head-tools :is(button,summary) { color: var(--dot-shell-muted) !important; font-size: 12px; }
#avdot-panel.avdot-inline .avdot-level { color: var(--dot-shell-accent-ink); }
#avdot-panel.avdot-inline .avdot-context > span:last-child,#avdot-panel.avdot-inline .avdot-notice,#avdot-panel.avdot-inline .avdot-speaker,#avdot-panel.avdot-inline .avdot-state { color: var(--dot-shell-muted); }
#avdot-panel.avdot-inline textarea { color: var(--dot-shell-ink) !important; }
#avdot-panel.avdot-inline textarea::placeholder { color: var(--dot-shell-muted); }
#avdot-panel.avdot-inline[data-conversation="true"] .avdot-head { justify-content: flex-start; }
#avdot-panel.avdot-inline[data-conversation="true"] .avdot-head > .avdot-avatar { width: 44px !important; height: 44px !important; }
#avdot-panel.avdot-inline[data-conversation="true"] .avdot-head > .avdot-avatar .avdot-eyes { left: 14px; top: 18px; gap: 7px; }
#avdot-panel.avdot-inline[data-conversation="true"] .avdot-head > .avdot-avatar .avdot-eyes::before,#avdot-panel.avdot-inline[data-conversation="true"] .avdot-head > .avdot-avatar .avdot-eyes::after { width: 4px; height: 7px; }
#avdot-panel.avdot-inline[data-conversation="true"] .avdot-head-tools { flex-basis: auto; flex: 1; }
#avdot-panel.avdot-inline[data-conversation="true"] .avdot-context { justify-content: flex-start; padding-block: 8px 12px; border-bottom: 0; }
#avdot-panel.avdot-inline[data-conversation="true"] .avdot-scroll { max-height: min(50dvh,540px); }
#avdot-panel.avdot-inline .avdot-toolbar .avdot-button { border-radius: 10px !important; }
#avdot-panel.avdot-inline .avdot-toolbar .avdot-mic { padding: 0 14px !important; }
@media(max-width:767px) {
  #avdot-panel .avdot-head { flex-wrap: wrap; }
  #avdot-panel .avdot-head-tools { flex-basis: 100%; }
  #avdot-panel.avdot-inline .avdot-empty { padding: 20px 0 16px; }
  #avdot-panel.avdot-inline .avdot-empty h3 { font-size: 24px !important; }
  #avdot-panel.avdot-inline .avdot-composer { padding: 8px; }
  #avdot-panel.avdot-inline .avdot-log { padding-right: 4px; }
  #avdot-panel.avdot-inline .avdot-head { padding-top: 10px; }
  #avdot-panel.avdot-inline .avdot-head-tools { gap: 4px; }
  #avdot-panel.avdot-inline[data-conversation="true"] .avdot-head-tools { flex-basis: auto; }
  #avdot-panel.avdot-inline .avdot-message { font-size: 16px; line-height: 1.7; }
}

body[data-dot-shell="guided"] #avdot-panel.avdot-inline .avdot-toolbar .avdot-send:not(:disabled) { background: #544bc4 !important; color: #fff !important; }
body[data-dot-shell="guided"] #avdot-panel.avdot-inline .avdot-toolbar .avdot-send:disabled { background: transparent !important; color: var(--dot-shell-muted) !important; }
body[data-dot-shell="guided"][data-dot-tool="open"][data-dot-wide="true"] #avdot-panel.avdot-inline .avdot-empty h3 { font-size: 24px !important; }
@media(max-width:359px) {
  #avdot-panel .avdot-toolbar .avdot-button.avdot-mic { padding-inline: 6px !important; gap: 4px; font-size: 13px; }
}

#avdot-panel.avdot-inline .avdot-head-tools { display:none; }
#avdot-panel.avdot-inline .avdot-user { border-radius:16px 16px 4px 16px; }
#avdot-panel.avdot-inline .avdot-user .avdot-speaker { display:none; }
#avdot-panel.avdot-inline .avdot-assistant .avdot-speaker { margin-bottom:8px; color:var(--dot-shell-accent-ink); }
#avdot-panel.avdot-inline .avdot-status { color:var(--dot-shell-muted); min-height:24px; }
#avdot-panel.avdot-inline .avdot-follow .avdot-button { color:var(--dot-shell-accent-ink) !important; }
#avdot-panel .avdot-assistant { animation:avdot-answer-in 260ms cubic-bezier(.2,.8,.2,1); }
@keyframes avdot-answer-in { from { opacity:0;transform:translateY(6px); } to { opacity:1;transform:translateY(0); } }
@media(forced-colors:active) { #avdot-panel.avdot-inline .avdot-composer { border:1px solid CanvasText; } }

#avdot-panel.avdot-inline .avdot-scroll { scroll-padding-block:16px; }
#avdot-panel.avdot-inline .avdot-bottom #dot-shell-choices { padding-block:8px 14px; }
#dot-shell-home-view:has(.avdot-inline[data-conversation="true"]) {
  height:calc(100dvh - 120px); min-height:480px; margin:12px auto 28px; padding-block:0;
}
#avdot-panel.avdot-inline[data-conversation="true"] .avdot-head { padding-top:0; }
#avdot-panel.avdot-inline[data-conversation="true"] .avdot-scroll { flex:1 1 0; max-height:none; }
#avdot-panel.avdot-inline[data-conversation="true"] .avdot-bottom { padding-top:0; }
#dot-shell-home-view:has(.avdot-inline[data-conversation="true"]) #dot-shell-next-row { display:none; }
body[data-dot-shell="guided"][data-dot-tool="open"][data-dot-wide="true"] #dot-shell-home-view {
  height:calc(100dvh - 108px); max-height:none; min-height:460px; top:12px; padding-block:12px 0; margin:0;
}
@media(max-width:767px) {
  #dot-shell-home-view:has(.avdot-inline[data-conversation="true"]) { height:calc(100dvh - 148px); min-height:460px; margin-block:8px 16px; }
  #dot-shell-choices { display:flex; flex-wrap:wrap; }
  #dot-shell-choices > .dot-shell-choice { flex:1 1 140px; width:auto; min-width:0; }
  #dot-shell-choices .dot-shell-more-choices { flex-basis:100%; }
  #avdot-panel.avdot-inline .avdot-toolbar .avdot-button { flex-shrink:0; }
}
#dot-shell-home-view:has(.avdot-inline[data-conversation="true"]) { display:flex; flex-direction:column; }
#dot-shell-home-view:has(.avdot-inline[data-conversation="true"]) #dot-shell-dock { flex:1; min-height:0; }

/* 5.8.21 small-screen conversation: once a chat has started, learning choices collapse into one
   scrollable row so the conversation itself keeps real height on 320-414px phones. */
@media (max-width:767px) {
  #avdot-panel.avdot-inline[data-conversation="true"] .avdot-scroll { min-height: min(40dvh, 300px); }
  #avdot-panel.avdot-inline[data-conversation="true"] #dot-shell-choices {
    display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
    padding-block: 4px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #avdot-panel.avdot-inline[data-conversation="true"] #dot-shell-choices::-webkit-scrollbar { display: none; }
  #avdot-panel.avdot-inline[data-conversation="true"] #dot-shell-choices > .dot-shell-choice,
  #avdot-panel.avdot-inline[data-conversation="true"] #dot-shell-choices .dot-shell-extra-choices > .dot-shell-choice {
    flex: 0 0 auto; width: auto; max-width: 72vw; min-height: 40px; padding: 8px 14px; gap: 6px; border-radius: 999px !important;
  }
  #avdot-panel.avdot-inline[data-conversation="true"] #dot-shell-choices .dot-shell-choice-title {
    font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
  }
  #avdot-panel.avdot-inline[data-conversation="true"] #dot-shell-choices .dot-shell-choice-arrow { display: none; }
  #avdot-panel.avdot-inline[data-conversation="true"] #dot-shell-choices .dot-shell-more-choices { flex: 0 0 auto; flex-basis: auto; }
  #avdot-panel.avdot-inline[data-conversation="true"] #dot-shell-choices .dot-shell-more-choices > summary {
    min-height: 40px; padding: 8px 10px; margin: 0; white-space: nowrap;
  }
  #avdot-panel.avdot-inline[data-conversation="true"] #dot-shell-choices .dot-shell-extra-choices { display: flex; flex-wrap: nowrap; gap: 8px; }
  #avdot-panel.avdot-inline[data-conversation="true"] textarea { height: 44px; min-height: 44px; }
}
@media (max-width:767px) and (max-height:700px) {
  #dot-shell-home-view:has(.avdot-inline[data-conversation="true"]) { min-height: 0; height: calc(100dvh - 132px); }
  #avdot-panel.avdot-inline[data-conversation="true"] .avdot-scroll { min-height: min(34dvh, 240px); }
}

/* ==== dot-learning-shell.css ==== */
/* One calm learning surface; original learning views keep their own layout and handlers. */
body {
  --dot-shell-ink: #292844; --dot-shell-muted: #626178; --dot-shell-canvas: #f8f7f4;
  --dot-shell-surface: #ffffff; --dot-shell-soft: #eeecf6; --dot-shell-line: #e4e1eb;
  --dot-shell-accent: #544bc4; --dot-shell-accent-ink: #42399c;
}
html.cv-dark body {
  --dot-shell-ink: #eeedf7; --dot-shell-muted: #bbb8cf; --dot-shell-canvas: #191922;
  --dot-shell-surface: #252530; --dot-shell-soft: #31303f; --dot-shell-line: #464358;
  --dot-shell-accent: #b1aaff; --dot-shell-accent-ink: #c5beff;
}
#dot-shell-bar, #dot-shell-home-view, #dot-shell-tool-bar, #dot-shell-menu, #dot-shell-notice, #dot-shell-return-entry {
  font-family: var(--font, sans-serif); box-sizing: border-box; color: var(--dot-shell-ink);
}
:is(#dot-shell-bar,#dot-shell-home-view,#dot-shell-tool-bar,#dot-shell-menu) * { box-sizing: border-box; }
:is(#dot-shell-bar,#dot-shell-home-view,#dot-shell-tool-bar,#dot-shell-notice,#dot-shell-return-entry)[hidden] { display: none !important; }
:is(#dot-shell-bar,#dot-shell-home-view,#dot-shell-tool-bar,#dot-shell-menu) button:where(:not(.avdot-button)), #dot-shell-return-entry {
  width: auto; min-width: 44px; min-height: 44px; height: auto; margin: 0; padding: 10px 14px;
  border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
  color: var(--dot-shell-ink) !important; background: transparent !important; font: 500 14px/1.5 var(--font, sans-serif); cursor: pointer;
  letter-spacing: 0; transform: none; touch-action: manipulation;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
:is(#dot-shell-bar,#dot-shell-home-view,#dot-shell-tool-bar,#dot-shell-menu) button:where(:not(.avdot-button)):hover:not(:disabled),#dot-shell-return-entry:hover { background: var(--dot-shell-soft) !important; }
:is(#dot-shell-bar,#dot-shell-home-view,#dot-shell-tool-bar,#dot-shell-menu) :is(button,summary):focus-visible,#dot-shell-return-entry:focus-visible { outline: 3px solid var(--dot-shell-accent) !important; outline-offset: 3px; }
:is(#dot-shell-bar,#dot-shell-home-view,#dot-shell-tool-bar,#dot-shell-menu) button:where(:not(.avdot-button)):disabled { opacity: .5; cursor: default; }
:is(#dot-shell-bar,#dot-shell-home-view) button.dot-shell-primary { background: #544bc4 !important; color: #fff !important; padding-inline: 20px; font-weight: 600; }
:is(#dot-shell-bar,#dot-shell-home-view) button.dot-shell-primary:hover:not(:disabled) { background: #41399c !important; }
html body[data-dot-shell="guided"] { background: var(--dot-shell-canvas) !important; }
html body[data-dot-shell="guided"]::before,body[data-dot-shell="guided"] .academy-night-canvas,body[data-dot-shell="guided"] .academy-header-scene { display: none !important; }
html[data-visual-world] body[data-dot-shell="guided"] #appShell,body[data-dot-shell="guided"] #appShell {
  display: grid !important; grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto 1fr;
  gap: 0 !important; width: min(1600px,100%) !important; min-height: 100dvh; height: auto; margin: 0 auto !important; padding: 0 36px !important;
  background: var(--dot-shell-canvas) !important; overflow: visible !important;
}
body[data-dot-shell="guided"] #appShell.hidden { display: none !important; }
body[data-dot-shell="guided"] #appShell > .sidebar,body[data-dot-shell="guided"] .mobile-tabbar,body[data-dot-shell="guided"] .cv-mobile-tabbar { display: none !important; }
#dot-shell-bar { display: flex; align-items: center; align-self: start; gap: 16px; grid-column: 1/-1; padding: max(18px,env(safe-area-inset-top)) 0 18px; min-width: 0; position: sticky; top: 0; z-index: 60; background: var(--dot-shell-canvas); border-bottom: 1px solid var(--dot-shell-line); }
#dot-shell-bar .dot-shell-brand { display: inline-flex; align-items: center; gap: 9px; padding: 4px 0; white-space: nowrap; text-align: left; }
#dot-shell-bar .dot-shell-brand strong { font: 700 19px/1.3 var(--font, sans-serif); color: var(--accent-ink); }
#dot-shell-bar .dot-shell-brand .brand-mark { display: block; width: 36px; height: 36px; flex: none; background: none !important; box-shadow: none !important; }
#dot-shell-bar .dot-shell-brand svg { display: block; width: 100%; height: 100%; }
.dot-shell-progress { color: var(--dot-shell-muted); font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.dot-shell-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.dot-shell-nav button { white-space: nowrap; }
#dot-shell-home-view { width: min(720px,100%); margin: auto; padding: 32px 0 40px; min-width: 0; }
.dot-shell-resume { color: var(--dot-shell-muted); font-size: 12px; line-height: 1.6; text-align: center; margin: 0 0 8px; }
#dot-shell-resume:empty { display: none; }
#dot-shell-dock { min-width: 0; }
#dot-shell-next-row { display: flex; justify-content: center; margin-top: 10px; }
#dot-shell-next-row[hidden] { display: none; }
#dot-shell-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding-top: 24px; }
#dot-shell-choices[hidden] { display: none; }
#dot-shell-choices .dot-shell-choice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px;
  text-decoration: none; text-align: left; background: var(--dot-shell-soft) !important; border: 0 !important; border-radius: 8px !important;
}
#dot-shell-choices .dot-shell-choice:hover:not(:disabled) { background: var(--dot-shell-line) !important; }
#dot-shell-choices:has(> .dot-shell-choice):not(:has(> .dot-shell-choice:nth-child(2))) { grid-template-columns: minmax(0,1fr); }
#dot-shell-choices:has(> .dot-shell-choice:nth-child(2)):not(:has(> .dot-shell-choice:nth-child(3))) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dot-shell-choice-copy { display: grid; gap: 5px; min-width: 0; }
.dot-shell-choice-title { color: var(--dot-shell-ink); font-size: 14px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.dot-shell-choice-arrow { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; width: 18px; height: 18px; flex: none; color: var(--dot-shell-accent-ink); }
.dot-shell-more-choices { grid-column: 1/-1; min-width: 0; color: var(--dot-shell-muted); font-size: 13px; }
.dot-shell-more-choices > summary { cursor: pointer; width: fit-content; min-height: 44px; padding: 12px 6px; margin-inline: auto; border-radius: 8px; }
.dot-shell-more-choices[open] > summary { margin-bottom: 8px; }
.dot-shell-extra-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.dot-shell-choice-group { grid-column: 1/-1; min-width: 0; }
.dot-shell-choice-group h3 { margin: 16px 0 10px; font: 600 13px/1.5 var(--font, sans-serif); color: var(--dot-shell-muted); }
.dot-shell-choice-group-items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
body[data-dot-shell="guided"][data-dot-tool="closed"] #appShell > .main { display: none !important; }
html[data-visual-world] body[data-dot-shell="guided"][data-dot-tool="open"] #appShell > .main,body[data-dot-shell="guided"][data-dot-tool="open"] #appShell > .main {
  display: block !important; padding: 0 0 32px !important; min-width: 0; width: 100%; height: auto !important; overflow: visible !important; background: transparent !important;
}
body[data-dot-shell="guided"] #appShell > .main > :is(.hero-grid,.metric-grid,.topbar,.global-search-panel) { display: none !important; }
body[data-dot-shell="guided"] #appShell > .main > .view.active { margin: 0 !important; width: 100% !important; min-width: 0; }
#dot-shell-tool-bar { display: flex; position: sticky; top: var(--dot-shell-header-height,81px); z-index: 30; gap: 10px; align-items: center; min-height: 64px; padding: 10px 0; background: var(--dot-shell-canvas); }
#dot-shell-tool-title { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
#dot-shell-save { margin-left: auto; color: var(--dot-shell-muted); font-size: 12px; line-height: 1.5; }
body[data-dot-shell="guided"][data-dot-tool="open"][data-dot-wide="false"] #dot-shell-home-view { display: none; }
html[data-visual-world] body[data-dot-shell="guided"][data-dot-tool="open"][data-dot-wide="true"] #appShell,body[data-dot-shell="guided"][data-dot-tool="open"][data-dot-wide="true"] #appShell {
  grid-template-columns: minmax(280px,.64fr) minmax(0,1.36fr) !important; column-gap: 40px !important;
}
/* Match the 1000px landscape branch in dot-learning-shell.js, including touch.
   A 1024px tablet can expose only 1015 CSS pixels once the page scrolls. */
@media (min-width: 1000px) and (max-width: 1199px) and (orientation: landscape) {
  html[data-visual-world] body[data-dot-shell="guided"][data-dot-tool="open"][data-dot-wide="true"] #appShell,
  body[data-dot-shell="guided"][data-dot-tool="open"][data-dot-wide="true"] #appShell {
    grid-template-columns: minmax(320px,.7fr) minmax(0,1.3fr) !important;
    column-gap: 24px !important;
  }
}
body[data-dot-shell="guided"][data-dot-tool="open"][data-dot-wide="true"] #dot-shell-home-view { align-self: start; position: sticky; top: var(--dot-shell-header-height,81px); margin: 0; padding: 24px 0; max-height: calc(100dvh - var(--dot-shell-header-height,81px) - 16px); overflow: auto; scrollbar-gutter: stable; }
body[data-dot-shell="guided"][data-dot-tool="open"][data-dot-wide="true"] :is(#dot-shell-choices,.dot-shell-extra-choices,.dot-shell-choice-group-items) { grid-template-columns: minmax(0,1fr); }
#dot-shell-menu { width: min(380px,calc(100vw - 32px)); padding: 24px; border: 1px solid var(--dot-shell-line); border-radius: 16px; background: var(--dot-shell-surface); max-height: calc(100dvh - 32px); overflow: auto; }
#dot-shell-menu:not([open]) { display: none; }
#dot-shell-menu::backdrop { background: rgb(41 40 68 / 24%); }
#dot-shell-menu header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#dot-shell-menu h2 { font-size: 18px; margin: 0; }
#dot-shell-menu-items { display: grid; gap: 4px; padding-top: 16px; }
#dot-shell-menu-items button { width: 100%; text-align: left; }
body[data-dot-shell="guided"] #dot-shell-progress { display: none !important; }
body[data-dot-shell="guided"] #dot-shell-menu { width: min(360px,calc(100vw - 32px)); padding: 20px; border-radius: 8px; }
body[data-dot-shell="guided"] #dot-shell-menu-close { width: 44px; padding: 0; flex: none; }
body[data-dot-shell="guided"] #dot-shell-menu-items { gap: 20px; padding-top: 20px; }
body[data-dot-shell="guided"] #dot-shell-menu .avdot-options { display: grid; gap: 16px; min-width: 0; }
body[data-dot-shell="guided"] #dot-shell-menu .avdot-options label { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 12px; color: var(--dot-shell-ink); font-size: 14px; }
body[data-dot-shell="guided"] #dot-shell-menu .avdot-options select {
  width: 100% !important; min-width: 0; min-height: 44px; margin: 0; padding: 8px 28px 8px 10px !important;
  border: 1px solid var(--dot-shell-line) !important; border-radius: 6px !important; box-shadow: none !important;
  background-color: var(--dot-shell-surface) !important; color: var(--dot-shell-ink) !important; font: 400 14px/1.5 var(--font,sans-serif);
}
body[data-dot-shell="guided"] #dot-shell-menu select:focus:not(:focus-visible) { outline: none !important; }
body[data-dot-shell="guided"] #dot-shell-menu select:focus-visible { outline: 3px solid var(--dot-shell-accent) !important; outline-offset: 2px !important; }
body[data-dot-shell="guided"] #dot-shell-menu .dot-shell-quota { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--dot-shell-line); color: var(--dot-shell-muted); font-size: 14px; }
body[data-dot-shell="guided"] #dot-shell-menu .dot-shell-quota strong { color: var(--dot-shell-ink); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
#dot-shell-notice { position: fixed; z-index: 2000; bottom: max(20px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; margin: 0; border: 1px solid var(--dot-shell-line); border-radius: 12px; background: var(--dot-shell-surface); font-size: 14px; line-height: 1.6; }
#dot-shell-return-entry { flex: none; white-space: nowrap; font-size: 13px; }
#appShell .topbar .top-actions #dot-shell-return-entry:not([hidden]) { display: inline-flex !important; align-items: center; }
html[data-visual-world] body[data-dot-shell="guided"] #appShell #dot-original-topbar,body[data-dot-shell="guided"] #appShell #dot-original-topbar,body[data-dot-shell="guided"] #appShell #globalSearchPanel { display: none !important; }
body[data-dot-shell="guided"] #avdot-panel.avdot-inline :is(.avdot-empty .avdot-suggestions,.avdot-continue) { display: none !important; }
/* A single short optical transition on deliberate entry; no input-blocking overlay. */
body[data-dot-transition="enter"] #dot-shell-home-view { animation: dot-shell-arrive 540ms cubic-bezier(.16,1,.3,1); }
body[data-dot-transition="enter"] #dot-shell-bar { animation: dot-shell-header 420ms cubic-bezier(.16,1,.3,1); }
body[data-dot-transition="enter"] #dot-shell-home-view::before { content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 50; background: linear-gradient(112deg,transparent 35%,rgb(147 136 225 / 14%) 48%,rgb(255 255 255 / 22%) 50%,transparent 64%); animation: dot-shell-scan 540ms cubic-bezier(.16,1,.3,1) both; }
@keyframes dot-shell-arrive { from { opacity: .5; filter: blur(4px); transform: translateY(12px) scale(.985); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes dot-shell-header { from { opacity: .5; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes dot-shell-scan { from { transform: translateX(-40%); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(40%); opacity: 0; } }
@media(max-width:1180px) { #appShell .topbar #dot-shell-return-entry:not([hidden]) { grid-column: 1/-1 !important; justify-self: start; } }
@media(max-width:767px) {
  html[data-visual-world] body[data-dot-shell="guided"] #appShell,body[data-dot-shell="guided"] #appShell { padding: 0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left)) !important; }
  #dot-shell-bar { gap: 6px 10px; padding: max(12px,env(safe-area-inset-top)) 0 12px; flex-wrap: wrap; }
  #dot-shell-bar .dot-shell-brand strong { font-size: 18px; }
  #dot-shell-bar .dot-shell-brand .brand-mark { width: 30px; height: 30px; }
  #dot-shell-bar .dot-shell-progress { margin-left: auto; font-size: 12px; }
  #dot-shell-bar .dot-shell-nav { flex-basis: 100%; justify-content: flex-end; gap: 4px; }
  #dot-shell-bar button { padding-inline: 12px; font-size: 13px; }
  #dot-shell-bar .dot-shell-brand { padding-left: 0; }
  #dot-shell-home-view { padding: 24px 0 max(24px,env(safe-area-inset-bottom)); }
  #dot-shell-tool-bar { flex-wrap: wrap; gap: 4px 8px; padding-top: 8px; }
  #dot-shell-tool-title { flex: 1; font-size: 15px; }
  #dot-shell-save { margin-left: 8px; }
  #dot-shell-return-entry { padding: 8px; }
  #dot-shell-choices,#dot-shell-choices:has(> .dot-shell-choice:nth-child(2)),.dot-shell-extra-choices,.dot-shell-choice-group-items { grid-template-columns: minmax(0,1fr); }
  #dot-shell-choices { padding-top: 20px; gap: 8px; }
  #dot-shell-choices .dot-shell-choice { min-height: 50px; padding: 12px 14px; }
}
@media(prefers-reduced-motion:reduce) {
  :is(#dot-shell-bar,#dot-shell-home-view,#dot-shell-tool-bar,#dot-shell-menu), :is(#dot-shell-bar,#dot-shell-home-view,#dot-shell-tool-bar,#dot-shell-menu) *, body[data-dot-shell="guided"] #appShell > .main { scroll-behavior: auto !important; transition: none !important; }
  body[data-dot-transition] :is(#dot-shell-home-view,#dot-shell-bar),body[data-dot-transition] #dot-shell-home-view::before { animation: none !important; }
}
html.cv-reduce-motion body[data-dot-transition] :is(#dot-shell-home-view,#dot-shell-bar),html.cv-reduce-motion body[data-dot-transition] #dot-shell-home-view::before { animation: none !important; }
@media(forced-colors:active) { :is(#dot-shell-bar,#dot-shell-home-view) button.dot-shell-primary { background: ButtonFace !important; color: ButtonText !important; border: 1px solid ButtonText !important; } }

/* A single task row; the existing course tools remain available under More. */
body[data-dot-shell="guided"] #dot-shell-home-view:has(#dot-shell-choices > button) #dot-shell-next-row,
body[data-dot-shell="guided"] #dot-shell-home-view:has(#dot-shell-choices[data-state="loading"]) #dot-shell-next-row { display:none; }
#dot-shell-choices .dot-shell-choice:active:not(:disabled) { background:var(--dot-shell-line) !important; }
/* Native dialog autofocus can keep :focus-visible after a pointer opens Settings. */
body[data-dot-shell="guided"]:has(#avdot-panel[data-focus-input="pointer"]) :is(#dot-shell-bar,#dot-shell-menu) :is(button,summary,select):focus { outline:none !important; }
@media(forced-colors:active) {
  #dot-shell-choices .dot-shell-choice { border:1px solid ButtonText !important; }
  :is(#dot-shell-bar,#dot-shell-home-view,#dot-shell-tool-bar,#dot-shell-menu) :is(button,summary):focus-visible,#dot-shell-return-entry:focus-visible { outline-color:Highlight !important; }
  body[data-dot-shell="guided"] #dot-shell-menu select:focus-visible { outline-color:Highlight !important; }
  body[data-dot-shell="guided"]:has(#avdot-panel[data-focus-input="pointer"]) :is(#dot-shell-bar,#dot-shell-menu) :is(button,summary,select):focus { outline:3px solid Highlight !important; outline-offset:2px !important; }
}

html.cv-reduce-motion :is(#dot-shell-bar,#dot-shell-home-view,#dot-shell-tool-bar,#dot-shell-menu), html.cv-reduce-motion :is(#dot-shell-bar,#dot-shell-home-view,#dot-shell-tool-bar,#dot-shell-menu) *, html.cv-reduce-motion body[data-dot-shell="guided"] #appShell > .main { scroll-behavior: auto !important; transition: none !important; }

/* 5.8.21: the guided-learning entry reads as a real button and pairs visually with Dot. */
#appShell #dot-shell-return-entry:not([hidden]) {
  gap: 8px; min-height: 40px; padding: 8px 16px 8px 12px !important; border-radius: 999px !important;
  background: var(--dot-shell-soft) !important; color: var(--dot-shell-accent-ink) !important;
  border: 1px solid var(--dot-shell-line) !important; font-weight: 650; font-size: 14px; line-height: 1.3;
}
#appShell #dot-shell-return-entry:not([hidden])::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 45%, #fff 0 1.6px, transparent 2px), radial-gradient(circle at 65% 45%, #fff 0 1.6px, transparent 2px), var(--dot-shell-accent);
}
#appShell #dot-shell-return-entry:not([hidden]):hover { background: var(--dot-shell-line) !important; }
@media (forced-colors: active) { #appShell #dot-shell-return-entry:not([hidden]) { border: 1px solid ButtonText !important; } }

/* ==== student-startup.css ==== */
body.aivia-startup-pending { overflow: hidden !important; }
body.aivia-startup-pending > :not(#aiviaStudentStartup):not(#cvSplash) { visibility: hidden !important; }
#aiviaStudentStartup {
  position: fixed; inset: 0; z-index: 2147483000; overflow: auto;
  display: grid; place-items: center; box-sizing: border-box;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: var(--surface, #fff); color: var(--text, #182842);
}
#aiviaStudentStartup .student-startup-content { width: min(100%, 460px); min-width: 0; text-align: center; }
#aiviaStudentStartup [hidden] { display: none !important; }
#aiviaStudentStartup .cv-anim-load { flex-direction: column; padding: 20px 0; min-height: 220px; }
#aiviaStudentStartup .cv-anim-copy { text-align: center; }
#aiviaStudentStartup .cv-anim-copy strong { font-size: 20px; }
#aiviaStudentStartup .cv-anim-copy span { font-size: 14px; line-height: 1.6; }
#aiviaStudentStartup h2 { font-size: 22px; line-height: 1.4; margin: 0 0 12px; }
#aiviaStudentStartup p { font-size: 15px; line-height: 1.7; margin: 0 0 24px; }
#aiviaStudentStartup .student-startup-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#aiviaStudentStartup button { flex: 1 1 120px; width: auto !important; min-height: 44px; font-size: 15px; white-space: nowrap; }

/* ==== ux-refresh.css ==== */
/* 5.8.21 student UX refresh — loaded last; presentation only, no business state.
   Owner: Claude (2026-10-26). Remove this file + its <link> to roll back the visual layer. */

/* ---------- Home: the suggested next step leads, progress and quota follow ---------- */
html[data-visual-world="academy"] .home-overview-bar > .learning-journey {
  order: -1; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft, #e8f2ff));
}
html[data-visual-world="academy"] .home-overview-bar > .learning-journey .learning-journey-copy strong { font-size: 18px; font-weight: 750; }
html[data-visual-world="academy"] .home-overview-bar > .learning-journey .learning-journey-category {
  justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hairline); font-size: 12px;
}
html[data-visual-world="academy"] .home-overview-bar > .learning-journey [data-journey] { padding-inline: 20px !important; }
html[data-visual-world="academy"] .home-overview-bar { row-gap: 12px; }

/* ---------- Home: modules with nothing scheduled become compact tiles ---------- */
html[data-visual-world="academy"] .home-workspace:has(.home-workspace-empty) .home-workspace-empty p { font-size: 12px; }
@media (max-width: 1180px) {
  /* Listening and writing both free: pair the task-heavy modules, then the quiet ones. */
  html[data-visual-world="academy"] .home-workspace-grid:has(.home-workspace-listen .home-workspace-empty):has(.home-workspace-writing .home-workspace-empty) {
    grid-template-areas: "vocab reading" "listen writing" "review records";
  }
  html[data-visual-world="academy"] .home-workspace:has(.home-workspace-empty) .home-workspace-empty { min-height: 0; align-content: start; padding-top: 12px; }
}
@media (max-width: 680px) {
  html[data-visual-world="academy"] .home-workspace-grid:has(.home-workspace-listen .home-workspace-empty):has(.home-workspace-writing .home-workspace-empty) {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-areas: "vocab vocab" "reading reading" "listen writing" "review review" "records records";
  }
  html[data-visual-world="academy"] .home-workspace-grid:has(.home-workspace-listen .home-workspace-empty):has(.home-workspace-writing .home-workspace-empty)
    :is(.home-workspace-listen,.home-workspace-writing) { padding: 14px !important; }
  html[data-visual-world="academy"] .home-workspace-grid:has(.home-workspace-listen .home-workspace-empty):has(.home-workspace-writing .home-workspace-empty)
    :is(.home-workspace-listen,.home-workspace-writing) .home-workspace-head { margin-bottom: 8px; gap: 10px; }
  html[data-visual-world="academy"] .home-workspace-grid:has(.home-workspace-listen .home-workspace-empty):has(.home-workspace-writing .home-workspace-empty)
    :is(.home-workspace-listen,.home-workspace-writing) .home-workspace-head .icon-button { display: none !important; }
  html[data-visual-world="academy"] .home-workspace-grid:has(.home-workspace-listen .home-workspace-empty):has(.home-workspace-writing .home-workspace-empty)
    :is(.home-workspace-listen,.home-workspace-writing) .home-workspace-icon { width: 36px; height: 36px; flex-basis: 36px; }
  html[data-visual-world="academy"] .home-workspace-grid:has(.home-workspace-listen .home-workspace-empty):has(.home-workspace-writing .home-workspace-empty)
    :is(.home-workspace-listen,.home-workspace-writing) .home-workspace-empty { display: block; padding-top: 8px; border-top: 0; }
  html[data-visual-world="academy"] .home-workspace-grid:has(.home-workspace-listen .home-workspace-empty):has(.home-workspace-writing .home-workspace-empty)
    :is(.home-workspace-listen,.home-workspace-writing) .home-workspace-empty p {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  html[data-visual-world="academy"] .home-workspace-grid:has(.home-workspace-listen .home-workspace-empty):has(.home-workspace-writing .home-workspace-empty)
    :is(.home-workspace-listen,.home-workspace-writing) .home-workspace-empty button { width: 100% !important; justify-content: center; }
  html[data-visual-world="academy"] .home-overview-bar > .learning-journey { padding: 14px; }
  html[data-visual-world="academy"] .home-overview-bar > .learning-journey .learning-journey-copy strong { font-size: 17px; }
}

/* ---------- Home: daily check-in strip only covers the check-in's own days ---------- */
.daily-checkin-days .dc-days-label { margin-right: 2px; color: var(--muted); font-size: 11px; white-space: nowrap; }
/* phone layout draws the strip as a fixed 7-column grid: the label takes its own row */
.daily-checkin-card .daily-checkin-days .dc-days-label { grid-column: 1 / -1; }
.daily-checkin-days span.is-today { box-shadow: 0 0 0 1.5px var(--accent, #0065df); }

/* ---------- Words: open vocab homework banner ---------- */
.vocab-assignment-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
  margin: 12px 0 4px; padding: 12px 16px; border: 1px solid var(--accent-edge, #99c7ff); border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft, #e8f2ff)); color: var(--ink);
}
.vocab-assignment-banner .vab-copy { display: grid; gap: 4px; min-width: 0; flex: 1 1 220px; }
.vocab-assignment-banner .vab-copy .home-task-kind { justify-self: start; }
.vocab-assignment-banner strong { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.vocab-assignment-banner small { color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.vocab-assignment-banner .primary-action { width: auto !important; min-height: 44px; flex: none; }
@media (max-width: 680px) {
  /* phones: copy and action share one row so the banner stays short */
  .vocab-assignment-banner { flex-wrap: nowrap; align-items: center; padding: 12px 12px 12px 14px; gap: 10px; }
  .vocab-assignment-banner .vab-copy { flex: 1 1 0; }
  .vocab-assignment-banner .primary-action { padding-inline: 14px !important; }
}

/* ---------- Quiz: start card before questions are drawn ---------- */
.quiz-start-layout { display: block !important; }
.quiz-start-card { max-width: 640px; margin: 12px auto 0; display: grid; gap: 12px; }
.quiz-start-card h2 { margin: 0; font-size: 22px; line-height: 1.4; }
.quiz-start-card .muted { margin: 0; }
.quiz-start-card .quiz-scope-field { margin: 0; }
.quiz-start-card .quiz-start-meta { margin: 0; color: var(--ink-2); font-size: 14px; }
.quiz-start-card .session-actions .primary-action { min-width: 160px; width: auto !important; }
.quiz-start-card .quiz-start-assignment { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline-soft, var(--hairline)); color: var(--muted); font-size: 13px; }
.quiz-start-card .quiz-start-assignment .text-button { font-size: 13px; font-weight: 650; }
@media (max-width: 680px) {
  .quiz-start-card .session-actions .primary-action { width: 100% !important; }
}

/* ---------- Writing: draft-version notice sits with the essay text, as a calm note ---------- */
.writing-text-column #writingCloudState {
  margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--surface-2); font-size: 14px;
}
.writing-text-column #writingCloudState h4 { margin: 10px 0 4px; font-size: 14px; }
.writing-text-column #writingCloudState p { margin: 4px 0; }
.writing-text-column #writingCloudState .followup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.writing-text-column #writingCloudState .followup-actions button { width: auto !important; min-height: 40px; }

/* ---------- Writing (phones): the history link stops squeezing the mode switch ---------- */
@media (max-width: 680px) {
  html[data-visual-world] #view-writing .writing-mode-toolbar { flex-wrap: wrap !important; row-gap: 2px; }
  html[data-visual-world] #view-writing .writing-mode-toolbar > .writing-mode-tabs { flex: 1 1 100% !important; }
  html[data-visual-world] #view-writing .writing-history-jump {
    order: 2; margin: -6px 0 -6px auto; min-height: 44px !important; padding: 0 2px !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    color: var(--accent-ink) !important; font-size: 13px !important;
  }
}

/* ---------- Header (phones & tablets): "Dot 带我学" joins the title row instead of taking its own ---------- */
@media (max-width: 1180px) {
  html[data-visual-world] #appShell .topbar #dot-shell-return-entry:not([hidden]) {
    grid-row: title !important; grid-column: 1 / -1 !important; justify-self: end !important; align-self: start !important;
    /* 5.8.21 fix1: 必须高于 .topbar-title(z-index:4)，否则透明标题区盖住按钮、点击无反应 */
    position: relative; z-index: 6 !important; margin-top: 2px;
  }
}
@media (max-width: 680px) {
  html[data-visual-world] #appShell .topbar #dot-shell-return-entry:not([hidden]) {
    min-height: 36px; padding: 6px 12px 6px 8px !important; font-size: 13px; gap: 6px;
  }
}

/* ---------- Home cards: one calmer radius for the learning modules ---------- */
html[data-visual-world="academy"] .home-workspace { border-radius: 12px !important; }
html[data-visual-world="academy"] .home-workspace-icon { border-radius: 10px; }

/* ---------- Reading: source tabs sit on one row at every width ---------- */
html[data-visual-world] #view-reading .reading-source-tabs:has(> button:nth-child(3)) {
  display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; flex-wrap: nowrap;
}
html[data-visual-world] #view-reading .reading-source-tabs:has(> button:nth-child(3)) > button {
  display: grid !important; justify-items: center; align-content: center; gap: 2px; width: auto !important; min-width: 0 !important;
  min-height: 52px; padding: 6px 4px !important; text-align: center; white-space: normal;
}
html[data-visual-world] #view-reading .reading-source-tabs > button strong { font-size: 13px; line-height: 1.3; }
html[data-visual-world] #view-reading .reading-source-tabs > button span { font-size: 11px; line-height: 1.3; }
html[data-visual-world] #view-reading .reading-source-tabs > button[data-empty="true"]:not(.active) { opacity: .62; }

/* ---------- Writing: "历史作文" reads as a link, not a squeezed box ---------- */
html[data-visual-world] #view-writing .writing-history-jump {
  min-height: 44px !important; padding: 0 6px !important; white-space: nowrap;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--accent-ink) !important; font-size: 13px !important; font-weight: 650;
}

/* ==== aivia-ds.css ==== */
/* Aivia design system 6 (web 5.9.0) — written by Claude.
   Loaded last. Active only on html[data-ds] (students and the sign-in screen); teacher and
   admin pages keep the legacy academy look (5.10.0: teacher pages join data-ds). Seven skins (data-ds-skin:
   academy / library / ginkgo / seaside / observatory / vivid / minimal; library added in 5.9.2, the three
   rooms in 5.10.0), each with light and dark (html.cv-dark), and a learner stage (data-stage:
   primary for Starters/Movers, secondary otherwise) that scales type and touch targets.
   Presentation only: no element is added, removed or re-ordered and no behaviour changes.

   Specificity: legacy rules reach (0,3,1) for tokens and use !important widely, so token
   blocks below use four attribute selectors and component rules start with the P prefix
   html[data-ds][data-visual-world] (0,2,1) or stronger. */

/* ── 0. Fonts ─────────────────────────────────────────────────────────────────────────
   Academy display face: Baskerville (John Baskerville, printer to Cambridge University).
   Apple devices ship it; other systems use the self-hosted Libre Baskerville when present
   and otherwise use the bundled Libre Baskerville (OFL, unmodified). Chinese headings use
   Songti / Noto Serif where installed and the system sans elsewhere. */
@font-face { font-family: "Aivia Baskerville"; src: local("Baskerville"), local("Baskerville-Regular"), url("assets/fonts/aivia-libre-baskerville-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aivia Baskerville"; src: local("Baskerville-SemiBold"), local("Baskerville SemiBold"), url("assets/fonts/aivia-libre-baskerville-400.woff") format("woff"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Aivia Baskerville"; src: local("Baskerville-Italic"), local("Baskerville Italic"), url("assets/fonts/aivia-libre-baskerville-400.woff") format("woff"); font-weight: 400 800; font-style: italic; font-display: swap; }
/* Minimal display face: Instrument Sans (Latin subset). */
@font-face { font-family: "Aivia Instrument Sans"; src: url("assets/fonts/aivia-instrument-sans-400.woff") format("woff"); font-weight: 400 550; font-style: normal; font-display: swap; }
@font-face { font-family: "Aivia Instrument Sans"; src: url("assets/fonts/aivia-instrument-sans-700.woff") format("woff"); font-weight: 600 800; font-style: normal; font-display: swap; }

/* ── 1. Skin tokens ───────────────────────────────────────────────────────────────────
   Each block re-points the legacy variables (so every legacy rule follows the skin) and
   defines the --ds-* tokens used by this file. */
html[data-ds][data-visual-world][data-palette][data-ds-skin] {
  --ds-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font: var(--ds-sans);
  --ds-ease: cubic-bezier(.2, .7, .2, 1);
  --ds-fast: 140ms;
  --ds-base: 15px;
  --ds-target: 44px;
  --ds-gutter: 32px;
  --ds-content: 1240px;
  --ds-sidebar: 248px;
  --ds-rail: 92px;
  --academy-theme-time: .35s;
}

/* Academy — Cambridge stone, gown navy, college blue, brass. */
html[data-ds][data-visual-world][data-palette][data-ds-skin="academy"] {
  color-scheme: light;
  --bg: #eef0ec; --bg-tint: #f3f4f0;
  --surface: #ffffff; --surface-2: #f4f5f1; --surface-3: #e6e9e3;
  --ink: #16233f; --ink-2: #2f3c58; --muted: #566173; --muted-2: #566173;
  --hairline: #d5dbd3; --hairline-soft: #e4e8e2; --line: var(--hairline); --panel: var(--surface); --soft: var(--surface-2);
  --accent: #203d86; --accent-press: #172f6b; --accent-ink: #1d3778; --accent-soft: #e6ebf6; --accent-soft-2: #f0f3fa; --accent-edge: #9fb0d8; --accent-2: #3d5fb5; --accent-glow: transparent;
  --academy-action: #203d86; --academy-action-hover: #172f6b; --academy-scene-ink: #16233f; --academy-sidebar: var(--surface);
  --green: #2f7259; --green-ink: #2a6650; --green-soft: #e2efe9; --green-strong: #2f7259; --green-strong-press: #245a46;
  --red: #c0392b; --red-ink: #a3332a; --red-soft: #f8e6e3;
  --amber: #b07a17; --amber-ink: #7f5512; --amber-soft: #f6ebd3; --gold-ink: #7d5d1f;
  --blue: var(--accent); --cyan: var(--accent-2);
  --r-xs: 8px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --radius: 10px; --radius-sm: 8px;
  --shadow-xs: 0 1px 1px rgb(22 35 63 / 4%);
  --shadow-sm: 0 1px 2px rgb(22 35 63 / 5%), 0 4px 12px rgb(22 35 63 / 5%);
  --shadow: 0 1px 2px rgb(22 35 63 / 5%), 0 12px 32px rgb(22 35 63 / 8%);
  --shadow-lg: 0 24px 64px rgb(15 25 48 / 18%);
  --shadow-accent: none;
  --font-display: "Aivia Baskerville", Baskerville, "Libre Baskerville", "Baskerville Old Face", Georgia, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ds-brass: #a07a32; --ds-brass-ink: #7d5d1f; --ds-brass-soft: #f5eedf;
  --ds-canvas: #eef0ec; --ds-card: #ffffff; --ds-card-edge: #dfe3dc;
  --ds-nav-active-bg: var(--accent-soft); --ds-nav-active-ink: var(--accent-ink); --ds-nav-mark: var(--ds-brass);
  --ds-display-weight: 700; --ds-display-track: -.005em;
  --ds-r-card: 14px; --ds-r-control: 10px; --ds-r-hero: 20px;
  --panorama-day-rgb: 238 240 236; --panorama-night-rgb: 18 24 34;
  --dot-shell-canvas: #eef0ec; --dot-shell-surface: #ffffff; --dot-shell-soft: #f0f3fa; --dot-shell-line: #d5dbd3;
  --dot-shell-ink: #16233f; --dot-shell-muted: #566173; --dot-shell-accent: #203d86; --dot-shell-accent-ink: #1d3778;
  --avdot-purple: #4b42c4; --avdot-purple-dark: #3a328f;
}
html[data-ds][data-visual-world][data-palette][data-ds-skin="academy"].cv-dark {
  color-scheme: dark;
  --bg: #121822; --bg-tint: #151c27;
  --surface: #1a2230; --surface-2: #212a3a; --surface-3: #2b3546;
  --ink: #ece7dc; --ink-2: #d6d2c8; --muted: #a9b0bd; --muted-2: #a9b0bd;
  --hairline: #2f394a; --hairline-soft: #242d3b;
  --accent: #a9bdf3; --accent-press: #c5d3f8; --accent-ink: #bccbf6; --accent-soft: #253456; --accent-soft-2: #1e2a42; --accent-edge: #4c63a3; --accent-2: #8aa3e8;
  --academy-action: #3554a6; --academy-action-hover: #4062bb; --academy-scene-ink: #ece7dc;
  --green-ink: #8fd1b5; --green-soft: #1f3a31; --green-strong: #2f7259; --green-strong-press: #3a8569;
  --red-ink: #ffb1a8; --red-soft: #46282a; --amber-ink: #ecc77e; --amber-soft: #3d3222; --gold-ink: #e2c387;
  --shadow-xs: 0 1px 1px rgb(0 0 0 / 20%);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 22%), 0 4px 12px rgb(0 0 0 / 16%);
  --shadow: 0 1px 2px rgb(0 0 0 / 24%), 0 12px 32px rgb(0 0 0 / 24%);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 45%);
  --shadow-accent: none;
  --ds-brass: #d8b46c; --ds-brass-ink: #e2c387; --ds-brass-soft: #3a3122;
  --ds-canvas: #121822; --ds-card: #1a2230; --ds-card-edge: #2a3445;
  --dot-shell-canvas: #121822; --dot-shell-surface: #1a2230; --dot-shell-soft: #212a3a; --dot-shell-line: #2f394a;
  --dot-shell-ink: #ece7dc; --dot-shell-muted: #a9b0bd; --dot-shell-accent: #3554a6; --dot-shell-accent-ink: #bccbf6;
}

/* Library (5.9.2) — the reading room: parchment, walnut ink, green leather, a brass lamp. */
html[data-ds][data-visual-world][data-palette][data-ds-skin="library"] {
  color-scheme: light;
  --bg: #efe6d6; --bg-tint: #f3ecdf;
  --surface: #fffbf3; --surface-2: #f6eedf; --surface-3: #ece1cd;
  --ink: #2a2620; --ink-2: #463f35; --muted: #6a6052; --muted-2: #6a6052;
  --hairline: #e0d3bd; --hairline-soft: #ebe1cf; --line: var(--hairline); --panel: var(--surface); --soft: var(--surface-2);
  --accent: #1f5c46; --accent-press: #174635; --accent-ink: #1d5440; --accent-soft: #e2ebdf; --accent-soft-2: #eef3ec; --accent-edge: #9dbaa9; --accent-2: #2f7a5d; --accent-glow: transparent;
  --academy-action: #1f5c46; --academy-action-hover: #174635; --academy-scene-ink: #2a2620; --academy-sidebar: var(--surface);
  --green: #2e7550; --green-ink: #276645; --green-soft: #e1eddf; --green-strong: #2e7550; --green-strong-press: #235c3e;
  --red: #b23a2b; --red-ink: #9c3226; --red-soft: #f6e3dc;
  --amber: #a87420; --amber-ink: #7a5414; --amber-soft: #f4e7cc; --gold-ink: #7a5a1d;
  --blue: var(--accent); --cyan: var(--accent-2);
  --r-xs: 8px; --r-sm: 10px; --r: 12px; --r-lg: 16px; --radius: 10px; --radius-sm: 8px;
  --shadow-xs: 0 1px 1px rgb(60 42 20 / 5%);
  --shadow-sm: 0 1px 2px rgb(60 42 20 / 6%), 0 4px 12px rgb(60 42 20 / 6%);
  --shadow: 0 1px 2px rgb(60 42 20 / 6%), 0 12px 32px rgb(60 42 20 / 10%);
  --shadow-lg: 0 24px 64px rgb(43 30 14 / 22%);
  --shadow-accent: none;
  --ds-brass: #9a7330; --ds-brass-ink: #7a5a1d; --ds-brass-soft: #f3e8d2;
  --ds-canvas: #efe6d6; --ds-card: #fffbf3; --ds-card-edge: #e6d9c3;
  --ds-nav-active-bg: var(--accent-soft); --ds-nav-active-ink: var(--accent-ink); --ds-nav-mark: var(--ds-brass);
  --ds-display-weight: 700; --ds-display-track: -.005em;
  --ds-r-card: 12px; --ds-r-control: 10px; --ds-r-hero: 18px;
  --panorama-day-rgb: 239 230 214; --panorama-night-rgb: 29 26 22;
  --dot-shell-canvas: #efe6d6; --dot-shell-surface: #fffbf3; --dot-shell-soft: #f6eedf; --dot-shell-line: #e0d3bd;
  --dot-shell-ink: #2a2620; --dot-shell-muted: #6a6052; --dot-shell-accent: #1f5c46; --dot-shell-accent-ink: #1d5440;
  --avdot-purple: #4b42c4; --avdot-purple-dark: #3a328f;
}
html[data-ds][data-visual-world][data-palette][data-ds-skin="library"].cv-dark {
  color-scheme: dark;
  --bg: #1d1a16; --bg-tint: #211d18;
  --surface: #26221d; --surface-2: #2e2923; --surface-3: #39332b;
  --ink: #f1e8d7; --ink-2: #ddd3c1; --muted: #c1b7a3; --muted-2: #c1b7a3;
  --hairline: #433c32; --hairline-soft: #352f27;
  --accent: #a8cdb3; --accent-press: #c2ddc9; --accent-ink: #b6d6c0; --accent-soft: #233a2f; --accent-soft-2: #1f2c24; --accent-edge: #4f7d63; --accent-2: #8fbf9f;
  --academy-action: #2a6b52; --academy-action-hover: #327a5e; --academy-scene-ink: #f1e8d7;
  --green-ink: #9fd4ae; --green-soft: #22382a; --green-strong: #2a6b52; --green-strong-press: #327a5e;
  --red-ink: #ffb3a6; --red-soft: #46271f; --amber-ink: #e8c47c; --amber-soft: #3d3220; --gold-ink: #e2c387;
  --shadow-xs: 0 1px 1px rgb(0 0 0 / 20%);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 22%), 0 4px 12px rgb(0 0 0 / 16%);
  --shadow: 0 1px 2px rgb(0 0 0 / 24%), 0 12px 32px rgb(0 0 0 / 24%);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 45%);
  --shadow-accent: none;
  --ds-brass: #d8b46c; --ds-brass-ink: #e2c387; --ds-brass-soft: #3a3122;
  --ds-canvas: #1d1a16; --ds-card: #26221d; --ds-card-edge: #3d362d;
  --dot-shell-canvas: #1d1a16; --dot-shell-surface: #26221d; --dot-shell-soft: #2e2923; --dot-shell-line: #433c32;
  --dot-shell-ink: #f1e8d7; --dot-shell-muted: #c1b7a3; --dot-shell-accent: #2a6b52; --dot-shell-accent-ink: #b6d6c0;
}

/* Minimal — quiet neutrals, one brand indigo taken from the logo. */
html[data-ds][data-visual-world][data-palette][data-ds-skin="minimal"] {
  color-scheme: light;
  --bg: #f4f5f7; --bg-tint: #f7f8f9;
  --surface: #ffffff; --surface-2: #f2f3f5; --surface-3: #e7e9ed;
  --ink: #171b26; --ink-2: #363c4b; --muted: #5f6675; --muted-2: #5f6675;
  --hairline: #e1e3e8; --hairline-soft: #ebedf0; --line: var(--hairline); --panel: var(--surface); --soft: var(--surface-2);
  --accent: #4b42c4; --accent-press: #3c349f; --accent-ink: #4038b0; --accent-soft: #eeedfb; --accent-soft-2: #f6f5fd; --accent-edge: #b9b4ee; --accent-2: #6d64dc; --accent-glow: transparent;
  --academy-action: #4b42c4; --academy-action-hover: #3c349f; --academy-scene-ink: #171b26; --academy-sidebar: var(--bg);
  --green: #18804f; --green-ink: #13703f; --green-soft: #e5f4ec; --green-strong: #18804f; --green-strong-press: #136a41;
  --red: #d33a2c; --red-ink: #b42c20; --red-soft: #fbe9e7;
  --amber: #c27c00; --amber-ink: #8a5600; --amber-soft: #fbf0d9; --gold-ink: #8a5600;
  --blue: var(--accent); --cyan: var(--accent-2);
  --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-lg: 12px; --radius: 8px; --radius-sm: 6px;
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgb(23 27 38 / 5%);
  --shadow: 0 1px 2px rgb(23 27 38 / 5%);
  --shadow-lg: 0 18px 48px rgb(23 27 38 / 16%);
  --shadow-accent: none;
  --font-display: "Aivia Instrument Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", sans-serif;
  --ds-canvas: #f4f5f7; --ds-card: #ffffff; --ds-card-edge: #e3e5ea;
  --ds-nav-active-bg: #e9eaee; --ds-nav-active-ink: var(--ink); --ds-nav-mark: var(--accent);
  --ds-display-weight: 650; --ds-display-track: -.012em;
  --ds-r-card: 10px; --ds-r-control: 10px; --ds-r-hero: 12px;
  --panorama-day-rgb: 244 245 247; --panorama-night-rgb: 22 24 29;
  --dot-shell-canvas: #f4f5f7; --dot-shell-surface: #ffffff; --dot-shell-soft: #f2f3f5; --dot-shell-line: #e1e3e8;
  --dot-shell-ink: #171b26; --dot-shell-muted: #5f6675; --dot-shell-accent: #4b42c4; --dot-shell-accent-ink: #4038b0;
  --avdot-purple: #4b42c4; --avdot-purple-dark: #3c349f;
}
html[data-ds][data-visual-world][data-palette][data-ds-skin="minimal"].cv-dark {
  color-scheme: dark;
  --bg: #16181d; --bg-tint: #191b21;
  --surface: #1d2026; --surface-2: #24282f; --surface-3: #2e323a;
  --ink: #eceef2; --ink-2: #d1d5dc; --muted: #a2a8b4; --muted-2: #a2a8b4;
  --hairline: #2e323a; --hairline-soft: #252930;
  --accent: #a59dff; --accent-press: #c0baff; --accent-ink: #b7b0ff; --accent-soft: #2b2850; --accent-soft-2: #222036; --accent-edge: #5e56b8; --accent-2: #8f86f2;
  --academy-action: #5b52d6; --academy-action-hover: #6a62e0; --academy-scene-ink: #eceef2;
  --green-ink: #7fd3a6; --green-soft: #1d3428; --red-ink: #ffaea4; --red-soft: #432826; --amber-ink: #f0c879; --amber-soft: #3b3020; --gold-ink: #f0c879;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%); --shadow: 0 1px 2px rgb(0 0 0 / 30%); --shadow-lg: 0 18px 48px rgb(0 0 0 / 50%);
  --ds-canvas: #16181d; --ds-card: #1d2026; --ds-card-edge: #2c3038;
  --ds-nav-active-bg: #262a32;
  --dot-shell-canvas: #16181d; --dot-shell-surface: #1d2026; --dot-shell-soft: #24282f; --dot-shell-line: #2e323a;
  --dot-shell-ink: #eceef2; --dot-shell-muted: #a2a8b4; --dot-shell-accent: #5b52d6; --dot-shell-accent-ink: #b7b0ff;
}

/* Vivid — sunlit apricot canvas, Dot's grape as the action colour, playground accents.
   5.10.3 calm: the grape is matte (about 39% saturation, the same step as observatory and
   minimal) and buttons share the one flat spec of every other skin; the treehouse keeps its
   painting, its rounded face and its heavier titles. */
html[data-ds][data-visual-world][data-palette][data-ds-skin="vivid"] {
  color-scheme: light;
  --bg: #fff3e8; --bg-tint: #fff7ef;
  --surface: #ffffff; --surface-2: #fff2e4; --surface-3: #fde3cc;
  --ink: #35231a; --ink-2: #4f382b; --muted: #7a6151; --muted-2: #7a6151;
  --hairline: #f0d8c2; --hairline-soft: #f8e8d8; --line: var(--hairline); --panel: var(--surface); --soft: var(--surface-2);
  --accent: #5a4eb0; --accent-press: #4d4299; --accent-ink: #4b3fa0; --accent-soft: #efecfa; --accent-soft-2: #f6f4fd; --accent-edge: #c4bde8; --accent-2: #7a70c8; --accent-glow: transparent;
  --academy-action: #5a4eb0; --academy-action-hover: #4d4299; --academy-scene-ink: #35231a; --academy-sidebar: var(--surface);
  --green: #12a07a; --green-ink: #0d7a5c; --green-soft: #ddf6ec; --green-strong: #0f8f6c; --green-strong-press: #0b7558;
  --red: #e5484d; --red-ink: #be2f3a; --red-soft: #ffe7e6;
  --amber: #f0a020; --amber-ink: #8f5500; --amber-soft: #fff0cc; --gold-ink: #8f5500;
  --blue: var(--accent); --cyan: #2f9be8;
  --r-xs: 12px; --r-sm: 14px; --r: 20px; --r-lg: 26px; --radius: 14px; --radius-sm: 12px;
  --shadow-xs: 0 1px 1px rgb(53 35 26 / 5%);
  --shadow-sm: 0 1px 2px rgb(53 35 26 / 5%), 0 4px 12px rgb(53 35 26 / 6%);
  --shadow: 0 1px 2px rgb(53 35 26 / 5%), 0 12px 32px rgb(53 35 26 / 9%);
  --shadow-lg: 0 26px 64px rgb(90 45 20 / 20%);
  --shadow-accent: none;
  --font-display: "Nunito", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", sans-serif;
  --ds-tangerine: #ff8a3d; --ds-sun: #ffc53d; --ds-mint: #1fb58f; --ds-sky: #3aa0ff; --ds-berry: #ff5d8f;
  --ds-canvas: #fff3e8; --ds-card: #ffffff; --ds-card-edge: #f3dcc6;
  --ds-nav-active-bg: var(--accent-soft); --ds-nav-active-ink: var(--accent-ink); --ds-nav-mark: var(--accent);
  --ds-display-weight: 800; --ds-display-track: 0;
  --ds-r-card: 20px; --ds-r-control: 10px; --ds-r-hero: 28px;
  --ds-press: none;
  --panorama-day-rgb: 255 243 232; --panorama-night-rgb: 33 23 31;
  --dot-shell-canvas: #fff3e8; --dot-shell-surface: #ffffff; --dot-shell-soft: #fff2e4; --dot-shell-line: #f0d8c2;
  --dot-shell-ink: #35231a; --dot-shell-muted: #7a6151; --dot-shell-accent: #5a4eb0; --dot-shell-accent-ink: #4b3fa0;
  --avdot-purple: #5a4eb0; --avdot-purple-dark: #4d4299;
}
html[data-ds][data-visual-world][data-palette][data-ds-skin="vivid"].cv-dark {
  color-scheme: dark;
  --bg: #21171f; --bg-tint: #251a23;
  --surface: #2b1f29; --surface-2: #342633; --surface-3: #41303f;
  --ink: #fbeee3; --ink-2: #eadbd0; --muted: #c9b6aa; --muted-2: #c9b6aa;
  --hairline: #48363f; --hairline-soft: #3a2b35;
  --accent: #c6bfee; --accent-press: #d6d0f3; --accent-ink: #c6bfee; --accent-soft: #3b2f63; --accent-soft-2: #2f2547; --accent-edge: #6a60b8; --accent-2: #a69ee0;
  --academy-action: #6458c0; --academy-action-hover: #6f64c9; --academy-scene-ink: #fbeee3;
  --green-ink: #7fe0bf; --green-soft: #1b3a31; --red-ink: #ffb0b0; --red-soft: #4a2730; --amber-ink: #ffd27a; --amber-soft: #44331f; --gold-ink: #ffd27a;
  --shadow-xs: 0 1px 1px rgb(0 0 0 / 20%);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 22%), 0 4px 12px rgb(0 0 0 / 16%);
  --shadow: 0 1px 2px rgb(0 0 0 / 24%), 0 12px 32px rgb(0 0 0 / 24%);
  --shadow-lg: 0 26px 64px rgb(0 0 0 / 50%);
  --shadow-accent: none; --ds-press: none;
  --ds-nav-active-bg: #4a3c7c; /* 5.10.3: the plain --accent-soft sat too close to the plum surface for the selected nav/tab */
  --ds-canvas: #21171f; --ds-card: #2b1f29; --ds-card-edge: #45343e;
  --dot-shell-canvas: #21171f; --dot-shell-surface: #2b1f29; --dot-shell-soft: #342633; --dot-shell-line: #48363f;
  --dot-shell-ink: #fbeee3; --dot-shell-muted: #c9b6aa; --dot-shell-accent: #6458c0; --dot-shell-accent-ink: #c6bfee;
}

/* Ginkgo (5.10.0) — 银杏庭院: lime-washed walls, slate roof tiles (黛), ginkgo gold, cinnabar columns.
   Chinese headings use Songti with the academy serif; actions are slate so red keeps meaning "attention". */
html[data-ds][data-visual-world][data-palette][data-ds-skin="ginkgo"] {
  color-scheme: light;
  --bg: #f2ede3; --bg-tint: #f6f2ea;
  --surface: #fffdf8; --surface-2: #f7f2e8; --surface-3: #ece5d6;
  --ink: #27221c; --ink-2: #433b32; --muted: #675e52; --muted-2: #675e52;
  --hairline: #e1d7c5; --hairline-soft: #ebe3d4; --line: var(--hairline); --panel: var(--surface); --soft: var(--surface-2);
  --accent: #2f4a5c; --accent-press: #233a49; --accent-ink: #2b4557; --accent-soft: #e4eaee; --accent-soft-2: #f0f4f6; --accent-edge: #a5b7c3; --accent-2: #3f6278; --accent-glow: transparent;
  --academy-action: #2f4a5c; --academy-action-hover: #233a49; --academy-scene-ink: #27221c; --academy-sidebar: var(--surface);
  --green: #2f7259; --green-ink: #2a6650; --green-soft: #e2efe9; --green-strong: #2f7259; --green-strong-press: #245a46;
  --red: #b23a2b; --red-ink: #9c3226; --red-soft: #f7e4dd;
  --amber: #b07a17; --amber-ink: #7a5512; --amber-soft: #f6e9cc; --gold-ink: #7a5a10;
  --blue: var(--accent); --cyan: var(--accent-2);
  --r-xs: 8px; --r-sm: 10px; --r: 12px; --r-lg: 16px; --radius: 10px; --radius-sm: 8px;
  --shadow-xs: 0 1px 1px rgb(58 44 24 / 5%);
  --shadow-sm: 0 1px 2px rgb(58 44 24 / 6%), 0 4px 12px rgb(58 44 24 / 6%);
  --shadow: 0 1px 2px rgb(58 44 24 / 6%), 0 12px 32px rgb(58 44 24 / 10%);
  --shadow-lg: 0 24px 64px rgb(40 30 16 / 22%);
  --shadow-accent: none;
  --ds-brass: #b8861c; --ds-brass-ink: #7a5a10; --ds-brass-soft: #f8ecc9;
  --ds-canvas: #f2ede3; --ds-card: #fffdf8; --ds-card-edge: #e5dbca;
  --ds-nav-active-bg: #f6e8c4; --ds-nav-active-ink: #57400f; --ds-nav-mark: #b03a28;
  --ds-display-weight: 700; --ds-display-track: -.005em;
  --ds-r-card: 12px; --ds-r-control: 10px; --ds-r-hero: 18px;
  --panorama-day-rgb: 242 237 227; --panorama-night-rgb: 28 25 27;
  --dot-shell-canvas: #f2ede3; --dot-shell-surface: #fffdf8; --dot-shell-soft: #f7f2e8; --dot-shell-line: #e1d7c5;
  --dot-shell-ink: #27221c; --dot-shell-muted: #675e52; --dot-shell-accent: #2f4a5c; --dot-shell-accent-ink: #2b4557;
  --avdot-purple: #4b42c4; --avdot-purple-dark: #3a328f;
}
html[data-ds][data-visual-world][data-palette][data-ds-skin="ginkgo"].cv-dark {
  color-scheme: dark;
  --bg: #1c191b; --bg-tint: #201c1e;
  --surface: #262124; --surface-2: #2e292b; --surface-3: #3a3336;
  --ink: #f3eadb; --ink-2: #ddd2c2; --muted: #c0b4a3; --muted-2: #c0b4a3;
  --hairline: #443b3c; --hairline-soft: #352e30;
  --accent: #a9c6d6; --accent-press: #c3d8e4; --accent-ink: #b6d0de; --accent-soft: #23333d; --accent-soft-2: #1e2a31; --accent-edge: #4f6f82; --accent-2: #8fb4c8;
  --academy-action: #3b6075; --academy-action-hover: #46708a; --academy-scene-ink: #f3eadb;
  --green-ink: #8fd1b5; --green-soft: #1f3a31; --green-strong: #2f7259; --green-strong-press: #3a8569;
  --red-ink: #ffb3a6; --red-soft: #46271f; --amber-ink: #ecc77e; --amber-soft: #3d3222; --gold-ink: #e8c46a;
  --shadow-xs: 0 1px 1px rgb(0 0 0 / 20%);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 22%), 0 4px 12px rgb(0 0 0 / 16%);
  --shadow: 0 1px 2px rgb(0 0 0 / 24%), 0 12px 32px rgb(0 0 0 / 24%);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 45%);
  --shadow-accent: none;
  --ds-brass: #e2b24c; --ds-brass-ink: #ecc66e; --ds-brass-soft: #3b3020;
  --ds-canvas: #1c191b; --ds-card: #262124; --ds-card-edge: #3e3537;
  --ds-nav-active-bg: #3a2f1d; --ds-nav-active-ink: #f1d28b; --ds-nav-mark: #e0745a;
  --dot-shell-canvas: #1c191b; --dot-shell-surface: #262124; --dot-shell-soft: #2e292b; --dot-shell-line: #443b3c;
  --dot-shell-ink: #f3eadb; --dot-shell-muted: #c0b4a3; --dot-shell-accent: #3b6075; --dot-shell-accent-ink: #b6d0de;
}

/* Seaside (5.10.0) — 海边书屋: whitewash and pale oak, sea blue, coral cushions. A light sans display face. */
html[data-ds][data-visual-world][data-palette][data-ds-skin="seaside"] {
  color-scheme: light;
  --bg: #f1eee9; --bg-tint: #f5f3ef;
  --surface: #fffefb; --surface-2: #f5f2ec; --surface-3: #e9e4db;
  --ink: #1d2833; --ink-2: #36424f; --muted: #5a6470; --muted-2: #5a6470;
  --hairline: #ddd8cf; --hairline-soft: #e8e4dc; --line: var(--hairline); --panel: var(--surface); --soft: var(--surface-2);
  --accent: #1d6390; --accent-press: #164e73; --accent-ink: #1b5a84; --accent-soft: #e1edf5; --accent-soft-2: #eef5fa; --accent-edge: #9fc1d8; --accent-2: #2f7fb0; --accent-glow: transparent;
  --academy-action: #1d6390; --academy-action-hover: #164e73; --academy-scene-ink: #1d2833; --academy-sidebar: var(--surface);
  --green: #1f7a5c; --green-ink: #1a6a50; --green-soft: #ddefe7; --green-strong: #1f7a5c; --green-strong-press: #186248;
  --red: #c4412f; --red-ink: #a8372a; --red-soft: #fbe6e1;
  --amber: #b97a12; --amber-ink: #7d5410; --amber-soft: #f8ebcf; --gold-ink: #7d5410;
  --blue: var(--accent); --cyan: var(--accent-2);
  --r-xs: 10px; --r-sm: 12px; --r: 16px; --r-lg: 20px; --radius: 12px; --radius-sm: 10px;
  --shadow-xs: 0 1px 1px rgb(29 40 51 / 4%);
  --shadow-sm: 0 1px 2px rgb(29 40 51 / 5%), 0 4px 14px rgb(29 70 110 / 6%);
  --shadow: 0 1px 2px rgb(29 40 51 / 5%), 0 14px 34px rgb(29 70 110 / 9%);
  --shadow-lg: 0 24px 64px rgb(16 32 52 / 20%);
  --shadow-accent: none;
  --font-display: "Aivia Instrument Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", sans-serif;
  --ds-brass: #d4673f; --ds-brass-ink: #9c4422; --ds-brass-soft: #fbe7dd;
  --ds-canvas: #f1eee9; --ds-card: #fffefb; --ds-card-edge: #e3ded5;
  --ds-nav-active-bg: var(--accent-soft); --ds-nav-active-ink: var(--accent-ink); --ds-nav-mark: #d4673f;
  --ds-display-weight: 650; --ds-display-track: -.01em;
  --ds-r-card: 16px; --ds-r-control: 10px; --ds-r-hero: 22px;
  --panorama-day-rgb: 241 238 233; --panorama-night-rgb: 17 26 39;
  --dot-shell-canvas: #f1eee9; --dot-shell-surface: #fffefb; --dot-shell-soft: #f5f2ec; --dot-shell-line: #ddd8cf;
  --dot-shell-ink: #1d2833; --dot-shell-muted: #5a6470; --dot-shell-accent: #1d6390; --dot-shell-accent-ink: #1b5a84;
  --avdot-purple: #4b42c4; --avdot-purple-dark: #3a328f;
}
html[data-ds][data-visual-world][data-palette][data-ds-skin="seaside"].cv-dark {
  color-scheme: dark;
  --bg: #111a27; --bg-tint: #141e2c;
  --surface: #182334; --surface-2: #1f2b3f; --surface-3: #29364c;
  --ink: #eaf0f5; --ink-2: #d0d9e2; --muted: #a6b3c1; --muted-2: #a6b3c1;
  --hairline: #2c3a4f; --hairline-soft: #223044;
  --accent: #9ccbec; --accent-press: #bcdcf3; --accent-ink: #acd3ef; --accent-soft: #1d3550; --accent-soft-2: #182b40; --accent-edge: #3f6d93; --accent-2: #7fb6de;
  --academy-action: #26689a; --academy-action-hover: #2f77ad; --academy-scene-ink: #eaf0f5;
  --green-ink: #8fd8bb; --green-soft: #173a33; --green-strong: #1f7a5c; --green-strong-press: #28906d;
  --red-ink: #ffb0a3; --red-soft: #44262a; --amber-ink: #f0c97a; --amber-soft: #3a3122; --gold-ink: #f0c97a;
  --shadow-xs: 0 1px 1px rgb(0 0 0 / 22%);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 24%), 0 4px 12px rgb(0 0 0 / 18%);
  --shadow: 0 1px 2px rgb(0 0 0 / 26%), 0 12px 32px rgb(0 0 0 / 26%);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 48%);
  --shadow-accent: none;
  --ds-brass: #f08f6c; --ds-brass-ink: #f4a487; --ds-brass-soft: #3d2a28;
  --ds-canvas: #111a27; --ds-card: #182334; --ds-card-edge: #2a3850;
  --ds-nav-active-bg: #1d3550; --ds-nav-active-ink: #bfe0f7; --ds-nav-mark: #f08f6c;
  --dot-shell-canvas: #111a27; --dot-shell-surface: #182334; --dot-shell-soft: #1f2b3f; --dot-shell-line: #2c3a4f;
  --dot-shell-ink: #eaf0f5; --dot-shell-muted: #a6b3c1; --dot-shell-accent: #26689a; --dot-shell-accent-ink: #acd3ef;
}

/* Observatory (5.10.0) — 星空天文台: lavender plaster, midnight dome ribs, a brass telescope. */
html[data-ds][data-visual-world][data-palette][data-ds-skin="observatory"] {
  color-scheme: light;
  --bg: #eeedf4; --bg-tint: #f3f2f8;
  --surface: #ffffff; --surface-2: #f4f3f9; --surface-3: #e6e4ef;
  --ink: #1c1d36; --ink-2: #35364f; --muted: #5d5e76; --muted-2: #5d5e76;
  --hairline: #dcdae8; --hairline-soft: #e7e5f0; --line: var(--hairline); --panel: var(--surface); --soft: var(--surface-2);
  --accent: #3d3a8c; --accent-press: #2f2c70; --accent-ink: #3a3786; --accent-soft: #e8e7f6; --accent-soft-2: #f3f2fb; --accent-edge: #b3b0e0; --accent-2: #5a56b0; --accent-glow: transparent;
  --academy-action: #3d3a8c; --academy-action-hover: #2f2c70; --academy-scene-ink: #1c1d36; --academy-sidebar: var(--surface);
  --green: #2f7259; --green-ink: #2a6650; --green-soft: #e2efe9; --green-strong: #2f7259; --green-strong-press: #245a46;
  --red: #c0392b; --red-ink: #a3332a; --red-soft: #f8e6e3;
  --amber: #b07a17; --amber-ink: #7f5512; --amber-soft: #f6ebd3; --gold-ink: #78591c;
  --blue: var(--accent); --cyan: var(--accent-2);
  --r-xs: 8px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --radius: 10px; --radius-sm: 8px;
  --shadow-xs: 0 1px 1px rgb(28 29 54 / 4%);
  --shadow-sm: 0 1px 2px rgb(28 29 54 / 5%), 0 4px 12px rgb(40 36 90 / 6%);
  --shadow: 0 1px 2px rgb(28 29 54 / 5%), 0 12px 32px rgb(40 36 90 / 9%);
  --shadow-lg: 0 24px 64px rgb(20 18 50 / 20%);
  --shadow-accent: none;
  --ds-brass: #a8833a; --ds-brass-ink: #78591c; --ds-brass-soft: #f3ecdc;
  --ds-canvas: #eeedf4; --ds-card: #ffffff; --ds-card-edge: #e0deeb;
  --ds-nav-active-bg: var(--accent-soft); --ds-nav-active-ink: var(--accent-ink); --ds-nav-mark: var(--ds-brass);
  --ds-display-weight: 700; --ds-display-track: -.005em;
  --ds-r-card: 14px; --ds-r-control: 10px; --ds-r-hero: 20px;
  --panorama-day-rgb: 238 237 244; --panorama-night-rgb: 19 20 42;
  --dot-shell-canvas: #eeedf4; --dot-shell-surface: #ffffff; --dot-shell-soft: #f4f3f9; --dot-shell-line: #dcdae8;
  --dot-shell-ink: #1c1d36; --dot-shell-muted: #5d5e76; --dot-shell-accent: #3d3a8c; --dot-shell-accent-ink: #3a3786;
  --avdot-purple: #4b42c4; --avdot-purple-dark: #3a328f;
}
html[data-ds][data-visual-world][data-palette][data-ds-skin="observatory"].cv-dark {
  color-scheme: dark;
  --bg: #13142a; --bg-tint: #16172f;
  --surface: #1b1c37; --surface-2: #232442; --surface-3: #2d2e4f;
  --ink: #ecebf7; --ink-2: #d3d2e6; --muted: #aeadc6; --muted-2: #aeadc6;
  --hairline: #2f3054; --hairline-soft: #26274a;
  --accent: #bcb8f4; --accent-press: #d3d0f8; --accent-ink: #c8c5f6; --accent-soft: #2c2b5c; --accent-soft-2: #232347; --accent-edge: #5c58b0; --accent-2: #9f9aec;
  --academy-action: #4d48b0; --academy-action-hover: #5a55c2; --academy-scene-ink: #ecebf7;
  --green-ink: #8fd1b5; --green-soft: #1d3830; --green-strong: #2f7259; --green-strong-press: #3a8569;
  --red-ink: #ffb1a8; --red-soft: #46282f; --amber-ink: #ecc77e; --amber-soft: #3b3123; --gold-ink: #e2c387;
  --shadow-xs: 0 1px 1px rgb(0 0 0 / 22%);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 24%), 0 4px 12px rgb(0 0 0 / 18%);
  --shadow: 0 1px 2px rgb(0 0 0 / 26%), 0 12px 32px rgb(0 0 0 / 26%);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 48%);
  --shadow-accent: none;
  --ds-brass: #dcb86e; --ds-brass-ink: #e6c787; --ds-brass-soft: #37301f;
  --ds-canvas: #13142a; --ds-card: #1b1c37; --ds-card-edge: #2e2f55;
  --ds-nav-active-bg: #2c2b5c; --ds-nav-active-ink: #d3d0f8;
  --dot-shell-canvas: #13142a; --dot-shell-surface: #1b1c37; --dot-shell-soft: #232442; --dot-shell-line: #2f3054;
  --dot-shell-ink: #ecebf7; --dot-shell-muted: #aeadc6; --dot-shell-accent: #4d48b0; --dot-shell-accent-ink: #c8c5f6;
}

/* Learner stage: primary learners get larger type and touch targets in every skin. */
html[data-ds][data-visual-world][data-palette][data-ds-skin][data-stage="primary"] {
  --ds-base: 16px;
  --ds-target: 48px;
}

/* ── 2. Canvas and type ───────────────────────────────────────────────────────────── */
html[data-ds][data-visual-world] body {
  font-family: var(--ds-sans) !important;
  font-size: var(--ds-base);
  color: var(--ink);
  background-color: var(--ds-canvas) !important;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}
html[data-ds][data-visual-world] :is(h1, h2, h3) { font-family: var(--font-display) !important; letter-spacing: var(--ds-display-track) !important; }
html[data-ds][data-visual-world] :is(h4, h5, h6, button, input, textarea, select, label) { font-family: var(--ds-sans); }
html[data-ds][data-visual-world] ::selection { background: var(--accent-soft); color: var(--ink); }
/* Academy: Baskerville for English, Songti for Chinese headings where the system has it. */
html[data-ds][data-visual-world]:is([data-ds-skin="academy"], [data-ds-skin="library"], [data-ds-skin="ginkgo"], [data-ds-skin="observatory"]) {
  --font-display: "Aivia Baskerville", Baskerville, "Libre Baskerville", "Baskerville Old Face", Georgia, "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "PingFang SC", "Microsoft YaHei", serif;
}
/* Minimal shows no scenery: the canvas is the colour. */
html[data-ds][data-visual-world][data-ds-skin="minimal"] body::before { background: var(--ds-canvas) !important; }
html[data-ds][data-visual-world][data-ds-skin="minimal"] .academy-night-canvas { background: var(--ds-canvas) !important; }
html[data-ds][data-visual-world][data-ds-skin="minimal"] #appShell .academy-scenery { display: none !important; }
/* Academy and vivid: scenery stays atmospheric behind the workspace; the veil keeps text calm. */
html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]) body::before {
  background: linear-gradient(rgb(var(--panorama-day-rgb) / 97%) 0, rgb(var(--panorama-day-rgb) / 80%) 200px, rgb(var(--panorama-day-rgb) / 55%) 520px), linear-gradient(90deg, rgb(var(--panorama-day-rgb) / 86%), rgb(var(--panorama-day-rgb) / 95%) 22%, rgb(var(--panorama-day-rgb) / 95%) 84%, rgb(var(--panorama-day-rgb) / 82%)), var(--panorama-day) var(--panorama-position) / cover no-repeat !important;
}
html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]) .academy-night-canvas {
  background: linear-gradient(rgb(var(--panorama-night-rgb) / 97%) 0, rgb(var(--panorama-night-rgb) / 80%) 200px, rgb(var(--panorama-night-rgb) / 58%) 520px), linear-gradient(90deg, rgb(var(--panorama-night-rgb) / 88%), rgb(var(--panorama-night-rgb) / 95%) 22%, rgb(var(--panorama-night-rgb) / 95%) 84%, rgb(var(--panorama-night-rgb) / 84%)), var(--panorama-night) var(--panorama-position) / cover no-repeat !important;
}

/* ── 3. Shell: sidebar ─────────────────────────────────────────────────────────────── */
html[data-ds][data-visual-world] .app-shell { width: 100% !important; max-width: none !important; }
@media (min-width: 1181px) { html[data-ds][data-visual-world] .app-shell { grid-template-columns: var(--ds-sidebar) minmax(0, 1fr) !important; } }
html[data-ds][data-visual-world] #appShell .sidebar {
  width: var(--ds-sidebar) !important;
  padding: 22px 14px 16px !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  border-right: 1px solid var(--hairline-soft) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: saturate(140%) blur(18px) !important;
  backdrop-filter: saturate(140%) blur(18px) !important;
  gap: 6px;
}
html[data-ds][data-visual-world][data-ds-skin="minimal"] #appShell .sidebar { background: var(--ds-canvas) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-ds][data-visual-world] .sidebar .brand { padding: 0 8px 22px !important; gap: 10px !important; align-items: center; }
html[data-ds][data-visual-world] .sidebar .brand-mark { width: 34px !important; height: 34px !important; flex: none; }
html[data-ds][data-visual-world] .sidebar .brand strong {
  font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important;
  font-size: 19px !important; line-height: 1.15; color: var(--ink) !important; letter-spacing: var(--ds-display-track) !important;
}
html[data-ds][data-visual-world][data-ds-skin="vivid"] .sidebar .brand strong { font-size: 20px !important; font-weight: 900 !important; color: var(--accent-ink) !important; }
html[data-ds][data-visual-world] #mainNav.nav { gap: 2px !important; }
html[data-ds][data-visual-world] #mainNav .nav-item {
  position: relative;
  min-height: var(--ds-target) !important; padding: 0 12px !important; gap: 12px !important;
  border: 0 !important; border-radius: var(--ds-r-control) !important;
  color: var(--ink-2) !important; background: transparent !important;
  font-size: calc(var(--ds-base) - 1px) !important; font-weight: 560 !important;
  transition: background-color var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease) !important;
}
html[data-ds][data-visual-world] #mainNav .nav-item .nav-ic { width: 22px; height: 22px; display: inline-grid; place-items: center; opacity: .82; }
html[data-ds][data-visual-world] #mainNav .nav-item .ic { width: 20px !important; height: 20px !important; stroke-width: 1.75 !important; }
@media (hover: hover) and (pointer: fine) {
  html[data-ds][data-visual-world] #mainNav .nav-item:not(.active):hover { background: color-mix(in srgb, var(--ink) 5%, transparent) !important; color: var(--ink) !important; }
}
html[data-ds][data-visual-world] #mainNav .nav-item.active {
  background: var(--ds-nav-active-bg) !important; color: var(--ds-nav-active-ink) !important; font-weight: 680 !important;
}
html[data-ds][data-visual-world] #mainNav .nav-item.active .nav-ic { opacity: 1; }
html[data-ds][data-visual-world] #mainNav .nav-item.active::before {
  content: "" !important; position: absolute !important; left: 0 !important; top: 50% !important;
  width: 3px !important; height: 18px !important; transform: translateY(-50%);
  border-radius: 0 3px 3px 0 !important; background: var(--ds-nav-mark) !important; display: block !important;
}

/* Daily English: a quiet line of English rather than a card with clip art. */
html[data-ds][data-visual-world] .sidebar .quote-card {
  margin: auto 4px 10px !important; padding: 16px 4px 4px !important;
  background: none !important; border: 0 !important; border-top: 1px solid var(--hairline) !important; border-radius: 0 !important; box-shadow: none !important;
}
html[data-ds][data-visual-world] .sidebar .quote-card::before, html[data-ds][data-visual-world] .sidebar .quote-card::after { display: none !important; }
html[data-ds][data-visual-world] .sidebar .quote-card .eyebrow {
  display: flex; align-items: center; gap: 6px; margin: 0 0 8px !important;
  color: var(--muted) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
}
html[data-ds][data-visual-world] .sidebar .quote-card .eyebrow .ic { color: var(--ds-brass, var(--accent)); width: 14px; height: 14px; }
html[data-ds][data-visual-world] .sidebar .quote-card #dailyQuote {
  display: block; color: var(--ink) !important; font-family: var(--font-display) !important; font-weight: 400 !important;
  font-size: 15px !important; line-height: 1.55 !important;
}
html[data-ds][data-visual-world]:is([data-ds-skin="academy"], [data-ds-skin="library"], [data-ds-skin="ginkgo"], [data-ds-skin="observatory"]) .sidebar .quote-card #dailyQuote { font-style: italic; font-size: 16px !important; }
html[data-ds][data-visual-world][data-ds-skin="vivid"] .sidebar .quote-card {
  border: 0 !important; border-radius: var(--ds-r-card) !important; padding: 14px 14px 12px !important;
  background: color-mix(in srgb, var(--ds-sun) 22%, var(--surface)) !important;
}
html[data-ds][data-visual-world][data-ds-skin="vivid"] .sidebar .quote-card #dailyQuote { font-weight: 700 !important; }
html[data-ds][data-visual-world][data-ds-skin="vivid"].cv-dark .sidebar .quote-card { background: color-mix(in srgb, var(--ds-sun) 14%, var(--surface)) !important; }

html[data-ds][data-visual-world] .sidebar .account-chip {
  min-height: 56px; padding: 8px 10px !important; gap: 10px !important;
  border: 1px solid var(--hairline-soft) !important; border-radius: var(--ds-r-control) !important;
  background: var(--surface) !important; box-shadow: none !important;
}
html[data-ds][data-visual-world][data-ds-skin="minimal"] .sidebar .account-chip { background: transparent !important; }
html[data-ds][data-visual-world] .sidebar .account-avatar { background: var(--accent) !important; color: #fff !important; font-weight: 700; }
html[data-ds][data-visual-world].cv-dark .sidebar .account-avatar { background: var(--academy-action) !important; }
html[data-ds][data-visual-world] .sidebar .account-meta small { color: var(--muted) !important; font-size: 12px !important; }
html[data-ds][data-visual-world] .sidebar .account-meta strong { color: var(--ink) !important; font-size: 14px !important; }

/* ── 4. Shell: header (desktop and tablet) ───────────────────────────────────────────
   One row: page title and level on the left, tools on the right; Dot sits at the end. */
html[data-ds][data-visual-world] #appShell .main { padding: 0 var(--ds-gutter) 64px !important; row-gap: 20px !important; }
html[data-ds][data-visual-world] #appShell .main > :is(.view, #view-today) { max-width: var(--ds-content) !important; width: 100% !important; margin-inline: auto !important; }
@media (min-width: 768px) {
  html[data-ds][data-visual-world][data-ds-skin] body[data-view]:not([data-dot-shell="guided"]) #appShell .main #dot-original-topbar.topbar,
  html[data-ds][data-visual-world][data-ds-skin] body[data-view]:not([data-dot-shell="guided"]) #appShell .main #dot-original-topbar.topbar:has(#avdot-launcher:not([hidden])),
  html[data-ds][data-visual-world][data-ds-skin] body[data-view]:not([data-dot-shell="guided"]) #appShell .main #dot-original-topbar.topbar:has(.academy-home-masthead:not(:empty)) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    grid-template-areas: "title actions" "masthead masthead" !important;
    align-items: start !important; column-gap: 24px !important; row-gap: 12px !important;
    width: 100%; max-width: var(--ds-content); margin: 0 auto !important; box-sizing: border-box;
    min-height: 0 !important; padding: 28px 0 8px !important;
  }
  html[data-ds][data-visual-world] #appShell #dot-original-topbar :is(#menuToggle, .academy-mobile-brand, .academy-search-toggle, .academy-search-close) { display: none !important; }
  html[data-ds][data-visual-world] #appShell #dot-original-topbar .topbar-title { grid-area: title !important; width: auto !important; padding: 0 !important; display: grid; gap: 6px; }
  html[data-ds][data-visual-world] #appShell #dot-original-topbar .top-actions {
    grid-area: actions !important; position: static !important; display: flex !important;
    align-items: center; gap: 8px !important; max-width: none !important; padding-top: 2px;
  }
  html[data-ds][data-visual-world] #appShell #dot-original-topbar .top-actions #academySearchBox { order: 1; }
  html[data-ds][data-visual-world] #appShell #dot-original-topbar .top-actions #themeToggle { order: 2; }
  html[data-ds][data-visual-world] #appShell #dot-original-topbar .top-actions #dot-shell-return-entry { order: 3; }
  html[data-ds][data-visual-world] #appShell #dot-original-topbar .top-actions #avdot-launcher { order: 4; }
  html[data-ds][data-visual-world] #appShell #dot-original-topbar .academy-home-masthead { grid-area: masthead !important; }
  html[data-ds][data-visual-world] #appShell #dot-original-topbar .academy-header-scene { top: 0; height: 200px; width: min(52%, 560px); }
}
html[data-ds][data-visual-world] #appShell #dot-original-topbar h1#viewTitle {
  margin: 0 !important; color: var(--ink) !important;
  font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important;
  font-size: 32px !important; line-height: 1.2 !important; letter-spacing: var(--ds-display-track) !important;
}
html[data-ds][data-visual-world][data-ds-skin="vivid"] #appShell #dot-original-topbar h1#viewTitle { font-weight: 900 !important; }
/* Level and class read as one quiet line under the title. */
html[data-ds][data-visual-world] #appShell #workspaceLevel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px !important; min-height: 0; color: var(--muted) !important; font-size: 14px !important; }
html[data-ds][data-visual-world] #appShell #workspaceLevel :is(.learning-level, .workspace-class-context) { display: inline-flex; align-items: center; gap: 6px; min-height: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; color: var(--muted) !important; }
html[data-ds][data-visual-world] #appShell #workspaceLevel strong { color: var(--ink) !important; font-weight: 650 !important; font-size: 14px !important; }
html[data-ds][data-visual-world] #appShell #workspaceLevel .workspace-class-context::before { content: ""; width: 1px; height: 12px; background: var(--hairline) !important; margin-right: 8px; display: inline-block !important; position: static !important; }
html[data-ds][data-visual-world] #appShell #workspaceLevel .learning-level-help { min-width: 0 !important; min-height: 0 !important; }
html[data-ds][data-visual-world] #appShell #workspaceLevel .learning-level-help > summary { width: 28px !important; height: 28px !important; min-height: 28px !important; min-width: 28px !important; }

/* Header tools share one height and one surface. */
html[data-ds][data-visual-world] #appShell .topbar :is(#themeToggle, #menuToggle, .academy-search-toggle, .academy-search-close, .search-box) {
  height: 44px !important; min-height: 44px !important;
  border: 1px solid var(--hairline) !important; border-radius: var(--ds-r-control) !important;
  background: color-mix(in srgb, var(--surface) 86%, transparent) !important; color: var(--ink-2) !important;
  box-shadow: none !important;
}
html[data-ds][data-visual-world] #appShell .topbar .search-box { width: 280px !important; padding: 0 12px !important; gap: 8px; }
html[data-ds][data-visual-world] #appShell .topbar .search-box input::placeholder { color: var(--muted); opacity: 1; }
html[data-ds][data-visual-world] #appShell .topbar #themeToggle { width: 44px !important; min-width: 44px !important; padding: 0 !important; justify-content: center; }
html[data-ds][data-visual-world] #appShell .topbar #themeToggle > span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Dot: the learning-shell entry is one quiet light pill in every skin (the 5.8.21 design):
   a tint of the skin's colour with a hairline of it, no shadow. Its little face is Dot's own
   violet, so it reads as Dot rather than as two dots floating before the label. */
html[data-ds][data-visual-world] #appShell .topbar #dot-shell-return-entry {
  --dot-shell-accent: var(--ds-dot);
  height: 44px !important; min-height: 44px !important; padding: 0 16px 0 12px !important; gap: 8px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent) !important; border-radius: 999px !important;
  background: var(--accent-soft) !important; color: var(--accent-ink) !important;
  font-weight: 650 !important; font-size: 14px !important; box-shadow: none !important;
}
html[data-ds][data-visual-world] #appShell .topbar #dot-shell-return-entry :is(svg, .ic, span[class*="eye"], [class*="avatar"]) { color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  html[data-ds][data-visual-world] #appShell .topbar #dot-shell-return-entry:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important; }
  /* Dark: mixing into the dark surface turned the tint grey; step the tint itself up instead. */
  html[data-ds][data-visual-world].cv-dark #appShell .topbar #dot-shell-return-entry:hover { background: color-mix(in srgb, var(--accent) 14%, var(--accent-soft)) !important; }
}
html[data-ds][data-visual-world] #appShell .topbar #dot-shell-return-entry:active { transform: scale(.98) !important; }
html[data-ds][data-visual-world] #appShell .topbar #avdot-launcher { width: 44px !important; height: 44px !important; flex: none; }

/* ── 5. Tablet: navigation rail (768–1180px) ─────────────────────────────────────────
   All destinations stay visible with icon and label; no drawer and no bottom tab bar. */
@media (min-width: 768px) and (max-width: 1180px) {
  html[data-ds][data-visual-world] { --ds-gutter: 28px; }
  html[data-ds][data-visual-world] .app-shell { grid-template-columns: var(--ds-rail) minmax(0, 1fr) !important; }
  html[data-ds][data-visual-world] #appShell .sidebar {
    position: sticky !important; top: 0 !important; left: auto !important; transform: none !important; visibility: visible !important;
    width: var(--ds-rail) !important; height: 100vh !important; height: 100dvh !important; z-index: 20 !important;
    padding: 16px 8px 12px !important; border-radius: 0 !important; box-shadow: none !important; transition: none !important;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  }
  html[data-ds][data-visual-world] #appShell .sidebar .brand { justify-content: center; padding: 0 0 14px !important; }
  html[data-ds][data-visual-world] #appShell .sidebar .brand > div:not(.brand-mark) { display: none !important; }
  html[data-ds][data-visual-world] #appShell #mainNav .nav-item:not(.hidden):not([hidden]) {
    display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important;
    gap: 4px !important; min-height: 60px !important; padding: 8px 2px !important; text-align: center;
    font-size: 12px !important; line-height: 1.2 !important;
  }
  html[data-ds][data-visual-world] #appShell #mainNav .nav-item .nav-tx { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; display: block; text-align: center; }
  html[data-ds][data-visual-world] #appShell #mainNav .nav-item.active::before { left: -8px !important; }
  html[data-ds][data-visual-world] #appShell .sidebar .quote-card { display: none !important; }
  html[data-ds][data-visual-world] #appShell .sidebar .account-footer { margin-top: auto; }
  html[data-ds][data-visual-world] #appShell .sidebar .account-chip { justify-content: center; padding: 6px !important; min-height: 52px; border: 0 !important; background: transparent !important; }
  html[data-ds][data-visual-world] #appShell .sidebar .account-chip :is(.account-meta, .account-gear) { display: none !important; }
  html[data-ds][data-visual-world] body.nav-open::after { display: none !important; }
  html[data-ds][data-visual-world] .mobile-tabbar { display: none !important; }
  html[data-ds][data-visual-world] #appShell .main { padding-bottom: 48px !important; }
  html[data-ds][data-visual-world] #appShell .topbar .search-box { width: 220px !important; }
}

/* ── 6. Phone (< 768px): compact header, bottom tab bar ─────────────────────────────── */
@media (max-width: 767px) {
  html[data-ds][data-visual-world] { --ds-gutter: 16px; }
  html[data-ds][data-visual-world] #appShell .main { padding: 0 16px var(--cv-mobile-tabbar-clearance, 96px) !important; row-gap: 14px !important; }
  html[data-ds][data-visual-world] #appShell #dot-original-topbar { padding-top: max(8px, env(safe-area-inset-top)) !important; }
  /* 5.10.3: bleed exactly the 16px phone gutter (academy-theme.css keeps -24px up to 600px, so 601-767px scrolled sideways by 8px). */
  html[data-ds][data-visual-world] #appShell #dot-original-topbar { margin-inline: -16px !important; }
  html[data-ds][data-visual-world] #appShell #dot-original-topbar .academy-mobile-brand {
    font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important;
    color: var(--ink) !important; font-size: 19px !important; text-align: left !important; letter-spacing: var(--ds-display-track);
    align-self: center;
  }
  html[data-ds][data-visual-world][data-ds-skin="vivid"] #appShell #dot-original-topbar .academy-mobile-brand { color: var(--accent-ink) !important; font-weight: 900 !important; }
  html[data-ds][data-visual-world] #appShell #dot-original-topbar h1#viewTitle { font-size: 26px !important; }
  html[data-ds][data-visual-world] #appShell .topbar :is(#themeToggle, #menuToggle, .academy-search-toggle, .academy-search-close):not([hidden]) {
    width: 44px !important; min-width: 44px !important; padding: 0 !important; display: inline-grid !important; place-items: center;
    border-color: transparent !important; background: transparent !important;
  }
  html[data-ds][data-visual-world] #appShell .topbar .search-box { width: 100% !important; }
  html[data-ds][data-visual-world] #appShell .topbar #dot-shell-return-entry { height: 40px !important; min-height: 40px !important; font-size: 13px !important; padding: 0 14px 0 10px !important; }
  html[data-ds][data-visual-world] #appShell .sidebar { border-radius: 0 var(--ds-r-hero) var(--ds-r-hero) 0 !important; background: var(--surface) !important; width: min(300px, calc(100vw - 56px)) !important; }
  html[data-ds][data-visual-world] #appShell .sidebar .quote-card { display: none !important; }

  html[data-ds][data-visual-world] .mobile-tabbar {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
    -webkit-backdrop-filter: saturate(160%) blur(20px) !important; backdrop-filter: saturate(160%) blur(20px) !important;
    border-top: 1px solid var(--hairline-soft) !important; box-shadow: none !important;
  }
  html[data-ds][data-visual-world] .mobile-tabbar .mobile-tab {
    min-height: 54px !important; gap: 4px !important; border-radius: var(--ds-r-control) !important;
    color: var(--muted) !important; font-size: 11px !important; font-weight: 600 !important; background: transparent !important;
  }
  html[data-ds][data-visual-world] .mobile-tabbar .mobile-tab .mt-icon {
    width: 48px !important; height: 28px !important; display: grid !important; place-items: center; border-radius: 999px !important;
    background: transparent !important; transform: none !important; transition: background-color var(--ds-fast) var(--ds-ease);
  }
  html[data-ds][data-visual-world] .mobile-tabbar .mobile-tab .ic { width: 22px !important; height: 22px !important; stroke-width: 1.8 !important; }
  html[data-ds][data-visual-world] .mobile-tabbar .mobile-tab.active { color: var(--accent-ink) !important; font-weight: 700 !important; }
  html[data-ds][data-visual-world] .mobile-tabbar .mobile-tab.active .mt-icon { background: var(--ds-nav-active-bg, var(--accent-soft)) !important; } /* 5.10.3: same chip as the selected side-nav item */
  html[data-ds][data-visual-world][data-ds-skin="minimal"] .mobile-tabbar .mobile-tab.active { color: var(--ink) !important; }
  html[data-ds][data-visual-world][data-ds-skin="minimal"] .mobile-tabbar .mobile-tab.active .mt-icon { background: var(--ds-nav-active-bg) !important; }
}
html[data-ds][data-visual-world][data-stage="primary"] .mobile-tabbar .mobile-tab { font-size: 12px !important; }

/* ── 7. Primitives: buttons, fields, cards, chips ─────────────────────────────────────
   5.10.3 calm: one button spec in every skin, colour is the only thing a skin changes.
   Primary: the skin's action colour, white label, no shadow, 10px corners. Secondary: the
   surface with a hairline. Small buttons, tags, entry pills, back and the Dot entry are
   999px pills. Hover only darkens one step, a press scales to .98, nothing lifts or shines. */
html[data-ds][data-visual-world] :is(.primary-action, .cv-wc-next, .cv-wc-say, .home-main-cta) {
  min-height: var(--ds-target);
  border-radius: var(--ds-r-control) !important;
  background: var(--academy-action) !important; color: #fff !important; border: 1px solid transparent !important;
  font-weight: 650 !important; letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: background-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease) !important;
}
/* refine.css lifts the word-card buttons with a coloured glow in dark mode at (0,4,2). */
html[data-ds][data-visual-world][data-ds-skin] body :is(.primary-action, .cv-wc-next, .cv-wc-say, .home-main-cta) { box-shadow: none !important; }
html[data-ds][data-visual-world] :is(.primary-action, .cv-wc-next, .cv-wc-say, .home-main-cta):disabled { opacity: .45 !important; box-shadow: none !important; }
html[data-ds][data-visual-world] .primary-action.danger-action { background: var(--red-ink) !important; }
html[data-ds][data-visual-world].cv-dark .primary-action.danger-action { background: #b3382e !important; }
html[data-ds][data-visual-world] :is(.secondary-action, .cv-wc-know, .cv-wc-tool, .pill-button) {
  min-height: var(--ds-target);
  border-radius: var(--ds-r-control) !important;
  background: var(--surface) !important; color: var(--ink-2) !important; border: 1px solid var(--hairline) !important;
  font-weight: 600 !important; box-shadow: none !important;
  transition: background-color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease) !important;
}
html[data-ds][data-visual-world] .icon-button { border-radius: var(--ds-r-control) !important; border-color: var(--hairline) !important; background: var(--surface) !important; color: var(--ink-2) !important; box-shadow: none !important; }
html[data-ds][data-visual-world] .secondary-action.danger-action { color: var(--red-ink) !important; border-color: color-mix(in srgb, var(--red-ink) 30%, var(--hairline)) !important; }
/* Entry pills (开始 / 继续 / 回看 on homework and check-in rows): a light tint with coloured
   text, so the page keeps one solid button. --mod is the workspace colour where a view sets
   one and the skin colour elsewhere; the text is deepened toward the ink so it keeps 4.5:1
   on every skin, light and dark. "Done" rows (is-secondary) step down to a hairline pill. */
html[data-ds][data-visual-world] .task-entry-action {
  --ds-entry: var(--mod, var(--accent));
  border-radius: 999px !important; box-shadow: none !important; font-weight: 650 !important; letter-spacing: 0 !important;
  transition: background-color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease) !important;
}
html[data-ds][data-visual-world] .task-entry-action.is-primary {
  min-height: var(--ds-target);
  background: color-mix(in srgb, var(--ds-entry) 12%, var(--ds-card)) !important; color: color-mix(in srgb, var(--ds-entry) 80%, var(--ink)) !important;
  border: 1px solid color-mix(in srgb, var(--ds-entry) 22%, transparent) !important;
}
html[data-ds][data-visual-world] .task-entry-action.is-secondary { background: transparent !important; color: var(--ink-2) !important; border: 1px solid var(--hairline) !important; }
@media (hover: hover) and (pointer: fine) {
  html[data-ds][data-visual-world] :is(.primary-action, .cv-wc-next, .cv-wc-say, .home-main-cta):not(:disabled):hover { background: var(--academy-action-hover) !important; }
  html[data-ds][data-visual-world] :is(.secondary-action, .cv-wc-know, .cv-wc-tool, .pill-button):not(:disabled):hover { background: var(--surface-2) !important; border-color: var(--accent-edge) !important; color: var(--ink) !important; }
  html[data-ds][data-visual-world] .icon-button:not(:disabled):hover { background: var(--surface-2) !important; }
  html[data-ds][data-visual-world] button.task-entry-action.is-primary:not(:disabled):hover { background: color-mix(in srgb, var(--ds-entry) 18%, var(--ds-card)) !important; }
  html[data-ds][data-visual-world] button.task-entry-action.is-secondary:not(:disabled):hover { background: var(--surface-2) !important; }
}
/* Legacy layers raise buttons 1–2px on hover (it sticks after a tap on phones) and add a
   brightness filter; here nothing lifts and a press is one small scale. The press rule
   outranks the hover one so the feedback survives a hovered pointer. A disabled button keeps
   its own filter (the gated 下一个 is greyed with grayscale), so a hover cannot "enable" it. */
html[data-ds][data-visual-world] :is(.primary-action, .secondary-action, .pill-button, .icon-button, .cv-wc-next, .cv-wc-know, .cv-wc-tool, .cv-wc-say, .home-main-cta, .task-entry-action, .reading-mode-tabs button, .writing-mode-tabs button):hover { transform: none !important; }
html[data-ds][data-visual-world] :is(.primary-action, .secondary-action, .pill-button, .icon-button, .cv-wc-next, .cv-wc-know, .cv-wc-tool, .cv-wc-say, .home-main-cta, .task-entry-action, .reading-mode-tabs button, .writing-mode-tabs button):not(:disabled):hover { filter: none !important; }
html[data-ds][data-visual-world] :is(.primary-action, .secondary-action, .pill-button, .icon-button, .cv-wc-next, .cv-wc-know, .cv-wc-tool, .cv-wc-say, .home-main-cta, .task-entry-action, .cv-rev-btn):not(:disabled):active { transform: scale(.98) !important; }
html[data-ds][data-visual-world] :is(.primary-action, .secondary-action, .cv-wc-next, .cv-wc-know, .cv-wc-tool, .cv-wc-say, .pill-button, .icon-button, .task-entry-action):focus-visible {
  outline: 2px solid var(--accent) !important; outline-offset: 2px !important;
}
html[data-ds][data-visual-world] :is(.primary-action, .cv-wc-next, .cv-wc-say, .home-main-cta):focus-visible { outline-color: var(--accent) !important; }

html[data-ds][data-visual-world] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([class*="search"] > input), textarea, select) {
  border: 1px solid var(--hairline) !important; border-radius: var(--ds-r-control) !important;
  background-color: var(--surface) !important; color: var(--ink) !important;
  transition: border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}
html[data-ds][data-visual-world] .search-box input#globalSearch.search-input, html[data-ds][data-visual-world] .search-box input#globalSearch, html[data-ds][data-visual-world] .search-box input:is([type="search"], [type="text"], :not([type])) { border: 0 !important; background: transparent !important; box-shadow: none !important; }
html[data-ds][data-visual-world] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([class*="search"] > input), textarea, select):focus {
  outline: none !important; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
/* Search fields drawn by their wrapper (icon + input): the wrapper is the field. */
html[data-ds][data-visual-world] :is(label, div)[class*="search"]:has(> input:not([type="checkbox"])) {
  border: 1px solid var(--hairline) !important; border-radius: var(--ds-r-control) !important; background: var(--surface) !important; color: var(--muted);
}
html[data-ds][data-visual-world] [class*="search"] > input:not([type="checkbox"]) { border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; }
html[data-ds][data-visual-world] :is(label, div)[class*="search"]:has(> input:focus) { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important; }
html[data-ds][data-visual-world] .search-box:focus-within { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important; }
html[data-ds][data-visual-world] .search-box input:focus { box-shadow: none !important; }
html[data-ds][data-visual-world] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--academy-action); }

/* Cards: one surface language. Academy and vivid lift slightly; minimal uses a hairline. */
html[data-ds][data-visual-world] .surface-card {
  background: var(--ds-card) !important; border: 1px solid var(--ds-card-edge) !important;
  border-radius: var(--ds-r-card) !important; box-shadow: var(--shadow-sm) !important;
}
html[data-ds][data-visual-world][data-ds-skin="minimal"] .surface-card { box-shadow: none !important; }
html[data-ds][data-visual-world] .section-head h3 { font-size: 19px !important; font-weight: var(--ds-display-weight) !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] .eyebrow { letter-spacing: 0 !important; text-transform: none !important; }
html[data-ds][data-visual-world] :is(.badge, .status-pill, .role-chip) { border-radius: 999px !important; font-weight: 650; }
html[data-ds][data-visual-world] .feedback { border-radius: var(--ds-r-control) !important; }
html[data-ds][data-visual-world] :is(.muted, small) { color: var(--muted); }
html[data-ds][data-visual-world] .ic { stroke-width: 1.8; }
html[data-ds][data-visual-world] :is(.metric-value, .stat-value, .ring span, .hero-progress strong) { font-variant-numeric: tabular-nums lining-nums; }

/* ── 8. Home (学习中心) ────────────────────────────────────────────────────────────────
   Overview becomes one hero panel: the next step on the left, today's numbers on the right.
   Each workspace keeps its own colour so children find "words", "listening"… by sight. */
html[data-ds][data-visual-world][data-ds-skin="academy"] {
  --ds-mod-vocab: #203d86; --ds-mod-listen: #2f7259; --ds-mod-reading: #8a6418; --ds-mod-writing: #8a2d3b; --ds-mod-review: #3d5fb5; --ds-mod-records: #5b4a8a;
}
html[data-ds][data-visual-world][data-ds-skin="academy"].cv-dark {
  --ds-mod-vocab: #a9bdf3; --ds-mod-listen: #8fd1b5; --ds-mod-reading: #e2c387; --ds-mod-writing: #f0a3ad; --ds-mod-review: #a9bdf3; --ds-mod-records: #c7b8f0;
}
html[data-ds][data-visual-world][data-ds-skin="library"] {
  --ds-mod-vocab: #1f5c46; --ds-mod-listen: #2f5f86; --ds-mod-reading: #8a6418; --ds-mod-writing: #8a2d3b; --ds-mod-review: #5b4a8a; --ds-mod-records: #7a5b1d;
}
html[data-ds][data-visual-world][data-ds-skin="library"].cv-dark {
  --ds-mod-vocab: #a8cdb3; --ds-mod-listen: #9cc3e6; --ds-mod-reading: #e2c387; --ds-mod-writing: #f0a3ad; --ds-mod-review: #c7b8f0; --ds-mod-records: #e8c47c;
}
html[data-ds][data-visual-world][data-ds-skin="vivid"] {
  --ds-mod-vocab: #5a4eb0; --ds-mod-listen: #1672bd; --ds-mod-reading: #0a7d60; --ds-mod-writing: #c2510f; --ds-mod-review: #c4366a; --ds-mod-records: #9a6a00;
}
html[data-ds][data-visual-world][data-ds-skin="vivid"].cv-dark {
  --ds-mod-vocab: #c6bfee; --ds-mod-listen: #7cc4ff; --ds-mod-reading: #6fe0bd; --ds-mod-writing: #ffab73; --ds-mod-review: #ff8fb4; --ds-mod-records: #ffd36b;
}
html[data-ds][data-visual-world][data-ds-skin="ginkgo"] {
  --ds-mod-vocab: #2f4a5c; --ds-mod-listen: #2f6f5a; --ds-mod-reading: #8a6418; --ds-mod-writing: #9b3324; --ds-mod-review: #5b4a8a; --ds-mod-records: #7a5b1d;
}
html[data-ds][data-visual-world][data-ds-skin="ginkgo"].cv-dark {
  --ds-mod-vocab: #a9c6d6; --ds-mod-listen: #8fd1b5; --ds-mod-reading: #e2c387; --ds-mod-writing: #f2a596; --ds-mod-review: #c7b8f0; --ds-mod-records: #e8c47c;
}
html[data-ds][data-visual-world][data-ds-skin="seaside"] {
  --ds-mod-vocab: #1d6390; --ds-mod-listen: #1f7a6c; --ds-mod-reading: #8a6418; --ds-mod-writing: #b04e2d; --ds-mod-review: #5b4a8a; --ds-mod-records: #7a5b1d;
}
html[data-ds][data-visual-world][data-ds-skin="seaside"].cv-dark {
  --ds-mod-vocab: #9ccbec; --ds-mod-listen: #86d6c6; --ds-mod-reading: #e8c47c; --ds-mod-writing: #f4a487; --ds-mod-review: #c7b8f0; --ds-mod-records: #e8c47c;
}
html[data-ds][data-visual-world][data-ds-skin="observatory"] {
  --ds-mod-vocab: #3d3a8c; --ds-mod-listen: #2f6f86; --ds-mod-reading: #8a6418; --ds-mod-writing: #8a2d3b; --ds-mod-review: #5a56b0; --ds-mod-records: #7a5b1d;
}
html[data-ds][data-visual-world][data-ds-skin="observatory"].cv-dark {
  --ds-mod-vocab: #bcb8f4; --ds-mod-listen: #9cd0e6; --ds-mod-reading: #e2c387; --ds-mod-writing: #f0a3ad; --ds-mod-review: #c7b8f0; --ds-mod-records: #e8c47c;
}
html[data-ds][data-visual-world][data-ds-skin="minimal"] {
  --ds-mod-vocab: var(--ink-2); --ds-mod-listen: var(--ink-2); --ds-mod-reading: var(--ink-2); --ds-mod-writing: var(--ink-2); --ds-mod-review: var(--ink-2); --ds-mod-records: var(--ink-2);
}
html[data-ds][data-visual-world] .home-workspaces { gap: 24px !important; }

/* Overview hero */
html[data-ds][data-visual-world] #view-today .home-overview-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  grid-template-areas: "journey today" "journey quota";
  grid-auto-flow: row dense;
  align-items: stretch; gap: 0 !important;
  padding: 0 !important; border: 1px solid var(--ds-card-edge) !important; border-radius: var(--ds-r-hero) !important;
  background: var(--ds-card) !important; box-shadow: var(--shadow) !important; overflow: hidden;
}
html[data-ds][data-visual-world][data-ds-skin="minimal"] #view-today .home-overview-bar { box-shadow: none !important; }
html[data-ds][data-visual-world] #view-today .home-overview-bar > * { margin: 0 !important; min-width: 0; }
html[data-ds][data-visual-world] #view-today .home-overview-bar > :not(.learning-journey):not(.home-completion):not(.home-member-quota) { grid-column: 1 / -1; padding: 16px 28px; border-top: 1px solid var(--hairline-soft); }
html[data-ds][data-visual-world] #view-today .home-overview-bar > .learning-journey {
  grid-area: journey; order: 0 !important;
  display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px !important;
  padding: 32px 32px 30px !important; border: 0 !important; position: relative;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    var(--ds-card) !important;
}
html[data-ds][data-visual-world]:not([data-ds-skin="minimal"], [data-ds-skin="vivid"]) #view-today .home-overview-bar > .learning-journey::before {
  content: ""; position: absolute; left: 32px; top: 0; width: 56px; height: 3px; background: var(--ds-brass); border-radius: 0 0 3px 3px;
}
html[data-ds][data-visual-world][data-ds-skin="minimal"] #view-today .home-overview-bar > .learning-journey { background: var(--ds-card) !important; }
html[data-ds][data-visual-world] #view-today .learning-journey-copy { gap: 8px !important; max-width: 60ch; flex: 0 1 auto !important; }
html[data-ds][data-visual-world] #view-today .learning-journey-copy strong {
  font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important;
  font-size: 26px !important; line-height: 1.3 !important; color: var(--ink) !important; letter-spacing: var(--ds-display-track);
}
html[data-ds][data-visual-world][data-ds-skin="vivid"] #view-today .learning-journey-copy strong { font-weight: 900 !important; }
html[data-ds][data-visual-world] #view-today .learning-journey-copy :is(span, small) { font-size: 15px !important; color: var(--ink-2) !important; line-height: 1.6 !important; }
html[data-ds][data-visual-world] #view-today .learning-journey-copy small { color: var(--muted) !important; font-size: 13px !important; }
html[data-ds][data-visual-world] #view-today .learning-journey-copy .learning-journey-category { color: var(--accent-ink) !important; font-size: 13px !important; font-weight: 650 !important; }
html[data-ds][data-visual-world] #view-today .learning-journey :is(button, [data-journey]) { min-height: 48px !important; padding-inline: 22px !important; font-size: 15px !important; }

/* Today numbers */
html[data-ds][data-visual-world] #view-today .home-overview-bar > .home-completion {
  grid-area: today; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 14px 16px !important;
  padding: 24px 24px 18px !important; border-left: 1px solid var(--hairline-soft); background: color-mix(in srgb, var(--surface-2) 70%, var(--ds-card));
  color: var(--muted) !important;
}
html[data-ds][data-visual-world] #view-today .home-completion > span:first-child { grid-column: 1 / -1; font-size: 13px !important; font-weight: 650; color: var(--ink-2) !important; }
html[data-ds][data-visual-world] #view-today .home-completion > strong {
  display: flex !important; flex-direction: column-reverse; align-items: flex-start; gap: 2px;
  color: var(--muted) !important; font-size: 12px !important; font-weight: 600 !important;
}
html[data-ds][data-visual-world] #view-today .home-completion > strong b {
  margin: 0 !important; font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important;
  font-size: 30px !important; line-height: 1.1 !important; color: var(--ink) !important; font-variant-numeric: tabular-nums lining-nums;
}
html[data-ds][data-visual-world] #view-today .home-completion .home-refresh-icon-action {
  grid-column: 1 / -1; justify-self: start; min-height: 36px !important; height: 36px !important; padding: 0 12px !important; gap: 6px;
  border-radius: 999px !important; font-size: 13px !important; background: var(--surface) !important;
}
html[data-ds][data-visual-world] #view-today .home-completion .home-refresh-label { display: inline !important; white-space: nowrap; }
html[data-ds][data-visual-world] #view-today .home-completion .home-refresh-icon-action:not([hidden]) { width: auto !important; min-width: 0 !important; white-space: nowrap; display: inline-flex !important; align-items: center; }
html[data-ds][data-visual-world] #view-today .home-overview-bar > .home-member-quota {
  grid-area: quota; align-self: stretch; padding: 0 24px 18px !important; border: 0 !important; border-left: 1px solid var(--hairline-soft) !important;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--ds-card)) !important; flex: none !important;
}
html[data-ds][data-visual-world] #view-today .home-member-quota-head {
  width: 100%; padding: 10px 12px !important; min-height: 52px !important; gap: 10px !important;
  border: 1px solid var(--hairline) !important; border-radius: var(--ds-r-control) !important; background: var(--surface) !important;
}
html[data-ds][data-visual-world] #view-today .home-member-mark { color: var(--ds-brass, var(--accent)) !important; background: transparent !important; }
html[data-ds][data-visual-world] #view-today .home-member-plan strong { font-size: 13px !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] #view-today .home-member-plan .quota-summary { font-size: 12px !important; color: var(--muted) !important; }
html[data-ds][data-visual-world] #view-today .home-member-quota-body { padding: 10px 2px 0; }

/* Workspace cards */
html[data-ds][data-visual-world] .home-workspace-grid { gap: 20px !important; }
html[data-ds][data-visual-world] .home-workspace { --mod: var(--ds-mod-vocab); }
html[data-ds][data-visual-world] .home-workspace-listen { --mod: var(--ds-mod-listen); }
html[data-ds][data-visual-world] .home-workspace-reading { --mod: var(--ds-mod-reading); }
html[data-ds][data-visual-world] .home-workspace-writing { --mod: var(--ds-mod-writing); }
html[data-ds][data-visual-world] .home-workspace-review { --mod: var(--ds-mod-review); }
html[data-ds][data-visual-world] .home-workspace-records { --mod: var(--ds-mod-records); }
html[data-ds][data-visual-world] #view-today .home-workspace {
  padding: 22px 22px 18px !important; border: 1px solid var(--ds-card-edge) !important; border-radius: var(--ds-r-card) !important;
  background: var(--ds-card) !important; box-shadow: var(--shadow-sm) !important; position: relative;
}
html[data-ds][data-visual-world][data-ds-skin="minimal"] #view-today .home-workspace { box-shadow: none !important; }
html[data-ds][data-visual-world] #view-today :is(.home-workspace-review, .home-workspace-records) { background: var(--ds-card) !important; }
html[data-ds][data-visual-world] #view-today .home-workspace-head { gap: 14px !important; margin-bottom: 14px !important; }
html[data-ds][data-visual-world] #view-today .home-workspace-icon,
html[data-ds][data-visual-world] #view-today .home-workspace .cv-rail-review .cv-rail-eyebrow > svg {
  width: 44px !important; height: 44px !important; flex: 0 0 44px !important; border-radius: calc(var(--ds-r-control) + 2px) !important;
  background: color-mix(in srgb, var(--mod) 11%, var(--ds-card)) !important; color: var(--mod) !important;
}
html[data-ds][data-visual-world] #view-today .home-workspace .cv-rail-review .cv-rail-eyebrow > svg { padding: 11px !important; }
html[data-ds][data-visual-world] #view-today .home-workspace-icon .ic { width: 22px; height: 22px; }
html[data-ds][data-visual-world][data-ds-skin="minimal"] #view-today .home-workspace-icon,
html[data-ds][data-visual-world][data-ds-skin="minimal"] #view-today .home-workspace .cv-rail-review .cv-rail-eyebrow > svg { background: var(--surface-2) !important; }
html[data-ds][data-visual-world] #view-today .home-workspace-head h2,
html[data-ds][data-visual-world] #view-today .home-workspace .cv-rail-eyebrow {
  font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important;
  font-size: 20px !important; line-height: 1.3 !important; color: var(--ink) !important;
}
html[data-ds][data-visual-world][data-ds-skin="vivid"] #view-today .home-workspace-head h2,
html[data-ds][data-visual-world][data-ds-skin="vivid"] #view-today .home-workspace .cv-rail-eyebrow { font-weight: 850 !important; }
html[data-ds][data-visual-world] #view-today .home-workspace-head small { font-size: 13px !important; color: var(--muted) !important; margin-top: 2px !important; }
html[data-ds][data-visual-world] #view-today .home-workspace-head .icon-button { border: 0 !important; background: transparent !important; color: var(--muted) !important; border-radius: 999px !important; }
@media (hover: hover) and (pointer: fine) {
  html[data-ds][data-visual-world] #view-today .home-workspace-head .icon-button:hover { background: var(--surface-2) !important; color: var(--mod) !important; }
}
html[data-ds][data-visual-world] #view-today .home-workspace .home-check-row { border-top-color: var(--hairline-soft) !important; padding: 14px 0 !important; min-height: 0 !important; }
html[data-ds][data-visual-world] #view-today .home-workspace :is(.home-check-main, .daily-checkin-main) > strong { font-size: 15px !important; font-weight: 650 !important; }
html[data-ds][data-visual-world] #view-today .home-task-kind {
  border-radius: 999px !important; padding: 2px 9px !important; font-size: 11.5px !important;
  background: color-mix(in srgb, var(--mod) 10%, var(--ds-card)) !important; color: color-mix(in srgb, var(--mod) 80%, var(--ink)) !important;
}
/* 开始 / 继续, 去听音频 and 进入训练 in the cards: the workspace-tinted entry pill (section 7),
   so the overview's 继续学习 stays the one solid button on the page. */
html[data-ds][data-visual-world] #view-today .home-workspace .task-entry-action { border-radius: 999px !important; padding: 8px 16px !important; font-weight: 650 !important; }
html[data-ds][data-visual-world] #view-today .home-workspace :is(.home-workspace-empty button, .cv-rev-go) {
  --ds-entry: var(--mod);
  border-radius: 999px !important; box-shadow: none !important; font-weight: 650 !important;
  background: color-mix(in srgb, var(--ds-entry) 12%, var(--ds-card)) !important; color: color-mix(in srgb, var(--ds-entry) 80%, var(--ink)) !important;
  border: 1px solid color-mix(in srgb, var(--ds-entry) 22%, transparent) !important;
}
@media (hover: hover) and (pointer: fine) {
  html[data-ds][data-visual-world] #view-today .home-workspace :is(.home-workspace-empty button, .cv-rev-go):not(:disabled):hover { background: color-mix(in srgb, var(--ds-entry) 18%, var(--ds-card)) !important; }
}
/* Minimal's workspaces are all neutral ink; its one brand indigo marks the actions instead
   (as its solid 开始 did before), so the pills never read as greyed out. */
html[data-ds][data-visual-world][data-ds-skin="minimal"] #view-today .home-workspace :is(.task-entry-action, .home-workspace-empty button, .cv-rev-go) { --ds-entry: var(--accent); }
html[data-ds][data-visual-world] #view-today .home-workspace-empty { border-top: 1px solid var(--hairline-soft) !important; gap: 10px !important; }
html[data-ds][data-visual-world] #view-today .home-workspace-empty p { color: var(--muted) !important; font-size: 14px !important; }
html[data-ds][data-visual-world] #view-today .home-workspace .cv-rev-word { font-family: var(--font-display) !important; font-size: 34px !important; font-weight: var(--ds-display-weight) !important; color: var(--ink) !important; }
html[data-ds][data-visual-world][data-ds-skin="vivid"] #view-today .home-workspace .cv-rev-word { font-weight: 900 !important; }
html[data-ds][data-visual-world] #view-today .home-workspace .cv-rev-btn { border-radius: 999px !important; font-weight: 650 !important; }
html[data-ds][data-visual-world] #view-today .home-record-links { border-top-color: var(--hairline-soft) !important; }
html[data-ds][data-visual-world] #view-today .home-record-links button { border-radius: var(--ds-r-control) !important; padding: 8px 10px !important; color: var(--ink-2) !important; }
html[data-ds][data-visual-world] #view-today .home-workspace-notice { padding: 10px 16px; border-radius: var(--ds-r-control); background: var(--amber-soft); color: var(--amber-ink) !important; font-size: 14px !important; }
html[data-ds][data-visual-world] #view-today .home-workspace-notice .secondary-action { min-height: 36px !important; height: 36px; border-radius: 999px !important; }

@media (max-width: 1180px) {
  html[data-ds][data-visual-world] #view-today .home-overview-bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "journey" "today" "quota"; }
  html[data-ds][data-visual-world] #view-today .home-overview-bar > :is(.home-completion, .home-member-quota) { border-left: 0 !important; }
  html[data-ds][data-visual-world] #view-today .home-overview-bar > .home-completion { grid-template-columns: auto auto 1fr; align-items: end; border-top: 1px solid var(--hairline-soft); }
  html[data-ds][data-visual-world] #view-today .home-completion .home-refresh-icon-action { grid-column: auto; justify-self: end; }
  html[data-ds][data-visual-world] #view-today .home-completion > span:first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  html[data-ds][data-visual-world] .home-workspaces { gap: 16px !important; }
  html[data-ds][data-visual-world] #view-today .home-overview-bar { border-radius: var(--ds-r-card) !important; }
  html[data-ds][data-visual-world] #view-today .home-overview-bar > .learning-journey { padding: 22px 20px 20px !important; gap: 14px !important; }
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"], [data-ds-skin="vivid"]) #view-today .home-overview-bar > .learning-journey::before { left: 20px; }
  html[data-ds][data-visual-world] #view-today .learning-journey-copy strong { font-size: 21px !important; }
  html[data-ds][data-visual-world] #view-today .learning-journey :is(button, [data-journey]) { width: 100% !important; }
  html[data-ds][data-visual-world] #view-today .home-overview-bar > .home-completion { padding: 16px 20px 14px !important; gap: 10px 18px !important; }
  html[data-ds][data-visual-world] #view-today .home-completion > strong b { font-size: 24px !important; }
  html[data-ds][data-visual-world] #view-today .home-overview-bar > .home-member-quota { padding: 0 20px 16px !important; }
  html[data-ds][data-visual-world] #view-today .home-workspace { padding: 18px 18px 14px !important; }
  html[data-ds][data-visual-world] .home-workspace-grid { gap: 14px !important; }
}

/* ── 9. Listening (听力音频) ────────────────────────────────────────────────────────────
   Modes as a segmented control; the catalogue as one list with quiet rows. */
html[data-ds][data-visual-world] #view-listen { --mod: var(--ds-mod-listen); }
html[data-ds][data-visual-world] #view-listen .listen-mode-grid { border-radius: calc(var(--ds-r-control) + 4px) !important; background: color-mix(in srgb, var(--ink) 6%, transparent) !important; padding: 4px !important; }
html[data-ds][data-visual-world] #view-listen .listen-mode-card { border-radius: var(--ds-r-control) !important; color: var(--ink-2) !important; min-height: 40px !important; padding: 8px 14px !important; }
html[data-ds][data-visual-world] #view-listen .listen-mode-card strong { font-size: 15px !important; font-weight: 650 !important; }
html[data-ds][data-visual-world] #view-listen .listen-mode-card.active { background: var(--surface) !important; color: var(--ink) !important; border-color: transparent !important; box-shadow: 0 1px 2px rgb(16 24 40 / 10%), 0 0 0 1px var(--hairline-soft) !important; }
/* academy-theme.css draws a white inset focus ring on these, which vanishes on the white chip
   and on the tinted play buttons; the ring sits outside in the skin colour instead. */
html[data-ds][data-visual-world] #view-listen :is(.listen-mode-card, .book-audio-play, .listen-catalog-play):focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; }
html[data-ds][data-visual-world] #view-listen .academy-catalog-filters { gap: 12px 16px !important; }
html[data-ds][data-visual-world] #view-listen .academy-catalog-filters .listen-search-bar { border-radius: var(--ds-r-control) !important; }
html[data-ds][data-visual-world] #view-listen .listen-list-card > .section-head h3 { font-family: var(--ds-sans) !important; font-size: 13px !important; font-weight: 650 !important; color: var(--muted) !important; }
/* "Start here" */
html[data-ds][data-visual-world] #view-listen .listen-catalog-guide {
  border: 1px solid color-mix(in srgb, var(--mod) 24%, var(--hairline)) !important; border-radius: var(--ds-r-card) !important;
  background: color-mix(in srgb, var(--mod) 7%, var(--ds-card)) !important; box-shadow: none !important; padding: 14px 16px !important;
}
html[data-ds][data-visual-world] #view-listen .listen-catalog-guide .listen-catalog-count { color: var(--mod) !important; font-style: normal; }
html[data-ds][data-visual-world] #view-listen .listen-catalog-guide strong { font-family: var(--font-display) !important; font-size: 18px !important; font-weight: var(--ds-display-weight) !important; }
/* The list */
html[data-ds][data-visual-world] #view-listen .book-audio-list {
  gap: 0 !important; overflow: hidden;
  border: 1px solid var(--ds-card-edge) !important; border-radius: var(--ds-r-card) !important; background: var(--ds-card) !important; box-shadow: var(--shadow-sm);
}
html[data-ds][data-visual-world][data-ds-skin="minimal"] #view-listen .book-audio-list { box-shadow: none; }
html[data-ds][data-visual-world] #view-listen .book-audio-list > .cv-listen-divider {
  margin: 0 !important; padding: 14px 18px 8px; gap: 10px;
  font-size: 13px !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--muted) !important;
  background: color-mix(in srgb, var(--surface-2) 60%, var(--ds-card)); border-bottom: 1px solid var(--hairline-soft);
}
html[data-ds][data-visual-world] #view-listen .book-audio-list > .cv-listen-divider:not(:first-child) { border-top: 1px solid var(--hairline-soft); }
html[data-ds][data-visual-world] #view-listen .book-audio-list > .cv-listen-divider::after { display: none; }
html[data-ds][data-visual-world] #view-listen .cv-listen-divider .cv-div-book { color: var(--ink) !important; font-weight: 700 !important; }
html[data-ds][data-visual-world] #view-listen .cv-listen-divider .cv-div-count { color: var(--muted) !important; font-weight: 500 !important; }
html[data-ds][data-visual-world] #view-listen .book-audio-row {
  grid-template-columns: 44px minmax(0, 1fr) 44px !important; min-height: 68px !important; gap: 14px !important; padding: 10px 14px 10px 18px !important;
  border: 0 !important; border-bottom: 1px solid var(--hairline-soft) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; position: relative;
}
html[data-ds][data-visual-world] #view-listen .book-audio-row:last-child { border-bottom: 0 !important; }
@media (hover: hover) and (pointer: fine) {
  html[data-ds][data-visual-world] #view-listen .book-audio-row:hover { background: color-mix(in srgb, var(--ink) 3%, transparent) !important; }
}
html[data-ds][data-visual-world] #view-listen .book-audio-row:has(.book-audio-heard) { background: transparent !important; }
html[data-ds][data-visual-world] #view-listen .book-audio-row.active { background: color-mix(in srgb, var(--mod) 8%, var(--ds-card)) !important; }
html[data-ds][data-visual-world] #view-listen .book-audio-row.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mod); }
html[data-ds][data-visual-world] #view-listen :is(.book-audio-play, .listen-catalog-play) {
  width: 44px !important; height: 44px !important; background: color-mix(in srgb, var(--mod) 12%, var(--ds-card)) !important; color: var(--mod) !important; box-shadow: none !important;
}
html[data-ds][data-visual-world] #view-listen :is(.book-audio-row.active .book-audio-play, .listen-catalog-play) { background: var(--mod) !important; color: #fff !important; }
html[data-ds][data-visual-world].cv-dark #view-listen :is(.book-audio-row.active .book-audio-play, .listen-catalog-play) { color: var(--ds-canvas) !important; }
html[data-ds][data-visual-world][data-ds-skin="minimal"] #view-listen :is(.book-audio-play) { background: var(--surface-2) !important; color: var(--ink) !important; }
html[data-ds][data-visual-world][data-ds-skin="minimal"] #view-listen :is(.book-audio-row.active .book-audio-play, .listen-catalog-play) { background: var(--academy-action) !important; color: #fff !important; }
html[data-ds][data-visual-world] #view-listen .book-audio-play svg { width: 18px !important; height: 18px !important; }
html[data-ds][data-visual-world] #view-listen .book-audio-main strong { font-size: 16px !important; font-weight: 650 !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] #view-listen .book-audio-subline { margin-top: 2px !important; gap: 4px 14px !important; }
html[data-ds][data-visual-world] #view-listen .book-audio-meta { font-size: 13px !important; }
html[data-ds][data-visual-world] #view-listen .book-audio-heard { color: var(--green-ink) !important; font-weight: 600; }
html[data-ds][data-visual-world] #view-listen .book-audio-favorite { border-radius: 999px !important; }
html[data-ds][data-visual-world] #view-listen .book-audio-favorite[aria-pressed="true"] { color: var(--red-ink) !important; }

/* ── 10. Reading (朗读训练) and Writing (写作训练) ────────────────────────────────────────
   Shared mode tabs; reading becomes one two-pane surface with the passage set as text. */
html[data-ds][data-visual-world] #view-reading { --mod: var(--ds-mod-reading); }
html[data-ds][data-visual-world] #view-writing { --mod: var(--ds-mod-writing); }
html[data-ds][data-visual-world] :is(#view-reading, #view-writing) :is(.reading-mode-tabs, .writing-mode-tabs) {
  background: color-mix(in srgb, var(--ink) 6%, transparent) !important; border-radius: calc(var(--ds-r-control) + 4px) !important; padding: 4px !important; gap: 4px !important;
}
html[data-ds][data-visual-world] :is(#view-reading, #view-writing) :is(.reading-mode-tabs, .writing-mode-tabs) button {
  border-radius: var(--ds-r-control) !important; background: transparent !important; color: var(--ink-2) !important; border: 0 !important; box-shadow: none !important;
}
html[data-ds][data-visual-world] :is(#view-reading, #view-writing) :is(.reading-mode-tabs, .writing-mode-tabs) button.active {
  background: var(--surface) !important; color: var(--ink) !important; box-shadow: 0 1px 2px rgb(16 24 40 / 10%), 0 0 0 1px var(--hairline-soft) !important;
}
html[data-ds][data-visual-world] :is(#view-reading, #view-writing) :is(.reading-mode-tabs, .writing-mode-tabs) button :is(span, small) { color: var(--muted) !important; }

html[data-ds][data-visual-world] #view-reading .reading-workspace {
  background: var(--ds-card) !important; border: 1px solid var(--ds-card-edge) !important; border-radius: var(--ds-r-card) !important;
  box-shadow: var(--shadow-sm) !important; overflow: hidden; gap: 0 !important;
}
html[data-ds][data-visual-world][data-ds-skin="minimal"] #view-reading .reading-workspace { box-shadow: none !important; }
html[data-ds][data-visual-world] #view-reading .reading-catalog {
  padding: 16px 14px !important; background: color-mix(in srgb, var(--surface-2) 70%, var(--ds-card)) !important; border-right: 1px solid var(--hairline-soft) !important;
}
html[data-ds][data-visual-world] #view-reading .reading-source-tabs { gap: 4px !important; }
html[data-ds][data-visual-world] #view-reading .reading-source-tabs button { border-radius: var(--ds-r-control) !important; border: 1px solid transparent !important; background: transparent !important; color: var(--ink-2) !important; box-shadow: none !important; }
html[data-ds][data-visual-world] #view-reading .reading-source-tabs button.active { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink) !important; font-weight: 650; }
html[data-ds][data-visual-world] #view-reading .reading-source-note { color: var(--muted) !important; font-size: 12px !important; }
html[data-ds][data-visual-world] #view-reading .reading-catalog-heading strong { font-size: 14px !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] #view-reading .reading-task-list { gap: 4px !important; }
html[data-ds][data-visual-world] #view-reading .reading-task-card {
  padding: 12px 12px 12px 14px !important; border: 1px solid transparent !important; border-radius: var(--ds-r-control) !important;
  background: transparent !important; box-shadow: none !important; position: relative;
}
@media (hover: hover) and (pointer: fine) {
  html[data-ds][data-visual-world] #view-reading .reading-task-card:not(.active):hover { background: color-mix(in srgb, var(--ink) 4%, transparent) !important; }
}
html[data-ds][data-visual-world] #view-reading .reading-task-card.active { background: var(--surface) !important; border-color: var(--hairline) !important; box-shadow: var(--shadow-xs) !important; }
html[data-ds][data-visual-world] #view-reading .reading-task-card.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mod); }
html[data-ds][data-visual-world] #view-reading .reading-task-card strong { font-size: 15px !important; font-weight: 650 !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] #view-reading .reading-task-card small { color: var(--muted) !important; font-size: 12.5px !important; }
html[data-ds][data-visual-world] #view-reading .reading-task-status { border-radius: 999px !important; font-size: 11.5px !important; padding: 2px 8px !important; }
html[data-ds][data-visual-world] #view-reading .reading-detail { padding: 8px 28px 24px !important; }
html[data-ds][data-visual-world] #view-reading .reading-card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html[data-ds][data-visual-world] #view-reading .reading-card-head h3 {
  font-family: var(--font-display) !important; font-size: 30px !important; font-weight: var(--ds-display-weight) !important; line-height: 1.25 !important; color: var(--ink) !important;
}
html[data-ds][data-visual-world][data-ds-skin="vivid"] #view-reading .reading-card-head h3 { font-weight: 900 !important; }
html[data-ds][data-visual-world] #view-reading .reading-badges .badge { background: color-mix(in srgb, var(--mod) 10%, var(--ds-card)) !important; color: color-mix(in srgb, var(--mod) 80%, var(--ink)) !important; font-size: 12px !important; }
html[data-ds][data-visual-world] #view-reading .sentence-list-head strong { font-size: 15px !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] #view-reading .sentence-row { border-color: var(--hairline-soft) !important; background: transparent !important; border-radius: 0 !important; }
html[data-ds][data-visual-world] #view-reading .sentence-index {
  width: 28px !important; height: 28px !important; border-radius: 999px !important; display: grid; place-items: center;
  font-size: 12px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--mod) 10%, var(--ds-card)) !important; color: var(--mod) !important; border: 0 !important;
}
html[data-ds][data-visual-world] #view-reading .sentence-index.done { background: var(--green-soft) !important; color: var(--green-ink) !important; }
/* The passage itself: set like a reader, not a form. */
html[data-ds][data-visual-world] #view-reading :is(.reading-paragraph-copy p, .sentence-text, .reading-full-text p) {
  font-family: var(--ds-reading-face, var(--ds-sans)) !important; font-size: 19px !important; line-height: 1.7 !important; color: var(--ink) !important; max-width: 68ch;
}
html[data-ds][data-visual-world]:is([data-ds-skin="academy"], [data-ds-skin="library"], [data-ds-skin="ginkgo"], [data-ds-skin="observatory"]) { --ds-reading-face: "Aivia Baskerville", Baskerville, "Libre Baskerville", Georgia, var(--ds-sans); }
html[data-ds][data-visual-world][data-ds-skin="vivid"] { --ds-reading-face: "Nunito", var(--ds-sans); }
html[data-ds][data-visual-world] #view-reading .reading-mini-btn { min-height: 40px !important; border-radius: 999px !important; padding: 0 14px !important; font-size: 13px !important; }
html[data-ds][data-visual-world] #view-reading .quota-hint { color: var(--muted) !important; font-size: 13px !important; }
@media (max-width: 900px) {
  html[data-ds][data-visual-world] #view-reading .reading-workspace { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
  html[data-ds][data-visual-world] #view-reading .reading-catalog { background: transparent !important; border-right: 0 !important; padding: 0 !important; }
  html[data-ds][data-visual-world] #view-reading .reading-detail { padding: 0 !important; }
  html[data-ds][data-visual-world] #view-reading .reading-task-card { background: var(--ds-card) !important; border-color: var(--ds-card-edge) !important; }
  html[data-ds][data-visual-world] #view-reading .reading-card { background: var(--ds-card) !important; border: 1px solid var(--ds-card-edge) !important; border-radius: var(--ds-r-card) !important; padding: 18px !important; }
  html[data-ds][data-visual-world] #view-reading .reading-card-head h3 { font-size: 24px !important; }
  html[data-ds][data-visual-world] #view-reading :is(.reading-paragraph-copy p, .sentence-text, .reading-full-text p) { font-size: 18px !important; }
}
/* Writing: three steps, each its own card; the step marker shows progress. */
html[data-ds][data-visual-world] #view-writing .writing-flow-shell { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; display: grid; gap: 16px !important; }
html[data-ds][data-visual-world] #view-writing .writing-step {
  padding: 22px 24px !important; margin: 0 !important;
  background: var(--ds-card) !important; border: 1px solid var(--ds-card-edge) !important; border-radius: var(--ds-r-card) !important; box-shadow: var(--shadow-sm) !important;
}
html[data-ds][data-visual-world][data-ds-skin="minimal"] #view-writing .writing-step { box-shadow: none !important; }
html[data-ds][data-visual-world] #view-writing .writing-step.is-upcoming { background: color-mix(in srgb, var(--ds-card) 70%, transparent) !important; box-shadow: none !important; }
html[data-ds][data-visual-world] #view-writing .writing-step-head strong { font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important; font-size: 18px !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] #view-writing .writing-step-head small { color: var(--muted) !important; font-size: 13px !important; }
html[data-ds][data-visual-world] #view-writing .writing-step-number {
  width: 32px !important; height: 32px !important; border-radius: 999px !important; display: grid !important; place-items: center;
  border: 1.5px solid var(--hairline) !important; background: var(--ds-card) !important; color: var(--muted) !important;
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 15px !important;
}
html[data-ds][data-visual-world] #view-writing .writing-step.is-current .writing-step-number { background: var(--mod) !important; border-color: var(--mod) !important; color: #fff !important; }
html[data-ds][data-visual-world].cv-dark #view-writing .writing-step.is-current .writing-step-number { color: var(--ds-canvas) !important; }
html[data-ds][data-visual-world] #view-writing .writing-step.is-done .writing-step-number { background: var(--green-soft) !important; border-color: transparent !important; color: var(--green-ink) !important; }
html[data-ds][data-visual-world] #view-writing .upload-drop {
  border: 1.5px dashed color-mix(in srgb, var(--mod) 40%, var(--hairline)) !important; border-radius: var(--ds-r-card) !important;
  background: color-mix(in srgb, var(--mod) 5%, var(--ds-card)) !important; box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html[data-ds][data-visual-world] #view-writing .upload-drop:hover { border-color: var(--mod) !important; background: color-mix(in srgb, var(--mod) 9%, var(--ds-card)) !important; }
}
html[data-ds][data-visual-world] #view-writing textarea { line-height: 1.7 !important; font-size: 16px !important; }
html[data-ds][data-visual-world]:is([data-ds-skin="academy"], [data-ds-skin="library"], [data-ds-skin="ginkgo"], [data-ds-skin="observatory"]) #view-writing #writingOcrText, html[data-ds][data-visual-world]:is([data-ds-skin="academy"], [data-ds-skin="library"], [data-ds-skin="ginkgo"], [data-ds-skin="observatory"]) #view-writing .writing-text-column textarea { font-family: var(--ds-reading-face) !important; font-size: 17px !important; }
html[data-ds][data-visual-world] #view-writing .writing-history-jump { color: var(--accent-ink) !important; font-weight: 650 !important; }
/* 生成题目 is the generator's primary: ultimate.css painted it with --accent (pale in dark
   mode, so its white label nearly vanished) plus a glow and a hover lift, at (1,1,0). */
html[data-ds][data-visual-world] #view-writing .writing-prompt-controls > #generateWritingPrompt {
  background: var(--academy-action) !important; color: #fff !important; border: 1px solid transparent !important;
  border-radius: var(--ds-r-control) !important; box-shadow: none !important; font-weight: 650 !important;
}
html[data-ds][data-visual-world] #view-writing .writing-prompt-controls > #generateWritingPrompt:hover { transform: none !important; }
@media (hover: hover) and (pointer: fine) {
  /* Like every other primary: the hover step only where there is a real pointer (a tap on a phone left it dark). */
  html[data-ds][data-visual-world] #view-writing .writing-prompt-controls > #generateWritingPrompt:not(:disabled):hover { background: var(--academy-action-hover) !important; color: #fff !important; }
}
html[data-ds][data-visual-world] #view-writing .writing-prompt-controls > #generateWritingPrompt:not(:disabled):active { transform: scale(.98) !important; }
/* 题型 chips are small tag buttons: pills like the growth filter chips (member-center.css drew 6px boxes). */
html[data-ds][data-visual-world] #view-writing .writing-type-chip { border-radius: 999px !important; }
@media (max-width: 767px) {
  html[data-ds][data-visual-world] #view-writing .writing-step { padding: 16px !important; }
}

/* ── 11. Settings: style picker (also used on staff pages, so not scoped to data-ds) ─────
   5.9.2: each look is shown by its own artwork (day or night with the theme) with a small
   card of its colours on top; "auto" spans the row and shows the two looks it chooses between. */
html[data-visual-world] .academy-skin-picker.ds-skin-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html[data-visual-world] .academy-skin-picker.ds-skin-picker [data-skin-select] {
  position: relative; display: flex !important; flex-direction: column; align-items: stretch; gap: 10px !important;
  min-width: 0; min-height: 0; padding: 6px 6px 12px !important; text-align: left;
  border: 1px solid var(--hairline) !important; border-radius: calc(var(--ds-r-control, 10px) + 2px) !important;
  background: var(--surface) !important; color: var(--ink) !important; box-shadow: none !important; outline: none;
  transition: border-color var(--ds-fast, .14s) ease, box-shadow var(--ds-fast, .14s) ease, background-color var(--ds-fast, .14s) ease;
}
html[data-visual-world] .academy-skin-picker.ds-skin-picker [data-skin-select="auto"] {
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px !important; padding: 6px 14px 6px 6px !important;
}
/* 5.10.0: seven looks. The six illustrated ones pair up; minimal (no artwork) closes the list on its own row. */
html[data-visual-world] .academy-skin-picker.ds-skin-picker [data-skin-select="minimal"] {
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px !important; padding: 6px 14px 6px 6px !important;
}
html[data-visual-world] [data-skin-select="minimal"] .ds-skin-swatch { width: 132px; flex: none; }
html[data-visual-world] [data-skin-select="minimal"] .ds-skin-copy { padding: 0 28px 0 0; }
html[data-visual-world] .academy-skin-picker.ds-skin-picker [data-skin-select]::before { display: none !important; content: none !important; }
html[data-visual-world] .academy-skin-picker.ds-skin-picker [data-skin-select]::after { display: none; }
html[data-visual-world] .academy-skin-picker.ds-skin-picker [data-skin-select][aria-pressed="true"]::after {
  content: "" !important; display: block; position: absolute; right: 12px !important; top: 12px !important; bottom: auto !important; z-index: 1;
  width: 22px !important; height: 22px !important; border: 2px solid #fff !important; border-radius: 50%; transform: none !important;
  background: var(--academy-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 1px 3px rgb(0 0 0 / 25%); box-sizing: border-box;
}
html[data-visual-world] .academy-skin-picker.ds-skin-picker [aria-pressed="true"] { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) inset !important; background: var(--accent-soft-2) !important; }
@media (hover: hover) and (pointer: fine) {
  html[data-visual-world] .academy-skin-picker.ds-skin-picker [data-skin-select]:not([aria-pressed="true"]):hover { border-color: var(--accent-edge) !important; background: var(--surface-2) !important; }
}
html[data-visual-world] .academy-skin-picker.ds-skin-picker [data-skin-select]:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; }
html[data-visual-world] .ds-skin-copy { display: grid; gap: 2px; min-width: 0; padding: 0 6px; }
html[data-visual-world] [data-skin-select="auto"] .ds-skin-copy { padding: 0 28px 0 0; }
html[data-visual-world] .ds-skin-copy strong { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; }
html[data-visual-world] .ds-skin-copy small { font-size: 12px; line-height: 1.45; font-weight: 500; color: var(--muted); }
html[data-visual-world] .ds-skin-copy [data-skin-current] { color: var(--accent-ink); font-weight: 650; white-space: nowrap; }
/* The swatch: artwork, with a small card in the look's colours (heading, brass line, action). */
html[data-visual-world] .ds-skin-swatch {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ds-r-control, 8px); overflow: hidden;
  --sw-canvas: #eef0ec; --sw-card: #fff; --sw-ink: #16233f; --sw-act: #203d86; --sw-mark: #a07a32; --sw-r: 4px; --sw-art: none;
  background: var(--sw-canvas) var(--sw-art) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%);
}
html[data-visual-world] [data-skin-select="auto"] .ds-skin-swatch { width: 132px; flex: none; }
html[data-visual-world] .ds-skin-swatch::before {
  content: ""; position: absolute; left: 8%; bottom: 10%; width: 42%; height: 40%; border-radius: var(--sw-r); background: var(--sw-card);
  box-shadow: 0 2px 6px rgb(0 0 0 / 22%);
}
html[data-visual-world] .ds-skin-swatch::after {
  content: ""; position: absolute; left: calc(8% + 7px); bottom: calc(10% + 40% - 12px); width: 22%; height: 4px; border-radius: 2px; background: var(--sw-ink);
  box-shadow: 0 7px 0 -1px var(--sw-mark), 6px 16px 0 1px var(--sw-act);
}
html[data-visual-world] .ds-skin-swatch[data-swatch="academy"] { --sw-art: url("assets/academy/swatches/campus-day-v1.webp"); }
html[data-visual-world] .ds-skin-swatch[data-swatch="library"] { --sw-art: url("assets/academy/swatches/library-day-v1.webp"); --sw-canvas: #efe6d6; --sw-card: #fffbf3; --sw-ink: #2a2620; --sw-act: #1f5c46; --sw-mark: #9a7330; }
html[data-visual-world] .ds-skin-swatch[data-swatch="vivid"] { --sw-art: url("assets/academy/swatches/vivid-day-v1.webp"); --sw-canvas: #fff3e8; --sw-ink: #35231a; --sw-act: #5a4eb0; --sw-mark: #ffc53d; --sw-r: 8px; }
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="academy"] { --sw-art: url("assets/academy/swatches/campus-night-v1.webp"); --sw-card: #1a2230; --sw-ink: #ece7dc; --sw-act: #3554a6; --sw-mark: #d8b46c; }
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="library"] { --sw-art: url("assets/academy/swatches/library-night-v1.webp"); --sw-card: #26221d; --sw-ink: #f1e8d7; --sw-act: #2a6b52; --sw-mark: #d8b46c; }
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="vivid"] { --sw-art: url("assets/academy/swatches/vivid-night-v1.webp"); --sw-card: #2b1f29; --sw-ink: #fbeee3; --sw-act: #6458c0; --sw-mark: #ffc53d; }
html[data-visual-world] .ds-skin-swatch[data-swatch="ginkgo"] { --sw-art: url("assets/academy/swatches/ginkgo-day-v1.webp"); --sw-canvas: #f2ede3; --sw-card: #fffdf8; --sw-ink: #27221c; --sw-act: #2f4a5c; --sw-mark: #b8861c; }
html[data-visual-world] .ds-skin-swatch[data-swatch="seaside"] { --sw-art: url("assets/academy/swatches/seaside-day-v1.webp"); --sw-canvas: #f1eee9; --sw-card: #fffefb; --sw-ink: #1d2833; --sw-act: #1d6390; --sw-mark: #d4673f; --sw-r: 6px; }
html[data-visual-world] .ds-skin-swatch[data-swatch="observatory"] { --sw-art: url("assets/academy/swatches/observatory-day-v1.webp"); --sw-canvas: #eeedf4; --sw-ink: #1c1d36; --sw-act: #3d3a8c; --sw-mark: #a8833a; }
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="ginkgo"] { --sw-art: url("assets/academy/swatches/ginkgo-night-v1.webp"); --sw-card: #262124; --sw-ink: #f3eadb; --sw-act: #3b6075; --sw-mark: #e2b24c; }
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="seaside"] { --sw-art: url("assets/academy/swatches/seaside-night-v1.webp"); --sw-card: #182334; --sw-ink: #eaf0f5; --sw-act: #26689a; --sw-mark: #f08f6c; }
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="observatory"] { --sw-art: url("assets/academy/swatches/observatory-night-v1.webp"); --sw-card: #1b1c37; --sw-ink: #ecebf7; --sw-act: #4d48b0; --sw-mark: #dcb86e; }
/* Minimal has no artwork: the swatch is a drawing of its plain page. */
html[data-visual-world] .ds-skin-swatch[data-swatch="minimal"] { --sw-canvas: #f4f5f7; --sw-ink: #171b26; --sw-act: #4b42c4; --sw-mark: #d6d8de; --sw-r: 3px; }
html[data-visual-world] .ds-skin-swatch[data-swatch="minimal"]::before { left: 12%; right: 12%; width: auto; top: 16%; bottom: 16%; height: auto; box-shadow: 0 0 0 1px #e3e5ea; }
html[data-visual-world] .ds-skin-swatch[data-swatch="minimal"]::after { left: calc(12% + 9px); top: calc(16% + 9px); bottom: auto; width: 34%; box-shadow: 0 9px 0 -1px var(--sw-mark), 0 16px 0 -1px var(--sw-mark), 54px 34px 0 2px var(--sw-act); }
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="minimal"] { --sw-canvas: #16181d; --sw-card: #1d2026; --sw-ink: #eceef2; --sw-act: #5b52d6; --sw-mark: #3a3f48; }
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="minimal"]::before { box-shadow: 0 0 0 1px #2c3038; }
/* Auto: the campus on the left, the treehouse on the right; the one in use stays in full colour. */
html[data-visual-world] .ds-skin-swatch[data-swatch="auto"] {
  background:
    url("assets/academy/swatches/vivid-day-v1.webp") right center / cover no-repeat,
    #fff3e8;
}
html[data-visual-world] .ds-skin-swatch[data-swatch="auto"]::before {
  left: 0; top: 0; bottom: 0; width: 100%; height: auto; border-radius: 0; box-shadow: none;
  background: url("assets/academy/swatches/campus-day-v1.webp") left center / cover no-repeat;
  clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%);
}
html[data-visual-world] .ds-skin-swatch[data-swatch="auto"]::after {
  left: 50%; top: 0; bottom: 0; width: 2px; height: auto; border-radius: 0; background: rgb(255 255 255 / 85%);
  transform: translateX(-50%) skewX(-9deg); box-shadow: none;
}
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="auto"] { background-image: url("assets/academy/swatches/vivid-night-v1.webp"); background-color: #21171f; }
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="auto"]::before { background-image: url("assets/academy/swatches/campus-night-v1.webp"); }
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="auto"]::after { background: rgb(255 255 255 / 45%); }
/* The half not in use is softened, so the look being used now reads first. */
html[data-visual-world] .ds-skin-swatch[data-swatch="auto"][data-resolved="academy"] { box-shadow: inset 0 0 0 999px rgb(255 255 255 / 38%), inset 0 0 0 1px rgb(0 0 0 / 8%); }
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="auto"][data-resolved="academy"] { box-shadow: inset 0 0 0 999px rgb(0 0 0 / 42%), inset 0 0 0 1px rgb(255 255 255 / 10%); }
html[data-visual-world] .ds-skin-swatch[data-swatch="auto"][data-resolved="vivid"]::before { filter: saturate(.35) brightness(1.1); }
html[data-visual-world].cv-dark .ds-skin-swatch[data-swatch="auto"][data-resolved="vivid"]::before { filter: saturate(.4) brightness(.62); }
html[data-visual-world].cv-dark .ds-skin-swatch { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); }
@media (max-width: 380px) {
  html[data-visual-world] .academy-skin-picker.ds-skin-picker [data-skin-select="auto"] { flex-direction: column; align-items: stretch; padding: 6px 6px 12px !important; }
  html[data-visual-world] [data-skin-select="auto"] .ds-skin-swatch { width: 100%; }
  html[data-visual-world] [data-skin-select="auto"] .ds-skin-copy { padding: 0 6px; }
  html[data-visual-world] .academy-skin-picker.ds-skin-picker [data-skin-select="minimal"] { flex-direction: column; align-items: stretch; padding: 6px 6px 12px !important; }
  html[data-visual-world] [data-skin-select="minimal"] .ds-skin-swatch { width: 100%; }
  html[data-visual-world] [data-skin-select="minimal"] .ds-skin-copy { padding: 0 6px; }
}
@media (prefers-reduced-transparency: reduce) { html[data-visual-world] .ds-skin-swatch::before { box-shadow: none; } }

/* ── 12. Dot ────────────────────────────────────────────────────────────────────────────
   The learning shell is Dot's room: the skin's canvas with a soft halo where Dot sits.
   Dot keeps its own violet in every skin — it is a character, not a theme colour. */
html[data-ds][data-visual-world] body {
  --dot-shell-ink: var(--ink); --dot-shell-muted: var(--muted); --dot-shell-canvas: var(--ds-canvas);
  --dot-shell-surface: var(--surface); --dot-shell-soft: var(--accent-soft-2); --dot-shell-line: var(--hairline);
  --dot-shell-accent: var(--academy-action); --dot-shell-accent-ink: var(--accent-ink);
  --ds-dot: #5b4fd6; --ds-dot-deep: #3f35a8;
}
html[data-ds][data-visual-world].cv-dark body { --ds-dot: #6a5ff0; --ds-dot-deep: #4a40c0; }
html[data-ds][data-visual-world] body[data-dot-shell="guided"] {
  background:
    radial-gradient(56% 42% at 50% 30%, color-mix(in srgb, var(--ds-dot) 10%, transparent), transparent 70%),
    var(--ds-canvas) !important;
}
html[data-ds][data-visual-world][data-ds-skin="vivid"] body[data-dot-shell="guided"] {
  background:
    radial-gradient(40% 32% at 50% 28%, color-mix(in srgb, var(--ds-sun) 30%, transparent), transparent 72%),
    radial-gradient(60% 50% at 50% 34%, color-mix(in srgb, var(--ds-dot) 12%, transparent), transparent 72%),
    var(--ds-canvas) !important;
}
html[data-ds][data-visual-world][data-ds-skin="minimal"] body[data-dot-shell="guided"] { background: var(--ds-canvas) !important; }
/* Header */
html[data-ds][data-visual-world] body #dot-shell-bar { background: color-mix(in srgb, var(--ds-canvas) 88%, transparent) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--hairline-soft) !important; }
html[data-ds][data-visual-world] body #dot-shell-bar .dot-shell-brand strong {
  font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important; color: var(--ink) !important; letter-spacing: var(--ds-display-track);
}
html[data-ds][data-visual-world][data-ds-skin="vivid"] body #dot-shell-bar .dot-shell-brand strong { color: var(--accent-ink) !important; font-weight: 900 !important; }
html[data-ds][data-visual-world] body :is(#dot-shell-bar, #dot-shell-home-view, #dot-shell-tool-bar, #dot-shell-menu) button:where(:not(.avdot-button)) { border-radius: var(--ds-r-control) !important; color: var(--ink-2) !important; font-weight: 600 !important; }
html[data-ds][data-visual-world] body :is(#dot-shell-bar, #dot-shell-home-view) button.dot-shell-primary { background: var(--academy-action) !important; color: #fff !important; border-radius: 999px !important; }
html[data-ds][data-visual-world] body :is(#dot-shell-bar, #dot-shell-home-view) button.dot-shell-primary:hover:not(:disabled) { background: var(--academy-action-hover) !important; }
/* Dot itself: a flat disc of Dot's violet (no glass highlight); eyes and moods are unchanged. */
html[data-ds][data-visual-world] body #avdot-panel .avdot-button.avdot-avatar,
html[data-ds][data-visual-world] body #avdot-launcher.avdot-avatar { background: var(--ds-dot) !important; }
html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-head > .avdot-avatar {
  width: 92px !important; height: 92px !important;
  box-shadow: inset 0 -6px 14px rgb(24 16 90 / 22%), 0 0 0 10px color-mix(in srgb, var(--ds-dot) 9%, transparent), 0 0 0 22px color-mix(in srgb, var(--ds-dot) 5%, transparent), 0 18px 36px rgb(63 53 168 / 26%) !important;
}
html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-head > .avdot-avatar .avdot-eyes { left: 32px; top: 36px; gap: 14px; }
html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-head > .avdot-avatar .avdot-eyes::before,
html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-head > .avdot-avatar .avdot-eyes::after { width: 7px; height: 13px; }
html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-head { padding-top: 28px !important; }
html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-empty { padding-top: 30px !important; }
html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-empty h3 {
  font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important;
  font-size: 40px !important; line-height: 1.2 !important; letter-spacing: var(--ds-display-track) !important; color: var(--ink) !important;
}
html[data-ds][data-visual-world]:is([data-ds-skin="academy"], [data-ds-skin="library"], [data-ds-skin="ginkgo"], [data-ds-skin="observatory"]) body #avdot-panel.avdot-inline .avdot-empty h3 { font-weight: 400 !important; font-style: italic; }
html[data-ds][data-visual-world][data-ds-skin="vivid"] body #avdot-panel.avdot-inline .avdot-empty h3 { font-weight: 900 !important; }
/* What Dot can do now */
html[data-ds][data-visual-world] body #dot-shell-choices { gap: 12px !important; }
html[data-ds][data-visual-world] body #dot-shell-choices .dot-shell-choice {
  min-height: 60px !important; padding: 12px 16px !important; border-radius: var(--ds-r-card) !important;
  background: var(--surface) !important; border: 1px solid var(--hairline) !important; box-shadow: var(--shadow-xs) !important; text-align: left;
}
html[data-ds][data-visual-world] body #dot-shell-choices .dot-shell-choice:hover:not(:disabled) { border-color: var(--accent-edge) !important; background: var(--surface) !important; box-shadow: var(--shadow-sm) !important; }
html[data-ds][data-visual-world] body .dot-shell-choice-title { font-size: 15px !important; color: var(--ink) !important; }
/* Composer */
html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-composer {
  border: 1px solid var(--hairline) !important; border-radius: var(--ds-r-hero) !important; padding: 14px 14px 12px !important;
  background: var(--surface) !important; box-shadow: var(--shadow) !important;
}
html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-composer:focus-within { border-color: color-mix(in srgb, var(--ds-dot) 50%, var(--hairline)) !important; }
html[data-ds][data-visual-world] body #avdot-panel textarea#avdot-input { border: 0 !important; box-shadow: none !important; background: transparent !important; font-size: 16px !important; }
html[data-ds][data-visual-world] body #avdot-panel .avdot-toolbar .avdot-mic { background: var(--ds-dot) !important; border-radius: 999px !important; padding: 0 16px 0 12px !important; font-weight: 650 !important; }
html[data-ds][data-visual-world] body #avdot-panel .avdot-toolbar .avdot-mic:hover:not(:disabled) { background: var(--ds-dot-deep) !important; }
html[data-ds][data-visual-world] body #avdot-panel .avdot-composer.avdot-has-text .avdot-mic { background: var(--accent-soft-2) !important; color: var(--ds-dot-deep) !important; }
html[data-ds][data-visual-world] body #avdot-panel .avdot-toolbar .avdot-send { border-radius: 999px !important; }
html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-send,
html[data-ds][data-visual-world] body #avdot-panel .avdot-composer.avdot-has-text .avdot-send { background: var(--ds-dot) !important; color: #fff !important; }
html[data-ds][data-visual-world] body #avdot-panel .avdot-composer:not(.avdot-has-text) .avdot-send { background: var(--surface-2) !important; color: var(--muted) !important; }
html[data-ds][data-visual-world] body #avdot-panel .avdot-button:disabled:not(.avdot-avatar) { opacity: .38 !important; }
html[data-ds][data-visual-world] body #avdot-panel .avdot-status { color: var(--muted) !important; text-align: center; }
/* Conversation */
html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-user { background: color-mix(in srgb, var(--ds-dot) 10%, var(--surface)) !important; border-radius: 18px 18px 6px 18px !important; }
html[data-ds][data-visual-world] body #avdot-panel :is(.avdot-reply, .avdot-dot-text, .avdot-answer) { font-size: 16px; line-height: 1.7; color: var(--ink); }
@media (max-width: 767px) {
  html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-empty h3 { font-size: 30px !important; }
  html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-head > .avdot-avatar { width: 80px !important; height: 80px !important; }
  html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-head > .avdot-avatar .avdot-eyes { left: 27px; top: 31px; gap: 12px; }
  html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-composer { border-radius: var(--ds-r-card) !important; }
}
/* "Stop" only appears while Dot is listening or speaking; idle it looked like an empty checkbox. */
html[data-ds][data-visual-world] body #avdot-panel .avdot-toolbar .avdot-button:is([aria-label="停止"], [aria-label="Stop"]):disabled { display: none !important; }

/* ── 13. Sign-in ────────────────────────────────────────────────────────────────────────
   The approved candid photographs stay; controls follow the skin. */
html[data-ds][data-visual-world][data-ds-skin="vivid"] #authScreen { --academy-action: #5a4eb0; --academy-action-hover: #4d4299; }
html[data-ds][data-visual-world][data-ds-skin="vivid"].cv-dark #authScreen { --academy-action: #6458c0; --academy-action-hover: #6f64c9; }
html[data-ds][data-visual-world] #authScreen .auth-card { border-radius: var(--ds-r-hero) !important; }
html[data-ds][data-visual-world] #authScreen .auth-head h2 { font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important; font-size: 24px !important; }
html[data-ds][data-visual-world] #authScreen .auth-tabs button.active { border-bottom-color: var(--academy-action) !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] #authScreen .auth-form input:not([type="checkbox"]) { border-radius: var(--ds-r-control) !important; }

/* ── 14. Floating Dot panel ────────────────────────────────────────────────────────────
   (5.10.3: the vivid-only filled controls and their dark-mode fixes are gone; every skin
   marks a selected tab, mode or nav item with a light tint or a white chip.) */
html[data-ds][data-visual-world] body #avdot-panel:not(.avdot-inline) { background: var(--surface) !important; border-left: 1px solid var(--hairline-soft) !important; box-shadow: var(--shadow-lg) !important; }
html[data-ds][data-visual-world] body #avdot-panel:not(.avdot-inline) .avdot-head { background: var(--surface) !important; border-bottom: 1px solid var(--hairline-soft) !important; }
html[data-ds][data-visual-world] body #avdot-panel .avdot-heading h2 { font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] body #avdot-panel:not(.avdot-inline) .avdot-empty h3 { font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important; font-size: 24px !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] body #avdot-panel:not(.avdot-inline) .avdot-composer { border-radius: var(--ds-r-card) !important; border-color: var(--hairline) !important; }

/* ── 15. Learner stage: primary learners (Starters, Movers) ────────────────────────────
   Larger reading text and targets; the same layout so teachers can still guide by sight. */
html[data-ds][data-visual-world][data-stage="primary"] #mainNav .nav-item { font-size: 16px !important; }
html[data-ds][data-visual-world][data-stage="primary"] #appShell #dot-original-topbar h1#viewTitle { font-size: 34px !important; }
html[data-ds][data-visual-world][data-stage="primary"] #view-today .learning-journey-copy strong { font-size: 28px !important; }
html[data-ds][data-visual-world][data-stage="primary"] #view-today .home-workspace-head h2,
html[data-ds][data-visual-world][data-stage="primary"] #view-today .home-workspace .cv-rail-eyebrow { font-size: 22px !important; }
html[data-ds][data-visual-world][data-stage="primary"] #view-today .home-workspace :is(.home-check-main, .daily-checkin-main) > strong { font-size: 16px !important; }
html[data-ds][data-visual-world][data-stage="primary"] #view-reading :is(.reading-paragraph-copy p, .sentence-text, .reading-full-text p) { font-size: 21px !important; line-height: 1.75 !important; }
html[data-ds][data-visual-world][data-stage="primary"] #view-listen .book-audio-main strong { font-size: 17px !important; }
html[data-ds][data-visual-world][data-stage="primary"] :is(.primary-action, .secondary-action, .cv-wc-next, .cv-wc-know, .cv-wc-tool, .cv-wc-say) { min-height: 48px !important; font-size: 16px !important; }
html[data-ds][data-visual-world][data-stage="primary"] body #avdot-panel textarea#avdot-input { font-size: 17px !important; }
@media (max-width: 767px) {
  html[data-ds][data-visual-world][data-stage="primary"] #appShell #dot-original-topbar h1#viewTitle { font-size: 28px !important; }
  html[data-ds][data-visual-world][data-stage="primary"] #view-reading :is(.reading-paragraph-copy p, .sentence-text, .reading-full-text p) { font-size: 20px !important; }
}

/* ── 16. Word card ──────────────────────────────────────────────────────────────────── */
html[data-ds][data-visual-world] #view-study .word-card { border-radius: var(--ds-r-hero) !important; }
html[data-ds][data-visual-world] #view-study .word-card .word-title { font-weight: var(--ds-display-weight) !important; color: var(--ink) !important; }
html[data-ds][data-visual-world]:is([data-ds-skin="academy"], [data-ds-skin="library"], [data-ds-skin="ginkgo"], [data-ds-skin="observatory"]) #view-study .word-card .word-title { font-weight: 400 !important; }
html[data-ds][data-visual-world][data-ds-skin="vivid"] #view-study .word-card .word-title { font-weight: 900 !important; }
html[data-ds][data-visual-world] #view-study .word-card .word-example { font-family: var(--ds-reading-face, var(--ds-sans)) !important; font-size: 17px !important; line-height: 1.65 !important; color: var(--ink-2) !important; }
html[data-ds][data-visual-world][data-stage="primary"] #view-study .word-card .word-title { font-size: clamp(48px, 6.4vw, 76px) !important; }
html[data-ds][data-visual-world][data-stage="primary"] #view-study .word-card :is(.word-meaning, .word-example) { font-size: 19px !important; }
html[data-ds][data-visual-world] .words-mode-toggle { background: color-mix(in srgb, var(--ink) 6%, transparent) !important; border-radius: calc(var(--ds-r-control) + 4px) !important; padding: 4px !important; border: 0 !important; }
html[data-ds][data-visual-world] .words-mode-toggle .wm-btn { border-radius: var(--ds-r-control) !important; border: 0 !important; background: transparent !important; color: var(--ink-2) !important; box-shadow: none !important; }
html[data-ds][data-visual-world] .words-mode-toggle .wm-btn:is(.on, [aria-pressed="true"]) { background: var(--surface) !important; color: var(--ink) !important; box-shadow: 0 1px 2px rgb(16 24 40 / 10%), 0 0 0 1px var(--hairline-soft) !important; }
/* Selected segment (word modes, listening modes, reading and writing tabs, teacher filters):
   a raised chip in every skin, never a solid fill. In dark mode the plain surface sat darker
   than its track and read as a hole, so the chip steps up to --surface-3 with a light ring (the
   dark --hairline is the same tone as --surface-3 and left the chip without an edge). */
html[data-ds][data-visual-world].cv-dark :is(#view-listen .listen-mode-card.active, #view-reading .reading-mode-tabs button.active, #view-writing .writing-mode-tabs button.active, .words-mode-toggle .wm-btn:is(.on, [aria-pressed="true"]), #view-teacher .t-seg button[aria-pressed="true"]) {
  background: var(--surface-3) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent), 0 1px 2px rgb(0 0 0 / 30%) !important;
}

/* ── 17. Homework records (作业记录) ─────────────────────────────────────────────────── */
html[data-ds][data-visual-world] #view-assignments .assignment-archive-section {
  padding: 18px 22px !important; background: var(--ds-card) !important; border: 1px solid var(--ds-card-edge) !important;
  border-radius: var(--ds-r-card) !important; box-shadow: var(--shadow-sm) !important;
}
html[data-ds][data-visual-world][data-ds-skin="minimal"] #view-assignments .assignment-archive-section { box-shadow: none !important; }
html[data-ds][data-visual-world] #view-assignments .assignment-collapsible { padding: 0 !important; }
html[data-ds][data-visual-world] #view-assignments .assignment-collapsible > summary { padding: 16px 22px !important; border-radius: var(--ds-r-card); }
html[data-ds][data-visual-world] #view-assignments .assignment-collapsible[open] > summary { border-bottom: 1px solid var(--hairline-soft); border-radius: var(--ds-r-card) var(--ds-r-card) 0 0; }
html[data-ds][data-visual-world] #view-assignments .assignment-collapsible-body { padding: 8px 22px 18px !important; }
html[data-ds][data-visual-world] #view-assignments .assignment-section-toggle strong,
html[data-ds][data-visual-world] #view-assignments .assignment-archive-section .section-head h3 { font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important; font-size: 18px !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] #view-assignments .assignment-overview-counts dd { font-family: var(--font-display) !important; font-size: 24px !important; font-weight: var(--ds-display-weight) !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] #view-assignments .assignment-find-bar { gap: 10px !important; }
html[data-ds][data-visual-world] .view .workspace-back { width: fit-content !important; max-width: 100%; justify-self: start; align-self: flex-start; padding: 0 16px 0 12px !important; border-radius: 999px !important; }

/* ── 18. Dialogs ────────────────────────────────────────────────────────────────────── */
html[data-ds][data-visual-world] .modal-mask .speech-modal { border-radius: var(--ds-r-hero) !important; border: 1px solid var(--hairline-soft) !important; box-shadow: var(--shadow-lg) !important; background: var(--surface) !important; }
html[data-ds][data-visual-world] .modal-mask .speech-modal h2 { font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important; }
html[data-ds][data-visual-world] .modal-mask .speech-target { font-family: var(--ds-reading-face, var(--ds-sans)) !important; font-size: 18px !important; line-height: 1.6 !important; border-radius: var(--ds-r-control) !important; }
html[data-ds][data-visual-world] .modal-mask .modal-close { border-radius: 999px !important; }
html[data-ds][data-visual-world] .settings-drawer { border-radius: var(--ds-r-hero) 0 0 var(--ds-r-hero) !important; }
@media (max-width: 767px) { html[data-ds][data-visual-world] .settings-drawer { border-radius: 0 !important; } }
/* Start-up screen continues the splash: same canvas, display face for its heading. */
html[data-ds][data-visual-world] #aiviaStudentStartup { background: var(--ds-canvas) !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] #aiviaStudentStartup :is(h2, .cv-anim-copy strong) { font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] #aiviaStudentStartup :is(p, .cv-anim-copy span) { color: var(--muted) !important; }

/* ── 19. Vivid illustration (5.9.1): a children's treehouse reading nook, day and night. ── */
html[data-ds][data-visual-world][data-palette][data-ds-skin="vivid"] {
  --panorama-day: url("assets/academy/skins/vivid/vivid-day-v1.webp");
  --panorama-night: url("assets/academy/skins/vivid/vivid-night-v1.webp");
  --panorama-position: center top;
}
@media (max-width: 767px) {
  html[data-ds][data-visual-world][data-palette][data-ds-skin="vivid"] {
    --panorama-day: url("assets/academy/skins/vivid/vivid-day-small-v1.webp");
    --panorama-night: url("assets/academy/skins/vivid/vivid-night-small-v1.webp");
    --panorama-position: 70% top;
  }
}
/* The library light shimmer belonged to the old photograph. */
html[data-ds][data-visual-world][data-ds-skin="vivid"] #appShell .academy-scene-detail { display: none !important; }

/* ── 19b. Three illustrated rooms (5.10.0): ginkgo courtyard, seaside reading nook, observatory.
   Each is one 3:2 painting with a matched day and night version; the phone crop keeps the
   focal object (the tree, the window, the telescope) to the right of the page title. */
html[data-ds][data-visual-world][data-palette][data-ds-skin="ginkgo"] { --panorama-day: url("assets/academy/skins/ginkgo/ginkgo-day-v1.webp"); --panorama-night: url("assets/academy/skins/ginkgo/ginkgo-night-v1.webp"); --panorama-position: 64% top; }
html[data-ds][data-visual-world][data-palette][data-ds-skin="seaside"] { --panorama-day: url("assets/academy/skins/seaside/seaside-day-v1.webp"); --panorama-night: url("assets/academy/skins/seaside/seaside-night-v1.webp"); --panorama-position: 60% top; }
html[data-ds][data-visual-world][data-palette][data-ds-skin="observatory"] { --panorama-day: url("assets/academy/skins/observatory/observatory-day-v1.webp"); --panorama-night: url("assets/academy/skins/observatory/observatory-night-v1.webp"); --panorama-position: 62% top; }
@media (max-width: 767px) {
  html[data-ds][data-visual-world][data-palette][data-ds-skin="ginkgo"] { --panorama-day: url("assets/academy/skins/ginkgo/ginkgo-day-small-v1.webp"); --panorama-night: url("assets/academy/skins/ginkgo/ginkgo-night-small-v1.webp"); --panorama-position: 66% top; }
  html[data-ds][data-visual-world][data-palette][data-ds-skin="seaside"] { --panorama-day: url("assets/academy/skins/seaside/seaside-day-small-v1.webp"); --panorama-night: url("assets/academy/skins/seaside/seaside-night-small-v1.webp"); --panorama-position: 62% top; }
  html[data-ds][data-visual-world][data-palette][data-ds-skin="observatory"] { --panorama-day: url("assets/academy/skins/observatory/observatory-day-small-v1.webp"); --panorama-night: url("assets/academy/skins/observatory/observatory-night-small-v1.webp"); --panorama-position: 64% top; }
}
/* The campus water shimmer is drawn for the campus painting only. */
html[data-ds][data-visual-world]:is([data-ds-skin="ginkgo"], [data-ds-skin="seaside"], [data-ds-skin="observatory"]) #appShell .academy-scene-detail { display: none !important; }
/* The quote card and journey mark pick up each room's signature colour. */
html[data-ds][data-visual-world][data-ds-skin="ginkgo"] .sidebar .quote-card .eyebrow .ic { color: #b03a28; }
html[data-ds][data-visual-world][data-ds-skin="ginkgo"].cv-dark .sidebar .quote-card .eyebrow .ic { color: #e0745a; }

/* ── 20. 5.9.2 fixes ─────────────────────────────────────────────────────────────────── */
/* Class-membership warning: a readable notice in the content column, not a bare bar. */
html[data-ds][data-visual-world] #appShell .main > #accountMembershipStatus:not(.is-pending) {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: var(--ds-content); margin: 16px auto 0 !important; box-sizing: border-box;
  padding: 8px 8px 8px 16px !important; border: 1px solid color-mix(in srgb, var(--amber-ink) 22%, transparent) !important;
  border-radius: var(--ds-r-control) !important; background: var(--amber-soft) !important; color: var(--amber-ink) !important;
  font-size: 14px !important; box-shadow: none !important;
}
html[data-ds][data-visual-world] #appShell .main > #accountMembershipStatus:not(.is-pending) [data-refresh-membership] { color: var(--amber-ink) !important; border-radius: 999px !important; min-width: 40px; min-height: 40px; }
/* Phone: listening modes share the width equally so the third tab never clips. */
@media (max-width: 767px) {
  html[data-ds][data-visual-world] #view-listen .listen-mode-grid { width: 100% !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html[data-ds][data-visual-world] #view-listen .listen-mode-card { min-width: 0 !important; width: 100% !important; padding: 8px 4px !important; }
  html[data-ds][data-visual-world] #view-listen .listen-mode-card strong { font-size: 14px !important; }
}

/* ── 21. Frosted overview (5.9.2) ────────────────────────────────────────────────────
   On the illustrated looks the home overview is a pane of frosted glass: the artwork above it
   carries on underneath as soft colour instead of stopping at a white slab. The scene on the
   home page is taller so there is artwork to see through the glass. Text keeps its contrast
   because the glass stays mostly opaque; minimal and reduced-transparency stay solid. */
html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]) body[data-view]:not([data-dot-shell="guided"]) #appShell #dot-original-topbar .academy-header-scene {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44%, #000 94%, transparent), linear-gradient(transparent, #000 10%, #000 58%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 44%, #000 94%, transparent), linear-gradient(transparent, #000 10%, #000 58%, transparent);
}
@media (min-width: 768px) {
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]) body[data-view]:not([data-dot-shell="guided"]) #appShell #dot-original-topbar .academy-header-scene { top: 0; width: min(56vw, 640px); height: min(420px, 60vh, min(56vw, 640px) * 2 / 3); }
}
@media (max-width: 767px) {
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]) body[data-view]:not([data-dot-shell="guided"]) #appShell #dot-original-topbar .academy-header-scene {
    top: 44px; width: 100vw; height: calc(100vw * 2 / 3);
    -webkit-mask-image: linear-gradient(90deg, transparent 36%, #000 80%), linear-gradient(transparent, #000 12%, #000 56%, transparent);
    mask-image: linear-gradient(90deg, transparent 36%, #000 80%), linear-gradient(transparent, #000 12%, #000 56%, transparent);
  }
}
/* The view entrance fade must not stay applied once it ends (legacy fill "both"): a held
   opacity effect makes every view a backdrop root, and the glass would see nothing to blur. */
html[data-ds][data-visual-world] .view.active { animation-fill-mode: backwards !important; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* 5.10.3 calm: the white sheen and the bright inner top edge read as gloss; both are kept
     faint so the pane stays matte, with its hairline border and soft shadow to separate it. */
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]) {
    --ds-glass: color-mix(in srgb, var(--ds-card) 74%, transparent);
    --ds-glass-sheen: linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 0%) 46%);
    --ds-glass-edge: inset 0 1px 0 rgb(255 255 255 / 28%);
    --ds-glass-tint: color-mix(in srgb, var(--surface-2) 34%, transparent);
  }
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]).cv-dark {
    --ds-glass: color-mix(in srgb, var(--ds-card) 80%, transparent);
    --ds-glass-sheen: linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 0%) 46%);
    --ds-glass-edge: inset 0 1px 0 rgb(255 255 255 / 7%);
    --ds-glass-tint: color-mix(in srgb, var(--surface-2) 30%, transparent);
  }
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]) #view-today .home-overview-bar {
    background: var(--ds-glass-sheen), var(--ds-glass) !important;
    border-color: color-mix(in srgb, var(--ds-card-edge) 72%, transparent) !important;
    box-shadow: var(--ds-glass-edge), var(--shadow) !important;
    -webkit-backdrop-filter: saturate(165%) blur(24px); backdrop-filter: saturate(165%) blur(24px);
  }
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]) #view-today .home-overview-bar > .learning-journey {
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%) !important;
  }
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]) #view-today .home-overview-bar > :is(.home-completion, .home-member-quota) { background: var(--ds-glass-tint) !important; }
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]) #view-today :is(.home-member-quota-head, .home-completion .home-refresh-icon-action) {
    background: color-mix(in srgb, var(--surface) 78%, transparent) !important;
  }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  html[data-ds][data-visual-world] #view-today .home-overview-bar { background: var(--ds-card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html[data-ds][data-visual-world] #view-today .home-overview-bar > :is(.home-completion, .home-member-quota) { background: var(--surface-2) !important; }
}

/* ── 22. Breathing room (5.9.2) ──────────────────────────────────────────────────────
   Labels never touch the edge of the shape drawn around them. Pills need more side room
   than rectangles because the round ends take up part of the width, so every button sits
   on one scale: 18px (14px small) beside the label, in every skin (5.10.3: vivid no longer
   turns every button into a pill). An icon in front of a label always has its own gap. */
html[data-ds][data-visual-world] { --ds-btn-px: 18px; --ds-btn-px-sm: 14px; }
/* Icon + label: buttons laid out as plain blocks had the icon glued to the text. Low
   specificity on purpose, so any layout a component sets for itself still wins. */
html[data-ds] :where(.primary-action, .secondary-action, .pill-button):where(:has(> svg:first-child)) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
html[data-ds] :where(.primary-action, .secondary-action, .pill-button) > svg:first-child { flex: none; }

/* Home */
html[data-ds][data-visual-world] #view-today .home-completion .home-refresh-icon-action { padding: 0 var(--ds-btn-px-sm) 0 12px !important; }
html[data-ds][data-visual-world] #view-today .home-member-quota-head { padding: 10px 14px 10px 16px !important; }
html[data-ds][data-visual-world] #view-today .home-workspace-empty button { padding: 0 calc(var(--ds-btn-px) - 4px) 0 var(--ds-btn-px) !important; }
html[data-ds][data-visual-world] #view-today .home-workspace .task-entry-action { padding: 8px var(--ds-btn-px) !important; }
html[data-ds][data-visual-world] #view-today .home-workspace-notice { padding: 10px 10px 10px 18px; gap: 12px; }
html[data-ds][data-visual-world] #view-today .home-workspace-notice .secondary-action { padding: 0 var(--ds-btn-px-sm) 0 12px !important; gap: 6px !important; }
@media (max-width: 767px) {
  html[data-ds][data-visual-world] #view-today .home-workspace-notice { padding: 12px 12px 12px 16px; }
}

/* Back: a soft tinted pill, never a box against the edge of the page. */
html[data-ds][data-visual-world] .view .workspace-back,
html[data-ds][data-visual-world] #view-reading .reading-detail .cv-read-back,
html[data-ds][data-visual-world] #view-reading .reading-detail-tools > .cv-read-back {
  display: inline-flex !important; align-items: center; gap: 6px !important;
  width: fit-content !important; max-width: 100%; min-height: 40px !important;
  padding: 0 18px 0 12px !important; border: 0 !important; border-radius: 999px !important;
  background: color-mix(in srgb, var(--ink) 6%, transparent) !important; color: var(--ink-2) !important;
  font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; text-decoration: none;
}
html[data-ds][data-visual-world] :is(.view .workspace-back, #view-reading .cv-read-back) .ic { width: 16px; height: 16px; opacity: .8; }
/* The check-in focus pages' 返回学习中心 is the same back: the soft pill, not a hairline box
   (on phones it was a full-width bar). Shape and colour only; display stays the page's own. */
html[data-ds][data-visual-world] :is(#readingFocusBack, #listenFocusBack) {
  width: fit-content !important; max-width: 100%; min-height: 40px !important; gap: 6px !important;
  padding: 0 18px 0 12px !important; border: 0 !important; border-radius: 999px !important;
  background: color-mix(in srgb, var(--ink) 6%, transparent) !important; color: var(--ink-2) !important;
  font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html[data-ds][data-visual-world] :is(.view .workspace-back, #view-reading .reading-detail .cv-read-back, #view-reading .reading-detail-tools > .cv-read-back):hover { background: color-mix(in srgb, var(--ink) 10%, transparent) !important; color: var(--ink) !important; }
  html[data-ds][data-visual-world] :is(#readingFocusBack, #listenFocusBack):not(:disabled):hover { background: color-mix(in srgb, var(--ink) 10%, transparent) !important; color: var(--ink) !important; }
}
/* Reading detail: the sticky commands float over the text, so they are frosted and inset. */
html[data-ds][data-visual-world] #view-reading .reading-detail-tools { padding: 6px 2px 10px !important; gap: 10px !important; }
html[data-ds][data-visual-world] #view-reading .reading-detail-tools > .reading-full-jump {
  min-height: 40px !important; padding: 0 12px 0 18px !important; gap: 4px !important; border: 0 !important; border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent) 9%, transparent) !important; color: var(--accent-ink) !important;
  font-size: 14px !important; text-decoration: none !important;
}
html[data-ds][data-visual-world] #view-reading .reading-detail-tools > :is(.cv-read-back, .reading-full-jump) {
  -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px);
}
html[data-ds][data-visual-world] #view-reading .reading-detail-tools > .cv-read-back { background: color-mix(in srgb, var(--surface) 72%, color-mix(in srgb, var(--ink) 14%, transparent)) !important; }
html[data-ds][data-visual-world] #view-reading .reading-detail-tools > .reading-full-jump { background: color-mix(in srgb, var(--surface) 72%, color-mix(in srgb, var(--accent) 22%, transparent)) !important; }
@media (hover: hover) and (pointer: fine) {
  html[data-ds][data-visual-world] #view-reading .reading-detail-tools > .reading-full-jump:hover { background: var(--accent-soft) !important; }
}
html[data-ds][data-visual-world] #view-reading .quota-link { padding: 0 var(--ds-btn-px-sm) !important; border-radius: 999px !important; text-decoration: none !important; }

/* Segmented controls and chips */
html[data-ds][data-visual-world] .words-mode-toggle .wm-btn { padding-inline: 16px !important; }
html[data-ds][data-visual-world] :is(#view-reading .reading-mode-tabs, #view-writing .writing-mode-tabs) button { padding-inline: 18px !important; }
html[data-ds][data-visual-world] #view-reading .reading-source-tabs button { padding-inline: 16px !important; }
/* Three sources in the narrow catalogue column: columns follow their labels, so the longest
   label ("AI 拓展阅读") gets the room instead of three equal, cramped thirds. */
html[data-ds][data-visual-world] #view-reading .reading-source-tabs:has(> button:nth-child(3)) { grid-template-columns: repeat(3, auto) !important; }
html[data-ds][data-visual-world] #view-reading .reading-source-tabs:has(> button:nth-child(3)) > button { padding-inline: 6px !important; }
html[data-ds][data-visual-world] #view-growth .growth-filter-chip { min-height: 34px !important; padding: 0 var(--ds-btn-px-sm) !important; }
/* Selected filter chip: a tint, not a solid --accent fill (in dark mode that put white on a pale
   fill at under 2.5:1). Teacher activity filters use the same chip. */
html[data-ds][data-visual-world] :is(#view-growth, #view-teacher) .growth-filter-chip.active { background: var(--accent-soft) !important; border-color: var(--accent-edge) !important; color: var(--accent-ink) !important; }
/* Teacher 打卡 result filters (全部学生 / 未完成 …): ux-workspace.css marks the pressed one at (0,2,1), which the
   secondary rule above outranks, so the selection did not show at all. Same tint chip, a step bolder. */
html[data-ds][data-visual-world] .teacher-result-quick-filters button[aria-pressed="true"] { background: var(--accent-soft) !important; border-color: var(--accent-edge) !important; color: var(--accent-ink) !important; font-weight: 650 !important; }
/* Badge-wall category tabs: the selected count took the raw category colour (3.4–3.7:1). */
html[data-ds][data-visual-world] #view-growth .cv-ms-tabs button.is-active { color: color-mix(in srgb, var(--cat) 70%, var(--ink)); }
html[data-ds][data-visual-world] #view-writing .writing-direct-action { padding: 0 var(--ds-btn-px-sm) 0 12px !important; gap: 6px !important; min-height: 38px; }
html[data-ds][data-visual-world] #view-writing #clearWritingOcr { padding-inline: var(--ds-btn-px) !important; }
html[data-ds][data-visual-world] #view-member .member-offer { padding-inline: 16px !important; }
/* Icon buttons drawn by member-center.css took the legacy --r-xs (6–12px by skin). */
html[data-ds][data-visual-world] :is(.member-icon-action, .member-dialog-close) { border-radius: var(--ds-r-control) !important; }
/* 刷新额度 is a small secondary button: the same pill and weight as the home 刷新 (it was a 10px box at 800). */
html[data-ds][data-visual-world] .member-refresh-action { border-radius: 999px !important; font-weight: 600 !important; }
/* 难词本 rows carry a strip of small (34px) buttons — 播放 / 练习 / 造句巩固 / 自评已会: pills in every skin
   (only the row's own strip; the 造句巩固 coach panel that opens below keeps the regular shapes). */
html[data-ds][data-visual-world] #view-wrong .wrong-word-card > .inline-actions :is(.primary-action, .secondary-action) { border-radius: 999px !important; }

/* Settings: each section is a card, so its contents sit inside it. */
html[data-ds][data-visual-world] #settingsDrawer .settings-card.surface-card { padding: 20px !important; }
html[data-ds][data-visual-world] #settingsDrawer .settings-level-option { padding-inline: 16px !important; }
@media (max-width: 767px) {
  html[data-ds][data-visual-world] #settingsDrawer .settings-card.surface-card { padding: 18px 16px !important; }
}

/* Dot: the floating panel's suggestions are full-width rows with a way-in arrow; the
   inline (Dot page) suggestions stay pills with generous ends. */
html[data-ds][data-visual-world] body #avdot-panel .avdot-suggestion { border-radius: 999px !important; }
html[data-ds][data-visual-world] body #avdot-panel.avdot-inline .avdot-suggestion { padding: 10px 18px !important; }
html[data-ds][data-visual-world] body #avdot-panel:not(.avdot-inline) .avdot-suggestions { gap: 8px !important; }
html[data-ds][data-visual-world] body #avdot-panel:not(.avdot-inline) .avdot-suggestion {
  display: flex !important; align-items: center; justify-content: space-between !important; gap: 12px;
  width: 100%; min-height: 48px; padding: 12px 16px 12px 18px !important;
  border: 1px solid var(--hairline) !important; border-radius: var(--ds-r-control) !important;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)) !important; color: var(--ink) !important;
  font-size: 15px !important; font-weight: 600 !important; text-align: left; box-shadow: none !important;
  transition: border-color var(--ds-fast) var(--ds-ease), background-color var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}
html[data-ds][data-visual-world] body #avdot-panel:not(.avdot-inline) .avdot-suggestion::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-right: 4px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .45;
}
@media (hover: hover) and (pointer: fine) {
  html[data-ds][data-visual-world] body #avdot-panel:not(.avdot-inline) .avdot-suggestion:not(:disabled):hover { border-color: var(--accent-edge) !important; background: var(--accent-soft-2) !important; color: var(--accent-ink) !important; }
  html[data-ds][data-visual-world] body #avdot-panel:not(.avdot-inline) .avdot-suggestion:not(:disabled):hover::after { opacity: .9; }
}
html[data-ds][data-visual-world] body #avdot-panel:not(.avdot-inline) .avdot-suggestion:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; }
html[data-ds][data-visual-world] body #avdot-panel .avdot-toolbar .avdot-mic { padding: 0 20px 0 16px !important; }
@media (max-width: 359px) { html[data-ds][data-visual-world] body #avdot-panel .avdot-toolbar .avdot-mic { padding: 0 10px 0 8px !important; } }
/* Sync notice (main column and settings): a rounded notice with room inside, its own marker. */
html[data-ds][data-visual-world] #appShell .main > .learning-recovery { width: 100%; max-width: var(--ds-content); margin: 0 auto !important; box-sizing: border-box; }
html[data-ds][data-visual-world] .learning-recovery { border: 1px solid var(--hairline) !important; border-radius: var(--ds-r-control) !important; background: var(--surface) !important; overflow: hidden; }
html[data-ds][data-visual-world] .learning-recovery > summary { display: flex; align-items: center; gap: 10px; padding: 10px 16px !important; list-style: none; }
html[data-ds][data-visual-world] .learning-recovery > summary::-webkit-details-marker { display: none; }
html[data-ds][data-visual-world] .learning-recovery > summary::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); opacity: .55; transition: transform var(--ds-fast) var(--ds-ease);
}
html[data-ds][data-visual-world] .learning-recovery[open] > summary::before { transform: rotate(45deg); }
html[data-ds][data-visual-world] .learning-recovery-panel { padding: 0 16px 14px !important; }
html[data-ds][data-visual-world] .learning-recovery button { border-radius: 999px !important; padding: 0 var(--ds-btn-px-sm) !important; }
/* Phone: the floating Dot panel keeps its close button on the title row when it is the only tool. */
@media (max-width: 767px) {
  html[data-ds][data-visual-world] body #avdot-panel:not(.avdot-inline) .avdot-head-tools:has(> :only-child) { flex-basis: auto; }
}

/* ── 23. Glass pages (5.9.3) ─────────────────────────────────────────────────────────
   The artwork carries on behind the page on every student view, and the cards that sit on
   it are frosted glass, so the picture shows through softly instead of stopping at a slab.
   The home overview is the clearest pane (its shapes stay readable); other cards are a
   little more opaque. Only top-level cards are glass: a frosted parent would hide the art
   from any frosted child. Minimal, reduced transparency, forced colours and the quieter
   interface setting (减少动效) keep solid cards, which also spares slower devices the blur. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]):not(.cv-reduce-motion) {
    --ds-glass-lead: color-mix(in srgb, var(--ds-card) 50%, transparent);
    --ds-glass-card: color-mix(in srgb, var(--ds-card) 72%, transparent);
    --ds-glass-panel: color-mix(in srgb, var(--surface-2) 66%, transparent);
    --ds-glass-sheen: linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 0%) 42%);
    --ds-glass-tint: color-mix(in srgb, var(--surface-2) 28%, transparent);
    --ds-glass-blur: saturate(150%) blur(16px);
    --ds-glass-blur-lead: saturate(150%) blur(8px);
  }
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]):not(.cv-reduce-motion).cv-dark {
    --ds-glass-lead: color-mix(in srgb, var(--ds-card) 62%, transparent);
    --ds-glass-card: color-mix(in srgb, var(--ds-card) 78%, transparent);
    --ds-glass-panel: color-mix(in srgb, var(--surface-2) 72%, transparent);
    --ds-glass-sheen: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 0%) 42%);
    --ds-glass-tint: color-mix(in srgb, var(--surface-2) 26%, transparent);
  }
  /* Home overview: the clearest pane. Small grey labels are darkened a step to stay legible. */
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]):not(.cv-reduce-motion) #view-today .home-overview-bar {
    --muted: color-mix(in srgb, var(--muted) 45%, var(--ink));
    background: var(--ds-glass-sheen), var(--ds-glass-lead) !important;
    -webkit-backdrop-filter: var(--ds-glass-blur-lead); backdrop-filter: var(--ds-glass-blur-lead);
  }
  /* Top-level cards on every student view. */
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]):not(.cv-reduce-motion) #appShell .main :is(
    #view-today .home-workspace,
    #view-study :is(.cv-study-sheet, .word-card),
    #view-listen :is(.book-audio-list, .listen-catalog-guide),
    #view-reading .reading-workspace,
    #view-writing .writing-step,
    #view-growth :is(.growth-hero, .cv-ms-focus, .growth-heatmap-card, .growth-curve-card, .growth-history-card),
    #view-member :is(.member-beneficiary, .member-value-card, .member-free-card, .member-offer, .member-checkout-panel, .member-live-list, .member-quota-table),
    #view-referral :is(.cv-ref-hero, .cv-ref-share, .cv-ref-list-card),
    #view-referral > .workbench-loading,
    #view-assignments .assignment-archive-section
  ) {
    background-color: var(--ds-glass-card) !important;
    border-color: color-mix(in srgb, var(--ds-card-edge) 70%, transparent) !important;
    -webkit-backdrop-filter: var(--ds-glass-blur); backdrop-filter: var(--ds-glass-blur);
  }
  /* Member panels were tinted (surface-2); they stay a touch warmer than plain cards. */
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]):not(.cv-reduce-motion) #appShell #view-member :is(.member-beneficiary, .member-value-card, .member-free-card, .member-checkout-panel) { background-color: var(--ds-glass-panel) !important; }
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]):not(.cv-reduce-motion) #appShell #view-member .member-offer.is-selected { background-color: color-mix(in srgb, var(--accent-soft-2) 80%, transparent) !important; }
  /* Panels inside a glass card become tints of it rather than solid blocks. */
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]):not(.cv-reduce-motion) #appShell #view-reading .reading-workspace .reading-full-text { background-color: var(--ds-glass-tint) !important; }
  @media (min-width: 768px) { html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]):not(.cv-reduce-motion) #appShell #view-reading .reading-workspace .reading-catalog { background-color: var(--ds-glass-tint) !important; } }
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]):not(.cv-reduce-motion) #appShell #view-listen .book-audio-list .cv-listen-divider { background-color: var(--ds-glass-tint) !important; }
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]):not(.cv-reduce-motion) #appShell #view-growth .cv-ms-focus :is(.cv-ms-focus-head, .cv-ms-focus-note) { background-color: var(--ds-glass-tint) !important; }
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]):not(.cv-reduce-motion) #appShell #view-referral .cv-ref-stat { background-color: var(--ds-glass-tint) !important; }
}
/* The quieter interface setting keeps the overview solid too. */
html[data-ds][data-visual-world].cv-reduce-motion #view-today .home-overview-bar { background: var(--ds-card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-ds][data-visual-world].cv-reduce-motion #view-today .home-overview-bar > :is(.home-completion, .home-member-quota) { background: color-mix(in srgb, var(--surface-2) 70%, var(--ds-card)) !important; }
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  html[data-ds][data-visual-world] #appShell .main .view :is(.home-workspace, .cv-study-sheet, .word-card, .book-audio-list, .listen-catalog-guide, .reading-workspace, .writing-step, .growth-hero, .cv-ms-focus, .growth-heatmap-card, .growth-curve-card, .growth-history-card, .member-offer, .member-live-list, .member-quota-table, .cv-ref-hero, .cv-ref-share, .cv-ref-list-card, .assignment-archive-section) {
    background-color: var(--ds-card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* 5.10.3: the fallbacks above lose to the glass rules (2,6,1). Switching the glass tokens themselves
   keeps every glass surface solid under reduced transparency and forced colours (like phones, mobile-minimal.css A2). */
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  html[data-ds][data-visual-world],
  html[data-ds][data-visual-world].cv-dark {
    --ds-glass: var(--ds-card) !important;
    --ds-glass-lead: var(--ds-card) !important;
    --ds-glass-card: var(--ds-card) !important;
    --ds-glass-panel: var(--surface-2) !important;
    --ds-glass-tint: color-mix(in srgb, var(--surface-2) 70%, var(--ds-card)) !important;
    --ds-glass-sheen: none !important;
    --ds-glass-blur: none !important;
    --ds-glass-blur-lead: none !important;
  }
}

/* ── 24. Teacher workspace (5.10.0): pick a class, then work inside it ─────────────────
   The sidebar lists teacher functions only (no member centre). 我的班级 shows every class
   with its numbers; inside a class: 概况 · 布置作业 · 作业进度 · 作文批改 · 每日打卡 · 学生.
   Prefix T = html[data-ds][data-visual-world] #view-teacher. */
html[data-ds][data-visual-world] #mainNav[hidden] { display: none !important; }
html[data-ds][data-visual-world] #teacherNav.nav { display: flex; flex-direction: column; gap: 2px !important; min-width: 0; }
html[data-ds][data-visual-world] #teacherNav .nav-item {
  position: relative; display: flex; align-items: center; width: 100%;
  min-height: var(--ds-target) !important; padding: 0 12px !important; gap: 12px !important;
  border: 0 !important; border-radius: var(--ds-r-control) !important;
  color: var(--ink-2) !important; background: transparent !important; text-align: left;
  font-size: calc(var(--ds-base) - 1px) !important; font-weight: 560 !important; cursor: pointer;
  transition: background-color var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease) !important;
}
html[data-ds][data-visual-world] #teacherNav .nav-item .nav-ic { width: 22px; height: 22px; display: inline-grid; place-items: center; opacity: .82; flex: none; }
html[data-ds][data-visual-world] #teacherNav .nav-item .ic { width: 20px !important; height: 20px !important; stroke-width: 1.75 !important; }
html[data-ds][data-visual-world] #teacherNav .nav-item .nav-tx { flex: 1; min-width: 0; }
@media (hover: hover) and (pointer: fine) {
  html[data-ds][data-visual-world] #teacherNav :is(.nav-item:not(.active), .t-nav-class-link, .t-nav-back):hover { background: color-mix(in srgb, var(--ink) 5%, transparent) !important; color: var(--ink) !important; }
  html[data-ds][data-visual-world] #teacherNav .t-nav-class:hover { border-color: var(--accent-edge) !important; }
}
html[data-ds][data-visual-world] #teacherNav .nav-item.active { background: var(--ds-nav-active-bg) !important; color: var(--ds-nav-active-ink) !important; font-weight: 680 !important; }
html[data-ds][data-visual-world] #teacherNav .nav-item.active .nav-ic { opacity: 1; }
html[data-ds][data-visual-world] #teacherNav .nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; transform: translateY(-50%);
  border-radius: 0 3px 3px 0; background: var(--ds-nav-mark);
}
html[data-ds][data-visual-world] #teacherNav :is(.t-nav-count, .t-badge) { margin-left: auto; flex: none; }
html[data-ds][data-visual-world] #teacherNav .t-nav-count { font-size: 12px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
html[data-ds][data-visual-world] #teacherNav .t-nav-classes { display: grid; gap: 1px; margin: 2px 0 6px; }
html[data-ds][data-visual-world] #teacherNav .t-nav-class-link {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 46px; border: 0; border-radius: var(--ds-r-control);
  background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
html[data-ds][data-visual-world] #teacherNav .t-nav-class-link > span:first-child { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ds][data-visual-world] #teacherNav .t-nav-back {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--ds-r-control);
  background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 560; cursor: pointer; text-align: left;
}
html[data-ds][data-visual-world] #teacherNav .t-nav-class {
  display: grid; gap: 2px; margin: 4px 0 10px; padding: 12px 14px; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--hairline) !important; border-radius: calc(var(--ds-r-control) + 2px); background: var(--surface-2); color: var(--ink);
  transition: border-color var(--ds-fast) var(--ds-ease);
}
html[data-ds][data-visual-world] #teacherNav .t-nav-class-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
html[data-ds][data-visual-world] #teacherNav .t-nav-class-top > span { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-ink); font-weight: 650; }
html[data-ds][data-visual-world] #teacherNav .t-nav-class-top .ic { width: 14px; height: 14px; }
html[data-ds][data-visual-world] #teacherNav .t-nav-class strong { margin-top: 4px; font-family: var(--font-display); font-weight: var(--ds-display-weight); font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
html[data-ds][data-visual-world] #teacherNav .t-nav-class > small { font-size: 12.5px; color: var(--muted); }
html[data-ds][data-visual-world] #teacherNav :is(.nav-item, .t-nav-class, .t-nav-back, .t-nav-class-link):focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 1px !important; }
/* Shared bits: level chip, type chip, badge, progress bar. */
html[data-ds][data-visual-world] :is(#view-teacher, #teacherNav, .t-switch-mask) .t-level {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; flex: none;
  font-size: 12px; font-weight: 700; letter-spacing: .01em; background: var(--accent-soft); color: var(--accent-ink);
}
html[data-ds][data-visual-world] :is(#view-teacher, .t-switch-mask) .t-level[data-level="pet"] { background: color-mix(in srgb, #5b4a8a 14%, var(--ds-card)); color: color-mix(in srgb, #5b4a8a 82%, var(--ink)); }
html[data-ds][data-visual-world] :is(#view-teacher, .t-switch-mask) .t-level[data-level="young"] { background: color-mix(in srgb, #c46a1c 15%, var(--ds-card)); color: color-mix(in srgb, #8a4b12 85%, var(--ink)); }
html[data-ds][data-visual-world] :is(#view-teacher, .t-switch-mask) .t-level[data-level="upper"] { background: var(--green-soft); color: var(--green-ink); }
html[data-ds][data-visual-world].cv-dark :is(#view-teacher, .t-switch-mask) .t-level[data-level="pet"] { color: #d6c9f5; }
html[data-ds][data-visual-world].cv-dark :is(#view-teacher, .t-switch-mask) .t-level[data-level="young"] { color: #f3c48f; }
html[data-ds][data-visual-world] #view-teacher .t-chip {
  display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 44px; padding: 0 9px; border-radius: 999px; flex: none;
  font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--accent-soft); color: var(--accent-ink);
}
html[data-ds][data-visual-world] #view-teacher .t-chip[data-kind="reading"] { background: var(--green-soft); color: var(--green-ink); }
html[data-ds][data-visual-world] #view-teacher .t-chip[data-kind="writing"] { background: var(--amber-soft); color: var(--amber-ink); }
html[data-ds][data-visual-world] #view-teacher .t-chip[data-kind="checkin"] { background: color-mix(in srgb, #5b4a8a 13%, var(--ds-card)); color: color-mix(in srgb, #5b4a8a 82%, var(--ink)); }
html[data-ds][data-visual-world].cv-dark #view-teacher .t-chip[data-kind="checkin"] { color: #d6c9f5; }
html[data-ds][data-visual-world] #view-teacher .t-chip[data-kind="student"] { background: var(--red-soft); color: var(--red-ink); }
html[data-ds][data-visual-world] :is(#view-teacher, #teacherNav, .t-switch-mask) .t-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box;
  border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums;
}
html[data-ds][data-visual-world] :is(#view-teacher, #teacherNav) .t-badge[hidden] { display: none !important; }
html[data-ds][data-visual-world] #view-teacher .t-bar { display: block; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
html[data-ds][data-visual-world] #view-teacher .t-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .4s var(--ds-ease); }
html[data-ds][data-visual-world] #view-teacher .t-bar.is-mid > i { background: var(--amber); }
html[data-ds][data-visual-world] #view-teacher .t-bar.is-low > i { background: var(--red); }
html[data-ds][data-visual-world] #view-teacher :is(.t-warn-text, .t-low) { color: var(--red-ink) !important; }
html[data-ds][data-visual-world] #view-teacher .t-mid { color: var(--amber-ink) !important; }
html[data-ds][data-visual-world] #view-teacher .t-muted-b { color: var(--muted) !important; font-weight: 560 !important; }
html[data-ds][data-visual-world] #view-teacher .t-skel { display: inline-block; width: 48px; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: t-skel 1.2s ease-in-out infinite; }
@keyframes t-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
html[data-ds][data-visual-world].cv-reduce-motion #view-teacher .t-skel { animation: none; }
html[data-ds][data-visual-world] #view-teacher :is(.t-empty-line, .t-note) { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
html[data-ds][data-visual-world] #view-teacher .t-empty-line { padding: 14px 0 4px; }
html[data-ds][data-visual-world] #view-teacher .t-note .text-button { display: inline-flex; align-items: center; gap: 4px; }
/* Workspace frame */
html[data-ds][data-visual-world] #view-teacher .t-ws { display: grid; gap: 20px; width: 100%; max-width: var(--ds-content); margin: 0 auto; min-width: 0; transition: opacity .18s var(--ds-ease); }
html[data-ds][data-visual-world] #view-teacher .t-ws.is-switching { opacity: .55; pointer-events: none; }
html[data-ds][data-visual-world] #view-teacher .t-ws > .feedback:not(.hidden) { margin: 0 !important; }
html[data-ds][data-visual-world] #view-teacher .t-section { display: grid; gap: 20px; min-width: 0; }
html[data-ds][data-visual-world] #view-teacher .t-section.hidden { display: none !important; }
html[data-ds][data-visual-world] #view-teacher .t-ws[data-section="classes"] .t-class-head { display: none; }
html[data-ds][data-visual-world] #view-teacher .t-class-head,
html[data-ds][data-visual-world] #view-teacher .t-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; min-width: 0; }
html[data-ds][data-visual-world] #view-teacher .t-class-id { display: grid; justify-items: start; gap: 6px; min-width: 0; }
html[data-ds][data-visual-world] #view-teacher .t-class-id h2,
html[data-ds][data-visual-world] #view-teacher .t-sec-title { margin: 0 !important; font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important; font-size: 28px !important; line-height: 1.2 !important; color: var(--ink) !important; overflow-wrap: anywhere; }
html[data-ds][data-visual-world] #view-teacher .t-sec-sub { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
html[data-ds][data-visual-world] #view-teacher .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
html[data-ds][data-visual-world] #view-teacher .t-class-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; color: var(--muted); font-size: 14.5px; }
html[data-ds][data-visual-world] #view-teacher .t-class-meta b { color: var(--ink); font-weight: 700; letter-spacing: .02em; }
html[data-ds][data-visual-world] #view-teacher .t-class-meta .text-button { min-height: 32px !important; padding: 0 !important; font-size: 14px !important; color: var(--accent-ink) !important; background: none !important; border: 0 !important; }
html[data-ds][data-visual-world] #view-teacher :is(.t-class-actions, .t-sec-actions) { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
html[data-ds][data-visual-world] #view-teacher :is(.t-class-actions, .t-sec-actions) :is(.primary-action, .secondary-action) { min-height: 44px !important; display: inline-flex; align-items: center; gap: 8px; }
html[data-ds][data-visual-world] #view-teacher .secondary-action.icon-only { width: 44px; padding: 0 !important; justify-content: center; }
html[data-ds][data-visual-world] #view-teacher :is(.t-class-actions, .t-sec-actions) .ic { width: 18px; height: 18px; }
/* 我的班级 */
html[data-ds][data-visual-world] #view-teacher .t-attn { display: flex; flex-wrap: wrap; gap: 12px; }
html[data-ds][data-visual-world] #view-teacher .t-attn[hidden] { display: none; }
html[data-ds][data-visual-world] #view-teacher .t-attn-item { flex: 1 1 260px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--ds-r-card); background: var(--amber-soft); color: var(--amber-ink); font-size: 14px; line-height: 1.45; }
html[data-ds][data-visual-world] #view-teacher .t-attn-item b { font-family: var(--font-display); font-size: 24px; font-weight: var(--ds-display-weight); font-variant-numeric: tabular-nums; }
html[data-ds][data-visual-world] #view-teacher .t-attn-item[data-tone="red"] { background: var(--red-soft); color: var(--red-ink); }
html[data-ds][data-visual-world] #view-teacher .t-attn-item[data-tone="green"] { background: var(--green-soft); color: var(--green-ink); }
html[data-ds][data-visual-world] #view-teacher .t-class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
html[data-ds][data-visual-world] #view-teacher .t-class-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px; box-sizing: border-box;
  background: var(--ds-card); border: 1px solid var(--ds-card-edge); border-radius: var(--ds-r-card); box-shadow: var(--shadow-sm);
}
html[data-ds][data-visual-world] #view-teacher .t-class-card.is-current { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow-sm); }
html[data-ds][data-visual-world] #view-teacher .t-class-card.is-alert { border-color: color-mix(in srgb, var(--red) 38%, var(--ds-card-edge)); }
html[data-ds][data-visual-world] #view-teacher .t-cc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html[data-ds][data-visual-world] #view-teacher .t-cc-code { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
html[data-ds][data-visual-world] #view-teacher .t-cc-name h3 { margin: 0 !important; font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important; font-size: 20px !important; line-height: 1.3 !important; color: var(--ink) !important; overflow-wrap: anywhere; }
html[data-ds][data-visual-world] #view-teacher .t-cc-name p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher .t-cc-metric { display: grid; gap: 7px; }
html[data-ds][data-visual-world] #view-teacher .t-cc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; font-size: 14px; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher .t-cc-row b { color: var(--ink); font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
html[data-ds][data-visual-world] #view-teacher .t-cc-enter { margin-top: auto; width: 100%; min-height: 44px !important; justify-content: center; }
html[data-ds][data-visual-world] #view-teacher .t-empty-card { padding: 28px !important; display: grid; gap: 6px; }
html[data-ds][data-visual-world] #view-teacher .t-empty-card strong { font-family: var(--font-display); font-size: 20px; font-weight: var(--ds-display-weight); }
html[data-ds][data-visual-world] #view-teacher .t-empty-card p { margin: 0; color: var(--muted); line-height: 1.6; }
/* Folded tools (create class, class settings, add student, more data) */
html[data-ds][data-visual-world] #view-teacher .t-fold { padding: 0 !important; overflow: hidden; }
html[data-ds][data-visual-world] #view-teacher .t-fold > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 56px; padding: 12px 52px 12px 20px; position: relative;
  list-style: none; cursor: pointer; color: var(--ink); border-radius: var(--ds-r-card);
}
html[data-ds][data-visual-world] #view-teacher .t-fold > summary::-webkit-details-marker { display: none; }
html[data-ds][data-visual-world] #view-teacher .t-fold > summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--ds-fast) var(--ds-ease);
}
html[data-ds][data-visual-world] #view-teacher .t-fold[open] > summary::after { transform: rotate(225deg); margin-top: -2px; }
html[data-ds][data-visual-world] #view-teacher .t-fold > summary > span { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
html[data-ds][data-visual-world] #view-teacher .t-fold > summary > span .ic { width: 18px; height: 18px; color: var(--accent-ink); }
html[data-ds][data-visual-world] #view-teacher .t-fold > summary > small { font-size: 13.5px; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher .t-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-ds][data-visual-world] #view-teacher .t-fold[open] > summary { border-bottom: 1px solid var(--hairline-soft); border-radius: var(--ds-r-card) var(--ds-r-card) 0 0; }
html[data-ds][data-visual-world] #view-teacher .t-fold > :not(summary) { margin: 18px 20px !important; }
html[data-ds][data-visual-world] #view-teacher .t-inline-form { display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 14px !important; }
html[data-ds][data-visual-world] #view-teacher .t-inline-form > label { flex: 1 1 220px; display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 0 !important; }
html[data-ds][data-visual-world] #view-teacher .t-inline-form > button { min-height: 44px !important; }
html[data-ds][data-visual-world] #view-teacher #teacherClassList { display: grid; gap: 12px; }
html[data-ds][data-visual-world] #view-teacher #teacherClassList .admin-row { border: 1px solid var(--hairline-soft) !important; border-radius: var(--ds-r-control) !important; background: var(--surface-2) !important; box-shadow: none !important; }
/* 班级概况 */
html[data-ds][data-visual-world] #view-teacher .t-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
html[data-ds][data-visual-world] #view-teacher .t-kpi {
  display: grid; align-content: start; gap: 4px; min-width: 0; padding: 18px 20px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--ds-card); border: 1px solid var(--ds-card-edge); border-radius: var(--ds-r-card); box-shadow: var(--shadow-sm);
  transition: border-color var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease);
}
html[data-ds][data-visual-world] #view-teacher .t-kpi > span { font-size: 13.5px; color: var(--muted); font-weight: 560; }
html[data-ds][data-visual-world] #view-teacher .t-kpi > b { font-family: var(--font-display); font-size: 30px; font-weight: var(--ds-display-weight); line-height: 1.15; font-variant-numeric: tabular-nums; }
html[data-ds][data-visual-world] #view-teacher .t-kpi > small { font-size: 12.5px; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher .t-kpi[data-tone="amber"] > b { color: var(--amber-ink); }
html[data-ds][data-visual-world] #view-teacher .t-kpi[data-tone="red"] > b { color: var(--red-ink); }
@media (hover: hover) and (pointer: fine) { html[data-ds][data-visual-world] #view-teacher :is(.t-kpi, .t-class-card):hover { border-color: var(--accent-edge); } }
html[data-ds][data-visual-world] #view-teacher .t-kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-ds][data-visual-world] #view-teacher .t-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 20px; align-items: start; }
html[data-ds][data-visual-world] #view-teacher :is(.t-main, .t-side) { display: grid; gap: 20px; min-width: 0; }
html[data-ds][data-visual-world] #view-teacher .t-card { padding: 20px 22px !important; min-width: 0; }
html[data-ds][data-visual-world] #view-teacher .t-card h3 { margin: 0 !important; font-family: var(--font-display) !important; font-weight: var(--ds-display-weight) !important; font-size: 18px !important; line-height: 1.3 !important; color: var(--ink) !important; }
html[data-ds][data-visual-world] #view-teacher .t-card > h3 { margin-bottom: 6px !important; }
html[data-ds][data-visual-world] #view-teacher .t-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
html[data-ds][data-visual-world] #view-teacher .t-card-meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
html[data-ds][data-visual-world] #view-teacher :is(.t-card-head, .t-assign-aside, .t-note, .t-more-line, .t-empty-line) .text-button { min-height: 36px !important; padding: 0 2px !important; font-size: 14px !important; font-weight: 650 !important; color: var(--accent-ink) !important; border: 0 !important; background: none !important; box-shadow: none !important; }
html[data-ds][data-visual-world] #view-teacher .t-ws[data-section="assign"] .t-assign-cta { display: none; }
html[data-ds][data-visual-world] #view-teacher .t-todo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 0; border-top: 1px solid var(--hairline-soft); font-size: 14.5px; line-height: 1.5; }
html[data-ds][data-visual-world] #view-teacher .t-todo:first-child { border-top: 0; }
html[data-ds][data-visual-world] #view-teacher .t-todo-text { flex: 1 1 220px; min-width: 0; color: var(--ink); }
/* Small row buttons (去批改 / 看名单 / 明细 …, 36px) are pills, like every small button (5.10.3). */
html[data-ds][data-visual-world] #view-teacher :is(.t-todo, .t-cur-row, .t-prog-actions, .t-empty, .t-hard-row) .secondary-action { min-height: 36px !important; padding: 0 14px !important; font-size: 14px !important; flex: none; border-radius: 999px !important; }
html[data-ds][data-visual-world] #view-teacher .t-cur-row {
  display: grid; grid-template-columns: 64px minmax(0, 1.6fr) minmax(96px, .8fr) minmax(120px, 1fr) auto; gap: 12px 14px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--hairline-soft); font-size: 14px;
}
html[data-ds][data-visual-world] #view-teacher .t-cur-row:first-child { border-top: 0; }
html[data-ds][data-visual-world] #view-teacher :is(.t-cur-title, .t-prog-title) { display: grid; gap: 2px; min-width: 0; }
html[data-ds][data-visual-world] #view-teacher :is(.t-cur-title, .t-prog-title) strong { font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
html[data-ds][data-visual-world] #view-teacher :is(.t-cur-title, .t-prog-title) small { font-size: 12.5px; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher :is(.t-cur-due, .t-prog-due) { font-size: 13.5px; color: var(--ink-2); }
html[data-ds][data-visual-world] #view-teacher :is(.t-cur-due, .t-prog-due).is-today { color: var(--red-ink); font-weight: 650; }
html[data-ds][data-visual-world] #view-teacher :is(.t-cur-done, .t-prog-done) { display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
html[data-ds][data-visual-world] #view-teacher .t-more-line { margin: 8px 0 0; }
html[data-ds][data-visual-world] #view-teacher .t-hard-list { display: grid; }
html[data-ds][data-visual-world] #view-teacher .t-hard-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hairline-soft); font-size: 14px; }
html[data-ds][data-visual-world] #view-teacher .t-hard-row:first-child { border-top: 0; }
html[data-ds][data-visual-world] #view-teacher .t-hard-row > span:first-child { flex: 1; min-width: 0; display: grid; }
html[data-ds][data-visual-world] #view-teacher .t-hard-row strong { font-family: var(--ds-reading-face, var(--ds-sans)); font-size: 15.5px; }
html[data-ds][data-visual-world] #view-teacher .t-hard-row small { font-size: 12px; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher .t-hard-n { font-size: 13px; color: var(--muted); white-space: nowrap; }
html[data-ds][data-visual-world] #view-teacher .t-hard-row .text-button { min-height: 32px !important; padding: 0 6px !important; font-size: 13px !important; color: var(--accent-ink) !important; }
html[data-ds][data-visual-world] #view-teacher .t-side .bar-chart { height: 150px !important; margin-top: 4px; }
html[data-ds][data-visual-world] #view-teacher .t-more-data > .dashboard-hero { margin: 16px 20px 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
html[data-ds][data-visual-world] #view-teacher .t-more-data .t-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
html[data-ds][data-visual-world] #view-teacher .t-more-data .t-more-grid .t-card { padding: 16px 18px !important; border: 1px solid var(--hairline-soft); border-radius: var(--ds-r-control); background: var(--surface-2); }
/* 布置作业 */
html[data-ds][data-visual-world] #view-teacher .t-lead { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.6; }
html[data-ds][data-visual-world] #view-teacher .t-lead strong { color: var(--ink); }
html[data-ds][data-visual-world] #view-teacher .t-type-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html[data-ds][data-visual-world] #view-teacher .t-type-picker [data-assign-type] {
  display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--ds-card); border: 1px solid var(--ds-card-edge); border-radius: var(--ds-r-card); box-shadow: var(--shadow-xs);
  transition: border-color var(--ds-fast) var(--ds-ease), background-color var(--ds-fast) var(--ds-ease);
}
html[data-ds][data-visual-world] #view-teacher .t-type-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
html[data-ds][data-visual-world] #view-teacher .t-type-ic .ic { width: 20px; height: 20px; }
html[data-ds][data-visual-world] #view-teacher .t-type-copy { display: grid; gap: 3px; min-width: 0; }
html[data-ds][data-visual-world] #view-teacher .t-type-copy strong { font-size: 16px; font-weight: 750; }
html[data-ds][data-visual-world] #view-teacher .t-type-copy small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher .t-type-picker [aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft-2); box-shadow: 0 0 0 1px var(--accent) inset; }
html[data-ds][data-visual-world] #view-teacher .t-type-picker [aria-selected="true"] .t-type-ic { background: var(--academy-action); color: #fff; }
html[data-ds][data-visual-world] #view-teacher .t-type-picker [data-assign-type]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { html[data-ds][data-visual-world] #view-teacher .t-type-picker [aria-selected="false"]:hover { border-color: var(--accent-edge); } }
html[data-ds][data-visual-world] #view-teacher .t-assign-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: 20px; align-items: start; }
html[data-ds][data-visual-world] #view-teacher .t-assign-forms { min-width: 0; }
html[data-ds][data-visual-world] #view-teacher .t-form-card { padding: 22px 24px !important; min-width: 0; }
html[data-ds][data-visual-world] #view-teacher .t-form-card[hidden] { display: none !important; }
html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px !important; margin: 0 !important; }
html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form > * { grid-column: 1 / -1; min-width: 0; }
html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form > label:has(> :is(select, input:not([type="checkbox"]):not([type="radio"]))):not(:has(textarea)) { grid-column: auto; }
html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form > label { display: grid !important; gap: 6px !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--ink-2) !important; }
html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form > label[hidden],
html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form .t-class-field { display: none !important; }
html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form > :is(.teacher-remediation-summary, .teacher-remediation-followup, input[type="hidden"]) { grid-column: 1 / -1; }
html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form > :is(.teacher-remediation-summary, [data-remediation-followup]):empty { display: none; }
html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form > button[type="submit"],
html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form .reading-publish-actions { justify-self: end; grid-column: 1 / -1; }
html[data-ds][data-visual-world] #view-teacher .t-form-card button[type="submit"] { min-height: 48px !important; padding: 0 28px !important; font-size: 15.5px !important; }
html[data-ds][data-visual-world] #view-teacher .t-form-card .teacher-draft-status:empty { display: none; }
html[data-ds][data-visual-world] #view-teacher .t-form-card > .feedback:not(.hidden) { margin-top: 14px !important; }
html[data-ds][data-visual-world] #view-teacher .t-assign-aside { position: sticky; top: 16px; display: grid; gap: 10px; }
html[data-ds][data-visual-world] #view-teacher .t-assign-aside h3 { font-size: 16px !important; }
html[data-ds][data-visual-world] #view-teacher .t-aside-list { display: grid; }
html[data-ds][data-visual-world] #view-teacher .t-aside-row { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--hairline-soft); }
html[data-ds][data-visual-world] #view-teacher .t-aside-row:first-child { border-top: 0; }
html[data-ds][data-visual-world] #view-teacher .t-aside-row strong { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
html[data-ds][data-visual-world] #view-teacher .t-aside-row small { font-size: 12.5px; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher .t-assign-aside .text-button { justify-self: start; min-height: 36px !important; padding: 0 !important; font-size: 14px !important; color: var(--accent-ink) !important; }
/* 发给谁 */
html[data-ds][data-visual-world] #view-teacher .t-audience { display: grid; gap: 4px; margin: 4px 0 0 !important; padding: 14px 16px 12px !important; border: 1px solid var(--hairline) !important; border-radius: var(--ds-r-control); background: var(--surface-2); min-width: 0; }
html[data-ds][data-visual-world] #view-teacher .t-audience legend { padding: 0 6px; margin-left: -6px; font-size: 14px; font-weight: 750; color: var(--ink); }
html[data-ds][data-visual-world] #view-teacher .t-aud-row { display: flex !important; align-items: flex-start; gap: 10px; min-height: 44px; padding: 6px 4px; margin: 0 !important; border-radius: 8px; cursor: pointer; font-weight: 500 !important; }
html[data-ds][data-visual-world] #view-teacher .t-aud-row input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
html[data-ds][data-visual-world] #view-teacher .t-aud-row > span { display: grid; gap: 1px; }
html[data-ds][data-visual-world] #view-teacher .t-aud-row strong { font-size: 14.5px; color: var(--ink); font-weight: 650; }
html[data-ds][data-visual-world] #view-teacher .t-aud-row small { font-size: 12.5px; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher .t-aud-row.is-current { cursor: default; }
html[data-ds][data-visual-world] #view-teacher .t-aud-row:has(input:checked:not(:disabled)) { background: var(--amber-soft); }
html[data-ds][data-visual-world] #view-teacher .t-aud-sub { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--hairline-soft); font-size: 13px; color: var(--muted); font-weight: 600; }
html[data-ds][data-visual-world] #view-teacher .t-aud-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
html[data-ds][data-visual-world] :is(#view-teacher, .t-switch-mask) .t-aud-warn { margin: 6px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.55; background: var(--accent-soft-2); color: var(--ink-2); }
html[data-ds][data-visual-world] :is(#view-teacher, .t-switch-mask) .t-aud-warn[data-tone="amber"] { background: var(--amber-soft); color: var(--amber-ink); font-weight: 600; }
html[data-ds][data-visual-world] #view-teacher .t-aud-warn[hidden] { display: none; }
html[data-ds][data-visual-world] #view-teacher .feedback .t-batch-list { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px; }
html[data-ds][data-visual-world] #view-teacher .feedback .t-batch-list li[data-ok="false"] { color: var(--red-ink); }
html[data-ds][data-visual-world] #view-teacher .feedback p { margin: 0; }
/* Filters: segmented controls */
html[data-ds][data-visual-world] #view-teacher .t-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
html[data-ds][data-visual-world] #view-teacher .t-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
html[data-ds][data-visual-world] #view-teacher .t-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: calc(var(--ds-r-control) + 3px); background: color-mix(in srgb, var(--surface-3) 70%, transparent); border: 1px solid var(--hairline-soft); }
html[data-ds][data-visual-world] #view-teacher .t-seg button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--ds-r-control);
  background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
html[data-ds][data-visual-world] #view-teacher .t-seg button > span { font-size: 12px; color: var(--muted); font-weight: 650; font-variant-numeric: tabular-nums; }
html[data-ds][data-visual-world] #view-teacher .t-seg button[aria-pressed="true"] { background: var(--ds-card); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 0 0 1px var(--hairline-soft); }
html[data-ds][data-visual-world] #view-teacher .t-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
html[data-ds][data-visual-world] #view-teacher .t-select { display: inline-flex !important; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); font-weight: 600; margin: 0 !important; white-space: nowrap; }
html[data-ds][data-visual-world] #view-teacher .t-select select { min-height: 40px !important; max-width: 280px; }
/* 作业进度 */
html[data-ds][data-visual-world] #view-teacher .t-prog-list { padding: 0 !important; overflow: hidden; }
html[data-ds][data-visual-world] #view-teacher .t-prog-row { border-top: 1px solid var(--hairline-soft); transition: background-color .6s var(--ds-ease); }
html[data-ds][data-visual-world] #view-teacher .t-prog-row:first-child { border-top: 0; }
html[data-ds][data-visual-world] #view-teacher .t-prog-row.is-focus { background: var(--accent-soft-2); }
html[data-ds][data-visual-world] #view-teacher .t-prog-main {
  display: grid; grid-template-columns: 64px minmax(0, 1.6fr) 150px minmax(170px, 1fr) 180px; gap: 12px 16px; align-items: center; padding: 16px 22px 10px;
}
/* 5.10.3: from 768 to 1099px the five fixed columns left the title 0px wide (one character per line).
   Two rows instead: chip · title · actions, then due · progress under the title. */
@media (min-width: 768px) and (max-width: 1099px) {
  html[data-ds][data-visual-world] #view-teacher .t-prog-main { grid-template-columns: 64px minmax(0, 1fr) minmax(170px, 220px); grid-template-areas: "chip title actions" ". due done"; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-main > .t-chip { grid-area: chip; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-main > .t-prog-title { grid-area: title; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-main > .t-prog-due { grid-area: due; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-main > .t-prog-done { grid-area: done; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-main > .t-prog-actions { grid-area: actions; }
}
html[data-ds][data-visual-world] #view-teacher .t-prog-due { display: grid; gap: 2px; }
html[data-ds][data-visual-world] #view-teacher .t-state { font-size: 12px; font-weight: 700; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher .t-prog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
html[data-ds][data-visual-world] #view-teacher .t-prog-actions .text-button { min-height: 36px !important; padding: 0 8px !important; font-size: 14px !important; }
html[data-ds][data-visual-world] #view-teacher .t-prog-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 22px 8px 102px; font-size: 13px; }
html[data-ds][data-visual-world] #view-teacher .t-prog-row > .assignment-report { width: auto !important; max-width: none !important; box-sizing: border-box; margin: 0 22px 14px 102px !important; padding: 0 !important; border: 1px solid var(--hairline-soft) !important; border-radius: var(--ds-r-control) !important; background: color-mix(in srgb, var(--surface-2) 80%, transparent) !important; box-shadow: none !important; }
html[data-ds][data-visual-world] #view-teacher .t-prog-row > .assignment-report > summary { min-height: 40px; padding: 8px 40px 8px 14px !important; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 650; color: var(--accent-ink); }
html[data-ds][data-visual-world] #view-teacher .t-prog-row > .assignment-report > summary::-webkit-details-marker { display: none; }
html[data-ds][data-visual-world] #view-teacher .t-prog-row > .assignment-report > summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
html[data-ds][data-visual-world] #view-teacher .t-prog-row > .assignment-report[open] > summary::after { transform: rotate(225deg); margin-top: -2px; }
html[data-ds][data-visual-world] #view-teacher .t-prog-row > .assignment-report > summary small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher .t-prog-report .t-prog-load { float: right; min-height: 32px !important; padding: 0 12px !important; font-size: 13px !important; border-radius: 999px !important; }
html[data-ds][data-visual-world] #view-teacher .t-prog-row > .assignment-report[open] { background: var(--ds-card) !important; }
html[data-ds][data-visual-world] #view-teacher .t-prog-row > .assignment-report[open] > :not(summary) { margin: 4px 14px 14px; }
html[data-ds][data-visual-world] #view-teacher .t-prog-row > :is(.teacher-remediation-followup, [data-remediation-followup]) { margin: 0 22px 14px 102px; }
html[data-ds][data-visual-world] #view-teacher .t-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 22px; color: var(--muted); font-size: 14.5px; }
/* 作文批改 */
html[data-ds][data-visual-world] #view-teacher .t-grading { display: grid !important; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important; gap: 20px !important; align-items: start; }
html[data-ds][data-visual-world] #view-teacher .t-grading > .submission-list { padding: 6px !important; display: grid; gap: 2px; max-height: none !important; overflow: visible !important; }
html[data-ds][data-visual-world] #view-teacher .t-grading .submission-card {
  display: grid !important; gap: 3px; width: 100%; padding: 12px 14px !important; text-align: left; border: 0 !important; border-radius: var(--ds-r-control) !important;
  background: transparent !important; box-shadow: none !important; color: var(--ink); cursor: pointer;
}
html[data-ds][data-visual-world] #view-teacher .t-grading .submission-card + .submission-card { border-top: 1px solid var(--hairline-soft) !important; border-radius: 0 !important; }
html[data-ds][data-visual-world] #view-teacher .t-grading .submission-card:is(.active, [aria-pressed="true"], [aria-current="true"]) { background: var(--accent-soft-2) !important; border-radius: var(--ds-r-control) !important; box-shadow: 0 0 0 1px var(--accent-edge) inset !important; }
html[data-ds][data-visual-world] #view-teacher .t-grading .submission-card > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 15px; }
html[data-ds][data-visual-world] #view-teacher .t-grading .submission-card strong { font-size: 13.5px; font-weight: 560; color: var(--ink-2); }
html[data-ds][data-visual-world] #view-teacher .t-grading .submission-card small { font-size: 12.5px; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher .t-grading .submission-review-badge { font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
html[data-ds][data-visual-world] #view-teacher .t-grading .submission-review-badge.pending { background: var(--amber-soft); color: var(--amber-ink); }
html[data-ds][data-visual-world] #view-teacher .t-grading .submission-review-badge.done { background: var(--green-soft); color: var(--green-ink); }
html[data-ds][data-visual-world] #view-teacher .t-grading > .submission-detail { padding: 22px 24px !important; min-width: 0; }
html[data-ds][data-visual-world] #view-teacher .t-grading .submission-detail-card { border: 0 !important; padding: 0 !important; box-shadow: none !important; background: none !important; }
html[data-ds][data-visual-world] #view-teacher .t-grading .submission-image { max-height: 420px; width: auto; max-width: 100%; border-radius: var(--ds-r-control); }
html[data-ds][data-visual-world] #view-teacher .t-grading .teacher-review-box { margin-top: 16px; padding: 18px !important; border-radius: var(--ds-r-card) !important; background: var(--surface-2) !important; border: 1px solid var(--hairline-soft) !important; }
html[data-ds][data-visual-world] #view-teacher .t-grading .teacher-review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 12px; }
html[data-ds][data-visual-world] #view-teacher .t-grading .teacher-review-actions .badge { margin-right: auto; }
html[data-ds][data-visual-world] #view-teacher .t-grading .teacher-review-actions button { min-height: 44px !important; }
html[data-ds][data-visual-world] #view-teacher .t-review-hint { margin: 8px 0 0; font-size: 12.5px; text-align: right; }
html[data-ds][data-visual-world] #view-teacher .teacher-submission-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 6px; font-size: 13px; }
/* 学生 */
html[data-ds][data-visual-world] #view-teacher .t-section.teacher-roster { padding: 0 !important; border: 0 !important; background: none !important; }
html[data-ds][data-visual-world] #view-teacher .t-roster-card .data-table-wrap { max-height: none !important; overflow: visible auto !important; }
html[data-ds][data-visual-world] #view-teacher .t-roster-head { align-items: center; }
html[data-ds][data-visual-world] #view-teacher .t-roster-head .teacher-roster-tools { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 !important; }
html[data-ds][data-visual-world] #view-teacher .t-roster-head .teacher-roster-search { min-width: min(280px, 100%); margin: 0 !important; }
html[data-ds][data-visual-world] #view-teacher .t-students-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; }
html[data-ds][data-visual-world] #view-teacher .t-roster-card { padding: 6px 0 0 !important; overflow: hidden; min-width: 0; }
html[data-ds][data-visual-world] #view-teacher .t-roster-card .data-table-wrap { border: 0 !important; box-shadow: none !important; background: none !important; overflow-x: auto; }
html[data-ds][data-visual-world] #view-teacher table.t-roster { width: 100%; border-collapse: collapse; font-size: 14px; background: transparent !important; }
html[data-ds][data-visual-world] #view-teacher table.t-roster th { padding: 10px 14px !important; text-align: left; font-size: 12.5px; font-weight: 650; color: var(--muted) !important; background: transparent !important; border-bottom: 1px solid var(--hairline-soft) !important; white-space: nowrap; }
html[data-ds][data-visual-world] #view-teacher table.t-roster td { padding: 11px 14px !important; border-bottom: 1px solid var(--hairline-soft) !important; color: var(--ink-2); font-variant-numeric: tabular-nums; vertical-align: middle; }
html[data-ds][data-visual-world] #view-teacher table.t-roster tr:last-child td { border-bottom: 0 !important; }
html[data-ds][data-visual-world] #view-teacher table.t-roster tr.is-selected td { background: var(--accent-soft-2); }
html[data-ds][data-visual-world] #view-teacher table.t-roster td.td-title { display: grid; gap: 1px; }
html[data-ds][data-visual-world] #view-teacher table.t-roster .teacher-student-name { justify-self: start; min-height: 28px !important; padding: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: var(--ink) !important; background: none !important; border: 0 !important; text-align: left; }
html[data-ds][data-visual-world] #view-teacher table.t-roster td.td-title small { font-size: 12px; color: var(--muted); }
html[data-ds][data-visual-world] #view-teacher table.t-roster .t-last { white-space: nowrap; }
html[data-ds][data-visual-world] #view-teacher table.t-roster .t-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
html[data-ds][data-visual-world] #view-teacher table.t-roster .t-last[data-tone="amber"] .t-dot { background: var(--amber); }
html[data-ds][data-visual-world] #view-teacher table.t-roster .t-last[data-tone="red"] { color: var(--red-ink); }
html[data-ds][data-visual-world] #view-teacher table.t-roster .t-last[data-tone="red"] .t-dot { background: var(--red); }
html[data-ds][data-visual-world] #view-teacher table.t-roster tr[hidden] { display: none; }
html[data-ds][data-visual-world] #view-teacher .t-roster-card .teacher-roster-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 14px; font-size: 13px; }
html[data-ds][data-visual-world] #view-teacher .t-roster-card .teacher-roster-footer button[hidden] { display: none !important; }
html[data-ds][data-visual-world] #view-teacher .t-roster-card #teacherRosterEmpty { margin: 0; padding: 18px; }
html[data-ds][data-visual-world] #view-teacher .t-student-aside { position: sticky; top: 16px; padding: 20px !important; min-width: 0; max-height: calc(100vh - 32px); overflow: auto; }
html[data-ds][data-visual-world] #view-teacher .t-student-aside .student-detail-panel { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
/* 每日打卡 */
html[data-ds][data-visual-world] #view-teacher [data-teacher-panel="checkin"] .teacher-checkin-dashboard { padding: 22px 24px !important; }
/* Labelled search fields (task student search, textbook search) keep the label outside the box. */
html[data-ds][data-visual-world] #view-teacher :is(.teacher-result-search, .reading-textbook-search):has(> input) {
  display: grid !important; gap: 6px; padding: 0 !important; min-height: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important;
}
html[data-ds][data-visual-world] #view-teacher :is(.teacher-result-search, .reading-textbook-search) > input {
  min-height: 44px !important; padding: 0 14px !important; border: 1px solid var(--hairline) !important; border-radius: var(--ds-r-control) !important; background: var(--surface) !important;
}
html[data-ds][data-visual-world] #view-teacher :is(.teacher-result-search, .reading-textbook-search) > input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important; }
html[data-ds][data-visual-world] #view-teacher .teacher-checkin-dashboard > .section-head .eyebrow { display: none; }
/* Class switcher, QR and batch confirmation */
html[data-ds][data-visual-world] .t-switch-mask { position: fixed !important; inset: 0 !important; z-index: 120 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; background: rgb(12 18 30 / 42%) !important; }
html[data-ds][data-visual-world] .t-switch {
  width: min(480px, 100%); max-height: min(720px, calc(100vh - 48px)); overflow: auto; box-sizing: border-box; padding: 18px 20px 20px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--hairline-soft); border-radius: var(--ds-r-hero); box-shadow: var(--shadow-lg);
}
html[data-ds][data-visual-world] .t-switch > header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
html[data-ds][data-visual-world] .t-switch > header h2 { flex: 1; margin: 0; font-family: var(--font-display); font-weight: var(--ds-display-weight); font-size: 21px; color: var(--ink); }
html[data-ds][data-visual-world] .t-switch > header .text-button { min-height: 40px !important; font-size: 14px !important; color: var(--accent-ink) !important; }
html[data-ds][data-visual-world] .t-switch-grip { display: none; }
html[data-ds][data-visual-world] .t-switch-list { display: grid; gap: 2px; }
html[data-ds][data-visual-world] .t-switch-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
html[data-ds][data-visual-world] .t-switch-row + .t-switch-row { box-shadow: 0 -1px 0 var(--hairline-soft); }
html[data-ds][data-visual-world] .t-switch-row.is-current { background: var(--accent-soft-2); box-shadow: none !important; }
html[data-ds][data-visual-world] .t-switch-row .t-level { width: 64px; justify-content: center; padding: 0 6px; }
html[data-ds][data-visual-world] .t-switch-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
html[data-ds][data-visual-world] .t-switch-copy strong { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ds][data-visual-world] .t-switch-copy small { font-size: 12.5px; color: var(--muted); }
html[data-ds][data-visual-world] .t-switch-copy small.t-warn-text { color: var(--red-ink); }
html[data-ds][data-visual-world] .t-switch-here { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--accent-ink); }
html[data-ds][data-visual-world] .t-switch-here .ic { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { html[data-ds][data-visual-world] .t-switch-row:not(.is-current):hover { background: var(--surface-2); } }
html[data-ds][data-visual-world] .t-switch-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-ds][data-visual-world] .t-switch > footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }
html[data-ds][data-visual-world] .t-switch > footer :is(.primary-action, .secondary-action) { min-height: 44px !important; display: inline-flex; align-items: center; gap: 8px; }
html[data-ds][data-visual-world] .t-switch:not(.t-confirm):not(.t-qr) > footer .secondary-action { width: 100%; justify-content: center; }
html[data-ds][data-visual-world] .t-qr { text-align: center; width: min(380px, 100%); }
html[data-ds][data-visual-world] .t-qr img { width: 200px; height: 200px; margin: 6px auto 10px; display: block; border-radius: 12px; background: #fff; padding: 8px; box-sizing: content-box; }
html[data-ds][data-visual-world] .t-qr img[hidden] { display: block; visibility: hidden; }
html[data-ds][data-visual-world] .t-qr p { margin: 4px 0; }
html[data-ds][data-visual-world] .t-qr > footer { justify-content: center; }
html[data-ds][data-visual-world] .t-confirm > p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
html[data-ds][data-visual-world] .t-confirm-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
html[data-ds][data-visual-world] .t-confirm-list li { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-top: 1px solid var(--hairline-soft); font-size: 15px; }
html[data-ds][data-visual-world] .t-confirm-list li:first-child { border-top: 0; }
html[data-ds][data-visual-world] .t-confirm-list li strong { flex: 1; min-width: 0; }
html[data-ds][data-visual-world] .t-confirm-list li span:last-child { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* Glass, as on the student pages: top-level teacher cards let the scenery show through. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-ds][data-visual-world]:not([data-ds-skin="minimal"]):not(.cv-reduce-motion) #appShell #view-teacher :is(.t-class-card, .t-kpi, .t-main > .t-card, .t-side > .t-card, .t-ws > .t-section > .t-fold, .t-form-card, .t-assign-aside, .t-prog-list, .t-grading > .submission-list, .t-grading > .submission-detail, .t-roster-card, .t-student-aside, .teacher-checkin-dashboard, .t-empty-card, .t-type-picker > button[aria-selected="false"]) {
    background-color: var(--ds-glass-card, var(--ds-card)) !important;
    border-color: color-mix(in srgb, var(--ds-card-edge) 70%, transparent) !important;
    -webkit-backdrop-filter: var(--ds-glass-blur, none); backdrop-filter: var(--ds-glass-blur, none);
  }
}
/* Tablet rail (768–1180): icons with short labels; the class card becomes a compact switch button. */
@media (min-width: 768px) and (max-width: 1180px) {
  html[data-ds][data-visual-world] #appShell #teacherNav .nav-item {
    flex-direction: column !important; justify-content: center !important; gap: 4px !important; min-height: 60px !important; padding: 8px 2px !important;
    font-size: 12px !important; line-height: 1.2 !important; text-align: center;
  }
  html[data-ds][data-visual-world] #appShell #teacherNav .nav-item .nav-tx { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; text-align: center; }
  html[data-ds][data-visual-world] #appShell #teacherNav .nav-item.active::before { left: -8px; }
  html[data-ds][data-visual-world] #appShell #teacherNav :is(.t-nav-count, .t-nav-classes) { display: none; }
  html[data-ds][data-visual-world] #appShell #teacherNav .nav-item .t-badge { position: absolute; top: 4px; right: 10px; margin: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
  html[data-ds][data-visual-world] #appShell #teacherNav .t-nav-back { justify-content: center; padding: 0; font-size: 12px; }
  html[data-ds][data-visual-world] #appShell #teacherNav .t-nav-back span { display: none; }
  html[data-ds][data-visual-world] #appShell #teacherNav .t-nav-back::after { content: "全部班级"; }
  html[data-ds][data-visual-world] #appShell #teacherNav .t-nav-class { padding: 8px 6px; margin: 2px 0 8px; text-align: center; justify-items: center; }
  html[data-ds][data-visual-world] #appShell #teacherNav .t-nav-class-top small,
  html[data-ds][data-visual-world] #appShell #teacherNav .t-nav-class > small { display: none; }
  html[data-ds][data-visual-world] #appShell #teacherNav .t-nav-class strong { font-size: 12px; font-family: var(--ds-sans); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html[data-ds][data-visual-world] #view-teacher .t-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ds][data-visual-world] #view-teacher .t-type-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  html[data-ds][data-visual-world] #view-teacher :is(.t-cols, .t-assign-body, .t-students-cols) { grid-template-columns: minmax(0, 1fr); }
  html[data-ds][data-visual-world] #view-teacher :is(.t-assign-aside, .t-student-aside) { position: static; max-height: none; }
  html[data-ds][data-visual-world] #view-teacher .t-assign-aside { order: -1; }
  html[data-ds][data-visual-world] #view-teacher .t-grading { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Phone: the class sits in the page header; a sheet switches it; sections live in the tab bar. */
@media (max-width: 767px) {
  html[data-ds][data-visual-world] #view-teacher .t-ws { gap: 16px; }
  html[data-ds][data-visual-world] #view-teacher .t-section { gap: 14px; }
  html[data-ds][data-visual-world] #view-teacher .t-class-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; }
  html[data-ds][data-visual-world] #view-teacher .t-class-id h2 { font-size: 22px !important; }
  html[data-ds][data-visual-world] #view-teacher .t-class-meta { font-size: 13px; gap: 2px 10px; }
  html[data-ds][data-visual-world] #view-teacher .t-class-actions { display: contents; }
  html[data-ds][data-visual-world] #view-teacher .t-class-actions #refreshTeacherTop { display: none; }
  html[data-ds][data-visual-world] #view-teacher .t-class-actions .t-switch-btn { grid-row: 1; grid-column: 2; min-height: 40px !important; padding: 0 12px !important; font-size: 14px !important; }
  html[data-ds][data-visual-world] #view-teacher .t-class-actions .t-assign-cta { grid-column: 1 / -1; width: 100%; justify-content: center; }
  html[data-ds][data-visual-world] #view-teacher .t-ws:not([data-section="overview"]) .t-class-actions .t-assign-cta { display: none; }
  html[data-ds][data-visual-world] #view-teacher .t-sec-title { font-size: 24px !important; }
  html[data-ds][data-visual-world] #view-teacher .t-sec-actions { width: 100%; }
  html[data-ds][data-visual-world] #view-teacher .t-sec-actions > * { flex: 1 1 auto; justify-content: center; }
  html[data-ds][data-visual-world] #view-teacher .t-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[data-ds][data-visual-world] #view-teacher .t-kpi { padding: 14px; }
  html[data-ds][data-visual-world] #view-teacher .t-kpi > b { font-size: 24px; }
  html[data-ds][data-visual-world] #view-teacher .t-kpi > small { display: none; }
  html[data-ds][data-visual-world] #view-teacher .t-card { padding: 16px !important; }
  html[data-ds][data-visual-world] #view-teacher .t-cur-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "chip title action" "due due done"; gap: 8px 10px; }
  html[data-ds][data-visual-world] #view-teacher .t-cur-row > .t-chip { grid-area: chip; }
  html[data-ds][data-visual-world] #view-teacher .t-cur-row > .t-cur-title { grid-area: title; }
  html[data-ds][data-visual-world] #view-teacher .t-cur-row > .t-cur-due { grid-area: due; }
  html[data-ds][data-visual-world] #view-teacher .t-cur-row > .t-cur-done { grid-area: done; min-width: 120px; }
  html[data-ds][data-visual-world] #view-teacher .t-cur-row > button { grid-area: action; }
  html[data-ds][data-visual-world] #view-teacher .t-type-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html[data-ds][data-visual-world] #view-teacher .t-type-picker [data-assign-type] { padding: 12px; gap: 10px; }
  html[data-ds][data-visual-world] #view-teacher .t-type-copy small { display: none; }
  html[data-ds][data-visual-world] #view-teacher .t-type-ic { width: 32px; height: 32px; }
  html[data-ds][data-visual-world] #view-teacher .t-form-card { padding: 16px !important; }
  html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form { grid-template-columns: minmax(0, 1fr); }
  html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form > label { grid-column: 1 / -1 !important; }
  html[data-ds][data-visual-world] #view-teacher .t-form-card button[type="submit"] { width: 100%; justify-self: stretch; }
  html[data-ds][data-visual-world] #view-teacher .t-form-card .mini-form .reading-publish-actions { justify-self: stretch; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-main { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "chip title" "due due" "done done" "actions actions"; padding: 14px 16px 8px; gap: 8px 10px; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-main > .t-chip { grid-area: chip; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-main > .t-prog-title { grid-area: title; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-main > .t-prog-due { grid-area: due; display: flex; gap: 8px; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-main > .t-prog-done { grid-area: done; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-main > .t-prog-actions { grid-area: actions; justify-content: flex-start; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-row > .assignment-report,
  html[data-ds][data-visual-world] #view-teacher .t-prog-row > :is(.teacher-remediation-followup, [data-remediation-followup]) { margin: 0 16px 14px !important; }
  html[data-ds][data-visual-world] #view-teacher .t-prog-extra { padding: 0 16px 8px; }
  html[data-ds][data-visual-world] #view-teacher .t-seg { width: 100%; }
  html[data-ds][data-visual-world] #view-teacher .t-seg button { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
  html[data-ds][data-visual-world] #view-teacher .t-filter-group,
  html[data-ds][data-visual-world] #view-teacher .t-select { width: 100%; }
  html[data-ds][data-visual-world] #view-teacher .t-select select { flex: 1; max-width: none; }
  html[data-ds][data-visual-world] #view-teacher .t-roster-head .teacher-roster-tools { width: 100%; }
  html[data-ds][data-visual-world] #view-teacher .t-roster-head .teacher-roster-search { flex: 1 1 100%; }
  html[data-ds][data-visual-world] #view-teacher .t-roster-head > .primary-action { width: 100%; justify-content: center; }
  html[data-ds][data-visual-world] #view-teacher table.t-roster thead { display: none; }
  html[data-ds][data-visual-world] #view-teacher table.t-roster tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--hairline-soft); }
  html[data-ds][data-visual-world] #view-teacher table.t-roster tr[hidden] { display: none; }
  html[data-ds][data-visual-world] #view-teacher table.t-roster td { display: grid; padding: 0 !important; border: 0 !important; font-size: 14px; }
  html[data-ds][data-visual-world] #view-teacher table.t-roster td.td-title { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
  html[data-ds][data-visual-world] #view-teacher table.t-roster td[data-label]::before { content: attr(data-label); font-size: 11.5px; color: var(--muted); }
  html[data-ds][data-visual-world] #view-teacher table.t-roster tr.is-selected { background: var(--accent-soft-2); }
  html[data-ds][data-visual-world] #view-teacher table.t-roster tr.is-selected td { background: none; }
  html[data-ds][data-visual-world] #view-teacher .t-fold > summary { padding: 12px 44px 12px 16px; }
  html[data-ds][data-visual-world] #view-teacher .t-fold > :not(summary) { margin: 14px 16px !important; }
  html[data-ds][data-visual-world] .t-switch-mask { align-items: flex-end !important; padding: 0 !important; }
  html[data-ds][data-visual-world] .t-switch { width: 100%; max-width: none; margin: 0 !important; max-height: 88vh; border-radius: 20px 20px 0 0; padding: 10px 18px calc(24px + env(safe-area-inset-bottom)); border-bottom: 0; }
  html[data-ds][data-visual-world] .t-switch-grip { display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--hairline); margin: 0 auto 12px; }
  html[data-ds][data-visual-world] .t-confirm > footer > * { flex: 1 1 auto; justify-content: center; }
}

/* ── 25. Registration agreement (5.10.0) ──────────────────────────────────────────────
   On phones (≤600px) the 44px touch rule in academy-theme.css made the checkbox's hit area
   wider than its 18px column and turned the two document links into 44px boxes, so the box
   sat over the first character and the sentence broke into widely spaced lines. Here the
   checkbox keeps its 44px hit area but it is centred on the box with negative margins, so the
   box lines up with the first line of text. The links stay in the text flow and get their
   taller hit area from an invisible ::after, which does not change the line height.
   Above 600px nothing changes. */
@media (max-width: 600px) {
  html[data-visual-world] #authScreen .auth-form .agreement-check {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 10px !important;
  }
  html[data-visual-world] #authScreen .agreement-check .auth-agreement-hit {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important;
    margin: -13px !important; padding: 0 !important; cursor: pointer; position: relative; z-index: 1;
    align-self: start !important; justify-self: start !important;
  }
  html[data-visual-world] #authScreen .agreement-check .auth-agreement-hit input[type="checkbox"] { margin: 0 !important; align-self: center !important; }
  html[data-visual-world] #authScreen .agreement-check .auth-agreement-copy { min-width: 0; line-height: 18px !important; }
  html[data-visual-world] #authScreen #registerForm .agreement-check .auth-doc-link {
    display: inline !important; position: relative;
    min-width: 0 !important; min-height: 0 !important; height: auto !important;
    padding: 0 1px !important; margin: 0 !important;
    line-height: inherit !important; font-size: inherit !important; vertical-align: baseline !important;
    border-radius: 4px;
  }
  html[data-visual-world] #authScreen #registerForm .agreement-check .auth-doc-link::after {
    content: ""; position: absolute; inset: -13px -2px;
  }
}

/* ==== mobile-minimal.css ==== */
/* mobile-minimal.css (5.10.3-calm-ui-v1)
 * 手机端（屏宽 < 768px）的精简规则集中放在这里，排在 aivia-ds.css 之后加载。
 * 回退：删掉 index.html 里引用本文件的那一行 <link>，本文件的效果就全部撤回
 *（app.js 里按手机宽度渲染的改动要另外回退）。
 * 约定：
 * - 只写 @media (max-width: 767px) 里的规则。
 * - 选择器以 html[data-ds][data-visual-world] 开头并带 !important，且特异性要高于被覆盖的那条
 *  （例如顶栏网格 (2,5,2)、毛玻璃 (2,6,1)、极简皮肤的 Dot 胶囊 (2,4,1)）。
 * - 管理端没有 data-ds，不受本文件影响；老师端页面在 #view-teacher / .t-ws 里。
 */

/* ===== A. 外框：顶栏、Dot 入口、毛玻璃、页头插画、触控区、抽屉 ===== */
/* A-START */
@media (max-width: 767px) {
  /* A1. 只留一个 Dot 入口：顶栏的 Dot 头像在手机上不显示，标题行右侧的「Dot 带我学」保留。
     头像仍挂在 DOM 里（hidden 属性不变），「请 Dot 讲这个词」等找不到陪学页时仍能弹出同一个对话框。
     顶栏网格按头像的 hidden 属性切到 5 列（dot-companion.css:136-143，特异性 (2,5,2)/(2,6,2)），
     这里按同一条件改回 4 列，搜索收起和展开两种状态都不留空列。 */
  html[data-ds][data-visual-world] #appShell .topbar #avdot-launcher { display: none !important; }
  html[data-ds][data-visual-world] body[data-view] #appShell .main #dot-original-topbar.topbar:has(#avdot-launcher:not([hidden])) {
    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;
  }
  html[data-ds][data-visual-world] body[data-view] #appShell .main #dot-original-topbar.topbar.academy-search-open:has(#avdot-launcher:not([hidden])) {
    grid-template-areas: "menu brand find theme" "search search search close" "title title title title" "masthead masthead masthead masthead" !important;
  }
  /* 「Dot 带我学」的外观由全站按钮规则决定；手机上只保证 44px 高的点击区。 */
  html[data-ds][data-visual-world] body[data-view] #appShell #dot-original-topbar.topbar #dot-shell-return-entry:not([hidden]) {
    height: 44px !important; min-height: 44px !important;
  }
  /* 它和「学习级别 · 班级」那一行同在标题格里、靠右；级别行给它让出宽度，班级名长或屏幕窄（320–360px）时换到第二行，不再被它压住。 */
  html[data-ds][data-visual-world] body[data-view] #appShell #dot-original-topbar:has(#dot-shell-return-entry:not([hidden])) #workspaceLevel {
    max-width: calc(100% - 132px) !important;
  }
  /* 换行后行首不留竖线（手机上本来就不画这条分隔线，academy-panorama.css 的手机规则被 aivia-ds.css 盖掉了）。 */
  html[data-ds][data-visual-world] body #appShell #workspaceLevel .workspace-class-context::before { display: none !important; }

  /* A2. 手机不用毛玻璃：卡片回到实色。改的是 aivia-ds.css 第 21、23 节用到的变量；
     深色单独再写一份（深色变量块 aivia-ds.css:1613-1619 的特异性更高）。老师端手机页共用这些变量，同样变成实色。 */
  html[data-ds][data-visual-world],
  html[data-ds][data-visual-world].cv-dark {
    --ds-glass: var(--ds-card) !important;
    --ds-glass-lead: var(--ds-card) !important;
    --ds-glass-card: var(--ds-card) !important;
    --ds-glass-panel: var(--surface-2) !important;
    --ds-glass-tint: color-mix(in srgb, var(--surface-2) 70%, var(--ds-card)) !important;
    --ds-glass-sheen: none !important;
    --ds-glass-blur: none !important;
    --ds-glass-blur-lead: none !important;
  }
  /* 底栏、抽屉和顶栏小按钮也不做背景模糊（DESIGN.md「侧栏、标题及底栏去除背景模糊」）。 */
  html[data-ds][data-visual-world] body .mobile-tabbar {
    background: var(--surface) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html[data-ds][data-visual-world] body #appShell .sidebar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html[data-ds][data-visual-world] body #appShell .topbar :is(#menuToggle, #themeToggle, .academy-search-toggle, .academy-search-close, .search-box) {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html[data-ds][data-visual-world] body #appShell #dot-original-topbar .search-box { background: var(--surface) !important; }

  /* A3. 页头插画只留在学习中心；其他学生页面标题区干净（插画本是 fixed、z-index:-1 的装饰层，不占布局）。
     老师端的首页（我的班级，data-view="teacher"）照旧保留，手机精简只针对学生页面。 */
  html[data-ds][data-visual-world] body:not([data-view="today"]):not([data-view="teacher"]) #appShell #dot-original-topbar .academy-header-scene { display: none !important; }

  /* A4. 触控区不小于 44px（PRODUCT.md:99）。只放大可点区域，图标和文字大小不变。 */
  /* 学习级别 ⓘ：外圈 44px，负外边距抵消，行高不变；展开时的浅底仍是原来 28px 的圆。 */
  html[data-ds][data-visual-world] body #appShell #workspaceLevel .learning-level-help > summary {
    box-sizing: border-box !important;
    width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
    margin: -8px !important; padding: 8px !important; background-clip: content-box !important;
  }
  html[data-ds][data-visual-world] body #view-today .home-completion .home-refresh-icon-action,
  html[data-ds][data-visual-world] body #view-today .home-workspace-notice .secondary-action {
    height: 44px !important; min-height: 44px !important;
  }
  html[data-ds][data-visual-world] body #view-reading .reading-mini-btn { min-height: 44px !important; }
  html[data-ds][data-visual-world] body #view-growth .growth-filter-chip { min-height: 44px !important; }
  html[data-ds][data-visual-world] body #appShell .main > #accountMembershipStatus:not(.is-pending) [data-refresh-membership] {
    min-width: 44px !important; min-height: 44px !important;
  }

  /* A5. 抽屉只放底栏没有的入口：学习中心、单词、听力、朗读、写作已在底栏，这里不重复。
     只用 CSS 隐藏，不加 .hidden 类（底栏按 .hidden 挑选标签，enhance.js:141-145）；
     抽屉的焦点循环只走看得见的按钮（enhance.js:502-504、536-538）。 */
  html[data-ds][data-visual-world] body #appShell #mainNav .nav-item:is([data-view="today"], [data-view="study"], [data-view="listen"], [data-view="reading"], [data-view="writing"]) {
    display: none !important;
  }
  /* 「学习记录」：index.html 里默认 hidden（电脑、平板、管理端都不显示），只在学生手机抽屉里出现；
     点了和首页「学习记录」卡片一样打开 assignments 页面（data-jump，app.js 启动时统一绑定）。
     老师端 #mainNav 本身是 hidden，所以只有学生看得到。 */
  html[data-ds][data-visual-world] body #appShell #mainNav:not([hidden]) > .drawer-records-link[hidden] {
    display: flex !important; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    min-height: var(--ds-target, 44px); margin: 0; padding: 0 12px;
    border: 0; border-radius: var(--ds-r-control, 10px); background: transparent;
    color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer;
    transition: background-color var(--ds-fast, .15s) var(--ds-ease, ease), color var(--ds-fast, .15s) var(--ds-ease, ease);
  }
  html[data-ds][data-visual-world] body #appShell #mainNav > .drawer-records-link .nav-ic { width: 22px; height: 22px; display: inline-grid; place-items: center; opacity: .82; }
  html[data-ds][data-visual-world] body #appShell #mainNav > .drawer-records-link .ic { width: 20px; height: 20px; stroke-width: 1.75; }
  html[data-ds][data-visual-world] body[data-view="assignments"] #appShell #mainNav > .drawer-records-link {
    background: var(--ds-nav-active-bg) !important; color: var(--ds-nav-active-ink) !important;
  }
  html[data-ds][data-visual-world] body[data-view="assignments"] #appShell #mainNav > .drawer-records-link .nav-ic { opacity: 1; }
}
@media (max-width: 600px) {
  /* A6. 单词页 5 个模式按钮平分一行、图标在上文字在下（ux-workspace.css:29-41 的原设计）。
     aivia-ds.css:1535 给所有宽度加了 16px 左右内边距，320–390px 时「难词本」三个字放不下，这里改回 4px。 */
  html[data-ds][data-visual-world] .words-mode-toggle.vocab-mode-toolbar .wm-btn {
    padding-inline: 4px !important; min-width: 0 !important;
  }
}
/* A-END */




/* ===== B. 各页：学习中心、列表、会员、打卡、成长档案、朗读筛选 ===== */
/* B-START */
@media (max-width: 767px) {
  /* B0. Folds (<details>) drawn by app.js only on phones: quiet text rows with a small chevron. */
  html[data-ds][data-visual-world] :is(#view-today, #view-wrong, #view-reading, #view-growth) details:is(.more-actions, .reading-tips-fold, .dc-subtasks-fold, .reading-filter-more, .growth-history-fold, .growth-more) > summary {
    list-style: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html[data-ds][data-visual-world] :is(#view-today, #view-wrong, #view-reading, #view-growth) details:is(.more-actions, .reading-tips-fold, .dc-subtasks-fold, .reading-filter-more, .growth-history-fold, .growth-more) > summary::-webkit-details-marker { display: none; }
  html[data-ds][data-visual-world] :is(#view-today, #view-wrong, #view-reading, #view-growth) :is(.more-actions, .reading-tips-fold, .dc-subtasks-fold, .growth-more) > summary,
  html[data-ds][data-visual-world] #view-reading .reading-filter-toggle {
    display: inline-flex !important; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px;
    color: var(--ink-2) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.3;
  }
  html[data-ds][data-visual-world] :is(#view-today, #view-wrong, #view-reading, #view-growth) :is(.more-actions, .reading-tips-fold, .dc-subtasks-fold, .growth-more, .growth-history-fold) > summary::after,
  html[data-ds][data-visual-world] #view-reading .reading-filter-toggle::after {
    content: ""; flex: none; width: 6px; height: 6px; margin: 0 2px 3px 2px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7;
  }
  html[data-ds][data-visual-world] :is(#view-today, #view-wrong, #view-reading, #view-growth) details[open]:is(.more-actions, .reading-tips-fold, .dc-subtasks-fold, .growth-more, .growth-history-fold) > summary::after,
  html[data-ds][data-visual-world] #view-reading .reading-filter-more[open] .reading-filter-toggle::after { margin-bottom: -3px; transform: rotate(225deg); }
  html[data-ds][data-visual-world] :is(#view-today, #view-wrong, #view-reading, #view-growth) details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

  /* B1. 学习中心: only what is due today. Modules without a task, 快速过一词 and the record numbers step back. */
  html[data-ds][data-visual-world] #view-today .home-workspace-grid {
    display: flex !important; flex-direction: column !important; gap: 12px !important; grid-template-areas: none !important;
  }
  html[data-ds][data-visual-world] #view-today .home-workspace-grid > .home-workspace-review,
  html[data-ds][data-visual-world] #view-today .home-workspace-grid > .home-workspace.is-empty:not(.is-syncing),
  html[data-ds][data-visual-world] #view-today .home-workspace-grid > .home-workspace.is-syncing ~ .home-workspace.is-syncing,
  html[data-ds][data-visual-world] #view-today .home-workspace.is-syncing .home-workspace-empty > button,
  html[data-ds][data-visual-world] #view-today .cv-home-rail,
  html[data-ds][data-visual-world] #view-today .student-home.self-mode > .home-today-ring:not(.home-today-ring-loading) { display: none !important; }
  html[data-ds][data-visual-world] #view-today .home-workspace.is-syncing .home-workspace-empty { min-height: 0 !important; padding: 10px 0 0 !important; }
  /* Self-study: with the ring gone, "学习清单 x/y" is the one completion count (refine.css hides it below 760px). */
  html[data-ds][data-visual-world] #view-today .student-home.self-mode .daily-section-count { display: inline !important; }

  /* 学习记录: one quiet row instead of a card of numbers. */
  html[data-ds][data-visual-world] #view-today :is(.home-workspace-records.is-line, .home-self-records.is-line) {
    display: block !important; padding: 0 !important; min-height: 0 !important; height: auto !important; overflow: hidden;
  }
  html[data-ds][data-visual-world] #view-today .home-self-records.is-line {
    border: 1px solid var(--ds-card-edge, var(--hairline)); border-radius: var(--ds-r-card, 12px); background: var(--ds-card, var(--surface));
  }
  html[data-ds][data-visual-world] #view-today .home-workspace-records.is-line .checkin-read-notice.is-quiet { display: none !important; }
  html[data-ds][data-visual-world] #view-today .home-workspace-records.is-line .checkin-read-notice { margin: 12px 16px 0 !important; }
  html[data-ds][data-visual-world] #view-today .home-records-line {
    display: flex !important; align-items: center; gap: 10px; width: 100% !important; min-height: 52px !important; margin: 0 !important;
    padding: 0 16px 0 18px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    color: var(--ink) !important; font-size: 15px !important; font-weight: 650 !important; text-align: left;
  }
  html[data-ds][data-visual-world] #view-today .home-records-line > span { flex: 1; }
  html[data-ds][data-visual-world] #view-today .home-records-line > .ic { color: var(--muted); }

  /* Main card: the next step leads; today's progress is one small line with a quiet refresh icon. */
  html[data-ds][data-visual-world] #view-today .home-overview-bar > .home-completion {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 14px !important;
    padding: 6px 8px 6px 20px !important; min-height: 0 !important;
  }
  html[data-ds][data-visual-world] #view-today .home-overview-bar > .home-completion > span:first-child { font-size: 13px !important; font-weight: 600 !important; color: var(--muted) !important; }
  html[data-ds][data-visual-world] #view-today .home-overview-bar > .home-completion > strong {
    display: inline-flex !important; flex-direction: row !important; align-items: baseline; gap: 4px !important;
    font-size: 13px !important; font-weight: 600 !important; color: var(--muted) !important;
  }
  html[data-ds][data-visual-world] #view-today .home-overview-bar > .home-completion > strong b {
    font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--ink-2) !important;
  }
  html[data-ds][data-visual-world] #view-today .home-overview-bar .home-completion .home-refresh-icon-action:not([hidden]) {
    margin-left: auto !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important;
    padding: 0 !important; justify-content: center; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--muted) !important;
  }
  html[data-ds][data-visual-world] #view-today .home-overview-bar .home-completion .home-refresh-icon-action:not(.pending-sync) .home-refresh-label { display: none !important; }
  /* 待同步 N stays readable while work is waiting to sync. */
  html[data-ds][data-visual-world] #view-today .home-overview-bar .home-completion .home-refresh-icon-action.pending-sync:not([hidden]) {
    width: auto !important; padding: 0 12px !important; gap: 6px; border-radius: 999px !important;
    background: var(--amber-soft) !important; color: var(--amber-ink) !important;
  }
  /* The quota strip only speaks up when something is low, used up or unconfirmed. */
  html[data-ds][data-visual-world] #view-today .home-member-quota-fold:is(.is-ok, .is-syncing) { display: none !important; }
  /* The sync line under the next step repeats the recovery banner; the banner wins. */
  html[data-ds][data-visual-world] #appShell .main:has(> .learning-recovery:not([hidden])) #view-today .learning-journey-copy > small[role="status"] { display: none !important; }

  /* One "继续" per assignment: the row the main button already continues shows only its progress. */
  html[data-ds][data-visual-world] #view-today .home-workspace-tasks .home-check-row.is-home-lead > .task-entry-action { display: none !important; }

  /* Check-in card: title, state and one button. Level/end date and the 7-day dots live in 打卡记录. */
  html[data-ds][data-visual-world] #view-today .daily-checkin-card .dc-meta-extra,
  html[data-ds][data-visual-world] #view-today .daily-checkin-card .daily-checkin-days,
  html[data-ds][data-visual-world] #view-today .daily-checkin-card:not(.daily-checkin-multi):not(.pending) .dc-explain { display: none !important; }
  html[data-ds][data-visual-world] #view-today .daily-checkin-card:is(.daily-checkin-multi, .pending) .dc-explain { display: block !important; }
  html[data-ds][data-visual-world] #view-today .home-workspace .daily-checkin-card.daily-checkin-multi { grid-template-columns: minmax(0, 1fr) auto !important; }
  html[data-ds][data-visual-world] #view-today .dc-subtasks-fold { width: 100%; margin-top: -4px; }
  html[data-ds][data-visual-world] #view-today .dc-subtasks-fold > summary { min-height: 36px !important; color: var(--muted) !important; font-weight: 500 !important; }
  html[data-ds][data-visual-world] #view-today .dc-subtasks-fold .dc-subtasks { margin-top: 0 !important; }
  /* While the per-article list is open its own 开始 buttons lead, so the card-level button steps aside. */
  html[data-ds][data-visual-world] #view-today .daily-checkin-card:has(> .daily-checkin-main > .dc-subtasks-fold[open]) > .task-entry-action { display: none !important; }

  /* B2. 难词本 rows: 播放 + 练习 in the row; Dot, 造句巩固 and 自评已会 drop down under this row's "更多". */
  html[data-ds][data-visual-world] #view-wrong .wrong-word-card .wrong-row-actions { flex-wrap: nowrap !important; align-items: flex-start !important; }
  html[data-ds][data-visual-world] #view-wrong .wrong-row-actions > .wrong-play-icon {
    flex: none; width: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; justify-content: center;
  }
  html[data-ds][data-visual-world] #view-wrong .wrong-row-actions > .secondary-action { min-height: 44px !important; }
  html[data-ds][data-visual-world] #view-wrong .wrong-row-actions > .more-actions { flex: 1 1 auto; min-width: 0; text-align: right; }
  html[data-ds][data-visual-world] #view-wrong .more-actions > summary { justify-content: flex-end; padding: 0 4px 0 12px; }
  html[data-ds][data-visual-world] #view-wrong .more-actions-list { display: grid; gap: 8px; padding: 4px 0 2px; text-align: left; }
  html[data-ds][data-visual-world] #view-wrong .wrong-word-card .more-actions-list > button {
    width: 100% !important; min-height: 44px !important; margin: 0 !important; justify-content: center;
  }

  /* B3. 朗读: 来源 tabs stay; the source note goes; 册别/单元, search and refresh share one "筛选". */
  html[data-ds][data-visual-world] #view-reading .reading-source-note { display: none !important; }
  html[data-ds][data-visual-world] #view-reading .reading-filter-more > summary.reading-catalog-heading { display: flex !important; align-items: center; gap: 8px; min-height: 44px; }
  html[data-ds][data-visual-world] #view-reading .reading-filter-more > summary #readingCatalogCount { margin-left: 0 !important; }
  html[data-ds][data-visual-world] #view-reading .reading-filter-toggle { margin-left: auto; min-height: 44px; }
  html[data-ds][data-visual-world] #view-reading .reading-filter-toggle > .ic { width: 14px; height: 14px; }
  html[data-ds][data-visual-world] #view-reading .reading-filter-body { display: grid; gap: 10px; padding: 2px 0 12px; }
  html[data-ds][data-visual-world] #view-reading .reading-filter-body .starters-catalog-filters { margin: 0 !important; }
  html[data-ds][data-visual-world] #view-reading .reading-filter-body .reading-catalog-search { margin: 0 !important; }
  html[data-ds][data-visual-world] #view-reading .reading-filter-body .reading-sync-button {
    display: inline-flex !important; align-items: center; justify-self: start; gap: 6px; width: auto !important; min-width: 0 !important;
    height: 44px; padding: 0 16px !important; border-radius: 999px !important; white-space: nowrap; color: var(--ink-2) !important; font-size: 13px !important;
  }
  /* Per sentence: 示范 + 读这一段 in the row; 慢速 and the hint tags fold under "提示与慢速". */
  html[data-ds][data-visual-world] #view-reading .reading-tips-fold { margin-top: 2px; }
  html[data-ds][data-visual-world] #view-reading .reading-paragraph-row > .reading-tips-fold { grid-column: 1 / -1; min-width: 0; margin-top: 4px; }
  html[data-ds][data-visual-world] #view-reading .reading-tips-fold > summary { min-height: 36px !important; color: var(--muted) !important; font-weight: 500 !important; }
  html[data-ds][data-visual-world] #view-reading .reading-tips-body { display: grid; justify-items: start; gap: 8px; padding: 2px 0 6px; }
  html[data-ds][data-visual-world] #view-reading .reading-tips-body > .reading-mini-btn { width: auto !important; }
  html[data-ds][data-visual-world] #view-reading .reading-tips-body > :is(.token-list, .reading-ai-guidance) { margin: 0 !important; }
  /* 慢速 alone: the fold ends the action row and opens downward under its own label. */
  html[data-ds][data-visual-world] #view-reading .reading-paragraph-row .reading-actions { align-items: flex-start !important; }
  html[data-ds][data-visual-world] #view-reading .reading-actions > .reading-tips-fold { margin: 0 0 0 auto; }
  html[data-ds][data-visual-world] #view-reading .reading-actions > .reading-tips-fold > summary { min-height: 40px !important; padding: 0 4px 0 8px; }
  html[data-ds][data-visual-world] #view-reading .reading-actions > .reading-tips-fold .reading-tips-body { justify-items: end; padding: 2px 0 0; }

  /* B4. 成长档案: the four histories start folded; 保存报告 (print) sits in "更多" at the end. */
  html[data-ds][data-visual-world] #view-growth .growth-history-fold > summary.section-head { min-height: 44px; margin: 0 !important; }
  html[data-ds][data-visual-world] #view-growth .growth-history-fold > summary.section-head::after { order: 3; margin-left: 4px; }
  html[data-ds][data-visual-world] #view-growth .growth-history-fold > summary.section-head > .muted { margin-left: auto; }
  html[data-ds][data-visual-world] #view-growth .growth-history-fold[open] > summary.section-head { margin-bottom: 12px !important; }
  html[data-ds][data-visual-world] #view-growth .growth-more { margin: 4px 0 0; padding: 0 4px; }
  html[data-ds][data-visual-world] #view-growth .growth-more-body { padding: 4px 0 8px; }
  html[data-ds][data-visual-world] #view-growth .growth-more-body > #growthPrint { width: auto !important; min-height: 44px !important; }
}
/* B-END */

/* ==== reading-library.css ==== */
/* Aivia 英文阅读馆 (5.10.3-reading-library-v1)
   沿用站内语义变量（--surface / --ink / --hairline / --accent / --ds-card / --ds-brass …），深浅主题自动跟随。
   阅读馆特有元素：书封、书架横板、黄铜“在读”书签、衬线正文、点词释义卡。 */

/* 功能开关：未开启时侧栏/手机菜单都不显示阅读馆入口（开启方式见 app.js syncReadingLibraryFeature）。
   选择器要比 aivia-ds.css 的 `html[data-ds][data-visual-world] #appShell #mainNav .nav-item:not(.hidden):not([hidden])`
   （display:flex !important）更具体，否则会被它盖掉。 */
html body:not(.cv-feature-library) #appShell #mainNav .nav-item[data-view="library"][data-roles][type] { display: none !important; }

/* 页头插画：沿用“两人共同阅读”的场景 */
html[data-visual-world="academy"] body[data-view="library"] {
  --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");
}

#view-library .lib {
  --lib-card: var(--ds-card, var(--surface));
  --lib-edge: var(--ds-card-edge, var(--hairline));
  --lib-r: var(--ds-r-card, 14px);
  --lib-rc: var(--ds-r-control, 10px);
  --lib-brass: var(--ds-brass, #a07a32);
  --lib-brass-ink: var(--ds-brass-ink, #7d5d1f);
  --lib-brass-soft: var(--ds-brass-soft, #f5eedf);
  --lib-serif: "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif;
  --lib-display: var(--font-display, var(--lib-serif));
  display: grid;
  gap: 18px;
  min-width: 0;
  padding-bottom: 24px;
  color: var(--ink);
}
#view-library .lib * { box-sizing: border-box; }
#view-library .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#view-library .ic { width: 18px; height: 18px; flex: none; }
#view-library .lib-muted { color: var(--muted); font-size: 13px; }
#view-library .lib-note { margin: 4px 0 0; }
#view-library .lib-state { margin: 24px 0; color: var(--muted); }

/* ── intro strip ── */
#view-library .lib-intro {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 16px 20px; background: var(--lib-card); border: 1px solid var(--lib-edge); border-radius: var(--lib-r);
}
#view-library .lib-intro-main { display: grid; gap: 4px; min-width: 0; }
#view-library .lib-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--lib-brass-ink); font-size: 13px; font-weight: 650; letter-spacing: .02em; }
#view-library .lib-intro-line { margin: 0; font-size: 16px; color: var(--ink-2); }
#view-library .lib-intro-line b { color: var(--accent-ink); }
#view-library .lib-stats { display: flex; gap: 6px; margin: 0; }
#view-library .lib-stats div { min-width: 72px; padding: 6px 12px; border-radius: var(--lib-rc); background: var(--surface-2); text-align: center; }
#view-library .lib-stats dt { font-size: 12px; color: var(--muted); }
#view-library .lib-stats dd { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ── four entries (underline tabs, same idea as 朗读/写作模式) ── */
#view-library .lib-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; }
#view-library .lib-tabs::-webkit-scrollbar { display: none; }
#view-library .lib-tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 14px;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted);
  font-size: 15px; font-weight: 600; border-radius: 0;
}
#view-library .lib-tab:hover { color: var(--ink); }
#view-library .lib-tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); }
#view-library .lib-panel { display: grid; gap: 14px; min-width: 0; }

#view-library .lib-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
#view-library .lib-section-head h2 { margin: 0; font-size: 18px; font-weight: 650; color: var(--ink); }
#view-library .lib-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent-ink); font-size: 14px; font-weight: 600; }

/* chips & status */
#view-library .lib-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 650; white-space: nowrap; }
#view-library .lib-chip-level { background: var(--lib-brass-soft); color: var(--lib-brass-ink); }
#view-library .lib-chip-soft { background: var(--surface-2); color: var(--ink-2); font-weight: 500; }
#view-library .lib-status { font-size: 12px; font-weight: 650; }
#view-library .lib-status.is-read { color: var(--green-ink); }
#view-library .lib-status.is-reading { color: var(--accent-ink); }

/* progress */
#view-library .lib-progress { height: 6px; border-radius: 999px; background: var(--hairline-soft); overflow: hidden; }
#view-library .lib-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--academy-action, var(--accent)); transition: width .3s ease; }

/* ── book covers (library element) ── */
#view-library .lib-cover {
  --cv-bg: #dfe8f6; --cv-spine: #3d5fb5; --cv-ink: #16233f;
  position: relative; display: grid; align-content: end; gap: 4px; width: 100%; aspect-ratio: 3 / 4;
  padding: 14px 12px 12px 22px; overflow: hidden; border-radius: 6px 12px 12px 6px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cv-bg) 82%, #fff) 0%, var(--cv-bg) 70%);
  color: var(--cv-ink); text-align: left; box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 6px 14px rgb(22 35 63 / 10%);
}
#view-library .lib-cover[data-tone="rose"] { --cv-bg: #f4e1dc; --cv-spine: #b0544a; --cv-ink: #3d1d19; }
#view-library .lib-cover[data-tone="leaf"] { --cv-bg: #dfeee5; --cv-spine: #2f7259; --cv-ink: #173a2d; }
#view-library .lib-cover[data-tone="brass"] { --cv-bg: #f3ebd9; --cv-spine: #a07a32; --cv-ink: #3d2e10; }
html.cv-dark #view-library .lib-cover { --cv-bg: #24324c; --cv-spine: #8aa3e8; --cv-ink: #ece7dc; box-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 14px rgb(0 0 0 / 30%); background: linear-gradient(160deg, color-mix(in srgb, var(--cv-bg) 85%, #fff) 0%, var(--cv-bg) 70%); }
html.cv-dark #view-library .lib-cover[data-tone="rose"] { --cv-bg: #432c2c; --cv-spine: #e08c80; }
html.cv-dark #view-library .lib-cover[data-tone="leaf"] { --cv-bg: #20392f; --cv-spine: #8fd1b5; }
html.cv-dark #view-library .lib-cover[data-tone="brass"] { --cv-bg: #3b3122; --cv-spine: #d8b46c; }
#view-library .lib-cover-spine { position: absolute; inset: 0 auto 0 0; width: 10px; background: var(--cv-spine); box-shadow: inset -2px 0 0 rgb(255 255 255 / 18%); }
#view-library .lib-cover-ic { position: absolute; top: 14px; left: 22px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--cv-spine) 16%, transparent); color: var(--cv-spine); }
#view-library .lib-cover-title { font-family: var(--lib-display); font-size: 17px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
#view-library .lib-cover-zh { font-size: 13px; font-weight: 600; opacity: .85; }
#view-library .lib-cover-type { margin-top: 4px; font-size: 11px; font-weight: 650; letter-spacing: .04em; color: var(--cv-spine); }
#view-library .lib-cover.is-big { max-width: 200px; padding: 18px 16px 16px 26px; }
#view-library .lib-cover.is-big .lib-cover-title { font-size: 22px; }
#view-library .lib-ribbon {
  position: absolute; top: 0; right: 14px; padding: 6px 6px 10px; background: var(--lib-brass); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; writing-mode: vertical-rl; letter-spacing: .1em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
}

/* shelf: each book stands on a plank; adjacent planks meet across the 16px gap */
#view-library .lib-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#view-library .lib-filter { min-height: 36px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 600; }
#view-library .lib-filter.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
#view-library .lib-select select { min-height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--hairline); border-radius: 999px; background-color: var(--surface); color: var(--ink-2); font-size: 14px; }
#view-library .lib-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 16px; padding: 4px 8px 8px; }
#view-library .lib-book { position: relative; display: grid; gap: 14px; align-content: start; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
#view-library .lib-book .lib-cover { transition: transform .18s ease; }
#view-library .lib-book::after {
  content: ""; grid-row: 1; grid-column: 1; align-self: end; height: 8px; margin: 0 -8px; border-radius: 2px;
  background: color-mix(in srgb, var(--lib-brass) 34%, var(--surface-2)); box-shadow: 0 2px 0 color-mix(in srgb, var(--lib-brass) 22%, transparent);
}
#view-library .lib-book .lib-cover { grid-row: 1; grid-column: 1; width: calc(100% - 12px); margin: 0 6px 8px; }
#view-library .lib-book-meta { grid-row: 2; grid-column: 1; }
#view-library .lib-book-meta { display: grid; gap: 2px; }
#view-library .lib-book-name { font-size: 15px; font-weight: 650; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  #view-library .lib-book:hover .lib-cover { transform: translateY(-3px); }
}

/* item cards */
#view-library .lib-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
#view-library .lib-card {
  display: grid; gap: 6px; align-content: start; min-height: 150px; padding: 16px; text-align: left;
  border: 1px solid var(--lib-edge); border-radius: var(--lib-r); background: var(--lib-card); color: inherit;
}
#view-library .lib-card:hover { border-color: var(--accent-edge); }
#view-library .lib-card-top { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
#view-library .lib-card-fav { color: var(--lib-brass); }
#view-library .lib-card-title { font-family: var(--lib-serif); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); }
#view-library .lib-card-zh { font-size: 14px; color: var(--ink-2); }
#view-library .lib-card-intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--muted); line-height: 1.55; }
#view-library .lib-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 4px; font-size: 13px; color: var(--muted); }

/* continue reading */
#view-library .lib-continue {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--accent-edge); border-radius: var(--lib-r); background: var(--accent-soft-2);
}
#view-library .lib-continue .lib-cover { padding: 8px 6px 8px 14px; border-radius: 4px 8px 8px 4px; }
#view-library .lib-continue .lib-cover-title, #view-library .lib-continue .lib-cover-zh, #view-library .lib-continue .lib-cover-type, #view-library .lib-continue .lib-ribbon { display: none; }
#view-library .lib-continue .lib-cover-ic { top: 50%; left: 50%; transform: translate(-40%, -50%); }
#view-library .lib-continue-main { display: grid; gap: 6px; min-width: 0; }
#view-library .lib-continue-title { margin: 0; font-family: var(--lib-serif); font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
#view-library .lib-eyebrow { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }

/* teacher lists */
#view-library .lib-lists { display: grid; gap: 8px; }
#view-library .lib-list-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px;
  border: 1px solid var(--lib-edge); border-radius: var(--lib-r); background: var(--lib-card); color: inherit; text-align: left;
}
#view-library .lib-list-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lib-brass-soft); color: var(--lib-brass-ink); }
#view-library .lib-list-ic.is-big { width: 64px; height: 64px; border-radius: 16px; }
#view-library .lib-list-main { display: grid; gap: 2px; min-width: 0; }
#view-library .lib-list-title { font-size: 16px; font-weight: 650; }

/* topics */
#view-library .lib-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
#view-library .lib-topic {
  display: grid; justify-items: start; gap: 6px; min-height: 112px; padding: 14px; text-align: left;
  border: 1px solid var(--lib-edge); border-radius: var(--lib-r); background: var(--lib-card); color: inherit;
}
#view-library .lib-topic:not(:disabled):hover { border-color: var(--accent-edge); }
#view-library .lib-topic.is-empty { opacity: .6; cursor: default; }
#view-library .lib-topic-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
#view-library .lib-topic-ic.is-big { width: 64px; height: 64px; }
#view-library .lib-topic-ic.is-big .ic, #view-library .lib-list-ic.is-big .ic { width: 28px; height: 28px; }
#view-library .lib-topic-name { font-size: 15px; font-weight: 650; }

/* rows */
#view-library .lib-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#view-library .lib-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px;
  border: 1px solid var(--hairline-soft); border-radius: var(--lib-rc); background: var(--surface); color: inherit; text-align: left;
}
#view-library .lib-row:hover { border-color: var(--accent-edge); }
#view-library .lib-row-no { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
#view-library .lib-row-no .ic { width: 16px; height: 16px; color: var(--green-ink); }
#view-library .lib-row-main { display: grid; gap: 2px; min-width: 0; }
#view-library .lib-row-title { font-family: var(--lib-serif); font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
#view-library .lib-row-zh { font-size: 13px; color: var(--muted); }
#view-library .lib-row-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
#view-library .lib-row-go { color: var(--muted); }
#view-library .lib-steps .lib-row-no { background: var(--lib-brass-soft); color: var(--lib-brass-ink); }

#view-library .lib-empty { display: grid; justify-items: center; gap: 10px; padding: 24px 16px; border: 1px dashed var(--hairline); border-radius: var(--lib-r); color: var(--muted); text-align: center; }
#view-library .lib-empty .ic { width: 28px; height: 28px; }
#view-library .lib-empty p { margin: 0; }

#view-library .lib-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
#view-library .lib-words li { display: grid; grid-template-columns: auto minmax(0, 1fr) 36px; align-items: center; gap: 10px; min-height: 48px; padding: 4px 6px 4px 14px; border: 1px solid var(--hairline-soft); border-radius: var(--lib-rc); background: var(--surface); }
#view-library .lib-word-en { font-family: var(--lib-serif); font-size: 16px; font-weight: 700; }
#view-library .lib-word-zh { overflow: hidden; color: var(--ink-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
#view-library .lib-icon-btn { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--lib-rc); background: none; color: var(--muted); font-size: 14px; font-weight: 700; }
#view-library .lib-icon-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
#view-library .lib-icon-btn:disabled { opacity: .4; }

#view-library .lib-foot-note { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; color: var(--muted); font-size: 12px; }
#view-library .lib-foot-note .ic { width: 16px; height: 16px; }

/* ── set / list / topic headers ── */
#view-library .lib-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; }
#view-library .lib-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 6px; border: 1px solid var(--hairline); border-radius: var(--lib-rc); background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 600; }
#view-library .lib-trail { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
#view-library :is(.lib-set-head, .lib-list-head, .lib-topic-head) {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 24px;
  padding: 20px; border: 1px solid var(--lib-edge); border-radius: var(--lib-r); background: var(--lib-card);
}
#view-library .lib-set-head .lib-cover { width: 168px; }
#view-library .lib-set-info { display: grid; justify-items: start; gap: 8px; min-width: 0; }
#view-library .lib-set-title { margin: 0; font-family: var(--lib-display); font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
#view-library .lib-set-zh { margin: -4px 0 0; font-size: 16px; font-weight: 600; color: var(--ink-2); }
#view-library .lib-set-summary { margin: 0; max-width: 60ch; color: var(--ink-2); line-height: 1.6; }
#view-library .lib-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0; }
#view-library .lib-facts dt { font-size: 12px; color: var(--muted); }
#view-library .lib-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
#view-library .lib-unit { display: grid; gap: 8px; }
#view-library .lib-unit h3 { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; font-size: 16px; font-weight: 650; }
#view-library .lib-source { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
#view-library .lib-source .ic { width: 14px; height: 14px; margin-top: 2px; }
#view-library .lib-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#view-library .lib-actions > :is(.primary-action, .secondary-action) { width: auto !important; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ── reader ── */
#view-library .lib-reader { --lib-font: 18px; position: relative; display: grid; gap: 16px; width: 100%; max-width: 760px; margin: 0 auto; }
#view-library .lib-reader-head { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
#view-library .lib-reader-title { margin: 0; font-family: var(--lib-display); font-size: 30px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
#view-library .lib-reader-zh { margin: -2px 0 0; font-size: 16px; font-weight: 600; color: var(--ink-2); }
#view-library .lib-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
#view-library .lib-font { display: inline-flex; gap: 4px; padding: 2px; border: 1px solid var(--hairline); border-radius: var(--lib-rc); }
#view-library .lib-font .lib-icon-btn { min-width: 44px; height: 40px; font-family: var(--lib-serif); }
#view-library .lib-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: var(--lib-rc); background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 600; }
#view-library .lib-tool.is-on { border-color: color-mix(in srgb, var(--lib-brass) 60%, transparent); background: var(--lib-brass-soft); color: var(--lib-brass-ink); }
#view-library .lib-notice { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px; border-radius: var(--lib-rc); background: var(--amber-soft); color: var(--amber-ink); font-size: 14px; }
#view-library .lib-prompt { padding: 12px 16px; border-left: 3px solid var(--lib-brass); border-radius: 0 var(--lib-rc) var(--lib-rc) 0; background: var(--lib-brass-soft); }
#view-library .lib-prompt h3 { margin: 0 0 4px; color: var(--lib-brass-ink); font-size: 13px; font-weight: 700; }
#view-library .lib-prompt p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.6; }
#view-library .lib-audio { display: grid; gap: 6px; padding: 10px 14px; border: 1px solid var(--hairline-soft); border-radius: var(--lib-rc); background: var(--surface); }
#view-library .lib-audio-label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
#view-library .lib-audio audio { width: 100%; height: 40px; }
#view-library .lib-tip { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
#view-library .lib-tip .ic { width: 15px; height: 15px; color: var(--lib-brass); }

#view-library .lib-text { font-family: var(--lib-serif); font-size: var(--lib-font); line-height: 1.75; color: var(--ink); }
#view-library .lib-text p { margin: 0 0 .9em; }
#view-library .lib-line { display: grid; grid-template-columns: minmax(64px, 9ch) minmax(0, 1fr); gap: 12px; }
#view-library .lib-speaker { padding-top: .2em; color: var(--accent-ink); font-family: var(--ds-sans, inherit); font-size: max(13px, calc(var(--lib-font) - 4px)); font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
#view-library .lib-w { border-radius: 3px; cursor: pointer; }
#view-library .lib-w:hover { background: var(--accent-soft-2); }
#view-library .lib-w.is-saved { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lib-brass) 70%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
#view-library .lib-w.is-active { background: var(--accent-soft); color: var(--accent-ink); }

#view-library :is(.lib-gloss, .lib-quiz) { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--lib-edge); border-radius: var(--lib-r); background: var(--lib-card); }
#view-library :is(.lib-gloss, .lib-quiz) h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 650; }
#view-library .lib-gloss dl { display: grid; gap: 10px; margin: 0; }
#view-library .lib-gloss dt { font-family: var(--lib-serif); font-size: 16px; font-weight: 700; }
#view-library .lib-gloss dd { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
#view-library .lib-q { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
#view-library .lib-q legend { display: flex; gap: 10px; margin-bottom: 8px; font-size: 16px; font-weight: 600; line-height: 1.5; }
#view-library .lib-q-no { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); font-size: 13px; }
#view-library .lib-q-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
#view-library .lib-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--hairline); border-radius: var(--lib-rc); background: var(--surface); color: var(--ink); text-align: left; font-size: 15px; }
#view-library .lib-opt:hover:not(:disabled) { border-color: var(--accent-edge); background: var(--accent-soft-2); }
#view-library .lib-opt:disabled { cursor: default; }
#view-library .lib-opt-key { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); font-size: 12px; font-weight: 700; }
#view-library .lib-opt.is-right { border-color: var(--green-ink); background: var(--green-soft); }
#view-library .lib-opt.is-wrong { border-color: var(--red-ink); background: var(--red-soft); }
#view-library .lib-q-why { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--lib-rc); font-size: 14px; line-height: 1.55; }
#view-library .lib-q-why.is-right { background: var(--green-soft); color: var(--green-ink); }
#view-library .lib-q-why.is-wrong { background: var(--red-soft); color: var(--red-ink); }
#view-library .lib-reader-foot { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--hairline); }
#view-library .lib-reader-foot a { color: var(--accent-ink); }

/* word card */
.lib-pop {
  position: absolute; z-index: 30; display: grid; gap: 8px; padding: 12px 14px 14px; border: 1px solid var(--hairline);
  border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg, 0 18px 48px rgb(0 0 0 / 18%));
}
.lib-pop-head { display: flex; align-items: center; gap: 8px; }
.lib-pop-word { font-family: "Iowan Old Style", "Charter", "Georgia", serif; font-size: 20px; font-weight: 700; }
.lib-pop .lib-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--ds-brass-soft, #f5eedf); color: var(--ds-brass-ink, #7d5d1f); font-size: 12px; font-weight: 650; }
.lib-pop .lib-muted { color: var(--muted); font-size: 13px; }
.lib-pop .lib-icon-btn { display: inline-grid; place-items: center; min-width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 10px; background: none; color: var(--muted); }
.lib-pop .lib-icon-btn .ic { width: 18px; height: 18px; }
.lib-pop-zh { margin: 0; font-size: 16px; line-height: 1.5; }
.lib-pop-def { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.lib-pop p { margin: 0; }
.lib-pop .lib-pop-save { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto !important; min-height: 44px; }
.lib-pop .lib-pop-save .ic { width: 16px; height: 16px; }
.lib-pop.is-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; width: auto; border-radius: 16px 16px 0 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

/* ── tablet & phone ── */
@media (max-width: 760px) {
  #view-library .lib { gap: 14px; }
  #view-library .lib-intro { padding: 14px; }
  #view-library .lib-stats { width: 100%; }
  #view-library .lib-stats div { flex: 1; min-width: 0; }
  #view-library :is(.lib-set-head, .lib-list-head, .lib-topic-head) { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  #view-library .lib-set-head .lib-cover { width: 132px; }
  #view-library .lib-set-title { font-size: 24px; }
  #view-library .lib-reader-title { font-size: 25px; }
  #view-library .lib-row { grid-template-columns: 32px minmax(0, 1fr) 16px; }
  #view-library .lib-row-meta { grid-column: 2; grid-row: 2; flex-wrap: wrap; white-space: normal; }
  #view-library .lib-row-go { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 600px) {
  #view-library .lib-tab { padding: 0 10px; font-size: 14px; }
  #view-library .lib-tab .ic { display: none; }
  #view-library .lib-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; padding-inline: 8px; }
  #view-library .lib-cards { grid-template-columns: 1fr; }
  #view-library .lib-continue { grid-template-columns: 56px minmax(0, 1fr); }
  #view-library .lib-continue-go { grid-column: 1 / -1; width: 100% !important; }
  #view-library .lib-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-library .lib-line { grid-template-columns: 1fr; gap: 0; }
  #view-library .lib-speaker { padding-top: 0; }
  #view-library .lib-q-opts { grid-template-columns: 1fr; }
  #view-library .lib-actions > :is(.primary-action, .secondary-action) { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  #view-library .lib-book .lib-cover, #view-library .lib-progress > span { transition: none; }
}


/* 5.10.3-bbc-library-v1 · 已确认阅读页 */
/* 阅读馆阅读页 · 已确认设计 v3。颜色全部用站内语义变量，7 套皮肤和深色模式自动跟随。
   布局：阅读页宽度够（≥ 900px）且是「辅助阅读」时，左文右栏（词卡 + 本文词汇 + 练习）；
   否则单栏，词汇和练习排在正文后面。手机上正文贴边、顶部细进度条、点词先出小气泡、详情从底部弹出。 */

/* ── 0. 变量 ─────────────────────────────────────────────────────── */
#view-library .lib {
  --lib-serif: var(--ds-reading-face, "Iowan Old Style", "Charter", "Georgia", "Times New Roman", serif);
  --lib-sticky-top: inherit;  /* render 按宿主顶栏实测设置 */
  --lib-mini-h: 52px;
  --lib-flash: color-mix(in srgb, var(--lib-brass) 22%, transparent);
}

/* ── 1. 纸页与左右分栏 ───────────────────────────────────────────── */
#view-library .lib-reader { container: reader / inline-size; max-width: 1180px; gap: 0; grid-template-columns: minmax(0, 1fr); }
#view-library :is(.lib-reader, .lib-page, .lib-reader-head, .lib-meta) > * { min-width: 0; }
#view-library .lib-page {
  position: relative; display: grid; gap: 18px; padding: 24px 36px 32px;
  border: 1px solid var(--lib-edge); border-radius: var(--ds-r-hero, 20px);
  background: var(--lib-card); box-shadow: var(--shadow-sm);
}
#view-library .lib-layout { display: grid; gap: 28px; align-items: start; }
#view-library .lib-main { position: relative; display: grid; gap: 16px; min-width: 0; }
#view-library .lib-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#view-library .lib-side-tabs { display: none; }
#view-library .lib-side .lib-panel-ex { order: 1; }
#view-library .lib-side .lib-panel-words { order: 2; }
#view-library .lib-panel-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 17px; font-weight: 650; color: var(--ink); }
#view-library .lib-wordcard { display: none; }

@container reader (min-width: 900px) {
  #view-library .lib-reader.mode-assist .lib-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
  #view-library .lib-reader.mode-assist .lib-side {
    position: sticky; top: calc(var(--lib-sticky-top) + var(--lib-mini-h) + 12px);
    max-height: calc(100vh - var(--lib-sticky-top) - var(--lib-mini-h) - 28px); overflow: auto;
    padding-left: 24px; border-left: 1px solid var(--hairline-soft); overscroll-behavior: contain;
  }
  #view-library .lib-reader.mode-assist .lib-side-tabs { display: flex; position: sticky; top: 0; z-index: 2; padding-bottom: 8px; background: var(--lib-card); }
  #view-library .lib-reader.mode-assist .lib-side .lib-panel { display: none; }
  #view-library .lib-reader.mode-assist .lib-side[data-tab="words"] .lib-panel-words,
  #view-library .lib-reader.mode-assist .lib-side[data-tab="ex"] .lib-panel-ex { display: block; }
  #view-library .lib-reader.mode-assist .lib-side .lib-panel-title { display: none; }
  #view-library .lib-reader.mode-assist .lib-wordcard.is-on { display: grid; }
  #view-library .lib-reader.mode-assist .lib-gloss-list { grid-template-columns: 1fr; }
}
@container reader (min-width: 1100px) {
  #view-library .lib-reader.mode-assist .lib-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}
/* 纯净阅读：正文居中一栏 */
#view-library .lib-reader.mode-clean .lib-main { max-width: calc(var(--lib-font) * 36); margin-inline: auto; width: 100%; }
#view-library .lib-reader.mode-clean .lib-text { margin-inline: auto; }
#view-library .lib-reader.mode-clean :is(.lib-reader-head, .lib-side, .lib-reader-foot) { width: 100%; max-width: calc(var(--lib-font) * 36); margin-inline: auto; }

/* ── 2. 顶部读物条：常驻，一条里放「选读物」、阅读方式（宽屏）、Aa、收藏和进度 ── */
#view-library .lib-rbar { position: sticky; top: var(--lib-sticky-top); z-index: 30; margin-bottom: 10px; }
#view-library .lib-rbar-in {
  position: relative; display: flex; align-items: center; gap: 8px; height: var(--lib-mini-h); padding: 0 8px 0 6px;
  border: 1px solid var(--hairline-soft); border-radius: 14px; background: color-mix(in srgb, var(--lib-card) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-xs);
}
#view-library .lib-pick-btn {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 42px; padding: 0 10px 0 6px;
  border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left;
}
#view-library .lib-pick-btn:hover { background: var(--surface-2); }
#view-library .lib-pick-btn > .ic { flex: none; width: 16px; height: 16px; color: var(--muted); }
#view-library .lib-pick-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--lib-brass-soft); color: var(--lib-brass-ink); }
#view-library .lib-pick-ic .ic { width: 17px; height: 17px; }
#view-library .lib-pick-txt { display: grid; min-width: 0; line-height: 1.25; }
#view-library .lib-pick-a { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
#view-library .lib-pick-a b { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
#view-library .lib-pick-a span { flex: none; color: var(--muted); font-size: 12px; }
#view-library .lib-pick-a .lib-pos-s { display: none; }
#view-library .lib-pick-b { display: none; overflow: hidden; font-family: var(--lib-display); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
#view-library .lib-rbar.is-scrolled .lib-pick-a { display: none; }
#view-library .lib-rbar.is-scrolled .lib-pick-b { display: block; }
#view-library .lib-rbar-tools { display: flex; align-items: center; gap: 4px; flex: none; }
#view-library .lib-rbar .lib-icon-btn { min-width: 42px; height: 42px; }
#view-library .lib-rbar .lib-aa-btn { font-family: var(--lib-display); font-size: 17px; font-weight: 700; color: var(--ink-2); }
#view-library .lib-rbar .lib-aa-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-ink); }
#view-library .lib-rbar .lib-fav.is-on { color: var(--lib-brass); }
#view-library .lib-rbar .lib-mode { display: none; margin-right: 4px; }
#view-library .lib-rbar-prog { position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--hairline-soft); overflow: hidden; }
#view-library .lib-rbar-prog span { display: block; height: 100%; width: 0; background: var(--academy-action, var(--accent)); transition: width .12s linear; }
#view-library .lib-seg { display: inline-flex; padding: 3px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface-2); }
#view-library .lib-seg button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
#view-library .lib-seg button[aria-pressed="true"] { background: var(--academy-action, var(--accent)); color: var(--on-action, #fff); box-shadow: var(--shadow-xs); }
#view-library .lib-aa {
  position: absolute; z-index: 25; top: calc(100% + 8px); right: 0; display: grid; gap: 14px; width: min(320px, calc(100vw - 32px));
  padding: 14px 16px 16px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg);
}
#view-library .lib-aa-row { display: grid; gap: 8px; }
#view-library .lib-aa-label { color: var(--muted); font-size: 12px; font-weight: 650; }
#view-library .lib-aa .lib-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
#view-library .lib-aa .lib-seg button { min-height: 38px; padding: 0 6px; font-size: 14px; }
#view-library .lib-aa-tip { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
#view-library .lib-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 15px; font-weight: 600; }
#view-library .lib-switch i { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--hairline); transition: background .15s; }
#view-library .lib-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 25%); transition: transform .15s; }
#view-library .lib-switch[aria-checked="true"] i { background: var(--academy-action, var(--accent)); }
#view-library .lib-switch[aria-checked="true"] i::after { transform: translateX(18px); }
@container reader (min-width: 900px) {
  #view-library .lib-rbar .lib-mode { display: inline-flex; }
  #view-library .lib-aa-mode, #view-library .lib-aa-tip { display: none; }
}

/* ── 3. 页头：标题 + 一行信息 + 一行读前提示，尽快进正文 ───────── */
#view-library .lib-reader-head { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline-soft); }
#view-library .lib-reader-title { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.18; text-wrap: balance; }
#view-library .lib-meta { display: grid; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
#view-library .lib-meta-zh { color: var(--ink-2); font-size: 16px; font-weight: 500; }
#view-library .lib-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
#view-library .lib-meta-topic::before { content: "·"; margin-right: 10px; color: var(--hairline); }
#view-library .lib-status-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); font-size: 12px; font-weight: 650; }
#view-library .lib-prompt-mini { border-radius: var(--lib-rc); background: var(--lib-brass-soft); color: var(--ink); font-size: 14px; }
#view-library .lib-prompt-mini summary { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; list-style: none; cursor: pointer; }
#view-library .lib-prompt-mini summary::-webkit-details-marker { display: none; }
#view-library .lib-prompt-mini summary b { flex: none; color: var(--lib-brass-ink); font-size: 13px; }
#view-library .lib-prompt-mini summary span { min-width: 0; overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
#view-library .lib-prompt-mini summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px 3px auto; border-right: 2px solid var(--lib-brass-ink); border-bottom: 2px solid var(--lib-brass-ink); transform: rotate(45deg); transition: transform .15s; }
#view-library .lib-prompt-mini[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
#view-library .lib-prompt-mini[open] summary span { display: none; }
#view-library .lib-prompt-mini p { margin: 0; padding: 0 12px 10px; line-height: 1.6; }
#view-library .lib-reader.mode-clean .lib-prompt-mini { display: none; }
/* 正文末尾的来源（BBC 等每篇都在这里注明） */
#view-library .lib-src { display: flex; align-items: flex-start; gap: 6px; max-width: 34em; margin: 4px 0 0; padding-top: 12px; border-top: 1px dashed var(--hairline); color: var(--muted); font-size: 13px; line-height: 1.55; }
#view-library .lib-src .ic { width: 14px; height: 14px; margin-top: 3px; flex: none; }
#view-library .lib-src a { color: var(--accent-ink); }
/* 读完：下一篇 */
#view-library .lib-reader-foot { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hairline-soft); }
#view-library .lib-next {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; width: 100%; padding: 14px 16px;
  border: 1px solid var(--accent-edge); border-radius: var(--lib-r); background: var(--accent-soft-2); color: var(--ink); text-align: left;
}
#view-library .lib-next > .ic { grid-column: 2; grid-row: 1 / span 3; width: 20px; height: 20px; color: var(--accent-ink); }
#view-library .lib-next-k { color: var(--accent-ink); font-size: 12px; font-weight: 700; }
#view-library .lib-next-t { font-family: var(--lib-display); font-size: 18px; font-weight: 700; line-height: 1.3; }
#view-library .lib-next-z { color: var(--muted); font-size: 13px; }

/* ── 4. 正文排版 ─────────────────────────────────────────────────── */
#view-library .lib-text { max-width: 34em; font-family: var(--lib-serif); font-size: var(--lib-font); line-height: 1.78; color: var(--ink); text-wrap: pretty; }
#view-library .lib-text > .lib-b { margin: 0 0 .95em; scroll-margin-top: calc(var(--lib-sticky-top) + var(--lib-mini-h) + 24px); border-radius: 8px; transition: background-color .6s; }
#view-library .lib-text > .lib-b > p { margin: 0; }
#view-library .lib-text > .lib-b.is-flash { background: var(--lib-flash); box-shadow: 0 0 0 6px var(--lib-flash); transition: none; }
#view-library .lib-text.is-numbered { padding-left: 2.2em; }
#view-library .lib-b-p { position: relative; }
#view-library .lib-pno { display: none; }
#view-library .lib-text.is-numbered .lib-pno {
  display: block; position: absolute; left: -2.2em; top: .55em; width: 1.6em;
  font-family: var(--ds-sans, sans-serif); font-size: 12px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums;
  text-align: right; color: var(--muted); opacity: .8; user-select: none;
}
#view-library .lib-b-p.is-drop > p:not(.lib-zh)::first-letter { float: left; margin: .08em .1em 0 0; font-family: var(--lib-display); font-size: 3.35em; font-weight: 700; line-height: .8; color: var(--lib-brass-ink); }
#view-library .lib-text > .lib-b-h { margin: 1.7em 0 .7em; }
#view-library .lib-h { display: flex; align-items: baseline; gap: .6em; margin: 0; font-family: var(--lib-display); font-size: 1.1em; font-weight: 700; line-height: 1.35; color: var(--ink); }
#view-library .lib-h::before { content: ""; flex: none; width: 1.1em; height: 2px; border-radius: 2px; background: var(--lib-brass); transform: translateY(-.32em); }
#view-library .lib-b-h .lib-zh { padding-left: 1.7em; border-left: 0; }
#view-library .lib-text > .lib-line { display: grid; grid-template-columns: minmax(64px, 8.5ch) minmax(0, 1fr); gap: 14px; margin-bottom: .6em; }
#view-library .lib-line[data-spk="0"] { --spk: var(--accent-ink); }
#view-library .lib-line[data-spk="1"] { --spk: var(--green-ink); }
#view-library .lib-line[data-spk="2"] { --spk: var(--lib-brass-ink); }
#view-library .lib-line[data-spk="3"] { --spk: var(--red-ink); }
#view-library .lib-line .lib-speaker { position: relative; padding-top: .3em; padding-left: 12px; color: var(--spk, var(--accent-ink)); font-family: var(--ds-sans, inherit); font-size: max(13px, calc(var(--lib-font) - 4px)); font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
#view-library .lib-line .lib-speaker::before { content: ""; position: absolute; left: 0; top: calc(.3em + .5lh - 3px); width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
#view-library .lib-line.is-same .lib-speaker { color: transparent; }
#view-library .lib-line.is-same .lib-speaker::before { display: none; }
#view-library .lib-dir { color: var(--muted); font-style: italic; }
#view-library .lib-text > .lib-b-aside { margin: .2em 0 .9em; }
#view-library .lib-text.is-dialogue .lib-b-aside { padding-left: calc(max(64px, 8.5ch) + 14px); }
#view-library .lib-aside { margin: 0; color: var(--muted); font-style: italic; font-size: .92em; line-height: 1.6; }
#view-library .lib-text > .lib-b-quote { position: relative; margin: 1.2em 0; padding: .85em 1.2em .85em 2.6em; border: 1px solid var(--hairline-soft); border-radius: var(--lib-rc); background: var(--surface-2); }
#view-library .lib-b-quote::before { content: "\201C"; position: absolute; left: .32em; top: .08em; font-family: var(--lib-display); font-size: 2.6em; line-height: 1; color: var(--lib-brass); opacity: .75; }
#view-library .lib-quote { margin: 0; font-style: italic; }
#view-library .lib-b-quote .lib-zh, #view-library .lib-b-poem .lib-zh { border-left: 0; padding-left: 0; }
#view-library .lib-text > .lib-b-poem { width: fit-content; max-width: 100%; margin: 1.4em auto; padding: .2em 0 .2em 1.2em; border-left: 2px solid color-mix(in srgb, var(--lib-brass) 70%, transparent); }
#view-library .lib-poem { margin: 0; font-style: italic; line-height: 1.85; }
#view-library .lib-verse { display: block; }
#view-library .lib-list { margin: 0; padding-left: 1.3em; }
#view-library .lib-list li { margin: .15em 0; padding-left: .2em; }
#view-library .lib-list li::marker { content: "\2726  "; color: var(--lib-brass); font-size: .7em; }
#view-library .lib-text > .lib-b-img { margin: 1.4em 0; }
#view-library .lib-fig { margin: 0; }
#view-library .lib-fig img { display: block; width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--lib-r); background: var(--surface-2); }
#view-library .lib-fig figcaption { margin-top: .6em; font-family: var(--ds-sans, sans-serif); font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
#view-library .lib-break { display: flex; justify-content: center; gap: 1.1em; margin: 1.6em 0; color: var(--lib-brass); font-size: .72em; line-height: 1; }
#view-library .lib-break::before, #view-library .lib-break::after, #view-library .lib-break span::before { content: "\2726"; }
#view-library .lib-zh { display: none; margin: .35em 0 0; padding-left: .75em; border-left: 2px solid var(--hairline); font-family: var(--ds-sans, sans-serif); font-size: max(14px, calc(var(--lib-font) - 3px)); font-style: normal; font-weight: 400; line-height: 1.7; color: var(--ink-2); white-space: pre-line; }
#view-library .lib-reader.show-zh .lib-zh { display: block; }
#view-library .lib-reader.show-zh .lib-text > .lib-b { margin-bottom: 1.25em; }
#view-library .lib-reader.show-zh .lib-text > .lib-line { margin-bottom: .85em; }

/* ── 5. 本文生词与短语：辅助阅读下点线标出；点中的高亮 ─────────── */
#view-library .lib-w { cursor: pointer; border-radius: 3px; }
#view-library .lib-reader.mode-assist .lib-w.is-gloss,
#view-library .lib-reader.mode-assist .lib-phr {
  text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--lib-brass) 85%, transparent);
  text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-skip-ink: none;
}
#view-library .lib-phr .lib-w { text-decoration: inherit; }
#view-library .lib-w.is-saved { text-decoration: underline solid; text-decoration-color: color-mix(in srgb, var(--lib-brass) 70%, transparent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
#view-library :is(.lib-w, .lib-phr).is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 4px; }
#view-library .lib-reader.mode-clean .lib-text { padding-left: 0; }
#view-library .lib-reader.mode-clean .lib-pno, #view-library .lib-reader.mode-clean .lib-prompt { display: none; }

/* ── 6. 点词：右栏词卡（电脑）/ 小气泡 + 底部弹层（窄屏） ────────── */
#view-library .lib-wordcard { gap: 8px; padding: 14px 16px 16px; border: 1px solid var(--accent-edge); border-radius: var(--lib-r); background: var(--accent-soft-2); }
:is(#view-library, .lib-sheet) .lib-wc-head { display: flex; align-items: center; gap: 8px; }
:is(#view-library, .lib-sheet) .lib-wc-word { font-family: var(--lib-display, Georgia, serif); font-size: 24px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
:is(#view-library, .lib-sheet) .lib-wc-head .lib-icon-btn { display: inline-grid; place-items: center; min-width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--muted); }
:is(#view-library, .lib-sheet) .lib-wc-head .lib-icon-btn .ic { width: 18px; height: 18px; }
:is(#view-library, .lib-sheet) .lib-wc-head [data-say] { margin-left: auto; }
:is(#view-library, .lib-sheet) .lib-wc-zh { margin: 0; color: var(--ink); font-size: 17px; font-weight: 650; line-height: 1.45; }
:is(#view-library, .lib-sheet) .lib-wc-ctx { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--ds-brass-soft, #f5eedf); color: var(--ink); font-size: 14px; line-height: 1.55; }
:is(#view-library, .lib-sheet) .lib-wc-ctx b { margin-right: 6px; color: var(--ds-brass-ink, #7d5d1f); font-weight: 700; }
:is(#view-library, .lib-sheet) .lib-wc-ex { margin: 0; color: var(--ink-2); font-family: var(--lib-serif, Georgia, serif); font-size: 15px; line-height: 1.6; }
:is(#view-library, .lib-sheet) .lib-wc-ex mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: inherit; font-weight: 700; }
:is(#view-library, .lib-sheet) .lib-wc-def { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
:is(#view-library, .lib-sheet) .lib-wc-save { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto !important; min-height: 42px; margin-top: 4px; justify-self: start; }
:is(#view-library, .lib-sheet) .lib-wc-save .ic { width: 16px; height: 16px; }
#view-library .lib-bubble {
  position: absolute; z-index: 26; display: flex; align-items: center; gap: 10px; max-width: min(300px, calc(100% - 8px)); padding: 8px 8px 8px 14px;
  border: 1px solid var(--accent-edge); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); font-size: 15px; line-height: 1.4;
}
#view-library .lib-bubble::after { content: ""; position: absolute; left: var(--ax, 50%); width: 10px; height: 10px; background: var(--surface); border: 1px solid var(--accent-edge); transform: translateX(-50%) rotate(45deg); }
#view-library .lib-bubble.is-up::after { bottom: -6px; border-top: 0; border-left: 0; }
#view-library .lib-bubble.is-down::after { top: -6px; border-bottom: 0; border-right: 0; }
#view-library .lib-bubble-zh { min-width: 0; color: var(--ink); font-weight: 650; }
#view-library .lib-bubble-more { display: inline-flex; align-items: center; flex: none; min-height: 36px; padding: 0 6px 0 10px; border: 0; border-left: 1px solid var(--hairline-soft); background: none; color: var(--accent-ink); font-size: 13px; font-weight: 650; }
#view-library .lib-bubble-more .ic { width: 16px; height: 16px; }
.lib-sheet-mask { position: fixed; inset: 0; z-index: 139; background: rgb(10 16 30 / 28%); }
.lib-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; display: grid; gap: 8px; max-width: 560px; margin: 0 auto;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); font-family: var(--ds-sans, sans-serif);
  animation: lib-sheet-in .2s ease-out;
}
.lib-sheet::before { content: ""; justify-self: center; width: 40px; height: 4px; margin-bottom: 4px; border-radius: 4px; background: var(--hairline); }
.lib-sheet .lib-muted { color: var(--muted); font-size: 13px; }
@keyframes lib-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── 7. 右栏 / 正文后的「本文词汇」「练习」 ───────────────────── */
#view-library .lib-side-tabs { gap: 4px; }
#view-library .lib-side-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--muted); font-size: 14px; font-weight: 650; }
#view-library .lib-side-tabs button[aria-selected="true"] { border-color: var(--hairline); background: var(--surface-2); color: var(--ink); }
#view-library .lib-side-tabs .lib-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--hairline-soft); font-size: 12px; line-height: 20px; }
#view-library .lib-gloss-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
#view-library .lib-gloss-list button {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 10px; width: 100%; min-height: 44px; padding: 8px 10px;
  border: 0; border-bottom: 1px solid var(--hairline-soft); border-radius: 8px 8px 0 0; background: none; color: inherit; text-align: left;
}
#view-library .lib-gloss-list button:hover, #view-library .lib-gloss-list button.is-active { background: var(--accent-soft-2); }
#view-library .lib-gloss-list .lib-gl-term { font-family: var(--lib-serif); font-size: 16px; font-weight: 700; color: var(--ink); }
#view-library .lib-gloss-list .lib-gl-zh { color: var(--ink-2); font-size: 14px; overflow-wrap: anywhere; }
#view-library .lib-gloss-list .lib-gl-pos { grid-column: 1; color: var(--muted); font-size: 12px; }

/* ── 8. 练习 ─────────────────────────────────────────────────────── */
#view-library .lib-ex { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--lib-edge); border-radius: var(--lib-r); background: var(--lib-card); }
#view-library .lib-ex + .lib-ex { margin-top: 14px; }
#view-library .lib-ex-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 650; }
#view-library .lib-ex-head .ic { color: var(--lib-brass); }
#view-library .lib-ex-status { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 500; }
#view-library .lib-ex-note { margin: -4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
#view-library .lib-ex-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#view-library .lib-ex-actions > button { width: auto !important; min-height: 44px; }
#view-library .lib-ex .lib-q { display: grid; gap: 8px; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--hairline-soft); }
#view-library .lib-ex .lib-q:first-of-type { padding-top: 0; border-top: 0; }
#view-library .lib-ex .lib-q legend { display: flex; gap: 8px; padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 600; line-height: 1.5; }
#view-library .lib-q-opts { display: grid; grid-template-columns: 1fr; gap: 8px; }
#view-library .lib-ex { container: ex / inline-size; }
#view-library .lib-q-opts.is-short { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
@container ex (max-width: 460px) {
  #view-library .lib-q-opts.is-short[style*="--n:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#view-library .lib-q-opts.is-short .lib-opt { justify-content: center; padding: 0 8px; white-space: nowrap; }
#view-library .lib-q-opts.is-short .lib-opt-key { display: none; } /* True / False / Not given 这类短选项不用字母 */
#view-library .lib-opt { min-height: 46px; }
#view-library .lib-opt.is-dim { opacity: .55; }
#view-library .lib-blank { display: inline-block; min-width: 4.5em; margin: 0 2px; border-bottom: 2px solid var(--muted); line-height: 1.2; text-align: center; }
#view-library .lib-blank.is-filled { border-color: var(--green-ink); color: var(--green-ink); font-weight: 700; }
#view-library .lib-goto { display: inline-flex; align-items: center; min-height: 28px; margin-left: 4px; padding: 0 10px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font-size: 12px; font-weight: 650; white-space: nowrap; }
#view-library .lib-goto-sm { position: absolute; top: 7px; right: 8px; margin: 0; color: var(--accent-ink); border-color: var(--accent-edge); background: var(--surface); }
#view-library .lib-mrow-btn { padding-right: 64px; }
/* 段落配对 */
#view-library .lib-mrows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#view-library .lib-mrow { position: relative; display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--lib-rc); background: var(--surface); }
#view-library .lib-mrow-btn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
#view-library .lib-mrow-no { color: var(--lib-brass-ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
#view-library .lib-mrow-snip { overflow: hidden; color: var(--muted); font-family: var(--lib-serif); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
#view-library .lib-mrow-pick { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-self: start; min-height: 36px; padding: 0 12px; border: 1px dashed var(--accent-edge); border-radius: 999px; color: var(--accent-ink); font-size: 14px; font-weight: 600; }
#view-library .lib-mrow-pick.is-set { border-style: solid; background: var(--accent-soft); }
#view-library .lib-mrow.is-open { border-color: var(--accent-edge); box-shadow: 0 0 0 3px var(--accent-soft); }
#view-library .lib-mrow.is-right { border-color: color-mix(in srgb, var(--green-ink) 50%, transparent); background: var(--green-soft); }
#view-library .lib-mrow.is-wrong { border-color: color-mix(in srgb, var(--red-ink) 45%, transparent); background: var(--red-soft); }
#view-library .lib-mrow-ans { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--green-ink); font-size: 14px; font-weight: 650; }
#view-library .lib-mrow-ans .ic { width: 16px; height: 16px; }
#view-library .lib-chips, #view-library .lib-bank, #view-library .lib-rate { display: flex; flex-wrap: wrap; gap: 8px; }
#view-library .lib-chip-opt {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; text-align: left;
}
#view-library .lib-chip-opt b { color: var(--lib-brass-ink); }
#view-library .lib-chip-opt.is-on { border-color: var(--academy-action, var(--accent)); background: var(--academy-action, var(--accent)); color: var(--on-action, #fff); }
#view-library .lib-chip-opt.is-on b { color: inherit; }
#view-library .lib-chip-opt.is-used { opacity: .5; }
#view-library .lib-chip-opt:disabled.is-used { text-decoration: line-through; }
/* 选词填空 */
#view-library .lib-bank { padding: 10px; border-radius: var(--lib-rc); background: var(--surface-2); }
#view-library .lib-cloze { margin: 0; font-family: var(--lib-serif); font-size: 17px; line-height: 2.15; }
#view-library .lib-gap {
  display: inline-flex; align-items: center; gap: 6px; min-width: 5.5em; min-height: 34px; margin: 0 2px; padding: 0 10px; vertical-align: middle;
  border: 0; border-bottom: 2px solid var(--muted); border-radius: 6px 6px 0 0; background: var(--surface-2); color: var(--ink);
  font-family: var(--ds-sans, sans-serif); font-size: 15px; font-weight: 650; line-height: 1.2;
}
#view-library .lib-gap-no { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 50%; background: var(--hairline-soft); color: var(--muted); font-size: 11px; }
#view-library .lib-gap.is-active { border-bottom-color: var(--academy-action, var(--accent)); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-edge); }
#view-library .lib-gap.is-set { color: var(--accent-ink); }
#view-library .lib-gap.is-right { border-bottom-color: var(--green-ink); background: var(--green-soft); color: var(--green-ink); }
#view-library .lib-gap.is-wrong { border-bottom-color: var(--red-ink); background: var(--red-soft); color: var(--red-ink); text-decoration: line-through; }
#view-library .lib-gap-ans { margin: 0 4px 0 2px; color: var(--green-ink); font-family: var(--ds-sans, sans-serif); font-size: 15px; font-weight: 700; }
/* 思考题 */
#view-library .lib-oq { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--hairline-soft); }
#view-library .lib-oq:first-of-type { padding-top: 0; border-top: 0; }
#view-library .lib-oq-q { display: flex; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
#view-library .lib-oq-show { display: inline-flex; align-items: center; gap: 6px; justify-self: start; width: auto !important; min-height: 44px; }
#view-library .lib-oq-show .ic { width: 16px; height: 16px; }
#view-library .lib-oq-a { display: grid; gap: 8px; padding: 10px 12px; border-left: 3px solid var(--green-ink); border-radius: 0 var(--lib-rc) var(--lib-rc) 0; background: var(--green-soft); }
#view-library .lib-oq-a p { margin: 0; font-size: 15px; line-height: 1.6; }
#view-library .lib-oq-label { display: flex; align-items: center; gap: 6px; color: var(--green-ink); font-size: 13px !important; font-weight: 700; }
#view-library .lib-oq-label .lib-goto { margin-left: auto; }

/* ── 9. 「回到题目」浮钮 ───────────────────────────────────────── */
.lib-jumpback {
  position: fixed; left: 50%; bottom: calc(var(--cv-mobile-tabbar-clearance, 24px) + 8px); z-index: 120; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--academy-action, #203d86); color: #fff;
  box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 650; transform: translateX(-50%);
}
.lib-jumpback .ic { width: 16px; height: 16px; }

/* ── 10. 书封新色 ─────────────────────────────────────────────── */
#view-library .lib-cover[data-tone="ink"] { --cv-bg: #e3e1ef; --cv-spine: #221e57; --cv-ink: #1b1840; }
#view-library .lib-cover[data-tone="plum"] { --cv-bg: #efe2ec; --cv-spine: #7b3f6e; --cv-ink: #351a30; }
html.cv-dark #view-library .lib-cover[data-tone="ink"] { --cv-bg: #262447; --cv-spine: #d6b46e; }
html.cv-dark #view-library .lib-cover[data-tone="plum"] { --cv-bg: #3a2636; --cv-spine: #dd9cc9; }

/* ── 选读面板：手机从底部弹出（占 88% 高），电脑从左侧滑出（420px 宽） ── */
html.lib-pk-lock, html.lib-pk-lock body { overflow: hidden; }
#view-library .lib-pk-mask { position: fixed; inset: 0; z-index: 150; background: rgb(10 16 30 / 34%); }
#view-library .lib-pk {
  position: fixed; z-index: 151; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; height: 88vh; height: 88dvh;
  border-radius: 18px 18px 0 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
  animation: lib-sheet-in .22s ease-out;
}
#view-library .lib-pk.is-steady { animation: none; }
#view-library .lib-pk::before { content: ""; align-self: center; width: 40px; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--hairline); }
@media (min-width: 768px) {
  #view-library .lib-pk { top: 0; right: auto; width: 420px; height: auto; border-radius: 0 18px 18px 0; animation-name: lib-drawer-in; }
  #view-library .lib-pk::before { display: none; }
}
@keyframes lib-drawer-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
#view-library .lib-pk-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 4px 16px; }
#view-library .lib-pk-head h2 { flex: 1; margin: 0; font-size: 18px; font-weight: 700; }
#view-library .lib-pk-head [data-pk-back] + h2 { margin-left: -4px; }
#view-library .lib-pk-tools { display: grid; gap: 10px; padding: 4px 16px 10px; border-bottom: 1px solid var(--hairline-soft); }
#view-library .lib-pk-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-2); color: var(--muted); }
#view-library .lib-pk-search .ic { width: 16px; height: 16px; flex: none; }
#view-library .lib-pk-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; }
#view-library .lib-pk-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
#view-library .lib-pk-tabs button { min-height: 36px; font-size: 14px; }
#view-library .lib-pk-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 4px 8px calc(16px + env(safe-area-inset-bottom, 0px)); }
#view-library .lib-pk-h { display: flex; align-items: baseline; gap: 8px; margin: 14px 8px 6px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
#view-library .lib-pk-h .lib-muted { font-weight: 500; }
#view-library .lib-pk-h.is-sticky { position: sticky; top: -4px; z-index: 1; margin: 10px 0 4px; padding: 8px; background: var(--surface); }
#view-library .lib-pk-rows, #view-library .lib-pk-sets { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
#view-library :is(.lib-pk-row, .lib-pk-setrow) {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 10px;
  border: 0; border-radius: 12px; background: none; color: inherit; text-align: left;
}
#view-library :is(.lib-pk-row, .lib-pk-setrow):hover { background: var(--surface-2); }
#view-library .lib-pk-row.is-here { background: var(--accent-soft-2); box-shadow: inset 3px 0 0 var(--academy-action, var(--accent)); }
#view-library .lib-pk-main { display: grid; gap: 2px; min-width: 0; }
#view-library .lib-pk-t { overflow: hidden; font-family: var(--lib-serif); font-size: 16px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
#view-library .lib-pk-setrow .lib-pk-t { font-family: inherit; font-size: 15px; }
#view-library .lib-pk-z { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
#view-library .lib-pk-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; }
#view-library .lib-pk-setrow .lib-pk-meta { flex-direction: row; align-items: center; }
#view-library .lib-pk-meta .ic { width: 16px; height: 16px; }
#view-library .lib-pk-here { color: var(--accent-ink); font-weight: 700; }
#view-library .lib-pk-st { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--hairline); border-radius: 50%; color: #fff; }
#view-library .lib-pk-st.is-read { border-color: var(--green-ink); background: var(--green-ink); }
#view-library .lib-pk-st.is-read .ic { width: 13px; height: 13px; }
/* 读到一半：SVG 进度环，中间透明（原来用白色圆片盖住渐变，在暖色皮肤的面板底色上会露出白边，看起来像碎了） */
#view-library .lib-pk-st.is-reading { border: 0; background: none; }
#view-library .lib-ring { width: 22px; height: 22px; transform: rotate(-90deg); }
#view-library .lib-ring circle { fill: none; stroke: var(--hairline); stroke-width: 2.6; }
#view-library .lib-ring .lib-ring-on { stroke: var(--academy-action, var(--accent)); stroke-linecap: round; }
#view-library .lib-pk-lv { display: flex; gap: 6px; overflow-x: auto; margin: 8px 0 4px; padding: 2px 8px 6px; scrollbar-width: none; }
#view-library .lib-pk-lv .lib-chip-opt { flex: none; min-height: 34px; padding: 0 12px; font-size: 13px; }
#view-library .lib-pk-set { display: flex; align-items: center; gap: 12px; margin: 8px 8px 4px; }
#view-library .lib-pk-set-t { margin: 0 0 2px; font-size: 17px; font-weight: 700; }
#view-library .lib-pk-set .lib-muted { margin: 0; }
#view-library .lib-pk-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 8px; }
#view-library .lib-pk-topic { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; min-height: 60px; padding: 10px 12px; border: 1px solid var(--hairline-soft); border-radius: 12px; background: var(--surface); color: inherit; text-align: left; font-size: 14px; font-weight: 650; }
#view-library .lib-pk-topic .ic { grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--lib-brass); }
#view-library .lib-pk-topic .lib-muted { font-size: 12px; font-weight: 500; }
#view-library .lib-pk-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 44px; margin-top: 8px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--accent-ink); font-size: 14px; font-weight: 650; }
#view-library .lib-pk-more .ic { width: 16px; height: 16px; }
#view-library .lib-pk-empty { margin: 4px 10px 8px; color: var(--muted); font-size: 13px; }
/* 小书封：只留书脊和图标 */
#view-library .lib-cover.is-mini { flex: none; width: 40px; padding: 0; border-radius: 3px 7px 7px 3px; }
#view-library .lib-cover.is-mini > :not(.lib-cover-spine, .lib-cover-ic) { display: none; }
#view-library .lib-cover.is-mini .lib-cover-spine { width: 5px; }
#view-library .lib-cover.is-mini .lib-cover-ic { top: 50%; left: 56%; width: 26px; height: 26px; transform: translate(-50%, -50%); }
#view-library .lib-cover.is-mini .lib-cover-ic .ic { width: 15px; height: 15px; }

/* 一句话提示（回到上次位置 / 为什么推荐这篇） */
.lib-toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--cv-mobile-tabbar-clearance, 24px) + 8px); z-index: 125; display: flex; align-items: center; gap: 12px; width: fit-content; max-width: min(520px, calc(100vw - 32px)); box-sizing: border-box; margin: 0 auto;
  padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--ink, #16233f); color: var(--surface, #fff); box-shadow: var(--shadow-lg);
  font-family: var(--ds-sans, sans-serif); font-size: 14px; animation: lib-sheet-in .2s ease-out;
}
.lib-toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-toast button { flex: none; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface, #fff) 18%, transparent); color: inherit; font-size: 13px; font-weight: 700; }

/* 宿主页面：读文章时，手机上收起网站顶栏的页面标题，和朗读、刷卡页做法一致（预览里没有网站顶栏，看不出效果） */
@media (max-width: 767px) {
  html:has(> body[data-view="library"] #view-library .lib-reader) #appShell #dot-original-topbar.topbar { row-gap: 0 !important; }
  html:has(> body[data-view="library"] #view-library .lib-reader) #appShell #dot-original-topbar.topbar .topbar-title { display: none !important; }
}
html:has(> body[data-view="library"] #view-library .lib-reader) #appShell #dot-original-topbar .academy-header-scene { display: none !important; }

/* ── 11. 平板与手机 ───────────────────────────────────────────── */
@media (max-width: 760px) {
  #view-library .lib-page { padding: 20px 20px 24px; }
}
@media (max-width: 600px) {
  /* 手机：读物条和纸页都贴边，正文最宽 */
  #view-library .lib-rbar { margin: 0 -16px 0; }
  #view-library .lib-rbar-in { border-radius: 0; border-width: 0 0 1px; box-shadow: none; padding: 0 4px 0 2px; }
  #view-library .lib-rbar-prog { left: 0; right: 0; }
  #view-library .lib-pick-a .lib-pos-l { display: none; }
  #view-library .lib-pick-a .lib-pos-s { display: inline; }
  #view-library .lib-page { margin-inline: -16px; padding: 14px 16px 24px; border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
  #view-library .lib-reader-head { gap: 6px; padding-bottom: 12px; }
  #view-library .lib-reader-title { font-size: 24px; }
  #view-library .lib-meta-zh { font-size: 15px; }
  #view-library .lib-text.is-numbered { padding-left: 1.5em; }
  #view-library .lib-text.is-numbered .lib-pno { left: -1.6em; width: 1.2em; font-size: 11px; }
  #view-library .lib-text > .lib-line { grid-template-columns: 1fr; gap: 0; margin-bottom: .75em; }
  #view-library .lib-line .lib-speaker { padding-top: 0; }
  #view-library .lib-line .lib-speaker::before { top: calc(.5lh - 3px); }
  #view-library .lib-line.is-same .lib-speaker { display: none; }
  #view-library .lib-text.is-dialogue .lib-b-aside { padding-left: 0; }
  #view-library .lib-text > .lib-b-quote { padding: .8em 1em .8em 2.2em; }
  #view-library .lib-text > .lib-b-poem { margin-inline: 0; }
  #view-library .lib-ex { padding: 14px; }
  #view-library .lib-cloze { font-size: 16px; }
  #view-library .lib-gloss-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #view-library .lib-rbar-prog span, .lib-sheet, #view-library .lib-pk, #view-library .lib-text > .lib-b { transition: none; animation: none; }
}

/* 正式数据与本机阅读记录 */
#view-library .lib-listen { display:grid;gap:8px;margin:0 0 18px;color:var(--muted);font-size:13px; }
#view-library .lib-listen audio { width:100%;max-width:440px; }
#view-library .lib-saved-list { list-style:none;padding:0;display:grid;gap:8px; }
#view-library .lib-saved-list li { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--hairline); }
#view-library .lib-saved-list li span { grid-column:1;font-size:13px;color:var(--muted); }
#view-library .lib-saved-list li button { grid-column:2;grid-row:1 / 3; }
#view-library .lib-actions .primary-action,#view-library .lib-actions .secondary-action { width:auto!important; }

/* ── 2026-11-07 第二轮 ───────────────────────────────────────────── */
/* 推荐理由小标签、「为你推荐」标题和「换一批」 */
#view-library .lib-pk-why { justify-self: start; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: var(--lib-brass-soft, #f5eedf); color: var(--lib-brass-ink, #7d5d1f); font-size: 11.5px; font-weight: 650; line-height: 18px; }
#view-library .lib-pk-rech { align-items: center; justify-content: space-between; }
#view-library .lib-pk-rech > span { display: flex; align-items: baseline; gap: 8px; }
#view-library .lib-pk-swap { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--accent-ink); font-size: 12.5px; font-weight: 650; }
#view-library .lib-pk-swap .ic { width: 14px; height: 14px; }

/* 加载：阅读馆里恢复老鼠跑轮（全站的 calm-ui 把它换成了细进度条，见 cv-anim.css）。
   加载超过 0.25 秒才淡入，读物已缓存、秒开时不闪一下。减少动效时老鼠不跑。 */
#view-library .lib-loading { display: grid; justify-items: center; gap: 14px; padding: 56px 16px; opacity: 0; animation: lib-loading-in .2s ease-out .25s forwards; }
#view-library .lib-loading p { margin: 0; color: var(--muted); font-size: 14px; }
#view-library .lib-loading .cvh { order: 0; font-size: 7px !important; width: 12em !important; height: 12em !important; background: none !important; border-radius: 0 !important; overflow: visible !important; }
#view-library .lib-loading .cvh::after { content: none !important; display: none !important; }
#view-library .lib-loading .cvh > * { display: block !important; }
@keyframes lib-loading-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #view-library .lib-loading { opacity: 1; animation: none; } }
/* 读物条：手机上只显示资源包名最后一段（「BBC · 随身英语 · 文化与社会」→「文化与社会」），书架里仍是全名 */
#view-library .lib-pick-a .lib-set-s { display: none; }
@media (max-width: 600px) {
  #view-library .lib-pick-a .lib-set-l { display: none; }
  #view-library .lib-pick-a .lib-set-s { display: inline; }
}

/* ── 2026-11-07 第二轮 · 书架封面流 ─────────────────────────────── */
/* 9 套书各一种颜色：原有 sky / rose / leaf / brass / ink / plum，新增 teal（健康）/ olive（自然）/ clay（VOA） */
#view-library .lib-cover[data-tone="sky"] { --cv-bg: #dfe8f6; --cv-spine: #3d5fb5; --cv-ink: #16233f; }
#view-library .lib-cover[data-tone="teal"] { --cv-bg: #d9eeec; --cv-spine: #1d7a77; --cv-ink: #0f3433; }
#view-library .lib-cover[data-tone="olive"] { --cv-bg: #e9ebd3; --cv-spine: #6a7a25; --cv-ink: #2b3210; }
#view-library .lib-cover[data-tone="clay"] { --cv-bg: #f6e3d4; --cv-spine: #c0622a; --cv-ink: #43220c; }
html.cv-dark #view-library .lib-cover[data-tone="sky"] { --cv-bg: #24324c; --cv-spine: #8aa3e8; }
html.cv-dark #view-library .lib-cover[data-tone="teal"] { --cv-bg: #1c3836; --cv-spine: #7fd0c9; }
html.cv-dark #view-library .lib-cover[data-tone="olive"] { --cv-bg: #31351d; --cv-spine: #c4cf7f; }
html.cv-dark #view-library .lib-cover[data-tone="clay"] { --cv-bg: #3f2a1d; --cv-spine: #eda06e; }

/* 书封质感：布纹 + 左上角柔光 + 下沿压暗；书脊旁一道压痕；出版方上方一条细线 */
#view-library .lib-cover:not(.is-mini) {
  background:
    radial-gradient(120% 70% at 22% 0%, rgb(255 255 255 / 38%), transparent 58%),
    repeating-linear-gradient(0deg, rgb(0 0 0 / 1.8%) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 4px),
    linear-gradient(168deg, color-mix(in srgb, var(--cv-bg) 74%, #fff) 0%, var(--cv-bg) 58%, color-mix(in srgb, var(--cv-bg) 86%, var(--cv-spine)) 100%);
}
html.cv-dark #view-library .lib-cover:not(.is-mini) {
  background:
    radial-gradient(120% 70% at 22% 0%, rgb(255 255 255 / 10%), transparent 58%),
    repeating-linear-gradient(0deg, rgb(0 0 0 / 8%) 0 1px, transparent 1px 3px),
    linear-gradient(168deg, color-mix(in srgb, var(--cv-bg) 82%, #fff) 0%, var(--cv-bg) 60%, color-mix(in srgb, var(--cv-bg) 80%, #000) 100%);
}
#view-library .lib-cover-spine::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% + 3px); width: 2px; background: linear-gradient(90deg, rgb(0 0 0 / 10%), rgb(255 255 255 / 22%)); }
#view-library .lib-cover-series { font-size: 9.5px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--cv-spine); opacity: .9; }
#view-library .lib-cover-type { padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--cv-spine) 30%, transparent); }

/* 电脑和平板：选读面板改成居中宽面板（原来是左侧 420px 抽屉），列表两列排 */
@media (min-width: 768px) {
  #view-library .lib-pk {
    inset: 0; margin: auto; width: min(1040px, calc(100vw - 48px)); height: min(860px, calc(100dvh - 48px));
    border-radius: 20px; animation-name: lib-modal-in;
  }
  #view-library .lib-pk-head { padding: 14px 14px 6px 24px; }
  #view-library .lib-pk-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 12px 20px; padding: 4px 24px 12px; }
  #view-library .lib-pk-body { padding: 4px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  #view-library .lib-pk-rows { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); column-gap: 12px; }
  #view-library .lib-pk-topics { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  #view-library .lib-pk-more { max-width: 420px; margin-inline: auto; }
}
@keyframes lib-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* 封面流 */
#view-library .cf {
  --cf-w: 140px; --cf-h: 187px; --cf-s: 77px; --cf-pad: 160px; --cf-top: 22px; --cf-floor: 30px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; padding-top: 2px;
}
#view-library .cf > *, #view-library .cf-info > * { min-width: 0; }
#view-library .cf.has-reflect { --cf-floor: calc(var(--cf-h) * .2 + 10px); }
#view-library .cf-stage { position: relative; isolation: isolate; margin: 0 -8px; }
#view-library .cf.is-wide .cf-stage { margin: 0 -16px; }
/* 正中那套书的颜色在背后打一圈淡光 */
#view-library .cf-stage::before {
  content: ""; position: absolute; z-index: -2; left: 50%; top: calc(var(--cf-top) + var(--cf-h) * .5);
  width: calc(var(--cf-w) * 3.2); height: calc(var(--cf-h) * 1.5); transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cf-glow, var(--accent)) 17%, transparent), transparent);
  transition: background .45s ease;
}
html.cv-dark #view-library .cf-stage::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--cf-glow, var(--accent)) 22%, transparent), transparent); }
#view-library .cf-scroller {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: var(--cf-top) 0 var(--cf-floor); cursor: grab; outline: none; contain: inline-size; -webkit-tap-highlight-color: transparent;
}
#view-library .cf-scroller::-webkit-scrollbar { display: none; }
#view-library .cf-scroller.is-dragging { scroll-snap-type: none; cursor: grabbing; }
#view-library .cf-scroller.is-dragging .cf-book { cursor: grabbing; }
#view-library .cf-track { display: flex; width: max-content; padding: 0 var(--cf-pad); }
#view-library .cf-slot { position: relative; flex: none; width: var(--cf-s); height: var(--cf-h); scroll-snap-align: center; pointer-events: none; }
/* 落在台面上的影子：跟着书走，越靠两侧越淡越小 */
#view-library .cf-slot::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -7px; width: calc(var(--cf-w) * .92); height: 16px; margin-left: calc(var(--cf-w) * -.46);
  border-radius: 50%; background: radial-gradient(closest-side, rgb(18 26 46 / 30%), transparent); pointer-events: none;
  transform: translateX(var(--cf-x, 0)) scale(calc(1 - min(var(--cf-a, 0), 1) * .22)); opacity: calc(1 - min(var(--cf-a, 0), 2) * .32);
}
html.cv-dark #view-library .cf-slot::after { background: radial-gradient(closest-side, rgb(0 0 0 / 55%), transparent); }

/* 一本书 = 封面 + 书页侧（右）+ 书脊侧（左），厚度随篇数变（--cf-tk 0~1） */
#view-library .cf-book {
  all: unset; box-sizing: border-box; position: absolute; top: 0; left: 50%; display: block;
  width: var(--cf-w); height: var(--cf-h); margin-left: calc(var(--cf-w) / -2);
  --cf-t: calc(var(--cf-w) * (.05 + .08 * var(--cf-tk, .5)));
  transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform;
  pointer-events: auto; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: pan-x pan-y;
}
#view-library .cf-book > .lib-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; gap: calc(var(--cf-w) * .022);
  padding: calc(var(--cf-w) * .1) calc(var(--cf-w) * .09) calc(var(--cf-w) * .085) calc(var(--cf-w) * .17);
  transform: translateZ(calc(var(--cf-t) / 2)); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 4px 9px 9px 4px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), inset 0 -1px 0 rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 10%), 0 12px 24px -6px rgb(22 35 63 / 22%);
  transition: box-shadow .25s ease;
}
#view-library .cf-book.is-center > .lib-cover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%), inset 0 -1px 0 rgb(0 0 0 / 6%), 0 2px 4px rgb(0 0 0 / 10%), 0 20px 34px -8px rgb(22 35 63 / 32%); }
html.cv-dark #view-library .cf-book > .lib-cover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 1px 2px rgb(0 0 0 / 40%), 0 14px 26px -6px rgb(0 0 0 / 55%); }
/* 随角度移动的高光：书转过去时光带滑过封面 */
#view-library .cf-book > .lib-cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 30%) 46%, transparent 60%) no-repeat;
  background-size: 260% 100%; background-position: calc(50% + var(--cf-ry, 0) * 1.3%) 0; mix-blend-mode: soft-light;
}
#view-library .cf-book .lib-cover-spine { width: calc(var(--cf-w) * .075); background: linear-gradient(90deg, color-mix(in srgb, var(--cv-spine) 78%, #000), var(--cv-spine) 45%, color-mix(in srgb, var(--cv-spine) 85%, #000)); }
#view-library .cf-book .lib-cover-ic { top: calc(var(--cf-w) * .1); left: calc(var(--cf-w) * .17); width: calc(var(--cf-w) * .24); height: calc(var(--cf-w) * .24); }
#view-library .cf-book .lib-cover-ic .ic { width: 52%; height: 52%; }
#view-library .cf-book .lib-cover-series { font-size: clamp(8px, calc(var(--cf-w) * .056), 11px); }
#view-library .cf-book .lib-cover-title { font-size: clamp(17px, calc(var(--cf-w) * .15), 30px); line-height: 1.05; letter-spacing: -.01em; }
#view-library .cf-book .lib-cover-zh { font-size: clamp(12px, calc(var(--cf-w) * .088), 17px); }
#view-library .cf-book .lib-cover-type { margin-top: calc(var(--cf-w) * .03); font-size: clamp(8.5px, calc(var(--cf-w) * .06), 12px); }
#view-library .cf-book .lib-ribbon { right: calc(var(--cf-w) * .1); z-index: 2; box-shadow: 0 2px 4px rgb(0 0 0 / 18%); }
/* 「变淡」：盖一层和面板同色的纱，不用 opacity（opacity 会把 3D 压平，还会透出后面的书） */
#view-library .cf-shade { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: var(--surface); opacity: var(--cf-fade, 0); pointer-events: none; }
#view-library .cf-edge { position: absolute; left: calc(50% - var(--cf-t) / 2); width: var(--cf-t); backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; }
#view-library .cf-edge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--surface); opacity: var(--cf-fade, 0); }
#view-library .cf-pages {
  top: 1.6%; height: 96.8%; transform: rotateY(90deg) translateZ(calc(var(--cf-w) / 2 - 3px));
  background: linear-gradient(90deg, rgb(0 0 0 / 12%), transparent 26%, transparent 74%, rgb(0 0 0 / 14%)), repeating-linear-gradient(90deg, #f8f4ea 0 1.6px, #ddd4c1 1.6px 2.4px);
}
html.cv-dark #view-library .cf-pages { background: linear-gradient(90deg, rgb(0 0 0 / 22%), transparent 30%, transparent 70%, rgb(0 0 0 / 26%)), repeating-linear-gradient(90deg, #cfc6b2 0 1.6px, #a99f8a 1.6px 2.4px); }
#view-library .cf-spine {
  top: 0; height: 100%; border-radius: 4px; transform: rotateY(-90deg) translateZ(calc(var(--cf-w) / 2));
  background: linear-gradient(90deg, color-mix(in srgb, var(--cf-spine, #3d5fb5) 62%, #000), var(--cf-spine, #3d5fb5) 42%, color-mix(in srgb, var(--cf-spine, #3d5fb5) 78%, #000));
}
#view-library .cf-book:focus-visible > .lib-cover { outline: 3px solid var(--academy-action, var(--accent)); outline-offset: 4px; }
/* 倒影（Chrome / Safari；Firefox 不显示，不影响使用）和台面细线 */
#view-library .cf.has-reflect .cf-book > .lib-cover { -webkit-box-reflect: below 5px linear-gradient(transparent 80%, rgb(0 0 0 / 12%)); }
html.cv-dark #view-library .cf.has-reflect .cf-book > .lib-cover { -webkit-box-reflect: below 5px linear-gradient(transparent 80%, rgb(0 0 0 / 16%)); }
#view-library .cf-stage::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(var(--cf-top) + var(--cf-h) + 2px); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 12%, transparent) 20%, color-mix(in srgb, var(--ink) 12%, transparent) 80%, transparent);
}
/* 两侧箭头：手机上小一点、贴边 */
#view-library .cf-nav {
  position: absolute; z-index: 600; top: calc(var(--cf-top) + var(--cf-h) / 2); display: grid; place-items: center;
  width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--ink); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; transition: opacity .15s ease, transform .15s ease;
}
#view-library .cf-nav:hover { background: var(--surface); }
#view-library .cf-nav:active { transform: scale(.94); }
#view-library .cf-nav .ic { width: 20px; height: 20px; }
#view-library .cf-prev { left: 10px; }
#view-library .cf-next { right: 10px; }
#view-library .cf-nav:disabled { opacity: 0; pointer-events: none; }
#view-library .cf.is-wide .cf-prev { left: 22px; }
#view-library .cf.is-wide .cf-next { right: 22px; }
#view-library .cf.is-wide .cf-nav { width: 46px; height: 46px; margin-top: -23px; }
@media (max-width: 600px) { #view-library .cf-nav { width: 34px; height: 34px; margin-top: -17px; } #view-library .cf-prev { left: 6px; } #view-library .cf-next { right: 6px; } }
/* 位置小点 */
#view-library .cf-dots { display: flex; justify-content: center; gap: 6px; margin: 0; }
#view-library .cf-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--hairline); transition: width .2s ease, background-color .2s ease; }
#view-library .cf-dots span.is-on { width: 18px; background: var(--academy-action, var(--accent)); }

/* 正中那套书的信息 */
#view-library .cf-info { display: grid; gap: 4px; padding: 8px 4px 0; }
#view-library .cf-info.is-in { animation: cf-in .22s ease-out; }
@keyframes cf-in { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#view-library .cf-info-main { display: grid; justify-items: center; gap: 6px; text-align: center; }
#view-library .cf-kicker { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--lib-brass-ink); font-size: 12px; font-weight: 650; letter-spacing: .02em; }
#view-library .cf-here { padding: 1px 8px; border-radius: 999px; background: var(--lib-brass); color: #fff; font-size: 11px; line-height: 18px; }
#view-library .cf-name { margin: 0; color: var(--ink); font-size: 19px; font-weight: 750; line-height: 1.3; }
#view-library .cf-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; margin: 0; color: var(--muted); font-size: 13px; }
#view-library .cf-meta b { color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; }
#view-library .cf-sum { max-width: 30em; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
#view-library .cf-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
#view-library .cf-parts li { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; }
#view-library .cf-open { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto !important; min-height: 44px; margin-top: 6px; padding: 0 24px; }
#view-library .cf-open .ic { width: 18px; height: 18px; }
#view-library .cf-info-list .lib-pk-h { margin-top: 18px; }
#view-library .cf:not(.is-wide) .cf-info-list .lib-pk-rows > li:nth-child(n+4) { display: none; }
#view-library .cf.is-wide .cf-info { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 36px; align-items: start; padding: 10px 16px 0; }
#view-library .cf.is-wide .cf-info-main { justify-items: start; text-align: left; padding-top: 12px; }
#view-library .cf.is-wide .cf-name { font-size: 24px; }
#view-library .cf.is-wide .cf-meta, #view-library .cf.is-wide .cf-parts { justify-content: flex-start; }
#view-library .cf.is-wide .cf-info-list .lib-pk-h { margin-top: 6px; }
#view-library .cf .cf-info-list .lib-pk-rows { grid-template-columns: minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) {
  #view-library .cf-info.is-in, #view-library .lib-pk { animation: none; }
  #view-library .cf-nav, #view-library .cf-dots span, #view-library .cf-stage::before, #view-library .cf-book > .lib-cover { transition: none; }
}

/* ── 读完小结卡 ── */
#view-library .lib-done { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--green-ink, #2f7259) 22%, var(--hairline)); border-radius: var(--lib-rc, 14px); background: color-mix(in srgb, var(--green-soft, #e3f1e8) 55%, var(--surface)); animation: lib-done-in .3s ease-out; }
@keyframes lib-done-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#view-library .lib-done-head { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--green-ink, #2f7259); font-size: 13px; }
#view-library .lib-done-head .ic { width: 20px; height: 20px; }
#view-library .lib-done-head b { color: var(--ink); font-size: 17px; }
#view-library .lib-done-head span { color: var(--muted); }
#view-library .lib-done-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
#view-library .lib-done-stats > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
#view-library .lib-done-stats dt { color: var(--muted); font-size: 12px; }
#view-library .lib-done-stats dd { margin: 0; color: var(--ink); font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.2; }
#view-library .lib-done-stats small { color: var(--muted); font-size: 12px; font-weight: 600; }
#view-library .lib-done-ex { display: inline-flex; align-items: center; justify-content: center; gap: 6px; justify-self: start; width: auto !important; min-height: 40px; }
#view-library .lib-done-ex .ic { width: 16px; height: 16px; }

/* ── 手机：往下读时读物条收起，只留底边进度线；往上滑再出来 ── */
#view-library .lib-rbar { transition: transform .22s ease; }
@media (max-width: 600px) {
  #view-library .lib-rbar.is-tucked { transform: translateY(calc(-100% + 2px)); }
  #view-library .lib-rbar.is-tucked .lib-rbar-in > :not(.lib-rbar-prog) { visibility: hidden; transition: visibility 0s .22s; }
}
@media (prefers-reduced-motion: reduce) { #view-library .lib-rbar, #view-library .lib-done { transition: none; animation: none; } }

/* ── 难词本里的「阅读生词」（不在阅读馆页面里，用全站变量）──────── */
.rw { --rw-brass: var(--ds-brass, #a07a32); --rw-brass-ink: var(--ds-brass-ink, #7d5d1f); --rw-brass-soft: var(--ds-brass-soft, #f5eedf);
  display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed color-mix(in srgb, var(--rw-brass) 45%, var(--hairline)); }
.rw[hidden] { display: none; }
.rw .ic { width: 16px; height: 16px; flex: none; }
.rw-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.rw-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: 17px; font-weight: 750; }
.rw-title .ic { width: 18px; height: 18px; color: var(--rw-brass); }
.rw-count { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--rw-brass-soft); color: var(--rw-brass-ink); font-size: 12px; line-height: 22px; text-align: center; }
.rw-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.rw-cards-btn { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; min-height: 40px; }
.rw-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rw-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--hairline-soft, var(--hairline)); border-left: 3px solid var(--rw-brass); border-radius: 12px; background: color-mix(in srgb, var(--rw-brass-soft) 35%, var(--surface)); }
.rw-main { display: grid; gap: 3px; min-width: 0; }
.rw-main p { margin: 0; }
.rw-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rw-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--rw-brass-soft, #f5eedf); color: var(--rw-brass-ink, #7d5d1f); font-size: 11.5px; font-weight: 700; line-height: 20px; }
.rw-tag .ic { width: 12px; height: 12px; }
.rw-tag.is-book { background: var(--accent-soft, #e8eefb); color: var(--accent-ink, #2a4a9a); font-weight: 650; }
.rw-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rw-word { font-family: "Iowan Old Style", "Charter", Georgia, serif; font-size: 19px; color: var(--ink); overflow-wrap: anywhere; }
.rw-zh { color: var(--ink-2, var(--ink)); font-size: 14px; }
.rw-from { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.rw-acts .secondary-action { width: auto !important; min-height: 36px; padding: 0 12px; font-size: 13px; }
.rw-acts .rw-icon { display: inline-grid; place-items: center; width: 36px !important; padding: 0; }
.rw-more { justify-self: center; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--accent-ink); font-size: 13px; font-weight: 650; }
@media (max-width: 600px) {
  .rw-item { grid-template-columns: minmax(0, 1fr); }
  .rw-acts { justify-content: flex-start; }
}
/* 卡片复习 */
.rw-cards-mask { position: fixed; inset: 0; z-index: 180; background: rgb(10 16 30 / 42%); }
.rw-cards { position: fixed; z-index: 181; left: 50%; top: 50%; display: grid; gap: 14px; width: min(420px, calc(100vw - 32px)); padding: 16px 18px 20px; transform: translate(-50%, -50%);
  border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); font-family: var(--ds-sans, system-ui, sans-serif); animation: rw-in .2s ease-out; }
@keyframes rw-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.rw-cards .ic { width: 18px; height: 18px; }
.rw-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.rw-x { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--muted); }
.rw-card { display: grid; justify-items: center; gap: 10px; min-height: 200px; align-content: center; padding: 20px 16px; border-radius: 16px; text-align: center;
  background: linear-gradient(165deg, color-mix(in srgb, var(--ds-brass-soft, #f5eedf) 70%, var(--surface)), var(--surface)); border: 1px solid var(--hairline); }
.rw-card p { margin: 0; }
.rw-card-word { display: flex; align-items: center; gap: 4px; font-family: "Iowan Old Style", "Charter", Georgia, serif; font-size: 32px; font-weight: 700; overflow-wrap: anywhere; }
.rw-card-zh { font-size: 20px; font-weight: 650; }
.rw-card-hint { color: var(--muted); font-size: 14px; }
.rw-card-end { font-size: 16px; }
.rw-card-end b { font-size: 22px; }
.rw-card-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.rw-card-acts button { width: 100% !important; min-height: 46px; }
@media (prefers-reduced-motion: reduce) { .rw-cards { animation: none; } }

/* ── 问 Dot：读物条上一个、单词卡上一个 ── */
#view-library .lib-dot-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 11px 0 9px; border: 1px solid color-mix(in srgb, var(--academy-action, var(--accent)) 30%, var(--hairline)); border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft, #e8eefb) 60%, var(--surface)); color: var(--accent-ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
#view-library .lib-dot-btn .ic { width: 15px; height: 15px; }
@media (max-width: 380px) { #view-library .lib-dot-btn span { display: none; } #view-library .lib-dot-btn { padding: 0 9px; } }
:is(#view-library, .lib-sheet) .lib-wc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
:is(#view-library, .lib-sheet) .lib-wc-acts .lib-wc-save { margin-top: 0; }
:is(#view-library, .lib-sheet) .lib-wc-dot { display: inline-flex; align-items: center; gap: 6px; width: auto !important; min-height: 42px; }
:is(#view-library, .lib-sheet) .lib-wc-dot .ic { width: 16px; height: 16px; }

/* 5.10.3-reading-dict：点词卡片的原形一行（tell 的过去式和过去分词）；文章末尾统一说明一次点词释义的来源（方案 B） */
:is(#view-library, .lib-sheet) .lib-wc-form { margin: -4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
:is(#view-library, .lib-sheet) .lib-wc-form span[lang] { color: var(--ink-2); font-weight: 650; }
#view-library .lib-src-note { max-width: 34em; margin: -10px 0 0; padding-left: 20px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }