/* ==========================================================
   小小宇航员成长站 - 全局样式
   设计原则：
   1. 低饱和太空护眼配色（深蓝底 + 柔和暖黄/浅蓝点缀）
   2. 触屏优先：所有可点击元素最小 60px
   3. 响应式：手机竖屏单列，平板/电脑多列
   ========================================================== */

/* ---------- 配色变量（后续换肤只需改这里） ---------- */
:root {
  --bg-deep: #232b3e;        /* 深空背景 */
  --bg-card: #2e3850;        /* 卡片背景 */
  --bg-card-hover: #38445f;  /* 卡片悬停 */
  --bg-panel: #283149;       /* 面板背景 */
  --text-main: #e8e6e0;      /* 主文字（柔白，不刺眼） */
  --text-sub: #a8b0c3;       /* 次要文字 */
  --accent: #f6c177;         /* 主点缀色（柔和星光黄） */
  --accent-blue: #8fb8de;    /* 次点缀色（柔和天蓝） */
  --accent-green: #9ccfa2;   /* 成功/完成（柔和绿） */
  --accent-pink: #e0a8b8;    /* 装饰粉 */
  --danger: #d99090;         /* 警示（柔和红） */
  --radius: 20px;            /* 统一圆角 */
  --touch-min: 60px;         /* 触控最小尺寸 */
  --shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  background: var(--bg-deep);
  color: var(--text-main);
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; }
input, select, textarea { font-family: inherit; }

