/* ============================================================
   儿童学习打卡工作台 - 全局样式（基于 VISUAL_TOKENS.md）
   ============================================================ */

:root {
  /* 颜色 */
  --bg-canvas:       #F4F1E8;
  --bg-surface:      #FAF7F0;
  --bg-card:         #FFFFFF;
  --bg-card-soft:    #F9F6EE;
  --bg-accent:       #E8EEF5;
  --bg-warn:         #FBEFE3;
  --bg-danger:       #F8E5DC;
  --bg-success:      #E5EFDF;

  --text-primary:    #3D4A3E;
  --text-secondary:  #6F7A6E;
  --text-muted:      #A5AFA3;
  --text-inverse:    #FFFFFF;

  --brand-primary:   #7FB069;
  --brand-secondary: #A8C8E1;
  --brand-accent:    #E8A87C;
  --brand-danger:    #D67D7D;

  --border-soft:     #E7E2D2;
  --border-strong:   #CFC9B6;
  --shadow-card:     0 2px 6px rgba(74, 79, 60, 0.08);
  --shadow-pop:      0 8px 24px rgba(74, 79, 60, 0.12);

  /* 字号 */
  --fs-display: clamp(18px, 2.4vw, 22px);
  --fs-h1: clamp(20px, 2.2vw, 24px);
  --fs-h2: clamp(18px, 2vw, 20px);
  --fs-h3: 17px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-mini:  11px;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* 布局 */
  --layout-nav-width:        240px;
  --layout-nav-width-tablet: 160px;
  --layout-content-max:      960px;
  --layout-content-pad:      24px;
  --layout-header-height:    64px;

  --font-sans: "PingFang SC", "HarmonyOS Sans", "Microsoft YaHei",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-num:  "DIN Alternate", "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 顶栏鼓励语 ---------- */
.encouragement {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--layout-content-pad);
  background: linear-gradient(90deg, #E8EEF5 0%, #F4F1E8 100%);
  color: var(--text-primary);
  font-size: var(--fs-small);
  border-bottom: 1px solid var(--border-soft);
}
.encouragement .sun { font-size: 18px; }
.encouragement .text { font-weight: 500; }

/* ---------- 顶部 Logo 栏 ---------- */
.topbar {
  height: var(--layout-header-height);
  padding: 0 var(--layout-content-pad);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-card);
}
.topbar .logo {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--text-primary);
  /* 防止「平台名称」七字词组在任何宽度下被切断换行 */
  white-space: nowrap;
  letter-spacing: 1px;
}
.topbar .logo .logo-suffix {
  /* 「学习台」三字词组保证不被分拆（即使总宽度不够也能整体换到下一行） */
  display: inline-block;
  white-space: nowrap;
}
.topbar .logo .logo-emoji {
  margin-right: 4px;
}
.topbar .badge {
  background: var(--bg-success);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: var(--fs-mini);
  /* 右上角版本徽章：切成上下两排（人教版五上 / 2026 版），每排不切断 */
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-block;
  text-align: center;
  line-height: 1.35;
}

/* ---------- 主布局 ---------- */
.app {
  display: grid;
  grid-template-columns: var(--layout-nav-width) 1fr;
  min-height: calc(100vh - var(--layout-header-height));
}

/* 左侧导航 */
.sidenav {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-soft);
  padding: var(--space-5) var(--space-3);
  position: sticky;
  top: var(--layout-header-height);
  height: calc(100vh - var(--layout-header-height));
  overflow-y: auto;
}
.sidenav h3 {
  margin: 0 var(--space-3) var(--space-3);
  font-size: var(--fs-mini);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sidenav ul { list-style: none; padding: 0; margin: 0; }
.sidenav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-body);
  margin-bottom: 4px;
  transition: background 0.15s ease;
}
.sidenav a:hover { background: var(--bg-card-soft); }
.sidenav a.active {
  background: #DDEBD3;
  color: #2F5C2F;
  font-weight: 600;
}
.sidenav .ico { font-size: 18px; width: 24px; text-align: center; }

/* 内容区 */
.content {
  padding: var(--space-5) var(--layout-content-pad);
  max-width: calc(var(--layout-content-max) + 2 * var(--layout-content-pad));
  margin: 0 auto;
  width: 100%;
}

