/* ========================================
   天天向上 - 儿童学习乐园
   全局样式表
   ======================================== */

/* ---- 重置与基础 ---- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* 马卡龙色系 */
  --c-peach:     #FFB5BA;
  --c-blue:      #A8D8EA;
  --c-mint:      #B5E7C8;
  --c-lavender:  #C9B6E4;
  --c-coral:     #FFAB91;
  --c-yellow:    #FFE5A0;
  --c-sky:       #AED6F1;
  --c-pink:      #F8BBD0;
  --c-purple:    #D7BDE2;
  --c-orange:    #FFCCBC;
  --c-green:     #C8E6C9;

  /* 功能色 */
  --bg-main:      #FAF7F2;   /* 浅米白背景 */
  --bg-card:      #FFFFFF;   /* 白色卡片 */
  --text-primary: #4A4A4A;   /* 主文字 */
  --text-secondary: #8A8A8A;/* 次文字 */
  --shadow:       rgba(180, 170, 160, 0.18);
  --shadow-strong: rgba(180, 170, 160, 0.28);
  --radius-card:  24px;
  --radius-btn:   16px;
  --nav-width:    180px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  font-size: 18px;
  background: var(--bg-main);
  color: var(--text-primary);
  user-select: none;
  -webkit-user-select: none;
}

/* ---- APP 整体布局 ---- */
#app {
  display: flex;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

/* ---- 左侧导航栏 ---- */
#sidebar {
  width: var(--nav-width);
  min-width: var(--nav-width);
  height: 100%;
  background: var(--bg-card);
  box-shadow: 2px 0 12px var(--shadow);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

#sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid #F0EDE8;
}

.app-logo {
  font-size: 24px;
  line-height: 1;
}

.app-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

#nav-list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
  position: relative;
}

#nav-list::-webkit-scrollbar {
  width: 6px;
}
#nav-list::-webkit-scrollbar-thumb {
  background: #D8D2C8;
  border-radius: 3px;
}

/* 导航项过多时的底部渐变提示 */
#nav-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.92));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

#nav-list.has-overflow::after {
  opacity: 1;
}

/* 导航项（超紧凑：11 项在 480px 高窗口也能完整显示） */
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  margin-bottom: 3px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  font-size: 17px;
  line-height: 1.1;
  color: var(--text-secondary);
  position: relative;
}

.nav-item:hover {
  background: #F7F4EF;
  color: var(--text-primary);
}

.nav-item.active {
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 3px 10px var(--shadow-strong);
  transform: scale(1.02);
}

.nav-item .nav-emoji {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.nav-item .nav-label {
  white-space: nowrap;
  line-height: 1.2;
}

/* 导航项各模块激活色 */
.nav-item.active[data-module="home"]      { background: var(--c-peach); }
.nav-item.active[data-module="plan"]      { background: var(--c-blue); }
.nav-item.active[data-module="english"]   { background: var(--c-mint); }
.nav-item.active[data-module="alphabet"]  { background: var(--c-lavender); }
.nav-item.active[data-module="characters"]{ background: var(--c-coral); }
.nav-item.active[data-module="poetry"]    { background: var(--c-yellow); }
.nav-item.active[data-module="math"]      { background: var(--c-sky); }
.nav-item.active[data-module="puzzle"]    { background: var(--c-pink); }
.nav-item.active[data-module="game"]      { background: var(--c-purple); }
.nav-item.active[data-module="pet"]       { background: var(--c-orange); }
.nav-item.active[data-module="habit"]     { background: var(--c-green); }

/* 底部宠物区 */
#sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid #F0EDE8;
  cursor: pointer;
}

#pet-avatar {
  font-size: 24px;
  line-height: 1;
}

#pet-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#pet-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

#pet-level {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ---- 右侧内容区 ---- */
#content {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 32px;
}

#content::-webkit-scrollbar {
  width: 6px;
}
#content::-webkit-scrollbar-thumb {
  background: #E0DCD5;
  border-radius: 3px;
}

/* ---- 通用卡片 ---- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 16px var(--shadow);
  padding: 28px;
  margin-bottom: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-strong);
}

.card-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}

/* ---- 通用按钮 ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-btn);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--c-blue);
  color: #FFFFFF;
  box-shadow: 0 3px 10px var(--shadow);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px var(--shadow-strong);
}

.btn:active {
  transform: translateY(0);
}

.btn.btn-large {
  padding: 18px 40px;
  font-size: 24px;
  border-radius: 20px;
}

.btn.btn-small {
  padding: 10px 20px;
  font-size: 18px;
}

/* ---- 视图容器 ---- */
.view {
  animation: fadeIn 0.35s ease;
}

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

/* ---- 视图标题 ---- */
.view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.view-header .view-emoji {
  font-size: 36px;
}

.view-header .view-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ---- 网格布局 ---- */
.grid {
  display: grid;
  gap: 20px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 占位内容 ---- */
.placeholder-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.placeholder-box .placeholder-emoji {
  font-size: 64px;
  margin-bottom: 16px;
}

.placeholder-box .placeholder-text {
  font-size: 22px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ---- 星星奖励显示 ---- */
.star-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 700;
  color: #E6A100;
}

/* ---- 响应式：小屏适配 ---- */
@media (max-width: 600px) {
  #sidebar { width: 140px; min-width: 140px; }
  .app-title { font-size: 16px; }
  .nav-item { font-size: 16px; padding: 10px 10px; }
  .nav-item .nav-emoji { font-size: 20px; }
  #content { padding: 16px 16px; }
  .view-header .view-title { font-size: 22px; }
}

/* 窗口高度较矮时，进一步压缩导航确保 11 项全部可见 */
@media (max-height: 560px) {
  .nav-item { padding: 5px 10px; margin-bottom: 2px; font-size: 16px; }
  .nav-item .nav-emoji { font-size: 18px; }
  #sidebar-header { padding: 8px 12px; }
  #sidebar-footer { padding: 6px 12px; }
  #pet-avatar { font-size: 22px; }
}

/* ========================================
   首页：Elva's Daily Schedule
   ======================================== */

/* ---- ① 成长阶段卡片 ---- */
.stage-card {
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  background: #F7F4EF;
  border: 3px solid transparent;
  transition: all 0.25s ease;
}

.stage-card.active {
  background: #FFF9F0;
  border-color: var(--c-peach);
  box-shadow: 0 4px 14px var(--shadow);
}

.stage-card.locked {
  opacity: 0.55;
  filter: grayscale(0.6);
  cursor: not-allowed;
}

.stage-emoji {
  font-size: 40px;
  margin-bottom: 8px;
  line-height: 1;
}

.stage-age {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.stage-name {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.stage-card.active .stage-name { color: #E67C7C; }

.stage-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.stage-badge {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--text-secondary);
}

.stage-card.active .stage-badge {
  background: var(--c-peach);
  color: #FFFFFF;
}

/* ---- ② 本月重点 ---- */
.focus-theme {
  font-size: 26px;
  font-weight: 700;
  color: #6B7FD7;
  margin-bottom: 16px;
}

.focus-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.focus-point {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F0F3FF;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 19px;
  color: var(--text-primary);
}

.focus-point-emoji { font-size: 22px; }

/* ---- ③ 今日计划 ---- */
.today-progress {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.today-progress-num {
  font-size: 56px;
  font-weight: 800;
  color: #5BB89A;
  line-height: 1;
}

.today-progress-total {
  font-size: 26px;
  font-weight: 600;
  color: var(--text-secondary);
}

.today-progress-bar {
  flex: 1;
  min-width: 200px;
  background: #F0EDE8;
  border-radius: 14px;
  height: 22px;
  overflow: hidden;
}

.today-progress-label {
  font-size: 16px;
  color: var(--text-secondary);
  width: 100%;
}

.task-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #F7F4EF;
  border-radius: 16px;
  padding: 12px 18px;
  margin-bottom: 10px;
  transition: opacity 0.3s;
}

.task-row.done {
  opacity: 0.5;
}

.task-emoji {
  font-size: 26px;
  line-height: 1;
}

.task-title {
  flex: 1;
  font-size: 20px;
  font-weight: 600;
}

.task-done-mark {
  font-size: 18px;
  font-weight: 700;
  color: #5BB89A;
}

.task-go-btn {
  background: var(--c-blue);
}

/* ========================================
   计划页：学习路线图
   ======================================== */

/* ---- ② 本周安排表 ---- */
.week-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.2fr) 76px;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 18px;
  margin-bottom: 6px;
}

.week-row.week-head {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  background: #F7F4EF;
}

.week-row:not(.week-head) {
  background: #FFFFFF;
  box-shadow: 0 2px 8px var(--shadow);
}

.week-row.today {
  outline: 3px solid var(--c-blue);
}

.week-hanzi {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 1.5;
  overflow-wrap: anywhere;   /* 窄屏可折行，6 字不截断 */
  word-break: break-all;
}

.today-tag {
  display: inline-block;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--c-blue);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

.poem-new {
  font-size: 14px;
  font-weight: 600;
  color: #E6A100;
}

.week-dot {
  text-align: center;
}

/* 完成度色点（周表 + 日历共用） */
.dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  vertical-align: middle;
}

