/* 美育创学 · 分学龄皮肤 + 触屏友好（M1.1/M1.2） */
:root {
  --mkx-font-base: 18px;
  --mkx-radius-card: 16px;
  --mkx-btn-h: 56px;
  --mkx-primary: #0F7B6C;
  --mkx-accent: #FFE66D;
  --mkx-bg: #f7f9f6;
  /* CR-MEIYU-KID-WARM · 字色从冷灰升级为暖棕系，小朋友友好 */
  --mkx-text: #3e2e24;
  --mkx-text-soft: #4a4a45;
  --mkx-card: #ffffff;
  --mkx-border: rgba(15, 123, 108, 0.18);
  --mkx-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* CR-MEIYU-27 A · 美育画幅基线（stage）
   * 首页定主画幅 → 班级看板 / 课堂 / 课包 / 治理 / 作品集全部继承同一宽度与边距。
   * 选 1200 覆盖 iPad 10.2 (810) / iPad Pro 11 (834) / iPad Pro 12.9 横屏 (1366)
   * 三档主流平板：iPad Pro 横屏下两侧留呼吸，iPad Pro 纵屏下贴近满屏阅读。
   * 触屏主按钮热区 56px（贴 iOS / Material 无感交互基线），次按钮 44px。
   */
  --meiyu-stage-max: 1200px;
  --meiyu-stage-pad-x: clamp(14px, 2.4vw, 28px);
  --meiyu-stage-pad-top: clamp(20px, 2.6vw, 32px);
  --meiyu-stage-pad-bottom: clamp(32px, 3.6vw, 48px);
  --meiyu-tap-min: 56px;
  --meiyu-tap-min-compact: 44px;

  /* CR-MEIYU-CURRICULUM-UPGRADE · 双轨色板 — F1 暖色调统一：AI 轨道从冷蓝紫 #6b7cff 改为暖紫 #8B6FC0 */
  --meiyu-track-ai: #8B6FC0;
  --meiyu-track-traditional: #10b981;
  --meiyu-grade-l1-badge: #1a9b8a;
  --meiyu-grade-l2-badge: #8B6FC0;
  --meiyu-grade-l3-badge: #8b5cf6;

  /* F3: 卡片统一 token — 与 .meiyu-lesson-card 现有阴影对齐 */
  --meiyu-card-radius: 16px;
  --meiyu-card-shadow: 0 2px 12px rgba(62, 46, 36, 0.06);
  --meiyu-card-border: 1px solid rgba(0, 0, 0, 0.06);
}

body[data-age-band="young"] {
  --mkx-font-base: 22px;
  --mkx-radius-card: 28px;
  --mkx-btn-h: 64px;
  --mkx-primary: #1a9b8a;
  --mkx-accent: #ffe082;
  --mkx-bg: #f0faf4;
  --mkx-text: #4a3728;
}

/* §12.4 L1 young 气泡对话深度适配：22px + 行高 1.8 */
body[data-age-band="young"] .meiyu-bubble {
  font-size: 22px;
  line-height: 1.8;
}
body[data-age-band="young"] .meiyu-msg {
  font-size: 22px;
  line-height: 1.8;
}

body[data-age-band="upper"] {
  --mkx-font-base: 16px;
  --mkx-radius-card: 14px;
  --mkx-btn-h: 48px;
  --mkx-bg: #eaf0f8;
  --mkx-text: #1e293b;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html {
  touch-action: manipulation;
}

