/* ===== CSS Variables ===== */
:root {
  --pink: #FFB5C2;
  --pink-light: #FFD4DC;
  --pink-dark: #FF9AAD;
  --mint: #B5E8D5;
  --mint-light: #D4F0E5;
  --mint-dark: #8FD9BE;
  --sky: #A8D8EA;
  --sky-light: #C8E8F2;
  --sky-dark: #7EC4DB;
  --yellow: #FFD93D;
  --yellow-light: #FFE680;
  --yellow-dark: #F0C420;
  --lavender: #D4A5FF;
  --lavender-light: #E4C8FF;
  --lavender-dark: #B87AEF;
  --cream: #FFF8F0;
  --cream-dark: #F5EDE0;
  --text: #5D4E37;
  --text-light: #8B7D6B;
  --white: #FFFFFF;
  --shadow: rgba(93, 78, 55, 0.1);
  --shadow-md: rgba(93, 78, 55, 0.15);
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--cream);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cream-dark); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 4px; }

/* ===== Typography ===== */
h1, h2, h3 { font-weight: 700; line-height: 1.3; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

/* ===== App Container ===== */
#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  min-height: 100vh;
}

/* ===== Top Navigation Bar ===== */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px var(--shadow);
  margin-bottom: 20px;
  position: sticky;
  top: 8px;
  z-index: 100;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-bar-logo {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.top-bar-grade {
  padding: 6px 16px;
  background: var(--sky-light);
  border-radius: 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.top-bar-grade:hover { border-color: var(--sky); }

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.star-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--yellow-light), var(--yellow));
  border-radius: 20px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(255, 217, 61, 0.3);
}

.star-icon {
  font-size: 1.2rem;
  animation: starPulse 2s ease-in-out infinite;
}

@keyframes starPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.nav-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--cream);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: var(--text);
}

.nav-btn:hover {
  background: var(--pink-light);
  transform: scale(1.05);
}

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

/* ===== Views ===== */
.view {
  display: none;
  animation: fadeSlideIn 0.3s var(--ease-out);
}

.view.active { display: block; }

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

/* ===== Home View ===== */
.home-hero {
  text-align: center;
  padding: 40px 20px 30px;
}

.mascot {
  font-size: 5rem;
  display: block;
  margin-bottom: 16px;
  animation: mascotBounce 3s var(--bounce) infinite;
}

@keyframes mascotBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-12px) rotate(-3deg); }
  75% { transform: translateY(-6px) rotate(3deg); }
}

.home-hero h1 {
  font-size: 2.2rem;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--pink-dark), var(--lavender-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.home-hero p {
  font-size: 1.1rem;
  color: var(--text-light);
}

/* Grade Selection */
.grade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 20px;
  max-width: 600px;
  margin: 0 auto 30px;
}

.grade-card {
  padding: 24px 16px;
  border-radius: var(--radius-lg);
  border: 3px solid transparent;
  background: var(--white);
  cursor: pointer;
  text-align: center;
  transition: all 0.3s var(--bounce);
  box-shadow: 0 4px 16px var(--shadow);
  position: relative;
  overflow: hidden;
}

.grade-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.grade-card:nth-child(1)::before { background: var(--pink); }
.grade-card:nth-child(2)::before { background: var(--mint); }
.grade-card:nth-child(3)::before { background: var(--sky); }
.grade-card:nth-child(4)::before { background: var(--yellow); }
.grade-card:nth-child(5)::before { background: var(--lavender); }
.grade-card:nth-child(6)::before { background: var(--pink-dark); }

.grade-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px var(--shadow-md);
}

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

.grade-card.selected {
  border-color: var(--pink);
  background: var(--pink-light);
}

.grade-emoji { font-size: 2.5rem; display: block; margin-bottom: 8px; }
.grade-name { font-size: 1.1rem; font-weight: 700; }
.grade-count { font-size: 0.85rem; color: var(--text-light); margin-top: 4px; }

/* Quick Actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 0 20px;
  max-width: 700px;
  margin: 0 auto;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  border-radius: var(--radius);
  border: 2px solid var(--cream-dark);
  background: var(--white);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.quick-action-btn:hover {
  border-color: var(--mint);
  background: var(--mint-light);
  transform: translateY(-2px);
}

.quick-action-btn .qa-icon { font-size: 1.8rem; }

/* ===== Unit Selection View ===== */
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 0 8px;
}

.back-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px var(--shadow);
  transition: all 0.2s;
  color: var(--text);
  flex-shrink: 0;
}

.back-btn:hover { background: var(--pink-light); transform: scale(1.05); }
.back-btn:active { transform: scale(0.95); }

.section-title {
  font-size: 1.4rem;
  font-weight: 700;
}

.unit-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 0 8px;
}

.unit-card {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 4px 16px var(--shadow);
  cursor: pointer;
  transition: all 0.3s var(--bounce);
  position: relative;
  overflow: hidden;
}

.unit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-md);
}

.unit-card:active { transform: scale(0.98); }

.unit-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.unit-number {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--white);
}

.unit-card:nth-child(1) .unit-number { background: var(--pink); }
.unit-card:nth-child(2) .unit-number { background: var(--mint-dark); }
.unit-card:nth-child(3) .unit-number { background: var(--sky-dark); }
.unit-card:nth-child(4) .unit-number { background: var(--lavender-dark); }
.unit-card:nth-child(5) .unit-number { background: var(--yellow-dark); }

.unit-badge {
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
}

