/* ==================== 采采的学习工作台 - 样式 ==================== */

:root {
  --blue: #4BA7CA;
  --blue-light: #6BC5E0;
  --blue-dark: #3A8AA8;
  --blue-pale: #E3F4FA;
  --pink: #FFB6C1;
  --pink-light: #FFD4DC;
  --pink-dark: #E89DA8;
  --pink-pale: #FFF0F3;
  --bg: #F0F8FF;
  --card: #FFFFFF;
  --text: #3A4A5A;
  --text-light: #7A8A9A;
  --success: #66BB6A;
  --warn: #FFA726;
  --gold: #FFD700;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 4px 14px rgba(75,167,202,0.12);
  --shadow-lg: 0 8px 28px rgba(75,167,202,0.18);
  --tabbar-h: 68px;
  --topbar-h: 60px;
  --max-w: 480px;
}

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

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}

/* ==================== 顶部状态栏 ==================== */
#topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: #fff;
  flex-shrink: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top);
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
}

.pet-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.pet-emoji-mini {
  font-size: 32px;
  animation: bob 2s ease-in-out infinite;
}

.pet-info-mini {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 1.3;
}

.scores {
  display: flex;
  gap: 6px;
}

.score-pill {
  background: rgba(255,255,255,0.25);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
}

.score-pill .ico { font-size: 14px; }

/* ==================== 主内容区 ==================== */
#content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--tabbar-h) + 16px);
}

.page {
  display: none;
  padding: 16px;
  animation: fadeIn 0.3s ease;
}

.page.active {
  display: block;
}

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

@keyframes bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ==================== 通用组件 ==================== */
.page-title {
  font-size: 22px;
  text-align: center;
  margin: 10px 0 18px;
  color: var(--blue-dark);
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 18px 0 10px;
}

.btn-big {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  padding: 16px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: 12px;
  font-family: inherit;
}

.btn-big:active {
  transform: scale(0.95);
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: #fff;
  box-shadow: 0 4px 12px rgba(75,167,202,0.35);
}

.btn-pink {
  background: linear-gradient(135deg, var(--pink), var(--pink-light));
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,182,193,0.4);
}

.btn-blue {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  color: #fff;
  box-shadow: 0 4px 12px rgba(75,167,202,0.3);
}