/* --- 首页（Seed-M0/M1） --- */
/* CR-MEIYU-27 A · 画幅基线统一：首页 shell = stage-max，后续 board/licenses/gov/classroom 全部继承同宽。 */
.meiyu-shell {
  max-width: var(--meiyu-stage-max);
  margin: 0 auto;
  padding: var(--meiyu-stage-pad-top) var(--meiyu-stage-pad-x) var(--meiyu-stage-pad-bottom);
}
.meiyu-placeholder-shell {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.meiyu-hero-card {
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.12), rgba(59, 130, 246, 0.08));
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 16px;
  padding: 32px;
  max-width: 520px;
}
.meiyu-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #e8e0ff;
}
.meiyu-lead {
  font-size: 16px;
  line-height: 1.6;
  color: #c4b5fd;
  margin: 0 0 16px;
}
.meiyu-muted {
  color: #64748b;
  font-size: 14px;
}
.meiyu-hero {
  margin-bottom: 28px;
}
.meiyu-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.meiyu-entry-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(24, 24, 35, 0.85);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 12px rgba(62, 46, 36, 0.06);
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.15s;
  min-height: 48px;
}
a.meiyu-entry-card:hover {
  border-color: rgba(167, 139, 250, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(62, 46, 36, 0.12);
}
.meiyu-entry-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a78bfa;
}
.meiyu-entry-card h2 {
  margin: 8px 0 10px;
  font-size: 20px;
  color: #f8fafc;
}
.meiyu-entry-card p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #d1d5db;
}
.meiyu-entry-cta {
  font-weight: 600;
  color: #c4b5fd;
}
.meiyu-entry-primary {
  border-color: rgba(52, 211, 153, 0.35);
}
.meiyu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: max(15px, var(--mkx-font-base, 15px));
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  touch-action: manipulation;
  box-sizing: border-box;
}
.meiyu-btn-primary {
  background: linear-gradient(135deg, var(--mkx-primary, #7c3aed), #4f46e5);
  color: #fff;
}
.meiyu-btn-secondary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--mkx-text, #1e293b);
  border: 1px solid var(--mkx-border, rgba(0, 0, 0, 0.08));
}
.meiyu-btn-ghost {
  background: transparent;
  color: var(--mkx-primary, #7c3aed);
  border: 1px solid var(--mkx-border, rgba(167, 139, 250, 0.35));
}

/* --- 课堂页 --- */
.meiyu-classroom-page {
  font-size: var(--mkx-font-base, 18px);
  color: var(--mkx-text, #1e293b);
  background: var(--mkx-bg, #f7f9f6);
  min-height: calc(100dvh - 72px);
  padding-bottom: calc(12px + var(--mkx-safe-bottom));
  box-sizing: border-box;
}

/* CR-M06 · 页面画布：HUD/聊天/底栏与舞台同宽 */
.meiyu-page-canvas {
  /* CR-MEIYU-27 A · 课堂画幅继承首页基线 */
  max-width: var(--meiyu-stage-max);
  margin: 0 auto;
  padding: 0 var(--meiyu-stage-pad-x);
  box-sizing: border-box;
}

.meiyu-hud {
  padding: 12px 16px 8px;
  background: var(--mkx-card, #fff);
  border-bottom: 1px solid var(--mkx-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.meiyu-hud-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* PERF-MEIYU-CSS-TIDY-2604 · 遗留 .meiyu-back 规则移除：
 * 自 P2-FIX4 起返回键已改为 .meiyu-back-btn（36px 圆图标），DOM 层
 * 无任何模板使用 .meiyu-back，这 8 行是纯死代码，删除无视觉影响。
 * 需要兜底时请使用 .meiyu-back-btn 的样式（下方） */

/* CR-MEIYU-REDESIGN P2-FIX4 · 返回图标按钮
 * 圆形 36px，左上角黄金位置只占 36×36 像素，视觉不压迫课题标签；
 * 文字走 aria-label 给读屏，不占视觉空间。 */
.meiyu-back-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mkx-text, #1f2937);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(99, 102, 241, 0.22);
  font-size: 1.2em;
  line-height: 1;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.meiyu-back-btn:hover {
  background: #fff;
  border-color: rgba(99, 102, 241, 0.5);
}
.meiyu-back-btn:active { transform: scale(0.92); }
.meiyu-back-btn:focus-visible {
  outline: none;
  border-color: var(--mkx-primary, #0F7B6C);
  box-shadow: 0 0 0 3px rgba(15, 123, 108, 0.22);
}
.meiyu-lesson-tag {
  font-weight: 700;
  color: var(--mkx-text);
}

.meiyu-progress-hud {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0;
  flex: 1 1 200px;
}
.meiyu-star-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: opacity 0.2s;
}
.meiyu-star-step .meiyu-star-img {
  opacity: 0.35;
  display: block;
}
.meiyu-star-step.done .meiyu-star-img {
  opacity: 1;
}

.meiyu-hud-row--main {
  justify-content: space-between;
  gap: 10px;
}
.meiyu-hud-row--sub {
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.meiyu-hud-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.meiyu-stage-mode-toggle {
  min-height: 44px;
  padding: 8px 14px;
}
.meiyu-rail-toggle {
  display: none;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 2px solid var(--mkx-border);
  background: #fff;
  color: var(--mkx-text);
  font-weight: 600;
  cursor: pointer;
}
.meiyu-rail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 38;
}

.meiyu-age-switch {
  display: flex;
  gap: 8px;
  margin-top: 0;
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* CR-MEIYU-29 I1-C2-A · 班级已锁定审美风味时 JS 会对容器设 hidden，
   默认 display:flex 会压过 UA 的 hidden→display:none，需显式保底 */
.meiyu-age-switch[hidden],
.meiyu-age-quick-pick[hidden] { display: none !important; }

/* CR-MEIYU-29 I1-C2-C1 · 我的班级卡片网格（用户视角：不再手敲 class_id） */
.meiyu-my-classes-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.meiyu-my-classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.meiyu-my-classes-toast {
  margin-top: 8px;
  padding: 10px 14px;
  background: #fff6d9;
  border: 1px solid #e8ca6a;
  border-radius: 10px;
  color: #5a4418;
  font-size: 14px;
  animation: meiyu-toast-in 160ms ease-out;
}
@keyframes meiyu-toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.meiyu-class-card {
  background: #fff;
  border: 1px solid var(--meiyu-line, #e8e1d0);
  border-radius: 12px;
  padding: 14px 14px 12px 14px;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
}
.meiyu-class-card:hover,
.meiyu-class-card:focus-visible {
  border-color: #c79a3f;
  box-shadow: 0 2px 10px rgba(199, 154, 63, 0.18);
  outline: none;
  transform: translateY(-1px);
}
.meiyu-class-card-new {
  border-color: #c79a3f;
  background: #fffbea;
}
.meiyu-class-card-name {
  margin: 0;
  font-size: 17px;
  color: #3a2c18;
  line-height: 1.3;
}
.meiyu-class-card-band {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}
.meiyu-class-card-band.band-young  { background: #fde8cc; color: #a65e10; }
.meiyu-class-card-band.band-mid    { background: #e2efd9; color: #3e6a1f; }
.meiyu-class-card-band.band-upper  { background: #dde5fb; color: #25397c; }
.meiyu-class-card-band.band-mixed  { background: #eee8dc; color: #5a4a32; }
.meiyu-class-card-meta {
  margin: 0;
  font-size: 12px;
  color: #8a7855;
}
.meiyu-class-card-active {
  border-color: #a66b16;
  background: #fff5e0;
  box-shadow: 0 0 0 2px rgba(166, 107, 22, 0.25);
}
.meiyu-class-card-active:hover,
.meiyu-class-card-active:focus-visible {
  border-color: #a66b16;
  box-shadow: 0 0 0 2px rgba(166, 107, 22, 0.35);
}

/* CR-MEIYU-29 I1-C2-C2a · 班级详情面板（点卡片展开，老师看不到 class_id input） */
.meiyu-class-detail-panel {
  margin-top: 16px;
  padding: 18px;
  background: #fffbe8;
  border: 1px solid #e8ca6a;
  border-radius: 14px;
  animation: meiyu-detail-in 180ms ease-out;
}
.meiyu-class-detail-panel[hidden] { display: none; }
@keyframes meiyu-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.meiyu-class-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e8ca6a;
}
.meiyu-class-detail-head h3 {
  margin: 4px 0 0 0;
  font-size: 20px;
  color: #3a2c18;
}
.meiyu-class-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.meiyu-detail-subform {
  margin-top: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--meiyu-line, #e8e1d0);
  border-radius: 10px;
}
.meiyu-detail-subform h4 {
  margin: 0 0 4px 0;
  font-size: 15px;
  color: #3a2c18;
}
.meiyu-detail-subform .meiyu-dash-desc {
  font-size: 12px;
  margin: 0 0 8px 0;
}

/* 老入口折叠：视觉降级，提示老师"正常流程别进这里" */
.meiyu-board-legacy-details {
  margin-top: 24px;
  padding: 0 14px;
  border: 1px dashed #cfcfcf;
  border-radius: 10px;
  background: #fafafa;
  color: #7a7a7a;
}
.meiyu-board-legacy-details > summary {
  padding: 10px 0;
  cursor: pointer;
  font-size: 13px;
  color: #7a7a7a;
  list-style: disclosure-closed;
}
.meiyu-board-legacy-details[open] > summary {
  list-style: disclosure-open;
  border-bottom: 1px dashed #cfcfcf;
  margin-bottom: 8px;
}
.meiyu-board-legacy-details .meiyu-board-customize {
  margin-top: 12px;
  background: #fff;
}
.meiyu-age-pill {
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 48px;
  border: 2px solid var(--mkx-border);
  background: #fff;
  color: var(--mkx-text);
  font-weight: 600;
  cursor: pointer;
}
.meiyu-age-pill.active {
  border-color: var(--mkx-primary);
  background: color-mix(in srgb, var(--mkx-primary) 12%, white);
  color: var(--mkx-primary);
}

.meiyu-stage-wrap {
  position: relative;
  max-width: 100%;
  margin: 0;
}
.meiyu-stage-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  pointer-events: none;
  border-radius: var(--mkx-radius-card);
}

.meiyu-stage-inner {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  min-height: 420px;
}

.meiyu-phase-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 10px;
  background: color-mix(in srgb, var(--mkx-primary) 6%, white);
  border-right: 1px solid var(--mkx-border);
}
.meiyu-phase-rail.compact .meiyu-phase-label {
  display: none;
}
.meiyu-phase-dot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 12px;
  font-size: 0.85em;
  color: #64748b;
  border: 1px solid transparent;
  min-height: 48px;
}
.meiyu-phase-dot.active {
  background: color-mix(in srgb, var(--mkx-primary) 15%, white);
  color: var(--mkx-text);
  border-color: var(--mkx-primary);
}
.meiyu-phase-dot.done {
  color: #059669;
}
.meiyu-phase-dot .idx {
  font-weight: 700;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.meiyu-stage-main {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  align-items: stretch;
}

/* 上方：全宽「画面区」只放角色，不挡背景；题板在下方或右侧 */
.meiyu-stage-viewport {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-height: min(48vh, 400px);
  padding: 12px 16px 10px;
  box-sizing: border-box;
}

.meiyu-teaching-card {
  flex: 0 0 auto;
  background: var(--mkx-card);
  padding: 14px 16px;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: 1px solid var(--mkx-border);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
  margin: 0;
  max-height: min(42vh, 320px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 880px) {
  .meiyu-stage-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(20rem, 34%);
    grid-template-rows: minmax(360px, 1fr);
    align-items: stretch;
    min-height: 420px;
  }
  .meiyu-stage-viewport {
    grid-column: 1;
    grid-row: 1;
    min-height: 100%;
    padding: 16px 20px 14px;
    border-radius: 0 var(--mkx-radius-card) 0 0;
  }
  .meiyu-teaching-card {
    grid-column: 2;
    grid-row: 1;
    border-radius: 0 var(--mkx-radius-card) var(--mkx-radius-card) 0;
    border: 1px solid var(--mkx-border);
    border-left: none;
    margin: 0 0 0 0;
    max-height: none;
    align-self: stretch;
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.05);
    overflow-y: auto;
  }
}

@media (max-width: 479px) {
  .meiyu-stage-viewport {
    min-height: min(38vh, 260px);
    padding: 10px 12px 8px;
  }
}

.meiyu-cast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}
.meiyu-actor-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-around;
  gap: 8px;
}
.meiyu-actor {
  position: relative;
  text-align: center;
}
.meiyu-actor img {
  display: inline-block;
  vertical-align: bottom;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}
/* ─── CR-MEIYU-AVATAR · 表情状态动画（listen/talk/happy/think） ────── */
/* 默认 listen 态：静态，无动画 */
.meiyu-actor.state-talk img {
  transform: scale(1.04);
  transition: transform 0.2s;
  animation: meiyu-breathe 1.8s ease-in-out infinite;
}
.meiyu-actor.state-happy img {
  animation: meiyu-bounce 0.4s ease-out 1;
}
.meiyu-actor.state-think img {
  animation: meiyu-tilt 2.4s ease-in-out infinite;
}

@keyframes meiyu-breathe {
  0%, 100% { transform: translateY(0) scale(1.04); }
  50%      { transform: translateY(-3px) scale(1.04); }
}
@keyframes meiyu-bounce {
  0%   { transform: scale(1.0); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1.0); }
}
@keyframes meiyu-tilt {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(2deg); }
  75%      { transform: rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .meiyu-actor.state-talk img,
  .meiyu-actor.state-happy img,
  .meiyu-actor.state-think img {
    animation: none;
  }
  .meiyu-actor.state-talk img {
    transform: scale(1.02);
  }
}

.meiyu-bubble {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  max-width: 200px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--mkx-border);
  font-size: 0.8em;
  line-height: 1.35;
  color: var(--mkx-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-height: 2em;
  word-break: break-word;
}
.meiyu-bubble:empty {
  display: none;
}

.meiyu-board {
  min-height: 0;
  font-size: 1em;
  line-height: 1.65;
  color: var(--mkx-text);
}
.meiyu-board p:first-child {
  margin-top: 0;
}
/* CR-MEIYU-29 P0.2 · A 段名作 hero 图：让"先看看"一开眼就有物可看。 */
.meiyu-board-hero {
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #fafaf7 0%, #f1ede3 100%);
  border: 1px solid #e7e0cf;
  border-radius: 14px;
  overflow: hidden;
}
.meiyu-board-hero img {
  display: block;
  width: 100%;
  max-height: clamp(200px, 38vh, 360px);
  object-fit: contain;
  background: #0f0e0b;
}
.meiyu-board-hero figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px 12px;
  text-align: center;
  width: 100%;
}
.meiyu-board-hero-title {
  font-weight: 600;
  font-size: 0.98em;
  color: var(--mkx-text);
}
.meiyu-board-hero-credit {
  font-size: 0.78em;
  color: var(--mkx-muted, #8a8477);
  line-height: 1.4;
}
.meiyu-board-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.meiyu-board-hint-img {
  max-width: 100%;
  max-height: clamp(120px, 20vh, 200px);
  border-radius: 10px;
  border: 1px solid #e7e0cf;
}
/* CR-MEIYU-29 P1.1 · E 段互评清单 / F 段小本子收束 */
.meiyu-board-rubric,
.meiyu-board-archive {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fbf6e8;
  border: 1px dashed #e1d2a6;
}
.meiyu-board-archive {
  background: #f4f1fb;
  border-color: #d7ceee;
}
.meiyu-board-rubric-title,
.meiyu-board-archive-title {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--mkx-text);
  font-size: 0.95em;
}
.meiyu-board-list,
.meiyu-board-rubric-list,
.meiyu-board-archive-list {
  margin: 0;
  padding-left: 22px;
  line-height: 1.6;
}
.meiyu-board-rubric-list li,
.meiyu-board-archive-list li {
  font-size: 0.95em;
}
/* CR-MEIYU-29 P2 · F 段作品回放 + 作品集入口 */
.meiyu-board-gallery {
  margin: 14px 0 0;
  padding: 12px 14px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f4fb 100%);
  border: 1px solid #e1dbee;
}
.meiyu-board-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.meiyu-board-gallery-title {
  font-weight: 600;
  font-size: 0.98em;
  color: var(--mkx-text);
}
.meiyu-board-gallery-cta {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: #6b5bd6;
  color: #fff;
  text-decoration: none;
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1.2;
  transition: background 160ms ease;
}
.meiyu-board-gallery-cta:hover,
.meiyu-board-gallery-cta:focus-visible {
  background: #5544c4;
  color: #fff;
}
.meiyu-board-gallery-body--loading {
  color: var(--mkx-muted, #8a8477);
  font-size: 0.9em;
  font-style: italic;
  padding: 6px 0;
}
.meiyu-board-gallery-empty {
  margin: 0;
  color: var(--mkx-muted, #8a8477);
  font-size: 0.92em;
}
.meiyu-board-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.meiyu-gallery-card {
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #f3efe6;
  border: 1px solid #e7e0cf;
  display: flex;
  flex-direction: column;
}
.meiyu-gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #0f0e0b;
}
.meiyu-gallery-card figcaption {
  padding: 4px 6px 6px;
  font-size: 0.78em;
  line-height: 1.25;
  color: var(--mkx-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meiyu-gallery-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.meiyu-gallery-badge--ai { background: #6b5bd6; }
.meiyu-gallery-badge--sketch { background: #c97c18; }
.meiyu-gallery-badge--photo { background: #4a7c3a; }
.meiyu-load-error {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.meiyu-load-error-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.meiyu-chat-log {
  max-height: 180px;
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.92em;
}
.meiyu-msg {
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 94%;
}
.meiyu-msg.user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--mkx-primary) 22%, white);
}
.meiyu-msg.assistant {
  align-self: flex-start;
  background: #f1f5f9;
}

/* CR-MEIYU-27 B · 动手阶段主行动区 · 下沉到底栏拇指热区
 * 三键（相册 / 拍照 / 手绘）固定顺序：主要动作从左到右递进，
 * 手绘（最新能力 · 波 C）用 primary 色阶提醒新入口。
 * 由 JS 在 body 上加 meiyu-bottom-mode--practice，CSS 控制显隐；
 * 非动手阶段底栏沿用「发送 / 下一阶段」原布局。
 */
.meiyu-bottom-practice-bar {
  display: none;
  grid-column: 1 / -1;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px 2px 8px;
  border-bottom: 1px dashed var(--mkx-border);
  margin-bottom: 8px;
}
body.meiyu-bottom-mode--practice .meiyu-bottom-practice-bar {
  display: flex;
}
.meiyu-practice-tap {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--meiyu-tap-min, 56px);
  padding: 0 20px;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 1 1 140px;
  max-width: 200px;
}
.meiyu-practice-tap input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.meiyu-practice-tap-icon {
  font-size: 1.1em;
  line-height: 1;
}
.meiyu-practice-tap-label {
  white-space: nowrap;
}
.meiyu-practice-tap--sketch {
  box-shadow: 0 6px 16px rgba(15, 123, 108, 0.24);
}
.meiyu-practice-status {
  flex: 1 1 100%;
  font-size: 0.9em;
  padding: 4px 2px 0;
}

/* 桌面兜底按钮：无触屏 + 有悬停能力时显示；触屏视口隐藏，让三键主导拇指区。 */
.meiyu-practice-tap--fallback {
  display: none;
  background: transparent;
  border: 1px dashed var(--mkx-border);
  color: var(--mkx-text);
  flex: 0 0 auto;
  max-width: 180px;
}
@media (hover: hover) and (pointer: fine) {
  .meiyu-practice-tap--fallback {
    display: inline-flex;
  }
}

/* CR-MEIYU-27 B · 废旧 767px 桌面 / 移动硬分叉
 * 旧 .meiyu-upload-desktop / .meiyu-upload-mobile / .meiyu-upload-tap 三套类
 * 已从 meiyu-classroom.html 移除；此处若老扩展/第三方模板仍用旧类，
 * 仅保留兼容兜底：均按 flex 布局展示，不做硬线切换。
 */
.meiyu-practice-upload,
.meiyu-upload-desktop,
.meiyu-upload-mobile {
  display: contents;
}

.meiyu-bottom-bar {
  padding: 12px 0 calc(16px + var(--mkx-safe-bottom));
  background: transparent;
  border-top: none;
  position: sticky;
  bottom: 0;
  z-index: 15;
}
.meiyu-bottom-grid {
  background: var(--mkx-card);
  border: 1px solid var(--mkx-border);
  border-radius: var(--mkx-radius-card);
  padding: 12px;
  box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.06);
}
.meiyu-bottom-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
#meiyu-hold-speak.recording {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}
#meiyu-hold-speak.processing {
  opacity: 0.7;
  pointer-events: none;
}
.meiyu-chat-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.meiyu-chat-input {
  flex: 1;
  min-height: var(--mkx-btn-h, 48px);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--mkx-border);
  font-size: 1em;
}
.meiyu-phase-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: center;
}
.meiyu-overflow-menu {
  position: relative;
}
.meiyu-overflow-menu > summary {
  list-style: none;
  cursor: pointer;
}
.meiyu-overflow-menu > summary::-webkit-details-marker {
  display: none;
}
.meiyu-overflow-panel {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 6px;
  min-width: 140px;
  padding: 8px;
  background: var(--mkx-card);
  border: 1px solid var(--mkx-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  z-index: 20;
}
.meiyu-overflow-item {
  width: 100%;
  justify-content: flex-start;
}

/* 双舞台：题板优先 vs 剧场 */
.meiyu-stage-wrap[data-stage-mode="board"] .meiyu-cast {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  min-height: 72px;
  max-height: 120px;
  margin-bottom: 8px;
}
.meiyu-stage-wrap[data-stage-mode="board"] .meiyu-actor-row {
  display: contents;
}
.meiyu-stage-wrap[data-stage-mode="board"] .meiyu-actor img {
  max-height: 56px;
  width: auto;
  height: auto;
}
.meiyu-stage-wrap[data-stage-mode="board"] .meiyu-bubble {
  font-size: 0.72em;
  max-width: 140px;
  padding: 6px 8px;
}

/* 入口页 CR-M06 · CR-MEIYU-27 A 继承 stage-max */
.meiyu-shell[data-meiyu-shell="student"] {
  background: linear-gradient(180deg, var(--mkx-bg) 0%, #fff 48%);
  border-radius: 20px;
  padding: var(--meiyu-stage-pad-top) var(--meiyu-stage-pad-x) var(--meiyu-stage-pad-bottom);
  max-width: var(--meiyu-stage-max);
  margin: 0 auto;
}
.meiyu-home-hero--student .meiyu-title {
  color: var(--mkx-text);
}
.meiyu-home-hero--student .meiyu-lead {
  color: var(--mkx-text-soft, #6b5a4e);
}
.meiyu-age-quick-pick {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 16px;
}

/* === CR-MEIYU-CURRICULUM-UPGRADE · 双轨导航栏 === */
.meiyu-track-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.meiyu-track-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 14px;
  border: 2px solid var(--mkx-border);
  background: #fff;
  color: var(--mkx-text);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  min-height: var(--meiyu-tap-min-compact, 44px);
  text-decoration: none;
}
.meiyu-track-tab:hover {
  border-color: color-mix(in srgb, var(--mkx-primary) 50%, transparent);
}
.meiyu-track-tab:active { transform: scale(0.97); }
.meiyu-track-tab.active[data-meiyu-track="ai"] {
  border-color: var(--meiyu-track-ai);
  background: color-mix(in srgb, var(--meiyu-track-ai) 10%, white);
  color: var(--meiyu-track-ai);
}
.meiyu-track-tab.active[data-meiyu-track="traditional"] {
  border-color: var(--meiyu-track-traditional);
  background: color-mix(in srgb, var(--meiyu-track-traditional) 10%, white);
  color: #0d9488;
}
.meiyu-track-icon {
  font-size: 1.25em;
  line-height: 1;
}
.meiyu-track-label { white-space: nowrap; }

/* === CR-MEIYU-CURRICULUM-UPGRADE · 分级筛选栏 === */
.meiyu-grade-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}
.meiyu-grade-pill {
  border-radius: 999px;
  padding: 7px 16px;
  min-height: var(--meiyu-tap-min-compact, 44px);
  border: 2px solid var(--mkx-border);
  background: #fff;
  color: var(--mkx-text);
  font-weight: 600;
  font-size: clamp(13px, 1.1vw, 15px);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}
.meiyu-grade-pill:hover {
  border-color: color-mix(in srgb, var(--mkx-primary) 50%, transparent);
}
.meiyu-grade-pill:active { transform: scale(0.96); }
.meiyu-grade-pill.active {
  border-color: var(--mkx-primary);
  background: color-mix(in srgb, var(--mkx-primary) 12%, white);
  color: var(--mkx-primary);
}

.meiyu-lesson-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.meiyu-lesson-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
  border-radius: var(--mkx-radius-card);
  background: var(--mkx-card);
  border: 1px solid var(--mkx-border);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--meiyu-card-shadow);
  transition: transform 0.15s, box-shadow 0.15s;
  min-height: 48px;
}
.meiyu-lesson-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(62, 46, 36, 0.12);
}
.meiyu-lesson-card-art {
  align-self: stretch;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
}
.meiyu-lesson-card-art img,
img.meiyu-lesson-card-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* P3-3: 图片骨架屏 — lazy loading 图片在加载完成前显示渐变骨架 */
img.meiyu-lesson-card-art {
  background: linear-gradient(110deg, #f0ebe6 8%, #f7f3ef 18%, #f0ebe6 33%);
  background-size: 200% 100%;
  animation: meiyu-shimmer 1.5s linear infinite;
}
img.meiyu-lesson-card-art.is-loaded {
  animation: none;
  background: none;
}
@keyframes meiyu-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.meiyu-lesson-card-body h2 {
  margin: 0 0 8px;
  font-size: 1.15em;
  color: var(--mkx-text);
}
.meiyu-lesson-card-body p {
  margin: 0;
  font-size: 0.92em;
  line-height: 1.55;
  color: var(--mkx-text-soft);
}
.meiyu-lesson-card-cta {
  font-weight: 700;
  color: var(--mkx-primary);
}
.meiyu-home-cta-wrap {
  text-align: center;
  margin: 8px 0 24px;
}
.meiyu-home-main-cta {
  min-height: 52px;
  padding: 14px 28px;
  font-size: 1.05em;
}

/* === CR-MEIYU-CURRICULUM-UPGRADE · 双轨卡片 —— 去掉 border-left 描边底，改用内容层次区分轨道 === */

/* === CR-MEIYU-CURRICULUM-UPGRADE · 传统课程"含材料包"徽章 === */
.meiyu-lesson-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.meiyu-lesson-card-badge--kit {
  background: color-mix(in srgb, var(--meiyu-track-traditional) 12%, white);
  color: var(--meiyu-track-traditional);
  border: 1px solid color-mix(in srgb, var(--meiyu-track-traditional) 30%, transparent);
}

/* === CR-MEIYU-CURRICULUM-UPGRADE · L1 低龄友好深度适配 === */

/* L1 课程卡片：大图优先 —— 缩略图占卡片 60% 高度 */
.meiyu-lesson-card[data-grade="L1"] {
  min-height: clamp(240px, 28vw, 340px);
}
.meiyu-lesson-card[data-grade="L1"] .meiyu-lesson-card-art {
  width: clamp(140px, 16vw, 200px);
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
  align-self: center;
}
@media (min-width: 768px) {
  .meiyu-lesson-card[data-grade="L1"] .meiyu-lesson-card-art {
    max-height: 60%;
    align-self: center;
  }
}
.meiyu-lesson-card[data-grade="L1"] .meiyu-lesson-card-body h2 {
  font-size: clamp(20px, 1.8vw, 28px);
}

/* L1 脉冲按钮动画 (限定 young 模式) */
body[data-age-band="young"] .meiyu-home-main-cta {
  animation: meiyu-btn-pulse 2.4s ease-in-out infinite;
}
@keyframes meiyu-btn-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 14px 32px rgba(99, 102, 241, 0.28); }
  50%      { transform: scale(1.04); box-shadow: 0 18px 40px rgba(255, 138, 101, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-age-band="young"] .meiyu-home-main-cta {
    animation: none;
  }
}

/* 传统课程占位卡片的不可点态 */
.meiyu-lesson-card--placeholder {
  opacity: 0.72;
  cursor: default;
  pointer-events: none;
}
.meiyu-lesson-card--placeholder .meiyu-lesson-card-cta {
  color: #94a3b8;
}

/* 占位卡片艺术区：大图标居中 */
.meiyu-lesson-card-art--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--meiyu-track-traditional) 8%, #f8fafc);
  border: 2px dashed color-mix(in srgb, var(--meiyu-track-traditional) 25%, #e2e8f0);
  border-radius: 14px;
  min-width: 120px;
  min-height: 120px;
}
.meiyu-lesson-card-art-icon {
  font-size: 2.8rem;
  line-height: 1;
  opacity: 0.55;
}

/* === CR-MEIYU-CURRICULUM-UPGRADE §12.7 · 教师工作台传统面板 === */