.unit-badge.complete { background: var(--mint-light); color: #2d8a5e; }
.unit-badge.progress { background: var(--yellow-light); color: #9a7b00; }
.unit-badge.locked { background: var(--cream-dark); color: var(--text-light); }

.unit-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.unit-chars { font-size: 0.9rem; color: var(--text-light); margin-bottom: 12px; }

.unit-progress-bar {
  height: 8px;
  background: var(--cream-dark);
  border-radius: 4px;
  overflow: hidden;
}

.unit-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--mint), var(--mint-dark));
  transition: width 0.5s var(--ease-out);
}

/* ===== Character List View ===== */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  padding: 0 8px;
}

.char-card {
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 3px 12px var(--shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--bounce);
  position: relative;
  border: 2px solid transparent;
}

.char-card:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 20px var(--shadow-md);
  border-color: var(--pink);
}

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

.char-card .char-text {
  font-size: 2.5rem;
  font-family: 'KaiTi', 'STKaiti', '楷体', serif;
  line-height: 1;
  margin-bottom: 4px;
}

.char-card .char-pinyin {
  font-size: 0.8rem;
  color: var(--text-light);
}

.char-card .char-status {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.9rem;
}

.char-card.learned { border-color: var(--mint); background: var(--mint-light); }
.char-card.in-progress { border-color: var(--yellow); background: var(--yellow-light); }

/* ===== Character Detail View ===== */
.detail-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0 8px;
}

@media (max-width: 768px) {
  .detail-container { grid-template-columns: 1fr; }
}

/* Character Info Card */
.char-info-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: 0 4px 20px var(--shadow);
  text-align: center;
}

.char-big {
  font-size: 6rem;
  font-family: 'KaiTi', 'STKaiti', '楷体', serif;
  line-height: 1.1;
  margin-bottom: 8px;
  color: var(--text);
  text-shadow: 2px 2px 0 var(--cream-dark);
}

.char-big-pinyin {
  font-size: 1.5rem;
  color: var(--pink-dark);
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.char-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.char-meta-item {
  padding: 6px 14px;
  background: var(--cream);
  border-radius: 12px;
  font-size: 0.9rem;
}

.char-meta-item strong {
  color: var(--pink-dark);
}

.char-meaning {
  font-size: 1rem;
  color: var(--text-light);
  margin-bottom: 20px;
  line-height: 1.6;
  padding: 12px;
  background: var(--cream);
  border-radius: var(--radius);
}

.char-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.word-tag {
  padding: 8px 16px;
  background: var(--sky-light);
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.word-tag:hover { background: var(--sky); transform: scale(1.05); }
.word-tag:active { transform: scale(0.95); }

.char-sentence {
  font-size: 0.95rem;
  color: var(--text-light);
  padding: 12px 16px;
  background: var(--lavender-light);
  border-radius: var(--radius);
  margin-bottom: 20px;
  text-align: left;
  line-height: 1.8;
}

.char-sentence .highlight {
  color: var(--pink-dark);
  font-weight: 700;
  font-size: 1.1rem;
}

/* Audio Controls */
.audio-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.audio-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 24px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--white);
}

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

.audio-btn.play-char { background: linear-gradient(135deg, var(--pink), var(--pink-dark)); }
.audio-btn.play-word { background: linear-gradient(135deg, var(--sky), var(--sky-dark)); }
.audio-btn.play-sentence { background: linear-gradient(135deg, var(--lavender), var(--lavender-dark)); }

.audio-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }

.audio-btn.playing {
  animation: audioPulse 0.6s ease-in-out infinite;
}

@keyframes audioPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 181, 194, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(255, 181, 194, 0); }
}

/* Stroke Animation Area */
.stroke-area {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 4px 20px var(--shadow);
}

.stroke-area h3 {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tianzige-container {
  width: 240px;
  height: 240px;
  margin: 0 auto 16px;
  position: relative;
  border: 2px solid #d4c5a9;
  border-radius: 4px;
  background: var(--white);
}

.tianzige-container::before,
.tianzige-container::after {
  content: '';
  position: absolute;
  border-style: dashed;
  border-color: #e0d5c0;
}

.tianzige-container::before {
  top: 0; bottom: 0;
  left: 50%;
  border-left-width: 1px;
}

.tianzige-container::after {
  left: 0; right: 0;
  top: 50%;
  border-top-width: 1px;
}

#hanzi-writer-target {
  position: relative;
  z-index: 1;
}