.page-title {
  font-size: var(--fs-h1);
  margin: 0 0 var(--space-2);
  font-weight: 700;
}
.page-subtitle {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

/* ---------- 卡片 ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-5);
}
.card h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h2);
}
.card .meta {
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-primary); color: var(--text-inverse); }
.btn-primary:hover { box-shadow: 0 4px 8px rgba(127, 176, 105, 0.3); }
.btn-accent  { background: var(--brand-accent); color: var(--text-inverse); }
.btn-soft    { background: var(--bg-accent); color: var(--text-primary); }
.btn-ghost   { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-soft); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- 仪表盘三栏 ---------- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.dash-grid .card { margin-bottom: 0; }
.dash-grid h2 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.dash-grid .big {
  font-family: var(--font-num);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
}
.dash-grid .sub {
  color: var(--text-secondary);
  font-size: var(--fs-small);
  margin-top: 4px;
}
.dash-grid .icon-circle {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--bg-accent);
}

/* ---------- 待办列表 ---------- */
.todo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--border-soft);
}
.todo:last-child { border-bottom: none; }
.todo .left { display: flex; align-items: center; gap: var(--space-3); }
.todo .pill {
  padding: 2px 10px;
  background: var(--bg-accent);
  border-radius: 999px;
  font-size: var(--fs-mini);
  color: var(--text-primary);
}
.todo .pill.green { background: #DDEBD3; }
.todo .pill.gold  { background: #FBEFE3; }
.todo .points {
  font-family: var(--font-num);
  color: var(--brand-primary);
  font-weight: 700;
}

/* ---------- 课程表 ---------- */
.schedule-page { background: var(--bg-accent); border-radius: var(--radius-xl); padding: var(--space-6); }
.schedule-page .stationery-deco {
  display: flex;
  gap: var(--space-3);
  font-size: 24px;
  margin-bottom: var(--space-4);
  letter-spacing: 6px;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 视频内嵌播放器（B 站公开视频） ---------- */
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #101418;
  box-shadow: var(--shadow-card);
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
/* 播放器下方：状态条 + "去哔哩哔哩看"直达链接（始终可见，防卡死） */
.video-foot { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.video-jump { text-decoration: none; }
.video-jump:hover { text-decoration: none; }
.video-search-tip {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---------- 视频加载状态 + 失效降级（不允许留黑屏占位） ---------- */
.video-status {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-mini); color: var(--text-secondary);
  margin-top: 8px; min-height: 22px;
}
.video-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-accent); flex: none;
}
.video-status.ok  .dot { background: var(--brand-primary); }
.video-status.bad .dot { background: var(--brand-danger); }

.video-fallback {
  background: var(--bg-warn);
  border: 1px solid #E8D3AE;
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}
.video-fallback .big { font-size: 34px; margin-bottom: 6px; }
.video-fallback p {
  margin: 0 0 var(--space-4);
  color: #8A5F2A; font-size: var(--fs-small); line-height: 1.7;
}

/* ---------- 自动云同步卡片 ---------- */
.sync-auto { margin-top: 6px; }
.sync-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--text-secondary); }
.sync-status { font-size: 13px; color: var(--accent); font-weight: 600; align-self: center; }
.sync-auto .btn-row { align-items: center; }
.sync-details { margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.sync-details summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.sync-steps { padding-left: 20px; margin: 6px 0; line-height: 1.9; }
.sync-steps a { color: var(--accent); }
.sync-sql {
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 12px;
  font-family: monospace;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text-primary);
  margin: 6px 0;
}
.schedule-page table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.schedule-page th, .schedule-page td {
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-small);
}
.schedule-page th {
  background: var(--bg-card-soft);
  color: var(--text-secondary);
  font-weight: 600;
}
.schedule-page td .course {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
}
.schedule-page td .tools {
  display: block;
  font-size: var(--fs-mini);
  color: var(--text-muted);
  margin-top: 2px;
}
.schedule-page td.lunch { background: #FFF4E5; color: #B0792A; font-weight: 600; }

/* ---------- 小鸡庄园 ---------- */
.chicken-page {
  background: linear-gradient(180deg, #B6DEEC 0%, #D7ECDD 60%, #C7E2B5 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}
.cloud {
  position: absolute;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.cloud.c1 { width: 80px; height: 24px; top: 30px; left: 12%; }
.cloud.c1::before { width: 40px; height: 40px; top: -18px; left: 14px; }
.cloud.c1::after  { width: 28px; height: 28px; top: -10px; left: 44px; }
.cloud.c2 { width: 60px; height: 18px; top: 60px; right: 18%; }
.cloud.c2::before { width: 30px; height: 30px; top: -14px; left: 10px; }
.cloud.c2::after  { width: 22px; height: 22px; top: -8px; left: 32px; }

.scene {
  position: relative;
  margin: 64px auto 24px;
  width: 240px;
  height: 240px;
}

.chicken {
  position: relative;
  width: 140px;
  height: 160px;
  margin: 0 auto;
  z-index: 6;
  animation: idle 3s ease-in-out infinite;
}
@keyframes idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.chicken .shadow {
  position: absolute; bottom: 0; left: 50%;
  width: 96px; height: 14px;
  background: rgba(0,0,0,0.12);
  border-radius: 50%;
  transform: translateX(-50%);
}
.chicken .body {
  position: absolute;
  left: 50%; top: 36px;
  transform: translateX(-50%);
  width: 110px; height: 110px;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #FBF5E8 60%, #ECE2C8 100%);
  border-radius: 50%;
  box-shadow:
    inset -8px -10px 16px rgba(160, 140, 80, 0.18),
    inset 6px 6px 10px rgba(255,255,255,0.8);
}
.chicken .comb {
  position: absolute;
  left: 50%; top: 22px;
  transform: translateX(-50%);
  width: 22px; height: 20px;
  background: #D67D7D;
  border-radius: 50% 50% 36% 36% / 60% 60% 40% 40%;
}
.chicken .comb::before, .chicken .comb::after {
  content: ''; position: absolute; bottom: 100%;
  width: 12px; height: 14px;
  background: #D67D7D;
  border-radius: 50% 50% 30% 30%;
}
.chicken .comb::before { left: -2px; }
.chicken .comb::after  { right: -2px; }
.chicken .beak {
  position: absolute;
  left: 50%; top: 70px;
  transform: translateX(-50%);
  width: 14px; height: 12px;
  background: #E8A87C;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.chicken .eye {
  position: absolute;
  top: 56px;
  width: 10px; height: 12px;
  background: #2c2c2c;
  border-radius: 50%;
}
.chicken .eye.left  { left: calc(50% - 22px); }
.chicken .eye.right { left: calc(50% + 12px); }
.chicken .blush {
  position: absolute;
  top: 68px;
  width: 12px; height: 6px;
  background: rgba(214, 125, 125, 0.55);
  border-radius: 50%;
}
.chicken .blush.left  { left: calc(50% - 26px); }
.chicken .blush.right { left: calc(50% + 14px); }
.chicken .wing {
  position: absolute;
  top: 88px;
  width: 24px; height: 38px;
  background: radial-gradient(circle at 30% 30%, #ffffff, #ECE2C8);
  border-radius: 50% 50% 40% 40%;
  box-shadow: inset -4px -4px 8px rgba(120, 100, 60, 0.2);
}
.chicken .wing.left  { left: 14px; transform: rotate(12deg); }
.chicken .wing.right { right: 14px; transform: rotate(-12deg); }
.chicken .foot {
  position: absolute;
  bottom: 4px;
  width: 22px; height: 10px;
  background: #E8A87C;
  border-radius: 40% 40% 50% 50% / 60% 60% 40% 40%;
}
.chicken .foot.left  { left: 44px; }
.chicken .foot.right { right: 44px; }

/* 5 档状态形态变体 */
/* 1) 饱腹健康：默认形态（圆润 + 开心晃动） */
.chicken.mood-full .body { width: 108px; height: 104px; }
.chicken.mood-full .comb { transform: scale(1.05); }

/* 2) 轻微饥饿：体型略缩小、耷拉脑袋、无精打采 */
.chicken.mood-slight .body { width: 98px; height: 94px; filter: saturate(0.85); }
.chicken.mood-slight .comb { transform: translateY(3px) rotate(-6deg); opacity: 0.85; }
.chicken.mood-slight .eye { height: 9px; top: 62px; border-radius: 50% 50% 60% 60%; }
.chicken.mood-slight .beak { transform: translateX(-50%) translateY(3px); }
.chicken.mood-slight { animation: slightDroop 3.2s ease-in-out infinite; }
@keyframes slightDroop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* 3) 饥饿：身形变瘦、委屈撇嘴 */
.chicken.mood-hungry .body { filter: saturate(0.6); width: 92px; height: 92px; }
.chicken.mood-hungry .comb { transform: translateY(5px) rotate(-12deg); opacity: 0.75; }
.chicken.mood-hungry .eye { height: 8px; top: 61px; }
.chicken.mood-hungry .beak { transform: translateX(-50%) rotate(8deg); }

/* 4) 严重饥饿：身形单薄、眼眶含泪 */
.chicken.mood-severe .body { filter: saturate(0.4); width: 76px; height: 76px; opacity: 0.85; }
.chicken.mood-severe .comb { transform: translateY(6px) rotate(-16deg); opacity: 0.6; }
.chicken.mood-severe .eye {
  height: 7px; top: 54px;
  box-shadow: 0 5px 0 -1px rgba(96, 165, 200, 0.75);
}
.chicken.mood-severe .blush { opacity: 0.3; }

/* 5) 死亡：变灰躺倒 */
.chicken.mood-dead {
  filter: grayscale(1) brightness(0.7);
  animation: none;
  transform: rotate(90deg) translateX(20px);
}

/* 投喂按钮 */
.feed-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.feed-buttons .btn-primary { font-size: 16px; padding: 12px 24px; }

/* 投喂门槛：今日打卡进度（未达 3 门则锁定投喂） */
.checkin-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 480px;
  margin: 6px auto 0;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
.checkin-gate b { font-family: var(--font-num); font-size: 15px; }
.checkin-gate.locked { background: var(--bg-danger); color: var(--text-primary); }
.checkin-gate.open   { background: var(--bg-success); color: var(--text-primary); }
/* 未达标时的投喂按钮视觉锁定（仍可点击，点击会提示原因） */
.btn-locked {
  opacity: 0.5;
  filter: grayscale(0.4);
  cursor: not-allowed;
}

/* 庄园数据卡片（全局通用） */
.stat-card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.stat-card .label { font-size: var(--fs-mini); color: var(--text-secondary); }
.stat-card .value {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0;
}
.stat-card.fed .value { color: var(--brand-primary); }
.stat-card.unfed .value { color: var(--brand-danger); }

.chicken-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* 页脚 */
footer {
  text-align: center;
  padding: var(--space-5) var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-small);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-card);
  margin-top: var(--space-6);
}

/* ---------- 能量值直条（小鸡当日状态直观可见） ---------- */
.energy-wrap { margin-top: var(--space-4); }
.energy-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-small); color: var(--text-secondary);
  margin-bottom: 6px;
}
.energy-head b { font-family: var(--font-num); font-size: 18px; color: var(--text-primary); }
.energy-track {
  height: 18px; border-radius: 999px;
  background: #E8EEF5; border: 1px solid var(--border-soft);
  overflow: hidden; position: relative;
}
.energy-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #F2B04B, #7DB55C);
  transition: width .5s ease;
}
.energy-fill.mid  { background: linear-gradient(90deg, #F2954B, #F2B04B); }
.energy-fill.low  { background: linear-gradient(90deg, #E06A5A, #F2B04B); }
.energy-fill.dead { background: #B9C2CC; }
.energy-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: energyShine 2.4s infinite;
}
@keyframes energyShine { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }
.energy-tip { font-size: var(--fs-mini); color: var(--text-muted); margin-top: 6px; }

/* ============================================================
   三级浏览：科目 → 单元 → 课文/课时
   ============================================================ */

/* ---------- 面包屑 ---------- */
.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-small); color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.breadcrumb a { color: var(--brand-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--text-muted); }
.breadcrumb .cur { color: var(--text-primary); font-weight: 600; }

/* ---------- 单元卡片（二级页） ---------- */
.unit-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-5);
}
.unit-head {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.unit-no {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: #DDEBD3; color: #2F5C2F;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 18px; font-weight: 700;
}
.unit-head .info { flex: 1; min-width: 200px; }
.unit-head h2 { margin: 0; font-size: var(--fs-h2); }
.unit-head .theme { font-size: var(--fs-mini); color: var(--text-secondary); margin-top: 2px; }
.unit-head .status {
  padding: 3px 12px; border-radius: 999px;
  background: var(--bg-accent); color: var(--text-secondary);
  font-size: var(--fs-mini); white-space: nowrap;
}
.unit-head .status.done { background: var(--bg-success); color: #2F5C2F; }
.unit-head .status.doing { background: var(--bg-warn); color: #9A6A2F; }

/* 课文/课时列表 */
.lesson-list {
  list-style: none; padding: 0; margin: var(--space-4) 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.lesson-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-decoration: none; color: var(--text-primary);
  font-size: var(--fs-body);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.lesson-list a:hover { border-color: var(--brand-primary); background: #F0F6EA; }
.lesson-list a:active { transform: scale(0.98); }
.lesson-list .no { font-family: var(--font-num); font-weight: 700; color: var(--brand-primary); min-width: 26px; }
.lesson-list .name { flex: 1; }
.lesson-list .type-pill {
  padding: 1px 8px; border-radius: 999px; font-size: var(--fs-mini);
  background: var(--bg-accent); color: var(--text-secondary); white-space: nowrap;
}
.lesson-list .type-pill.poem { background: #F3E8F0; color: #8A5C7A; }
.lesson-list .type-pill.skip { background: var(--bg-card); color: var(--text-muted); border: 1px dashed var(--border-soft); }
.lesson-list .arr { color: var(--text-muted); }
.unit-extra { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--text-secondary); }

/* ---------- 课文详情（三级页） ---------- */
.lesson-hero {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: linear-gradient(120deg, #DDEBD3 0%, #E8EEF5 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.lesson-hero .big-no {
  font-family: var(--font-num); font-size: 40px; font-weight: 700; color: #2F5C2F;
}
.lesson-hero h1 { margin: 0; font-size: var(--fs-h1); }
.lesson-hero .meta { font-size: var(--fs-small); color: var(--text-secondary); margin-top: 4px; }

/* 视频区 */
.video-box {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.9) 0 8%, transparent 9%),
    linear-gradient(135deg, #B6DEEC 0%, #D7ECDD 100%);
  cursor: pointer;
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.video-box .play-btn {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #2F5C2F;
  box-shadow: var(--shadow-pop);
  transition: transform .15s ease;
}
.video-box:hover .play-btn { transform: scale(1.08); }
.video-box .video-tip {
  position: absolute; bottom: 12px; left: 0; right: 0;
  text-align: center; font-size: var(--fs-mini); color: #3E5A4E;
}
.video-box .video-tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.85); border-radius: 999px;
  padding: 2px 12px; font-size: var(--fs-mini); color: #2F5C2F;
}

/* 课文原文 */
.excerpt {
  font-size: 16px; line-height: 2.1;
  background: var(--bg-card-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  white-space: pre-line;
}
.excerpt.poem { text-align: center; font-family: "Kaiti SC", "STKaiti", "KaiTi", serif; font-size: 18px; }
.data-pending {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  color: var(--text-secondary); font-size: var(--fs-small);
  background: var(--bg-card-soft);
}

/* 字词 chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.word-chip {
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 72px; padding: 10px 12px;
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  cursor: pointer; user-select: none;
  transition: border-color .15s ease, transform .1s ease;
}
.word-chip:hover { border-color: var(--brand-primary); }
.word-chip:active { transform: scale(0.96); }
.word-chip .py { font-family: var(--font-num); font-size: 12px; color: var(--text-secondary); }
.word-chip .zi { font-size: 26px; font-weight: 700; line-height: 1.3; }
.word-chip .ci { font-size: var(--fs-mini); color: var(--text-secondary); }
.phrase-chip {
  padding: 6px 14px; border-radius: 999px;
  background: var(--bg-accent); color: var(--text-primary);
  font-size: var(--fs-small); cursor: pointer; user-select: none;
}
.phrase-chip:hover { background: #D8E4F2; }
.sentence-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card-soft);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  cursor: pointer;
}
.sentence-item .spk { font-size: 18px; flex: none; }
.sentence-item .s { line-height: 1.8; }

/* 速度滑块 */
.speed-ctrl {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card-soft); border-radius: var(--radius-md);
  font-size: var(--fs-small); color: var(--text-secondary);
}
.speed-ctrl input[type=range] { accent-color: var(--brand-primary); width: 140px; }

/* ---------- 田字格 ---------- */
.tzg-wrap { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
.tzg {
  width: 104px; height: 104px; position: relative;
  border: 2px solid #9BB89E; border-radius: 6px;
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.tzg::before, .tzg::after {
  content: ''; position: absolute; pointer-events: none;
  border-color: rgba(155,184,158,.45); border-style: dashed;
}
.tzg::before { left: 50%; top: 2px; bottom: 2px; border-left-width: 1px; }
.tzg::after  { top: 50%; left: 2px; right: 2px; border-top-width: 1px; }
.tzg .py {
  position: absolute; top: 4px; left: 0; right: 0;
  text-align: center; font-family: var(--font-num);
  font-size: 11px; color: var(--text-secondary);
}
.tzg .zi {
  font-size: 52px; font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
  color: #2F5C2F; z-index: 1; margin-top: 8px;
}
.tzg.trace .zi { color: rgba(214,125,125,.4); }
.tzg .ci {
  position: absolute; bottom: 3px; left: 0; right: 0;
  text-align: center; font-size: 10px; color: var(--text-secondary);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding: 0 2px;
}

/* 统计条 */
.stat-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: var(--space-4);
}
.stat-strip .cell {
  flex: 1; min-width: 120px;
  background: var(--bg-card-soft); border-radius: var(--radius-md);
  padding: 10px var(--space-4);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-small);
}
.stat-strip .cell b { font-family: var(--font-num); color: #2F5C2F; font-size: 16px; }

/* ---------- 生字 2 列卡（田字格 + HanziWriter） ---------- */
.write-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-top: var(--space-4);
}
.write-card {
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
  position: relative;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.write-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.04); }
.write-card.mastered { border-color: #6FBF73; background: linear-gradient(180deg, #F1F9F1 0%, var(--bg-card-soft) 100%); }
.write-card .mastered-badge {
  position: absolute; top: 6px; right: 8px;
  font-size: 14px; line-height: 1;
}
.tzg-big {
  position: relative;
  width: 150px; height: 150px;
  margin: 0 auto 6px;
  background: #FFF8F2;
  border: 1.5px solid #E4B4A6;
  border-radius: 6px;
  overflow: hidden;
}
.tzg-big .tzg-grid-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tzg-big .hw-mount { position: relative; width: 100%; height: 100%; }
/* 笔画 SVG 强制填满田字格并居中（配合 JS 注入的 viewBox，避免字偏右） */
.tzg-big .hw-mount svg { display: block; width: 100%; height: 100%; }
.tzg-big .zi-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 88px; color: #A998C4; opacity: 0.7;
  font-family: "STKaiti", "KaiTi", "楷体", serif;
}
.write-card .py { font-size: 13px; color: var(--text-secondary); margin-bottom: 2px; }
.write-card .ci { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.write-card .lesson-ref { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }

.wc-btns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.wc-btn {
  font-size: 12px; padding: 4px 10px;
  border: 1px solid var(--border-soft);
  background: #fff;
  border-radius: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .12s;
}
.wc-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.wc-btn.on { background: #6FBF73; color: #fff; border-color: #6FBF73; }
.wc-btn.spk { background: #FFB347; color: #fff; border-color: #FFB347; }
.wc-btn.spk:hover { background: #FF9F1A; border-color: #FF9F1A; }

/* ---------- 拼音·词语听写 ---------- */
.dict-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--space-3) 0 var(--space-4); }
.dict-strip .cell { flex: 1; min-width: 110px; background: var(--bg-card-soft); border-radius: var(--radius-md); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.dict-strip .cell span { font-size: 12px; color: var(--text-secondary); }
.dict-strip .cell b { font-family: var(--font-num); color: #2F5C2F; font-size: 18px; }

.dict-card {
  background: linear-gradient(180deg, #F8F1E5 0%, var(--bg-card-soft) 100%);
  border: 1px solid #E4B4A6;
  border-radius: var(--radius-md);
  padding: 24px 16px 18px;
  text-align: center;
}
.dict-pinyin {
  font-size: 38px;
  font-family: var(--font-num);
  color: #2F5C2F;
  letter-spacing: 6px;
  margin-bottom: 8px;
  min-height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.dict-hint { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; min-height: 18px; }
.dict-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.dict-opt {
  font-size: 20px; font-weight: 600;
  padding: 14px 8px;
  background: #fff;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: all .15s;
  font-family: "STKaiti", "KaiTi", "楷体", serif;
}
.dict-opt:hover { border-color: var(--brand-primary); background: #FFFAF2; }
.dict-opt.chosen { border-color: #FFB347; background: #FFF4E0; }
.dict-opt.right { border-color: #6FBF73; background: #EAF6EB; color: #2F7D33; }
.dict-opt.wrong { border-color: #E48A8A; background: #FBE8E8; color: #B43A3A; }
.dict-opt.locked { pointer-events: none; }
.dict-opt.mastered::after { content: ' ✅'; font-size: 14px; }
.dict-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* 词语区已掌握 chip 标记 */
.phrase-chip { position: relative; }
.phrase-chip.mastered { background: #EAF6EB !important; border-color: #6FBF73; color: #2F7D33; }
.phrase-chip .mastered-mark { color: #6FBF73; }

/* ---------- 每日习题练习 ---------- */
.ex-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--space-3) 0 var(--space-4); }
.ex-strip .cell { flex: 1; min-width: 110px; background: var(--bg-card-soft); border-radius: var(--radius-md); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.ex-strip .cell span { font-size: 12px; color: var(--text-secondary); }
.ex-strip .cell b { font-family: var(--font-num); color: #2F5C2F; font-size: 18px; }

.ex-card { background: var(--bg-card-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-4); }
.ex-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.ex-progress { font-family: var(--font-num); font-size: 14px; color: var(--text-secondary); }
.ex-tag { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.ex-tag.tag-word { background: #E3EEF7; color: #3F6E94; }
.ex-tag.tag-sent { background: #FBEEDD; color: #A9734A; }

.ex-body { min-height: 60px; }
.ex-q { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-3); }
.ex-pinyin-big { font-size: 26px; letter-spacing: 3px; color: #2F5C2F; margin-bottom: var(--space-3); font-family: var(--font-num); }

.ex-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ex-opt { padding: 12px 8px; font-size: 16px; border: 1.5px solid var(--border-strong); background: var(--bg-card); border-radius: var(--radius-md); cursor: pointer; color: var(--text-primary); transition: all .15s; }
.ex-opt:hover { border-color: var(--brand-primary); background: #FFFAF2; }
.ex-opt.chosen { border-color: #FFB347; background: #FFF4E0; }
.ex-opt.right { border-color: #6FBF73; background: #EAF6EB; color: #2F7D33; }
.ex-opt.wrong { border-color: #E48A8A; background: #FBE8E8; color: #B43A3A; }
.ex-opt.locked { pointer-events: none; opacity: .9; }

.ex-input, .ex-blank { width: 100%; padding: 10px 12px; font-size: 16px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); margin: 6px 0 var(--space-3); background: var(--bg-card); color: var(--text-primary); }
.ex-input:focus, .ex-blank:focus { outline: none; border-color: var(--brand-primary); }
.ex-input.right, .ex-blank.right { border-color: #6FBF73; background: #EAF6EB; }
.ex-input.wrong, .ex-blank.wrong { border-color: #E48A8A; background: #FBE8E8; }
.ex-blank { display: inline-block; width: 90px; margin: 0 4px; }
.ex-sentence { font-size: 17px; line-height: 2; color: var(--text-primary); margin-bottom: var(--space-3); }

.ex-order-my { min-height: 48px; padding: 8px 10px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-card); margin-bottom: var(--space-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ex-order-ph { color: var(--text-muted); font-size: 13px; }
.ex-order-word { padding: 6px 10px; background: #E3EEF7; color: #3F6E94; border-radius: var(--radius-sm); font-size: 15px; }
.ex-order-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); }
.ex-order-chip { padding: 8px 12px; font-size: 15px; border: 1.5px solid var(--border-strong); background: var(--bg-card); border-radius: var(--radius-md); cursor: pointer; color: var(--text-primary); }
.ex-order-chip:hover { border-color: var(--brand-primary); }
.ex-order-chip.used { opacity: .35; pointer-events: none; }
.ex-order-chip.locked { opacity: .5; pointer-events: none; }
.ex-order-ctrls { display: flex; gap: 8px; margin-bottom: var(--space-2); }

.ex-hint { font-size: 13px; color: var(--text-secondary); margin: var(--space-2) 0 var(--space-3); min-height: 18px; }
.ex-hint.ok { color: #2F7D33; font-weight: 600; }
.ex-hint.bad { color: #B43A3A; font-weight: 600; }
.ex-hint.reveal { color: #A9734A; font-weight: 600; }
.ex-answer { font-size: 14px; color: #2F7D33; margin-top: 6px; font-weight: 600; }

.ex-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }
.ex-foot { display: flex; align-items: center; gap: 14px; margin-top: var(--space-4); }
.ex-best { font-size: 13px; color: #A9734A; }
.ex-result { margin-top: var(--space-4); }
.ex-score-badge { font-size: 16px; color: var(--text-primary); background: var(--bg-success); border-radius: var(--radius-md); padding: 10px 14px; }
.ex-score-badge b { font-family: var(--font-num); font-size: 22px; color: #2F5C2F; }
.ex-wrong-title { margin: var(--space-3) 0 var(--space-2); font-size: 14px; color: var(--text-secondary); }
.ex-wrong-list { margin: 0; padding-left: 20px; }
.ex-wrong-list li { font-size: 14px; color: var(--text-primary); margin-bottom: 6px; cursor: pointer; }
.ex-wrong-list li:hover { color: var(--brand-primary); }
.ex-wrong-list b { color: #2F7D33; }

/* 按钮组 */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-4); }
.btn-sm { padding: 7px 14px; font-size: var(--fs-small); }

/* ---------- 每日计算 ---------- */
.calc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.calc-q {
  background: var(--bg-card-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.calc-q .qt { font-family: var(--font-num); font-size: 15px; }
.calc-q input {
  width: 100%; border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 6px 8px; font-family: var(--font-num); font-size: 15px;
  background: #fff; color: var(--text-primary);
}
.calc-q input:focus { outline: none; border-color: var(--brand-primary); }
.calc-q.ok { border-color: var(--brand-primary); background: #F0F6EA; }
.calc-q.bad { border-color: var(--brand-danger); background: var(--bg-danger); }
.calc-q .mark { font-size: var(--fs-mini); font-family: var(--font-num); }
.calc-q .mark.right { color: #2F5C2F; }
.calc-q .mark.wrong { color: var(--brand-danger); }
.calc-timer {
  display: flex; flex-wrap: wrap; gap: 10px;
  background: var(--bg-card-soft); border-radius: var(--radius-md);
  padding: 10px var(--space-4); margin-bottom: var(--space-4);
  font-size: var(--fs-small); align-items: center;
}
.calc-timer b { font-family: var(--font-num); font-size: 18px; color: #2F5C2F; }
.calc-timer .sep { color: var(--border-strong); }

/* 闪卡 */
.flash-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(61,74,62,.55);
  display: none; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.flash-overlay.open { display: flex; }
.flash-card {
  background: var(--bg-card); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  max-width: 420px; width: 100%; text-align: center;
  padding: var(--space-6) var(--space-5);
}
.flash-card .q { font-family: var(--font-num); font-size: 44px; font-weight: 700; margin: var(--space-4) 0; }
.flash-card .hint { color: var(--text-secondary); font-size: var(--fs-small); }

/* 浅奥折叠 */
.ao-collapse { margin-top: var(--space-3); }
.ao-solution {
  background: var(--bg-success); border-radius: var(--radius-md);
  padding: var(--space-4); margin-top: 10px;
  font-size: var(--fs-small); line-height: 1.9;
  display: none;
}
.ao-solution.open { display: block; }

/* ---------- 英语 ---------- */
.wordbook-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.word-card {
  background: var(--bg-card-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 12px; text-align: center;
  cursor: pointer; user-select: none;
  transition: border-color .15s ease, transform .1s ease;
}
.word-card:hover { border-color: var(--brand-secondary); }
.word-card:active { transform: scale(0.96); }
.word-card .w { font-size: 18px; font-weight: 700; }
.word-card .ipa { font-family: var(--font-num); font-size: 12px; color: var(--text-secondary); margin: 2px 0; }
.word-card .zh { font-size: var(--fs-small); color: var(--text-secondary); }
.word-card .zh.hidden { color: transparent; text-shadow: 0 0 8px rgba(111,122,110,.8); }
.word-card.learned { border-color: var(--brand-primary); background: #F0F6EA; }

.dialog-line {
  padding: 10px var(--space-4); border-radius: var(--radius-md);
  margin-bottom: 10px; cursor: pointer;
  background: var(--bg-card-soft); font-size: 16px;
  display: flex; gap: 10px; align-items: center;
}
.dialog-line .who { font-weight: 700; color: #2F5C2F; flex: none; }
.dialog-line:hover { background: #EAF2E4; }

.phonics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.phonics-card {
  background: var(--bg-card-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.phonics-card .head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
  font-family: var(--font-num);
}
.phonics-card .head .combo { font-size: 26px; font-weight: 700; color: #2F5C2F; }
.phonics-card .head .ipa { font-size: 15px; color: var(--text-secondary); }
.phonics-card .word { font-size: 16px; font-weight: 600; }
.phonics-card .word .syll { color: var(--brand-accent); font-weight: 700; }
.phonics-card .sent { font-size: var(--fs-small); color: var(--text-secondary); margin-top: 4px; line-height: 1.7; }

.progress-nav {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.progress-nav .day-label {
  background: var(--bg-card-soft); border-radius: 999px;
  padding: 6px 16px; font-size: var(--fs-small); color: var(--text-primary);
}

/* ---------- 打卡日历 ---------- */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-top: var(--space-3);
}
.cal-cell {
  min-height: 56px; border-radius: var(--radius-sm);
  background: var(--bg-card-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 14px; cursor: pointer;
  border: 1px solid transparent; position: relative;
}
.cal-cell:hover { border-color: var(--brand-secondary); }
.cal-cell.blank { background: transparent; cursor: default; }
.cal-cell.full  { background: var(--bg-success); }
.cal-cell.part { background: var(--bg-warn); }
.cal-cell.miss { background: var(--bg-danger); }
.cal-cell.today { border: 2px solid var(--brand-primary); }
.cal-cell .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 3px; }
.cal-cell.full .dot { background: var(--brand-primary); }
.cal-cell.part .dot { background: #D9A35A; }
.cal-cell.miss .dot { background: var(--brand-danger); }
.cal-legend {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--fs-mini); color: var(--text-secondary);
  margin-top: var(--space-3);
}
.cal-legend .lg { display: flex; align-items: center; gap: 6px; }
.cal-legend .sw { width: 14px; height: 14px; border-radius: 4px; }

/* ---------- Toast / 弹窗 ---------- */
.app-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
  background: rgba(61,74,62,.92); color: #fff;
  padding: 10px 22px; border-radius: 999px; font-size: var(--fs-small);
  opacity: 0; transition: all .3s ease; z-index: 300;
  pointer-events: none; max-width: 86vw; text-align: center;
}
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 通用小标签 */
.note-pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--bg-warn); color: #9A6A2F; font-size: var(--fs-mini);
}
/* 居中列布局（内容窄卡片） */
.center-note { text-align: center; color: var(--text-secondary); font-size: var(--fs-small); padding: var(--space-5) 0; }

/* ============================================================
   艺体中心：六项打卡卡片
   ============================================================ */
.art-card { margin-bottom: var(--space-5); }
.art-card .type-pill {
  display: inline-block;
  font-size: var(--fs-mini);
  font-weight: 400;
  color: var(--text-secondary);
  background: var(--bg-accent);
  border-radius: 999px;
  padding: 2px 10px;
}

/* 进度条 */
.art-progress { margin-top: var(--space-4); }
.art-progress .bar {
  height: 14px;
  background: #E8EEF5;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.art-progress .bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9CCB7E, #7DB55C);
  transition: width .5s ease;
}
.art-progress .txt {
  font-size: var(--fs-mini);
  color: var(--text-secondary);
  margin-top: 6px;
}
.art-progress .txt b { font-family: var(--font-num); color: var(--brand-primary); }

/* 计时器 */
.art-timer {
  margin-top: var(--space-4);
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}
.art-timer .clock {
  font-family: var(--font-num);
  font-size: 40px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 2px;
  line-height: 1.1;
  margin-bottom: var(--space-3);
}
.art-timer .btn-row { justify-content: center; }

/* 手动补录 */
.art-manual {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.art-manual .lbl {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.art-manual input[type="number"] {
  width: 108px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-family: var(--font-num);
  font-size: var(--fs-small);
  background: var(--bg-card);
  color: var(--text-primary);
}
.art-manual input[type="number"]:focus {
  outline: none;
  border-color: var(--brand-primary);
}

/* 自定义项目添加区 */
.art-custom {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-card-soft);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.art-custom .ac-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.art-custom input[type="text"],
.art-custom select {
  border: 1.5px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: var(--fs-small);
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text-primary);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.art-custom input[type="text"]:focus,
.art-custom select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(232, 145, 45, .14);
}
.art-custom input::placeholder { color: var(--text-tertiary, #b8ab98); }
.art-custom .ac-row input#cus-name { flex: 1 1 200px; }
.art-custom select { flex: 0 0 auto; cursor: pointer; }
.art-custom input#cus-ico {
  flex: 0 0 64px;
  text-align: center;
  font-size: 18px;
}
.art-custom .ac-lbl {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  flex: 0 0 auto;
}
.art-custom .ac-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.art-custom .ac-chip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border-soft);
  background: var(--bg-card);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.art-custom .ac-chip:hover { transform: scale(1.12); border-color: var(--brand-primary); }
.art-custom .ac-chip.on {
  border-color: var(--brand-primary);
  background: rgba(232, 145, 45, .12);
}
.art-custom .ac-btn {
  margin-left: auto;
  border-radius: 12px;
  padding: 10px 20px;
  white-space: nowrap;
}

/* 训练要点 */
.art-tips {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border-soft);
}
.art-tips .row {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 6px;
}
.art-tips .row b { color: var(--text-primary); }
.art-tips.collapsed .row { display: none; }

/* 最近记录 */
.art-day {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.art-day .day {
  font-family: var(--font-num);
  font-size: var(--fs-mini);
  color: var(--text-secondary);
  width: 88px;
  flex: none;
}
.art-day .bar {
  flex: 1;
  height: 10px;
  background: #E8EEF5;
  border-radius: 999px;
  overflow: hidden;
  min-width: 0;
}
.art-day .bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #F2C879, #F2A04B);
}
.art-day .min {
  font-family: var(--font-num);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--brand-primary);
  width: 72px;
  text-align: right;
  flex: none;
}
.art-day-detail {
  font-size: var(--fs-mini);
  color: var(--text-muted);
  margin: -4px 0 10px 100px;
  line-height: 1.6;
}

/* ============================================================
   体重管理：表单与输入
   ============================================================ */
.wt-form { margin-top: 10px; }
.wt-input {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 15px;
  background: var(--bg-card);
  color: var(--text-primary);
  width: 100%;
  max-width: 220px;
}
.wt-input:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.wt-sleep-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.wt-sleep-row label {
  font-size: 13px; color: var(--text-secondary);
  display: flex; flex-direction: column; gap: 4px;
}
.wt-sleep-row .wt-input { max-width: 140px; }
.wt-trend-note { margin-top: 12px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.wt-trend-note b.ok { color: #2F5C2F; }
.wt-trend-note b.warn { color: #9A6A2F; }

/* ============================================================
   背诵测评（先背再评分）
   ============================================================ */
.recite-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.recite-flow { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; font-size: 13px; }
.recite-flow .rf-step { color: var(--text-secondary); }
.recite-flow .rf-step.on { color: var(--accent); font-weight: 700; }
.recite-flow .rf-step.done { color: var(--ok, #2F5C2F); }
.recite-flow .rf-arrow { color: var(--text-secondary); }
.recite-best { font-size: 13px; color: var(--accent); font-weight: 600; white-space: nowrap; }

.recite-stage { margin-top: 6px; }
.recite-tip { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 8px; }
.recite-block { margin-bottom: 10px; }
.rb-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }

.recite-mask { background: var(--bg-soft); border: 1px dashed var(--border); border-radius: 12px; padding: 9px 13px; line-height: 1.5; }
.recite-mask .rm-line { color: #c2c8d0; letter-spacing: 1px; font-size: 13.5px; line-height: 1.5; user-select: none; }
.recite-mask .rm-gap { height: 8px; }

.recite-reveal { background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; line-height: 1.7; font-size: 16px; color: var(--text); position: relative; }
.recite-reveal .spk { cursor: pointer; margin-left: 6px; font-size: 14px; opacity: .75; }
.recite-reveal .spk:hover { opacity: 1; }
.recite-reveal.en { font-family: var(--font-en, inherit); }

.recite-audio { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recite-audio .ra-tag { font-size: 13px; color: var(--text-secondary); }
.recite-audio audio { height: 36px; max-width: 100%; }
.recite-timer { font-family: var(--font-num); font-size: 14px; color: var(--accent); background: var(--bg-soft); border-radius: 8px; padding: 3px 8px; }

.recite-rate { margin-top: 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.star-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.sr-label { font-size: 14px; color: var(--text); min-width: 130px; }
.stars { font-size: 24px; color: #d8dde4; cursor: pointer; letter-spacing: 2px; user-select: none; }
.stars .star.lit { color: #F4B740; }
.stars .star:hover { color: #F4B740; }
.score-badge { margin-top: 10px; display: flex; align-items: baseline; gap: 6px; }
.sb-num { font-family: var(--font-num); font-size: 34px; font-weight: 800; color: var(--accent); }
.sb-unit { font-size: 14px; color: var(--text-secondary); }
.sb-stars { font-size: 18px; margin-left: 4px; }

.recite-quiz { margin-top: 10px; background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.rq-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.rq-body { line-height: 1.9; font-size: 16px; color: var(--text); word-break: break-word; }
.fill-blank { width: auto; min-width: 56px; border: none; border-bottom: 2px solid var(--accent); background: transparent; font-size: 15px; text-align: center; padding: 2px 4px; color: var(--text); font-family: inherit; }
.fill-blank.correct { border-bottom-color: #2F5C2F; background: #eaf4ea; }
.fill-blank.wrong { border-bottom-color: #C0504D; background: #fbeaea; }
.rq-result { font-size: 14px; font-weight: 600; }
.rq-result.ok { color: #2F5C2F; }
.rq-result.mid { color: #9A6A2F; }
.rq-result.bad { color: #C0504D; }

.recite-saved { color: var(--ok, #2F5C2F); font-weight: 700; font-size: 15px; }

/* ============================================================
   单词默写 APP.dictation
   ============================================================ */
.dict-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dict-tip { flex: 1 1 220px; font-size: 13px; color: var(--text-secondary); }
.dict-best { font-size: 13px; color: var(--warn, #9A6A2F); white-space: nowrap; }
.dict-rows { display: flex; flex-direction: column; gap: 10px; }
.dict-row {
  display: grid;
  grid-template-columns: 1fr auto 1.4fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #FBF7EE;
  border: 1px solid var(--line, #EADFD0);
  border-radius: 12px;
}
.dict-zh { font-size: 15px; font-weight: 600; color: var(--text); }
.dict-ipa { font-size: 12px; color: var(--text-secondary); font-family: var(--font-num); white-space: nowrap; }
.dict-input {
  font-size: 15px; padding: 8px 10px; border: 1px solid var(--line, #E0D5C4);
  border-radius: 9px; background: #fff; color: var(--text); font-family: var(--font-num);
  min-width: 0; width: 100%;
}
.dict-input:focus { outline: 2px solid var(--accent, #C98A3B); outline-offset: -1px; }
.dict-input.correct { background: #EAF5EA; border-color: #8FCB8F; }
.dict-input.wrong { background: #FBEAEA; border-color: #E0A0A0; }
.dict-spk {
  border: 1px solid var(--line, #E0D5C4); background: #fff; border-radius: 9px;
  width: 38px; height: 38px; font-size: 16px; cursor: pointer; flex: none;
}
.dict-spk:active { transform: scale(0.94); }
.dict-mark { font-size: 13px; min-width: 56px; text-align: left; }
.dict-mark.ok { color: #2F5C2F; }
.dict-mark.bad { color: #C0504D; font-weight: 600; }
.dict-btns { margin-top: 14px; }
.dict-result { margin-top: 12px; font-size: 15px; color: var(--text); }
.dict-result .dict-score { font-family: var(--font-num); font-size: 20px; color: var(--accent, #C98A3B); }

/* ============================================================
   真实奖励兑换
   ============================================================ */
.reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.reward-card {
  background: var(--bg-soft, #f4f1ea);
  border: 1px solid var(--border, #e6e0d4);
  border-radius: 14px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.reward-card:not(.editing):not(.lack):hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(120,100,70,.12); }
.reward-card.lack { opacity: .62; }
.reward-icon { font-size: 30px; line-height: 1; }
.reward-name { font-size: 14px; font-weight: 600; color: var(--text, #4a4036); line-height: 1.35; min-height: 19px; }
.reward-cost { font-size: 12px; color: var(--text-secondary, #9a8f7d); }
.reward-cost b { font-family: var(--font-num); color: var(--accent, #C98A3B); font-size: 14px; }
.reward-redeem { width: 100%; font-size: 13px; padding: 7px 0; }
.reward-redeem[disabled] { cursor: not-allowed; opacity: .9; background: var(--bg-soft); color: var(--text-secondary); border-color: var(--border); }
/* 编辑态 */
.reward-card.editing { background: var(--bg-card, #fff); align-items: stretch; gap: 6px; }
.reward-card.editing .ri-icon { width: 100%; text-align: center; font-size: 22px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); }
.reward-card.editing .ri-name { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--text); }
.reward-card.editing .ri-cost-wrap { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.reward-card.editing .ri-cost { width: 70px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: var(--font-num); }
.reward-card.editing .ri-del { align-self: flex-end; background: transparent; border: none; font-size: 16px; cursor: pointer; padding: 2px 4px; }

/* ============================================================
   小鸡表情 / 装扮 / 房屋
   ============================================================ */
/* 嘴巴：默认隐藏，靠表情 class 显示不同弧线 */
.chicken .mouth {
  position: absolute;
  left: 50%; top: 90px;
  transform: translateX(-50%);
  width: 18px; height: 9px;
  border: 2px solid #B5654D;
  border-top: none;
  border-radius: 0 0 12px 12px;
  opacity: 0;
  transition: all .2s ease;
}
/* 眼泪：默认隐藏 */
.chicken .tear {
  position: absolute;
  top: 66px;
  width: 7px; height: 10px;
  background: rgba(96, 165, 200, 0.85);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0;
}
.chicken .tear.left  { left: calc(50% - 22px); }
.chicken .tear.right { left: calc(50% + 15px); }

/* 装扮：帽子（戴在鸡冠上方）/ 围巾（套在脖子处） */
.chicken .decor {
  position: absolute;
  left: 50%; top: -6px;
  transform: translateX(-50%);
  font-size: 30px;
  line-height: 1;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.12));
}
.chicken .decor-neck {
  position: absolute;
  left: 50%; top: 118px;
  transform: translateX(-50%);
  font-size: 22px;
  line-height: 1;
  z-index: 3;
  pointer-events: none;
}

/* 表情：饱腹健康 = 开心大笑 */
.chicken.mood-full .mouth { opacity: 1; width: 20px; height: 11px; top: 88px; }
.chicken.mood-full .eye   { height: 13px; top: 54px; border-radius: 50%; }
/* 轻微饥饿 = 平静微笑 */
.chicken.mood-slight .mouth { opacity: 1; width: 14px; height: 6px; top: 92px; border-radius: 0 0 8px 8px; }
/* 饥饿 = 委屈撇嘴（嘴角向下） */
.chicken.mood-hungry .mouth {
  opacity: 1; width: 16px; height: 8px; top: 96px;
  border: 2px solid #B5654D; border-bottom: none;
  border-radius: 12px 12px 0 0;
}
.chicken.mood-hungry .eye { height: 9px; top: 60px; }
/* 严重饥饿 = 含泪要哭（嘴撇 + 流泪 + 眉垂） */
.chicken.mood-severe .mouth {
  opacity: 1; width: 16px; height: 8px; top: 98px;
  border: 2px solid #B5654D; border-bottom: none;
  border-radius: 12px 12px 0 0;
}
.chicken.mood-severe .eye { height: 8px; top: 58px; }
.chicken.mood-severe .tear { opacity: 1; animation: tearDrop 1.4s ease-in-out infinite; }
.chicken.mood-severe .tear.right { animation-delay: .7s; }
@keyframes tearDrop {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}
/* 死亡 = 哭晕（眯眼 + 泪 + 大撇嘴） */
.chicken.mood-dead .mouth {
  opacity: 1; width: 18px; height: 9px; top: 100px;
  border: 2px solid #B5654D; border-bottom: none;
  border-radius: 14px 14px 0 0;
}
.chicken.mood-dead .tear { opacity: 1; }

/* 房屋主题（scene 背景随选择变化） */
.chicken .house {
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  font-size: 64px; line-height: 1;
  z-index: 0;
  opacity: .9;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.10));
}
.scene[data-house="normal"] { background: radial-gradient(120% 80% at 50% 0%, #eaf3ef 0%, #dceee6 70%, #cfe6db 100%); border-radius: 24px; }
.scene[data-house="castle"] { background: radial-gradient(120% 80% at 50% 0%, #efe7f6 0%, #e3d6f0 70%, #d4c2e8 100%); border-radius: 24px; }
.scene[data-house="rainbow"]{ background: linear-gradient(160deg, #ffe9f0 0%, #e9f0ff 50%, #e9fff3 100%); border-radius: 24px; }
.scene[data-house="star"]  { background: radial-gradient(120% 90% at 50% 10%, #2b2f55 0%, #3a3f6b 60%, #4a3f6b 100%); border-radius: 24px; }
.scene[data-house="star"] .house { filter: drop-shadow(0 0 10px rgba(255,240,180,.5)); }
.scene[data-house="tree"]  { background: radial-gradient(120% 80% at 50% 0%, #e8f3df 0%, #d7ecc8 70%, #c6e0b0 100%); border-radius: 24px; }

/* 装扮按钮网格 */
.dress-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.dress-btn {
  background: var(--bg-card-soft);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: all .12s ease;
  font-family: var(--font-sans);
  color: var(--text);
}
.dress-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(120,100,70,.12); }
.dress-btn .dress-ic { font-size: 30px; }
.dress-btn .dress-nm { font-weight: 600; font-size: 14px; }
.dress-btn .dress-on { font-size: 11px; color: var(--brand-primary, #C98A3B); }
.dress-btn.on { border-color: var(--brand-primary, #C98A3B); background: #fff7ec; box-shadow: 0 4px 12px rgba(201,138,59,.18); }

/* ============================================================
   顶栏小鸡状态（左上角，孩子一眼可见）
   ============================================================ */
.chicken-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg-soft, #f4f1ea);
  border: 1px solid var(--border-soft, #e6e0d4);
  font-size: 13px;
  color: var(--text-secondary, #6f6557);
  white-space: nowrap;
  transition: background-color .3s, border-color .3s;
}
.chicken-status .cs-face { font-size: 18px; line-height: 1; }
.chicken-status .cs-label { font-weight: 600; color: var(--text, #4a4036); }
/* 能量的圆点指示 + 百分数（按耗能分色） */
.chicken-status .cs-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none;
}
.chicken-status .cs-energy {
  font-family: var(--font-num); font-weight: 700; font-size: 14px;
  color: #5BAE7A; /* 默认满能量绿 */
}
.chicken-status.color-full    .cs-energy { color: #5BAE7A; }
.chicken-status.color-mid     .cs-energy { color: #E0A23C; }
.chicken-status.color-low     .cs-energy,
.chicken-status.color-severe  .cs-energy,
.chicken-status.color-dead    .cs-energy { color: #E07A5F; }
/* 整个状态胶囊的浅底色：满电=淡绿、中段=淡橙、低电=淡红 */
.chicken-status.color-full { background: #eaf6ec; border-color: #c8e4cc; }
.chicken-status.color-mid  { background: #fbf3e3; border-color: #ecd9ad; }
.chicken-status.color-low,
.chicken-status.color-severe { background: #fdeef0; border-color: #f3c9cf; }
.chicken-status.color-dead { background: #eeedf2; border-color: #d8d6e0; }
/* 兼容旧的 mood-* 名称（保留过渡） */
.chicken-status.mood-hungry, .chicken-status.mood-severe { background: #fdeef0; border-color: #f3c9cf; }
.chicken-status.mood-full { background: #eef7ee; border-color: #cfe6cf; }
.chicken-status.mood-dead { background: #eeedf2; border-color: #d8d6e0; }
/* 能量胶囊的可点击视觉反馈 */
.chicken-status { cursor: default; user-select: none; }

/* ============================================================
   小鸡庄园主厅：右侧圆形入口（装扮/道具/小屋/勋章）
   ============================================================ */
.hall-entries {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}
.hall-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-soft, #e6e0d4);
  box-shadow: 0 4px 12px rgba(80, 70, 50, 0.08);
  text-decoration: none;
  color: var(--text-primary, #4a4036);
  transition: transform .15s, box-shadow .15s, background-color .2s;
  backdrop-filter: blur(2px);
}
.hall-entry:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(80, 70, 50, 0.16);
  background: #fffdf6;
}
.hall-entry .he-icon { font-size: 26px; line-height: 1; }
.hall-entry .he-name { font-size: 11px; font-weight: 600; margin-top: 2px; }

/* 子页顶部「← 庄园」回退 + 标题 */
.topbar-back {
  margin-right: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-soft, #f4f1ea);
  border: 1px solid var(--border-soft, #e6e0d4);
  font-size: 13px;
  color: var(--text-primary, #4a4036);
  text-decoration: none;
  white-space: nowrap;
}
.topbar-back:hover { background: #fffdf2; }
.backbar { margin: 0 0 12px; display: flex; gap: 8px; }

/* 装扮预览：小鸡示意 */
.dress-preview { padding: 16px; }
.dp-scene { display: flex; justify-content: center; }
.dp-scene .scene { margin: 0 auto; transform: scale(0.92); }
.dp-scene-wide .scene { transform: scale(0.95); }
.dress-tag {
  display: inline-block;
  font-size: 10px;
  color: var(--text-secondary, #8a7e6e);
  background: var(--bg-soft, #f4f1ea);
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 4px;
}
.dress-tip {
  display: block;
  font-size: 11px;
  color: var(--text-secondary, #8a7e6e);
  margin-top: 2px;
  line-height: 1.35;
}

/* 庄园场景里的道具槽：放在 house / chicken 之间的多个 grid 位置 */
.prop {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.1));
  pointer-events: none;
  animation: propFloat 4.5s ease-in-out infinite;
}
.prop-back    { top:    8%;  left:  8%;  font-size: 32px; animation-delay: .2s; }
.prop-front   { bottom: 12%; left: 22%;  font-size: 24px; animation-delay: .8s; }
.prop-left    { top:    44%; left: -4%;  font-size: 28px; }
.prop-right   { top:    40%; right: -4%; font-size: 28px; animation-delay: .4s; }
.prop-ground  { bottom: -2%; left: 48%; transform: translateX(-50%); font-size: 24px; animation: none; }
.prop-corner  { bottom: 8%;  right: 6%;  font-size: 20px; animation: none; }
@keyframes propFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}

/* 自由摆放道具（新版）：可拖拽 + 各自动画 */
.prop-free {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  font-size: 40px; line-height: 1;
  cursor: grab;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.18));
  border-radius: 12px;
  transition: transform .12s ease;
}
.prop-free:active { cursor: grabbing; }
.prop-free.dragging { animation: none !important; transform: scale(1.18); z-index: 30; }

/* 各道具的特色动画 */
.prop-mat    { animation: propPulse 4s ease-in-out infinite; }
.prop-slide  { animation: propBob 2.6s ease-in-out infinite; }
.prop-swing  { transform-origin: 50% 0%;   animation: propSwing 2.4s ease-in-out infinite; }
.prop-pool   { animation: propPulse 3.2s ease-in-out infinite; }
.prop-ball   { animation: propBounce 1.5s ease-in-out infinite; }
.prop-flower { transform-origin: 50% 100%; animation: propSway 3s ease-in-out infinite; }

@keyframes propPulse {
  0%,100% { transform: scale(1);    opacity: .96; }
  50%     { transform: scale(1.07); opacity: 1; }
}
@keyframes propBob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}
@keyframes propSwing {
  0%,100% { transform: rotate(-9deg); }
  50%     { transform: rotate(9deg); }
}
@keyframes propBounce {
  0%,100% { transform: translateY(0) scaleY(1); }
  45%     { transform: translateY(-15px) scaleY(1); }
  62%     { transform: translateY(0) scaleY(.8); }
  74%     { transform: translateY(-5px) scaleY(1); }
}
@keyframes propSway {
  0%,100% { transform: rotate(-6deg); }
  50%     { transform: rotate(6deg); }
}


@media (max-width: 640px) {
  .prop-free { width: 42px; height: 42px; font-size: 32px; }
  .write-grid { grid-template-columns: 1fr; gap: 10px; }
  .tzg-big { width: 130px; height: 130px; }
  .dict-pinyin { font-size: 30px; letter-spacing: 4px; }
  .dict-opt { font-size: 18px; padding: 12px 6px; }
  .ex-pinyin-big { font-size: 22px; letter-spacing: 2px; }
  .ex-opt { font-size: 18px; padding: 12px 6px; }
  .dict-actions .btn { font-size: 12px; padding: 6px 10px; }
}

/* 道具挑选位置卡 */
.props-locations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.prop-loc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-soft, #f6f1e8);
  border: 1px solid var(--border-soft, #e6e0d4);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.prop-loc:hover { background: #fffdf6; }
.prop-loc.selected {
  border-color: var(--brand-primary, #C98A3B);
  background: #fff5e3;
}
.prop-loc .pl-label { font-weight: 600; font-size: 13px; }
.prop-loc .pl-name  { color: var(--text-secondary, #8a7e6e); font-size: 12px; }
.prop-loc.selected .pl-name { color: var(--brand-primary, #C98A3B); font-weight: 700; }
.prop-current {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--bg-soft, #f6f1e8);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ============================================================
   响应式（必须置于文件末尾，确保覆盖上方所有基础样式）
   ============================================================ */
/* ---------- 响应式 ---------- */
@media (max-width: 1023px) {
  .app { grid-template-columns: var(--layout-nav-width-tablet) 1fr; }
  .sidenav a { font-size: 13px; }
  .sidenav .ico { font-size: 16px; }
}
@media (max-width: 768px) {
  /* 手机端与电脑端统一：左侧竖向导航（窄栏：图标 + 小字竖排） */
  .app { grid-template-columns: 68px 1fr; }
  .sidenav {
    position: sticky;
    top: var(--layout-header-height);
    height: calc(100vh - var(--layout-header-height));
    border-right: 1px solid var(--border-soft);
    border-bottom: none;
    padding: var(--space-2) 4px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidenav h3 { display: none; }
  .sidenav ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sidenav a {
    flex-direction: column;
    gap: 3px;
    padding: 8px 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.25;
    margin: 0;
    border-radius: var(--radius-md);
  }
  .sidenav a .ico { font-size: 20px; width: auto; }
  .sidenav a.active { font-weight: 700; }

  /* ===== 手机端防溢出：所有卡片不超出屏幕 ===== */
  html, body { overflow-x: hidden; }
  .content { padding: var(--space-4); min-width: 0; max-width: 100%; }
  .content > * { max-width: 100%; min-width: 0; }
  .card, .unit-card, .lesson-hero, .video-box, .video-embed, .chip-row, .excerpt { min-width: 0; max-width: 100%; }
  .card { padding: var(--space-4); }

  /* 通用兜底：长文本 / 媒体 / 表格一律不撑破容器 */
  .card, .unit-card, .lesson-hero, .video-box, .excerpt,
  .chip-row, .stat-strip, .dash-grid, .meta, .page-subtitle, .energy-tip {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  img, video, embed { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }
  .btn-row { flex-wrap: wrap; }
  .btn-row .btn { flex: 1 1 auto; min-width: 0; }
  .page-title { font-size: 20px; }
  .page-subtitle { font-size: 12px; }
  .breadcrumb { font-size: 12px; gap: 6px; }
  .cal-grid { gap: 4px; }

  /* 单元卡：允许换行、去掉 200px 最小宽 */
  .unit-card { padding: var(--space-4); }
  .unit-head { gap: 8px; }
  .unit-head .info { min-width: 0; flex: 1 1 100%; }
  .unit-head h2 { font-size: 18px; }
  .unit-head .status { font-size: 11px; padding: 2px 8px; }
  .lesson-list a { padding: 10px; gap: 8px; font-size: 14px; }
  .lesson-list .no { min-width: 18px; }
  .word-chip { min-width: 0; }
  .word-chip .zi { font-size: 22px; }

  /* 统计卡：取消固定 140px 宽，自适应换行 */
  .stat-card { width: auto !important; min-width: 0; flex: 1 1 calc(50% - 8px); }
  .chicken-stats { grid-template-columns: repeat(2, 1fr); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }

  .video-box { min-height: 170px; }
  .lesson-hero { padding: var(--space-4); }
  .lesson-hero .big-no { font-size: 30px; }
  .dash-grid { grid-template-columns: 1fr; }
  .chicken-page { padding: var(--space-4); border-radius: var(--radius-lg); }
  .scene { margin: 40px auto 16px; transform: scale(0.9); }
  .schedule-page { padding: var(--space-4); border-radius: var(--radius-lg); }
  .encouragement .text { font-size: 12px; }
  .topbar { padding: 0 var(--space-3); }
  .topbar .logo { font-size: 15px; letter-spacing: 0.5px; }
  .chicken-status { font-size: 12px; padding: 3px 8px; gap: 4px; }
  .chicken-status .cs-face { font-size: 16px; }
  .chicken-status .cs-label { max-width: 6em; overflow: hidden; text-overflow: ellipsis; }
  .chicken-status .cs-energy { font-size: 13px; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .lesson-list { grid-template-columns: 1fr; }
  .tzg-wrap { justify-content: center; }
  .calc-grid { grid-template-columns: repeat(2, 1fr); }
  .phonics-grid { grid-template-columns: 1fr; }
  .cal-cell { min-height: 44px; font-size: 13px; }

  /* 单词默写：手机端换行，避免 5 列挤爆 */
  .dict-row { grid-template-columns: 1fr auto; grid-template-areas: "zh spk" "ipa ipa" "input input" "mark mark"; row-gap: 6px; }
  .dict-zh { grid-area: zh; }
  .dict-spk { grid-area: spk; }
  .dict-ipa { grid-area: ipa; }
  .dict-input { grid-area: input; }
  .dict-mark { grid-area: mark; }

  .cal-legend { flex-wrap: wrap; }

  /* 庄园主厅：在窄屏把入口改为底部一行 */
  .hall-entries {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 8px 0 14px;
  }
  .hall-entry { width: 56px; height: 56px; }
  .hall-entry .he-icon { font-size: 22px; }

  /* 道具挑选网格：手机两列 */
  .props-locations { grid-template-columns: repeat(2, 1fr); }

  /* 场景里的道具缩小 */
  .prop-back  { font-size: 24px; top: 14%; }
  .prop-front { font-size: 20px; bottom: 18%; }
  .prop-left  { font-size: 22px; left: -2%; }
  .prop-right { font-size: 22px; right: -2%; }

  /* 子页顶部回退 + 徽章在小屏缩小 */
  .topbar-back { font-size: 12px; padding: 3px 8px; }

  /* 艺体中心：卡片在手机上一律不超出屏幕 */
  .art-card { padding: var(--space-4); }
  .art-timer { padding: var(--space-3); }
  .art-timer .clock { font-size: 34px; }
  .art-timer .btn-row .btn { flex: 1 1 calc(33% - 8px); min-width: 0; }
  .art-manual { gap: 6px; }
  .art-manual .lbl { flex: 1 1 100%; }
  .art-manual input[type="number"] { flex: 1 1 100px; }
  .art-day .day { width: 74px; font-size: 11px; }
  .art-day .min { width: 60px; font-size: 12px; }
  .art-day-detail { margin-left: 0; }
}
@media (max-width: 380px) {
  .app { grid-template-columns: 58px 1fr; }
  .sidenav a { font-size: 9px; padding: 6px 2px; }
  .sidenav a .ico { font-size: 18px; }
}

/* ============================================================
   课文照片（拍照上传的课文原文）
   ============================================================ */
.img-upload-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#lesson-imgs { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.lesson-img { position: relative; margin: 0; }
.lesson-img img {
  display: block; width: 100%; border-radius: 12px;
  border: 1px solid var(--line, #e3e0d8); background: #fff;
  cursor: zoom-in;
}
.lesson-img figcaption {
  font-size: 11px; color: var(--ink-soft, #8b867c); margin-top: 4px; text-align: center;
}
.lesson-img .img-del {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lesson-img .img-del:hover { background: rgba(200, 60, 60, 0.85); }

/* ===== 视频海报卡「即点即播」（APP.video v2 组件） ===== */
.vp-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 190px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 10%;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.95) 0 9%, transparent 10%),
    radial-gradient(circle at 18% 78%, rgba(255,255,255,.6) 0 12%, transparent 13%),
    linear-gradient(135deg, #CBE7F2 0%, #E3EFDD 52%, #F4E7D3 100%);
  box-shadow: inset 0 0 0 1px rgba(47,92,47,.10);
  transition: transform .12s ease;
}
.vp-card:hover .vp-play { transform: scale(1.12); }
.vp-card:active { transform: scale(.996); }
.vp-play {
  width: 72px; height: 72px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #2F5C2F;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  padding-left: 7px;
  box-shadow: 0 8px 20px rgba(60,90,80,.20);
  transition: transform .15s ease;
}
.vp-tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.88);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  color: #2F5C2F;
}
.vp-tt {
  font-weight: 600;
  font-size: 15px;
  color: #2B4A3A;
  line-height: 1.5;
  max-width: 100%;
  word-break: break-word;
}
.vp-up { font-size: 12px; color: #55705F; margin-top: 3px; }
.vp-hint {
  position: absolute; bottom: 10px; left: 12px; right: 12px;
  font-size: 11px; color: #3E5A4E; opacity: .88;
}
.vp-big { font-size: 40px; margin-bottom: 6px; }
.vp-done { background: linear-gradient(135deg, #E3F0DC 0%, #F7EBD6 100%); }

@media (max-width: 640px) {
  .vp-card { min-height: 170px; padding: 10px 8%; }
  .vp-play { width: 62px; height: 62px; font-size: 22px; }
  .vp-tt { font-size: 13px; }
}