/* 传统面板内的 Track Tab 适配（board 专有容器） */
.meiyu-board-track-tabs {
  display: flex;
  gap: 12px;
  margin: 14px 0 18px;
}

/* 传统面板容器 */
.meiyu-board-traditional-panel {
  animation: meiyu-fade-in 0.25s ease;
}
@keyframes meiyu-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 传统进度状态徽章 */
.meiyu-trad-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.meiyu-trad-badge-done {
  background: color-mix(in srgb, var(--meiyu-track-traditional) 15%, white);
  color: var(--meiyu-track-traditional);
  border: 1px solid var(--meiyu-track-traditional);
}
.meiyu-trad-badge-active {
  background: color-mix(in srgb, #f59e0b 12%, white);
  color: #92400e;
  border: 1px solid #f59e0b;
}
.meiyu-trad-badge-idle {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

/* 传统课程卡片（教师看板） */
.meiyu-trad-lesson-card {
  border: 1px solid var(--mkx-border);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.meiyu-trad-lesson-card:hover {
  border-color: color-mix(in srgb, var(--meiyu-track-traditional) 40%, transparent);
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.08);
}
.meiyu-trad-lesson-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.meiyu-trad-lesson-head h3 {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 700;
  color: var(--mkx-text);
}
.meiyu-trad-instructor {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 6px;
}

/* 材料包卡片 */
.meiyu-trad-material-card {
  border: 1px solid var(--mkx-border);
  border-radius: 12px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--meiyu-track-traditional) 4%, white);
}
.meiyu-trad-material-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.meiyu-trad-material-head h3 {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 700;
  color: var(--mkx-text);
}
.meiyu-trad-material-stock {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, var(--meiyu-track-traditional) 15%, white);
  color: var(--meiyu-track-traditional);
  border: 1px solid var(--meiyu-track-traditional);
}
.meiyu-trad-material-hint {
  font-size: 12px;
  color: #64748b;
  margin: 4px 0 2px;
}
.meiyu-trad-material-meta {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
}

/* 材料包网格 (board) */
.meiyu-board-materials-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

/* §16.5 · 课程审核状态卡片 */
.meiyu-trad-review-card {
  border-left: 3px solid var(--meiyu-track-traditional);
}
.meiyu-trad-review-state {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.meiyu-trad-review-grade {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--meiyu-track-traditional) 12%, white);
  color: var(--meiyu-track-traditional);
  margin-right: 4px;
}
.meiyu-trad-review-submit {
  margin-top: 6px;
  font-size: 12px;
  padding: 4px 12px;
}

/* §16.5.2 · 上课链接生成器 */
.meiyu-trad-linkgen {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.meiyu-trad-linkgen label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.meiyu-trad-linkgen label span {
  font-size: 13px;
  font-weight: 600;
  color: var(--mkx-text);
  min-width: 40px;
}
.meiyu-trad-linkgen select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  background: white;
}
.meiyu-trad-linkgen-output {
  display: flex;
  gap: 8px;
  align-items: center;
}
.meiyu-trad-linkgen-output input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  color: #475569;
  background: #f8fafc;
}