.stroke-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.stroke-btn {
  padding: 10px 20px;
  border-radius: 24px;
  border: 2px solid var(--cream-dark);
  background: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.stroke-btn:hover { border-color: var(--pink); background: var(--pink-light); }
.stroke-btn:active { transform: scale(0.95); }

.stroke-btn.primary {
  background: linear-gradient(135deg, var(--mint), var(--mint-dark));
  color: var(--white);
  border-color: transparent;
}

.stroke-btn.primary:hover { filter: brightness(1.1); }

/* ===== Writing Practice Area ===== */
.practice-area {
  grid-column: 1 / -1;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 4px 20px var(--shadow);
}

.practice-area h3 {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.practice-grid {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.practice-cell {
  width: 160px;
  height: 160px;
  border: 2px solid #d4c5a9;
  border-radius: 8px;
  position: relative;
  background: var(--white);
}

.practice-cell::before,
.practice-cell::after {
  content: '';
  position: absolute;
  border-style: dashed;
  border-color: #e8dcc8;
}

.practice-cell::before {
  top: 0; bottom: 0;
  left: 50%;
  border-left-width: 1px;
}

.practice-cell::after {
  left: 0; right: 0;
  top: 50%;
  border-top-width: 1px;
}

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

.practice-btn {
  padding: 10px 20px;
  border-radius: 24px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

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

.practice-btn.eraser { background: var(--cream-dark); color: var(--text); }
.practice-btn.clear { background: var(--pink-light); color: var(--text); }
.practice-btn.start-quiz { background: linear-gradient(135deg, var(--mint), var(--mint-dark)); color: var(--white); }
.practice-btn:hover { filter: brightness(1.05); transform: translateY(-2px); }

/* Score Display */
.score-display {
  text-align: center;
  padding: 20px;
  display: none;
}

.score-display.show { display: block; animation: fadeSlideIn 0.5s var(--bounce); }

.score-stars {
  font-size: 3rem;
  margin-bottom: 8px;
  letter-spacing: 8px;
}

.score-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.score-message {
  font-size: 0.95rem;
  color: var(--text-light);
  margin-top: 4px;
}

/* ===== Games View ===== */
.game-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding: 0 8px;
}

.game-select-card {
  padding: 30px 24px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 4px 16px var(--shadow);
  cursor: pointer;
  text-align: center;
  transition: all 0.3s var(--bounce);
  border: 3px solid transparent;
}

.game-select-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-md);
  border-color: var(--yellow);
}

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

.game-icon { font-size: 3.5rem; display: block; margin-bottom: 12px; }
.game-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
.game-desc { font-size: 0.9rem; color: var(--text-light); }

/* Game Play Area */
.game-play-area {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 8px;
}

.game-question-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  box-shadow: 0 4px 20px var(--shadow);
  text-align: center;
  margin-bottom: 20px;
}

.game-question-text {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: var(--text-light);
}

.game-prompt {
  font-size: 4rem;
  font-family: 'KaiTi', 'STKaiti', '楷体', serif;
  margin-bottom: 12px;
}

.game-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.game-option-btn {
  padding: 20px;
  border-radius: var(--radius);
  border: 3px solid var(--cream-dark);
  background: var(--white);
  font-size: 1.8rem;
  font-family: 'KaiTi', 'STKaiti', '楷体', serif;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text);
}

.game-option-btn:hover {
  border-color: var(--sky);
  background: var(--sky-light);
  transform: scale(1.02);
}

.game-option-btn:active { transform: scale(0.97); }

.game-option-btn.correct {
  border-color: var(--mint-dark);
  background: var(--mint-light);
  animation: correctPop 0.5s var(--bounce);
}

.game-option-btn.wrong {
  border-color: var(--pink);
  background: var(--pink-light);
  animation: gentleShake 0.5s ease;
}

@keyframes correctPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes gentleShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.game-score-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px var(--shadow);
  margin-bottom: 16px;
}

.game-progress-text { font-weight: 600; }
.game-correct-text { color: var(--mint-dark); font-weight: 700; }

.game-result-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 4px 20px var(--shadow);
  text-align: center;
}

.game-result-emoji { font-size: 4rem; margin-bottom: 16px; }
.game-result-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.game-result-score { font-size: 1.1rem; color: var(--text-light); margin-bottom: 20px; }

.game-result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ===== Rewards View ===== */
.rewards-header {
  text-align: center;
  padding: 30px 20px;
}

.rewards-stars {
  font-size: 4rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--yellow), var(--yellow-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rewards-label { font-size: 1rem; color: var(--text-light); }

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  padding: 0 8px;
  margin-bottom: 24px;
}

.sticker-card {
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 3px 12px var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.sticker-card.unlocked { border: 2px solid var(--yellow); }
.sticker-card.locked { opacity: 0.4; filter: grayscale(1); }

.sticker-emoji { font-size: 2.5rem; }
.sticker-name { font-size: 0.8rem; font-weight: 600; color: var(--text-light); }

.badge-section {
  padding: 0 8px;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.badge-card {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 3px 12px var(--shadow);
  text-align: center;
  transition: all 0.2s;
}

.badge-card.earned { border: 2px solid var(--yellow); }
.badge-card.unearned { opacity: 0.4; filter: grayscale(1); }

.badge-icon { font-size: 2rem; margin-bottom: 6px; }
.badge-name { font-size: 0.9rem; font-weight: 700; }
.badge-desc { font-size: 0.8rem; color: var(--text-light); margin-top: 4px; }

/* ===== Favorites / Error Book Views ===== */
.list-empty {
  text-align: center;
  padding: 60px 20px;
}

.list-empty-icon { font-size: 4rem; margin-bottom: 16px; opacity: 0.5; }
.list-empty-text { font-size: 1.1rem; color: var(--text-light); }

.fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 0 8px;
}

.fav-card {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 3px 12px var(--shadow);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.fav-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px var(--shadow-md); }

.fav-char {
  font-size: 2.5rem;
  font-family: 'KaiTi', 'STKaiti', '楷体', serif;
  margin-bottom: 4px;
}

.fav-pinyin { font-size: 0.85rem; color: var(--text-light); }

.fav-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}

.fav-action-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--cream);
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.fav-action-btn:hover { background: var(--pink-light); }

/* ===== Parent Mode ===== */
.parent-dashboard {
  padding: 0 8px;
}

.parent-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 3px 12px var(--shadow);
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.stat-card:nth-child(1) .stat-value { color: var(--pink-dark); }
.stat-card:nth-child(2) .stat-value { color: var(--mint-dark); }
.stat-card:nth-child(3) .stat-value { color: var(--sky-dark); }
.stat-card:nth-child(4) .stat-value { color: var(--lavender-dark); }

.stat-label { font-size: 0.9rem; color: var(--text-light); }