.btn-green {
  background: linear-gradient(135deg, #5BB85B, #7AC97A);
  color: #fff;
  box-shadow: 0 4px 12px rgba(91,184,91,0.3);
}

.btn-outline {
  background: #fff;
  color: var(--blue-dark);
  border: 2px solid var(--blue-light);
}

.btn-small {
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s;
  font-family: inherit;
}

.btn-small:active { transform: scale(0.92); }

.btn-small.btn-blue { background: var(--blue); color: #fff; }
.btn-small.btn-pink { background: var(--pink); color: #fff; }
.btn-small.btn-green { background: var(--success); color: #fff; }
.btn-small.btn-gray { background: #E0E8EE; color: var(--text-light); }

/* ==================== 首页 ==================== */
.welcome-bar {
  text-align: center;
  padding: 10px 0 6px;
}

.welcome-bar h2 {
  font-size: 24px;
  color: var(--blue-dark);
}

.today-date {
  font-size: 14px;
  color: var(--text-light);
  margin-top: 4px;
}

.week-calendar {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin: 14px 0;
}

.week-day {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  font-size: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}

.week-day .day-label { color: var(--text-light); font-size: 11px; }
.week-day .day-num { font-size: 16px; font-weight: 700; margin-top: 2px; }
.week-day.checked { background: linear-gradient(135deg, var(--blue), var(--blue-light)); color: #fff; }
.week-day.checked .day-label { color: rgba(255,255,255,0.8); }
.week-day.today { border: 2px solid var(--pink); }
.week-day.checked .day-num::after { content: " ✓"; }

.today-progress {
  background: var(--blue-pale);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--blue-dark);
}

.today-tasks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s;
}

.task-card:active { transform: scale(0.97); }

.task-card.done {
  opacity: 0.6;
}

.task-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.task-info {
  flex: 1;
}

.task-name {
  font-size: 16px;
  font-weight: 700;
}

.task-desc {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
}

.task-status {
  font-size: 20px;
}

.task-reward {
  font-size: 11px;
  color: var(--warn);
  font-weight: 600;
  margin-top: 2px;
}

/* ==================== 学习模块选择 ==================== */
.module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.module-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 12px;
  text-align: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s;
  position: relative;
  overflow: hidden;
}

.module-card:active { transform: scale(0.95); }

.module-card .m-icon {
  font-size: 40px;
  margin-bottom: 8px;
  display: block;
}

.module-card .m-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.module-card .m-progress {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
}

.module-card .m-bar {
  height: 6px;
  background: #EEE;
  border-radius: 3px;
  margin-top: 6px;
  overflow: hidden;
}

.module-card .m-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s;
}

.module-card[data-mod="guoxue"] { background: linear-gradient(180deg, #fff 60%, var(--blue-pale)); }
.module-card[data-mod="guoxue"] .m-bar-fill { background: var(--blue); }
.module-card[data-mod="shizi"] { background: linear-gradient(180deg, #fff 60%, var(--pink-pale)); }
.module-card[data-mod="shizi"] .m-bar-fill { background: var(--pink); }
.module-card[data-mod="math"] { background: linear-gradient(180deg, #fff 60%, #E8F5E9); }
.module-card[data-mod="math"] .m-bar-fill { background: var(--success); }
.module-card[data-mod="english"] { background: linear-gradient(180deg, #fff 60%, #FFF3E0); }
.module-card[data-mod="english"] .m-bar-fill { background: var(--warn); }
.module-card[data-mod="kongbi"] { background: linear-gradient(180deg, #fff 60%, #F3E5F5); }
.module-card[data-mod="kongbi"] .m-bar-fill { background: #AB47BC; }
.module-card[data-mod="piano"] { background: linear-gradient(180deg, #fff 60%, #E0F7FA); }
.module-card[data-mod="piano"] .m-bar-fill { background: #00ACC1; }

/* ==================== 模块学习页 ==================== */
.module-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.module-header h2 {
  font-size: 20px;
  color: var(--blue-dark);
}

.btn-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--blue-pale);
  color: var(--blue-dark);
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.15s;
}

.btn-back:active { transform: scale(0.85); }

.learn-content {
  min-height: 300px;
}

/* 古诗卡片 */
.poem-card {
  background: linear-gradient(180deg, var(--blue-pale), #fff);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.poem-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--blue-dark);
}

.poem-author {
  font-size: 14px;
  color: var(--text-light);
  margin: 6px 0 18px;
}

.poem-lines {
  font-size: 20px;
  line-height: 2.2;
  letter-spacing: 2px;
  color: var(--text);
  font-family: "STKaiti", "KaiTi", serif;
}

.poem-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
}

.poem-index {
  font-size: 14px;
  color: var(--text-light);
}

/* 识字卡片 */
.zi-card {
  background: linear-gradient(180deg, var(--pink-pale), #fff);
  border-radius: var(--radius);
  padding: 30px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.zi-big {
  font-size: 120px;
  line-height: 1;
  color: var(--text);
  font-family: "STKaiti", "KaiTi", serif;
  margin-bottom: 12px;
}

.zi-pinyin {
  font-size: 28px;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 8px;
}

.zi-word {
  font-size: 18px;
  color: var(--text-light);
}

.zi-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

/* 数学题 */
.math-card {
  background: linear-gradient(180deg, #E8F5E9, #fff);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.math-stage {
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: 10px;
}

.math-question {
  font-size: 36px;
  font-weight: 700;
  color: var(--text);
  margin: 16px 0;
}

.math-objects {
  font-size: 40px;
  margin: 16px 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.math-answers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.math-answer {
  background: #fff;
  border: 3px solid var(--blue-light);
  border-radius: var(--radius-sm);
  padding: 18px;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}

.math-answer:active { transform: scale(0.92); }
.math-answer.correct { background: var(--success); color: #fff; border-color: var(--success); }
.math-answer.wrong { background: #EF5350; color: #fff; border-color: #EF5350; }

/* 英语卡片 */
.en-card {
  background: linear-gradient(180deg, #FFF3E0, #fff);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.en-emoji {
  font-size: 80px;
  margin-bottom: 12px;
}

.en-word {
  font-size: 32px;
  font-weight: 700;
  color: var(--warn);
  letter-spacing: 1px;
}

.en-phonetic {
  font-size: 16px;
  color: var(--text-light);
  margin: 6px 0;
}

.en-meaning {
  font-size: 20px;
  color: var(--text);
  margin-top: 8px;
}

/* 控笔 */
.kongbi-canvas-wrap {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  text-align: center;
}

#kongbiCanvas {
  width: 100%;
  max-width: 360px;
  border: 2px dashed var(--blue-light);
  border-radius: var(--radius-sm);
  touch-action: none;
}

.kongbi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 14px 0;
}

.kongbi-item {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 2px solid #EEE;
  background: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}

.kongbi-item:active { transform: scale(0.9); }
.kongbi-item.active { border-color: var(--blue); background: var(--blue-pale); }

/* 钢琴 */
.piano-card {
  background: linear-gradient(180deg, #E0F7FA, #fff);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.piano-emoji-big {
  font-size: 80px;
  margin-bottom: 12px;
}

.piano-timer {
  font-size: 48px;
  font-weight: 700;
  color: var(--blue-dark);
  font-variant-numeric: tabular-nums;
  margin: 14px 0;
}

.piano-status {
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: 14px;
}

.piano-weekly {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 14px 0;
}

.piano-day-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: #EEE;
  color: var(--text-light);
}

.piano-day-dot.done { background: var(--blue); color: #fff; }
.piano-day-dot.today { border: 2px solid var(--pink); }

/* ==================== 宠物页 ==================== */
.pet-stage {
  text-align: center;
  padding: 20px 0;
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pet-big-emoji {
  font-size: 100px;
  cursor: pointer;
  transition: transform 0.2s;
  animation: bob 2.5s ease-in-out infinite;
}

.pet-big-emoji.bounce { animation: bounce 0.5s ease; }

@keyframes bounce {
  0%,100% { transform: scale(1); }
  30% { transform: scale(1.3) rotate(-10deg); }
  60% { transform: scale(0.9) rotate(10deg); }
}

.pet-speech {
  position: absolute;
  top: 0;
  right: 15%;
  background: #fff;
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 14px;
  color: var(--text);
  box-shadow: var(--shadow);
  max-width: 180px;
  opacity: 0;
  transition: opacity 0.3s;
}

.pet-speech.show { opacity: 1; }
.pet-speech::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 20px;
  border: 8px solid transparent;
  border-top-color: #fff;
}

.pet-stats {
  background: #fff;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

.pet-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.pet-name-label {
  font-size: 20px;
  font-weight: 700;
}

.pet-level-badge {
  background: var(--blue);
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
}

.exp-bar-wrap {
  position: relative;
  height: 20px;
  background: #EEE;
  border-radius: 10px;
  overflow: hidden;
}

.exp-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  border-radius: 10px;
  transition: width 0.5s;
  width: 0%;
}

.exp-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  color: var(--text);
  font-weight: 600;
}

.pet-actions {
  display: flex;
  gap: 10px;
}

.pet-actions .btn-big { margin-top: 0; flex: 1; }

.pet-switch-panel {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  justify-content: center;
}

.pet-choice {
  flex: 1;
  background: #fff;
  border-radius: var(--radius);
  padding: 14px 8px;
  text-align: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s;
  border: 3px solid transparent;
}

.pet-choice:active { transform: scale(0.95); }
.pet-choice.active { border-color: var(--blue); background: var(--blue-pale); }

.pet-choice .pc-emoji { font-size: 40px; }
.pet-choice .pc-name { font-size: 13px; margin-top: 4px; font-weight: 600; }

/* ==================== 勋章页 ==================== */
.reward-balance {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

.reward-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reward-item {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow);
}

.reward-item .r-icon { font-size: 32px; }
.reward-item .r-info { flex: 1; }
.reward-item .r-name { font-size: 16px; font-weight: 700; }
.reward-item .r-cost { font-size: 13px; color: var(--warn); margin-top: 2px; }

.reward-history {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reward-history-item {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  box-shadow: var(--shadow);
}

/* ==================== 家长后台 ==================== */
.parent-lock {
  text-align: center;
  padding: 40px 20px;
}

.parent-lock p { font-size: 18px; margin-bottom: 14px; }

.parent-lock input {
  width: 100%;
  max-width: 200px;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--blue-light);
  font-size: 20px;
  text-align: center;
  margin-bottom: 14px;
  font-family: inherit;
}

.parent-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tab-btn {
  flex: 1;
  min-width: 80px;
  border: none;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  background: #E0E8EE;
  color: var(--text-light);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.tab-btn.active { background: var(--blue); color: #fff; }

.parent-content {
  background: #fff;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  min-height: 200px;
}

.parent-report-day {
  border-bottom: 1px solid #EEE;
  padding: 10px 0;
}

.parent-report-day:last-child { border: none; }

.report-date { font-weight: 700; font-size: 15px; }
.report-detail { font-size: 13px; color: var(--text-light); margin-top: 4px; }

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #F0F0F0;
}

.setting-row:last-child { border: none; }

.setting-row label { font-size: 15px; }

.setting-row input[type="number"] {
  width: 70px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #DDD;
  font-size: 16px;
  text-align: center;
  font-family: inherit;
}

.setting-row input[type="text"] {
  width: 140px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #DDD;
  font-size: 14px;
  font-family: inherit;
}

/* ==================== 底部导航栏 ==================== */
#tabbar {
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  flex-shrink: 0;
  z-index: 100;
}

.tab-item {
  flex: 1;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: transform 0.15s;
  font-family: inherit;
}

.tab-item:active { transform: scale(0.9); }

.tab-icon { font-size: 22px; }
.tab-label { font-size: 11px; color: var(--text-light); }
.tab-item.active .tab-label { color: var(--blue); font-weight: 700; }
.tab-item.active .tab-icon { transform: scale(1.15); transition: transform 0.2s; }

/* ==================== 特效层 ==================== */
.fx-layer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

.star-fall {
  position: absolute;
  font-size: 24px;
  animation: starFall 1.5s ease-in forwards;
}

@keyframes starFall {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(300px) rotate(360deg); }
}

.celebrate-layer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  pointer-events: auto;
}

.celebrate-layer.hidden { display: none; }

.celebrate-box {
  background: #fff;
  border-radius: 30px;
  padding: 30px 30px;
  text-align: center;
  animation: popIn 0.5s ease;
}

@keyframes popIn {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.celebrate-emoji {
  font-size: 60px;
  animation: bob 1s ease-in-out infinite;
}

.celebrate-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue-dark);
  margin: 14px 0;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: confetti 2s ease-out forwards;
}

@keyframes confetti {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(400px) rotate(720deg); }
}

.toast-layer {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  pointer-events: none;
}

.toast {
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 10px 24px;
  border-radius: 20px;
  font-size: 14px;
  margin-top: 6px;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 1.5s forwards;
}

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

@keyframes toastOut {
  to { opacity: 0; transform: translateY(-10px); }
}

/* ==================== 工具类 ==================== */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }

.complete-badge {
  text-align: center;
  padding: 30px 20px;
}

.complete-badge .cb-icon {
  font-size: 60px;
  animation: bob 1.5s ease-in-out infinite;
}

.complete-badge .cb-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--success);
  margin: 12px 0;
}

.complete-badge .cb-reward {
  font-size: 16px;
  color: var(--warn);
}

/* 飘星粒子 */
.particle {
  position: absolute;
  font-size: 20px;
  pointer-events: none;
  animation: particleFloat 1.2s ease-out forwards;
}

@keyframes particleFloat {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

/* 按钮波纹 */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: translate(-50%,-50%);
  transition: width 0.4s, height 0.4s;
}

.ripple:active::after {
  width: 200%;
  height: 200%;
}