/* === 教师工作台：亮色精致风（与学生 kiosk 视觉对齐） · CR-MEIYU-27 A 继承 stage-max === */
.meiyu-shell[data-meiyu-shell="teacher"] {
  max-width: none;
  margin: 0;
  padding: var(--meiyu-stage-pad-top) var(--meiyu-stage-pad-x) var(--meiyu-stage-pad-bottom);
  background: linear-gradient(180deg, #f7f9f6 0%, #ffffff 55%);
  border-radius: 0;
  box-shadow: none;
}

/* CR-MEIYU-FULLWIDTH · 美育页面全屏宽度：覆盖 base.css .main-content 的 24px padding */
.main-content.product-shell-main:has(.meiyu-shell[data-meiyu-shell="teacher"]) {
  padding-left: 0;
  padding-right: 0;
}

/* 教师品牌头：在学生 kiosk-brand 基础上合并提示文案 + 右侧视角徽标 */
.meiyu-kiosk-brand--teacher {
  margin-bottom: clamp(18px, 2.4vw, 26px);
  padding: clamp(16px, 2.2vw, 22px) clamp(20px, 2.8vw, 30px);
  align-items: center;
  justify-content: space-between;
}
.meiyu-kiosk-brand--teacher .meiyu-kiosk-brand-mark {
  margin-top: 0;
}
.meiyu-kiosk-brand--teacher .meiyu-kiosk-brand-text {
  min-width: 0;
}
.meiyu-kiosk-brand-lead {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
  max-width: 780px;
}
.meiyu-teacher-brand-pill {
  margin-left: auto;
  flex: none;
  align-self: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #7c4db8;
  background: linear-gradient(135deg, color-mix(in srgb, var(--meiyu-track-ai, #8B6FC0) 18%, transparent), color-mix(in srgb, #e879f9 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--meiyu-track-ai, #8B6FC0) 32%, transparent);
}

/* 教师视角切换按钮 — header meta 内与"教师视角"pill 同级 — F1 暖紫调统一 */
.meiyu-teacher-view-switch {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--meiyu-track-ai, #8B6FC0) 85%, black);
  background: color-mix(in srgb, var(--meiyu-track-ai, #8B6FC0) 10%, transparent);
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.meiyu-teacher-view-switch:hover {
  background: color-mix(in srgb, var(--meiyu-track-ai, #8B6FC0) 18%, transparent);
  color: color-mix(in srgb, var(--meiyu-track-ai, #8B6FC0) 95%, black);
}

/* 开发者工具栏 — 仅 platform_admin + ?dev=1 可见 */
.meiyu-dev-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: #1e1b4b;
  color: #e0e7ff;
  font-size: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.meiyu-dev-toolbar-label {
  font-weight: 900;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #ef4444;
  color: #fff;
  margin-right: 4px;
}
.meiyu-dev-toolbar-btn {
  padding: 3px 10px;
  border-radius: 4px;
  color: #a5b4fc;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.meiyu-dev-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e7ff;
}
.meiyu-dev-toolbar-btn.active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* 班级 dashlet：白卡 + 紫边 + 柔和阴影 */
.meiyu-teacher-dashlet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
  margin-top: 20px;
}
.meiyu-dash-card {
  border-radius: var(--mkx-radius-card);
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--mkx-border);
  color: var(--mkx-text);
  box-shadow: 0 2px 12px rgba(62, 46, 36, 0.06);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.2s;
}
.meiyu-dash-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.meiyu-dash-card--link:hover {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 8px 24px rgba(62, 46, 36, 0.12);
  transform: translateY(-2px);
}
.meiyu-dash-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b5cf6;
  font-weight: 700;
}
.meiyu-dash-card h2 {
  margin: 8px 0 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--mkx-text);
}
.meiyu-dash-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #64748b;
  margin: 0 0 14px;
}
.meiyu-dash-cta {
  font-weight: 700;
  color: var(--mkx-primary);
}
.meiyu-dash-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(26, 155, 138, 0.12));
  color: #6d28d9;
  border: 1px solid rgba(139, 92, 246, 0.25);
}
.meiyu-dash-badge--soon {
  background: rgba(148, 163, 184, 0.14);
  color: #64748b;
  border-color: rgba(148, 163, 184, 0.3);
}

/* dashlet 三卡分色：班级(蓝)｜创编(紫粉实色·唯一可点)｜授权(琥珀) */
.meiyu-dash-card--board {
  background: linear-gradient(155deg, #eef4ff 0%, #ffffff 75%);
  border-color: rgba(59, 130, 246, 0.28);
}
.meiyu-dash-card--board .meiyu-dash-kicker { color: #2563eb; }
.meiyu-dash-card--license {
  background: linear-gradient(155deg, #e8f5f0 0%, #ffffff 75%);
  border-color: rgba(245, 158, 11, 0.3);
}
.meiyu-dash-card--license .meiyu-dash-kicker { color: #b45309; }
.meiyu-dash-card--license .meiyu-dash-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(26, 155, 138, 0.12));
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.4);
}
.meiyu-dash-card--creative {
  background: linear-gradient(155deg, #f3efff 0%, #ffffff 75%);
  border-color: rgba(139, 92, 246, 0.38);
}
.meiyu-dash-card--creative .meiyu-dash-kicker { color: #7c3aed; }
.meiyu-dash-card--creative .meiyu-dash-cta { color: #6d28d9; }
.meiyu-dash-card--creative:hover {
  border-color: #8b5cf6;
  box-shadow: 0 14px 32px rgba(139, 92, 246, 0.22);
}

/* === CR-MEIYU-07.1 · 学生课堂入口（教师侧直达卡 + 预览横幅）=== */
.meiyu-student-entry-panel {
  margin: 20px 0;
  padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.6vw, 28px);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.06));
  border: 1px solid rgba(139, 92, 246, 0.22);
}
.meiyu-student-entry-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.meiyu-student-entry-header h2 {
  margin: 6px 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: var(--mkx-text);
}
.meiyu-student-entry-header .meiyu-dash-desc {
  max-width: 560px;
  color: #475569;
  margin: 0;
}
.meiyu-student-entry-header code {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.meiyu-student-entry-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.meiyu-student-entry-actions .meiyu-btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.38);
  background: rgba(255, 255, 255, 0.85);
  color: #6d28d9;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.meiyu-student-entry-actions .meiyu-btn-outline:hover {
  background: #ffffff;
  border-color: #8b5cf6;
  color: #5b21b6;
  transform: translateY(-1px);
}
.meiyu-student-entry-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.meiyu-student-entry-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--mkx-border);
  color: var(--mkx-text);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(30, 27, 75, 0.05);
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.meiyu-student-entry-card:hover {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 12px 28px rgba(99, 102, 241, 0.14);
  transform: translateY(-2px);
}
.meiyu-student-entry-card h3 {
  margin: 4px 0 2px;
  font-size: 17px;
  font-weight: 800;
  color: var(--mkx-text);
}
.meiyu-student-entry-card p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
}
.meiyu-student-entry-card .meiyu-dash-cta {
  margin-top: auto;
}

/* 三张课卡按题材染色 */
.meiyu-student-entry-card--amber {
  background: linear-gradient(155deg, #e8f5f0 0%, #ffffff 70%);
  border-color: rgba(245, 158, 11, 0.35);
}
.meiyu-student-entry-card--amber .meiyu-dash-kicker { color: #b45309; }
.meiyu-student-entry-card--amber .meiyu-dash-cta { color: #c2410c; }
.meiyu-student-entry-card--amber:hover {
  border-color: #f59e0b;
  box-shadow: 0 12px 28px rgba(245, 158, 11, 0.22);
}
.meiyu-student-entry-card--rose {
  background: linear-gradient(155deg, #fff1f5 0%, #ffffff 70%);
  border-color: rgba(26, 155, 138, 0.32);
}
.meiyu-student-entry-card--rose .meiyu-dash-kicker { color: #be185d; }
.meiyu-student-entry-card--rose .meiyu-dash-cta { color: #db2777; }
.meiyu-student-entry-card--rose:hover {
  border-color: #ec4899;
  box-shadow: 0 12px 28px rgba(26, 155, 138, 0.22);
}
.meiyu-student-entry-card--teal {
  background: linear-gradient(155deg, #ecfeff 0%, #ffffff 70%);
  border-color: rgba(14, 165, 233, 0.32);
}
.meiyu-student-entry-card--teal .meiyu-dash-kicker { color: #0369a1; }
.meiyu-student-entry-card--teal .meiyu-dash-cta { color: #0284c7; }
.meiyu-student-entry-card--teal:hover {
  border-color: #0ea5e9;
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.22);
}

@media (max-width: 640px) {
  .meiyu-kiosk-brand--teacher { flex-wrap: wrap; }
  .meiyu-teacher-brand-pill { margin-left: 0; }
  .meiyu-home-hero--teacher .meiyu-home-hero-illo { display: none; }
  .meiyu-student-entry-actions { width: 100%; }
}

/* CR-MEIYU-PREVIEW-OUTSIDE · 预览横幅：页面外 fixed 全宽浮层，不占页面布局 */
.meiyu-preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff8e1;
  border-bottom: 1px solid #ffd166;
  color: #7a5a00;
  font-size: 13px;
  flex-wrap: wrap;
  box-shadow: 0 2px 12px rgba(240, 180, 40, 0.18);
}
.meiyu-preview-banner-tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: #ffd166;
  color: #4a3728;
  font-weight: 700;
  font-size: 12px;
}
.meiyu-preview-banner-text { flex: 0 1 auto; }
.meiyu-preview-banner-exit {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  min-height: var(--touch-target-min, 44px);
  font-weight: 700;
  color: #7a5a00;
  text-decoration: none;
  border-bottom: 1px dashed rgba(122, 90, 0, 0.55);
  border-radius: 6px;
  transition: background 0.15s;
}
.meiyu-preview-banner-exit:hover { color: #4a3728; background: rgba(255, 209, 102, 0.18); }

/* 有预览横幅时，页面主体下移以避免被遮挡 */
body.has-meiyu-preview .meiyu-shell {
  padding-top: calc(var(--meiyu-stage-pad-top) + 48px);
  /* P3-1: 预览模式 kiosk 视图指示器 — 虚线边框标示学生 kiosk 内容范围 */
  border: 2px dashed rgba(255, 209, 102, 0.5);
  border-radius: 16px;
  margin-inline: 16px;
  position: relative;
}
body.has-meiyu-preview .meiyu-shell::before {
  content: "学生 Kiosk 视图区域";
  position: absolute;
  top: -12px;
  left: 24px;
  padding: 2px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #7a5a00;
  background: #fff8e1;
  border: 1px solid rgba(255, 209, 102, 0.6);
  border-radius: 4px;
  letter-spacing: 0.04em;
}
}

/* === CR-MEIYU-10 · Kiosk 教师后门（长按触点 + 解锁模态）=== */
.meiyu-kiosk-unlock-touchpoint {
  position: fixed;
  right: 6px;
  bottom: 6px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: rgba(120, 120, 140, 0.22);
  font-size: 18px;
  cursor: default;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 9998;
  touch-action: manipulation;
}
.meiyu-kiosk-unlock-touchpoint:focus { outline: none; }

.meiyu-kiosk-unlock-modal[hidden] { display: none !important; }
.meiyu-kiosk-unlock-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.meiyu-kiosk-unlock-dialog {
  width: min(360px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 24px 24px 20px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.35);
  color: #1e293b;
}
.meiyu-kiosk-unlock-dialog h3 {
  margin: 0 0 6px;
  font-size: 18px;
}
.meiyu-kiosk-unlock-desc {
  margin: 0 0 14px;
  font-size: 13px;
  color: #64748b;
}
.meiyu-kiosk-unlock-dialog input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font-size: 20px;
  letter-spacing: 0.4em;
  text-align: center;
  color: #1e293b;
  box-sizing: border-box;
}
.meiyu-kiosk-unlock-dialog input[type="password"]:focus {
  outline: none;
  border-color: var(--mkx-primary);
}
.meiyu-kiosk-unlock-feedback {
  min-height: 18px;
  margin: 10px 0 0;
  font-size: 13px;
  color: #b91c1c;
}
.meiyu-kiosk-unlock-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.meiyu-kiosk-unlock-actions button {
  padding: 9px 18px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #1e293b;
  font-size: 14px;
  cursor: pointer;
}
.meiyu-kiosk-unlock-actions button.primary {
  background: var(--mkx-primary);
  border-color: var(--mkx-primary);
  color: #fff;
  font-weight: 600;
}
.meiyu-kiosk-unlock-actions button.primary:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* === CR-MEIYU-10 · Kiosk 占位页（viewer 未授权时的友好壳）=== */
.meiyu-placeholder-kiosk {
  min-height: calc(100dvh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 48px);
}
.meiyu-placeholder-kiosk-card {
  width: min(560px, 100%);
  background: #fff;
  border-radius: 28px;
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
  box-shadow: 0 18px 48px rgba(60, 110, 200, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.22);
}
.meiyu-placeholder-kiosk-illo {
  width: 160px;
  height: auto;
  margin-bottom: 8px;
  opacity: 0.92;
}
.meiyu-placeholder-kiosk-card h2 {
  margin: 10px 0 10px;
  font-size: clamp(20px, 3vw, 28px);
  color: #1a3b6d;
}
.meiyu-placeholder-kiosk-card p {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
  color: #475569;
  margin: 6px 0;
}
.meiyu-placeholder-kiosk-hint {
  font-size: 13px !important;
  color: #64748b !important;
  margin-top: 14px !important;
  padding: 10px 14px;
  background: #f1f5f9;
  border-radius: 12px;
}

/* === CR-MEIYU-10 · 作品画廊 /meiyu/gallery ·（CR-MEIYU-27 A 继承 stage-max）=== */
.meiyu-gallery-shell {
  max-width: var(--meiyu-stage-max);
  margin: clamp(16px, 3vw, 32px) auto;
  padding: 0 var(--meiyu-stage-pad-x);
}
.meiyu-gallery-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.meiyu-gallery-title {
  font-size: clamp(20px, 2.6vw, 28px);
  margin: 0;
  color: #1a3b6d;
}
.meiyu-gallery-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.meiyu-gallery-filter {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.meiyu-gallery-filter.active {
  background: var(--mkx-primary);
  border-color: var(--mkx-primary);
  color: #fff;
  font-weight: 600;
}
.meiyu-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.meiyu-gallery-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 14px;
  box-shadow: 0 4px 16px rgba(30, 50, 90, 0.06);
}
.meiyu-gallery-card-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  background: #f1f5f9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cbd5e1'><path d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.9 13.98l2.1 2.53 3.1-3.99L19 18H5z'/></svg>") center/48px no-repeat;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.meiyu-gallery-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.meiyu-gallery-card-meta {
  font-size: 12px;
  color: #64748b;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.meiyu-gallery-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}
.meiyu-gallery-card-note {
  font-size: 13px;
  color: #475569;
  margin: 6px 0 0;
}
.meiyu-gallery-empty {
  padding: 48px;
  text-align: center;
  color: #64748b;
  background: #f8fafc;
  border-radius: 16px;
}
@media (max-width: 640px) {
  .meiyu-hud-row--sub {
    flex-direction: column;
    align-items: stretch;
  }
}

.meiyu-toast {
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  z-index: 100;
  font-size: 14px;
  max-width: 90vw;
}

body[data-age-band="upper"] #meiyu-hold-speak:not(.meiyu-voice-expanded) {
  display: none;
}
body[data-age-band="upper"] #meiyu-voice-extra {
  display: block !important;
}
body:not([data-age-band="upper"]) #meiyu-voice-extra {
  display: none !important;
}

/* 响应式断点：480 / 768 / 1200 */
@media (max-width: 1199px) {
  .meiyu-stage-inner {
    grid-template-columns: 120px 1fr;
  }
  .meiyu-phase-rail {
    padding: 10px 6px;
  }
  .meiyu-phase-rail.compact .meiyu-phase-dot .idx {
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .meiyu-stage-inner {
    grid-template-columns: 1fr;
  }
  .meiyu-phase-rail.meiyu-rail--row {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 0;
    z-index: 12;
    border-right: none;
    border-bottom: 1px solid var(--mkx-border);
    gap: 6px;
    padding: 10px 8px;
  }
  .meiyu-cast {
    grid-template-columns: 1fr;
  }
  .meiyu-upload-desktop {
    display: none;
  }
  .meiyu-upload-mobile {
    display: flex;
  }
}

@media (max-width: 479px) {
  .meiyu-bubble {
    max-width: 160px;
    font-size: 0.75em;
  }
  .meiyu-rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .meiyu-stage-inner {
    display: flex;
    flex-direction: column;
  }
  .meiyu-stage-main {
    order: 1;
  }
  .meiyu-phase-rail.meiyu-rail--row {
    order: 2;
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 0;
    max-height: min(46vh, 360px);
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
    transform: translateY(calc(100% + 12px));
    transition: transform 0.22s ease;
    z-index: 40;
    border-bottom: none;
  }
  html.meiyu-rail-open .meiyu-phase-rail.meiyu-rail--row {
    transform: translateY(0);
  }
  .meiyu-chat-log {
    margin-left: 0;
    margin-right: 0;
  }
  .meiyu-practice-upload {
    margin-left: 0;
    margin-right: 0;
  }
}

/* =========================================================================
 * CR-MEIYU-07 · Kiosk 专属壳（学生侧 · 只进不出 · 平板优先 · 放大视觉）
 * ========================================================================= */
.meiyu-kiosk-body {
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(255, 209, 102, 0.20), transparent 60%),
    radial-gradient(1000px 700px at 92% 0%, rgba(139, 92, 246, 0.18), transparent 58%),
    linear-gradient(180deg, #fff8f0 0%, #f3efff 60%, #eef1fa 100%);
  color: var(--mkx-text, #2D3436);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
.meiyu-kiosk-body[data-age-band="young"] {
  background:
    radial-gradient(1200px 720px at 10% -10%, rgba(255, 174, 128, 0.28), transparent 60%),
    radial-gradient(900px 680px at 92% 0%, rgba(255, 224, 130, 0.30), transparent 58%),
    linear-gradient(180deg, #fff5e6 0%, #fff8f0 55%, #fde9d8 100%);
}
.meiyu-kiosk-body[data-age-band="upper"] {
  background:
    radial-gradient(1100px 720px at 12% -10%, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(900px 680px at 92% 0%, rgba(56, 189, 248, 0.16), transparent 58%),
    linear-gradient(180deg, #f4f6fd 0%, #eef1fa 55%, #e6ecf7 100%);
}
.meiyu-kiosk-root {
  display: block;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(16px, 3vw, 32px) 0 calc(clamp(24px, 4vw, 48px) + var(--mkx-safe-bottom));
  box-sizing: border-box;
}

/* 品牌头：只进不出，纯展示 */
.meiyu-kiosk-brand {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0 auto clamp(20px, 3vw, 32px);
  max-width: 1440px;
  padding: clamp(14px, 2.2vw, 22px) clamp(18px, 3vw, 32px);
  border-radius: clamp(18px, 2.2vw, 28px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.72));
  border: 1px solid rgba(99, 102, 241, 0.18);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.meiyu-kiosk-brand-mark {
  flex: none;
  width: clamp(40px, 5vw, 56px);
  height: clamp(40px, 5vw, 56px);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--mkx-primary, #0F7B6C), #8b5cf6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.28);
}
.meiyu-kiosk-brand-mark img {
  width: 60%;
  height: 60%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18)) brightness(0) invert(1);
}
.product-brand-capsule .meiyu-kiosk-brand-mark img {
  width: 60%;
  height: 60%;
}
.meiyu-kiosk-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.meiyu-kiosk-brand-eyebrow {
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mkx-text, #2D3436) 60%, #64748b);
  font-weight: 700;
}
.meiyu-kiosk-brand-title {
  margin: 4px 0 0;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--mkx-primary, #0F7B6C), #8b5cf6 55%, #ec4899);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.product-brand-capsule .meiyu-kiosk-brand-title {
  margin: 0;
}

/* Kiosk 下的学生 shell：放大画布 + 更松弛的卡片网格 */
body.meiyu-kiosk-body .meiyu-shell[data-meiyu-shell="student"] {
  max-width: 1440px;
  padding: clamp(8px, 1.8vw, 20px) clamp(18px, 3vw, 36px) clamp(32px, 4vw, 56px);
  background: transparent;
  border-radius: 0;
  margin: 0 auto;
}

/* Hero 文案：更大更有呼吸感 · v1.1 kid-hero 活力升级 */
.meiyu-home-hero--student {
  margin: clamp(12px, 2.4vw, 24px) 0 clamp(20px, 3vw, 32px);
  text-align: center;
}
.meiyu-home-hero-copy {
  max-width: 780px;
  margin: 0 auto;
}
.meiyu-home-hero-eyebrow {
  margin: 0 0 8px;
  font-size: clamp(13px, 1.2vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mkx-primary);
  font-weight: 700;
}
.meiyu-home-hero-headline {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mkx-text, #3e2e24);
  background: linear-gradient(135deg, var(--mkx-primary) 0%, #ff9a6b 50%, var(--mkx-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.meiyu-home-hero--student .meiyu-lead {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.65;
  color: var(--mkx-text-soft, #6b5a4e);
  max-width: 640px;
  margin: 0 auto;
}
body.meiyu-kiosk-body .meiyu-home-hero--student .meiyu-lead {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto;
}

/* 学龄切换：按钮更大更触屏友好 */
body.meiyu-kiosk-body .meiyu-age-quick-pick {
  gap: clamp(10px, 1.2vw, 14px);
  margin: clamp(14px, 2vw, 20px) 0 clamp(18px, 2.4vw, 24px);
}
body.meiyu-kiosk-body .meiyu-age-pill {
  min-height: 52px;
  padding: 10px 20px;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
}

/* 课型卡：放大画面、加大内边距、桌面三列，更稳重 */
body.meiyu-kiosk-body .meiyu-lesson-cards {
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 30vw, 360px), 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(20px, 2.6vw, 28px);
}
body.meiyu-kiosk-body .meiyu-lesson-card {
  padding: clamp(18px, 2vw, 28px);
  gap: clamp(10px, 1.2vw, 16px);
  min-height: clamp(220px, 24vw, 300px);
  justify-content: space-between;
}
body.meiyu-kiosk-body .meiyu-lesson-card-art {
  width: clamp(120px, 14vw, 180px);
  aspect-ratio: 16 / 10;
}
body.meiyu-kiosk-body .meiyu-lesson-card-body h2 {
  font-size: clamp(19px, 1.8vw, 24px);
}
body.meiyu-kiosk-body .meiyu-lesson-card-body p {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
}
body.meiyu-kiosk-body .meiyu-lesson-card-cta {
  font-size: clamp(15px, 1.2vw, 17px);
}

/* 主 CTA：更大更醒目 */
body.meiyu-kiosk-body .meiyu-home-cta-wrap {
  margin: clamp(12px, 2vw, 20px) 0 clamp(24px, 3vw, 40px);
}
body.meiyu-kiosk-body .meiyu-home-main-cta {
  min-height: 64px;
  padding: 16px clamp(28px, 4vw, 48px);
  font-size: clamp(16px, 1.4vw, 20px);
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(99, 102, 241, 0.28);
}

/* Kiosk 下的课堂页：贴边、扩到全视口 */
body.meiyu-kiosk-body .meiyu-classroom-page {
  min-height: 100dvh;
  background: transparent;
}
body.meiyu-kiosk-body .meiyu-page-canvas {
  max-width: 1680px;
  padding: 0 clamp(12px, 2.2vw, 28px);
}

/* 教师页 kiosk 模式下不激活（教师走 base.html），此处仅给 viewer 起效 */

/* 响应式：小屏下适度收紧 */
@media (max-width: 767px) {
  .meiyu-kiosk-brand {
    margin-inline: 12px;
    padding: 14px 16px;
  }
  body.meiyu-kiosk-body .meiyu-lesson-card {
    min-height: 200px;
  }
}
@media (max-width: 479px) {
  .meiyu-kiosk-brand-title {
    font-size: 24px;
  }
  body.meiyu-kiosk-body .meiyu-home-main-cta {
    width: 100%;
  }
}

/* === CR-MEIYU-11 · 教师人审面板 /meiyu/review === */
.meiyu-review-shell {
  max-width: 1200px;
  margin: clamp(16px, 3vw, 32px) auto;
  padding: 0 clamp(14px, 2vw, 24px);
}
.meiyu-review-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.meiyu-review-title {
  font-size: clamp(20px, 2.4vw, 28px);
  color: #1a3b6d;
  margin: 0;
}
.meiyu-review-subtitle {
  color: #64748b;
  font-size: 14px;
  margin: 4px 0 0;
}
.meiyu-review-stats {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
}
.meiyu-review-stats > div {
  background: #eef2ff;
  border-radius: 12px;
  padding: 10px 18px;
  min-width: 96px;
  text-align: center;
}
.meiyu-review-stats dt {
  font-size: 12px;
  color: #475569;
  margin: 0;
}
.meiyu-review-stats dd {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: #1a3b6d;
}
.meiyu-review-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.meiyu-review-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(30, 50, 90, 0.05);
  transition: opacity .3s ease;
}
.meiyu-review-card-done { opacity: .35; pointer-events: none; }
.meiyu-review-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
}
.meiyu-review-lesson { font-weight: 600; color: #1a3b6d; }
.meiyu-review-phase {
  background: #eef2ff; padding: 2px 8px; border-radius: 999px;
}
.meiyu-review-card-body { font-size: 13px; color: #334155; display: flex; flex-direction: column; gap: 4px; }
.meiyu-review-trace code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; }
.meiyu-review-dim { color: #94a3b8; }
.meiyu-review-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.meiyu-review-comment {
  border: 1px solid #cbd5e1; border-radius: 10px; padding: 6px 10px;
  font-size: 13px; font-family: inherit; resize: vertical;
}
.meiyu-review-buttons { display: flex; gap: 8px; }
.meiyu-review-buttons .meiyu-btn { flex: 1; padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.meiyu-btn-approve { background: #22c55e; color: #fff; }
.meiyu-btn-reject  { background: #ef4444; color: #fff; }
.meiyu-btn-defer   { background: #e2e8f0; color: #334155; }
.meiyu-review-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 16px;
  color: #64748b;
  background: #f8fafc;
  border-radius: 16px;
}

/* CR-MEIYU-13 · 课件自编表单 */
.meiyu-autogen-propose {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.meiyu-autogen-propose label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #334155;
}
.meiyu-autogen-propose input,
.meiyu-autogen-propose textarea {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.meiyu-autogen-propose button { align-self: flex-start; }
.meiyu-autogen-mode { font-size: 12px; color: #64748b; margin-left: 8px; }

/* CR-MEIYU-13 · 课件自编表单 */
.meiyu-autogen-propose {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.meiyu-autogen-propose label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #334155;
}
.meiyu-autogen-propose input,
.meiyu-autogen-propose textarea {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.meiyu-autogen-propose button { align-self: flex-start; }
.meiyu-autogen-mode { font-size: 12px; color: #64748b; }

/* ===== CR-MEIYU-18 · 班级教务看板 ·（CR-MEIYU-27 A 继承 stage-max）===== */
.meiyu-board-shell {
  background: linear-gradient(155deg, #eef4ff 0%, #ffffff 70%);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 18px;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 30px);
  max-width: var(--meiyu-stage-max);
  margin: 0 auto 24px;
}
/* CR-MEIYU-BOARD-FULLSCREEN · 看板嵌入教师全屏外壳：去除卡片边框，铺满宽度 */
.meiyu-shell[data-meiyu-shell="teacher"] > .meiyu-board-shell,
.meiyu-shell[data-meiyu-shell="teacher"] .meiyu-page-viewport > .meiyu-board-shell {
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: clamp(16px, 2vw, 24px) clamp(16px, 2.4vw, 28px);
}
.meiyu-board-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.meiyu-board-header h1 {
  margin: 4px 0 6px;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  color: #0f172a;
}
.meiyu-board-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.meiyu-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.meiyu-board-card {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meiyu-board-card-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
}
.meiyu-board-card-hint {
  font-size: 12px;
  color: #64748b;
}
.meiyu-board-empty {
  padding: 18px;
  font-size: 14px;
  color: #64748b;
  text-align: center;
}
.meiyu-board-lessons h2,
.meiyu-board-students h2,
.meiyu-licenses-shell h2,
.meiyu-gov-shell h2 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px;
}
.meiyu-board-lessons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.meiyu-board-lesson-card {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meiyu-board-lesson-bar {
  height: 8px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  overflow: hidden;
}
.meiyu-board-lesson-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  transition: width 0.4s ease;
}
.meiyu-board-lesson-meta {
  margin: 0;
  font-size: 12px;
  color: #475569;
}
.meiyu-board-students-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meiyu-board-student-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  font-size: 13px;
  color: #334155;
  gap: 8px;
  flex-wrap: wrap;
}
.meiyu-board-student-hash {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-weight: 700;
  color: #0f172a;
}
.meiyu-board-student-meta { color: #64748b; }

/* admin rail（治理面板入口）*/
.meiyu-teacher-admin-rail {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===== CR-MEIYU-19 · 课包与授权 ·（CR-MEIYU-27 A 继承 stage-max）===== */
.meiyu-licenses-shell {
  background: linear-gradient(155deg, #e8f5f0 0%, #ffffff 70%);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 18px;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 30px);
  max-width: var(--meiyu-stage-max);
  margin: 0 auto 24px;
}
.meiyu-licenses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
}
.meiyu-license-card {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meiyu-license-card h3 {
  margin: 0;
  font-size: 16px;
  color: #0f172a;
}
.meiyu-license-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  align-self: flex-start;
}
.meiyu-license-badge--public {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.meiyu-license-badge--authorized {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.meiyu-license-badge--pilot {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.meiyu-license-meta {
  font-size: 12px;
  color: #475569;
  margin: 0;
}
.meiyu-license-grant-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.meiyu-license-grant-table th,
.meiyu-license-grant-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

/* ===== CR-MEIYU-21 · 治理审计面板 ·（CR-MEIYU-27 A 继承 stage-max）===== */
.meiyu-gov-shell {
  background: linear-gradient(155deg, #eef2ff 0%, #ffffff 70%);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 18px;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 26px);
  max-width: var(--meiyu-stage-max);
  margin: 0 auto 24px;
}
.meiyu-gov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.meiyu-gov-card {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.meiyu-gov-card h3 {
  margin: 0;
  font-size: 15px;
  color: #0f172a;
}
.meiyu-gov-card pre {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  overflow: auto;
  max-height: 260px;
}
.meiyu-gov-card .meiyu-gov-error {
  color: #dc2626;
  font-size: 12px;
}

/* ===== CR-MEIYU-20 · 家长成长档案雷达与折线 ===== */
.meiyu-parent-growth {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.meiyu-parent-growth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.meiyu-parent-radar svg,
.meiyu-parent-series svg {
  width: 100%;
  height: auto;
  display: block;
}
.meiyu-parent-growth-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .meiyu-parent-growth-row { grid-template-columns: 1fr; }
}

/* ===== 平板体验（iPad / Surface · 768px–1279px · 触摸优先） =====
 * CR-MEIYU-27 A 后，--meiyu-tap-min / --meiyu-tap-min-compact 已在顶部 :root 定义（56/44），
 * 此处不再重复以免覆盖为 48。 */

/* 触摸/指针粗糙设备（平板 / 触屏一体机）：抬热区、缩小 hover 态 */
@media (hover: none) and (pointer: coarse) {
  .meiyu-btn,
  .meiyu-btn-outline,
  .meiyu-btn-primary,
  .meiyu-btn-secondary,
  .meiyu-btn-ghost,
  .meiyu-dash-card,
  .meiyu-student-entry-card,
  .meiyu-lesson-card,
  .meiyu-age-pill {
    min-height: var(--meiyu-tap-min);
  }
  .meiyu-btn,
  .meiyu-btn-outline {
    padding: 0.85rem 1.2rem;
  }
  .meiyu-dash-card:hover,
  .meiyu-student-entry-card:hover,
  .meiyu-lesson-card:hover {
    transform: none;
  }
  .meiyu-dash-card:active,
  .meiyu-student-entry-card:active,
  .meiyu-lesson-card:active {
    transform: scale(0.985);
    transition: transform 0.12s ease;
  }
  .meiyu-age-pill { padding: 0.7rem 1.1rem; }
  .meiyu-bottom-bar .meiyu-btn { min-height: var(--meiyu-tap-min); }
}

/* 平板竖向（768–1023）：单列课卡 + 紧凑首屏 */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .meiyu-shell,
  .meiyu-board-shell,
  .meiyu-licenses-shell,
  .meiyu-gov-shell {
    padding-left: clamp(14px, 2.4vw, 22px);
    padding-right: clamp(14px, 2.4vw, 22px);
  }
}
  .meiyu-teacher-dashlet {
    grid-template-columns: 1fr;
  }
  .meiyu-student-entry-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .meiyu-lesson-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .meiyu-board-header,
  .meiyu-student-entry-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .meiyu-board-actions,
  .meiyu-student-entry-actions {
    flex-wrap: wrap;
    gap: 10px;
  }
  .meiyu-gov-grid {
    grid-template-columns: 1fr;
  }
}

/* 平板横向（1024–1279）：保两列课卡 + 收紧看板 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .meiyu-teacher-dashlet {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .meiyu-student-entry-cards,
  .meiyu-lesson-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .meiyu-gov-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 平板通用：首屏无横向滚动 + 品牌头收紧 */
@media (min-width: 768px) and (max-width: 1279px) {
  html, body { overflow-x: hidden; }
  .meiyu-kiosk-brand {
    padding: clamp(10px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
  }
  .meiyu-kiosk-brand-title { font-size: clamp(20px, 2.4vw, 28px); }
  .meiyu-home-hero-headline { font-size: clamp(24px, 3.2vw, 34px); }
}

/* ================= CR-MEIYU-24 · F 段创作工坊 =================
 * P2-FIX7（2026-04-21）：工坊搬入 .meiyu-teaching-card 内作为题板 F 段内嵌组件，
 * 不再做独立大卡片。改动点：
 *   - 脱掉米黄外壳（#fffdf7 / border / box-shadow / max-width）
 *   - margin: 外层改贴题板边界、上顶一个分隔线
 *   - grid 从两列改为单列（因 teaching-card 本身只占右半屏，再切两列会挤）
 *   - 文本色/底色改与主 app 白卡同调，紫白系替代米黄系
 */
.meiyu-f-stage-studio {
  margin: 12px 0 0;
  padding: 14px 0 4px;
  background: transparent;
  border: 0;
  border-top: 1px dashed rgba(99, 102, 241, 0.2);
  border-radius: 0;
  box-shadow: none;
}
.meiyu-f-stage-head {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meiyu-f-stage-eyebrow {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15, 123, 108, 0.12), rgba(139, 92, 246, 0.14));
  color: var(--mkx-primary, #0F7B6C);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* 遗留 h2 样式：搬迁后模板不再用 .meiyu-f-stage-title，保留以防外部回归 */
.meiyu-f-stage-title {
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--mkx-text, #1f2937);
}
.meiyu-f-stage-lead {
  margin: 0;
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.55;
}
.meiyu-f-stage-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}
.meiyu-f-stage-form { display: flex; flex-direction: column; gap: 12px; }
.meiyu-f-stage-field { display: flex; flex-direction: column; gap: 6px; }
.meiyu-f-stage-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mkx-text, #1f2937);
}
.meiyu-f-stage-radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.meiyu-f-stage-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  color: var(--mkx-text, #1f2937);
  cursor: pointer;
  min-height: 36px;
  transition: background 0.12s, border-color 0.12s;
}
.meiyu-f-stage-radio:hover { background: #fff; border-color: rgba(99, 102, 241, 0.45); }
.meiyu-f-stage-radio input { accent-color: var(--mkx-primary, #0F7B6C); }
.meiyu-f-stage-textarea {
  width: 100%;
  resize: vertical;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 12px;
  background: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mkx-text, #1f2937);
  font-family: inherit;
}
.meiyu-f-stage-textarea:focus {
  outline: none;
  border-color: var(--mkx-primary, #0F7B6C);
  box-shadow: 0 0 0 3px rgba(15, 123, 108, 0.18);
}
.meiyu-f-stage-hint { font-size: 11.5px; color: #94a3b8; }
.meiyu-f-stage-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.meiyu-f-stage-status {
  font-size: 12.5px;
  color: #64748b;
}
.meiyu-f-stage-status.is-ok { color: #16a34a; }
.meiyu-f-stage-status.is-block { color: #d97706; }
.meiyu-f-stage-status.is-error { color: #dc2626; }
.meiyu-f-stage-result {
  background: linear-gradient(180deg, #fbfaff, #f5f3ff);
  border: 1px solid rgba(99, 102, 241, 0.16);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.meiyu-f-stage-figure { margin: 0; text-align: center; }
.meiyu-f-stage-artifact {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 10px;
  background: #fff;
}
.meiyu-f-stage-figcap {
  margin-top: 8px;
  font-size: 11.5px;
  color: #64748b;
}
.meiyu-f-stage-history {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(99, 102, 241, 0.2);
}
.meiyu-f-stage-history-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mkx-text, #1f2937);
}
.meiyu-f-stage-history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.meiyu-f-stage-history-list li {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(99, 102, 241, 0.14);
  border-radius: 10px;
  padding: 6px;
  text-align: center;
}
.meiyu-f-stage-history-list img {
  width: 100%;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  background: #fff;
}
.meiyu-f-stage-history-list .meiyu-f-stage-history-meta {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  color: #94a3b8;
}
/* 遗留 media query：P2-FIX7 后 grid 已改为 flex 单列，保留以防外部引用 */
@media (max-width: 899px) {
  .meiyu-f-stage-grid { grid-template-columns: 1fr; }
}

/* CR-MEIYU-26 · 班级级课堂自定义面板 */
.meiyu-board-customize {
  margin-top: 32px;
  padding: 20px;
  background: #fffdf7;
  border: 1px solid var(--meiyu-line, #e8e1d0);
  border-radius: 14px;
}
.meiyu-board-customize h2 {
  margin: 0 0 4px 0;
  font-size: 18px;
  color: #3a2c18;
}
.meiyu-customize-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin-top: 12px;
}
.meiyu-customize-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #5a4a32;
}
.meiyu-customize-form input[type="text"],
.meiyu-customize-form select,
.meiyu-customize-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--meiyu-line, #e8e1d0);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  min-height: var(--meiyu-tap-min, 44px);
}
.meiyu-customize-form textarea {
  resize: vertical;
}
.meiyu-customize-wide {
  grid-column: 1 / -1;
}
.meiyu-customize-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.meiyu-customize-status {
  font-size: 13px;
  color: #6b5a3a;
  min-height: 18px;
}
@media (max-width: 899px) {
  .meiyu-customize-form { grid-template-columns: 1fr; }
}

/* CR-MEIYU-27 C · 手绘画布 modal（D_practice 阶段 · 学生 sketch → AI 重绘）
 * 设计意图：全屏 modal，左「我画」右「AI 重绘」并排；平板横竖都可用。
 * 背景：body 加 .meiyu-sketch-open 时禁止后层滚动，避免画布被滚走。
 */
.meiyu-sketch-modal {
  position: fixed;
  inset: 0;
  /* CR-MEIYU-28 E · classroom 的 sticky <nav> 有 z-index:10100，之前 1800 被遮
     panel 顶部 title，学生以为是上一屏残留；这里一次抬到 10500 真正浮到最上。 */
  z-index: 10500;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.meiyu-sketch-modal[hidden] {
  display: none;
}
body.meiyu-sketch-open {
  overflow: hidden;
}
.meiyu-sketch-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 28, 48, 0.52);
  backdrop-filter: blur(2px);
}
.meiyu-sketch-panel {
  position: relative;
  z-index: 1;
  margin: auto;
  max-width: min(1240px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  width: 100%;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 48px rgba(24, 28, 48, 0.26);
  padding: clamp(12px, 1.6vw, 20px);
  /* CR-MEIYU-28 E · panel 是 flex column，stage 区 flex:1 填满，所有滚动收在右 pane 内 */
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}
.meiyu-sketch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.meiyu-sketch-title {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 22px);
  color: #2a3a7a;
}
.meiyu-sketch-close {
  min-height: var(--meiyu-tap-min-compact, 44px);
}
.meiyu-sketch-lead {
  margin: 0;
  color: #5b6478;
  font-size: 14px;
}
/* CR-MEIYU-28 E · compact 版 lead：分屏后不需要多话，一屏节省垂直像素 */
.meiyu-sketch-lead--compact {
  font-size: 12px;
  color: #7b8296;
  margin: 0;
}

/* CR-MEIYU-28 E · 左右分屏：data-phase 驱动列宽伸缩
   - draw   ：左 2.1fr 右 1fr  —— 学生在画布上，右边给"看见/渔/建议"足够读
   - reflect：左 1fr 右 2.1fr —— 艺家反馈上场，变奏图 + 三张卡舒展到主位
   过渡 420ms 让学生察觉"画 → 反馈"的节奏切换。 */
.meiyu-sketch-stage {
  display: grid;
  grid-template-columns: var(--meiyu-sketch-left, 2.1fr) var(--meiyu-sketch-right, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns 420ms cubic-bezier(.4, .2, .2, 1);
}
.meiyu-sketch-stage[data-phase="draw"] {
  --meiyu-sketch-left: 2.1fr;
  --meiyu-sketch-right: 1fr;
}
.meiyu-sketch-stage[data-phase="reflect"] {
  --meiyu-sketch-left: 1fr;
  --meiyu-sketch-right: 2.1fr;
}

/* 左 pane：画布 + brief；高度受 stage 约束，canvas 自动缩 */
.meiyu-sketch-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
/* 右 pane：AI 变奏 + 三张 aside；只在这里允许纵向滚动（右侧信息密度大） */
.meiyu-sketch-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.meiyu-sketch-right::-webkit-scrollbar { width: 6px; }
.meiyu-sketch-right::-webkit-scrollbar-thumb { background: #d4daf0; border-radius: 3px; }

.meiyu-sketch-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f6f8ff;
  border: 1px solid #dfe5ff;
  border-radius: 14px;
  padding: 10px;
}
/* CR-MEIYU-28 E · canvas 图层随 pane 宽度等比缩；不再靠 aspect-ratio 卡死比例，
   而是让 canvas 填满左 pane 剩余高度（max-height），保证一屏不滚。 */
.meiyu-sketch-figure--mine {
  flex: 1 1 auto;
  min-height: 0;
}
.meiyu-sketch-figure--ai {
  flex: 0 0 auto;
}
.meiyu-sketch-figcap {
  font-weight: 600;
  color: #2a3a7a;
  font-size: 14px;
}
/* CR-MEIYU-28 E · canvas 包裹层：吞掉 figure 剩余高度（flex:1 + min-height:0），
   作为 canvas height:100% 的 definite 参照。居中对齐 → 当 left pane 变窄时 canvas
   按 aspect-ratio 保 3:2，在 wrap 内留白居中，不会被拉扁。 */
.meiyu-sketch-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.meiyu-sketch-canvas {
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 3 / 2;
  background: #ffffff;
  border: 1px solid #c9d3ff;
  border-radius: 10px;
  touch-action: none;
  cursor: crosshair;
  display: block;
  /* CR-MEIYU-28 E · buffer=720×480（3:2）与 CSS aspect-ratio 对齐，保证 PNG 与视觉一致；
     pointer 坐标已按 rect scaleX/scaleY 校正，即便 CSS 尺寸在 phase 切换时变化也不错位。 */
}
.meiyu-sketch-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.meiyu-sketch-tool {
  min-height: var(--meiyu-tap-min-compact, 44px);
  padding: 0 14px;
}
.meiyu-sketch-tool[aria-pressed="true"] {
  outline: 2px solid #4b5cff;
  outline-offset: 2px;
}
.meiyu-sketch-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #5b6478;
}
.meiyu-sketch-size input[type="range"] {
  width: 96px;
}
.meiyu-sketch-colors {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.meiyu-sketch-color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #c9d3ff;
  cursor: pointer;
  padding: 0;
}
.meiyu-sketch-color[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #4b5cff;
}
.meiyu-sketch-clear {
  min-height: var(--meiyu-tap-min-compact, 44px);
  margin-left: auto;
}
/* CR-MEIYU-28 A · 画布撤销/重做按钮（与 clear 同 tap 标准；禁用态半透明） */
.meiyu-sketch-undo,
.meiyu-sketch-redo {
  min-height: var(--meiyu-tap-min-compact, 44px);
  font-variant-numeric: tabular-nums;
}
.meiyu-sketch-undo[disabled],
.meiyu-sketch-redo[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.meiyu-sketch-ai-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #ffffff;
  border: 1px dashed #c9d3ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* CR-MEIYU-28 E · reflect 态右 pane 宽了但整屏要容下『看见/渔/建议』三张卡
   AI 图 max-height 收到 min(36vh, 300px)：变奏图仍显眼，下方 ~270px 留给三张卡
   不用滚就能看到。真实接入 LLM 后生成图仍按 3:2 等比缩，不会变形。
   同时把 figure--ai 内边距收紧到 6px，再省 8px 总高。 */
.meiyu-sketch-stage[data-phase="reflect"] .meiyu-sketch-ai-slot {
  /* 270px ≈ stage 2 下 teaches 卡两行 + sees + notes 合计之后的剩余预算下限；
     右 pane 宽 802 时 AI 图按 3:2 显示为 ~405×270，观感仍是"主要信息"而非"缩略"。 */
  max-height: min(32vh, 270px);
}
.meiyu-sketch-stage[data-phase="reflect"] .meiyu-sketch-figure--ai {
  padding: 6px 8px;
  gap: 4px;
}
.meiyu-sketch-ai-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* CR-MEIYU-28 D · class 选择器权重盖过原生 [hidden]，stage 0 分支需要真正隐藏 img
   才能把画位让给『可以带走的一句』卡。加一条 [hidden] 复合选择器，权重 (0,2,0)。 */
.meiyu-sketch-ai-img[hidden] { display: none; }
.meiyu-sketch-ai-empty {
  text-align: center;
  color: #7b8296;
  font-size: 14px;
  padding: 16px;
}
.meiyu-sketch-ai-empty-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 6px;
}

/* ─── CR-MEIYU-29-PHILOSOPHY · 艺家罢笔占位（stage 0） ──────────────────
   产品语义：艺家决定"这一笔让孩子自己画"，不出 AI 图。之前直接把 empty 藏掉导致
   艺家卡中央空白（2026-04-21 大王截图验证）；现在给一个温柔的显式占位：
   画笔"放下" 图标 + 主文案"这一笔 · 你说了算" + 副文案 + 向下箭头指启发性问题卡。 */
.meiyu-sketch-ai-stage0 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 24px;
  text-align: center;
  background: linear-gradient(135deg, #fff8e4 0%, #ffefe0 100%);
  border-radius: 12px;
  color: #6a4a1a;
}
.meiyu-sketch-ai-stage0[hidden] { display: none !important; }
.meiyu-sketch-ai-stage0-icon {
  font-size: 48px;
  line-height: 1;
  animation: meiyu-stage0-brush-rest 2400ms ease-in-out infinite;
}
@keyframes meiyu-stage0-brush-rest {
  0%, 55%, 100% { transform: rotate(-18deg) translateY(0); }
  65%           { transform: rotate(-18deg) translateY(-4px); }
  75%           { transform: rotate(-18deg) translateY(0); }
}
.meiyu-sketch-ai-stage0-main {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #8a5a10;
}
.meiyu-sketch-ai-stage0-tip {
  margin: 0;
  font-size: 13px;
  color: #8b6b42;
  max-width: 280px;
  line-height: 1.55;
}
.meiyu-sketch-ai-stage0-arrow {
  margin-top: 4px;
  font-size: 20px;
  color: #c49030;
  animation: meiyu-stage0-arrow-nudge 1800ms ease-in-out infinite;
}
@keyframes meiyu-stage0-arrow-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .meiyu-sketch-ai-stage0-icon,
  .meiyu-sketch-ai-stage0-arrow { animation: none; }
}

/* ─── UX-MEIYU-2604 · 艺家变奏卡中央"正在重绘"等待态 ────────────────────
 * 大王产品指向：重绘过程中"艺家变奏"卡心智上应该"正在为你变奏哦"，
 * 孩子盯的主视觉焦点要有动的东西，让她愿意等。
 *
 * 动效构成（纯 CSS keyframes，零 JS 成本）：
 *   1. 四色调色盘圆点，依次延时 0/180/360/540ms 跳动 → 彩色波浪感
 *   2. 小画笔 🖌️ 沿着圆点行左右来回扫 → 视觉上"老师正在作画"
 *   3. 主文案「艺家正在为你变奏…」静态锚定
 *   4. 副文案由 JS 每 3s 更新（起形/上色/加细节/打磨）
 *   5. 底部不确定态 shimmer 进度条 → "一直在动"的心理安慰（永不满格，因为
 *      真实耗时未知；到了就直接切到变奏图）
 *
 * 显隐：与 ai-img / ai-empty 共用 .meiyu-sketch-ai-slot flex-center 槽位；
 * 同一时刻三者只有一个可见（[hidden] → display: none）。
 */
.meiyu-sketch-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 20px;
  width: 100%;
  max-width: 320px;
  text-align: center;
}
.meiyu-sketch-ai-loading[hidden] { display: none; }

/* 调色盘四色圆点 + 画笔容器 */
.meiyu-sketch-paint-palette {
  position: relative;
  width: 140px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.meiyu-sketch-paint-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(30, 27, 75, 0.12);
  animation: meiyu-sketch-paint-dot-pulse 1.5s ease-in-out infinite;
  transform-origin: center;
}
.meiyu-sketch-paint-dot--red    { background: #ef6d6d; animation-delay: 0s; }
.meiyu-sketch-paint-dot--yellow { background: #f2c94c; animation-delay: 0.18s; }
.meiyu-sketch-paint-dot--blue   { background: #6b9cff; animation-delay: 0.36s; }
.meiyu-sketch-paint-dot--green  { background: #4bbf82; animation-delay: 0.54s; }

@keyframes meiyu-sketch-paint-dot-pulse {
  0%, 60%, 100% {
    transform: scale(0.82);
    opacity: 0.55;
  }
  30% {
    transform: scale(1.22);
    opacity: 1;
  }
}

/* 画笔沿调色盘左右扫动 */
.meiyu-sketch-paint-brush {
  position: absolute;
  top: -8px;
  left: 0;
  font-size: 22px;
  line-height: 1;
  animation: meiyu-sketch-paint-brush-swing 2.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 3px rgba(30, 27, 75, 0.14));
}
@keyframes meiyu-sketch-paint-brush-swing {
  0%   { transform: translateX(0)     rotate(-10deg); }
  25%  { transform: translateX(40px)  rotate(6deg); }
  50%  { transform: translateX(80px)  rotate(-4deg); }
  75%  { transform: translateX(120px) rotate(8deg); }
  100% { transform: translateX(0)     rotate(-10deg); }
}

/* 主副文案 */
.meiyu-sketch-ai-loading-main {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--mkx-text, #1f2937);
  letter-spacing: 0.02em;
}
.meiyu-sketch-ai-loading-tip {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  min-height: 1.5em;
  transition: opacity 0.2s ease;
}

/* CR-MEIYU-30-REV1 · 三阶段进度指示器 */
.meiyu-sketch-ai-phase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 8px 0 2px;
}
.meiyu-sketch-ai-phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.meiyu-sketch-ai-phase-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  transition: all 0.4s ease;
}
.meiyu-sketch-ai-phase-step--active .meiyu-sketch-ai-phase-dot {
  background: #6366f1;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
  animation: meiyu-phase-pulse 1.2s ease-in-out infinite;
}
.meiyu-sketch-ai-phase-step--done .meiyu-sketch-ai-phase-dot {
  background: #10b981;
}
.meiyu-sketch-ai-phase-label {
  font-size: 11px;
  color: #9ca3af;
  transition: color 0.3s ease;
}
.meiyu-sketch-ai-phase-step--active .meiyu-sketch-ai-phase-label {
  color: #4f46e5;
  font-weight: 600;
}
.meiyu-sketch-ai-phase-step--done .meiyu-sketch-ai-phase-label {
  color: #10b981;
}
.meiyu-sketch-ai-phase-connector {
  width: 24px;
  height: 2px;
  background: #d1d5db;
  margin: 0 4px;
  margin-bottom: 14px;
  transition: background 0.4s ease;
  border-radius: 999px;
}
/* 已走过段的连接线变绿 */
.meiyu-sketch-ai-phase-step--done + .meiyu-sketch-ai-phase-connector {
  background: #a7f3d0;
}
@keyframes meiyu-phase-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* 不确定态 shimmer 进度条 */
.meiyu-sketch-ai-loading-bar {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.14));
  overflow: hidden;
}
.meiyu-sketch-ai-loading-bar-shimmer {
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(15, 123, 108, 0) 0%,
    rgba(15, 123, 108, 0.85) 50%,
    rgba(139, 92, 246, 0) 100%
  );
  animation: meiyu-sketch-ai-loading-shimmer 1.6s linear infinite;
}
@keyframes meiyu-sketch-ai-loading-shimmer {
  0%   { transform: translateX(0); }
  100% { transform: translateX(350%); }
}

/* 无障碍：用户系统设置 "减少动画" 时降级为静态呼吸 */
@media (prefers-reduced-motion: reduce) {
  .meiyu-sketch-paint-dot,
  .meiyu-sketch-paint-brush,
  .meiyu-sketch-ai-loading-bar-shimmer {
    animation-duration: 3.2s;
    animation-timing-function: ease-in-out;
  }
  .meiyu-sketch-paint-brush {
    animation: none;
  }
}

.meiyu-sketch-brief-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meiyu-sketch-brief-label {
  font-size: 13px;
  color: #5b6478;
}
.meiyu-sketch-brief {
  padding: 10px 12px;
  border: 1px solid #c9d3ff;
  border-radius: 10px;
  font: inherit;
  min-height: var(--meiyu-tap-min-compact, 44px);
}
.meiyu-sketch-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.meiyu-sketch-actions .meiyu-btn {
  min-height: var(--meiyu-tap-min, 56px);
  padding: 0 20px;
}
.meiyu-sketch-status {
  font-size: 13px;
}
.meiyu-sketch-status[data-tone="ok"] { color: #1f9d6a; }
.meiyu-sketch-status[data-tone="busy"] { color: #4b5cff; }
.meiyu-sketch-status[data-tone="warn"] { color: #c07000; }
.meiyu-sketch-status[data-tone="err"] { color: #c03040; }

/* CR-MEIYU-28 B · director_review.plan 教学向反馈面板 */
.meiyu-sketch-reviewer-notes {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e2e4f5;
  background: #f6f8ff;
  color: #222;
  font-size: 13px;
  line-height: 1.55;
}
.meiyu-sketch-reviewer-notes[data-mode="blocked"] {
  background: #fff5f1;
  border-color: #f3c7b8;
}
.meiyu-sketch-reviewer-notes[data-mode="soft"] {
  background: #fffbe8;
  border-color: #f0e3a8;
}
.meiyu-sketch-reviewer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.meiyu-sketch-reviewer-role {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #4b5cff;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.meiyu-sketch-reviewer-notes[data-mode="blocked"] .meiyu-sketch-reviewer-role {
  background: #c85a3c;
}
.meiyu-sketch-reviewer-notes[data-mode="soft"] .meiyu-sketch-reviewer-role {
  background: #c89020;
}
.meiyu-sketch-reviewer-subtitle {
  color: #555;
  font-size: 12px;
}
.meiyu-sketch-reviewer-list {
  list-style: disc inside;
  margin: 0;
  padding: 0;
}
.meiyu-sketch-reviewer-item {
  margin: 2px 0;
}

/* ─── CR-MEIYU-29-PHILOSOPHY · 老师建议折叠入口（渐进露出 · §支柱二） ──────── */
/* 默认折叠：只显一行"老师 · 一个小建议 ▾"，孩子不看细节就不看。点开才展开。
   按钮本身 44px 高命中 tap target，箭头旋转给"可以展开"的视觉线索。 */
.meiyu-sketch-reviewer-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  min-height: 40px;
  color: inherit;
  font: inherit;
  transition: background-color 160ms ease;
}
.meiyu-sketch-reviewer-toggle:hover,
.meiyu-sketch-reviewer-toggle:focus-visible {
  background: rgba(200, 144, 32, 0.08);
  outline: none;
}
.meiyu-sketch-reviewer-toggle-arrow {
  margin-left: auto;
  font-size: 14px;
  color: #888;
  transition: transform 200ms ease;
}
.meiyu-sketch-reviewer-notes[data-collapsed="1"] .meiyu-sketch-reviewer-toggle-arrow {
  transform: rotate(0deg);
}
.meiyu-sketch-reviewer-notes[data-collapsed="0"] .meiyu-sketch-reviewer-toggle-arrow {
  transform: rotate(180deg);
}
/* 折叠态下 list 隐藏（JS 也会同步 hidden 属性，双保险）；展开态微上入场动画 */
.meiyu-sketch-reviewer-notes[data-collapsed="1"] .meiyu-sketch-reviewer-list {
  display: none;
}
.meiyu-sketch-reviewer-notes[data-collapsed="0"] .meiyu-sketch-reviewer-list {
  padding-left: 10px;
  animation: meiyu-reviewer-slide-in 200ms ease-out;
}
@keyframes meiyu-reviewer-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .meiyu-sketch-reviewer-toggle-arrow { transition: none; }
  .meiyu-sketch-reviewer-notes[data-collapsed="0"] .meiyu-sketch-reviewer-list { animation: none; }
}

/* CR-MEIYU-28-C′ · 「它看见了你的画」小卡（镜子 · 唤醒三动词之首：摇动） */
.meiyu-sketch-reviewer-sees {
  margin-top: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid #c9e0ff;
  background: linear-gradient(135deg, #eef4ff 0%, #f6fbff 100%);
  color: #1a2750;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 1px 2px rgba(60, 80, 160, 0.06);
}
.meiyu-sketch-reviewer-sees-icon {
  flex: 0 0 auto;
  font-size: 18px;
  color: #3a67c8;
  line-height: 1;
  margin-top: 1px;
}
.meiyu-sketch-reviewer-sees-body {
  flex: 1 1 auto;
  min-width: 0;
}
.meiyu-sketch-reviewer-sees-title {
  display: block;
  font-weight: 600;
  color: #2a3a7a;
  font-size: 12px;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.meiyu-sketch-reviewer-sees-text {
  margin: 0;
  color: #1a2750;
}
/* CR-MEIYU-28 D · class display 盖 [hidden] 的同桩问题一次性补齐
   CR-MEIYU-29-PHILOSOPHY · 2026-04-21 补齐内部 title/role/subtitle：
   HTML5 hidden 的 CSS 权重最低（等价于 display: none，但被任何显式 display 覆盖）。
   下面这些节点在哲学重构里被 hidden 但因自身 display 规则仍显示，逐一显式压回 none。 */
.meiyu-sketch-reviewer-sees[hidden],
.meiyu-sketch-reviewer-notes[hidden],
.meiyu-sketch-reviewer-sees-title[hidden],
.meiyu-sketch-reviewer-role[hidden],
.meiyu-sketch-reviewer-subtitle[hidden],
.meiyu-sketch-lead--compact[hidden],
.meiyu-sketch-bridge[hidden] { display: none !important; }

/* CR-MEIYU-28 E · 原 .meiyu-sketch-bridge 浮标在左右分屏版里不再需要
   （两 pane 之间自然分割已足够传达"你画的 × 它启发了它"的对位关系），
   DOM 已从 partial 模板移除；保留兼容：即便别处残存该 class 也不显。 */
.meiyu-sketch-bridge { display: none; }

/* CR-MEIYU-28-C′ · 学生审美主权按钮（「我更喜欢我自己的」）
   CR-MEIYU-28 E · 在 reflect 态浮到 AI 变奏图右下角（absolute）省出右 pane 纵向空间，
   让下方三张卡（看见/渔/建议）在 1280×800 平板上不用滚就能一屏看全。 */
.meiyu-sketch-prefer-own {
  margin-top: 8px;
  align-self: flex-start;
  color: #a4457a;
  border-color: #eac9dc;
  background: #fdf4f9;
}
.meiyu-sketch-figure--ai { position: relative; }
.meiyu-sketch-stage[data-phase="reflect"] .meiyu-sketch-prefer-own {
  position: absolute;
  right: 14px;
  bottom: 14px;
  margin-top: 0;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(24, 28, 48, 0.14);
}
.meiyu-sketch-prefer-own:hover:not(:disabled) {
  background: #fbe9f1;
}
.meiyu-sketch-prefer-own[data-marked="1"] {
  color: #5a8a5a;
  background: #eef8ee;
  border-color: #c6e2c6;
}
/* CR-MEIYU-28 D · 同『ai-img[hidden]』的修法：button.meiyu-btn 有 display:inline-flex
   盖掉了原生 [hidden] → stage 0 时『我更喜欢我自己的』按钮无法真正隐藏。 */
.meiyu-sketch-prefer-own[hidden] { display: none; }

/* CR-MEIYU-28 D · 艺家『可以带走的一句』/ 『下一笔，你说了算』—— 渔，非鱼（唤醒）
   视觉上与 reviewer-sees（镜子 ◉）成呼应：同属柔色系 aside 小卡，但以暖米色 + ◐
   半月图标作区分（观察→唤醒的对比）。stage 0 时由 JS 把变奏图位置让给这张卡，
   此时卡片会被衬得稍重一些（data-fervor-stage="0" → 左边条加粗）。 */
.meiyu-sketch-teaches {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid #e7dcc2;
  border-left: 3px solid #c99a3d;
  border-radius: 10px;
  background: linear-gradient(180deg, #fdf8ec 0%, #fbf2df 100%);
  color: #4a3a18;
}
/* .meiyu-sketch-teaches 自己是 display:flex，会盖住 [hidden] 的 display:none */
.meiyu-sketch-teaches[hidden] { display: none; }
.meiyu-sketch-teaches[data-fervor-stage="0"] {
  border-left-width: 5px;
  border-left-color: #b8822a;
  background: linear-gradient(180deg, #fdf4d8 0%, #f8e9bf 100%);
}
.meiyu-sketch-teaches-icon {
  font-size: 18px;
  line-height: 1.1;
  color: #b8822a;
  margin-top: 1px;
  flex: 0 0 auto;
}
.meiyu-sketch-teaches-body {
  flex: 1 1 auto;
  min-width: 0;
}
.meiyu-sketch-teaches-title {
  display: block;
  font-weight: 600;
  color: #6a4d11;
  font-size: 13px;
  margin-bottom: 4px;
}
.meiyu-sketch-teaches-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.meiyu-sketch-teaches-item {
  position: relative;
  padding: 2px 0 2px 14px;
  line-height: 1.5;
  color: #3f3316;
  font-size: 13px;
}
.meiyu-sketch-teaches-item::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: #c99a3d;
  font-weight: 700;
}

/* 窄视口（iPad 纵屏 768 / 小平板）：左右分屏换回单列上下叠放；整屏滚动回到 stage
   本身而不是右 pane（因为右 pane 不再是独立高度柱），保证画布面积不被挤压。 */
@media (max-width: 899px) {
  .meiyu-sketch-stage,
  .meiyu-sketch-stage[data-phase="draw"],
  .meiyu-sketch-stage[data-phase="reflect"] {
    grid-template-columns: 1fr;
    overflow-y: auto;
    transition: none;
  }
  .meiyu-sketch-right {
    overflow-y: visible;
    padding-right: 0;
  }
  .meiyu-sketch-panel { max-height: calc(100vh - 8px); }
}

/* CR-MEIYU-28 E · 紧凑 aside 间距：新布局里 aside 之间靠右 pane 的 gap 接管，不再自带 margin-top */
.meiyu-sketch-right .meiyu-sketch-reviewer-sees,
.meiyu-sketch-right .meiyu-sketch-teaches,
.meiyu-sketch-right .meiyu-sketch-reviewer-notes { margin-top: 0; }

/* ============================================================
 * CR-MEIYU-29 I1-D · 教师看板 · 平板左右分屏（无感交互版）
 * 改前：单栏向下拉 → 老师第一眼只看指标、"我的班级"在第二屏不可见，重要度倒挂
 * 改后：左右分屏 —— 左栏主操作（我的班级 · 建班+卡片+详情）· 右栏观察区（指标+课程+学生活跃）
 * 断点 >=1024px（平板横屏 · iPad 以上）启用分屏；<1024px 回落单栏
 * ============================================================ */
.meiyu-board-col-left,
.meiyu-board-col-right {
  display: contents;
}

@media (min-width: 1024px) {
  .meiyu-board-shell {
    display: grid;
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    grid-template-areas:
      "header header"
      "lcol   rcol"
      "legacy legacy";
    gap: clamp(18px, 2vw, 26px);
    align-items: start;
  }
  .meiyu-board-header { grid-area: header; }
  .meiyu-board-col-left  {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.6vw, 22px);
    grid-area: lcol;
    min-width: 0;
  }
  .meiyu-board-col-right {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.4vw, 20px);
    grid-area: rcol;
    min-width: 0;
  }
  .meiyu-board-legacy-details { grid-area: legacy; }

  /* 右栏观察区 · 紧凑化指标条（5 格平排 · 不再占满宽度） */
  .meiyu-board-col-right .meiyu-board-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }
  .meiyu-board-col-right .meiyu-board-card {
    padding: 10px 12px;
    gap: 4px;
  }
  .meiyu-board-col-right .meiyu-board-card-value {
    font-size: 22px;
    line-height: 1.1;
  }
  .meiyu-board-col-right .meiyu-board-card-hint {
    font-size: 11px;
  }
  .meiyu-board-col-right .meiyu-dash-kicker {
    font-size: 10px;
  }

  /* 右栏观察区 · 紧凑化三课程（3 列平排） */
  .meiyu-board-col-right .meiyu-board-lessons-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .meiyu-board-col-right .meiyu-board-lesson-card {
    padding: 12px 14px;
    gap: 6px;
  }
  .meiyu-board-col-right .meiyu-board-lesson-card h3 {
    font-size: 14px;
    margin: 0;
  }
  .meiyu-board-col-right .meiyu-board-lesson-meta {
    font-size: 11px;
  }

  /* 右栏观察区 · 学生活跃行紧凑 */
  .meiyu-board-col-right .meiyu-board-student-row {
    padding: 8px 12px;
    font-size: 12px;
  }

  /* 右栏 section 标题紧凑 */
  .meiyu-board-col-right .meiyu-board-lessons h2,
  .meiyu-board-col-right .meiyu-board-students h2 {
    font-size: 14px;
    margin: 0 0 8px;
  }

  /* 左栏主操作 · "我的班级" 区块自然扩张 · 详情面板在栏内展开不跳屏 */
  .meiyu-board-customize-primary {
    background: linear-gradient(160deg, #fff9ea 0%, #fff 75%);
  }
}

/* CR-MEIYU-29 I1-D · 左右分屏下，详情面板的两个子表单强制 2 列平排 · 不溢出第二屏 */
@media (min-width: 1024px) {
  .meiyu-board-col-left .meiyu-class-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .meiyu-board-col-left .meiyu-detail-subform {
    padding: 12px 14px;
  }
  .meiyu-board-col-left .meiyu-detail-subform h4 {
    font-size: 14px;
  }
  .meiyu-board-col-left .meiyu-detail-subform textarea {
    font-size: 13px;
  }
  /* 建班 form 内部也改双列（班名/风味一行，按钮一行） */
  .meiyu-board-col-left #meiyu-new-class-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
  }
  .meiyu-board-col-left #meiyu-new-class-form .meiyu-customize-actions {
    grid-column: 1 / -1;
  }
}

/* ========================================================================
 * CR-MEIYU-REDESIGN P2 · 课堂页视觉统一 + 单行底栏 + Hero-first 舞台
 * -----------------------------------------------------------------------
 * 目标：与 /meiyu 首页 `.meiyu-kiosk-brand` 玻璃卡头部品相一致；底栏收敛
 *      成一行微信式（朗读/mic/输入/发送/下一阶段/⋯）；A 段 hero 满铺。
 * 不删改任何旧规则，只在文件尾部新增覆盖层，便于回退。
 * 跟随 docs/platform/UI_DESIGN_QUICK_COLLAB.md 的可调维度对齐：
 *   - 品牌头色值 → 与 `.meiyu-kiosk-brand` 保持同一 linear-gradient
 *   - 单行底栏 → WeChat 式 flex 流，窄屏自动换行
 *   - 舞台背景 → 森林/黑板 SVG 保留但 opacity 降至 0.12
 * ======================================================================== */

/* 页面底色：从硬白切到与首页一致的柔和渐变 */
.meiyu-classroom-page {
  background:
    radial-gradient(circle at 10% -10%, rgba(15, 123, 108, 0.10), transparent 55%),
    radial-gradient(circle at 95% 10%, rgba(139, 92, 246, 0.06), transparent 45%),
    linear-gradient(180deg, #f7f9f6 0%, #e8f5f0 60%, #eaf5f0 100%);
}

/* HUD 升级为玻璃卡（与 .meiyu-kiosk-brand 同风） */
.meiyu-classroom-page .meiyu-hud {
  position: sticky;
  top: 0;
  z-index: 25;
  margin: 10px clamp(10px, 2vw, 22px) 16px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.68));
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: clamp(14px, 1.8vw, 20px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 当前课题签：更像品牌头的 pill */
.meiyu-classroom-page .meiyu-lesson-tag {
  background: linear-gradient(135deg, var(--mkx-primary, #0F7B6C), #8b5cf6);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.22);
}

/* 舞台外壳：玻璃卡外壳保留，但 stage-bg / teaching-card / hero
 * 的视觉一律回到 P2 之前的原始剧场设定 —— 森林背景可见、小人尺寸不被压、
 * hero 仍在 teaching-card 内嵌卡片形态。视觉判断（左右挤不挤）留到
 * 大王实际看到原生剧场后再做。 */
.meiyu-classroom-page .meiyu-stage-wrap {
  margin: 0 clamp(10px, 2vw, 22px);
  border-radius: var(--mkx-radius-card);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.56));
  border: 1px solid rgba(99, 102, 241, 0.14);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
/* 撤：stage-bg opacity 0.12（原值走默认 0.35 左右，森林/黑板 SVG 可见） */
/* 撤：teaching-card 半透白底（恢复 var(--mkx-card) 原纯白 + 原阴影） */
/* 撤：Hero-first 满铺 -14 -16 覆写 + figcaption 白字浮底 */
/* 撤：@media >=880px grid-template-columns 40% 覆写（回原 34%） */

/* -------------------------- 单行底栏 --------------------------- */

/* 底栏自身：与 HUD 同玻璃风 */
.meiyu-classroom-page .meiyu-bottom-bar {
  margin: 14px clamp(10px, 2vw, 22px) 0;
}

/* 核心：grid → 单行 flex，所有子容器（actions/form/phase-actions）内联 */
.meiyu-classroom-page .meiyu-bottom-bar--single-row .meiyu-bottom-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: clamp(14px, 1.8vw, 20px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 各子组不再自己起一行 */
.meiyu-bottom-bar--single-row .meiyu-bottom-actions,
.meiyu-bottom-bar--single-row .meiyu-phase-actions {
  display: inline-flex;
  margin: 0;
  gap: 6px;
  flex: 0 0 auto;
}
.meiyu-bottom-bar--single-row .meiyu-chat-form {
  display: inline-flex;
  flex: 1 1 260px;
  min-width: 180px;
  gap: 8px;
  order: 5;
}
.meiyu-bottom-bar--single-row .meiyu-bottom-actions {
  order: 4;
}
.meiyu-bottom-bar--single-row .meiyu-phase-actions {
  order: 6;
}

/* Practice bar（仅 D_practice）：整行前置 */
.meiyu-bottom-bar--single-row .meiyu-bottom-practice-bar {
  order: 1;
  flex: 1 1 100%;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(99, 102, 241, 0.18);
}

/* 废弃（保留空选择器避免历史测试断言缺失）：旧图标按钮样式，P2-FIX3 已迁移至 HUD / 题板 / 复合按钮 */
.meiyu-bottom-icon-btn,
.meiyu-send-icon-btn {
  /* noop · 旧 DOM 结构在 P2-FIX3 后不再存在，保留类名稳定以防 E2E 回归 */
}

/* 输入框在单行中占满剩余空间 */
.meiyu-bottom-bar--single-row .meiyu-chat-input {
  flex: 1;
  border-radius: 999px;
  padding: 0 16px;
  background: #fff;
  border-color: rgba(99, 102, 241, 0.22);
  min-height: var(--mkx-btn-h, 48px);
}
.meiyu-bottom-bar--single-row .meiyu-chat-input:focus {
  outline: none;
  border-color: var(--mkx-primary, #0F7B6C);
  box-shadow: 0 0 0 3px rgba(15, 123, 108, 0.18);
}

/* chat-form 成为一个小 flex 容器 */
.meiyu-bottom-bar--single-row .meiyu-chat-form {
  align-items: center;
}

/* -------- 复合按钮（微信范式核心）：输入框右侧一颗按钮承载三态 --------
 * 空 input（data-has-text="0"）→ 图标 🎤，按住录音；松开识别后自动发送
 * 有字 input（data-has-text="1"）→ 图标 ↑，点击 form.requestSubmit
 * 按钮 type="button"，防止按住说话时 mouseup 误触 submit。
 * 所有 press/click 事件的分发由 JS 的 wireComposerButton 按 data-has-text 路由。 */
.meiyu-composer-btn {
  flex: 0 0 auto;
  width: var(--mkx-btn-h, 48px);
  height: var(--mkx-btn-h, 48px);
  border-radius: 50%;
  border: 1px solid rgba(99, 102, 241, 0.22);
  background: linear-gradient(180deg, #ffffff, #f3f0ff);
  color: var(--mkx-text, #1f2937);
  font-size: 1.2em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background 0.12s, transform 0.05s, border-color 0.12s;
  position: relative;
}
.meiyu-composer-btn:hover  { border-color: rgba(99, 102, 241, 0.45); }
.meiyu-composer-btn:active { transform: scale(0.95); }
.meiyu-composer-btn:focus-visible {
  outline: none;
  border-color: var(--mkx-primary, #0F7B6C);
  box-shadow: 0 0 0 3px rgba(15, 123, 108, 0.22);
}
.meiyu-composer-icon {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s, transform 0.12s;
}
.meiyu-chat-form[data-has-text="0"] .meiyu-composer-icon--send { opacity: 0; transform: scale(0.6); }
.meiyu-chat-form[data-has-text="0"] .meiyu-composer-icon--mic  { opacity: 1; transform: scale(1); }
.meiyu-chat-form[data-has-text="1"] .meiyu-composer-icon--mic  { opacity: 0; transform: scale(0.6); }
.meiyu-chat-form[data-has-text="1"] .meiyu-composer-icon--send {
  opacity: 1;
  transform: scale(1);
  font-weight: 700;
}
.meiyu-chat-form[data-has-text="1"] .meiyu-composer-btn {
  background: linear-gradient(135deg, var(--mkx-primary, #0F7B6C), #8b5cf6);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
}
.meiyu-composer-btn.recording {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25), 0 6px 16px rgba(220, 38, 38, 0.35);
  animation: meiyu-composer-pulse 1.1s ease-in-out infinite;
}
@keyframes meiyu-composer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35), 0 6px 16px rgba(220, 38, 38, 0.35); }
  50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.05), 0 6px 16px rgba(220, 38, 38, 0.35); }
}
.meiyu-composer-btn.processing {
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  color: #6b7280;
  border-color: #d1d5db;
  cursor: progress;
  animation: none;
}
.meiyu-composer-btn.recording::after {
  content: '松开发送';
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}
.meiyu-composer-btn.processing::after {
  content: '识别中…';
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

/* -------- HUD 段落控制组（↶ 重来 / 下一阶段 →） ------------------
 * 紧贴 #meiyu-progress-hud，语义域 = 六段流程控制。 */
.meiyu-phase-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.meiyu-phase-ctrl-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.92em;
}
.meiyu-phase-ctrl-btn > span[aria-hidden="true"] {
  font-size: 1.1em;
  line-height: 1;
}
.meiyu-phase-ctrl-btn--next {
  box-shadow: 0 6px 14px rgba(99, 102, 241, 0.22);
}

/* -------- 题板工具条（🔊 朗读本段） ------------------
 * 贴附题板右上角，服务对象 = 题板内容。 */
.meiyu-board-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding: 4px 0 10px;
  border-bottom: 1px dashed rgba(99, 102, 241, 0.12);
  margin-bottom: 10px;
}
.meiyu-board-tool-btn {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88em;
  font-weight: 500;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.18);
  color: var(--mkx-text, #1f2937);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.meiyu-board-tool-btn:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.35);
}
.meiyu-board-tool-btn > span[aria-hidden="true"] {
  font-size: 1.1em;
  line-height: 1;
}

/* 窄屏（手机）：输入框独占整行 · HUD 段落控制组按钮只剩图标 */
@media (max-width: 639px) {
  .meiyu-bottom-bar--single-row .meiyu-chat-form {
    flex: 1 1 100%;
  }
  .meiyu-phase-ctrl-btn .meiyu-phase-ctrl-label {
    display: none;
  }
  .meiyu-phase-ctrl-btn--next .meiyu-phase-ctrl-label {
    display: inline;
  }
  .meiyu-phase-ctrl-btn--next {
    padding: 0 12px;
  }
  .meiyu-board-tool-label {
    display: none;
  }
}

/* ========================================================================
 * CR-MEIYU-REDESIGN P2-FIX6 · 课堂页 app 外壳统一 + HUD 单行五槽
 * -----------------------------------------------------------------------
 * 目标：
 *   1. 给 .meiyu-page-canvas 披一层白卡外壳，让 HUD/stage/底栏成为外壳内
 *      的自然分区，而不是三块独立玻璃条浮在紫背景上（"三明治散架"）。
 *      —— 与首页 .meiyu-kiosk-brand 玻璃头部卡同风，但因课堂内容更多故更大。
 *   2. HUD 从 flex-wrap 两行改为 grid 单行五槽：
 *      出口 | 定位 | 进度 | 流控 | 口味
 *      避免进度星被 wrap 到返回键下方、课题 pill 孤立居中、风味 pill
 *      抢流控焦点三处视觉炸点。
 *   3. 风味切换 .meiyu-age-pill--mini：32px 高、13px 字、灰底徽章化，
 *      选中态才用品牌色 —— 降权，不再抢流控按钮焦点。
 * ======================================================================== */

/* ---- 主 app 白卡外壳 ---- */
.meiyu-classroom-page .meiyu-page-canvas {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
  border-radius: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(99, 102, 241, 0.14);
  box-shadow: 0 18px 48px rgba(30, 27, 75, 0.08);
  margin: clamp(12px, 2vh, 24px) auto;
  padding: clamp(8px, 1.2vw, 14px);
  overflow: hidden;
}

/* ---- HUD：卸掉独立玻璃卡，成为外壳内的分区 ---- */
.meiyu-classroom-page .meiyu-hud {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-areas: "identity progress progress flow taste";
  gap: clamp(10px, 1.4vw, 18px);
  align-items: center;
  margin: 0 0 clamp(8px, 1vw, 12px);
  padding: 10px clamp(10px, 1.4vw, 14px);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: sticky;
  top: 0;
  z-index: 25;
}

/* 糟粕兼容：仍有 .meiyu-hud-row 的历史选择器置为 display:contents，
 * 即使将来有页面没来得及改 DOM 也不会破图 */
.meiyu-classroom-page .meiyu-hud-row { display: contents; }

.meiyu-hud-slot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.meiyu-hud-slot--identity { grid-column: 1 / 2; }
.meiyu-hud-slot--progress { grid-column: 2 / 4; justify-content: flex-start; min-width: 0; }
.meiyu-hud-slot--flow { grid-column: 4 / 5; justify-content: flex-end; gap: 8px; }
.meiyu-hud-slot--taste { grid-column: 5 / 6; justify-content: flex-end; gap: 8px; }

/* 课题 pill：仍是品牌色胶囊（P2-FIX4 样式），但单行不再会被挤炸 */
.meiyu-classroom-page .meiyu-hud .meiyu-lesson-tag {
  background: linear-gradient(135deg, var(--mkx-primary, #0F7B6C), #8b5cf6);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.94em;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: clamp(160px, 22vw, 280px);
}

/* 进度星：占满进度槽，不会再 wrap 到左下 */
.meiyu-classroom-page .meiyu-hud .meiyu-progress-hud {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

/* 流控按钮组：紧凑贴边 */
.meiyu-classroom-page .meiyu-hud .meiyu-phase-control {
  flex: 0 0 auto;
  gap: 8px;
}

/* 风味切换徽章化：权重降级到 32px 高、13px 字、灰底 */
.meiyu-classroom-page .meiyu-hud .meiyu-age-switch {
  gap: 4px;
  flex-shrink: 0;
}
.meiyu-age-pill--mini {
  min-height: 30px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.12);
  color: #64748b;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.meiyu-age-pill--mini:hover {
  background: rgba(99, 102, 241, 0.1);
  color: var(--mkx-text, #1f2937);
}
.meiyu-age-pill--mini[aria-pressed="true"],
body[data-age-band="young"] .meiyu-age-pill--mini[data-band="young"],
body[data-age-band="mid"] .meiyu-age-pill--mini[data-band="mid"],
body[data-age-band="upper"] .meiyu-age-pill--mini[data-band="upper"] {
  background: linear-gradient(135deg, rgba(255, 168, 87, 0.9), rgba(255, 141, 87, 0.9));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 10px rgba(255, 141, 87, 0.28);
}

/* ---- stage-wrap：卸掉独立玻璃底（外壳已兜住），保留圆角 + 背景 SVG 显影 ---- */
.meiyu-classroom-page .meiyu-page-canvas > .meiyu-stage-wrap {
  margin: 0;
  border: 0;
  box-shadow: none;
  border-radius: clamp(16px, 2vw, 22px);
  background: linear-gradient(180deg, #fbfaff, #f5f3ff);
}

/* ---- 底栏：卸掉独立玻璃底，与输入框联排 ---- */
.meiyu-classroom-page .meiyu-page-canvas > .meiyu-bottom-bar {
  margin: clamp(8px, 1vw, 14px) 0 0;
  padding-top: clamp(8px, 1vw, 12px);
  border-top: 1px solid rgba(99, 102, 241, 0.12);
}
.meiyu-classroom-page .meiyu-page-canvas
  .meiyu-bottom-bar--single-row .meiyu-bottom-grid {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 clamp(4px, 0.8vw, 10px);
}

/* ---- 响应式：窄屏（≤767）口味徽章换行、中屏（≤900）进度星再紧凑 ---- */
@media (max-width: 900px) {
  .meiyu-classroom-page .meiyu-hud .meiyu-progress-hud { gap: 2px; }
  .meiyu-classroom-page .meiyu-hud .meiyu-star-step { width: 24px; height: 24px; }
  .meiyu-classroom-page .meiyu-hud .meiyu-lesson-tag { max-width: clamp(120px, 16vw, 200px); }
}
@media (max-width: 767px) {
  .meiyu-classroom-page .meiyu-hud {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "identity progress flow"
      "taste    taste    taste";
    row-gap: 8px;
  }
  .meiyu-hud-slot--identity { grid-area: identity; }
  .meiyu-hud-slot--progress { grid-area: progress; }
  .meiyu-hud-slot--flow     { grid-area: flow; }
  .meiyu-hud-slot--taste    {
    grid-area: taste;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px dashed rgba(99, 102, 241, 0.14);
  }
}



/* ============================================================
 * CR-MEIYU-31 W2 · 学习模式三档视觉联动
 * ------------------------------------------------------------
 * 三个 pill（独人 / 两人 / 剧场）与爱 X 三档并列但语义正交：
 *   审美决定"风味"，学习模式决定"几个人同屏 / 谁开口"。
 *
 * solo  → 隐藏助教 + peer-a + peer-b 立绘；assistant 气泡不出（事件层在
 *         _iter_stub_sse 已 gate，不 emit assistant event；本 CSS 多一道
 *         保险兜底，防止历史缓存里残留气泡）；peer 气泡直接整块隐。
 * duo   → 隐藏 peer-a + peer-b 立绘 + peer 气泡；teacher + assistant 全开。
 * theater (默认) → 四立绘 + 四气泡全开。
 *
 * 选择器都挂 .meiyu-classroom-page.meiyu-mode--* 避免污染其它页。
 * ============================================================ */

.meiyu-classroom-page .meiyu-learning-mode-switch {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px dashed rgba(99, 102, 241, 0.18);
}
.meiyu-mode-pill--mini {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.14);
  color: #64748b;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.meiyu-mode-pill--mini:hover {
  background: rgba(139, 92, 246, 0.12);
  color: var(--mkx-text, #1f2937);
}
.meiyu-mode-pill--mini[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(99, 102, 241, 0.95));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.28);
}
.meiyu-mode-pill--mini:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* solo：只留老师（peer + assistant 立绘 / 气泡全隐）
   peer 立绘共享类 meiyu-actor-peer，两个同学用 id 区分，统一用类选即可；
   peer 气泡 / assistant 气泡走 [data-role="..."]（meiyu_classroom.js emit 时
   塞的语义属性，见 chat-log 渲染路径）。 */
.meiyu-classroom-page.meiyu-mode--solo .meiyu-actor-assistant,
.meiyu-classroom-page.meiyu-mode--solo .meiyu-actor-peer,
.meiyu-classroom-page.meiyu-mode--solo .meiyu-actor-row,
.meiyu-classroom-page.meiyu-mode--solo [data-role="assistant"],
.meiyu-classroom-page.meiyu-mode--solo [data-role="peer_a"],
.meiyu-classroom-page.meiyu-mode--solo [data-role="peer_b"] {
  display: none !important;
}

/* duo：保留老师 + 助教（peer 立绘 / 气泡隐） */
.meiyu-classroom-page.meiyu-mode--duo .meiyu-actor-peer,
.meiyu-classroom-page.meiyu-mode--duo .meiyu-actor-row,
.meiyu-classroom-page.meiyu-mode--duo [data-role="peer_a"],
.meiyu-classroom-page.meiyu-mode--duo [data-role="peer_b"] {
  display: none !important;
}

/* theater：默认全显，无需 override */

/* CR-MEIYU-30-REV2 · VLM/LLM 降级重试弹窗 */
.meiyu-sketch-retry-dialog {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meiyu-sketch-retry-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 27, 75, 0.35);
  backdrop-filter: blur(4px);
}

.meiyu-sketch-retry-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #fff9f0, #fff3e0);
  border: 2px solid #f2c94c;
  border-radius: 20px;
  padding: 28px 24px 20px;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  animation: meiyu-retry-pop 0.3s ease-out;
}

@keyframes meiyu-retry-pop {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.meiyu-sketch-retry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.meiyu-sketch-retry-icon {
  font-size: 24px;
  color: #f2c94c;
}

.meiyu-sketch-retry-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.meiyu-sketch-retry-body {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.meiyu-sketch-retry-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.meiyu-sketch-retry-btn {
  min-height: 48px;
  padding: 10px 20px;
  background: #4b5cff;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.meiyu-sketch-retry-btn:hover {
  background: #3a4ae0;
}

.meiyu-sketch-retry-skip-btn {
  min-height: 48px;
  padding: 10px 20px;
  background: transparent;
  color: #888;
  border: 1.5px solid #ddd;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.meiyu-sketch-retry-skip-btn:hover {
  border-color: #bbb;
  color: #666;
}

/* === P3 Typography === */
.meiyu-shell h1, .meiyu-board-shell h1, .meiyu-licenses-shell h1,
.meiyu-gov-shell h1, .meiyu-review-shell h1, .meiyu-trad-root h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.meiyu-shell h2, .meiyu-board-shell h2, .meiyu-licenses-shell h2,
.meiyu-gov-shell h2, .meiyu-review-shell h2, .meiyu-trad-root h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
}
.meiyu-shell h3, .meiyu-board-shell h3, .meiyu-licenses-shell h3,
.meiyu-gov-shell h3, .meiyu-review-shell h3, .meiyu-trad-root h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.meiyu-shell p, .meiyu-board-shell p, .meiyu-licenses-shell p,
.meiyu-gov-shell p, .meiyu-review-shell p, .meiyu-trad-root p {
  font-size: 15px;
  line-height: 1.6;
}

/* === P3 Button Solid === */
.meiyu-btn-solid {
  background: var(--mkx-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  min-height: var(--mkx-btn-h);
  padding: 0 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.meiyu-btn-solid:hover {
  filter: brightness(1.08);
}
.meiyu-btn-solid:active {
  transform: scale(var(--tap-scale, 0.95));
}

/* === P4 FAB (migrated from meiyu-home.css §K9) === */
.meiyu-scroll-top-fab {
  position: fixed;
  right: 24px;
  bottom: 32px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--mkx-primary, #0F7B6C);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 123, 108, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.15s;
}
.meiyu-scroll-top-fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.meiyu-scroll-top-fab:hover {
  filter: brightness(1.1);
}
.meiyu-scroll-top-fab:active {
  transform: scale(var(--tap-scale, 0.95));
}

/* === P4 Page Fade-In === */
@keyframes meiyu-page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.meiyu-shell, .meiyu-board-shell, .meiyu-licenses-shell,
.meiyu-gov-shell, .meiyu-review-shell, .meiyu-classroom-page,
.meiyu-trad-root {
  animation: meiyu-page-enter 0.3s ease;
}

/* === P4 Ripple Effect === */
@keyframes meiyu-ripple-spread {
  to { transform: scale(4); opacity: 0; }
}
.meiyu-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
  transform: scale(0);
  animation: meiyu-ripple-spread 0.5s ease-out forwards;
  pointer-events: none;
  z-index: 1;
}
/* Ripple containers need relative + overflow hidden */
.meiyu-btn, .meiyu-btn-solid, .meiyu-btn-primary,
.meiyu-lesson-card, .meiyu-dash-card--link, .meiyu-entry-card {
  position: relative;
  overflow: hidden;
}

/* === P4 Scroll-Snap Utility === */
.meiyu-hscroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding-bottom: 8px;
}
.meiyu-hscroll > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* === P4 Card Entrance Animation === */
.meiyu-animate-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.meiyu-animate-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === P4 Tab Indicator Slide === */
.meiyu-track-bar, .meiyu-gallery-track-tabs, .meiyu-board-track-tabs {
  position: relative;
}
.meiyu-track-bar::after, .meiyu-gallery-track-tabs::after, .meiyu-board-track-tabs::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--indicator-left, 0px);
  width: var(--indicator-width, 0px);
  height: 3px;
  background: var(--mkx-primary);
  border-radius: 2px;
  transition: left 0.3s ease, width 0.3s ease;
}

/* ============================================================
 * §APP-NAV · Pad App push/pop 导航过渡动画 — Phase 1 (2026-06-04)
 * SSOT: docs/ui/MEIYU_PAD_APP_NAVIGATION_DESIGN.md §2.3
 *
 * 导航范式：
 *   - Tab 切换：底部 Tab 点击 → 内容区交叉淡入淡出 (150ms)
 *   - Push：点击卡片/条目 → 新页面从右侧滑入 (300ms, ease-out)
 *   - Pop：顶部返回按钮 → 当前页向右滑出 (250ms, ease-in)
 *   - 尊重 prefers-reduced-motion：动画立即完成
 * ============================================================ */

/* ── 页面容器：overflow hidden 防止动画时出现水平滚动条 ── */
.meiyu-page-viewport {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  flex: 1 1 auto;
}

/* ── 页面层：absolute 定位，同一时刻只有一层可见 ── */
.meiyu-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  will-change: transform, opacity;
}
.meiyu-page.is-root {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
.meiyu-page.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Push 动画：新页面从右侧 100% → 0 ── */
.meiyu-page--push-enter {
  animation: meiyu-push-enter 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@keyframes meiyu-push-enter {
  from {
    transform: translateX(100%);
    opacity: 0.6;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ── Pop 动画：当前页面向右滑出 0 → 100% ── */
.meiyu-page--pop-exit {
  animation: meiyu-pop-exit 0.25s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes meiyu-pop-exit {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0.4;
  }
}

/* ── Pop 时下层页面轻微左移露出 ── */
.meiyu-page--pop-reveal {
  animation: meiyu-pop-reveal 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@keyframes meiyu-pop-reveal {
  from {
    transform: translateX(-30%);
    opacity: 0.8;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ── Tab 切换交叉淡入淡出 ── */
.meiyu-page--tab-enter {
  animation: meiyu-tab-enter 0.15s ease-out forwards;
}
@keyframes meiyu-tab-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 顶部返回按钮 ── */
.meiyu-nav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  color: var(--mkx-text, #3e2e24);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  flex-shrink: 0;
}
.meiyu-nav-back:active {
  background: rgba(0, 0, 0, 0.06);
}
.meiyu-nav-back svg,
.meiyu-nav-back .meiyu-nav-back-arrow {
  width: 24px;
  height: 24px;
}

/* ── 顶部导航栏标题（push 态：标题居中，左侧有返回按钮） ── */
.meiyu-app-topbar--push {
  padding-left: 4px;
}
.meiyu-app-topbar--push .meiyu-app-topbar-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── reduced-motion 尊重 ── */
@media (prefers-reduced-motion: reduce) {
  .meiyu-page--push-enter,
  .meiyu-page--pop-exit,
  .meiyu-page--pop-reveal,
  .meiyu-page--tab-enter {
    animation: none;
  }
  .meiyu-page {
    transition: none;
  }
}