.parent-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 3px 12px var(--shadow);
  margin-bottom: 16px;
}

.parent-section h3 { margin-bottom: 12px; }

.learning-log {
  max-height: 300px;
  overflow-y: auto;
}

.log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cream-dark);
}

.log-item:last-child { border-bottom: none; }

.log-char {
  font-size: 1.5rem;
  font-family: 'KaiTi', 'STKaiti', '楷体', serif;
  width: 40px;
  text-align: center;
}

.log-info { flex: 1; }
.log-info-title { font-weight: 600; font-size: 0.95rem; }
.log-info-detail { font-size: 0.85rem; color: var(--text-light); }
.log-time { font-size: 0.8rem; color: var(--text-light); }

/* ===== Celebration Overlay ===== */
.celebration-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 248, 240, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  flex-direction: column;
}

.celebration-overlay.show {
  display: flex;
  animation: fadeSlideIn 0.3s ease;
}

.celebration-emoji {
  font-size: 6rem;
  animation: celebrationBounce 1s var(--bounce) infinite;
}

@keyframes celebrationBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.1); }
}

.celebration-text {
  font-size: 2rem;
  font-weight: 800;
  margin: 16px 0;
  background: linear-gradient(135deg, var(--pink), var(--yellow), var(--mint));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.celebration-sub {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: 24px;
}

.celebration-close {
  padding: 12px 32px;
  border-radius: 24px;
  border: none;
  background: linear-gradient(135deg, var(--pink), var(--pink-dark));
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.celebration-close:hover { filter: brightness(1.1); }

/* Confetti */
.confetti-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  top: -20px;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  to {
    top: 110vh;
    transform: rotate(720deg);
  }
}

/* ===== Toast Notification ===== */
.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  padding: 12px 24px;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 4px 20px var(--shadow-md);
  font-weight: 600;
  z-index: 500;
  opacity: 0;
  transition: all 0.3s var(--bounce);
  pointer-events: none;
  white-space: nowrap;
}

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

.toast.success { border-left: 4px solid var(--mint-dark); }
.toast.info { border-left: 4px solid var(--sky); }
.toast.warn { border-left: 4px solid var(--yellow); }

/* ===== Print Styles ===== */
@media print {
  .top-bar, .nav-btn, .audio-controls, .stroke-controls,
  .practice-controls, .back-btn, .celebration-overlay { display: none !important; }
  body { background: white; }
  .view { display: block !important; }
  .char-info-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  #app { padding: 8px; }
  .top-bar { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .top-bar-logo { font-size: 1.2rem; }
  .home-hero { padding: 20px 12px; }
  .mascot { font-size: 3.5rem; }
  .home-hero h1 { font-size: 1.6rem; }
  .grade-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 8px; }
  .char-big { font-size: 4.5rem; }
  .tianzige-container { width: 200px; height: 200px; }
  .practice-cell { width: 130px; height: 130px; }
  .game-options { gap: 8px; }
  .game-option-btn { font-size: 1.4rem; padding: 14px; }
  .detail-container { gap: 12px; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .grade-grid { grid-template-columns: repeat(2, 1fr); }
  .char-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .char-card .char-text { font-size: 2rem; }
  .tianzige-container { width: 180px; height: 180px; }
}

/* ===== Supplementary Styles for JS-generated classes ===== */

/* Header */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--white);
  box-shadow: 0 2px 8px var(--shadow); position: sticky; top: 0; z-index: 100;
}
.header-left { display: flex; align-items: center; gap: 8px; }
.header-logo { font-size: 1.6rem; }
.header-title { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.header-right { display: flex; align-items: center; gap: 12px; }
.header-grade {
  font-size: 0.85rem; color: var(--text-light);
  background: var(--cream); padding: 4px 10px; border-radius: 12px;
}
.header-stars { font-size: 0.95rem; font-weight: 600; color: var(--text); }

/* Main */
.app-main {
  padding: 16px 12px 100px; max-width: 800px; margin: 0 auto;
  min-height: calc(100vh - 120px);
}

/* Views */
.view { display: none; }
.view-active { display: block !important; }
.view-enter { animation: viewSlideIn 0.3s var(--ease-out); }
@keyframes viewSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Bottom Nav */
.app-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; background: var(--white);
  box-shadow: 0 -2px 12px var(--shadow); z-index: 100;
  padding: 6px 0 env(safe-area-inset-bottom, 8px);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 6px 4px; cursor: pointer; transition: all 0.2s;
  border-radius: 12px; margin: 0 2px;
}
.nav-item:hover { background: var(--cream); }
.nav-item:active { transform: scale(0.92); }
.nav-icon { font-size: 1.3rem; margin-bottom: 2px; }
.nav-label { font-size: 0.65rem; color: var(--text-light); }
.nav-active { background: var(--pink-light); }
.nav-active .nav-label { color: var(--pink-dark); font-weight: 600; }

/* Home Welcome */
.home-welcome { text-align: center; padding: 24px 16px 16px; }
.mascot { font-size: 4rem; animation: mascotBounce 2s infinite var(--bounce); }
@keyframes mascotBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.welcome-title { font-size: 1.6rem; font-weight: 700; color: var(--text); margin: 12px 0 6px; }
.welcome-sub { font-size: 1rem; color: var(--text-light); }