/* ---------- 星空背景动画（低功耗纯CSS） ---------- */
.starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stars {
  position: absolute; inset: 0;
  background-repeat: repeat;
  opacity: .5;
}
.stars-1 {
  background-image: radial-gradient(1.5px 1.5px at 30px 40px, #cfd6e6 50%, transparent 51%),
                    radial-gradient(1px 1px at 120px 90px, #cfd6e6 50%, transparent 51%),
                    radial-gradient(1.5px 1.5px at 200px 160px, #f6c177 50%, transparent 51%);
  background-size: 260px 220px;
  animation: twinkle 4s ease-in-out infinite alternate;
}
.stars-2 {
  background-image: radial-gradient(1px 1px at 80px 30px, #aab6d0 50%, transparent 51%),
                    radial-gradient(1.5px 1.5px at 170px 120px, #aab6d0 50%, transparent 51%);
  background-size: 300px 260px;
  animation: twinkle 6s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle { from { opacity: .25; } to { opacity: .6; } }

/* ---------- 应用主容器 ---------- */
#app {
  position: relative; z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  min-height: 100vh;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* ---------- 通用按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch-min); min-width: var(--touch-min);
  padding: 0 24px;
  border-radius: var(--radius);
  font-size: 18px; font-weight: 600;
  color: var(--bg-deep);
  background: var(--accent);
  box-shadow: var(--shadow);
  transition: transform .12s, filter .12s;
}
.btn:active { transform: scale(.96); filter: brightness(.92); }
.btn-blue  { background: var(--accent-blue); }
.btn-green { background: var(--accent-green); }
.btn-ghost { background: var(--bg-card); color: var(--text-main); }
.btn-danger{ background: var(--danger); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: 14px; }
.btn-block { width: 100%; }

/* ---------- 登录页 ---------- */
.login-wrap {
  display: flex; align-items: center; justify-content: center; gap: 40px;
  min-height: calc(100vh - 32px);
  flex-wrap: wrap;
}
.login-art { flex: 1 1 320px; max-width: 460px; text-align: center; }
.login-art svg { width: 100%; max-width: 380px; height: auto; }
.login-panel {
  flex: 1 1 300px; max-width: 420px;
  display: flex; flex-direction: column; gap: 20px;
  background: var(--bg-panel);
  border-radius: 28px; padding: 36px 28px;
  box-shadow: var(--shadow);
}
.login-title { font-size: 28px; text-align: center; color: var(--accent); }
.login-sub { text-align: center; color: var(--text-sub); font-size: 15px; margin-top: -8px; }
.btn-mode {
  min-height: 84px; font-size: 22px; border-radius: 24px;
  flex-direction: column; gap: 4px;
}
.btn-mode small { font-size: 13px; font-weight: 400; opacity: .75; }
.last-mode-tip { text-align: center; color: var(--text-sub); font-size: 13px; }

/* ---------- 顶部信息栏 ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg-panel);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
/* 顶栏圆形返回/操作按钮（之前无样式，导致掉回浏览器默认又丑又小） */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  padding: 0;
  border: none; cursor: pointer;
  background: var(--bg-card);
  color: var(--text-main);
  border-radius: 50%;
  line-height: 1;
  box-shadow: var(--shadow);
  transition: background .15s, transform .1s, color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn-icon svg { width: 22px; height: 22px; display: block; }
.btn-icon:hover { background: var(--accent); color: var(--bg-deep); transform: translateX(-2px); }
.btn-icon:active { transform: translateX(-2px) scale(.92); }
.btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 小屏适配：圆形按钮略缩小，但保持 44×44 触屏友好 */
@media (max-width: 480px) {
  .btn-icon { width: 44px; height: 44px; }
  .btn-icon svg { width: 20px; height: 20px; }
}
.topbar .spacer { flex: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 15px; font-weight: 600;
  white-space: nowrap;
}
.chip .num { color: var(--accent); }

/* ---------- 宇航员形象区 ---------- */
.avatar-zone {
  display: flex; align-items: center; gap: 20px;
  background: var(--bg-panel);
  border-radius: var(--radius);
  padding: 16px 20px; margin-top: 14px;
  box-shadow: var(--shadow);
}
.avatar-zone svg { width: 110px; height: 110px; flex-shrink: 0; }
.avatar-info h3 { font-size: 19px; margin-bottom: 6px; }
.gear-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.gear-badge {
  font-size: 13px; padding: 6px 12px; border-radius: 999px;
  background: var(--bg-card); color: var(--text-sub);
}
.gear-badge.unlocked { background: rgba(246, 193, 119, .18); color: var(--accent); }

/* ---------- 功能卡片网格 ---------- */
.card-grid {
  display: grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(2, 1fr);   /* 手机默认两列 */
}
.mod-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 110px;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 17px; font-weight: 600; color: var(--text-main);
  transition: transform .12s, background .12s;
  position: relative;
}
.mod-card:active { transform: scale(.96); background: var(--bg-card-hover); }
.mod-card .mod-icon { font-size: 38px; }
.mod-card.locked { opacity: .45; }
.mod-card.locked::after {
  content: "🔒 今日学习时间已用完";
  position: absolute; bottom: 8px;
  font-size: 11px; color: var(--danger); font-weight: 400;
}

/* ---------- 任务清单 ---------- */
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 19px; margin: 20px 4px 10px;
}
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-height: var(--touch-min);
  box-shadow: var(--shadow);
}
.task-item.done { opacity: .65; }
.task-item.done .task-name { text-decoration: line-through; }
.task-emoji { font-size: 28px; }
.task-info { flex: 1; min-width: 0; }
.task-name { font-size: 17px; font-weight: 600; }
.task-meta { font-size: 13px; color: var(--text-sub); margin-top: 2px; }
.task-done-mark { font-size: 15px; color: var(--accent-green); font-weight: 700; padding: 0 10px; }
.rest-banner {
  background: rgba(143, 184, 222, .15);
  border: 1px dashed var(--accent-blue);
  border-radius: var(--radius);
  padding: 18px; text-align: center;
  color: var(--accent-blue); font-size: 16px;
}
.empty-tip { text-align: center; color: var(--text-sub); padding: 24px; font-size: 15px; }

/* ---------- 底部功能区 ---------- */
.bottom-bar {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 20px;
}

/* ---------- 模块占位页 ---------- */
.module-page { text-align: center; padding-top: 8vh; }
.module-page .big-icon { font-size: 90px; }
.module-page h2 { font-size: 26px; margin: 16px 0 8px; }
.module-page p { color: var(--text-sub); margin-bottom: 28px; }

/* ==========================================================
   语言空间站（页面3）
   ========================================================== */
.lang-tasks { margin-top: 14px; }
.lang-tabs { display: flex; gap: 10px; margin: 18px 0 8px; flex-wrap: wrap; }
.lang-tab {
  flex: 1 1 auto; min-height: 64px; padding: 0 16px;
  border-radius: 999px; font-size: 16px; font-weight: 700;
  background: var(--bg-card); color: var(--text-sub);
  transition: transform .12s, filter .12s;
}
.lang-tab:active { transform: scale(.96); }
.lang-tab.active { background: var(--accent); color: var(--bg-deep); }

.lang-content { margin-top: 6px; }

/* 通用网格卡片（识字/词汇等） */
.grid-cards { display: grid; gap: 12px; margin-top: 12px; grid-template-columns: repeat(2, 1fr); }
.word-card {
  background: var(--bg-card); border-radius: var(--radius); padding: 12px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.word-card.known { outline: 2px solid rgba(156,207,162,.5); }
.wc-read {
  width: 100%; border: none; background: transparent; color: var(--text-main);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0;
}
.wc-emoji { font-size: 46px; }
.wc-word { font-size: 20px; font-weight: 700; }
.wc-py { font-size: 13px; color: var(--text-sub); }
.wc-flag {
  min-height: 52px; width: 100%; border-radius: 14px;
  background: var(--bg-panel); color: var(--text-sub); font-weight: 600; font-size: 14px;
}
.wc-flag.on { background: rgba(156,207,162,.2); color: var(--accent-green); }

/* 古诗 */
.poem-card {
  background: var(--bg-panel); border-radius: var(--radius);
  padding: 20px; margin-top: 16px; text-align: center; box-shadow: var(--shadow);
}
.poem-head { font-size: 17px; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.poem-lines { font-size: 20px; line-height: 1.9; margin-bottom: 16px; }

/* 英语阶段 */
.stage { margin-top: 16px; }
.stage.locked { opacity: .55; }
.stage-title { font-size: 18px; margin: 16px 0 6px; color: var(--accent-blue); }
.stage-tip { color: var(--text-sub); font-size: 14px; margin-bottom: 8px; }
.group-title { font-size: 16px; margin: 16px 0 4px; color: var(--text-main); }
.lock-hint {
  color: var(--text-sub); font-size: 14px; padding: 14px;
  background: var(--bg-panel); border-radius: 14px; margin-bottom: 8px;
}
.nursery-card {
  background: var(--bg-card); border-radius: var(--radius); padding: 10px;
  display: flex; flex-direction: column; gap: 8px; align-items: center; box-shadow: var(--shadow);
}

/* 家庭实景短句 */
.phrase-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.phrase-card { background: var(--bg-card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.phrase-en {
  border: none; background: var(--bg-panel); color: var(--accent-blue);
  min-height: 52px; padding: 0 14px; border-radius: 14px; font-size: 17px; font-weight: 600;
  width: 100%; text-align: left;
}
.phrase-zh { font-size: 15px; margin-top: 8px; }
.phrase-tip { font-size: 13px; color: var(--text-sub); margin-top: 4px; }

/* 分级阅读 / 字母 */
.reader-list { display: flex; flex-direction: column; gap: 10px; }
.reader-card {
  display: flex; align-items: center; gap: 14px; background: var(--bg-card);
  border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
}
.reader-emoji { font-size: 40px; }
.reader-body { flex: 1; }
.reader-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.letter-card {
  min-height: 64px; border-radius: 16px; background: var(--bg-card);
  color: var(--accent-blue); font-size: 22px; font-weight: 800; box-shadow: var(--shadow);
}
.letter-card.known { background: rgba(143,184,222,.2); color: var(--accent); }

/* 阶段状态条 */
.stage-status {
  background: var(--bg-panel); border-radius: 14px; padding: 12px 16px;
  font-size: 15px; font-weight: 600; margin-top: 8px;
}
.badge-force {
  margin-left: 8px; font-size: 12px; background: var(--accent-pink);
  color: var(--bg-deep); padding: 3px 10px; border-radius: 999px;
}

/* 有声绘本库 */
.book-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 18px; }
.book-card { background: var(--bg-card); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.book-cover {
  width: 100%; border: none; background: var(--bg-panel); color: var(--text-main);
  border-radius: 14px; padding: 14px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; text-align: center;
}
.book-emoji { font-size: 44px; }
.book-title { font-size: 15px; font-weight: 700; }
.book-desc { font-size: 12px; color: var(--text-sub); }
.book-actions { display: flex; gap: 8px; margin-top: 10px; }
.book-tag {
  flex: 1; min-height: 52px; border-radius: 12px; font-size: 14px; font-weight: 600;
  background: var(--bg-panel); color: var(--text-sub);
}
.book-tag.on { background: rgba(246,193,119,.18); color: var(--accent); }

/* 平板/电脑：卡片多列 */
@media (min-width: 768px) {
  .grid-cards { grid-template-columns: repeat(3, 1fr); }
  .book-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .grid-cards { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- 家长后台 ---------- */
.parent-tabs {
  display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap;
}
.parent-tabs .tab {
  min-height: 52px; padding: 0 18px;
  border-radius: 999px; font-size: 15px; font-weight: 600;
  background: var(--bg-card); color: var(--text-sub);
}
.parent-tabs .tab.active { background: var(--accent); color: var(--bg-deep); }
.panel {
  background: var(--bg-panel);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.panel h3 { font-size: 17px; margin-bottom: 14px; color: var(--accent-blue); }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row label { font-size: 14px; color: var(--text-sub); }
.form-row input, .form-row select {
  min-height: 52px;
  background: var(--bg-card);
  border: 1px solid #3d486299;
  border-radius: 14px;
  color: var(--text-main);
  font-size: 16px;
  padding: 0 14px;
  outline: none;
}
.form-row input:focus { border-color: var(--accent-blue); }
.form-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.form-inline .form-row { flex: 1 1 130px; margin-bottom: 0; }
.weekday-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.weekday-picker .wd {
  min-width: 52px; min-height: 52px;
  border-radius: 14px; font-size: 15px; font-weight: 600;
  background: var(--bg-card); color: var(--text-sub);
}
.weekday-picker .wd.on { background: var(--accent-blue); color: var(--bg-deep); }

/* 后台任务列表行 */
.admin-task-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border-radius: 14px;
  padding: 10px 14px; margin-bottom: 8px; flex-wrap: wrap;
}
.admin-task-row .t-name { flex: 1; min-width: 140px; font-weight: 600; }
.admin-task-row .t-meta { color: var(--text-sub); font-size: 13px; }

/* ---------- 弹窗 ---------- */
#modal-box:empty { display: none; }
.modal-mask {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 14, 25, .65);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  width: 100%; max-width: 400px;
  background: var(--bg-panel);
  border-radius: 24px;
  padding: 26px 22px;
  box-shadow: var(--shadow);
  animation: pop .18s ease-out;
}
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal h3 { text-align: center; margin-bottom: 16px; font-size: 20px; }
.modal .modal-btns { display: flex; gap: 10px; margin-top: 18px; }
.modal .modal-btns .btn { flex: 1; }

/* ---------- Toast 提示 ---------- */
#toast-box {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--bg-card);
  color: var(--text-main);
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 16px; font-weight: 600;
  box-shadow: var(--shadow);
  animation: toast-in .25s ease-out;
}
.toast.reward { background: var(--accent); color: var(--bg-deep); }
@keyframes toast-in { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 能量飘字动画 ---------- */
.energy-fly {
  position: fixed; z-index: 98;
  font-size: 24px; font-weight: 800; color: var(--accent);
  pointer-events: none;
  animation: fly-up 1s ease-out forwards;
}
@keyframes fly-up { from { opacity: 1; } to { transform: translateY(-70px); opacity: 0; } }

/* ==========================================================
   响应式断点
   ========================================================== */

/* 平板横屏 / 电脑（≥768px）：卡片三列，任务两列 */
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .mod-card { min-height: 130px; font-size: 18px; }
  .task-list { display: grid; grid-template-columns: 1fr 1fr; }
}

/* 大屏（≥1024px） */
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(6, 1fr); }
  .mod-card { min-height: 140px; }
}

/* 手机竖屏（<480px）：登录页上下排列 */
@media (max-width: 480px) {
  .login-wrap { gap: 8px; align-content: center; }
  .login-art svg { max-width: 220px; }
  .login-panel { padding: 24px 18px; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .chip { font-size: 13px; padding: 6px 12px; }
  .avatar-zone svg { width: 84px; height: 84px; }
}

/* ==========================================================
   数理实验室模块样式
   ========================================================== */
.math-progress {
  background: var(--bg-card); color: var(--text-main);
  padding: 12px 16px; border-radius: var(--radius); margin-bottom: 6px;
  font-size: 15px;
}
.math-progress b { color: var(--accent); font-size: 18px; }

/* 游戏区通用 */
.game-area { padding: 4px 0 20px; }
.game-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.game-title { font-size: 19px; font-weight: 600; color: var(--text-main); }
.game-stage { min-height: 300px; }
.game-q { font-size: 18px; color: var(--text-main); text-align: center; margin: 10px 0 18px; }
.game-hint { text-align: center; color: var(--text-sub); font-size: 14px; margin-top: 12px; }

/* 点数乐园 */
.count-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 22px; }
.count-obj { font-size: 40px; line-height: 1; }
.choice-row { display: flex; gap: 16px; justify-content: center; }
.choice-btn {
  width: 84px; height: 84px; border: none; border-radius: 22px;
  background: var(--accent); color: var(--bg-deep);
  font-size: 32px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .1s;
}
.choice-btn:active { transform: scale(.93); }

/* 比多少 */
.compare-panels { display: flex; gap: 14px; }
.compare-panel {
  flex: 1; min-height: 150px; border: 3px solid transparent; border-radius: var(--radius);
  background: var(--bg-card); color: var(--text-main); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; transition: border-color .15s, transform .1s;
}
.compare-panel:active { transform: scale(.97); }
.cmp-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 160px; }
.cmp-obj { font-size: 26px; }
.cmp-tag { font-size: 15px; color: var(--text-sub); }

/* 分类 */
.sort-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.sort-item {
  width: 76px; height: 76px; border: none; border-radius: 50%;
  background: var(--bg-card); font-size: 36px; cursor: pointer; transition: transform .1s, background .15s;
}
.sort-item:active { transform: scale(.92); }
.sort-item.picked { background: var(--accent-green); box-shadow: var(--shadow); }

/* 数字排序 */
.order-tiles { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.tile {
  width: 78px; height: 78px; border: none; border-radius: 18px;
  background: var(--accent-blue); color: var(--bg-deep);
  font-size: 34px; font-weight: 700; cursor: pointer; transition: transform .1s, opacity .15s;
}
.tile:active { transform: scale(.93); }
.tile.locked { background: var(--accent-green); opacity: .85; cursor: default; }

/* 图形认知 / 拼接 */
.shape-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.shape-btn {
  width: 92px; height: 92px; border: none; border-radius: 20px;
  background: var(--bg-card); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .1s, background .15s;
}
.shape-btn:active { transform: scale(.93); }
.shape-btn:hover { background: var(--bg-card-hover); }
.shape-svg { width: 64px; height: 64px; }
.puzzle-hole {
  width: 110px; height: 110px; margin: 0 auto 22px; border-radius: 22px;
  background: var(--bg-panel); display: flex; align-items: center; justify-content: center;
}
.puzzle-hole .shape-svg { width: 72px; height: 72px; }

/* 找不同 */
.diff-row { display: flex; gap: 10px; justify-content: center; margin: 10px 0; }
.diff-cell {
  width: 64px; height: 64px; border: none; border-radius: 16px;
  background: var(--bg-card); font-size: 34px; cursor: pointer; transition: transform .1s, background .15s;
}
.diff-cell:active { transform: scale(.92); }
.diff-cell:hover { background: var(--bg-card-hover); }

/* 太空迷宫 */
.maze-grid { display: grid; gap: 8px; max-width: 360px; margin: 16px auto; }
.maze-cell {
  aspect-ratio: 1 / 1; border: none; border-radius: 14px; font-size: 30px;
  display: flex; align-items: center; justify-content: center; background: var(--bg-panel);
}
.maze-cell.star { background: transparent; opacity: .5; }
.maze-cell.path { background: var(--bg-card); cursor: pointer; transition: background .15s, transform .1s; }
.maze-cell.path:active { transform: scale(.92); }
.maze-cell.path.visited { background: var(--accent); color: var(--bg-deep); }

/* 配对推理 */
.match-groups { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.match-group {
  min-width: 100px; min-height: 90px; border: none; border-radius: 20px;
  background: var(--bg-card); color: var(--text-main); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 12px; transition: transform .1s, background .15s;
}
.match-group:active { transform: scale(.93); }
.match-group:hover { background: var(--bg-card-hover); }
.match-group .dots { font-size: 28px; letter-spacing: 2px; color: var(--accent); }

/* 通关庆祝遮罩 */
.win-cover { text-align: center; padding: 30px 16px; }
.win-emoji { font-size: 64px; animation: pop .4s ease; }
.win-msg { font-size: 22px; color: var(--text-main); margin: 12px 0 6px; font-weight: 600; }
.win-energy { font-size: 20px; color: var(--accent); margin-bottom: 18px; }
.win-btns { display: flex; gap: 14px; justify-content: center; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* 摇一摇错误提示动画 */
.shake { animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  50% { transform: translateX(7px); }
  75% { transform: translateX(-5px); }
}

/* ==========================================================
   科学工坊模块样式
   ========================================================== */
.sci-wrap { padding: 12px 14px 24px; max-width: 880px; margin: 0 auto; }
.sci-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sci-tab {
  flex: 1; min-width: 96px; min-height: 56px; border: none; border-radius: 16px;
  background: var(--bg-card); color: var(--text-main); font-size: 16px; font-weight: 600;
  cursor: pointer; transition: background .15s, transform .1s;
}
.sci-tab:active { transform: scale(.96); }
.sci-tab.active { background: var(--accent); color: var(--bg-deep); }
.sci-rest-tip { align-self: center; color: var(--text-sub); font-size: 14px; padding: 4px 8px; }

/* —— 科普阅览 —— */
.sci-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sci-cats .chip { min-height: 42px; border: none; border-radius: 14px; background: var(--bg-card); color: var(--text-sub); cursor: pointer; }
.sci-cats .chip-on { background: var(--accent); color: var(--bg-deep); font-weight: 700; }
.sci-read-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sci-read-card {
  background: var(--bg-card); border-radius: 18px; padding: 14px; cursor: pointer;
  transition: transform .1s, background .15s; text-align: center;
}
.sci-read-card:active { transform: scale(.97); }
.sci-read-emoji { font-size: 40px; }
.sci-read-title { font-size: 17px; font-weight: 700; color: var(--text-main); margin: 6px 0; }
.sci-read-text { font-size: 14px; color: var(--text-sub); line-height: 1.6; margin: 0 0 8px; text-align: left; }
.sci-read-play { font-size: 13px; color: var(--accent); font-weight: 600; }

/* —— 安全小实验 —— */
.exp-list { display: flex; flex-direction: column; gap: 14px; }
.exp-card { background: var(--bg-card); border-radius: 18px; padding: 16px; }
.exp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.exp-emoji { font-size: 30px; }
.exp-title { flex: 1; font-size: 18px; font-weight: 700; color: var(--text-main); }
.exp-reward { font-size: 15px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.exp-sec { font-size: 14px; color: var(--text-main); margin-bottom: 8px; line-height: 1.6; }
.exp-sec b { color: var(--text-main); }
.exp-body .tag {
  display: inline-block; background: var(--bg-panel); color: var(--text-sub);
  border-radius: 10px; padding: 4px 10px; margin: 3px 4px 0 0; font-size: 13px;
}
.exp-body ol { margin: 4px 0 0 18px; padding: 0; color: var(--text-sub); }
.exp-body li { margin-bottom: 3px; }
.exp-safety { background: rgba(214, 158, 46, .14); border-radius: 12px; padding: 8px 10px; color: var(--text-main); }

/* 统一大按钮（≥60px，触屏友好） */
.sci-btn {
  width: 100%; min-height: 64px; margin-top: 10px; border: none; border-radius: 16px;
  background: var(--accent); color: var(--bg-deep); font-size: 18px; font-weight: 700;
  cursor: pointer; transition: transform .1s, opacity .15s;
}
.sci-btn:active { transform: scale(.97); }
.sci-btn.exp-done { background: var(--bg-panel); color: var(--text-sub); }

/* —— 机械认知 —— */
.mech-block { background: var(--bg-card); border-radius: 18px; padding: 16px; margin-bottom: 14px; text-align: center; }
.mech-title { font-size: 18px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.mech-desc { font-size: 14px; color: var(--text-sub); line-height: 1.6; margin: 8px 0 0; }
.gear-stage { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; }
.gear { animation: spin 6s linear infinite; transform-origin: 50% 50%; }
.gear-b { animation-direction: reverse; animation-duration: 4s; }
@keyframes spin { to { transform: rotate(360deg); } }

.digger-stage { display: flex; align-items: center; justify-content: center; padding: 6px 0; }
.digger-arm { animation: dig 3s ease-in-out infinite; transform-origin: 128px 130px; }
@keyframes dig {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-16deg); }
}

/* 暂停动画 */
.gear-stage.paused .gear,
.digger-stage.paused .digger-arm { animation-play-state: paused; }

/* 手机竖屏：科普卡片单列 */
@media (max-width: 480px) {
  .sci-read-grid { grid-template-columns: 1fr; }
  .sci-tab { min-width: 0; font-size: 15px; }
}

/* ==========================================================
   创意基地模块样式
   ========================================================== */
.rest-banner { background: rgba(143,179,224,.16); color: var(--text-main); border-radius: 14px; padding: 10px 14px; margin: 0 0 12px; font-size: 14px; text-align: center; }

/* 涂色：主题选择 */
.art-themes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.art-themes .chip { min-height: 44px; border: none; border-radius: 14px; background: var(--bg-card); color: var(--text-sub); cursor: pointer; }
.art-themes .chip-on { background: var(--accent); color: var(--bg-deep); font-weight: 700; }

/* 调色板 */
.art-palette { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.swatch {
  width: 44px; height: 44px; min-height: 44px; border: 3px solid transparent; border-radius: 50%;
  cursor: pointer; transition: transform .1s, border-color .15s; padding: 0;
}
.swatch:active { transform: scale(.9); }
.swatch-on { border-color: var(--text-main); box-shadow: 0 0 0 2px var(--bg-card); }
.swatch-erase { background: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--text-sub); }

/* 涂色画布 */
.art-canvas { background: #fff; border-radius: 18px; padding: 14px; display: flex; align-items: center; justify-content: center; }
.coloring-svg { width: 100%; max-width: 340px; height: auto; touch-action: manipulation; }
.paint-part { cursor: pointer; transition: fill .1s; }
.paint-part:active { opacity: .85; }

/* 操作按钮区 */
.art-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 12px; }

/* 手工教程 */
.craft-list { display: flex; flex-direction: column; gap: 14px; }
.craft-card { background: var(--bg-card); border-radius: 18px; padding: 16px; }
.craft-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.craft-emoji { font-size: 30px; }
.craft-title { font-size: 18px; font-weight: 700; color: var(--text-main); }

/* 打印：仅保留画布/手工内容，隐藏导航与按钮 */
@media print {
  .no-print, .topbar, .sci-tabs, #toast-box, #modal-box, .starfield { display: none !important; }
  body { background: #fff; }
  .art-canvas, .craft-card { box-shadow: none; }
  .sci-wrap { padding: 0; }
}

/* 手机竖屏：操作按钮单列 */
@media (max-width: 480px) {
  .art-actions { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .sport-card .sci-btn { min-width: 84px; font-size: 15px; }
}

/* ===== 运动训练场 ===== */
.sport-banner { background: rgba(255,196,120,.18); color: var(--text-main); border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; font-size: 15px; text-align: center; }
.sport-banner b { color: var(--accent); }
.sec-title { font-size: 19px; color: var(--text-main); margin: 18px 0 4px; }

.sport-list { display: flex; flex-direction: column; gap: 12px; }
.sport-card { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border-radius: 18px; padding: 14px; }
.sport-ico { font-size: 38px; width: 56px; text-align: center; flex: 0 0 auto; }
.sport-info { flex: 1 1 auto; min-width: 0; }
.sport-name { font-size: 17px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 6px; }
.sport-desc { font-size: 13px; color: var(--text-sub); margin: 2px 0; }
.sport-reward { font-size: 13px; color: var(--accent); font-weight: 600; }
.mini-speak { border: none; background: rgba(143,179,224,.18); border-radius: 50%; width: 30px; height: 30px; font-size: 14px; cursor: pointer; }
/* sport/habit 卡片内的打卡按钮：紧凑、右对齐（基础 .sci-btn 是全宽大按钮，需覆盖 width/min-height） */
.sport-card .sci-btn {
  flex: 0 0 auto;
  width: auto;            /* 覆盖基础 width:100% */
  min-width: 0;           /* 覆盖基础 min-width 隐形继承 */
  min-height: 0;          /* 覆盖基础 min-height:64px */
  margin-top: 0;          /* 覆盖基础 margin-top:10px */
  padding: 10px 18px;     /* 紧凑比例 */
  font-size: 15px;        /* 略小于基础 18px */
  border-radius: 12px;
  white-space: nowrap;
}

/* 每周运动计划表 */
.plan-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.plan-day { background: var(--bg-card); border-radius: 14px; padding: 10px 6px; text-align: center; }
.plan-day.today { outline: 2px solid var(--accent); }
.plan-dname { font-size: 13px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
.plan-items { display: flex; flex-direction: column; gap: 2px; }
.plan-tag { font-size: 11px; color: var(--text-sub); background: rgba(143,179,224,.14); border-radius: 8px; padding: 2px 4px; }

/* ===== 成长习惯站：情绪认知卡片 ===== */
.emo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.emo-card { background: var(--bg-card); border-radius: 18px; padding: 16px 12px; text-align: center; cursor: pointer; transition: transform .12s; }
.emo-card:active { transform: scale(.97); }
.emo-ico { font-size: 40px; }
.emo-name { font-size: 16px; font-weight: 700; color: var(--text-main); margin: 4px 0; }
.emo-tip { font-size: 13px; color: var(--text-sub); line-height: 1.5; }

/* ===== 探险商店（页面9） ===== */
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 4px 2px; }
.shop-card { background: var(--bg-card); border-radius: 18px; padding: 16px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.shop-icon { font-size: 46px; line-height: 1; }
.shop-name { font-size: 17px; font-weight: 700; color: var(--text-main); cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.shop-name:active { background: rgba(143,179,224,.15); }
.shop-tag { font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.tag-real { background: rgba(143,179,224,.18); color: var(--accent); }
.tag-screen { background: rgba(244,162,97,.18); color: #e6a157; }
.shop-desc { font-size: 13px; color: var(--text-sub); line-height: 1.4; min-height: 18px; }
.shop-cost { font-size: 15px; color: var(--text-main); }
.shop-cost b { color: #f2c14e; }
.shop-btn { width: 100%; min-height: 60px; border: none; border-radius: 14px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.shop-btn.low { background: rgba(143,179,224,.42); }
.shop-btn.disabled { background: #cfd6e6; color: #8a93a8; cursor: default; }
.shop-req { display: flex; flex-direction: column; gap: 8px; }
.req-row { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); border-radius: 14px; padding: 12px 14px; }
.req-info { display: flex; align-items: center; gap: 10px; }
.req-name { font-size: 15px; font-weight: 700; color: var(--text-main); }
.req-cost { font-size: 14px; color: #f2c14e; }
.req-status { font-size: 13px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.st-pending { background: rgba(143,179,224,.2); color: var(--accent); }
.st-done { background: rgba(120,200,140,.2); color: #5bb277; }
.st-rejected { background: rgba(200,160,160,.22); color: #b07a7a; }
.shop-tip { font-size: 13px; color: var(--text-sub); text-align: center; margin: 14px 4px; line-height: 1.6; }
/* 家长后台审核 */
.req-energy { font-size: 15px; color: var(--text-main); margin-bottom: 4px; }
.req-energy b { color: #f2c14e; }
.audit-row { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.audit-row.ok { border-left: 4px solid #5bb277; }
.audit-row.no { border-left: 4px solid #c89898; }
.audit-name { font-size: 15px; font-weight: 700; color: var(--text-main); }
.audit-meta { font-size: 13px; color: var(--text-sub); margin-top: 2px; }
.audit-actions { display: flex; gap: 8px; }
.empty-tip { text-align: center; color: var(--text-sub); font-size: 14px; padding: 20px; }
/* 平板/电脑：商店卡片 3 列 */
@media (min-width: 720px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
/* 手机竖屏 */
@media (max-width: 480px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .audit-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .audit-actions .btn { width: 100%; }
}

/* ==========================================================
   成长相册（页面10）
   ========================================================== */
.topbar-title { flex: 1; font-size: 18px; font-weight: 700; color: var(--text-main); }
.album-sub { text-align: center; color: var(--text-sub); font-size: 14px; margin: 12px 4px 4px; }

/* 添加照片按钮区 */
.album-add-row { margin: 8px 0 4px; }

/* 照片网格 */
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.album-photo {
  position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden;
  background: var(--bg-card); cursor: pointer; box-shadow: var(--shadow);
  transition: transform .12s, background .15s;
}
.album-photo:active { transform: scale(.96); }
.album-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 大图查看 */
.album-viewer { text-align: center; }
.album-big { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 16px; background: #000; }
.album-viewer-meta { color: var(--text-sub); font-size: 13px; margin-top: 10px; }

/* 大事记 */
.moment-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.moment-row { background: var(--bg-card); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); cursor: pointer; transition: transform .12s; }
.moment-row:active { transform: scale(.98); }
.moment-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.moment-tag { font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 700; }
.m-quote { background: rgba(224, 168, 184, .22); color: var(--accent-pink); }
.m-high  { background: rgba(246, 193, 119, .22); color: var(--accent); }
.m-other { background: rgba(143, 179, 222, .22); color: var(--accent-blue); }
.moment-date { font-size: 13px; color: var(--text-sub); margin-left: auto; }
.moment-text { font-size: 16px; line-height: 1.6; color: var(--text-main); }
.moment-type-row { display: flex; gap: 8px; margin-top: 12px; }
.moment-type-row .sci-tab { flex: 1; min-height: 52px; }

/* 成长数据 */
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.stat-card {
  background: var(--bg-card); border-radius: 18px; padding: 16px 8px; text-align: center;
  box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.stat-ico { font-size: 28px; }
.stat-num { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-sub); }

/* 活跃度条形图 */
.bar-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-label { flex: 0 0 92px; font-size: 14px; color: var(--text-main); }
.bar-track { flex: 1; height: 14px; background: var(--bg-panel); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-blue), var(--accent)); transition: width .3s; min-width: 4px; }
.bar-num { flex: 0 0 28px; text-align: right; font-size: 14px; font-weight: 700; color: var(--accent); }

/* 平板/电脑 */
@media (min-width: 720px) { .album-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .album-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 480px) {
  .album-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-cards { gap: 8px; }
  .stat-num { font-size: 22px; }
  .bar-label { flex-basis: 76px; font-size: 13px; }
}

/* ==========================================================
   认识时钟（数理实验室·游戏10）
   ========================================================== */
.clock-face {
  position: relative;
  width: 240px; height: 240px;
  margin: 6px auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf6, #f1e2bf);
  border: 8px solid var(--accent);
  box-shadow: var(--shadow);
}
.clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 6px;
  margin-left: -3px;
  background: var(--bg-deep);
  border-radius: 6px;
  transform-origin: 50% 100%;   /* 以钟面中心为转轴 */
}
.clock-hand.hour   { height: 58px; width: 8px; margin-left: -4px; background: #6b5a3e; }
.clock-hand.minute { height: 84px; width: 4px; margin-left: -2px; background: #2f3a55; }
.clock-center {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(246,193,119,.35);
}
.clock-num {
  position: absolute; top: 50%; left: 50%;
  font-size: 18px; font-weight: 800; color: #4a3c25;
}
.clock-num b { font-weight: 800; }

/* ==========================================================
   红火箭 / 小羊上山 拟真书封 + 卡片
   ========================================================== */
.book-grid2 {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(2, 1fr);
}
.book-card2 {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
}
.book-cover2-btn {
  display: block; width: 100%;
  border: none; background: none; padding: 0; cursor: pointer;
}
.book-cover2 {
  width: 100%;
  border-radius: 14px;
  padding: 20px 12px 16px;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px; text-align: center;
  color: #fff;
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.28), rgba(0,0,0,.14)), var(--cov, #8fb3e0);
  box-shadow: inset 0 -10px 20px rgba(0,0,0,.12);
  transition: transform .12s;
}
.book-cover2-btn:active .book-cover2 { transform: scale(.97); }
.cov-emoji { font-size: 50px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.cov-title { font-size: 18px; font-weight: 800; letter-spacing: .3px; }
.cov-sub   { font-size: 13px; opacity: .92; }
.cov-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,.9); color: #333;
  font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
}
.book-actions2 { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.book-cn { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-main); }
.book-actions2 .book-tag { flex: 0 0 auto; }

/* ==========================================================
   生字词训练（认读卡片 + 听音找字游戏）
   ========================================================== */
.zici-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px;
}
.zici-card.known { outline: 2px solid rgba(156,207,162,.5); }
.zici-read {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--bg-panel); border: none; border-radius: 14px;
  padding: 14px 10px; cursor: pointer;
}
.zici-emoji  { font-size: 42px; }
.zici-word   { font-size: 30px; font-weight: 800; color: var(--text-main); }
.zici-py     { font-size: 14px; color: var(--text-sub); }
.zici-sentence { font-size: 14px; color: var(--accent-blue); }
.zici-game {
  background: var(--bg-panel);
  border-radius: var(--radius);
  padding: 16px; margin-top: 14px;
  text-align: center; box-shadow: var(--shadow);
}
.zici-game-q { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--text-main); }
.zici-game-opts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.zici-pick {
  min-width: 74px; min-height: 74px;
  border-radius: 16px; font-size: 30px; font-weight: 800;
  background: var(--bg-card); color: var(--text-main);
  box-shadow: var(--shadow); cursor: pointer;
}
.zici-pick:active { transform: scale(.94); }
.zici-pick.correct { background: var(--accent-green); color: var(--bg-deep); }

/* ==========================================================
   迪士尼英语课件（主题单元 + 点读词卡）
   ========================================================== */
.disney-grid {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: 1fr;
}
.disney-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  border-left: 6px solid var(--dc, var(--accent));
}
.disney-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.disney-emoji { font-size: 32px; }
.disney-title { font-size: 17px; font-weight: 700; color: var(--text-main); flex: 1; min-width: 120px; }
.disney-line {
  background: var(--dc, #888); color: #fff;
  border: none; border-radius: 12px;
  padding: 8px 12px; font-size: 14px; font-weight: 600; cursor: pointer;
  max-width: 100%;
}
.disney-words { display: flex; gap: 10px; flex-wrap: wrap; }
.disney-word {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 86px; min-height: 64px; justify-content: center;
  border-radius: 14px; background: var(--bg-panel); cursor: pointer; padding: 8px;
}
.disney-word:active { transform: scale(.95); }
.dw-en { font-size: 18px; font-weight: 800; color: var(--dc, #888); }
.dw-zh { font-size: 14px; color: var(--text-sub); }

/* 平板/电脑：书封与课程多列 */
@media (min-width: 768px) {
  .book-grid2 { grid-template-columns: repeat(3, 1fr); }
  .disney-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .book-grid2 { grid-template-columns: repeat(5, 1fr); }
  .disney-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================
   运动/生活技能 拟真插画（SVG 场景 + 角色动画）
   ========================================================== */
.sport-ico { width: 84px; height: 84px; flex: 0 0 auto; }
.illu {
  width: 84px; height: 84px;
  display: block; border-radius: 16px;
  box-shadow: var(--shadow);
}
.illu-actor,
.illu-spin,
.illu-drop,
.illu-rise,
.illu-sun { transform-box: fill-box; transform-origin: center; }
.illu-bob    { animation: illu-bob 1.6s ease-in-out infinite; }
.illu-bounce { animation: illu-bounce 1.1s ease-in-out infinite; }
.illu-climb  { animation: illu-climb 1.4s ease-in-out infinite alternate; }
.illu-sway   { animation: illu-sway 1.8s ease-in-out infinite alternate; }
.illu-wiggle { animation: illu-wiggle 1.2s ease-in-out infinite; }
.illu-pulse  { animation: illu-pulse 1.3s ease-in-out infinite; }
.illu-wave   { animation: illu-wave 1.1s ease-in-out infinite; }
.illu-scrub  { animation: illu-scrub .9s ease-in-out infinite; }
.illu-spin   { animation: illu-spin 1.1s linear infinite; }
.illu-sun    { animation: illu-sun 14s linear infinite; }
.illu-drop   { animation: illu-drop 1.3s ease-in infinite; }
.illu-rise   { animation: illu-rise 1.8s ease-in-out infinite; }

@keyframes illu-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes illu-bounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.06); } }
@keyframes illu-climb  { 0% { transform: translateY(5px); } 100% { transform: translateY(-5px); } }
@keyframes illu-sway   { 0% { transform: rotate(-7deg); } 100% { transform: rotate(7deg); } }
@keyframes illu-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes illu-pulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes illu-wave   { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes illu-scrub  { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes illu-spin   { to { transform: rotate(360deg); } }
@keyframes illu-sun    { to { transform: rotate(360deg); } }
@keyframes illu-drop   { 0% { transform: translateY(-4px); opacity: .4; } 100% { transform: translateY(8px); opacity: 1; } }
@keyframes illu-rise   { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-6px); opacity: 1; } }

/* ==========================================================
   首页每日任务：进度条 + 任务项增强
   ========================================================== */
.task-progress {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-panel);
  border-radius: 999px; padding: 10px 16px;
  margin: 4px 0 14px; box-shadow: var(--shadow);
}
.tp-bar {
  flex: 1; height: 12px; min-width: 60px;
  background: #e3eaf5; border-radius: 999px; overflow: hidden;
}
.tp-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent));
  transition: width .45s ease;
}
.tp-text { font-size: 14px; font-weight: 800; color: var(--accent); white-space: nowrap; }

/* 任务项左侧色条 + 圆形对勾，打卡更有仪式感 */
.task-item {
  position: relative; overflow: hidden;
  border-left: 5px solid var(--accent);
  border-radius: 16px;
}
.task-item.done .task-done-mark { color: var(--accent-green); }
.task-done-mark::before { content: '✓'; display: inline-block; }
.task-reward {
  font-size: 13px; color: var(--accent); font-weight: 700;
  background: rgba(140,180,224,.16); border-radius: 999px; padding: 2px 9px;
}
@media (max-width: 480px) { .sport-ico, .illu { width: 72px; height: 72px; } }

/* ==========================================================
   打卡礼花庆祝（U.celebrate 触发）
   ========================================================== */
.confetti {
  position: fixed; left: 0; top: 0;
  width: 10px; height: 14px; border-radius: 2px;
  pointer-events: none; z-index: 9999; opacity: 1;
  will-change: transform, opacity;
  animation: confetti-fly 1s ease-out forwards;
}
@keyframes confetti-fly {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* ==========================================================
   迪士尼英语课件播放器（按单元逐步引导）
   ========================================================== */
.dp-steps { display: flex; gap: 7px; justify-content: center; margin: 4px 0 14px; }
.dp-dot { width: 11px; height: 11px; border-radius: 50%; background: #dbe3f1; transition: background .3s, transform .3s; }
.dp-dot.on { background: var(--accent); transform: scale(1.15); }
.dp-stage { text-align: center; padding: 14px 8px 8px; }
.dp-emoji { font-size: 76px; line-height: 1; margin-bottom: 6px; animation: illu-bob 1.8s ease-in-out infinite; }
.dp-unit  { font-size: 22px; font-weight: 800; color: var(--text-main); margin: 2px 0 10px; }
.dp-line  {
  font-size: 16px; line-height: 1.6; color: var(--text-sub);
  background: var(--bg-panel); border-radius: 16px; padding: 14px;
  margin: 0 auto 16px; max-width: 360px;
}
.dp-play {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  border: none; border-radius: 999px; padding: 14px 28px; margin-bottom: 14px;
  cursor: pointer; box-shadow: var(--shadow);
}
.dp-play:active { transform: scale(.96); }
.dp-step-label { font-size: 14px; color: var(--text-sub); margin-bottom: 8px; }
.dp-word-en { font-size: 44px; font-weight: 800; color: var(--accent); letter-spacing: .5px; }
.dp-word-zh { font-size: 20px; color: var(--text-main); margin: 6px 0 4px; }
.dp-word-tip { font-size: 14px; color: var(--text-sub); margin-bottom: 14px; }
.dp-opts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 10px 0 4px; }
.dp-opt {
  min-width: 92px; min-height: 84px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 18px; background: var(--bg-card); color: var(--text-main);
  box-shadow: var(--shadow); cursor: pointer; padding: 10px;
  border: 3px solid transparent;
}
.dp-opt:active { transform: scale(.95); }
.dp-opt.correct { border-color: var(--accent-green); background: rgba(156,207,162,.25); }
.dp-opt .de { font-size: 22px; font-weight: 800; color: var(--accent); }
.dp-opt .dz { font-size: 15px; color: var(--text-sub); }
.dp-next, .dp-prev, .dp-finish {
  display: inline-block; margin: 6px 6px 0; min-height: 48px; padding: 0 26px;
  font-size: 17px; font-weight: 700; border: none; border-radius: 999px; cursor: pointer;
  box-shadow: var(--shadow);
}
.dp-next  { background: var(--accent-green); color: var(--bg-deep); }
.dp-prev  { background: var(--bg-panel); color: var(--text-sub); }
.dp-finish{ background: linear-gradient(135deg, var(--accent), var(--accent-blue)); color: #fff; }
.dp-next:active, .dp-prev:active, .dp-finish:active { transform: scale(.96); }
.dp-done-card {
  text-align: center; padding: 26px 12px;
  background: var(--bg-panel); border-radius: 20px; margin: 8px 0;
}
.dp-done-emoji { font-size: 72px; animation: illu-pulse 1.2s ease-in-out infinite; }
.dp-done-title { font-size: 24px; font-weight: 800; color: var(--accent); margin: 8px 0; }
.dp-stars { font-size: 30px; letter-spacing: 6px; margin-bottom: 16px; }

/* ============ 云端同步浮动指示器 ============ */
.sync-ind {
  position: fixed; right: 12px; bottom: 12px; z-index: 60;
  padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--bg-panel); color: var(--text-sub);
  box-shadow: var(--shadow); pointer-events: none; opacity: .95;
}
.sync-ind.sync-syncing { color: var(--accent-blue); }
.sync-ind.sync-synced  { color: var(--accent-green); }
.sync-ind.sync-offline { color: var(--accent-pink); }
.sync-ind.sync-error   { color: var(--danger); }

/* ============ 家庭与同步 Tab ============ */
.fam-sync-state {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 12px; border-radius: 14px; background: var(--bg-card);
}
.fam-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--text-sub); flex: none; }
.fam-dot.fam-syncing { background: var(--accent-blue); animation: blink 1s infinite; }
.fam-dot.fam-synced  { background: var(--accent-green); }
.fam-dot.fam-offline { background: var(--accent-pink); }
.fam-dot.fam-error   { background: var(--danger); }
.fam-status-text { font-weight: 800; color: var(--text-main); }
.fam-sub { font-size: 12px; color: var(--text-sub); }
@keyframes blink { 50% { opacity: .3; } }

.fam-off { color: var(--text-sub); font-size: 14px; line-height: 1.7; }
.fam-off code {
  background: var(--bg-card); padding: 1px 6px; border-radius: 6px;
  color: var(--accent); font-size: 13px;
}
.fam-howto { margin-top: 10px; color: var(--text-sub); }
.fam-howto summary { cursor: pointer; color: var(--accent-blue); font-weight: 700; }
.fam-howto ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.8; }
.fam-howto p { margin-top: 8px; }

.fam-code-box {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px; border-radius: 14px; background: var(--bg-card);
}
.fam-code {
  font-size: 30px; font-weight: 900; letter-spacing: 6px; color: var(--accent);
  font-family: 'Courier New', monospace;
}
.fam-tip { font-size: 12.5px; color: var(--text-sub); margin: 10px 0 0; line-height: 1.6; }

.fam-children { display: flex; flex-direction: column; gap: 10px; }
.fam-child {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px; background: var(--bg-card);
  border: 2px solid transparent;
}
.fam-child.active { border-color: var(--accent-green); }
.fam-ava {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.fam-child-info { flex: 1; min-width: 0; }
.fam-child-name { font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.fam-badge {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--accent-green); color: var(--bg-deep); font-weight: 800;
}
.fam-child-id { font-size: 11px; color: var(--text-sub); margin-top: 2px; }
.fam-child-acts { display: flex; gap: 6px; flex-wrap: wrap; }