/* ============================================
   周周工作台 - 样式系统
   适合8岁孩子的大字大按钮设计
   ============================================ */

/* ---- CSS变量 ---- */
:root {
  --primary: #F17017;
  --primary-light: #FFE0C2;
  --primary-dark: #08325E;
  --success: #5A9E31;
  --danger: #C84732;
  --info: #1479D1;
  --warning: #E09A22;
  --purple: #526FB0;
  --bg-main: #EEF2F2;
  --bg-card: #FFFDF8;
  --bg-active: #E4F1FC;
  --text-main: #15314F;
  --text-light: #60758C;
  --border: #CFDCE5;
  --seal-red: #E06419;
  --gold: #E6A227;
  --shadow: 0 6px 18px rgba(8,50,94,0.13);
  --shadow-lg: 0 14px 32px rgba(8,50,94,0.2);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;
  --nav-h: 76px;
  --top-h: 64px;
  --side-w: 54px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;
  --font-cn: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --premium-glow: 0 0 8px rgba(230,162,39,0.6), 0 0 16px rgba(230,162,39,0.3);
  --premium-grad: linear-gradient(135deg, #F7C752, #E68B20);
}

/* ---- 基础重置 ---- */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size: 18px; -webkit-text-size-adjust:100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(216,148,46,0.06), transparent 42%),
    radial-gradient(circle at 82% 88%, rgba(184,58,44,0.06), transparent 42%),
    var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
}
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
.hidden { display: none !important; }

/* ---- 品牌角标（侧边栏与顶栏交叉的左上角区域） ---- */
.brand-corner {
  position: fixed; top: 0; left: 0;
  width: var(--side-w); height: var(--top-h);
  background: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  z-index: 110;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.22);
  border-right: 2px solid rgba(0,0,0,0.12);
  border-bottom: 2px solid rgba(0,0,0,0.12);
  overflow: hidden;
}
.brand-corner-text {
  font-family: var(--font-cn); font-weight: 800; font-size: 18px;
  color: #fff; letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  white-space: nowrap; line-height: 1;
}

/* ---- 顶部状态栏 ---- */
#topBar {
  position: fixed; top:0; left: var(--side-w); right:0; height: var(--top-h);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.top-left { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.top-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.top-date { font-size: 14px; font-weight: 600; flex: 0 0 auto; white-space: nowrap; color: rgba(255,255,255,0.92); }
.streak-badge, .points-badge {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 20px; padding: 4px 12px;
  font-size: 16px; font-weight: 700;
  flex: 0 0 auto;
}
.points-coin-icon {
  width: 24px; height: 24px; object-fit: contain; display: block;
  filter: drop-shadow(0 1px 1px rgba(93, 52, 0, 0.3));
}
.mini-pet {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
}
.mini-pet svg { width: 40px; height: 40px; }
.pet-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.mini-pet .mini-pet-image { width: 42px; height: 42px; }
.mini-satiety {
  position: absolute; bottom: -2px; left: 2px; right: 2px; height: 4px;
  background: rgba(255,255,255,0.3); border-radius: 2px;
}
.mini-satiety::after {
  content: ''; display: block; height: 100%; width: var(--sat-w, 0%);
  background: var(--success); border-radius: 2px;
  transition: width 0.3s;
}

/* ---- 主内容区 ---- */
#mainContent {
  padding: calc(var(--top-h) + 12px) 12px 16px calc(var(--side-w) + 12px);
  max-width: 680px; margin: 0 auto; min-height: 100vh;
}

/* ---- 左侧导航栏 ---- */
#sideNav {
  position: fixed; top: var(--top-h); left: 0; bottom: 0; width: var(--side-w);
  background: linear-gradient(180deg, #fff 0%, var(--bg-card) 100%);
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 2px 0 12px rgba(0,0,0,0.08);
  z-index: 100; padding: 8px 4px;
  border-right: 2px solid var(--border);
  overflow-y: auto;
}
.nav-item {
  width: 100%; background: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  color: var(--text-light); transition: all 0.2s;
  position: relative; padding: 8px 2px; border-radius: 12px; margin-bottom: 4px;
}
.nav-item .nav-icon { font-size: 22px; transition: transform 0.2s; }
.nav-item .nav-label { font-size: 10px; }
.nav-item:active { transform: scale(0.94); }
.nav-item.active {
  color: var(--primary-dark);
  background: var(--bg-active);
  box-shadow: inset 3px 0 0 var(--primary);
}
.nav-item.active .nav-icon { transform: scale(1.18); }
.nav-item.active::after {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 4px;
  background: var(--primary); border-radius: 0 3px 3px 0;
}
.nav-item.completed .nav-icon::after {
  content: '✓'; position: absolute; top: 2px; right: 8px;
  background: var(--success); color: #fff; font-size: 10px;
  width: 13px; height: 13px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold;
}

/* ---- 通用卡片 ---- */
.card {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 20px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.card-title {
  font-size: var(--font-size-xl); font-weight: 700; color: var(--text-main);
  font-family: var(--font-cn);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
  border-left: 4px solid var(--primary);
  padding-left: 10px;
}
.card-title .icon { font-size: 28px; }

/* ---- 大按钮 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; font-size: 18px; font-weight: 600;
  border-radius: var(--radius-sm); transition: all 0.2s;
  min-height: 52px; min-width: 80px; color: #fff;
}
.btn:active { transform: scale(0.95); }
.btn-primary { background: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); }
.btn-info { background: var(--info); }
.btn-danger { background: var(--danger); }
.btn-warning { background: var(--warning); }
.btn-purple { background: var(--purple); }
.btn-lg { padding: 18px 36px; font-size: 22px; min-height: 64px; }
.btn-block { display: flex; width: 100%; }
.btn-outline {
  background: transparent; border: 2px solid var(--primary);
  color: var(--primary-dark);
}

/* ---- 模块标题 ---- */
.module-header {
  text-align: center; margin-bottom: 18px;
}
.module-header h1 {
  font-size: var(--font-size-xxl); color: var(--primary-dark);
  font-family: var(--font-cn);
  display: inline-flex; align-items: center; gap: 8px;
  text-shadow: 1px 1px 0 rgba(184,58,44,0.12);
}
.module-header .subtitle {
  font-size: 15px; color: var(--text-light); margin-top: 4px;
}

/* ---- 任务卡 ---- */
.task-card {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow);
  border-left: 5px solid var(--primary);
}
.task-card.done { border-left-color: var(--success); opacity: 0.85; }
.task-card .task-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.task-card .task-name {
  font-size: var(--font-size-lg); font-weight: 700; display: flex; align-items: center; gap: 6px;
}
.task-card .task-time {
  font-size: 15px; color: var(--text-light);
  background: var(--bg-active); padding: 4px 12px; border-radius: 20px;
}

/* ---- 计时器 ---- */
.timer-display {
  font-size: 40px; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--primary-dark);
  margin: 10px 0;
}
.timer-display.running { color: var(--info); }
.timer-display.overtime { color: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} }

.timer-controls { display: flex; gap: 10px; justify-content: center; }