/* Grade Grid */
.grade-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; padding: 0 4px;
}
.grade-card {
  background: var(--white); border-radius: var(--radius);
  padding: 16px 10px; text-align: center; cursor: pointer;
  box-shadow: 0 3px 12px var(--shadow);
  transition: all 0.3s var(--bounce); border: 2px solid transparent;
}
.grade-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px var(--shadow-md); }
.grade-card:active { transform: scale(0.95); }
.grade-active { border-color: var(--pink); background: var(--pink-light); }
.grade-icon { font-size: 2rem; margin-bottom: 6px; }
.grade-name { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.grade-progress { display: flex; align-items: center; gap: 6px; }

/* Buttons */
.btn-back {
  background: var(--cream); border: none; padding: 8px 14px;
  border-radius: 12px; font-size: 0.9rem; color: var(--text);
  cursor: pointer; transition: all 0.2s;
}
.btn-back:hover { background: var(--cream-dark); }
.btn-back:active { transform: scale(0.95); }

.btn-action {
  background: var(--pink); border: none; padding: 10px 16px;
  border-radius: 14px; font-size: 0.9rem; font-weight: 600;
  color: var(--white); cursor: pointer; transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(255,181,194,0.4);
}
.btn-action:hover { background: var(--pink-dark); transform: translateY(-1px); }
.btn-action:active { transform: scale(0.95); }
.btn-speak { background: var(--sky); box-shadow: 0 2px 8px rgba(168,216,234,0.4); }
.btn-speak:hover { background: var(--sky-dark); }
.btn-fav { background: var(--lavender); box-shadow: 0 2px 8px rgba(212,165,255,0.4); }
.btn-fav:hover { background: var(--lavender-dark); }
.btn-eraser { background: var(--yellow); color: var(--text); }
.btn-clear { background: var(--cream-dark); color: var(--text); }
.btn-start-quiz { background: var(--mint-dark); }
.btn-start-quiz:hover { background: var(--mint); }
.btn-retry { background: var(--sky); }
.btn-danger { background: #ff6b6b; }
.btn-danger:hover { background: #ee5a5a; }
.btn-disabled { opacity: 0.4; pointer-events: none; }
.btn-buy {
  background: var(--yellow); border: none; padding: 4px 10px;
  border-radius: 10px; font-size: 0.8rem; font-weight: 600;
  color: var(--text); cursor: pointer; transition: all 0.2s;
}
.btn-buy:hover { background: var(--yellow-dark); }
.btn-speak-game { background: var(--sky); margin: 8px auto; display: block; }

.btn-nav {
  background: var(--cream); border: none; padding: 6px 12px;
  border-radius: 10px; font-size: 0.85rem; color: var(--text);
  cursor: pointer; transition: all 0.2s;
}
.btn-nav:hover { background: var(--cream-dark); }
.btn-nav:disabled { opacity: 0.3; pointer-events: none; }

/* Progress Bar */
.progress-bar {
  flex: 1; height: 8px; background: var(--cream-dark);
  border-radius: 4px; overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--mint), var(--mint-dark));
  transition: width 0.5s var(--ease-out);
}
.fill-gold { background: linear-gradient(90deg, var(--yellow), var(--yellow-dark)) !important; }
.progress-text { font-size: 0.75rem; color: var(--text-light); white-space: nowrap; }

/* Books View */
.books-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.books-header h2 {
  font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0;
  background: linear-gradient(135deg, var(--pink-dark), var(--lavender-dark));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.books-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px; padding: 0 4px;
}
.book-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 24px 20px; cursor: pointer; box-shadow: 0 4px 16px var(--shadow);
  transition: all 0.3s var(--bounce); border: 3px solid transparent;
  position: relative; overflow: hidden;
}
.book-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.book-card.upper::before { background: linear-gradient(90deg, var(--mint), var(--mint-dark)); }
.book-card.lower::before { background: linear-gradient(90deg, var(--pink), var(--pink-dark)); }
.book-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 32px var(--shadow-md);
}
.book-card:active { transform: scale(0.98); }
.book-emoji { font-size: 3.5rem; text-align: center; margin-bottom: 12px; }
.book-name {
  font-size: 1.2rem; font-weight: 700; color: var(--text);
  text-align: center; margin-bottom: 8px;
}
.book-subtitle {
  font-size: 0.85rem; color: var(--text-light); text-align: center; margin-bottom: 16px;
}
.book-stats {
  display: flex; justify-content: space-around; padding: 12px;
  background: var(--cream); border-radius: var(--radius);
  margin-bottom: 12px;
}
.stat-item { text-align: center; }
.stat-num { font-size: 1.3rem; font-weight: 700; }
.stat-label { font-size: 0.75rem; color: var(--text-light); }
.book-card.upper .stat-num { color: var(--mint-dark); }
.book-card.lower .stat-num { color: var(--pink-dark); }
.book-progress {
  display: flex; align-items: center; gap: 8px;
}
.book-progress-bar {
  flex: 1; height: 10px; background: var(--cream-dark);
  border-radius: 5px; overflow: hidden;
}
.book-progress-fill {
  height: 100%; border-radius: 5px; transition: width 0.5s var(--ease-out);
}
.book-card.upper .book-progress-fill { background: linear-gradient(90deg, var(--mint), var(--mint-dark)); }
.book-card.lower .book-progress-fill { background: linear-gradient(90deg, var(--pink), var(--pink-dark)); }
.book-progress-text { font-size: 0.8rem; color: var(--text-light); font-weight: 600; }
.book-card .book-emoji {
  animation: bookFloat 3s ease-in-out infinite;
}
.book-card:hover .book-emoji {
  animation: bookBounce 0.6s var(--bounce);
}
@keyframes bookFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes bookBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Unit View */
.unit-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.unit-header h2 {
  font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 0;
  background: linear-gradient(135deg, var(--mint-dark), var(--sky-dark));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.unit-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; padding: 0 4px;
}
.unit-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 20px; cursor: pointer; box-shadow: 0 4px 16px var(--shadow);
  transition: all 0.3s var(--bounce); border: 3px solid transparent;
  position: relative; overflow: hidden;
  box-sizing: border-box;
}
.unit-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.unit-card:nth-child(6n+1)::before { background: linear-gradient(90deg, var(--pink), var(--pink-dark)); }
.unit-card:nth-child(6n+2)::before { background: linear-gradient(90deg, var(--mint), var(--mint-dark)); }
.unit-card:nth-child(6n+3)::before { background: linear-gradient(90deg, var(--sky), var(--sky-dark)); }
.unit-card:nth-child(6n+4)::before { background: linear-gradient(90deg, var(--lavender), var(--lavender-dark)); }
.unit-card:nth-child(6n+5)::before { background: linear-gradient(90deg, var(--yellow), var(--yellow-dark)); }
.unit-card:nth-child(6n+6)::before { background: linear-gradient(90deg, var(--pink-dark), var(--lavender)); }
.unit-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 28px var(--shadow-md);
}
.unit-card:active { transform: scale(0.98); }
.unit-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.unit-number {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; color: var(--white);
  flex-shrink: 0;
}
.unit-card:nth-child(6n+1) .unit-number { background: var(--pink); }
.unit-card:nth-child(6n+2) .unit-number { background: var(--mint-dark); }
.unit-card:nth-child(6n+3) .unit-number { background: var(--sky-dark); }
.unit-card:nth-child(6n+4) .unit-number { background: var(--lavender-dark); }
.unit-card:nth-child(6n+5) .unit-number { background: var(--yellow-dark); }
.unit-card:nth-child(6n+6) .unit-number { background: var(--pink-dark); }
.unit-badge {
  padding: 4px 10px; border-radius: 10px; font-size: 0.75rem; font-weight: 600;
  flex-shrink: 0;
}
.unit-badge.complete { background: var(--mint-light); color: #2d8a5e; }
.unit-badge.progress { background: var(--yellow-light); color: #9a7b00; }
.unit-badge.locked { background: var(--cream-dark); color: var(--text-light); }
.unit-title {
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.unit-name {
  font-size: 0.85rem; color: var(--text-light); margin-bottom: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.unit-progress {
  display: flex; align-items: center; gap: 8px;
}
.unit-progress-bar {
  flex: 1; height: 8px; background: var(--cream-dark);
  border-radius: 4px; overflow: hidden;
}
.unit-progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--mint), var(--mint-dark));
  transition: width 0.5s var(--ease-out);
}
.unit-progress-fill.fill-gold {
  background: linear-gradient(90deg, var(--yellow), var(--yellow-dark));
}
.unit-progress-text {
  font-size: 0.75rem; color: var(--text-light); font-weight: 600;
  flex-shrink: 0; white-space: nowrap;
}

/* Character List */
.char-list-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 20px; padding: 0 4px;
}
.char-list-header-left {
  display: flex; align-items: center; gap: 12px;
}
.char-list-header h2 {
  font-size: 1.35rem; font-weight: 700; color: var(--text); margin: 0;
  background: linear-gradient(135deg, var(--sky-dark), var(--lavender-dark));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.char-list-header-sub {
  font-size: 0.85rem; color: var(--text-light); margin-left: 8px;
}
.char-list-progress {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--cream); border-radius: 20px;
  flex-shrink: 0;
}
.char-list-progress-bar {
  width: 60px; height: 6px; background: var(--cream-dark);
  border-radius: 3px; overflow: hidden;
}
.char-list-progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--mint), var(--mint-dark));
}
.char-list-progress-text {
  font-size: 0.8rem; color: var(--text-light); font-weight: 600;
}