.dot-part { background: #A8D8EA; }
.dot-none { background: #DDD8D0; }

.cal-star {
  font-size: 20px;
  line-height: 1;
}

.cal-plain {
  color: var(--text-secondary);
}

/* ---- ③ 里程碑进度条 ---- */
.ms-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.ms-row:last-child { margin-bottom: 0; }

.ms-label {
  width: 130px;
  font-size: 19px;
  font-weight: 600;
  flex-shrink: 0;
}

.ms-bar {
  flex: 1;
  height: 18px;
  background: #F0EDE8;
  border-radius: 999px;
  overflow: hidden;
}

.ms-bar > div {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s;
}

.ms-value {
  width: 90px;
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ---- ④ 本月打卡日历 ---- */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.cal-head {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 4px 0;
}

.cal-cell {
  height: 58px;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 2px 6px var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.cal-cell.blank { background: transparent; box-shadow: none; }

.cal-cell.future {
  background: transparent;
  box-shadow: none;
  border: 2px dashed #E8E3DB;
}

.cal-cell.today {
  outline: 3px solid var(--c-blue);
}

.cal-day {
  font-size: 18px;
  font-weight: 600;
}

.cal-legend {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 16px;
  color: var(--text-secondary);
}

.cal-legend .dot, .cal-legend .cal-star {
  margin-right: 4px;
}

/* ========================================
   学习模块样式（英语 / 字母 / 识字 / 古诗）
   ======================================== */

/* ---- 通用：提示文字 / 标签 ---- */
.hint-text {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 8px 0 16px;
}

.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  vertical-align: middle;
}

.tag-today { background: #FFF0C6; color: #B07A00; }
.tag-read  { background: #DCF5E3; color: #1E7A45; }

/* ---- 古诗：难度筛选标签 ---- */
.filter-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filter-tab {
  padding: 10px 26px;
  border: none;
  border-radius: 24px;
  font-size: 18px;
  cursor: pointer;
  background: #FFFFFF;
  color: var(--text-secondary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

.filter-tab:hover { transform: translateY(-2px); }

.filter-tab.active {
  background: var(--c-yellow);
  color: #6B5200;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(214, 178, 74, 0.35);
}

/* ---- 英语：篇目列表 ---- */
.lesson-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.lesson-card {
  background: #FBF9F5;
  border-radius: 18px;
  padding: 16px 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid transparent;
}

.lesson-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.lesson-card.today {
  background: #EAF7EF;
  border-color: var(--c-mint);
}

.lesson-card.read { opacity: 0.75; }

.lesson-no {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.lesson-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.lesson-tags { margin-top: 8px; }

/* 儿歌磨耳朵卡片（第十四批 P4） */
.song-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.song-card {
  background: linear-gradient(135deg, #FDF6EC, #FFF8F0);
  border-radius: 18px;
  padding: 16px 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid transparent;
  text-align: center;
}
.song-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: #F9C74F;
}
.song-emoji { font-size: 40px; line-height: 1.2; }
.song-title { font-size: 16px; font-weight: 700; margin-top: 8px; line-height: 1.4; }
.song-tags { margin-top: 8px; }

/* 儿歌歌词列表 */
.sentence-list { display: flex; flex-direction: column; gap: 6px; }

/* 分级绘本（第十四批 P5）大字翻页阅读 */
.tag-book { background: #FDEBD0; color: #B9770E; }
.lesson-card.book { background: #FDF7EC; }
.book-page {
  margin: 12px auto;
  max-width: 520px;
  min-height: 190px;
  padding: 22px 20px;
  text-align: center;
  background: #fffdf7;
  border-radius: 20px;
  box-shadow: 0 4px 14px var(--shadow);
  border: 3px solid #FCE7C4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.book-page:hover { transform: translateY(-3px); }
.book-page.speaking { border-color: var(--c-mint); background: #F2FBF5; }
.book-emoji { font-size: 72px; line-height: 1.3; }
.book-text {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.5;
  color: #7B4A12;
  margin-top: 6px;
  word-break: break-word;
}
.book-nav { text-align: center; margin-top: 6px; }
.word-marks { margin-top: 6px; display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.tag-song { background: #FDEBD0; color: #CA6F1E; font-size: 12px; }
.tag-phonics { background: #E8F6F3; color: #117A65; font-size: 12px; }

/* 主线四层软引导（第十四批 P6） */
.guide-card { border: 2px solid #FDEBD0; }
.guide-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.guide-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #F3F6F4;
  color: var(--text-secondary);
  font-weight: 700;
  cursor: default;
  transition: all 0.25s ease;
}
.guide-step.cur {
  background: #FFF4D6;
  color: #B9770E;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(185, 119, 14, 0.25);
}
.guide-step.cur:hover { transform: translateY(-2px); }
.guide-step.done { background: #EAF7EF; color: #2E7D32; }
.guide-step.done .guide-mark { color: #2E7D32; }
.guide-mark { font-size: 15px; }
.guide-emoji { font-size: 22px; }
.guide-name { font-size: 15px; }
.guide-arrow { font-size: 20px; color: #C9C2B4; font-weight: 800; }
.guide-tip { text-align: center; margin-top: 4px; }
.guide-l2 { background: #EAF2F8; border-radius: 12px; padding: 8px 12px; color: #2E5E86; }
.guide-l3 { background: #E8F6F3; border-radius: 12px; padding: 8px 12px; color: #117A65; }
.guide-book { color: #B9770E; }
.card.book-ready { border-color: #F9C74F; background: #FFFEF7; }


/* ---- 英语：精读详情 ---- */
.detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.detail-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.sentence-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: #FBF9F5;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 20px;
}

.sentence-row:hover { background: #F3EFE7; }

.sentence-row.active {
  background: #E3F4E9;
  box-shadow: 0 0 0 2px var(--c-mint) inset;
  transform: translateX(6px);
}

.sentence-idx {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #EFEAE2;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sentence-row.active .sentence-idx { background: var(--c-mint); color: #fff; }

.sentence-text { flex: 1; line-height: 1.5; }

.sentence-speaker { font-size: 18px; opacity: 0.5; }

/* ---- 英语：单词卡 ---- */
.word-chip-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.word-chip {
  background: #F6F3EC;
  border-radius: 16px;
  padding: 14px 22px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 110px;
}

.word-chip:hover {
  transform: translateY(-3px);
  background: #EFE7F8;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08);
}

.word-chip.flash {
  background: #E3F4E9;
  transform: scale(1.06);
}

.word-en { font-size: 22px; font-weight: 700; }

.word-zh { font-size: 15px; color: var(--text-secondary); margin-top: 4px; }

/* ---- 字母模块 ---- */
.letter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.letter-card {
  position: relative;
  background: #FBF9F5;
  border-radius: 18px;
  padding: 16px 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid transparent;
}

.letter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.letter-card.today {
  background: #F1ECFB;
  border-color: var(--c-purple);
}

.letter-card.speaking {
  background: #E3F4E9;
  box-shadow: 0 0 0 3px var(--c-mint) inset;
}

.letter-today-badge {
  position: absolute;
  top: -10px;
  right: 10px;
  background: var(--c-purple);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
}

.letter-big {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
}

.letter-phonetic {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 6px 0 10px;
  line-height: 1.4;
}

.letter-word {
  font-size: 16px;
  margin-top: 4px;
  color: var(--text-primary);
}

/* ---- 识字模块 ---- */
.hanzi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.hanzi-card {
  background: #FBF9F5;
  border-radius: 22px;
  padding: 22px 18px;
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.hanzi-card.read {
  background: #F0F8F2;
  border-color: var(--c-green);
}

.hanzi-emoji { font-size: 30px; }

.hanzi-big {
  font-size: 96px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary);
}

.hanzi-pinyin {
  font-size: 24px;
  color: #E67E22;
  font-weight: 600;
  margin-bottom: 10px;
}

.hanzi-words { margin-bottom: 12px; }

.word-tag {
  display: inline-block;
  background: #FDF0E4;
  color: #B05E1E;
  border-radius: 12px;
  padding: 4px 14px;
  font-size: 17px;
  font-weight: 600;
  margin: 0 4px 6px;
}

.hanzi-note {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 14px;
  text-align: left;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 12px 14px;
}

/* ============================================================
   识字小测（第二十六批）：识字页独立版块 + 字卡状态角标
   - .hanzi-probe-mark.ok / .again   字卡右上角状态角标（会了 / 明天再来）
   - .hanzi-probe-card                小测卡片外框（与「读一读」区并列，非弹窗）
   - .hanzi-probe-stat / -done        进度行 / 今日完成行
   - .hanzi-probe-chips > -chip       答错字的回顾小标签
   设计取向：柔和低饱和，不制造紧张感（这是学习反馈，不是闯关）
   ============================================================ */
.hanzi-probe-mark {
  display: inline-block;
  font-size: 14px; font-weight: 700;
  border-radius: 12px;
  padding: 3px 12px;
  margin-bottom: 6px;
}
.hanzi-probe-mark.ok { background: #E8F5E9; color: #2E7D32; }
.hanzi-probe-mark.again { background: #FFF3E0; color: #E65100; }

.hanzi-probe-card { border: 2px solid var(--c-sky, #B5D4F4); }
.hanzi-probe-stat {
  font-size: 17px; color: var(--text-secondary);
  background: #F5FAFF; border-radius: 12px;
  padding: 10px 14px; margin: 4px 0 12px;
}
.hanzi-probe-done {
  font-size: 22px; font-weight: 700; color: #2E7D32;
  text-align: center; padding: 10px 0 4px;
}
.hanzi-probe-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0 4px; }
.hanzi-probe-chip {
  font-size: 30px; font-weight: 700;
  border-radius: 14px; padding: 6px 18px;
}
.hanzi-probe-chip.again { background: #FFF3E0; color: #E65100; }
.hanzi-probe-opts { margin-top: 14px; }
.hanzi-probe-feedback {
  text-align: center; font-size: 19px; line-height: 1.6;
  margin-top: 14px; min-height: 34px;
}

/* ============================================================
   字母 / 拼读 / 高频词 小测（第二十七批）
   三块板块共用一套「probe-」前缀样式（renderProbeShell 输出的 class）：
     .probe-card > .letter|phonics|sight  外框（各板块一色，便于区分）
     .probe-stat / .probe-done / .probe-chips / .probe-feedback
   与识字小测同一设计取向：柔和低饱和，不制造紧张感。
   ============================================================ */
.probe-card { margin-top: 16px; }
.letter-probe-card  { border: 2px solid var(--c-lavender, #CECBF6); }
.phonics-probe-card  { border: 2px solid var(--c-mint, #9FE1CB); }
.sight-probe-card    { border: 2px solid var(--c-sky, #B5D4F4); }

.probe-stat {
  font-size: 17px; color: var(--text-secondary);
  background: #F7F7FB; border-radius: 12px;
  padding: 10px 14px; margin: 4px 0 12px;
}
.probe-done { font-size: 22px; font-weight: 700; color: #2E7D32; text-align: center; padding: 10px 0 4px; }
.probe-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0 4px; }
.probe-chip { font-size: 26px; font-weight: 700; border-radius: 14px; padding: 6px 18px; }
.probe-chip.again { background: #FFF3E0; color: #E65100; }
.probe-feedback { text-align: center; font-size: 19px; line-height: 1.6; margin-top: 14px; min-height: 34px; }
.letter-probe-opts, .phonics-probe-opts, .sight-probe-opts { margin-top: 14px; }

/* 字母卡右上角小测角标（与 .hanzi-probe-mark 同款） */
.probe-mark {
  display: inline-block; font-size: 14px; font-weight: 700;
  border-radius: 12px; padding: 3px 12px; margin-bottom: 6px;
}
.probe-mark.ok { background: #E8F5E9; color: #2E7D32; }
.probe-mark.again { background: #FFF3E0; color: #E65100; }

/* 字母小测：题干大字 + 4 个大写字母选项 */
.letter-probe-target {
  font-size: 76px; font-weight: 700; text-align: center;
  color: var(--c-lavender, #534AB7); line-height: 1.1;
  margin: 8px 0 4px; letter-spacing: 4px;
}
.letter-probe-opt, .game-opt.letter-probe-opt {
  font-size: 44px; font-weight: 700; line-height: 1.15;
  text-align: center; padding: 14px 6px;
}

/* 拼读小测：emoji 选项（4 岁视觉负担低于文字，故主用图）+ 小号英文标注 */
.game-opt.phonics-em {
  font-size: 52px; line-height: 1.1; text-align: center;
  padding: 12px 6px 8px;
}
.probe-opt-en, .phonics-opt-en {
  display: block; font-size: 15px; font-weight: 400;
  color: var(--text-secondary); margin-top: 4px; letter-spacing: 1px;
}
.game-opt.phonics-em.correct .probe-opt-en { color: #2E7D32; }
.game-opt.phonics-em.wrong .probe-opt-en { color: #C62828; }

/* 高频词小测：英文大字题干 + 中文释义选项 */
.sight-probe-en { font-size: 46px; color: var(--c-sky, #185FA5); letter-spacing: 2px; }
.game-opt.sight-probe-zh { font-size: 26px; font-weight: 600; text-align: center; padding: 18px 8px; }

/* 复习卡里的拼读题：onset + family 两卡（复用拼读页 .ph-blend-area 形态） */
.review-ph-blend { margin: 12px 0 4px; }
.review-ph-blend .ph-blend-word { color: var(--text-tertiary, #888); }
.review-test-opts.phonics-opts { grid-template-columns: repeat(4, 1fr); }
.review-test-opts.sight-opts .game-opt { font-size: 26px; font-weight: 600; }
.review-ph-em { font-size: 72px; text-align: center; line-height: 1.1; }

/* ---- 古诗模块 ---- */
.poem-hero { border: 2px solid var(--c-yellow); }

.poem-hero-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 6px;
}

/* ---- 古诗学习计划（第二十五批）：今日复习入口 + 进度卡 ---- */
.poem-review-entry { border: 2px solid var(--c-sky); }

.poem-due-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}

.poem-due-chip {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--c-sky-soft, #E6F1FB);
  border: 1px solid var(--c-sky);
  border-radius: 999px;
  padding: 5px 12px;
}

.poem-due-chip.mastered {
  background: var(--c-mint-soft, #E1F5EE);
  border-color: var(--c-mint);
}

.poem-progress-card { border: 2px solid var(--c-mint); }

.poem-progress-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 12px 0 6px;
}

.poem-progress-item {
  text-align: center;
  background: var(--bg-soft, #F7F7F4);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
  border-radius: var(--border-radius-md, 8px);
  padding: 10px 4px;
}

.poem-progress-item b {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--c-mint);
  line-height: 1.2;
}

.poem-progress-item span {
  font-size: 13px;
  color: var(--text-secondary);
}

@media (max-width: 480px) {
  .poem-progress-item b { font-size: 22px; }
  .poem-progress-item span { font-size: 11px; }
}

.poem-new {
  font-size: 14px;
  color: #B07A00;
  font-weight: 600;
}

.poem-meta {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.level-tag {
  display: inline-block;
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 600;
}

.level-tag.lv-easy { background: #DCF5E3; color: #1E7A45; }
.level-tag.lv-hard { background: #FBE3E3; color: #A33A3A; }

.poem-line {
  font-size: 24px;
  line-height: 1.9;
  letter-spacing: 2px;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 10px;
  transition: all 0.2s ease;
  width: fit-content;
}

.poem-line:hover { background: #F3EFE7; }

.poem-line.active {
  background: #FFF3D6;
  box-shadow: 0 0 0 2px var(--c-yellow) inset;
}

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

.poem-card {
  background: #FBF9F5;
  border-radius: 18px;
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid transparent;
}

.poem-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.poem-card.weekly {
  background: #FFF8E8;
  border-color: var(--c-yellow);
}

.poem-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.poem-card-title { font-size: 22px; font-weight: 700; }

.poem-card .poem-line { font-size: 20px; }

.poem-play-btn.playing {
  background: var(--c-yellow);
  color: #6B5200;
}

/* ---- 闯关游戏：顶部状态栏 ---- */
.game-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 16px 24px;
}

.status-chip {
  font-size: 20px;
  font-weight: 700;
  background: #F7F4EF;
  border-radius: 16px;
  padding: 8px 18px;
}

.status-chip .heart { font-size: 22px; margin-right: 2px; }
.status-chip .heart.lost { opacity: 0.25; filter: grayscale(1); }

/* ---- 闯关游戏：锁定提示 ---- */
.game-lock { text-align: center; padding: 48px 24px; }
.game-lock .lock-emoji { font-size: 72px; margin-bottom: 12px; }
.game-lock .lock-text { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.game-lock-inline {
  margin: 14px auto 0;
  font-size: 22px;
  font-weight: 700;
  color: #8E7CC3;
  background: var(--c-purple);
  border-radius: 16px;
  padding: 12px 20px;
  display: inline-block;
}

/* ---- 闯关游戏：关卡卡片 ---- */
.game-levels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

.level-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 2px solid var(--c-purple);
  border-radius: 22px;
  padding: 16px 22px;
  cursor: pointer;
  box-shadow: 0 3px 10px var(--shadow);
  transition: all 0.2s ease;
}

.level-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px var(--shadow-strong);
}

.level-card.cleared { border-color: var(--c-green); background: #F6FCF7; }

.level-emoji { font-size: 44px; }

.level-info { flex: 1; }

.level-title {
  font-size: 21px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.level-sub {
  font-size: 15px;
  font-weight: 600;
  color: #8E7CC3;
  background: var(--c-purple);
  border-radius: 10px;
  padding: 2px 10px;
}

.level-card.cleared .level-sub { color: #1E7A45; background: var(--c-green); }

.level-desc { font-size: 16px; color: var(--text-secondary); margin-top: 4px; }

.level-state {
  font-size: 17px;
  font-weight: 700;
  color: #8E7CC3;
  white-space: nowrap;
}

.level-card.cleared .level-state { color: #1E7A45; }

/* ---- 闯关游戏：答题视图 ---- */
.game-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.game-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 6px;
}

.game-dots .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #EDE9E3;
}

.game-dots .dot.done { background: #67C287; }
.game-dots .dot.cur { outline: 3px solid var(--c-purple); }

.game-question {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  margin-top: 10px;
}

.game-poem-lines {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.8;
  color: #9C7A3C;
  background: #FFF8E7;
  border: 2px dashed var(--c-yellow);
  border-radius: 16px;
  padding: 14px;
  margin-top: 14px;
}

.game-story { text-align: center; font-size: 22px; margin-top: 10px; font-weight: 600; }

/* 找规律序列 */
.game-pattern {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.pattern-chip {
  font-size: 44px;
  background: #F7F4EF;
  border-radius: 14px;
  padding: 8px 12px;
}

.pattern-chip.pattern-q {
  background: var(--c-purple);
  color: #fff;
  font-weight: 700;
}

/* 选项：复用 .math-opt，emoji/汉字选项字号更大 */
.game-opt { font-size: 46px; padding: 18px 0; }
.game-opt.hanzi { font-size: 52px; font-weight: 700; }

/* ---- 闯关游戏：结算视图 ---- */
.game-result { text-align: center; padding: 44px 24px; }

.result-emoji { font-size: 80px; margin-bottom: 10px; }

.result-title { font-size: 28px; font-weight: 700; margin-bottom: 6px; }

/* ---- 宠物页：雪宝形象 ---- */
.pet-hero {
  text-align: center; padding: 36px 24px 28px;
  background-color: #ECF2FB;
  background-image: radial-gradient(125% 85% at 50% 0%, #FFF7EF 0%, #F3F7FF 55%, #ECF2FB 100%);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  border-radius: 0 0 22px 22px;
  position: relative; overflow: hidden;
}

/* 宠物页场景（第二十二批）：衣柜里的场景缩略图 */
.scene-thumb {
  width: 100%; height: 54px; border-radius: 10px;
  background-size: cover; background-position: center bottom; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.wardrobe-item.locked .scene-thumb { filter: grayscale(.85) brightness(1.04); opacity: .7; }

.pet-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}

.pet-avatar { font-size: 96px; line-height: 1.2; }

.pet-outfit {
  position: absolute;
  top: -10px;
  right: -18px;
  font-size: 40px;
  animation: popIn 0.4s ease;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
}

.pet-mood {
  position: absolute;
  bottom: -2px;
  right: -22px;
  font-size: 34px;
  animation: popIn 0.4s ease;
}

@keyframes popIn {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.pet-name { font-size: 25px; font-weight: 800; color: var(--text-primary); }

.pet-level {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--c-peach);
  color: #fff;
  font-size: 18px;
  vertical-align: 4px;
}

.pet-exp-bar {
  width: 72%;
  max-width: 420px;
  height: 18px;
  margin: 14px auto 6px;
  border-radius: 999px;
  background: #F0EDE8;
  overflow: hidden;
}

.pet-exp-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #FF9A9A 0%, #FF6B6B 52%, #F2545B 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.55), inset 0 -3px 5px rgba(170,30,38,.35);
  transition: width 0.5s ease;
}

.pet-exp-text { font-size: 16px; color: var(--text-secondary); }

.pet-encourage {
  margin: 16px auto 0;
  max-width: 480px;
  padding: 12px 18px;
  border-radius: 14px;
  background: #FFF3E0;
  color: #E65100;
  font-size: 19px;
  font-weight: 600;
  animation: fadeIn 0.5s ease;
}

/* ---- 宠物页：三围 ---- */
.pet-stats { max-width: 560px; margin: 0 auto; }

.pet-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.pet-stat-label { font-size: 20px; width: 110px; flex: none; }

.pet-stat-bar {
  flex: 1;
  height: 22px;
  border-radius: 999px;
  background: #F0EDE8;
  overflow: hidden;
}

.pet-stat-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}

.pet-stat:nth-child(1) .pet-stat-bar span { background: #FFAB91; }
.pet-stat:nth-child(2) .pet-stat-bar span { background: #7EC8E3; }
.pet-stat:nth-child(3) .pet-stat-bar span { background: #FFD97A; }

.pet-stat-num { font-size: 19px; font-weight: 700; width: 36px; text-align: right; }

.pet-carrots {
  margin-top: 6px;
  text-align: center;
  font-size: 20px;
  color: var(--text-secondary);
}

/* ---- 宠物页：照顾雪宝 ---- */
.pet-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  color: #fff;
}

.pet-act-main { font-size: 22px; font-weight: 700; }

.pet-act-main small { font-size: 15px; font-weight: 500; opacity: 0.92; }

.pet-act-left { font-size: 14px; opacity: 0.92; }

.pet-act.pet-act-off {
  filter: grayscale(0.9);
  opacity: 0.55;
  cursor: not-allowed;
}

.pet-act-tip {
  margin-top: 14px;
  text-align: center;
  font-size: 16px;
  color: var(--text-secondary);
}

/* ---- 宠物页：雪宝的小提醒 ---- */
.reminder-list { display: flex; flex-direction: column; gap: 10px; }

.reminder-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #FBF8F3;
}

.reminder-emoji { font-size: 30px; flex: none; }

.reminder-label { font-size: 20px; font-weight: 700; flex: 1; }

.reminder-state { font-size: 17px; color: var(--text-secondary); flex: none; }

.reminder-state.done { color: #43A047; font-weight: 700; }

.reminder-go {
  flex: none;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--c-green);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.reminder-go:hover { filter: brightness(1.05); }

.reminder-done {
  flex: none;
  padding: 8px 18px;
  border-radius: 999px;
  background: #E3E0DA;
  color: #9E9A93;
  font-size: 17px;
  font-weight: 700;
  cursor: default;
}

/* ---- 轻提示浮层 ---- */
#app-toast {
  position: fixed;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%) translateY(16px);
  max-width: 80%;
  padding: 14px 24px;
  border-radius: 999px;
  background: rgba(60, 54, 44, 0.94);
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  text-align: center;
}

#app-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- 响应式：学习模块小屏适配 ---- */
@media (max-width: 900px) {
  .lesson-grid, .letter-grid { grid-template-columns: repeat(3, 1fr); }
  .hanzi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .lesson-grid, .letter-grid { grid-template-columns: repeat(2, 1fr); }
  .hanzi-big { font-size: 72px; }
  .poem-line { font-size: 20px; }
  .poem-card .poem-line { font-size: 18px; }
}

/* ========================================
   算术乐园 + 思维训练样式
   ======================================== */

/* ---- 算术：题卡 ---- */
.math-card { text-align: center; padding: 32px 28px; }

.math-question {
  font-size: 60px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 4px;
  line-height: 1.2;
}

.math-visual {
  margin-top: 14px;
  font-size: 28px;
  line-height: 1.6;
  letter-spacing: 2px;
  min-height: 46px;
}

.math-visual .math-op { margin: 0 10px; font-size: 22px; }

/* ---- 算术：有余数除法（双输入框：商 / 余数） ---- */
.math-remainder {
  max-width: 520px;
  margin: 22px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mr-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.mr-label {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 72px;
  text-align: right;
}
.mr-input {
  width: 140px;
  height: 68px;
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  border: 3px solid var(--c-sky);
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--text-primary);
  outline: none;
}
.mr-input:focus { border-color: var(--c-mint); box-shadow: 0 0 0 5px rgba(126, 217, 87, 0.22); }
.mr-input:disabled { opacity: 0.75; }
.math-remainder .btn { margin-top: 6px; }

/* ---- 算术：4 个大选项按钮 ---- */
.math-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 680px;
  margin: 22px auto 0;
}

.math-opt {
  font-family: inherit;
  font-size: 36px;
  font-weight: 700;
  padding: 24px 0;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  background: #F7F4EF;
  color: var(--text-primary);
  box-shadow: 0 3px 10px var(--shadow);
  transition: all 0.2s ease;
}

.math-opt:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 5px 14px var(--shadow-strong);
}

.math-opt:disabled { cursor: default; }

/* 对 → 绿底 ✓ */
.math-opt.correct {
  background: var(--c-green);
  color: #1E7A45;
  box-shadow: 0 4px 12px rgba(103, 194, 135, 0.4);
}

/* 错 → 红底 ✗ */
.math-opt.wrong {
  background: #FFD3D6;
  color: #C0392B;
  box-shadow: 0 4px 12px rgba(255, 150, 160, 0.4);
}

.math-feedback {
  margin-top: 18px;
  font-size: 24px;
  font-weight: 700;
}

.math-feedback.good { color: #1E7A45; }
.math-feedback.bad  { color: #C0392B; }

.math-actions {
  margin-top: 22px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-mini {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 14px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: var(--c-yellow);
  color: var(--text-primary);
  box-shadow: 0 2px 6px var(--shadow);
}

/* ---- 算术：导学卡（L6-L10 全屏讲解） ---- */
.math-intro-card {
  max-width: 620px;
  margin: 28px auto;
  text-align: center;
  padding: 36px 30px;
  background: linear-gradient(160deg, #FFFDF8, #FDF3E6);
}
.math-intro-badge {
  display: inline-block;
  background: var(--c-purple);
  color: #fff;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 18px;
  margin-bottom: 14px;
}
.math-intro-title { font-size: 34px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.math-intro-text {
  font-size: 24px;
  line-height: 1.9;
  color: var(--text-primary);
  text-align: left;
  background: #fff;
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: 0 3px 10px var(--shadow);
  margin-bottom: 22px;
}

/* ---- 算术：上限封顶气泡 ---- */
.math-cap-bubble {
  margin-top: 14px;
  background: #FFF4D6;
  border: 2px dashed #F0C36D;
  color: #8A6D1B;
  font-size: 20px;
  font-weight: 700;
  border-radius: 16px;
  padding: 12px 18px;
}

/* ---- 算术：L9 场景条（🥕平均分给🐰） ---- */
.math-scene {
  margin: 14px auto 6px;
  text-align: center;
}
.scene-carrots {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 2px;
  word-break: break-all;
  max-width: 560px;
  margin: 0 auto;
}
.scene-rabbits { font-size: 28px; margin-top: 6px; letter-spacing: 3px; }
.scene-cap { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-top: 6px; }

/* ---- 算术：L8 看图帮助（乘法网格） ---- */
.math-help-btn { margin: 10px auto; display: block; }
.math-grid-help { margin: 10px auto 4px; }
.mul-grid { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.mul-row { display: flex; gap: 8px; }
.mul-cell {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: #FFF6EC;
  border-radius: 12px;
  box-shadow: 0 2px 6px var(--shadow);
}

/* ---- 算术：L9 想口诀提示 ---- */
.math-divhint {
  margin-top: 14px;
  font-size: 22px;
  font-weight: 700;
  color: #8A5A12;
  background: #FFF4D6;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- 乘法口诀表 ---- */
.kj-card { text-align: center; padding: 28px 24px; }
.kj-rounds {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-purple);
  background: #F1E9FB;
  padding: 4px 12px;
  border-radius: 14px;
  margin-left: 8px;
}
.kj-group { margin-top: 18px; text-align: left; }
.kj-group-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.kj-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.kj-chip {
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 12px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: #F3F7FF;
  color: var(--text-primary);
  box-shadow: 0 2px 6px var(--shadow);
  transition: all 0.15s ease;
}
.kj-chip:hover { transform: translateY(-2px); }
.kj-chip.kj-active {
  background: var(--c-mint);
  color: #1E7A45;
  box-shadow: 0 4px 12px rgba(103, 194, 135, 0.5);
}

/* ---- 家长模式：算术阶梯设置 ---- */
.math-ladder {
  margin: 14px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--shadow);
}
.ladder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 17px;
  border-bottom: 1px solid #eee;
}
.ladder-row:last-child { border-bottom: none; }
.ladder-row.cur { background: #EAF7EF; font-weight: 700; }
.ladder-lv {
  flex: 0 0 42px;
  font-weight: 700;
  color: var(--c-purple);
}
.ladder-name { flex: 0 0 96px; font-weight: 700; color: var(--text-primary); }
.ladder-desc { color: #777; font-size: 15px; }
.math-hist { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hist-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #F3F7FF;
  border-radius: 12px;
  padding: 8px 10px;
  min-width: 46px;
}
.hist-lv { font-size: 20px; font-weight: 700; color: var(--c-purple); }
.hist-date { font-size: 13px; color: #888; }

/* ---- 思维训练：入口卡 ---- */
.game-entry {
  background: #FBF9F5;
  border-radius: var(--radius-card);
  padding: 30px 26px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.game-entry:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px var(--shadow-strong);
}

.game-entry-icon { font-size: 60px; margin-bottom: 10px; }

.game-entry-name {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
}

.game-entry-desc {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 18px;
}

/* ---- 游戏：顶部状态条 ---- */
.game-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.game-stat {
  font-size: 19px;
  color: var(--text-secondary);
  background: #F7F4EF;
  padding: 8px 16px;
  border-radius: 14px;
}

.game-stat b { color: var(--text-primary); font-size: 21px; }

/* ---- 记忆翻牌：4×4 网格 ---- */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}

.mem-card {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  border-radius: 18px;
  background: var(--c-lavender);
  box-shadow: 0 3px 10px var(--shadow);
  cursor: pointer;
  user-select: none;
  transition: all 0.25s ease;
}

.mem-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 14px var(--shadow-strong);
}

.mem-card.flipped {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 3px var(--c-lavender);
}

.mem-card.matched {
  background: var(--c-green);
  opacity: 0.55;
  cursor: default;
  transform: none;
}

/* ---- 数字顺序：泡泡场地 ---- */
.bubble-area {
  position: relative;
  height: 420px;
  max-width: 760px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #EAF6FB 0%, #FDF3F7 100%);
  overflow: hidden;
}

.num-bubble {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: #FFFFFF;
  background: radial-gradient(circle at 32% 28%, #FFD3E0 0%, var(--c-pink) 60%);
  box-shadow: 0 5px 14px rgba(214, 120, 160, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.4s ease;
}

.num-bubble:hover { transform: scale(1.08); }

/* 点对：泡泡「啵」地消失 */
.num-bubble.found {
  opacity: 0;
  transform: scale(0.2);
  pointer-events: none;
}

/* 点错：抖动提示 */
.num-bubble.shake { animation: bubbleShake 0.45s ease; }

@keyframes bubbleShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* ---- 游戏胜利横幅 ---- */
.game-win {
  margin-top: 20px;
  padding: 22px;
  border-radius: 18px;
  background: var(--c-yellow);
  color: #6B5200;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  animation: winPop 0.5s ease;
}

@keyframes winPop {
  0% { transform: scale(0.7); opacity: 0; }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- 响应式：算术 / 思维训练小屏适配 ---- */
@media (max-width: 900px) {
  .math-options { gap: 12px; }
  .math-opt { font-size: 30px; padding: 20px 0; }
  .math-question { font-size: 48px; }
  .bubble-area { height: 380px; }
  .num-bubble { width: 72px; height: 72px; font-size: 28px; }
}

@media (max-width: 600px) {
  .math-options { grid-template-columns: repeat(2, 1fr); }
  .math-visual { font-size: 22px; }
  .memory-grid { max-width: 100%; }
  .mem-card { font-size: 32px; }
  .bubble-area { height: 340px; }
  .num-bubble { width: 58px; height: 58px; font-size: 24px; }
}

/* ---- 响应式：闯关游戏小屏适配 ---- */
@media (max-width: 900px) {
  .game-status { gap: 14px; flex-wrap: wrap; }
  .status-chip { font-size: 17px; padding: 6px 12px; }
  .game-opt { font-size: 36px; padding: 14px 0; }
  .game-opt.hanzi { font-size: 40px; }
  .game-question { font-size: 24px; }
  .pattern-chip { font-size: 34px; }
  .game-poem-lines { font-size: 20px; }
}

@media (max-width: 600px) {
  .game-options { grid-template-columns: repeat(2, 1fr); }
  .level-emoji { font-size: 34px; }
  .level-title { font-size: 18px; }
  .result-emoji { font-size: 60px; }
  .result-title { font-size: 22px; }
}

/* ========================================
   家长模式（parent.js）
   ⚙ 齿轮长按入口 / PIN 数字盘 / 家长面板
   ======================================== */

/* ---- ⚙ 齿轮入口 ---- */
#sidebar-footer { position: relative; }

#parent-gear {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 18px;
  color: var(--text-secondary);
  opacity: 0.55;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.2s, opacity 0.2s;
  user-select: none;
  -webkit-user-select: none;
}
#parent-gear.holding {
  opacity: 1;
  color: var(--text-primary);
  animation: gear-spin 0.7s linear infinite;
}
@keyframes gear-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- 通用覆盖层 ---- */
.pp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(60, 50, 45, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- PIN 数字盘 ---- */
.pp-pin-card {
  width: 320px;
  max-width: 90vw;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 12px 40px var(--shadow-strong);
  padding: 26px 22px 20px;
  text-align: center;
}
.pp-pin-title { font-size: 24px; font-weight: 700; }
.pp-pin-sub { font-size: 16px; color: var(--text-secondary); margin-top: 6px; }
.pp-pin-dots { display: flex; gap: 16px; justify-content: center; margin: 18px 0 6px; }
.pp-pin-dots span {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--c-lavender);
  background: #FFF;
}
.pp-pin-dots span.on { background: var(--c-lavender); border-color: var(--c-lavender); }
.pp-pin-dots.shake { animation: pp-shake 0.4s; }
.pp-pin-msg { font-size: 15px; min-height: 22px; color: var(--text-secondary); }
.pp-pin-msg.err { color: #E57373; font-weight: 700; }
@keyframes pp-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.pp-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.pp-key {
  height: 56px;
  font-size: 24px;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  background: var(--bg-main);
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
}
.pp-key:active { background: var(--c-yellow); }
.pp-key-fn { font-size: 17px; color: var(--text-secondary); }

/* ---- 家长面板 ---- */
.pp-card {
  width: 860px;
  max-width: 94vw;
  max-height: 88vh;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 12px 40px var(--shadow-strong);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 10px;
}
.pp-head-title { font-size: 24px; font-weight: 700; }
.pp-close {
  border: none;
  background: var(--bg-main);
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
}
.pp-close:active { background: var(--c-peach); }

.pp-tabs { display: flex; gap: 8px; padding: 0 22px 12px; }
.pp-tab {
  flex: 1;
  height: 44px;
  border: 2px solid var(--c-blue);
  border-radius: 14px;
  background: #FFF;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}
.pp-tab.active { background: var(--c-blue); color: var(--text-primary); }

.pp-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 22px 20px;
  font-size: 17px;
}

/* ---- 计划参数 ---- */
.pp-section { margin-top: 14px; }
.pp-section-title { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.pp-slider { margin: 14px 4px; }
.pp-slider label { font-size: 18px; font-weight: 700; }
.pp-slider b { color: #7FB069; }
.pp-slider input[type=range] {
  width: 100%;
  height: 34px;
  margin-top: 4px;
  accent-color: var(--c-mint);
  cursor: pointer;
}
.pp-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 16px;
}
.pp-toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  background: var(--bg-main);
  cursor: pointer;
  position: relative;
}
.pp-toggle-item input { display: none; }
.pp-toggle-item span { flex: 1; font-size: 16px; }
.pp-switch {
  width: 42px; height: 24px;
  border-radius: 12px;
  background: #DDD8D0;
  position: relative;
  transition: background 0.2s;
  flex: none;
}
.pp-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #FFF;
  transition: left 0.2s;
}
.pp-toggle-item input:checked + span { color: var(--text-primary); }
.pp-toggle-item input:checked ~ .pp-switch { background: var(--c-mint); }
.pp-toggle-item input:checked ~ .pp-switch::after { left: 21px; }

.pp-actions { display: flex; gap: 12px; margin-top: 16px; }
.pp-tip { font-size: 14px; color: var(--text-secondary); margin-top: 10px; line-height: 1.6; }
.pp-tip code { background: var(--bg-main); padding: 1px 6px; border-radius: 6px; font-size: 13px; }

/* ---- 内容管理 ---- */
.pp-cattabs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pp-cattab {
  padding: 8px 14px;
  border: 2px solid var(--c-yellow);
  border-radius: 12px;
  background: #FFF;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}
.pp-cattab.active { background: var(--c-yellow); color: var(--text-primary); }

.pp-item-list { margin-top: 12px; }
.pp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid #F0EBE4;
}
.pp-item-main { flex: 1; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-badge { font-style: normal; font-size: 13px; color: var(--text-secondary); border: 1px solid #E5DFD6; border-radius: 8px; padding: 1px 6px; margin-left: 4px; }
.pp-item-btns { display: flex; gap: 6px; flex: none; }
.pp-mini {
  border: none;
  border-radius: 10px;
  background: var(--bg-main);
  font-size: 14px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text-primary);
  font-family: inherit;
}
.pp-mini-danger { color: #E57373; }

.pp-form-head { font-size: 19px; font-weight: 700; margin-top: 14px; }
.pp-form-row { display: flex; gap: 12px; }
.pp-form-row .pp-field { flex: 1; }
.pp-field { margin-top: 12px; }
.pp-field label { display: block; font-size: 15px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
.pp-field input, .pp-field textarea, .pp-field select {
  width: 100%;
  border: 2px solid #E8E2DA;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 17px;
  font-family: inherit;
  color: var(--text-primary);
  background: #FFF;
  resize: vertical;
}
.pp-field input:focus, .pp-field textarea:focus, .pp-field select:focus { outline: none; border-color: var(--c-mint); }

/* ---- 轻提示 ---- */
#pp-toast {
  position: fixed;
  left: 50%;
  bottom: 10vh;
  transform: translateX(-50%) translateY(20px);
  background: rgba(74, 74, 74, 0.92);
  color: #FFF;
  font-size: 17px;
  padding: 12px 24px;
  border-radius: 24px;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
#pp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- 导入向导与角标（v11 追加） ---- */
.pp-badge-mod {
  color: #E58A3A;
  border-color: #F0C9A0;
  background: #FDF3E7;
  font-style: normal;
}

/* 英语内容管理：类型徽标 / 自定义音频标记 / 受限歌曲红警（第十四批 P8） */
.pp-tag-af { font-style: normal; margin-left: 2px; }
.pp-warn-red {
  color: #C0392B;
  background: #FDEDEC;
  border: 1px solid #F5B7B1;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.5;
}
.pp-import-err {
  background: #FDEEEE;
  border: 2px solid #F0C0C0;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 16px;
  color: #B04A4A;
  max-height: 200px;
  overflow-y: auto;
}
.pp-import-err ul { margin: 6px 0 0 18px; padding: 0; }
.pp-import-err li { margin: 2px 0; }
.pp-import-ok {
  background: #EDF7EE;
  border: 2px solid #C8E6C9;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 16px;
  color: #3E6B44;
}
.pp-import-ok b { color: #2F5A36; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   思维训练 · 游戏注册表（数独 / 拼搭 / 转转看 / 小小建筑师）
   ============================================================ */

/* 菜单：6 张游戏卡，平板横屏三列网格 */
.grid-think { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tg-game-root { margin-top: 6px; }
.tg-head .btn-small { background: var(--c-pink); color: #fff; border: none; }

/* 通用：拼搭碎片抖动（与泡泡抖动同效） */
.shake { animation: bubbleShake 0.5s ease; }

/* ---- 数独小侦探 ---- */
.sdk-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sdk-grid {
  display: grid; gap: 4px;
  background: #E9D9E6; padding: 8px;
  border-radius: 16px; box-shadow: 0 4px 14px var(--shadow);
}
.sdk-n3 { grid-template-columns: repeat(3, 64px); }
.sdk-n4 { grid-template-columns: repeat(4, 56px); }
.sdk-cell {
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; background: #FFFFFF; border-radius: 10px;
  cursor: pointer; user-select: none; transition: all 0.15s ease;
}
.sdk-n3 .sdk-cell { width: 64px; height: 64px; }
.sdk-n4 .sdk-cell { width: 56px; height: 56px; font-size: 28px; }
.sdk-cell.fixed { background: #F3ECF8; cursor: default; }
.sdk-cell.blank { background: #FFFDF8; box-shadow: inset 0 0 0 2px #EFE6DA; }
.sdk-cell.sel { box-shadow: inset 0 0 0 4px var(--c-lavender); background: #FBF6FF; }
.sdk-cell.bad { box-shadow: inset 0 0 0 4px #FF7B7B; animation: sdkBad 0.95s ease; }
.sdk-cell.hinted { box-shadow: inset 0 0 0 4px var(--c-mint); background: #F2FBF4; }
/* 4×4 小宫格分隔线 */
.sdk-n4 .sdk-cell.bx-right { border-right: 3px solid #C9B6E4; }
.sdk-n4 .sdk-cell.bx-bottom { border-bottom: 3px solid #C9B6E4; }
/* 未选格就点托盘 → 空格轻轻抖动提示 */
.sdk-cell.nudge { animation: sdkNudge 0.6s ease; }
@keyframes sdkNudge {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.08); }
  70% { transform: scale(0.96); }
}
@keyframes sdkBad {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.sdk-tray { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sdk-tray-item {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; background: #FFFFFF; border-radius: 14px;
  box-shadow: 0 3px 10px var(--shadow); cursor: pointer;
  transition: transform 0.15s ease;
}
.sdk-tray-item:hover { transform: translateY(-3px); }
.sdk-tray-item.sdk-eraser { background: #FFEAEA; }

/* ---- 图形拼搭师 ---- */
.pz-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pz-target {
  background: #FFFDF8; border: 3px dashed var(--c-purple);
  border-radius: 18px; padding: 10px;
}
.pz-target-svg { width: 240px; height: auto; display: block; }
.pz-pool { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.pz-chip {
  position: relative; width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; border-radius: 16px;
  box-shadow: 0 3px 10px var(--shadow); cursor: pointer;
  transition: all 0.15s ease;
}
.pz-chip:hover { transform: translateY(-3px); }
.pz-chip.sel { box-shadow: 0 0 0 4px var(--c-lavender); background: #FBF6FF; }
.pz-chip.done { background: #F2FBF4; cursor: default; opacity: 0.7; }
.pz-piece-svg { width: 72px; height: 72px; }
.pz-rot {
  position: absolute; right: -6px; top: -6px;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--c-sky); color: #fff; font-size: 18px;
  cursor: pointer; box-shadow: 0 2px 6px var(--shadow);
}
.pz-slot.pz-fly-in { animation: pzFly 0.4s ease; }
@keyframes pzFly {
  0% { transform: scale(0.4); opacity: 0.3; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- 转转看 ---- */
.rot-target { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 14px; }
.rot-svg { width: 110px; height: 110px; }
.rot-svg.big { width: 130px; height: 130px; }
.rot-arrow { font-size: 20px; color: var(--text-secondary); }
.rot-options { display: grid; gap: 16px; justify-content: center; margin-top: 6px; }
.rot-options.n3 { grid-template-columns: repeat(3, 1fr); }
.rot-options.n4 { grid-template-columns: repeat(2, 1fr); max-width: 460px; }
.rot-opt {
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; border-radius: 18px;
  box-shadow: 0 3px 10px var(--shadow); cursor: pointer;
  transition: all 0.15s ease; position: relative;
}
.rot-opt:hover { transform: translateY(-3px); }
.rot-opt.spin-win { animation: rotSpin 0.5s ease; }
.rot-opt.demo-spin { animation: rotDemo 2s ease; }
@keyframes rotSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes rotDemo { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.rot-tag { position: absolute; left: 8px; top: 6px; font-size: 16px; color: var(--text-secondary); }

/* ---- 小小建筑师 ---- */
.bk-stage { display: flex; justify-content: center; margin: 10px 0 16px; }
.bk-svg { width: 260px; height: auto; }
.bk-svg.small { width: 120px; height: auto; }
.bk-options { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.bk-opt {
  min-width: 70px; height: 70px; padding: 0 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700;
  background: #FFFFFF; border-radius: 18px;
  box-shadow: 0 3px 10px var(--shadow); cursor: pointer;
  transition: all 0.15s ease;
}
.bk-opt:hover { transform: translateY(-3px); }
.bk-choices { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.bk-choice {
  position: relative; padding: 10px;
  background: #FFFFFF; border-radius: 18px;
  box-shadow: 0 3px 10px var(--shadow); cursor: pointer;
  transition: all 0.15s ease;
}
.bk-choice:hover { transform: translateY(-3px); }
.bk-tag { position: absolute; right: 6px; top: 4px; font-size: 16px; color: var(--text-secondary); }
.bk-hint { margin-top: 10px; text-align: center; color: var(--text-secondary); font-size: 18px; }
.bk-need { color: #C2185B; font-weight: 700; }

/* 思维菜单小屏适配 */
@media (max-width: 900px) {
  .grid-think { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================
   拼音模块样式
   ======================================== */

/* 模式切换 / 区块标签 */
.py-modes {
  display: flex;
  gap: 12px;
  margin: 8px 0 16px;
  flex-wrap: wrap;
}
.py-mode-btn {
  flex: 1;
  min-width: 120px;
  padding: 12px 10px;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  background: #FBF9F5;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.py-mode-btn.active {
  background: var(--c-blue);
  border-color: #7FB7D6;
  box-shadow: 0 4px 12px var(--shadow);
}
.py-mode-btn:active { transform: translateY(-2px); }

.py-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.py-tab {
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  background: #F0ECE4;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.py-tab.active {
  background: var(--c-peach);
  color: #fff;
}

/* 卡片网格 */
.py-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.py-card {
  position: relative;
  background: #FBF9F5;
  border-radius: 22px;
  padding: 16px 12px 14px;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.py-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px var(--shadow); }
.py-card.done { background: #F0F8F2; border-color: var(--c-green); }

/* 大号拼音 + 四线三格背景 */
.py-syll {
  font-size: 78px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
}
.py-card-grid {
  display: block;
  margin: 6px auto 4px;
  overflow: visible;
}
.py-card-grid .py-grid-line { stroke: #94a3b8; stroke-width: 1; }
.py-card-grid .py-grid-mid { fill: #f1f5f9; }
.py-card-grid .py-grid-glyph {
  fill: #334155;
  text-anchor: middle;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Songti SC", "SimSun", serif;
  font-weight: 700;
}

.py-tone {
  font-size: 22px;
  color: #E67E22;
  font-weight: 700;
  margin: 2px 0 6px;
}
.py-ex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 18px;
  color: var(--text-secondary);
}
.py-ex-emoji { font-size: 22px; }
.py-ex-char { font-size: 20px; color: var(--text-primary); font-weight: 700; }
.py-ex-word { font-size: 18px; }

.py-done-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--c-green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}

.py-progress { margin: 4px 0 14px; }

/* 声调练习 */
.py-tone-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 14px 0;
}
.py-tone-card {
  background: #FBF9F5;
  border-radius: 18px;
  padding: 22px 0;
  text-align: center;
  font-size: 64px;
  font-weight: 800;
  color: var(--text-primary);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s ease;
}
.py-tone-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px var(--shadow); }
.py-tone-card.correct { background: var(--c-mint); border-color: #8FD3AC; }
.py-tone-card.wrong { background: var(--c-coral); border-color: #FF8A65; animation: shake 0.4s; }

.py-demo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.py-demo-card {
  background: #FBF9F5;
  border-radius: 16px;
  padding: 14px 6px;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s ease;
}
.py-demo-card:hover { transform: translateY(-2px); border-color: var(--c-sky); }
.py-demo-card { font-size: 26px; font-weight: 800; }
.py-demo-py { display: block; font-size: 18px; color: #E67E22; font-weight: 600; margin-top: 4px; }

/* 拼读练习 */
.py-blend-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0;
  padding: 18px;
  background: #FBF9F5;
  border-radius: 22px;
}
.py-blend-card {
  min-width: 70px;
  padding: 18px 16px;
  text-align: center;
  font-size: 46px;
  font-weight: 800;
  color: var(--text-primary);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 3px 10px var(--shadow);
}
.py-blend-init { color: #2E86C1; }
.py-blend-fin { color: #C2185B; }
.py-blend-plus, .py-blend-equals { font-size: 34px; font-weight: 800; color: var(--text-secondary); }
.py-blend-syl {
  min-width: 90px;
  padding: 18px 16px;
  text-align: center;
  font-size: 56px;
  font-weight: 800;
  color: #27AE60;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 3px 10px var(--shadow);
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.3s ease;
}
.py-blend-syl.show { opacity: 1; transform: scale(1); }

/* 拼读乐园（第十四批 L2 自然拼读 CVC）—— 复用"两卡合拢"视觉语言 */
.ph-fam-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.ph-fam-chip {
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 800;
  color: #3E5C76;
  background: #EAF2F8;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ph-fam-chip.active {
  background: var(--c-mint);
  color: #fff;
  box-shadow: 0 2px 8px rgba(84, 160, 120, 0.35);
}
.ph-fam-chip:hover { transform: translateY(-2px); }
.ph-blend-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 6px;
  padding: 18px;
  background: #FBF9F5;
  border-radius: 22px;
}
.ph-blend-card {
  min-width: 70px;
  padding: 18px 16px;
  text-align: center;
  font-size: 46px;
  font-weight: 800;
  color: var(--text-primary);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 3px 10px var(--shadow);
  transition: all 0.3s ease;
}
.ph-blend-onset { color: #2E86C1; }
.ph-blend-rime { color: #C2185B; }
.ph-blend-plus, .ph-blend-equals { font-size: 34px; font-weight: 800; color: var(--text-secondary); }
.ph-blend-word {
  min-width: 110px;
  padding: 16px 20px;
  text-align: center;
  font-size: 58px;
  font-weight: 800;
  color: #27AE60;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 3px 10px var(--shadow);
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.35s ease;
}
.ph-blend-word.show { opacity: 1; transform: scale(1); }
.ph-blend-area.merged .ph-blend-onset { transform: translateX(34px); }
.ph-blend-area.merged .ph-blend-rime { transform: translateX(-34px); }
.ph-zh {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: #E67E22;
  margin: 6px 0 4px;
  display: none;
}
.ph-actions { text-align: center; }

/* 高频词闪卡（第十四批 L3 Dolch Pre-primer） */
.sw-card {
  margin: 14px auto 4px;
  max-width: 340px;
  padding: 26px 20px;
  text-align: center;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 4px 14px var(--shadow);
  cursor: pointer;
  transition: all 0.25s ease;
  border: 3px solid #EAF2F8;
  position: relative;
}
.sw-card:hover { transform: translateY(-3px); border-color: var(--c-sky); }
.sw-card.flip { border-color: #F9E79F; background: #FFFDF3; }
.sw-card.done { border-color: var(--c-mint); }
.sw-word {
  font-size: 64px;
  font-weight: 800;
  color: #2E86C1;
  line-height: 1.15;
  word-break: break-all;
}
.sw-card.flip .sw-word { color: #1F618D; }
.sw-zh {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 700;
  color: #E67E22;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}
.sw-card.flip .sw-zh { opacity: 1; max-height: 60px; }
.sw-done-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--c-mint);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
}

/* 通关提示 */
.game-win {
  margin: 16px 0;
  padding: 18px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: #2E7D32;
  background: var(--c-mint);
  border-radius: 18px;
}

/* 导航锁定（4 岁拼音未解锁） */
.nav-item.nav-locked { opacity: 0.55; filter: grayscale(0.4); }
.nav-item.nav-locked .nav-emoji { filter: grayscale(1); }
.nav-lock {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}
.nav-item { position: relative; }

/* 识字页：拼音 / 汉字可点击 */
.hanzi-tap { cursor: pointer; }
.hanzi-pinyin.hanzi-tap { color: #E67E22; }
.hanzi-pinyin.hanzi-tap:hover { text-decoration: underline; }
.hanzi-big.hanzi-tap:hover { color: var(--c-blue); }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ==================== 复习时刻 ==================== */
.review-card { text-align: center; }
.review-dots { justify-content: center; margin: 8px 0 4px; }
.review-progress-label { font-size: 16px; color: var(--text-secondary); margin-bottom: 14px; }
.review-big {
  background: linear-gradient(135deg, var(--c-pink, #F8BBD0), var(--c-sky, #A8D8EA));
  border-radius: 22px;
  padding: 36px 20px;
  margin: 6px auto 18px;
  max-width: 460px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.12s;
}
.review-big:active { transform: scale(0.98); }
.review-hanzi { font-size: 88px; font-weight: 800; color: #fff; line-height: 1.1; text-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.review-pinyin { font-size: 26px; color: #fff; margin-top: 6px; opacity: 0.95; }
.review-word { font-size: 22px; color: #fff; margin-top: 4px; opacity: 0.95; }
.review-en-word { font-size: 54px; font-weight: 800; color: #fff; line-height: 1.15; text-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.review-en-zh { font-size: 26px; color: #fff; margin-top: 8px; opacity: 0.95; }
.review-tip { font-size: 16px; color: #fff; margin-top: 14px; opacity: 0.9; }
.review-done { text-align: center; }

/* ==================== 视力时长 ==================== */
#screen-limit-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(255, 243, 224, 0.97);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.screen-limit-card {
  background: #fff; border-radius: 24px; padding: 32px 26px;
  max-width: 420px; width: 100%; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.screen-limit-emoji { font-size: 64px; }
.screen-limit-title { font-size: 24px; font-weight: 800; margin: 10px 0 6px; }
.screen-limit-text { font-size: 18px; color: var(--text-secondary); margin-bottom: 18px; }
.screen-limit-pin { margin: 14px 0; }
.screen-limit-pin-input {
  width: 140px; padding: 10px; font-size: 20px; text-align: center;
  border: 2px solid var(--c-blue, #A8D8EA); border-radius: 12px; margin-right: 8px;
}
.screen-limit-msg { font-size: 14px; color: #E74C3C; min-height: 18px; margin-top: 6px; }

#screen-gentle-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
  background: linear-gradient(90deg, #FFE0A3, #FFD3B6);
  color: #5b3a1a; font-size: 18px; font-weight: 700;
  text-align: center; padding: 12px;
  transform: translateY(-100%); transition: transform 0.4s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
#screen-gentle-bar.show { transform: translateY(0); }

/* ==================== 家长面板：音效/护眼/弱项/数据 ==================== */
.pp-seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pp-seg-btn {
  flex: 1; min-width: 70px; padding: 10px 6px; border: 2px solid var(--c-blue, #A8D8EA);
  border-radius: 12px; background: #fff; font-size: 16px; cursor: pointer; color: var(--text-secondary);
}
.pp-seg-btn.active { background: var(--c-mint, #B5E7C8); border-color: var(--c-mint, #B5E7C8); color: #1b5e20; font-weight: 700; }
.pp-weak-group { margin: 10px 0; }
.pp-weak-cat { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.pp-weak-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: #fff; border-radius: 12px; margin-bottom: 8px; font-size: 18px;
}
.pp-weak-badge { background: #FFE0E0; color: #C0392B; border-radius: 10px; padding: 3px 10px; font-size: 14px; font-weight: 700; }

/* 记忆状态（莱特纳盒子三库统计，学习报告 F 区） */
.pp-mem-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 9px 4px; border-bottom: 1px dashed #f0ebe4; font-size: 15px;
}
.pp-mem-lib { width: 84px; font-weight: 700; color: var(--text-primary); }
.pp-mem-stage { color: var(--text-secondary); }
.pp-mem-stage b { color: var(--text-primary); font-size: 17px; margin: 0 2px; }
.pp-mem-grad b { color: #c0392b; }
.pp-mem-warn {
  margin-top: 10px; padding: 9px 12px; background: #fff4e0; border: 1px solid #ffd9a0;
  color: #8a5a00; border-radius: 12px; font-size: 14px; line-height: 1.6;
}

/* ==========================================================================
   学习报告（家长模式 📊 学习报告 页签）
   ========================================================================== */

/* 8 个页签 → 允许换行，每行 4 个，避免拥挤重叠 */
.pp-tabs { flex-wrap: wrap; }
.pp-tab {
  flex: 1 1 calc(25% - 6px);
  min-width: 116px;
  height: 42px;
  font-size: 17px;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 顶部：周选择 + 导出 */
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* 每日状态条 */
.rp-days { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.rp-day {
  flex: 1 1 92px; text-align: center; padding: 8px 4px;
  border-radius: 14px; background: #FAF7F2;
}
.rp-day-dow { font-size: 14px; color: var(--text-secondary); }
.rp-day-dot {
  height: 22px; margin: 6px 0; border-radius: 11px; background: #E8E2DA;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.rp-day.part .rp-day-dot { background: linear-gradient(90deg, var(--c-mint) 50%, #E8E2DA 50%); }
.rp-day.full .rp-day-dot { background: var(--c-yellow); box-shadow: inset 0 0 0 2px #F0D48A; }
.rp-day-date { font-size: 13px; color: var(--text-secondary); }

/* A. 概览卡片 */
.rp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rp-stat { background: #FAF7F2; border-radius: 16px; padding: 14px 8px; text-align: center; }
.rp-stat-v { font-size: 22px; font-weight: 700; }
.rp-stat-l { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }

/* B. 新学 */
.rp-line { font-size: 17px; margin: 6px 0; line-height: 1.6; }
.rp-hanzi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; margin: 10px 0; }
.rp-hanzi-card {
  background: #FFF; border: 2px solid var(--c-coral); border-radius: 12px;
  padding: 8px 2px; text-align: center; cursor: pointer; transition: transform .12s;
}
.rp-hanzi-card:active { transform: scale(.96); }
.rp-hanzi-char { font-size: 26px; font-weight: 700; line-height: 1.2; }
.rp-hanzi-py { font-size: 13px; color: var(--text-secondary); }

/* 每日明细表 */
.rp-table { margin-top: 10px; border-radius: 12px; overflow: hidden; border: 1px solid #F0EBE4; }
.rp-tr {
  display: grid; grid-template-columns: 108px 132px 1fr; gap: 8px;
  padding: 8px 10px; font-size: 15px; align-items: center;
}
.rp-tr:nth-child(even) { background: #FCFAF7; }
.rp-th { background: #F5F1EB; font-weight: 700; font-size: 14px; color: var(--text-secondary); }
.rp-tag { font-style: normal; padding: 2px 8px; border-radius: 10px; font-size: 13px; }
.rp-tag-none { background: #EFEAE3; color: #9A9A9A; }
.rp-tag-full { background: #FFF3C4; color: #8A6D1F; }
.rp-tag-part { background: #E3F2E6; color: #4E7A57; }
.rp-muted { font-style: normal; color: #B0A99F; }

/* D. 图例 */
.rp-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 14px; color: var(--text-secondary); flex-wrap: wrap; }
.rp-leg { display: inline-flex; align-items: center; gap: 6px; }
.rp-leg i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* SVG 条形图 */
.rp-svg { display: block; margin: 6px 0; }

/* ==========================================================================
   第三批优化样式：PWA 更新条 / 离线进度 / 识字冒险地图 / 首页迷你带
   ========================================================================== */

/* PWA 更新提示条 */
#pwa-update-bar {
  position: fixed; top: 12px; left: 50%; transform: translate(-50%, -120%);
  z-index: 1500; display: flex; align-items: center; gap: 10px;
  background: #2F3542; color: #FFF;
  padding: 10px 16px; border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  font-size: 16px;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1);
}
#pwa-update-bar.show { transform: translate(-50%, 0); }
.pwa-update-emoji { font-size: 20px; }
.pwa-update-text { font-weight: 600; }
.pwa-update-btn {
  background: #FFD86E; color: #2F3542; border: none; border-radius: 14px;
  padding: 6px 14px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.pwa-update-close {
  background: transparent; color: #FFF; border: 0; font-size: 22px;
  cursor: pointer; line-height: 1; padding: 0 4px;
}

/* 家长中心：离线数据管理 - 进度条 */
.pp-progress { margin-top: 12px; }
.pp-progress-bar { height: 12px; background: #F2EFEA; border-radius: 6px; overflow: hidden; }
.pp-progress-fill {
  height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--c-mint), var(--c-blue));
  transition: width .25s ease;
}
.pp-progress-label {
  font-size: 14px; color: var(--text-secondary); margin-top: 6px; text-align: center;
}

/* 识字冒险地图 */
.hanzi-map-card { padding: 18px 18px 16px; }
.hanzi-map-card .card-title { display: flex; justify-content: space-between; align-items: baseline; }
.map-progress-label { font-size: 14px; font-weight: 400; color: var(--text-secondary); }
.map-progress-label b { color: #7FB069; font-size: 18px; }
.hanzi-map-wrap { width: 100%; }
.hanzi-map { display: block; width: 100%; height: auto; max-height: 340px; }
.hm-station { transition: transform .15s; }
.hm-station:hover { transform: scale(1.15); }
.hm-current .hm-pulse { animation: hm-pulse 1.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes hm-pulse {
  0%, 100% { opacity: 0.35; r: 15; }
  50%      { opacity: 0.6;  r: 22; }
}
.hm-region { user-select: none; }
.hm-flag { user-select: none; }

/* 彩虹进度条 */
.map-rainbow {
  height: 10px; border-radius: 5px; overflow: hidden; margin: 10px 0 4px;
  background: #F2EFEA;
}
.map-rainbow-fill {
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #A8DC9C 0%, #5FAD52 25%, #A17B5A 50%, #7CB7E5 75%, #B5A0F0 100%);
  transition: width .4s;
}
.map-progress-text {
  font-size: 15px; color: var(--text-secondary); text-align: right;
}

/* 6 字气泡 */
.map-bubble {
  margin-top: 12px; background: #FFFCF6; border: 2px solid var(--c-orange);
  border-radius: 16px; padding: 12px 14px;
}
.map-bubble-title { font-size: 15px; font-weight: 700; color: #5A4A2F; margin-bottom: 8px; }
.map-bubble-chars { display: flex; flex-wrap: wrap; gap: 8px; }
.map-bubble-char {
  display: flex; flex-direction: column; align-items: center;
  background: #FFF; border: 1.5px solid var(--c-coral); border-radius: 12px;
  padding: 6px 10px; cursor: pointer; min-width: 56px; transition: transform .12s;
}
.map-bubble-char:hover { transform: translateY(-2px); }
.map-bubble-char:active { transform: scale(.95); }
.map-bubble-char b { font-size: 24px; line-height: 1.1; }
.map-bubble-char i { font-size: 12px; color: var(--text-secondary); font-style: normal; }
.map-bubble-tip { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }

/* 首页迷你带 */
.mini-map-card {
  padding: 12px 16px; margin-bottom: 14px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.mini-map-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px var(--shadow); }
.mini-map-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; height: 44px;
}
.mini-station {
  flex: 1; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.mini-station.mini-done {
  background: linear-gradient(135deg, var(--c-mint), var(--c-green));
  color: #FFF;
}
.mini-station.mini-current {
  background: #FFF; border: 3px solid var(--c-orange);
  width: 38px; height: 38px; font-size: 20px;
  box-shadow: 0 0 0 4px rgba(255,204,188,0.5);
  animation: mini-bounce 1.6s ease-in-out infinite;
}
@keyframes mini-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.mini-station.mini-future {
  background: #FFF; color: #B0A99F; border: 1.5px solid #E0DAD0;
  font-size: 12px; height: 24px;
}
.mini-map-link {
  font-size: 14px; color: var(--c-blue); text-align: right; margin-top: 4px; font-weight: 700;
}

/* ==========================================================================
   第四批：赛车主题样式（宠物页赛车化 / 地图赛道 / 迷你带 / 轮胎）
   ========================================================================== */

/* 车体舞台 */
.pet-car-stage { position: relative; margin: 8px auto 4px; }
.pet-car-box { position: relative; width: 230px; margin: 0 auto; will-change: transform; animation: pet-bob 2.8s ease-in-out infinite; }
.pet-car-img { width: 230px; height: auto; display: block; position: relative; z-index: 2; }
.pet-rabbit-img {
  position: absolute; left: 6%; top: -34px; width: 46px; height: auto; z-index: 1;
  /* 车手探出车顶的"坐在车里"观感 */
}
.pet-trophy { position: absolute; top: -10px; right: -10px; font-size: 28px; z-index: 3; }

/* 三围拟人描述 */
.pet-stat-desc { font-size: 13px; color: var(--text-secondary); font-weight: 400; line-height: 1.3; }

/* 状态视觉 */
.pet-sad .pet-car-img { filter: grayscale(0.4); }
.pet-bubble {
  position: absolute; top: -22px; right: 14%; font-size: 28px; z-index: 4;
  animation: pet-bob 1.6s ease-in-out infinite;
}
@keyframes pet-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pet-low-em { position: absolute; top: 46%; left: -18px; font-size: 26px; z-index: 4; }

/* 兜风尾迹 + 驶过动画 */
.pet-exhaust {
  position: absolute; right: -52px; top: 42%; display: flex; gap: 5px;
  opacity: 0; z-index: 3; pointer-events: none;
}
.pet-exhaust span { font-size: 18px; }
.pet-driving .pet-car-box { animation: pet-drive 1.5s cubic-bezier(.25,.6,.35,1) forwards; }
.pet-driving .pet-exhaust { animation: pet-exhale 1.5s ease-in forwards; }
@keyframes pet-drive {
  0%   { transform: translateX(0); }
  100% { transform: translateX(330px); }
}
@keyframes pet-exhale {
  0%, 55% { opacity: 1; }
  100%    { opacity: 0; }
}

/* 每日衰减 / 三围心情：雪宝台词改为「语音气泡」——4 岁不识字，用声波动画代替文字 */
.pet-voice {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 9px 15px;
  background: #FFFFFF; border: 2px solid #FFE3E3; border-radius: 999px;
  box-shadow: 0 5px 12px rgba(255,107,107,.18);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pet-voice-rabbit { font-size: 22px; line-height: 1; }
.pet-voice-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.pet-voice-wave i {
  width: 4px; height: 7px; border-radius: 4px; background: #FF6B6B;
  animation: pet-wave 0.9s ease-in-out infinite;
}
.pet-voice-wave i:nth-child(2) { animation-delay: .15s; }
.pet-voice-wave i:nth-child(3) { animation-delay: .3s; }
@keyframes pet-wave { 0%,100% { height: 7px; } 50% { height: 17px; } }
.pet-voice-play { font-size: 18px; }
.pet-voice-on .pet-voice-wave i { animation-duration: .45s; background: #F2545B; }
.pet-voice-mood { background: #FFF7F0; border-color: #FFE6CC; }
.pet-voice-mood .pet-voice-wave i { background: #FF9F45; }

/* 车库展示架 */
.pet-garage { display: flex; gap: 8px; margin-top: 12px; }
.pet-slot {
  flex: 1; text-align: center; background: #F5F1EB; border-radius: 12px; padding: 8px 4px;
}
.pet-slot-emoji { font-size: 24px; display: block; line-height: 1.2; }
.pet-slot-label { font-size: 13px; color: var(--text-secondary); }
.pet-slot.locked { opacity: .55; filter: grayscale(1); }

/* 闯关：备用轮胎（🛞）消失动画 */
.status-chip .heart { font-size: 22px; margin-right: 2px; display: inline-block; }
.status-chip .heart.lost { animation: tire-pop .45s ease-out forwards; }
@keyframes tire-pop {
  0%   { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: .22; transform: scale(.55) rotate(150deg); }
}

/* 首页迷你带：当前站车图 */
.mini-station.mini-current .mini-car { height: 32px; width: auto; max-width: 40px; }

/* 地图：当前站车体 + 雪宝（SVG image 不拦截点击） */
.hm-car-img, .hm-rabbit-img { pointer-events: none; }
.hm-current { cursor: pointer; }

/* ---- P1 经验条目标圆点 + 去英文文案 ---- */
.pet-exp-flag {
  position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid #F2545B;
  box-shadow: 0 0 0 3px rgba(242,84,91,.22);
}
.pet-exp-num { color: #F2545B; font-weight: 800; }
.pet-exp-max { color: #E0559A; font-weight: 700; }
.pet-exp-text { font-size: 16px; color: var(--text-secondary); }

/* ---- P2 环境氛围：车下赛道带（阴影已存在，仅补跑道） ---- */
.pet-car-stage::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 4px; height: 8px;
  background: repeating-linear-gradient(90deg, #E7ECF5 0 16px, #D7DEEA 16px 32px);
  border-radius: 5px; opacity: .65; z-index: 0;
}

/* ---- P2 状态分级可视化：低油 / 蒙尘 / 冒烟 ---- */
.pet-state-lowfuel .pet-car-img { filter: brightness(.72) saturate(.85); }
.pet-state-lowfuel::before {
  content: "🔋"; position: absolute; left: 9%; top: 16%; font-size: 20px; z-index: 5; opacity: .92;
}
.pet-state-dusty::before {
  content: ""; position: absolute; inset: 0; border-radius: 14px; z-index: 3; pointer-events: none;
  background:
    radial-gradient(3px 3px at 30% 40%, rgba(150,128,96,.5) 60%, transparent 62%),
    radial-gradient(3px 3px at 55% 62%, rgba(150,128,96,.45) 60%, transparent 62%),
    radial-gradient(3px 3px at 70% 34%, rgba(150,128,96,.5) 60%, transparent 62%),
    radial-gradient(3px 3px at 44% 76%, rgba(150,128,96,.4) 60%, transparent 62%);
}
.pet-state-smoky .pet-exhaust { opacity: .55; animation: pet-idle-smoke 2.4s ease-in-out infinite; }
@keyframes pet-idle-smoke {
  0%,100% { transform: translateY(0); opacity: .4; }
  50%     { transform: translateY(-4px); opacity: .75; }
}

/* ========================================
   第四批优化：英语理解问答 / 古诗意境卡 / 徽章陈列室
   ======================================== */

/* ---- 英语理解问答（听一听，选一选） ---- */
.quiz-sentence {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  background: #F3F7FF;
  border-radius: 16px;
  padding: 16px 20px;
  margin: 10px 0 6px;
  text-align: center;
}
.quiz-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 14px;
}
.quiz-opt {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FBF9F5;
  border-radius: 22px;
  box-shadow: 0 3px 10px var(--shadow);
  cursor: pointer;
  transition: all 0.18s ease;
}
.quiz-opt:hover { transform: translateY(-4px); }
.quiz-opt .quiz-emoji { font-size: 64px; }
.quiz-opt.quiz-wrong { animation: quiz-shake 0.4s ease; background: #FFE3E5; }
.quiz-opt.quiz-hint { animation: quiz-glow 0.9s ease 2; }
@keyframes quiz-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
@keyframes quiz-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(103, 194, 135, 0.6); }
  50% { box-shadow: 0 0 0 14px rgba(103, 194, 135, 0.1); }
}
.quiz-feedback {
  margin-top: 14px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #C0392B;
  min-height: 28px;
}

/* ---- 古诗意境卡 ---- */
.poem-scene-card { text-align: center; }
.scene-emoji {
  font-size: 64px;
  letter-spacing: 10px;
  line-height: 1.6;
  background: linear-gradient(160deg, #FFFDF8, #FDF3E6);
  border-radius: 22px;
  padding: 22px 12px;
  margin: 14px 0;
  box-shadow: 0 3px 10px var(--shadow);
}
.scene-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.8;
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px var(--shadow);
}

/* 第八批：意境卡深化（插画/降级双布局 + 诗行🔊 + 白话注解） */
.btn.btn-tiny {
  padding: 4px 10px;
  font-size: 18px;
  border-radius: 12px;
  line-height: 1.2;
}
.scene-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 14px;
}
.scene-title-row .detail-title {
  flex: 1;
  text-align: left;
  margin: 0;
}
.scene-emoji-mini {
  font-size: 28px;
  letter-spacing: 4px;
  background: #FFF8E8;
  border-radius: 14px;
  padding: 4px 10px;
  box-shadow: 0 2px 6px var(--shadow);
  flex-shrink: 0;
}
.scene-illustration {
  margin: 8px auto 18px;
  display: flex;
  justify-content: center;
}
.scene-image {
  max-width: 60%;
  max-height: 360px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  background: linear-gradient(160deg, #FFFDF8, #FDF3E6);
  box-shadow: 0 3px 12px var(--shadow);
  display: block;
}
/* 短边 < 350px 的源图按原尺寸显示（不放大），保持原观感 */
.scene-image.scene-image-original {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
}
.scene-fallback {
  margin: 14px auto 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.scene-emoji-big {
  font-size: 88px;
  letter-spacing: 14px;
  line-height: 1.4;
  background: linear-gradient(160deg, #FFFDF8, #FDF3E6);
  border-radius: 22px;
  padding: 24px 16px;
  box-shadow: 0 3px 10px var(--shadow);
}
.scene-lines {
  margin-top: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scene-line-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.scene-line-row:hover { background: #F3EFE7; }
.scene-line-row.active {
  background: #FFF3D6;
  box-shadow: 0 0 0 2px var(--c-yellow) inset;
}
.scene-line-text {
  flex: 1;
  font-size: 22px;
  line-height: 1.7;
  letter-spacing: 1.5px;
}
.scene-line-btn {
  flex-shrink: 0;
  background: var(--c-yellow);
}
.scene-line-explain {
  display: none;
  margin: 2px 12px 10px 14px;
  padding: 10px 14px;
  background: #FFF8E8;
  border-left: 4px solid var(--c-yellow);
  border-radius: 0 12px 12px 0;
  font-size: 17px;
  color: #5a4A1A;
  line-height: 1.6;
  animation: explainFade 0.3s ease;
}
.scene-line-explain.show {
  display: block;
}
@keyframes explainFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- 徽章陈列室 ---- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.badge-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 18px;
  text-align: center;
  transition: all 0.2s ease;
}
.badge-cell.unlocked {
  background: #FFF8E8;
  box-shadow: 0 3px 10px var(--shadow);
  cursor: pointer;
}
.badge-cell.unlocked:hover { transform: translateY(-4px); }
.badge-cell.locked {
  background: #F2F0EC;
  filter: grayscale(0.9);
  opacity: 0.75;
}
.badge-cell .badge-emoji { font-size: 38px; }
.badge-cell .badge-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.badge-cell .badge-date { font-size: 12px; color: #999; }
.badge-new-note {
  margin-bottom: 12px;
  background: #FFF4D6;
  border: 2px dashed #F0C36D;
  color: #8A6D1B;
  font-size: 18px;
  font-weight: 700;
  border-radius: 14px;
  padding: 10px 16px;
}

/* ---- 徽章庆祝卡（全屏 overlay + emoji 落下动画） ---- */
.badge-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-card {
  background: linear-gradient(165deg, #FFFDF8, #FFE9B8);
  border-radius: 28px;
  padding: 30px 44px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: badge-pop 0.4s ease;
}
.badge-drop {
  font-size: 96px;
  animation: badge-fall 0.7s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.badge-name { font-size: 32px; font-weight: 700; color: var(--text-primary); margin-top: 8px; }
.badge-desc { font-size: 18px; color: #8A6D1B; margin: 8px 0 16px; }
@keyframes badge-pop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes badge-fall {
  0% { transform: translateY(-120px) scale(1.4); opacity: 0; }
  60% { transform: translateY(8px) scale(1); opacity: 1; }
  100% { transform: translateY(0); }
}

@media (max-width: 900px) {
  .quiz-options { grid-template-columns: repeat(2, 1fr); }
  .badge-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==================== 第十一批：复习时刻（莱特纳盒子双卡制） ==================== */
.review-poem-title { font-size: 30px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.review-poem-meta { font-size: 16px; color: var(--text-secondary); margin-bottom: 10px; }
.review-poem-line { font-size: 24px; line-height: 1.6; color: var(--c-brown, #7A5A3A); font-weight: 600; }
.review-test-hint { text-align: center; margin: 4px 0 10px; }
.review-test-opts { margin-top: 18px; }
/* 第二十六批：古诗「下一句」检验卡的句子选项 —— 两列窄卡 + 小一号字。
   原先 4 列 × 46px 放五言/七言会挤成折行，且诗句被套上书名号，两处一起修。 */
.review-test-opts.poem-opts { grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 560px; }
.review-test-opts.poem-opts .game-opt.poem-line {
  font-size: 24px; font-weight: 600; line-height: 1.5;
  padding: 18px 10px; text-align: center; letter-spacing: 1px;
}
@media (max-width: 900px) {
  .review-test-opts.poem-opts { grid-template-columns: 1fr; }
  .review-test-opts.poem-opts .game-opt.poem-line { font-size: 22px; }
}
.review-feedback { text-align: center; font-size: 20px; margin-top: 14px; min-height: 30px; }

/* ============================================================
   习惯语音化（第十三批）：图标主导卡片
   - .habit-card         图标主导卡片（名称缩小为辅助文字）
   - .habit-icon         大图标（约 78px），点击听 voiceTip
   - .habit-icon.talking 播放讲解时的轻微弹跳动画
   - .habit-card.done    已打卡（绿色卡面 + 白字）
   - .habit-btn.check-pop 打卡成功勾选弹出动画
   长按取消复用家长中心 pp-* PIN 组件样式
   ============================================================ */
.habit-grid { gap: 14px; }
.habit-card {
  padding: 18px 8px 16px;
  text-align: center;
  transition: background 0.35s ease, transform 0.15s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.habit-card:active { transform: scale(0.97); }
.habit-icon {
  font-size: 78px;
  line-height: 1.12;
  margin: 0 0 8px;
  cursor: pointer;
  display: block;
  transition: transform 0.2s ease;
}
.habit-icon:active { transform: scale(0.92); }
.habit-icon.talking { animation: habitTalk 0.55s ease-in-out infinite; }
@keyframes habitTalk {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}
.habit-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.3;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
}
.habit-card.done { background: var(--c-green); }
.habit-card.done .habit-name { color: #FFFFFF; }
.habit-btn { width: 100%; }
.habit-card.done .habit-btn {
  background: #FFFFFF;
  color: #2E7D32;
  font-weight: 700;
  opacity: 1;
  pointer-events: none;
}
.habit-btn.check-pop { animation: habitPop 0.5s ease; }
@keyframes habitPop {
  0%   { transform: scale(0.7); }
  55%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* ==================== 第十五批：宠物车库（车队收集） ==================== */
.garage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.garage-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 8px 12px;
  border-radius: 18px;
  text-align: center;
  transition: all 0.2s ease;
}
.garage-cell.unlocked {
  background: #FFFDF6;
  box-shadow: 0 3px 12px var(--shadow), 0 0 0 2px var(--car-glow, rgba(0,0,0,.12));
  cursor: pointer;
}
.garage-cell.unlocked:hover { transform: translateY(-4px); }
.garage-cell.unlocked.current {
  background: #EAF7EE;
  box-shadow: 0 3px 12px var(--shadow), 0 0 0 3px var(--c-mint);
}
.garage-cell.locked {
  background: #F2F0EC;
  filter: grayscale(0.9);
  opacity: 0.78;
}
.garage-cell.dusty { filter: grayscale(0.85); opacity: 0.72; }
.garage-cell.dusty .garage-emoji { filter: blur(0.4px); }
.garage-emoji { font-size: 46px; line-height: 1.1; }
.garage-silhouette { filter: brightness(0) opacity(0.32); }
.garage-rarity {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--car-glow, #9aa7b4);
  border-radius: 10px;
  padding: 1px 9px;
}
.garage-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.garage-meta { font-size: 12px; color: var(--c-mint-dark, #3E8E5A); font-weight: 600; }
.garage-date { font-size: 11px; color: #999; }
.garage-lock { font-size: 12px; color: #A08A6A; line-height: 1.35; padding: 0 2px; }
.garage-polish { margin-top: 4px; font-size: 13px; padding: 4px 10px; }

/* 车库解锁庆祝卡：剪影 → 亮起 */
.garage-lightup { position: relative; height: 110px; }
.garage-lightup .garage-silhouette {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 84px; animation: garage-sil 0.9s ease forwards;
}
.garage-lightup .garage-lit {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.6);
  font-size: 84px; opacity: 0; animation: garage-lit 0.9s ease 0.5s forwards;
  filter: drop-shadow(0 0 18px var(--car-glow, gold));
}
@keyframes garage-sil { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes garage-lit {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 座驾感知：emoji 车体（地图 / 迷你带 / 宠物页） */
.car-emoji-glyph { display: inline-block; line-height: 1; }
.mini-station.mini-current .mini-car.car-emoji-glyph { font-size: 26px; height: auto; }
.hm-car-emoji { pointer-events: none; }
.pet-car-img-emoji { font-size: 96px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.garage-overlay .badge-card { background: linear-gradient(165deg, #FFFDF8, #D9F0FF); }

@media (max-width: 900px) {
  .garage-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 家长面板：车库总览 ---- */
.pp-garage-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pp-garage-row {
  display: flex; align-items: center; gap: 12px;
  background: #F7F5F1; border-radius: 12px; padding: 10px 14px;
}
.pp-garage-row.unlocked { background: #EFF9F1; }
.pp-garage-emoji { font-size: 26px; width: 34px; text-align: center; }
.pp-garage-name { font-size: 16px; font-weight: 700; color: var(--text-primary); min-width: 92px; }
.pp-garage-cond { font-size: 13px; color: #8A7A62; flex: 1; }
.pp-garage-cond.ok { color: #3E8E5A; font-weight: 600; }
.pp-garage-row { flex-wrap: wrap; }
.pp-garage-conds { width: 100%; display: flex; flex-wrap: wrap; gap: 6px 14px; padding-left: 46px; }
.pp-garage-cond-item { font-size: 12px; color: #8A7A62; }
.pp-garage-cond-item.ok { color: #3E8E5A; }

/* ==================== 第十九批：车队素材接入（20 辆车） ==================== */
/* 车库格子 / 庆祝卡里的车体图片（未解锁剪影沿用 .garage-silhouette 滤镜，
   积灰沿用 .garage-cell.dusty 的 grayscale，均为 CSS 实现，一车一图即可） */
.garage-emoji.garage-photo {
  width: 76px; height: 76px; object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .16));
}
.garage-cell.dusty .garage-emoji.garage-photo { filter: grayscale(.85) blur(.4px); }
.garage-lightup .garage-photo { width: 96px; height: 96px; object-fit: contain; }
.garage-lightup .garage-silhouette.garage-photo { filter: brightness(0) opacity(.32); }

/* 宠物页：车手雪宝按素材上方留白（--car-pad）对齐车顶，避免"悬空" */
.pet-car-box .pet-rabbit-img { top: calc(-34px + var(--car-pad, 0px)); }
/* 迷你带里的图片座驾（.mini-car 已有 height:32px; width:auto; max-width:40px） */
.mini-station.mini-current .mini-car.car-photo { object-fit: contain; }

/* 家长面板车库行 */
.pp-garage-emoji.pp-garage-photo { width: 34px; height: 34px; object-fit: contain; }

/* ============================================================
   雪宝 2.0：关系系统 + 记忆日记 + 每日问候（第二十批）
   ============================================================ */

/* ---- ① 关系条（与三围条并列，第 4 条） ---- */
.pet-stat:nth-child(4) .pet-stat-bar span { background: linear-gradient(90deg, #FFC1D9, #FF8FB8); }
.pet-stat-bond .pet-stat-label { width: 132px; font-size: 18px; }
.pet-stat-bond .pet-stat-num { width: 46px; color: #E0559A; }
.pet-bond-bar { background: #FCE9F0; }

/* ---- ② 三围叙事：雪宝第一人称心情台词 ---- */
.pet-mood {
  margin-top: 10px; font-size: 16px; line-height: 1.5; color: #9B5B7E;
  background: #FFF3F8; border-radius: 12px; padding: 8px 12px;
}

/* ---- ③ 抚摸轻交互（点一点雪宝） ---- */
.pet-pet-tip {
  margin-top: 8px; text-align: center; font-size: 15px; color: var(--text-secondary);
}
.pet-car-stage { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pet-car-stage.pet-patted .pet-car-box { animation: pet-pat 0.76s ease; }
@keyframes pet-pat {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-10px) rotate(-3deg); }
  50%  { transform: translateY(0) rotate(3deg); }
  75%  { transform: translateY(-5px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.pet-heart-fly {
  position: absolute; left: 50%; top: 6%; z-index: 6;
  transform: translateX(-50%);
  font-size: 22px; font-weight: 700; color: #E0559A;
  pointer-events: none;
  animation: pet-heart-fly 1.05s ease-out forwards;
}
@keyframes pet-heart-fly {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
  25%  { opacity: 1; transform: translate(-50%, -18px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -78px) scale(1); }
}

/* ---- ④ 关系升级庆祝卡 ---- */
.bond-overlay .bond-card { background: linear-gradient(165deg, #FFF9FC, #FFD9E8); }
.bond-hearts {
  display: flex; justify-content: center; gap: 10px; font-size: 30px; margin-bottom: 4px;
}
.bond-hearts span { animation: bond-heart-pop 0.9s ease-in-out infinite; }
.bond-hearts span:nth-child(2) { animation-delay: 0.15s; }
.bond-hearts span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bond-heart-pop {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.15); }
}
.bond-rabbit img { width: 96px; height: auto; animation: pet-bob 1.6s ease-in-out infinite; }
.bond-title { font-size: 30px; font-weight: 700; color: #C74A85; margin-top: 6px; }

/* ---- ⑤ 每日首次打开：雪宝问候弹层 ---- */
.xuebao-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(40, 28, 60, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.xuebao-card {
  position: relative; width: 100%; max-width: 460px;
  background: linear-gradient(170deg, #FFFDF9, #EAF6FF 62%, #FFEAF3);
  border-radius: 30px; padding: 26px 26px 22px;
  text-align: center; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.28);
  animation: badge-pop 0.4s ease;
}
.xuebao-sky {
  position: absolute; left: 0; right: 0; top: 10px;
  display: flex; justify-content: space-around;
  font-size: 22px; opacity: 0.7; pointer-events: none;
}
.xuebao-figure img {
  width: 124px; height: auto;
  animation: xuebao-bounce 1.8s ease-in-out infinite;
}
@keyframes xuebao-bounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
.xuebao-hello {
  font-size: 24px; font-weight: 700; color: var(--text-primary);
  line-height: 1.45; margin: 6px 0 14px;
}
.xuebao-diary {
  display: block; text-align: left;
  background: #FFFFFF; border-radius: 16px; padding: 12px 14px;
  box-shadow: inset 0 0 0 2px #FFE0EE;
}
.xuebao-diary-tag {
  display: block; font-size: 14px; font-weight: 700; color: #C74A85; margin-bottom: 6px;
}
.xuebao-diary-text { display: block; font-size: 17px; line-height: 1.55; color: var(--text-primary); }
.xuebao-bond-tag {
  margin: 12px 0 4px; font-size: 15px; color: #C74A85; font-weight: 700;
}
.xuebao-card .btn { margin-top: 14px; }

/* 家长面板：关系总览 */
.pp-xb-levels { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.pp-xb-lv {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-secondary);
  background: #FAF7F2; border-radius: 10px; padding: 6px 10px;
}
.pp-xb-lv.cur { background: #FFF0F6; color: #C74A85; font-weight: 700; }
.pp-xb-lv .pp-xb-hearts { margin-left: auto; font-size: 13px; }

/* ==================== 第二十一批：雪宝五形态 + 朋友图鉴 ==================== */

/* 雪宝圆形小头像（问候弹层日记气泡等；基准兔是竖长图 → 顶部对齐裁出头肩） */
.xb-avatar {
  border-radius: 50%; object-fit: cover; object-position: center top;
  background: #FFF4F8; flex: none;
}
.xuebao-diary .xb-avatar { float: left; margin-right: 10px; }
.xuebao-diary::after { content: ""; display: block; clear: both; }

/* 形态解锁庆祝卡（新形态图「落下」动画） */
.form-overlay .form-card { background: linear-gradient(165deg, #F3FBFF, #D6EBFF); }
.form-figure { display: flex; justify-content: center; }
.form-drop-img { animation: form-drop 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.35) both; }
@keyframes form-drop {
  0%   { transform: translateY(-160px) scale(0.6); opacity: 0; }
  60%  { transform: translateY(10px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
.form-title { font-size: 24px; font-weight: 700; margin-top: 10px; color: var(--text-primary); }
.form-name  { font-size: 20px; font-weight: 700; color: #2C7BD8; margin-top: 4px; }

/* 朋友头像 chip（思维 / 儿歌 / 闯关三场景标题行，56px 圆形裁切） */
.friend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; padding: 3px 14px 3px 3px;
  background: #FFF7E8; border: 2px solid #FFE3B8; border-radius: 999px;
  vertical-align: middle; cursor: pointer; user-select: none;
}
.friend-chip img {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; object-position: center top; background: #FFF6E3;
}
.friend-chip b { font-size: 16px; color: #B4741F; }
.friend-chip.friend-chip-talk { animation: friend-talk 1.2s ease-in-out; }
@keyframes friend-talk {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.1) rotate(-3deg); }
  60% { transform: scale(1.06) rotate(3deg); }
}

/* 朋友图鉴（宠物页二级视图） */
.friends-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 10px;
}
.friend-card {
  background: #FFFDF6; border: 2px solid #FFE9C7; border-radius: 18px;
  padding: 14px; text-align: center; cursor: pointer;
}
.friend-card.friend-chip-talk { animation: friend-talk 1.2s ease-in-out; }
.friend-photo {
  width: 140px; height: 140px; border-radius: 32px;
  object-fit: cover; object-position: center top; background: #FFF6E3;
}
.friend-name { font-size: 20px; font-weight: 700; margin-top: 8px; }
.friend-scene { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.friend-desc { font-size: 14px; margin-top: 6px; line-height: 1.4; color: var(--text-primary); }
.friend-greet {
  font-size: 14px; margin-top: 8px; color: #8A6A2F;
  background: #FFF6E3; border-radius: 12px; padding: 6px 8px; line-height: 1.4;
}

/* 家长面板：雪宝衣柜 */
.wardrobe-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 8px;
}
.wardrobe-item {
  border: 2px solid #EBE7E0; border-radius: 14px; padding: 10px;
  text-align: center; background: #FFFFFF; position: relative;
}
.wardrobe-item img {
  width: 72px; height: 72px; border-radius: 18px;
  object-fit: cover; object-position: center top; background: #FFF4F8;
}
.wardrobe-item .w-emoji { font-size: 60px; line-height: 72px; }
.wardrobe-item.locked { opacity: 0.55; filter: grayscale(0.6); }
.wardrobe-item.active { border-color: var(--c-sky); box-shadow: 0 0 0 3px #D6EBFF; }
.wardrobe-item .w-name { font-size: 15px; font-weight: 700; margin-top: 6px; }
.wardrobe-item .w-cond { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.35; }
.wardrobe-item .btn { margin-top: 6px; }