/* ---- 三档完成评价 ---- */
.eval-options { display: flex; gap: 8px; margin-top: 12px; }
.eval-btn {
  flex: 1; padding: 16px 8px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 600; text-align: center; transition: all 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.eval-btn:active { transform: scale(0.92); }
.eval-btn .eval-icon { font-size: 28px; }
.eval-early { background: #E8F5E9; color: #2E7D32; border: 2px solid #66BB6A; }
.eval-ontime { background: #FFF3E0; color: #E65100; border: 2px solid #FFB74D; }
.eval-slow { background: #FFEBEE; color: #C62828; border: 2px solid #EF5350; }
.eval-btn:active.eval-early { background: #C8E6C9; }
.eval-btn:active.eval-ontime { background: #FFE0B2; }
.eval-btn:active.eval-slow { background: #FFCDD2; }

/* ---- 自定义任务 ---- */
.custom-task-card { border-left: 5px solid #8E7CC3; }
.custom-task-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.custom-task-input {
  flex: 1 1 150px; min-width: 0; height: 42px; padding: 0 12px;
  border: 2px solid var(--border); border-radius: 10px; font: inherit;
}
.custom-task-duration { display: flex; align-items: center; gap: 4px; color: var(--text-light); font-size: 14px; white-space: nowrap; }
.custom-task-duration input { width: 58px; height: 40px; border: 2px solid var(--border); border-radius: 9px; text-align: center; font: inherit; }
.custom-task-help { margin-top: 9px; color: var(--text-light); font-size: 13px; }
.task-remove {
  display: block; margin: 10px 0 0 auto; padding: 5px 10px;
  color: var(--danger); background: #FFF3F1; border: 1px solid #F5B8AF;
  border-radius: 8px; font-size: 13px; font-weight: 600;
}
.task-remove:active { transform: scale(0.95); background: #FFE2DE; }

/* ---- 奖励提示 ---- */
.reward-result {
  text-align: center; padding: 14px; border-radius: var(--radius-sm);
  margin-top: 12px; font-size: 16px; font-weight: 600;
  animation: bounceIn 0.5s;
}
.reward-early { background: #E8F5E9; color: #2E7D32; }
.reward-ontime { background: #FFF3E0; color: #E65100; }
.reward-slow { background: #FFEBEE; color: #C62828; }
@keyframes bounceIn {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---- 晨读卡 ---- */
.reading-card { padding: 20px; }
.reading-title {
  font-size: 22px; font-weight: 700; text-align: center;
  font-family: var(--font-cn);
  margin-bottom: 6px; color: var(--seal-red);
  text-shadow: 1px 1px 0 rgba(184,58,44,0.1);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.reading-type {
  text-align: center; font-size: 14px; color: var(--text-light); margin-bottom: 16px;
}
.reading-content {
  font-size: 22px; line-height: 1.6; text-align: center;
  padding: 22px 14px; background: var(--bg-active); border-radius: var(--radius-sm);
}
.reading-line { margin-bottom: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.reading-group { display: inline-flex; flex-direction: row; align-items: flex-end; white-space: nowrap; gap: 0; flex: 0 0 auto; }
.reading-char { display: inline-flex; flex-direction: column; justify-content: flex-end; line-height: 1.1; }
.reading-char ruby {
  ruby-position: over; display: inline-flex; flex-direction: column-reverse;
  align-items: center; line-height: 1.1;
  min-width: auto; padding: 0 1px;
}
.reading-char rt {
  font-size: 13px; color: var(--primary-dark); font-weight: 600;
  line-height: 1.3; margin-top: 0; margin-bottom: 2px;
  user-select: none; white-space: nowrap; letter-spacing: 0.3px;
}
.reading-char rb { font-size: 22px; line-height: 1.2; }
.reading-actions { display: flex; gap: 10px; margin-top: 14px; justify-content: center; flex-wrap: wrap; }
.reading-nav { display: flex; gap: 10px; justify-content: space-between; margin-bottom: 14px; }

/* ---- 汉字卡 ---- */
.char-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.char-cell {
  aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s;
}
.char-cell:active { transform: scale(0.9); }
.char-cell .char { font-size: 32px; font-weight: 700; line-height: 1; }
.char-cell .pinyin { font-size: 11px; color: var(--text-light); }
.char-cell.completed { background: #E8F5E9; border-color: var(--success); }
.char-cell.completed::after { content: '✓'; position: absolute; }

.char-detail { padding: 20px; text-align: center; }
.char-detail-top { display: flex; justify-content: flex-start; margin-bottom: 12px; }
.char-back-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 104px; min-height: 46px; padding: 8px 14px;
  font-size: 14px; touch-action: manipulation; background: #FFFDF8;
}
.char-detail-grade { min-height: 22px; }
.char-detail .big-char { font-size: 80px; font-weight: 700; line-height: 1.2; }
.char-detail .big-pinyin { font-size: 24px; color: var(--text-light); margin-bottom: 10px; }
.char-detail .stroke-area {
  width: 208px; height: 208px; margin: 10px auto;
  background: #FFF8E7; border: 3px solid var(--border); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.hanzi-mini { width: 200px; height: 200px; }

/* 笔顺动画弹窗 */
.hanzi-stage {
  width: 240px; height: 240px; margin: 0 auto;
  background: #FFF8E7; border: 3px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.hanzi-ctrl { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.hanzi-ctrl .btn { font-size: 14px; padding: 8px 12px; }
.hanzi-progress { margin-top: 10px; font-size: 14px; color: var(--text-light); min-height: 22px; }
.hanzi-progress span { font-weight: 700; }
.char-detail .words { font-size: 18px; color: var(--text-main); margin-top: 8px; }
.char-detail .actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.daily-growth-note { margin-top:10px; padding-top:9px; border-top:1px dashed #B7D7EB; color:#1769AB; font-size:13px; font-weight:700; }
.daily-growth-note span { display:block; margin-top:2px; color:#60758C; font-size:11px; font-weight:600; }

/* ---- 口算练习 ---- */
.math-question {
  font-size: 32px; font-weight: 700; text-align: center; margin: 16px 0;
  font-variant-numeric: tabular-nums;
}
.math-input {
  width: 120px; height: 60px; font-size: 32px; text-align: center;
  border: 3px solid var(--primary); border-radius: var(--radius-sm);
  display: block; margin: 0 auto 10px; background: #fff; color: var(--text-main);
  font-weight: 700;
}
.math-input:focus { border-color: var(--info); }
.math-progress {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px;
}
.math-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #ddd;
  transition: all 0.3s;
}
.math-dot.correct { background: var(--success); }
.math-dot.wrong { background: var(--danger); }
.math-result { text-align: center; font-size: 20px; margin: 14px 0; }
.math-result .big { font-size: 40px; font-weight: 800; }

/* ---- 钟表 ---- */
.clock-svg { width: 240px; height: 240px; margin: 0 auto; display: block; }
.clock-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.clock-opt {
  padding: 16px; border-radius: var(--radius-sm); font-size: 22px; font-weight: 700;
  background: var(--bg-card); border: 3px solid var(--border); transition: all 0.2s;
}
.clock-opt:active { transform: scale(0.92); }
.clock-opt.correct { background: #E8F5E9; border-color: var(--success); }
.clock-opt.wrong { background: #FFEBEE; border-color: var(--danger); }

/* ---- 乘除法 ---- */
.mult-table { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mult-cell {
  padding: 10px 4px; text-align: center; font-size: 15px; font-weight: 600;
  background: var(--bg-active); border-radius: 8px; cursor: pointer;
}
.mult-cell.header { background: var(--primary); color: #fff; }

/* ---- 新乘法口诀表 ---- */
.mult-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.mult-table-new {
  width: 100%; border-collapse: separate; border-spacing: 4px; margin: 0 auto;
}
.mult-th {
  background: var(--primary); color: #fff;
  font-size: 18px; font-weight: 700;
  padding: 8px 4px; border-radius: 8px; text-align: center;
}
.mult-cell-new {
  padding: 10px 4px; text-align: center;
  background: var(--bg-active);
  border: 2px solid;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s;
}
.mult-cell-new:active { transform: scale(0.93); }
.mult-cell-new .mult-num { font-size: 22px; font-weight: 800; color: var(--text-main); }
.mult-cell-new .mult-formula { font-size: 11px; color: var(--text-light); margin-top: 2px; }

.mult-group-card { padding: 16px; }
.mult-group-title { font-size: 19px; font-weight: 800; margin-bottom: 12px; }
.mult-group-list { display: flex; flex-direction: column; gap: 8px; }
.mult-row {
  background: #FFF8E7;
  border: 2px solid;
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.mult-row:active { transform: scale(0.97); }
.mult-row-formula {
  display: flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 700;
}
.mult-num-big { font-size: 22px; font-weight: 800; }
.mult-op { font-size: 18px; color: var(--text-light); }
.mult-eq { font-size: 18px; color: var(--text-light); margin: 0 4px; }
.mult-num-result {
  font-size: 22px; font-weight: 800; color: #fff;
  padding: 2px 12px; border-radius: 10px;
  margin-left: auto;
}
.mult-row-read {
  font-size: 13px; color: var(--text-light); margin-top: 4px;
  font-style: italic;
}
.mult-row-visual {
  font-size: 16px; margin-top: 4px;
  letter-spacing: 2px;
}

/* ---- 英语 ---- */
.english-letter {
  font-size: 60px; font-weight: 800; text-align: center; color: var(--info);
}
.alphabet-batch-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:7px; margin:4px 0 8px; }
.alphabet-batch-card {
  min-height:82px; padding:7px 2px; border-radius:12px; color:var(--info);
  background:#E3F2FD; border:2px solid #90CAF9; font-weight:800;
}
.alphabet-batch-card span { display:block; font-size:30px; line-height:1; }
.alphabet-batch-card small { display:block; margin-top:3px; font-size:18px; font-weight:700; }
.alphabet-batch-card:active { transform:scale(.95); background:#BBDEFB; }
.alphabet-batch-complete .alphabet-batch-card { background:#E8F5E9; border-color:#81C784; color:var(--success); }
.english-step-label { font-size:15px; font-weight:700; color:var(--info); margin-bottom:6px; }
.english-single-letter {
  width:136px; height:136px; margin:2px auto 4px; border-radius:28px;
  color:var(--info); background:#E3F2FD; border:3px solid #90CAF9;
  box-shadow:0 7px 0 rgba(33,150,243,.12); font-weight:800;
}
.english-single-letter span { display:block; font-size:68px; line-height:.82; }
.english-single-letter small { display:block; margin-top:10px; font-size:30px; font-weight:700; }
.english-single-letter:active { transform:translateY(4px) scale(.97); box-shadow:0 3px 0 rgba(33,150,243,.12); }
.english-learning-actions { display:flex; gap:9px; margin:12px auto 0; max-width:380px; }
.english-learning-action {
  flex:1; min-height:68px; padding:9px 8px; border-radius:15px; color:#fff;
  display:flex; align-items:center; justify-content:center; gap:7px;
  box-shadow:0 5px 0 rgba(0,0,0,.15); text-align:left;
}
.english-learning-action:active { transform:translateY(4px) scale(.98); box-shadow:0 1px 0 rgba(0,0,0,.15); }
.english-pronounce-action { background:linear-gradient(135deg,#1779BF,#075B9A); }
.english-stroke-action { background:linear-gradient(135deg,#DF6A16,#AE3D0C); }
.english-action-icon { font-size:28px; line-height:1; }
.english-learning-action small { display:block; margin-bottom:2px; color:rgba(255,255,255,.86); font-size:12px; font-weight:600; }
.english-learning-action b { display:block; color:#fff; font-size:15px; line-height:1.15; }
.english-core-words { grid-template-columns:repeat(3, 1fr); gap:7px; }
.english-core-words .english-word-card { padding:12px 4px; }
.english-core-words .english-word-icon { margin-bottom:4px; font-size:32px; }
.english-core-words .english-word { font-size:17px; line-height:1.1; overflow-wrap:anywhere; }
.english-core-words .english-word-cn { margin-top:3px; font-size:13px; }
.english-core-words .english-word-card div:last-child { font-size:10px !important; }
.english-speaking-sentence {
  margin-top:14px; padding:12px; border:2px solid #C5E1A5; border-radius:12px;
  background:#F1F8E9; color:#467438; cursor:pointer;
}
.english-speaking-sentence div { font-size:13px; font-weight:700; }
.english-speaking-sentence b { display:block; margin-top:4px; font-size:19px; color:#2F6030; }
.english-speaking-sentence small { display:block; margin-top:3px; color:#71836A; font-size:13px; }
.english-speaking-sentence:active { transform:scale(.98); background:#E6F4D7; }
@media (max-width:360px) {
  .english-learning-action { min-height:62px; gap:4px; padding:8px 5px; }
  .english-action-icon { font-size:23px; }
  .english-learning-action b { font-size:13px; }
}
.letter-stroke-modal { width:min(92vw, 520px); text-align:center; }
.letter-stroke-note { margin:2px 0 12px; color:var(--text-light); font-size:14px; }
.letter-stroke-one { max-width:280px; margin:0 auto; }
.letter-stroke-demo { padding:8px 5px; border:2px solid #DCEBF8; border-radius:12px; background:#FAFDFF; }
.letter-stroke-title { color:var(--info); font-size:16px; font-weight:800; }
.letter-stroke-svg { display:block; width:100%; max-width:180px; margin:2px auto 0; }
.letter-stroke-svg text { fill:#D9E3EC; font:800 82px/1 Arial, sans-serif; }
.letter-guide-line { stroke:#DCEBF8; stroke-width:1.4; stroke-dasharray:3 3; fill:none; }
.letter-stroke-line { fill:none; stroke:#E34B3B; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:letterStrokeDraw .62s ease forwards; }
.letter-stroke-start { fill:#FFB74D; opacity:0; animation:letterStrokeStart .2s ease forwards; }
.letter-stroke-steps { min-height:20px; margin-top:2px; color:#B54B3C; font-size:12px; font-weight:700; }
@keyframes letterStrokeDraw { to { stroke-dashoffset:0; } }
@keyframes letterStrokeStart { to { opacity:1; } }
.pet-play-bounce { animation:petPlayBounce .72s cubic-bezier(.25,.8,.25,1); }
@keyframes petPlayBounce {
  0%,100% { transform:translateY(0) scale(1); }
  32% { transform:translateY(-13px) scale(1.04,.96); }
  58% { transform:translateY(0) scale(.96,1.04); }
}
.english-word-card {
  background: var(--bg-card); border-radius: var(--radius); padding: 20px;
  text-align: center; box-shadow: var(--shadow);
}
.english-word { font-size: 28px; font-weight: 700; }
.english-word-cn { font-size: 18px; color: var(--text-light); margin-top: 4px; }
.english-word-icon { font-size: 48px; margin-bottom: 8px; }
.word-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---- 运动模块 ---- */
.exercise-counter {
  font-size: 48px; font-weight: 800; text-align: center;
  color: var(--success); margin: 10px 0;
}
.exercise-goal {
  text-align: center; font-size: 16px; color: var(--text-light); margin-bottom: 10px;
}
.exercise-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---- 宠物中心 ---- */
.pet-home { text-align: center; padding: 10px 0; }
.pet-stage-name {
  font-size: var(--font-size-xl); font-weight: 700; color: var(--primary-dark);
  font-family: var(--font-cn);
}
/* ---- 零食盘（即时喂食反馈） ---- */
.snack-area {
  margin: 10px auto 4px; max-width: 320px;
  background: linear-gradient(180deg, #FFFDF6, #FBEFD9);
  border: 2px solid var(--border); border-radius: var(--radius);
  padding: 10px 8px; box-shadow: var(--shadow);
}
.snack-label { font-size: 14px; font-weight: 700; color: var(--primary-dark); margin-bottom: 8px; }
.snack-tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.snack-item {
  position: relative; width: 52px; height: 52px; border-radius: 14px;
  background: var(--bg-card); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s; box-shadow: 0 2px 6px rgba(120,80,40,0.12);
}
.snack-item:active { transform: scale(0.9); }
.snack-item svg, .snack-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 10px; }
.snack-count {
  position: absolute; top: -6px; right: -6px;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 700;
  min-width: 18px; height: 18px; line-height: 18px; border-radius: 9px; padding: 0 4px;
}
.snack-empty { font-size: 14px; color: var(--text-light); padding: 6px 4px; }
.pet-walk-track {
  width: 100%; height: 300px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  margin: 6px 0 2px;
}
.pet-walker {
  width: 260px; height: 260px; position: relative;
  display: flex; align-items: flex-end; justify-content: center;
}
.pet-walker.walking { animation: petWalk 4.5s ease-in-out infinite alternate; }
@keyframes petWalk {
  0%   { transform: translateX(-78px) translateY(0); }
  20%  { transform: translateX(-40px) translateY(-7px); }
  40%  { transform: translateX(0)    translateY(0); }
  60%  { transform: translateX(40px) translateY(-7px); }
  80%  { transform: translateX(78px) translateY(0); }
  100% { transform: translateX(78px) translateY(0); }
}
.pet-walker.paused { animation-play-state: paused; }
.pet-display {
  width: 100%; height: 100%; margin: 0 auto; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.pet-display svg { width: 100%; height: 100%; }
.pet-display .pet-equip-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.pet-mood-bubble { position:absolute; z-index:12; top:14px; left:50%; transform:translateX(-50%); max-width:82%; padding:7px 13px; border:2px solid #B9DCF0; border-radius:18px; background:rgba(255,255,255,.96); color:#154F82; font-size:14px; font-weight:800; line-height:1.3; text-align:center; box-shadow:0 5px 12px rgba(1,36,75,.2); }
.pet-mood-bubble::after { content:''; position:absolute; left:50%; bottom:-8px; width:13px; height:13px; background:#fff; border-right:2px solid #B9DCF0; border-bottom:2px solid #B9DCF0; transform:translateX(-50%) rotate(45deg); }
.pet-mood-bubble-energetic { color:#A15E00; border-color:#FFD368; background:#FFF9E4; }
.pet-mood-bubble-energetic::after { background:#FFF9E4; border-color:#FFD368; }
.pet-mood-bubble-hungry, .pet-mood-bubble-gloomy, .pet-mood-bubble-urgent { color:#9B4B27; border-color:#F3B083; background:#FFF4ED; }
.pet-mood-bubble-hungry::after, .pet-mood-bubble-gloomy::after, .pet-mood-bubble-urgent::after { background:#FFF4ED; border-color:#F3B083; }
.pet-mood-bubble-lonely { color:#7251A8; border-color:#CDB9EE; background:#F8F2FF; }
.pet-mood-bubble-lonely::after { background:#F8F2FF; border-color:#CDB9EE; }
.pet-mood-mark { position:absolute; right:18px; top:38px; z-index:5; font-size:27px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.18)); pointer-events:none; animation:moodMarkFloat 1.9s ease-in-out infinite; }
@keyframes moodMarkFloat { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-7px) rotate(4deg); } }
.pet-walker.pet-mood-energetic.walking { animation-duration:2.8s; }
.pet-walker.pet-mood-hungry.walking, .pet-walker.pet-mood-lonely.walking { animation-duration:6.6s; }
.pet-walker.pet-mood-gloomy.walking, .pet-walker.pet-mood-urgent.walking { animation:none; }
.pet-display.pet-mood-energetic > svg { animation:petMoodEnergy 1.2s ease-in-out infinite; }
.pet-display.pet-mood-hungry > svg { animation:petMoodHungry 2.8s ease-in-out infinite; }
.pet-display.pet-mood-lonely > svg { animation:petMoodLonely 2.2s ease-in-out infinite; }
.pet-display.pet-mood-gloomy > svg { animation:petMoodGloomy 3s ease-in-out infinite; filter:saturate(.82) brightness(.95); }
.pet-display.pet-mood-urgent > svg { animation:petMoodUrgent 1.5s ease-in-out infinite; filter:saturate(.76) brightness(.92); }
@keyframes petMoodEnergy { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-8px) rotate(1.5deg); } }
@keyframes petMoodHungry { 0%,100% { transform:translateY(2px) rotate(0); } 50% { transform:translateY(7px) rotate(-1.5deg); } }
@keyframes petMoodLonely { 0%,100% { transform:translateX(0) rotate(0); } 50% { transform:translateX(-5px) rotate(-1.8deg); } }
@keyframes petMoodGloomy { 0%,100% { transform:translateY(7px) scale(.97); } 50% { transform:translateY(11px) scale(.965); } }
@keyframes petMoodUrgent { 0%,100% { transform:translateY(9px) scale(.95); } 50% { transform:translateY(4px) scale(.965); } }
.pet-mood-card { display:flex; align-items:center; gap:9px; max-width:420px; margin:8px auto 3px; padding:9px 12px; border:1px solid #B9DCF0; border-radius:13px; background:#F5FBFF; color:#245A81; text-align:left; }
.pet-mood-card-icon { font-size:25px; line-height:1; }
.pet-mood-card b, .pet-mood-card span:not(.pet-mood-card-icon) { display:block; }
.pet-mood-card b { font-size:14px; }
.pet-mood-card div span { margin-top:2px; font-size:12px; font-weight:700; color:#60809A; }
.pet-mood-card-energetic { border-color:#FFD36B; background:#FFF9E7; color:#936000; }
.pet-mood-card-hungry, .pet-mood-card-gloomy, .pet-mood-card-urgent { border-color:#F2BA91; background:#FFF5EE; color:#A05C37; }
.pet-mood-card-lonely { border-color:#CDB9EE; background:#F8F3FF; color:#7655A2; }
.pet-wear { position: absolute; pointer-events: none; z-index: 3; }
.pet-wear-collar {
  width: 68px; height: 18px; left: 50%; top: 53%; transform: translateX(-50%) rotate(-3deg);
  border: 6px solid #1C355C; border-top-width: 4px; border-radius: 50%; box-shadow: 0 2px 0 #C7D7EB, inset 0 1px 2px rgba(255,255,255,.5);
}
.pet-wear-collar::after { content: '☾'; position: absolute; left: 50%; top: 6px; transform: translateX(-50%); color: #E5EBF5; font-size: 15px; text-shadow: 0 1px 2px #263A5B; }
.pet-wear-scarf {
  width: 76px; height: 22px; left: 50%; top: 53%; transform: translateX(-50%) rotate(-4deg);
  background: repeating-linear-gradient(135deg, #B91E29 0 5px, #E9474F 5px 9px); border-radius: 14px; box-shadow: 0 2px 5px rgba(108,0,0,.25);
}
.pet-wear-scarf::after { content: ''; position: absolute; width: 18px; height: 38px; right: 4px; top: 12px; background: #C92835; border-radius: 0 0 9px 9px; transform: rotate(14deg); }
.pet-wear-raincoat {
  width: 112px; height: 76px; left: 50%; top: 58%; transform: translateX(-46%) rotate(-4deg);
  background: linear-gradient(135deg, rgba(255,215,45,.85), rgba(239,163,0,.82)); border: 3px solid #D68A00; border-radius: 52% 40% 38% 28%; box-shadow: inset 0 2px 0 rgba(255,255,255,.65), 0 3px 6px rgba(153,91,0,.18);
}
.pet-wear-raincoat::after { content: '☀'; position: absolute; left: 50%; top: 20px; transform: translateX(-50%); color: #fff8c2; font-size: 28px; text-shadow: 0 1px 2px #C47B00; }
.pet-wear-harness {
  width: 94px; height: 78px; left: 50%; top: 57%; transform: translateX(-50%);
  border: 8px solid rgba(142,164,186,.85); border-bottom-width: 14px; border-radius: 45% 45% 35% 35%; box-shadow: inset 0 0 0 3px #356696, 0 0 10px rgba(61,164,255,.55);
}
.pet-wear-harness::after { content: '✦'; position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 28px; height: 28px; line-height: 28px; border-radius: 50%; background: #55B8FF; color: #fff; text-align: center; box-shadow: 0 0 10px #55B8FF; }
.pet-wear-toy { width: 46px; height: 46px; right: 3px; bottom: 17px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 7px rgba(80,45,10,.2); }
.pet-wear-toy .shop-image { width: 100%; height: 100%; object-fit: cover; }
.pet-bounce { animation: petBounce 0.6s ease-out; }
@keyframes petBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-30px) scale(1.05, 0.95); }
  50% { transform: translateY(-40px) scale(0.95, 1.05); }
  70% { transform: translateY(-15px) scale(1.02, 0.98); }
}
.pet-eating { animation: petEating 1.2s ease-out; }
@keyframes petEating {
  0% { transform: scale(1); }
  20% { transform: scale(1.05) rotate(-2deg); }
  40% { transform: scale(0.95) translateY(10px); }
  60% { transform: scale(1.03) translateY(-5px); }
  80% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.pet-chewing { animation: petChewing 0.4s ease-in-out 3; }
@keyframes petChewing {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.02, 0.98) translateY(2px); }
}
/* ---- 喂食开心反馈 ---- */
.pet-happy { animation: petHappy 0.7s ease-out; }
@keyframes petHappy {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.1) rotate(-7deg); }
  45% { transform: scale(1.14) rotate(7deg); }
  70% { transform: scale(1.06) rotate(-4deg); }
}
.pet-react-happy { animation: petHappy 0.9s ease-out 2; }
.pet-react-excited { animation: petExcited 0.7s cubic-bezier(.36,1.65,.56,1) 3; }
.pet-react-cuddle { animation: petCuddle 1.2s ease-in-out 2; filter: drop-shadow(0 0 14px rgba(255, 125, 160, .6)); }
.pet-react-tail { animation: petTailWag .42s ease-in-out 6; }
.pet-react-zoomies { animation: petExcited .52s ease-in-out 4; }
@keyframes petExcited {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  35% { transform: translateY(-42px) scale(1.1) rotate(-8deg); }
  65% { transform: translateY(-18px) scale(1.06) rotate(8deg); }
}
@keyframes petCuddle {
  0%, 100% { transform: translateX(0) scale(1); }
  40% { transform: translateX(22px) translateY(3px) scale(1.1); }
  60% { transform: translateX(28px) translateY(4px) scale(1.12); }
}
@keyframes petTailWag {
  0%,100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-6deg) scale(1.03); }
  75% { transform: rotate(6deg) scale(1.03); }
}
.pet-walker.pet-zoomies { animation: petZoomies 1.25s ease-in-out 2; }
@keyframes petZoomies {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-95px) rotate(-2deg); }
  50% { transform: translateX(80px) rotate(2deg); }
  75% { transform: translateX(-45px) rotate(-1deg); }
}
.floating-heart {
  position: absolute; left: 50%; bottom: 60%; font-size: 30px;
  pointer-events: none; z-index: 120;
  animation: floatUp 1.6s ease-out forwards;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -110px) scale(1.3); }
}
.happy-bubble {
  position: absolute; left: 50%; top: -4px; transform: translateX(-50%);
  background: #fff; border: 2px solid var(--primary); color: var(--primary-dark);
  font-weight: 700; font-size: 15px; padding: 4px 12px; border-radius: 16px;
  box-shadow: 0 3px 8px rgba(217,78,59,0.25); z-index: 130; white-space: nowrap;
  /* 让孩子有足够时间读完七七想说的话，再慢慢飘走。 */
  animation: bubblePop 4.8s ease-out forwards;
}
@keyframes bubblePop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.6); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.05); }
  30%  { transform: translateX(-50%) translateY(0) scale(1); }
  78%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.97); }
}

/* ---- 商城用品的宠物小剧场 ---- */
#petItemReaction {
  position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center;
  padding: 22px; background: rgba(49, 30, 17, .5); backdrop-filter: blur(4px);
  animation: rewardContainerIn .25s ease-out;
}
#petItemReaction.closing { animation: rewardContainerOut .3s ease-in forwards; }
.pet-item-card {
  width: min(360px, 100%); padding: 22px 22px 20px; text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #FFFDF8, #FFF0D6); border: 3px solid #F2A93B; border-radius: 24px;
  box-shadow: 0 20px 55px rgba(65, 35, 12, .35); animation: rewardPopupIn .5s cubic-bezier(.34,1.56,.64,1);
}
.item-reaction-sparkles { font-size: 22px; letter-spacing: 10px; animation: sparklePop 1.2s ease-in-out infinite; }
.item-reaction-label { display: inline-block; margin: 6px 0 8px; padding: 5px 12px; border-radius: 999px; background: #FFE3A8; color: #8A5100; font-size: 13px; font-weight: 800; }
.item-reaction-product { width: 94px; height: 94px; margin: 0 auto -4px; border-radius: 18px; overflow: hidden; background: #FFF9EE; box-shadow: 0 5px 14px rgba(149, 88, 19, .2); }
.item-reaction-product .shop-image { width: 100%; height: 100%; object-fit: cover; }
.item-reaction-emoji { display: block; font-size: 62px; line-height: 94px; }
.item-reaction-pet { width: 174px; height: 174px; margin: -2px auto -10px; animation: petItemHappy .95s ease-in-out infinite alternate; }
.item-reaction-pet img, .item-reaction-pet svg { width: 100%; height: 100%; object-fit: contain; }
.item-reaction-text { font-size: 20px; font-weight: 800; color: #A95322; margin: 4px 0 12px; }
.item-reaction-close { width: 100%; padding: 12px; border-radius: 999px; background: linear-gradient(135deg, #FFB43C, #E87935); color: #fff; font-size: 16px; font-weight: 800; }
@keyframes sparklePop { 0%,100% { transform: scale(.9); opacity:.6; } 50% { transform: scale(1.12); opacity:1; } }
@keyframes petItemHappy { from { transform: translateY(0) rotate(-3deg) scale(1); } to { transform: translateY(-10px) rotate(3deg) scale(1.06); } }
.pulse-glow { animation: pulseGlow 1.5s ease-in-out infinite; transform-origin: center; }
@keyframes pulseGlow {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.15); }
}
.star-twinkle { animation: starTwinkle 1.2s ease-in-out infinite; transform-origin: center; }
@keyframes starTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.3) rotate(180deg); }
}
.sparkle { animation: sparkle 1.5s ease-in-out infinite; }
@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
.pet-stats { display: flex; justify-content: center; gap: 16px; margin-top: 10px; }
.pet-stat { text-align: center; }
.pet-stat .stat-label { font-size: 14px; color: var(--text-light); }
.pet-stat .stat-value { font-size: 22px; font-weight: 700; }
.progress-bar {
  width: 100%; height: 12px; background: #eee; border-radius: 6px; overflow: hidden; margin-top: 4px;
}
.progress-bar .fill { height: 100%; background: var(--primary); border-radius: 6px; transition: width 0.5s; }
.progress-bar .fill.satiety { background: var(--success); }
.progress-bar .fill.happy { background: #FFD700; }
.pet-care-tip { max-width: 420px; margin: 8px auto 2px; padding: 8px 10px; border-radius: 10px; background: #EEF8FF; color: #477090; font-size: 12px; font-weight: 700; line-height: 1.5; }
.pet-gear-area { margin: 10px auto 0; max-width: 340px; padding: 9px 10px; border: 1px solid #F0D5A8; border-radius: 13px; background: #FFF9EF; }
.pet-gear-title { font-size: 12px; font-weight: 800; color: #A96323; margin-bottom: 5px; }
.pet-gear-empty { font-size: 12px; color: var(--text-light); }
.pet-gear-dock { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.pet-gear-chip { display: flex; align-items: center; gap: 4px; padding: 3px 7px 3px 3px; border-radius: 999px; background: #fff; border: 1px solid #F0D5A8; font-size: 11px; color: #75461E; }
.pet-gear-chip span { width: 26px; height: 26px; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #FFF7E8; }
.pet-gear-chip .shop-image { width: 100%; height: 100%; object-fit: cover; }
.daily-reward-board { margin: 12px auto 0; max-width: 340px; padding: 11px; border-radius: 14px; background: linear-gradient(135deg, #FFF8E7, #FFF0D0); border: 2px solid #F4D28C; text-align: left; }
.daily-reward-board.completed { border-color: #F4B529; box-shadow: 0 3px 12px rgba(244,181,41,.22); }
.daily-reward-title { font-size: 14px; font-weight: 800; color: #A15E16; text-align: center; }
.daily-reward-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0; }
.daily-reward-steps span { padding: 3px 7px; border-radius: 999px; background: #F3E4CC; color: #987853; font-size: 11px; font-weight: 700; }
.daily-reward-steps span.done { background: #DDF2DE; color: #31834A; }
.daily-reward-steps span.done::before { content: '✓ '; }
.daily-reward-note { font-size: 11px; line-height: 1.45; color: #87633C; text-align: center; }

/* ---- 食物仓库 ---- */
.food-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.food-item {
  background: var(--bg-card); border-radius: var(--radius-sm); padding: 12px 8px;
  text-align: center; cursor: pointer; transition: all 0.2s; position: relative;
  border: 2px solid var(--border);
}
.food-item:active { transform: scale(0.9); }
.food-item .food-svg { width: 56px; height: 56px; margin: 0 auto; }
.food-item .food-svg img { width: 56px; height: 56px; display: block; object-fit: cover; border-radius: 12px; }
.food-item .food-name { font-size: 13px; font-weight: 600; margin-top: 4px; }
.food-item .food-count {
  position: absolute; top: 4px; right: 4px;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
  border-radius: 10px; padding: 1px 8px; min-width: 22px; text-align: center;
}
.food-item.empty { opacity: 0.4; }

/* 高级食物样式 */
.food-item.premium {
  border: 2px solid #FFD700;
  background: linear-gradient(135deg, #FFFDE7, #FFF8E1);
  box-shadow: var(--premium-glow);
}
.food-item.premium::before {
  content: '⭐'; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: 16px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  animation: sparkle 2s infinite;
}
.food-item.premium .food-svg { animation: shimmer 3s infinite; }
@keyframes sparkle { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.3); } }
@keyframes shimmer {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255,215,0,0.4)); }
  50% { filter: drop-shadow(0 0 8px rgba(255,215,0,0.8)); }
}

/* 食物等级标签 */
.food-tier-label {
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px;
  display: inline-block; margin-top: 2px;
}
.food-tier-normal { background: #E0E0E0; color: #616161; }
.food-tier-premium { background: #FFD700; color: #5D4037; }

/* ---- 喂食动画 ---- */
.feeding-layer {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200; pointer-events: none;
}
.feeding-food {
  position: fixed; width: 60px; height: 60px;
  animation: flyToPet 1.2s ease-in forwards;
  z-index: 201;
}
@keyframes flyToPet {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(0.3) rotate(360deg) translate(var(--tx, 0), var(--ty, 0)); opacity: 0; }
}

/* ---- 成长图鉴 ---- */
.stage-cards { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; }
.stage-card {
  flex: 0 0 140px; background: var(--bg-card); border-radius: var(--radius);
  padding: 14px; text-align: center; border: 3px solid var(--border);
  transition: all 0.3s;
}
.stage-card.unlocked { border-color: var(--primary); box-shadow: var(--premium-glow); }
.stage-card.current { border-color: var(--success); transform: scale(1.05); }
.stage-card.locked { opacity: 0.5; filter: grayscale(1); }
.stage-card .stage-svg { width: 80px; height: 80px; margin: 0 auto; }
.stage-card .stage-name { font-size: 16px; font-weight: 700; margin-top: 4px; }
.stage-card .stage-desc { font-size: 12px; color: var(--text-light); }

/* ---- 打卡日历 ---- */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-header { text-align: center; font-size: 13px; font-weight: 600; color: var(--text-light); padding: 4px; }
.calendar-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; border-radius: 8px; background: #F5F5F5;
  cursor: pointer; transition: all 0.2s;
}
.calendar-day:active { transform: scale(0.9); }
.calendar-day.full { background: var(--success); color: #fff; }
.calendar-day.partial { background: #FFE0B2; color: var(--primary-dark); }
.calendar-day.leave { background: #E3F2FD; color: var(--info); }
.calendar-day.future { opacity: 0.3; }
.calendar-day.today { border: 3px solid var(--primary); }

/* ---- 积分商城 ---- */
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shop-item {
  background: var(--bg-card); border-radius: var(--radius-sm); padding: 12px;
  text-align: center; border: 2px solid var(--border); transition: all 0.2s;
}
.shop-item.owned { border-color: var(--success); }
.shop-item .shop-preview { width: 80px; height: 80px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #FFF8EC; }
.shop-image, .food-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.food-emoji-fallback { font-size: 38px; }
.shop-item .shop-name { font-size: 14px; font-weight: 600; margin-top: 4px; }
.shop-intro { font-size: 13px; color: var(--text-light); text-align: center; margin: -4px 0 12px; }
.shop-item .shop-desc { min-height: 30px; margin-top: 3px; font-size: 11px; line-height: 1.35; color: var(--text-light); }
.shop-item .shop-price {
  font-size: 16px; font-weight: 700; color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.shop-item .shop-price img { width:20px; height:20px; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.shop-points-total { display:inline-flex; align-items:center; gap:4px; font-size:22px; color:var(--primary-dark); vertical-align:middle; }
.shop-points-total img { width:26px; height:26px; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.shop-item .shop-btn {
  margin-top: 6px; padding: 6px 16px; font-size: 14px; border-radius: 8px;
  background: var(--primary); color: #fff; font-weight: 600;
}
.shop-item .shop-btn:disabled { background: #ccc; }
.shop-item.locked { opacity: 0.5; }
.shop-item.locked .lock-icon { font-size: 32px; }

/* ---- 成就墙 ---- */
.achievement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.achievement-item {
  background: var(--bg-card); border-radius: var(--radius-sm); padding: 12px;
  text-align: center; border: 2px solid var(--border); transition: all 0.3s;
}
.achievement-item.unlocked { border-color: var(--primary); box-shadow: var(--premium-glow); }
.achievement-item.locked { opacity: 0.4; filter: grayscale(1); }
.achievement-item .ach-icon { font-size: 32px; }
.achievement-item .ach-name { font-size: 13px; font-weight: 600; }
.achievement-item .ach-desc { font-size: 11px; color: var(--text-light); }

/* ---- 覆盖层/弹窗 ---- */
.overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4); z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: #fff; border-radius: var(--radius-lg); padding: 24px;
  max-width: 400px; width: 100%; max-height: 80vh; overflow-y: auto;
  animation: modalIn 0.3s;
}
@keyframes modalIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-title { font-size: var(--font-size-xl); font-weight: 700; text-align: center; margin-bottom: 16px; }
.modal-close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
  border-radius: 50%; background: #f0f0f0; font-size: 20px; display: flex;
  align-items: center; justify-content: center;
}

/* ---- Toast ---- */
.toast {
  position: fixed; bottom: calc(var(--nav-h) + 20px); left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.8); color: #fff; padding: 10px 24px; border-radius: 24px;
  font-size: 16px; z-index: 300; animation: toastIn 0.3s, toastOut 0.3s 2s forwards;
  white-space: nowrap;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-50%) translateY(20px); } }

/* ---- 看图写话 ---- */
.pic-write-svg { width: 100%; max-width: 320px; margin: 0 auto; display: block; border-radius: var(--radius-sm); }
.pic-write-photo {
  width: 100%; max-width: 640px; aspect-ratio: 3 / 2; object-fit: cover;
  margin: 0 auto; display: block; border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(55, 45, 35, 0.16);
}
.pic-write-prompt { font-size: 17px; text-align: center; margin: 10px 0; }
.pic-write-essay {
  font-size: 17px; line-height: 1.8; padding: 14px; background: var(--bg-active);
  border-radius: var(--radius-sm); margin-top: 10px;
}

/* ---- 应用题 ---- */
.word-problem { font-size: 18px; line-height: 1.8; margin: 12px 0; }
.word-problem-input {
  width: 100px; height: 48px; font-size: 22px; text-align: center;
  border: 3px solid var(--primary); border-radius: 8px; margin-top: 8px;
}

/* ---- 连续打卡大字显示 ---- */
.streak-display {
  text-align: center; margin: 10px 0;
}
.streak-big-number { font-size: 56px; font-weight: 800; color: var(--danger); }
.streak-label { font-size: 16px; color: var(--text-light); }

/* ---- 请假/补卡 ---- */
.leave-controls { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }

/* ---- 模块完成进度 ---- */
.module-progress {
  display: flex; gap: 4px; justify-content: center; margin-bottom: 14px;
}
.progress-dot {
  width: 14px; height: 14px; border-radius: 50%; background: #ddd; transition: all 0.3s;
}
.progress-dot.done { background: var(--success); }

/* ---- 答题反馈 ---- */
.answer-feedback {
  text-align: center; font-size: 28px; font-weight: 700; margin: 10px 0;
  animation: bounceIn 0.4s;
}
.answer-correct { color: var(--success); }
.answer-wrong { color: var(--danger); }

/* ---- 英语匹配游戏 ---- */
.match-game { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.match-item {
  padding: 16px; text-align: center; border-radius: var(--radius-sm);
  border: 3px solid var(--border); font-size: 18px; font-weight: 600;
  background: var(--bg-card); transition: all 0.2s;
}
.match-item:active { transform: scale(0.92); }
.match-item.selected { background: var(--primary-light); border-color: var(--primary); }
.match-item.matched { background: #E8F5E9; border-color: var(--success); opacity: 0.6; }
.match-item.wrong-flash { background: #FFEBEE; border-color: var(--danger); animation: shake 0.4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---- 弹性布局辅助 ---- */
.row { display: flex; gap: 10px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 10px; }
.center { text-align: center; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.gap-sm { gap: 6px; }

/* ---- 滚动优化 ---- */
#mainContent { -webkit-overflow-scrolling: touch; }
.stage-cards::-webkit-scrollbar, .shop-grid::-webkit-scrollbar { height: 4px; }
.stage-cards::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 2px; }

/* ---- 全屏奖励展示弹窗 ---- */
@keyframes rewardContainerIn {
  0% { opacity: 0; backdrop-filter: blur(0); }
  100% { opacity: 1; backdrop-filter: blur(4px); }
}
@keyframes rewardContainerOut {
  0% { opacity: 1; backdrop-filter: blur(4px); }
  100% { opacity: 0; backdrop-filter: blur(0); }
}
@keyframes rewardPopupIn {
  0% { opacity: 0; transform: scale(0.3) translateY(100px); }
  60% { opacity: 1; transform: scale(1.1) translateY(-10px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes rewardBadgePop {
  0% { opacity: 0; transform: scale(0) rotate(-180deg); }
  60% { transform: scale(1.3) rotate(20deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(-100px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg); }
}
@keyframes foodFloat {
  0% { opacity: 0; transform: translateY(50px) scale(0.5); }
  50% { transform: translateY(-15px) scale(1.1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pointsFloat {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes stampAppear {
  0% { opacity: 0; transform: scale(3) rotate(-30deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

#rewardModal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: rewardContainerIn 0.3s ease-out;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#rewardModal.closing { animation: rewardContainerOut 0.4s ease-in forwards; }
.reward-card {
  background: linear-gradient(160deg, #FFFDF8 0%, #FBF1DD 100%);
  border-radius: 20px;
  padding: 34px 24px 26px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(80,40,20,0.35);
  border: 3px solid var(--seal-red);
  outline: 6px solid #FFF7E8;
  outline-offset: -9px;
  animation: rewardPopupIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.reward-card::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent, #FFD700 30deg, transparent 60deg, #FFA500 90deg, transparent 120deg, #FFD700 150deg, transparent 180deg, #FFA500 210deg, transparent 240deg);
  animation: spinSlow 4s linear infinite;
  opacity: 0.25;
  z-index: 0;
}
.reward-card > * { position: relative; z-index: 1; }
.reward-badge {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 30px;
  font-size: 22px;
  font-family: var(--font-cn);
  font-weight: 800;
  margin-bottom: 14px;
  animation: rewardBadgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.reward-badge.premium { background: linear-gradient(135deg, #FFD700, #FFA500); color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
.reward-badge.normal { background: linear-gradient(135deg, #FFE082, #FFB74D); color: #fff; }
.reward-badge.slow { background: linear-gradient(135deg, #B0BEC5, #78909C); color: #fff; }
.reward-pet {
  width: 150px; height: 150px;
  margin: 10px auto;
  animation: petBounce 1.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(120,80,40,0.25));
}
.reward-pet svg, .reward-pet img { width: 100%; height: 100%; }
.reward-foods {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin: 16px 0;
}
.reward-food-item {
  width: 72px; height: 72px;
  background: rgba(255,248,231,0.95);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #FFE0B2;
  animation: foodFloat 0.6s ease-out backwards;
}
.reward-food-item.premium {
  border-color: #FFD700;
  box-shadow: 0 0 12px rgba(255,215,0,0.6);
  background: linear-gradient(135deg, #FFFFFF, #FFF8DC);
}
.reward-food-item svg, .reward-food-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; }
.reward-points {
  display: inline-block;
  background: linear-gradient(135deg, #FFE0B2, #FFCC80);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 18px; font-weight: 700;
  color: #E65100;
  margin: 10px 0;
  animation: pointsFloat 0.8s ease-out 0.4s backwards;
}
.reward-tip { margin-top: 14px; font-size: 15px; color: #7F8C8D; font-weight: 600; }
.reward-tip.good { color: #26C281; }
.reward-tip.bad { color: #E74C3C; }
.reward-close-btn {
  margin-top: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  padding: 14px 32px;
  border-radius: 30px;
  font-size: 18px; font-weight: 700;
  width: 100%;
  box-shadow: 0 6px 20px rgba(255,159,67,0.4);
}
.reward-close-btn:active { transform: scale(0.97); }
.reward-countdown { margin-top: 10px; font-size: 12px; color: #A16A2D; font-weight: 700; }
.reward-stamp {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--seal-red);
  color: #fff;
  font-size: 12px; font-weight: 800;
  padding: 8px 10px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.65);
  transform: rotate(-8deg);
  animation: stampAppear 0.5s ease-out 0.3s backwards;
  box-shadow: 0 4px 12px rgba(178,58,44,0.4);
  letter-spacing: 1px; line-height: 1.3;
}
.reward-stamp.good {
  background: #26C281;
  box-shadow: 0 4px 12px rgba(38,194,129,0.4);
}
.confetti {
  position: absolute;
  width: 12px; height: 12px;
  pointer-events: none;
  animation: confettiFall 2s ease-in forwards;
  z-index: 2;
}

/* ---- 首次领养动画 ---- */
#adoptLayer {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(255, 248, 230, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: rewardContainerIn 0.4s ease-out;
}
#adoptLayer .adopt-skip {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,0.85); border: 2px solid var(--border);
  border-radius: 50%; width: 36px; height: 36px; font-size: 18px;
  color: var(--text-light); cursor: pointer; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
#adoptLayer.closing { animation: rewardContainerOut 0.45s ease-in forwards; }
.adopt-card {
  background: linear-gradient(160deg, #FFFDF8, #FBF1DD);
  border: 3px solid var(--seal-red); outline: 6px solid #FFF7E8; outline-offset: -9px;
  border-radius: 20px; padding: 28px 22px; max-width: 360px; width: 100%;
  text-align: center; box-shadow: 0 20px 60px rgba(80,40,20,0.4);
  animation: rewardPopupIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.adopt-pet {
  width: 180px; height: 180px; margin: 0 auto 6px;
  animation: adoptDrop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 10px 14px rgba(120,80,40,0.3));
}
.adopt-pet svg { width: 100%; height: 100%; }
.adopt-pet-happy { animation: petBounce 0.6s ease-out 2; }
@keyframes adoptDrop {
  0% { transform: translateY(-260px) scale(0.4) rotate(-12deg); opacity: 0; }
  60% { transform: translateY(12px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.adopt-title {
  font-size: 22px; font-weight: 800; color: var(--seal-red);
  font-family: var(--font-cn); margin: 6px 0;
}
.adopt-text { font-size: 15px; color: var(--text-main); line-height: 1.9; margin-bottom: 16px; }
.adopt-name { color: var(--primary-dark); font-weight: 800; font-family: var(--font-cn); }
.adopt-card .btn { width: 100%; }


/* ---- 计时器 3-2-1 倒计时 ---- */
.countdown-overlay {
  position: fixed; inset: 0; z-index: 2600;
  background: rgba(255,248,235,0.82);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.countdown-num {
  font-family: var(--font-cn); font-weight: 800;
  font-size: 110px; color: var(--seal-red);
  text-shadow: 0 6px 18px rgba(184,58,44,0.25);
  line-height: 1;
}
.countdown-num.countdown-text { font-size: 58px; color: var(--primary-dark); }
.countdown-num.pop { animation: cdPop 0.8s ease-out; }
@keyframes cdPop {
  0% { transform: scale(0.2); opacity: 0; }
  30% { transform: scale(1.12); opacity: 1; }
  60% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- 移动端声音锁定提示 ---- */
.audio-lock-hint {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 5000;
  background: linear-gradient(135deg, #4A3B2A, #6B4423);
  color: #FFE4B5;
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 14px; font-weight: 600;
  font-family: var(--font-cn);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  animation: lockHintPulse 1.6s ease-in-out infinite;
  border: 1.5px solid rgba(255,228,181,0.4);
  max-width: 92vw;
}
.audio-lock-hint.hidden { display: none; }
.audio-lock-hint .lock-icon { font-size: 16px; }
@keyframes lockHintPulse {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
  50%      { transform: translateX(-50%) scale(1.04); box-shadow: 0 6px 20px rgba(0,0,0,0.32); }
}

/* =====================================================
   萨摩耶冒险训练营：在不改变学习流程的前提下，统一为更适合小学男生的任务型视觉。
   ===================================================== */
body {
  background:
    radial-gradient(circle at 11% 14%, rgba(20,121,209,.13) 0 1px, transparent 1.5px) 0 0/22px 22px,
    linear-gradient(135deg, rgba(20,121,209,.045) 25%, transparent 25%) 0 0/40px 40px,
    linear-gradient(45deg, rgba(20,121,209,.035) 25%, transparent 25%) 0 0/40px 40px,
    #EEF2F2;
}
.brand-corner {
  background: linear-gradient(155deg, #1479D1, #062B54);
  border-right-color: rgba(255,255,255,.15); border-bottom-color: rgba(255,255,255,.12);
  box-shadow: 2px 3px 12px rgba(4,27,53,.34);
}
.brand-corner::before { content:'✦'; position:absolute; top:7px; right:7px; font-size:9px; color:#F8C54C; }
.brand-corner-text { font-size:17px; letter-spacing:0; }
#topBar {
  background:
    radial-gradient(circle at 82% 12%, rgba(112,192,255,.22) 0 1px, transparent 1.5px) 0 0/20px 20px,
    linear-gradient(105deg, #062B54 0%, #0A4175 58%, #126FAF 100%);
  box-shadow: 0 4px 14px rgba(4,30,61,.28);
}
#topBar::after {
  content:''; position:absolute; right:0; bottom:0; left:0; height:2px;
  background:linear-gradient(90deg, transparent, #4DB6F5 35%, #F6B448 70%, transparent);
  opacity:.9;
}
.top-date { font-weight:800; letter-spacing:.2px; }
.streak-badge, .points-badge {
  background:transparent; border:none; box-shadow:none; padding:3px 0 3px 9px;
  border-left:1px solid rgba(201,230,255,.28); border-radius:0;
}
.mini-pet {
  width:42px; height:42px; background:transparent; border:none; border-radius:0;
  filter:drop-shadow(0 3px 4px rgba(0,20,45,.3));
}
.mini-pet::before {
  content:''; position:absolute; width:24px; height:5px; left:10px; bottom:0;
  border-radius:50%; background:rgba(91,184,236,.38); filter:blur(2px); z-index:-1;
}
.top-left, .top-right { gap:7px; }
.top-date { padding-right:1px; }
.points-coin-icon { width:22px; height:22px; }
.mini-satiety { background:rgba(0,18,40,.34); }

#sideNav {
  background:linear-gradient(180deg, #092F59 0%, #06284D 100%);
  border-right-color:rgba(255,255,255,.12); box-shadow:3px 0 16px rgba(4,29,57,.22);
}
.nav-item { color:rgba(226,241,255,.66); border:1px solid transparent; }
.nav-item.active {
  color:#fff; background:linear-gradient(135deg, #F17A1F, #DB5012);
  box-shadow:0 5px 10px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.22);
}
.nav-item.active::after { display:none; }
.nav-item.completed .nav-icon::after { background:#82BF42; right:4px; border:1px solid #fff; }

#mainContent { padding-top:calc(var(--top-h) + 18px); }
.module-header { position:relative; padding:8px 8px 12px; margin-bottom:12px; }
.module-header::before, .module-header::after { content:'✦'; color:#E7A327; font-size:14px; margin:0 7px; }
.module-header h1 { color:#08325E; text-shadow:none; font-weight:850; letter-spacing:.2px; }
.module-header .subtitle { color:#4B6884; font-weight:600; }

.card {
  border:1px solid rgba(120,150,177,.3); box-shadow:0 8px 20px rgba(8,50,94,.1), inset 0 1px rgba(255,255,255,.9);
  background:linear-gradient(155deg, rgba(255,255,255,.98), rgba(250,252,253,.98));
}
.card-title { color:#07335F; font-family:var(--font-cn); font-weight:850; border-left-color:#F17118; }
.card-title .icon { filter:drop-shadow(0 2px 0 rgba(8,50,94,.1)); }
.btn { border-radius:14px; box-shadow:0 4px 0 rgba(4,31,58,.16); font-weight:800; }
.btn:active { transform:translateY(3px) scale(.98); box-shadow:0 1px 0 rgba(4,31,58,.16); }
.btn-primary { background:linear-gradient(135deg, #F5812A, #DB5612); }
.btn-primary:hover { background:linear-gradient(135deg, #FF953B, #E65A12); }
.btn-success { background:linear-gradient(135deg, #76B63D, #478B2C); }
.btn-info { background:linear-gradient(135deg, #268CE1, #0C64B1); }
.btn-warning { background:linear-gradient(135deg, #F0B23C, #D78916); }
.btn-danger { background:linear-gradient(135deg, #E55E4F, #B63930); }

.task-card {
  position:relative; overflow:hidden; border:1px solid #BCD7EB; border-left:6px solid #1C89D5;
  background:linear-gradient(132deg, #FFFFFF 0%, #F6FBFF 72%, #E7F4FC 100%);
  box-shadow:0 7px 16px rgba(8,65,110,.1);
}
.task-card::after { content:'⌁'; position:absolute; right:10px; bottom:-28px; color:#B9DDF1; font-size:100px; opacity:.34; transform:rotate(-18deg); pointer-events:none; }
.task-card.done { border-left-color:#71A83E; opacity:1; background:linear-gradient(132deg, #FFFFFF, #F2F9EB); }
.task-card .task-top, .task-card > :not(.task-remove) { position:relative; z-index:1; }
.task-card .task-name { color:#123D67; }
.task-card .task-time { color:#426986; background:#E3F2FC; border:1px solid #C8E2F2; font-weight:700; }
.timer-display { color:#E45B16; text-shadow:0 2px 0 rgba(255,255,255,.8); }
.timer-display.running { color:#1479D1; }
.task-remove { color:#B74235; background:#FFF5F2; border-color:#F1C8C1; }
.custom-task-card { border-left-color:#6878C3; background:linear-gradient(135deg, #FBFBFF, #F3F5FF); }
.custom-task-input, .custom-task-duration input { background:#fff; border-color:#C8D8E5; color:#15314F; }
.custom-task-help { color:#58718A; }

.module-progress { gap:7px; }
.progress-dot { width:15px; height:15px; background:#C7D7E3; border:2px solid #fff; box-shadow:0 1px 3px rgba(6,43,84,.18); }
.progress-dot.done { background:#75B63D; }
.reward-result { border:1px solid rgba(93,158,52,.22); }
.reward-early { background:#ECF7DF; color:#397C26; }
.reward-ontime { background:#E8F4FD; color:#1769AB; }
.reward-slow { background:#FFF4E8; color:#B86615; }

.reading-title, .adopt-title { color:#07335F; text-shadow:none; }
.reading-content, .pic-write-essay { background:#EEF7FD; border:1px dashed #B7D7EB; }
.char-cell { border-color:#C9DCE9; background:linear-gradient(145deg, #fff, #F4FAFE); }
.char-cell.completed { background:#EFF8E5; border-color:#78AE45; }
.char-detail .stroke-area, .hanzi-stage { background:#F8FCFF; border-color:#BFD9EA; }
.match-item { border-color:#C5DAE8; background:#FCFEFF; }
.match-item.selected { background:#E3F2FC; border-color:#1F82CC; }

.english-single-letter { background:linear-gradient(145deg, #E8F6FF, #CFEAFF); border-color:#4CA3E6; color:#0A5FAD; box-shadow:0 7px 0 rgba(18,111,181,.14); }
.english-pronounce-action { background:linear-gradient(135deg, #147FD2, #063D76); }
.english-stroke-action { background:linear-gradient(135deg, #F07822, #B9460B); }
.english-speaking-sentence { border-color:#B7D88D; background:#F1F8E8; }
.word-grid.english-core-words { grid-template-columns:repeat(3, minmax(0, 1fr)); }

.pet-stage-name { color:#07335F; font-weight:850; }
.pet-walk-track {
  border-radius:22px; border:2px solid #154F82;
  background:
    radial-gradient(circle at 22% 17%, rgba(255,255,255,.8) 0 1px, transparent 1.5px) 0 0/20px 20px,
    linear-gradient(165deg, #105485 0%, #0A315E 64%, #09294D 100%);
  box-shadow:inset 0 -45px 0 rgba(1,23,46,.22), 0 10px 20px rgba(5,44,81,.2);
}
.pet-walk-track::before { content:'⌁  ⌁  ⌁'; position:absolute; left:0; right:0; bottom:16px; color:rgba(142,207,239,.3); font-size:42px; letter-spacing:26px; white-space:nowrap; overflow:hidden; }
.snack-area { background:linear-gradient(165deg, #FFFFFF, #EFF7FC); border-color:#BDD9EA; }
.snack-label { color:#0B538B; }
.snack-item { border-color:#BED8E8; background:#fff; box-shadow:0 3px 7px rgba(8,50,94,.12); }
.snack-count { background:#F17017; }
.daily-reward-board { border-color:#BED9EA !important; background:linear-gradient(135deg, #F8FCFF, #ECF6FD) !important; }

.streak-big-number { color:#F17017; }
.reward-close-btn { background:linear-gradient(135deg, #F5812A, #DB5612); box-shadow:0 6px 20px rgba(225,97,19,.32); }
.reward-stamp { background:#F17017; box-shadow:0 4px 12px rgba(224,100,25,.35); }
.adopt-card { background:linear-gradient(160deg, #FFFFFF, #EDF7FD); border-color:#156AA9; outline-color:#F5FBFF; box-shadow:0 20px 60px rgba(5,42,77,.38); }
#adoptLayer { background:rgba(6,43,84,.62); }
.countdown-overlay { background:rgba(6,43,84,.78); }
.countdown-num { color:#FF9A43; text-shadow:0 6px 18px rgba(0,0,0,.28); }
.countdown-num.countdown-text { color:#fff; }
.audio-lock-hint { background:linear-gradient(135deg,#07325F,#0B609E); color:#EAF6FF; border-color:rgba(156,217,255,.42); }

/* 装备展示：让写实商品图融进宠物场景，去掉图片自带的浅白方底。 */
.pet-wear-toy {
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.pet-wear-toy .shop-image {
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 3px 3px rgba(1, 24, 47, .42));
}
.pet-gear-area {
  background: linear-gradient(135deg, #EAF6FD, #D8EDF9);
  border-color: #A9D5EB;
}
.pet-gear-title { color: #0A578F; }
.pet-gear-chip {
  background: linear-gradient(135deg, #0E609A, #0A3E6C);
  border-color: rgba(174, 222, 247, .7);
  color: #F4FBFF;
  box-shadow: 0 3px 7px rgba(5, 52, 92, .16);
}
.pet-gear-chip span {
  background: radial-gradient(circle at 36% 28%, #87CFF3, #287EBA);
}
.pet-gear-chip .shop-image {
  mix-blend-mode: multiply;
}
.item-reaction-product .shop-image {
  mix-blend-mode: multiply;
}
.pet-display { isolation: isolate; }
.pet-display > svg { position: relative; z-index: 1; }
.pet-wear-collar-star {
  border-color: #0B6E80;
  box-shadow: 0 2px 0 #55C5CE, inset 0 1px 2px rgba(255,255,255,.58);
}
.pet-wear-collar-star::after {
  content: '★';
  color: #FFD45B;
  text-shadow: 0 1px 2px #775300;
}
.pet-wear-vest {
  width: 102px; height: 66px; left: 50%; top: 56%; transform: translateX(-48%) rotate(-3deg);
  border: 5px solid #0A3C70; border-bottom-width: 12px; border-radius: 42% 42% 34% 30%;
  background: linear-gradient(135deg, #1C5A98, #0B315D);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.24), 0 3px 6px rgba(0,28,66,.22);
}
.pet-wear-vest::after {
  content: '▣  ▣'; position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  color: #FF9B38; font-size: 16px; letter-spacing: 18px; white-space: nowrap;
}
.pet-wear-care {
  right: 12%; top: 20%; color: #7CE4FF; font-size: 26px;
  text-shadow: 0 0 8px #1AA8E7; animation: sparklePop 1.2s ease-in-out infinite;
}
.pet-wear-bed {
  width: 144px; height: 92px; left: 50%; bottom: 2px; z-index: 0; transform: translateX(-50%);
  overflow: visible;
}
.pet-wear-bed .shop-image { width: 100%; height: 100%; object-fit: contain; }
.data-controls {
  margin-top: 16px; padding: 12px; border: 1px solid #BBD9EA; border-radius: 13px;
  background: linear-gradient(135deg, #F3FAFF, #E7F4FC); text-align: center;
}
.data-controls-note { color: #315D80; font-size: 12px; line-height: 1.5; }
.data-controls-actions { display: flex; justify-content: center; gap: 9px; margin-top: 9px; }
.data-controls-actions .btn { min-width: 122px; padding: 9px 10px; color: #0B5A95; border: 1px solid #92C7E5; background: #fff; }
.reward-pet-display { position: relative; width: 100%; height: 100%; isolation: isolate; }
.reward-pet-display > svg { position: relative; z-index: 1; width: 100%; height: 100%; }
.reward-pet .pet-equip-layer-reward,
.item-reaction-pet .pet-equip-layer-reward {
  position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; z-index: 2;
  transform: translate(-50%, -50%) scale(.59); transform-origin: center; pointer-events: none;
}
.item-reaction-pet .pet-equip-layer-reward { transform: translate(-50%, -50%) scale(.67); }

@media (max-width:430px) {
  .task-card { padding:16px; }
  .task-card .task-name { font-size:19px; }
  .task-card .task-time { font-size:13px; padding:4px 8px; }
  .module-header h1 { font-size:28px; }
  .data-controls-actions .btn { min-width: 0; flex: 1; }
}