.char-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px; padding: 0 4px;
}
.char-card {
  aspect-ratio: 1; border-radius: var(--radius-lg);
  background: var(--white); box-shadow: 0 4px 16px var(--shadow);
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: all 0.3s var(--bounce); position: relative;
  border: 3px solid transparent;
  padding: 12px;
  overflow: hidden;
}
.char-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--pink), var(--pink-dark));
  opacity: 0; transition: opacity 0.2s;
}
.char-card:hover::before { opacity: 1; }
.char-card:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 28px var(--shadow-md);
  border-color: var(--pink);
}
.char-card:active { transform: scale(0.97); }
.char-learned {
  border-color: var(--mint); background: var(--mint-light);
}
.char-learned::before {
  opacity: 1;
  background: linear-gradient(90deg, var(--mint), var(--mint-dark));
}
.char-fav {
  border-color: var(--pink);
}
.char-fav::before {
  opacity: 1;
  background: linear-gradient(90deg, var(--pink), var(--pink-dark));
}
.char-card-hanzi {
  font-size: 2.4rem; font-family: 'KaiTi', 'STKaiti', '楷体', serif;
  color: var(--text); line-height: 1;
  margin-bottom: 4px;
}
.char-card-pinyin {
  font-size: 0.8rem; color: var(--text-light);
  font-weight: 500; letter-spacing: 1px;
}
.char-card-badges {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 3px;
}
.badge-learned {
  font-size: 0.8rem; color: var(--mint-dark);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 1px 4px var(--shadow);
}
.badge-fav {
  font-size: 0.8rem; color: var(--pink);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 1px 4px var(--shadow);
}
.badge-error {
  font-size: 0.7rem; color: var(--yellow-dark); font-weight: 700;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 1px 4px var(--shadow);
}

/* Errors View */
.err-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  padding: 0 4px;
}
.err-header h2 {
  font-size: 1.35rem; font-weight: 700; color: var(--text); margin: 0;
  background: linear-gradient(135deg, var(--yellow-dark), var(--pink-dark));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.err-count {
  font-size: 0.85rem; color: var(--text-light); margin-left: 8px;
}

.err-empty {
  text-align: center; padding: 60px 20px;
}
.err-empty-icon {
  font-size: 4rem; margin-bottom: 16px;
  animation: float 3s ease-in-out infinite;
}
.err-empty-text {
  font-size: 1rem; color: var(--text-light);
}

.errors-char-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px; padding: 0 4px;
}
.errors-char-card {
  aspect-ratio: 1; border-radius: var(--radius-lg);
  background: var(--white); box-shadow: 0 4px 16px var(--shadow);
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: all 0.3s var(--bounce); position: relative;
  border: 3px solid var(--yellow);
  padding: 12px;
  overflow: hidden;
}
.errors-char-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--yellow), var(--yellow-dark));
}
.errors-char-card:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 28px var(--shadow-md);
}
.errors-char-card:active { transform: scale(0.97); }
.errors-char-hanzi {
  font-size: 2.4rem; font-family: 'KaiTi', 'STKaiti', '楷体', serif;
  color: var(--text); line-height: 1;
  margin-bottom: 4px;
}
.errors-char-pinyin {
  font-size: 0.8rem; color: var(--text-light);
  font-weight: 500; letter-spacing: 1px;
}
.errors-char-badge {
  position: absolute; top: 6px; right: 6px;
  padding: 2px 6px; border-radius: 10px;
  font-size: 0.7rem; font-weight: 700;
  background: var(--yellow-light); color: var(--yellow-dark);
  box-shadow: 0 1px 4px var(--shadow);
}

/* Detail View */
.detail-header { margin-bottom: 12px; }
.detail-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.detail-progress { font-size: 0.85rem; color: var(--text-light); }

.detail-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: 0 4px 16px var(--shadow); margin-bottom: 16px;
}
.card-main { text-align: center; margin-bottom: 16px; }
.card-pinyin {
  font-size: 1.4rem; color: var(--pink-dark); font-weight: 600;
  margin-bottom: 4px;
}
.card-hanzi {
  font-size: 5rem; font-family: 'KaiTi', 'STKaiti', '楷体', serif;
  color: var(--text); line-height: 1.1; transition: all 0.3s;
}
.card-info { display: flex; justify-content: center; gap: 20px; margin: 12px 0; }
.info-item { display: flex; flex-direction: column; align-items: center; }
.info-label { font-size: 0.75rem; color: var(--text-light); }
.info-value { font-size: 1rem; font-weight: 600; color: var(--text); }
.card-meaning {
  font-size: 0.95rem; color: var(--text); text-align: center;
  background: var(--cream); padding: 8px 16px; border-radius: 12px;
  margin-top: 8px;
}
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.card-words { margin-bottom: 12px; }
.words-label, .sentence-label { font-size: 0.85rem; color: var(--text-light); margin-bottom: 6px; font-weight: 600; }
.words-list { display: flex; flex-wrap: wrap; gap: 8px; }
.word-tag {
  background: var(--sky-light); color: var(--text); padding: 4px 12px;
  border-radius: 10px; font-size: 0.9rem; cursor: pointer;
  transition: all 0.2s;
}
.word-tag:hover { background: var(--sky); }
.card-sentence { }
.sentence-text {
  font-size: 1rem; color: var(--text); line-height: 1.6;
  padding: 8px 12px; background: var(--cream); border-radius: 12px;
  transition: all 0.3s;
}
.text-highlight {
  background: var(--yellow-light) !important;
  animation: highlightPulse 1.5s ease-out;
}
@keyframes highlightPulse {
  0% { background: var(--yellow-light); }
  100% { background: var(--cream); }
}

/* Section Card */
.section-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: 0 3px 12px var(--shadow); margin-bottom: 16px;
}
.section-title {
  font-size: 1.05rem; font-weight: 700; color: var(--text);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 2px dashed var(--cream-dark);
}

/* Stroke Area */
.stroke-area { text-align: center; }
#stroke-writer-container {
  display: flex; justify-content: center; margin: 12px 0;
}
.stroke-controls { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }

/* Practice Area */
.practice-area { text-align: center; }
#quiz-writer-container {
  display: flex; justify-content: center; margin: 12px 0;
}
.practice-controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

.writer-fallback {
  width: 200px; height: 200px; display: flex; align-items: center;
  justify-content: center; font-size: 6rem;
  font-family: 'KaiTi', 'STKaiti', '楷体', serif;
  color: var(--text); background: var(--cream); border-radius: var(--radius);
}

/* Quiz Result */
.quiz-result { margin-top: 16px; }
.quiz-result.hidden { display: none; }
.result-content { text-align: center; }
.result-stars { font-size: 2rem; margin-bottom: 8px; }
.result-star { margin: 0 4px; }
.star-earned { color: var(--yellow); text-shadow: 0 0 8px rgba(255,217,61,0.5); }
.star-empty { color: var(--cream-dark); }
.result-msg { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.result-detail { font-size: 0.85rem; color: var(--text-light); margin-bottom: 12px; }

/* Games */
.games-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.games-header h2 { font-size: 1.2rem; color: var(--text); margin: 0; }
.games-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.game-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 24px 16px; text-align: center; cursor: pointer;
  box-shadow: 0 4px 16px var(--shadow); transition: all 0.3s var(--bounce);
}
.game-card:hover { transform: translateY(-4px); }
.game-card:active { transform: scale(0.95); }
.game-icon { font-size: 3rem; margin-bottom: 8px; }
.game-name { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.game-desc { font-size: 0.8rem; color: var(--text-light); margin-top: 4px; }

.game-round { text-align: center; padding: 16px; }
.game-round-info { font-size: 0.9rem; color: var(--text-light); margin-bottom: 12px; }
.game-prompt { font-size: 1.1rem; color: var(--text); margin-bottom: 8px; }
.game-prompt-hint { font-size: 0.9rem; color: var(--pink-dark); margin-bottom: 16px; }
.game-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 300px; margin: 0 auto; }
.game-option {
  font-size: 2rem; padding: 16px; border: 2px solid var(--cream-dark);
  border-radius: var(--radius); background: var(--white);
  cursor: pointer; transition: all 0.2s; font-family: 'KaiTi', 'STKaiti', '楷体', serif;
}
.game-option:hover { border-color: var(--pink); transform: scale(1.05); }
.game-option:active { transform: scale(0.95); }
.option-correct { background: var(--mint-light) !important; border-color: var(--mint-dark) !important; }
.option-wrong { background: #ffe0e0 !important; border-color: #ff9999 !important; }

.game-result { text-align: center; padding: 24px; }
.game-result-icon { font-size: 4rem; margin-bottom: 12px; }
.game-result-score { font-size: 2rem; font-weight: 700; color: var(--text); }
.game-result-msg { font-size: 1.1rem; color: var(--text); margin: 8px 0; }
.game-result-stars { font-size: 0.9rem; color: var(--yellow-dark); margin-bottom: 16px; }

/* Favorites & Errors */
.fav-header, .err-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fav-header h2, .err-header h2 { font-size: 1.2rem; color: var(--text); margin: 0; }

/* Empty State */
.empty-state { text-align: center; padding: 40px 20px; }
.empty-icon { font-size: 4rem; margin-bottom: 12px; opacity: 0.6; }
.empty-text { font-size: 1rem; color: var(--text-light); line-height: 1.6; }

/* Rewards */
.rewards-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rewards-header h2 { font-size: 1.2rem; color: var(--text); margin: 0; }
.rewards-stars-section {
  background: linear-gradient(135deg, var(--yellow-light), var(--yellow));
  border-radius: var(--radius-lg); padding: 20px; text-align: center;
  margin-bottom: 16px; box-shadow: 0 4px 16px rgba(255,217,61,0.3);
}
.rewards-star-count { font-size: 1.8rem; font-weight: 700; color: var(--text); }
.rewards-total { font-size: 0.85rem; color: var(--text-light); margin-top: 4px; }

.sticker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}
.sticker-item {
  text-align: center; padding: 12px 8px; background: var(--cream);
  border-radius: var(--radius); transition: all 0.2s;
}
.sticker-owned { background: var(--mint-light); }
.sticker-emoji { font-size: 2.2rem; margin-bottom: 4px; }
.sticker-name { font-size: 0.8rem; color: var(--text); margin-bottom: 4px; }
.sticker-status { font-size: 0.7rem; color: var(--mint-dark); font-weight: 600; }

.badge-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.badge-item {
  text-align: center; padding: 12px 8px; border-radius: var(--radius);
  transition: all 0.2s;
}
.badge-earned { background: var(--yellow-light); }
.badge-locked { background: var(--cream); opacity: 0.5; }
.badge-icon { font-size: 2rem; margin-bottom: 4px; }
.badge-name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.badge-desc { font-size: 0.7rem; color: var(--text-light); }

/* Parent Mode */
.parent-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.parent-header h2 { font-size: 1.2rem; color: var(--text); margin: 0; }
.parent-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.stat-item {
  text-align: center; padding: 12px; background: var(--cream);
  border-radius: var(--radius);
}
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.stat-label { font-size: 0.75rem; color: var(--text-light); }
.parent-grade-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.parent-grade-name { font-size: 0.85rem; color: var(--text); min-width: 60px; }
.parent-error-list { display: flex; flex-wrap: wrap; gap: 8px; }
.parent-error-char {
  background: var(--yellow-light); padding: 4px 10px;
  border-radius: 8px; font-size: 0.9rem; color: var(--text);
}

/* Toast */
.toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-20px);
  background: var(--white); padding: 12px 20px; border-radius: 14px;
  box-shadow: 0 4px 20px var(--shadow-md); font-size: 0.9rem;
  color: var(--text); z-index: 1000; opacity: 0;
  transition: all 0.3s var(--ease-out); pointer-events: none;
  border-left: 4px solid var(--sky);
}
.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success { border-left-color: var(--mint-dark); }
.toast-info { border-left-color: var(--sky); }
.toast-warning { border-left-color: var(--yellow); }

/* Celebration */
.celebration-container {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 999; overflow: hidden;
}
.celebration-container.active { pointer-events: auto; }
.confetti {
  position: absolute; top: -30px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(-30px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Hidden */
.hidden { display: none !important; }

/* Responsive for supplementary */
@media (max-width: 768px) {
  .app-main { padding: 12px 8px 90px; }
  .grade-grid { grid-template-columns: repeat(2, 1fr); }
  .card-hanzi { font-size: 4rem; }
  .parent-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grade-grid { grid-template-columns: repeat(2, 1fr); }
  .char-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .card-hanzi { font-size: 3.5rem; }
  .games-grid { grid-template-columns: 1fr; }
}