/* ========== CSS 变量 ========== */
:root {
  --color-primary: #FF6B6B;
  --color-primary-light: #FF8E8E;
  --color-secondary: #4ECDC4;
  --color-accent: #FFE667;
  --color-accent-dark: #F0D43A;
  --color-success: #00B894;
  --color-warning: #FFE667;
  --color-danger: #FF7675;
  --color-purple: #6C5CE7;

  --color-bg: #FFF9F0;
  --color-bg-white: #FFFFFF;
  --color-bg-blue: #F0F7FF;
  --color-bg-card: rgba(255, 255, 255, 0.85);

  --color-text-primary: #2D3436;
  --color-text-secondary: #636E72;
  --color-text-light: #B2BEC3;
  --color-text-white: #FFFFFF;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-xxl: 30px;
  --font-size-hero: 40px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);

  /* Claymorphism 阴影系统 */
  --clay-shadow: 3px 3px 6px rgba(166, 146, 130, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.9);
  --clay-shadow-sm: 2px 2px 4px rgba(166, 146, 130, 0.15), -1px -1px 3px rgba(255, 255, 255, 0.85);
  --clay-shadow-lg: 5px 5px 10px rgba(166, 146, 130, 0.25), -3px -3px 7px rgba(255, 255, 255, 0.95);
  --clay-shadow-inset: inset 2px 2px 4px rgba(166, 146, 130, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.8);
  --clay-border: 2px solid rgba(255, 255, 255, 0.6);
  --clay-border-thick: 3px solid rgba(255, 255, 255, 0.5);

  /* 发光阴影 */
  --shadow-glow: 0 0 12px rgba(255, 107, 107, 0.25), 0 2px 6px rgba(255, 107, 107, 0.15);
  --shadow-glow-teal: 0 0 12px rgba(78, 205, 196, 0.25), 0 2px 6px rgba(78, 205, 196, 0.15);
  --shadow-glow-purple: 0 0 12px rgba(167, 139, 250, 0.25), 0 2px 6px rgba(167, 139, 250, 0.15);
  --shadow-glow-gold: 0 0 12px rgba(255, 217, 61, 0.35), 0 2px 6px rgba(255, 217, 61, 0.2);

  --color-bg-clay: #F9F3EE;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;

  --tabbar-height: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ========== 全局 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  background: var(--color-bg);
}

/* ========== TabBar ========== */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; height: var(--tabbar-height);
  background: var(--color-bg-white); display: flex;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06); z-index: 1000;
  padding-bottom: var(--safe-bottom);
}
.tabbar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; cursor: pointer; transition: all 0.2s; opacity: 0.5;
}
.tabbar-item.active { opacity: 1; }
.tabbar-icon { font-size: 22px; }
.tabbar-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.tabbar-item.active .tabbar-label { color: var(--color-primary); font-weight: 600; }

/* ========== 页面 ========== */
.page { display: none; padding-bottom: calc(var(--tabbar-height) + 20px); }
.page.active { display: block; }

.card {
  background: var(--color-bg-card); border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--clay-shadow);
  border: var(--clay-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;
}
.card:active { transform: scale(0.97); box-shadow: var(--clay-shadow-sm); }

/* ========== Header (Claymorphism) ========== */
.header-section { position: relative; overflow: hidden; padding-bottom: var(--spacing-md); }
.header-bg {
  position: absolute; top: 0; left: -20%; width: 140%; height: 200px;
  background: linear-gradient(145deg, var(--color-primary), #FF8E8E, var(--color-accent));
  border-radius: 0 0 50% 50%; opacity: 0.15;
}
.header-content { position: relative; padding: var(--spacing-xl) var(--spacing-lg); }
.greeting-text { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text-primary); }
.greeting-sub { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--spacing-xs); }

/* ========== 搜索框 ========== */
/* 搜索框 (Claymorphism 凹陷) */
.search-bar {
  display: flex; align-items: center; gap: var(--spacing-sm);
  background: var(--color-bg-white); border-radius: var(--radius-xl);
  padding: var(--spacing-sm) var(--spacing-md); margin-top: var(--spacing-md);
  box-shadow: var(--clay-shadow-inset); border: var(--clay-border);
  transition: border-color 0.2s;
}
.search-bar:focus-within { border-color: var(--color-primary); }
.search-icon { font-size: 18px; }
.search-input {
  flex: 1; border: none; outline: none; font-size: var(--font-size-base);
  background: transparent; color: var(--color-text-primary);
}
.search-input::placeholder { color: var(--color-text-light); }
.search-btn {
  background: linear-gradient(145deg, var(--color-primary), var(--color-primary-light));
  color: white; border: none; border-radius: var(--radius-xl);
  padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--font-size-sm);
  font-weight: 600; cursor: pointer; transition: transform 0.25s var(--ease-spring);
  box-shadow: var(--shadow-glow), var(--clay-shadow-sm);
  position: relative; overflow: hidden;
}
.search-btn::before {
  content: ''; position: absolute;
  top: 1px; left: 10%; right: 10%; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%);
  border-radius: 50%;
}
.search-btn:active { transform: scale(0.95); box-shadow: var(--clay-shadow-sm); }

/* ========== 生成动画 ========== */
.generating-card {
  margin: 0 var(--spacing-lg) var(--spacing-md);
  background: linear-gradient(135deg, #FFF9E6, #FFF3CC);
  border: 2px dashed var(--color-accent-dark);
}
.generating-animation { text-align: center; padding: var(--spacing-lg); }
.generating-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: var(--spacing-md); }
.generating-dots span {
  width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent-dark);
  animation: bounce 1.4s ease-in-out infinite both;
}
.generating-dots span:nth-child(1) { animation-delay: 0s; }
.generating-dots span:nth-child(2) { animation-delay: 0.16s; }
.generating-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}
.generating-text { font-size: var(--font-size-base); color: var(--color-text-secondary); }

/* ========== 进度 ========== */
.total-progress { margin-top: var(--spacing-md); }
.progress-info { display: flex; justify-content: space-between; margin-bottom: 4px; }
.progress-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.progress-value { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-primary); }
.progress-bar { height: 8px; background: rgba(0,0,0,0.06); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-radius: 4px; transition: width 0.5s; }

/* ========== 今日推荐 ========== */
.today-card {
  display: flex; align-items: center; margin: 0 var(--spacing-lg) var(--spacing-md);
  cursor: pointer; transition: transform 0.2s;
}
.today-card:active { transform: scale(0.98); }
.today-badge {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); font-weight: 600;
}
.today-content { flex: 1; display: flex; align-items: center; gap: var(--spacing-md); margin-left: var(--spacing-md); }
.today-info { flex: 1; }
.today-char-row { display: flex; align-items: baseline; gap: var(--spacing-sm); }
.today-char { font-size: var(--font-size-hero); font-weight: 700; }
.today-pinyin { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.today-meaning { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.today-arrow { font-size: var(--font-size-xl); color: var(--color-text-light); }

/* ========== 学习地图 ========== */
.map-section { margin: 0 var(--spacing-lg); }
.map-title { margin-bottom: var(--spacing-md); }
.map-title-text { font-size: var(--font-size-lg); font-weight: 700; display: block; }
.map-title-sub { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.map-scroll { overflow-x: auto; padding: var(--spacing-sm) 0; }
.map-path { display: flex; gap: var(--spacing-md); position: relative; padding: var(--spacing-md) 0; min-width: max-content; }
.path-line {
  position: absolute; top: 50%; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--color-success), var(--color-primary));
  border-radius: 2px; transform: translateY(-50%); z-index: 0;
}
.map-node {
  position: relative; z-index: 1; width: 64px; height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--color-bg-white); border-radius: var(--radius-md);
  border: 2px solid var(--color-text-light); cursor: pointer; transition: all 0.2s;
}
.map-node.learned { border-color: var(--color-success); background: #E8F8F5; }
.map-node.current { border-color: var(--color-primary); animation: pulse 2s infinite; }
.map-node:active { transform: scale(0.9); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0.3); }
  50% { box-shadow: 0 0 0 10px rgba(255,107,107,0); }
}
.node-char { font-size: var(--font-size-xl); font-weight: 700; }
.node-pinyin { font-size: 10px; color: var(--color-text-secondary); }
.node-check { position: absolute; top: -6px; right: -6px; background: var(--color-success); color: white; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; }

/* ========== 统计 ========== */
.stats-section { margin: var(--spacing-md) var(--spacing-lg); }
.stats-card { display: flex; justify-content: space-around; text-align: center; }
.stat-item { display: flex; flex-direction: column; gap: 4px; }
.stat-number { font-size: var(--font-size-xxl); font-weight: 700; color: var(--color-primary); }
.stat-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.stat-divider { width: 1px; background: rgba(0,0,0,0.08); }

/* ========== 学习页 ========== */
.page-learn { padding-bottom: calc(var(--tabbar-height) + 80px); }
.learn-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-white); box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 100;
}
.back-btn { font-size: var(--font-size-base); color: var(--color-secondary); cursor: pointer; font-weight: 600; }
.char-title { display: flex; align-items: baseline; gap: var(--spacing-sm); }
.char-title-char { font-size: var(--font-size-xxl); font-weight: 700; }
.char-title-pinyin { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.learn-header-actions { display: flex; gap: var(--spacing-sm); }
.action-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--color-bg); cursor: pointer; font-size: 18px;
  transition: transform 0.2s;
}
.action-btn:active { transform: scale(0.9); }

/* 阶段进度 */
.stage-progress {
  display: flex; justify-content: center; gap: var(--spacing-xs);
  padding: var(--spacing-md); background: var(--color-bg-white);
}
.stage-dot { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0.4; }
.stage-dot.active { opacity: 1; }
.stage-dot.current { transform: scale(1.15); }
.stage-icon { font-size: 20px; }
.stage-name { font-size: 10px; color: var(--color-text-secondary); }

/* 学习内容 */
.learn-content { padding: var(--spacing-md) var(--spacing-lg); }
.stage-container { animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.stage-title { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--spacing-md); }

.story-text {
  font-size: var(--font-size-base); line-height: 1.8; color: var(--color-text-primary);
  padding: var(--spacing-md); background: var(--color-bg-white); border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md); white-space: pre-line;
}
.ai-greeting {
  margin: var(--spacing-md) 0; padding: var(--spacing-md);
  background: linear-gradient(135deg, #FFF9E6, #FFF3CC); border-radius: var(--radius-md);
  font-size: var(--font-size-sm); line-height: 1.6; color: var(--color-text-secondary);
}
.origin-brief {
  padding: var(--spacing-md); background: var(--color-bg-blue); border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md); font-size: var(--font-size-sm); line-height: 1.6;
}
.evolution-timeline { display: flex; flex-direction: column; gap: var(--spacing-md); }
.evolution-item {
  display: flex; align-items: flex-start; gap: var(--spacing-md);
  padding: var(--spacing-md); background: var(--color-bg-white); border-radius: var(--radius-md);
}
.evolution-stage { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-secondary); white-space: nowrap; }
.evolution-char { font-size: var(--font-size-xl); min-width: 50px; text-align: center; }
.evolution-desc { font-size: var(--font-size-sm); line-height: 1.5; }

/* 强化阶段 */
.reinforce-tabs { display: flex; gap: var(--spacing-xs); overflow-x: auto; margin-bottom: var(--spacing-md); }
.reinforce-tab {
  padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-xl);
  border: none; background: var(--color-bg-white); font-size: var(--font-size-sm);
  cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.reinforce-tab.active { background: var(--color-primary); color: white; }
.rhyme-text { font-size: var(--font-size-md); line-height: 2; text-align: center; padding: var(--spacing-lg); background: #FFF9E6; border-radius: var(--radius-md); }
.family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); }
.family-card { padding: var(--spacing-md); }
.family-word { font-size: var(--font-size-md); margin-bottom: var(--spacing-xs); }
.family-meaning { font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.5; }
.family-summary { margin-top: var(--spacing-md); padding: var(--spacing-md); background: var(--color-bg-blue); border-radius: var(--radius-md); font-size: var(--font-size-sm); }
.trivia-card { margin-bottom: var(--spacing-sm); }
.trivia-title { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-sm); }
.trivia-content { font-size: var(--font-size-sm); line-height: 1.6; }
.poem-card { padding: var(--spacing-lg); }
.poem-header { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-md); text-align: center; }
.poem-text { font-size: var(--font-size-lg); text-align: center; line-height: 2; margin-bottom: var(--spacing-md); color: var(--color-text-primary); }
.poem-translation { padding: var(--spacing-md); background: var(--color-bg-blue); border-radius: var(--radius-md); font-size: var(--font-size-sm); margin-bottom: var(--spacing-sm); }
.poem-meaning { padding: var(--spacing-md); background: #FFF9E6; border-radius: var(--radius-md); font-size: var(--font-size-sm); }
.myth-card { padding: var(--spacing-lg); }
.myth-title { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--spacing-md); text-align: center; }
.myth-story { font-size: var(--font-size-base); line-height: 1.8; white-space: pre-line; margin-bottom: var(--spacing-md); }
.myth-moral { padding: var(--spacing-md); background: linear-gradient(135deg, #E8F8F5, #D5F5E3); border-radius: var(--radius-md); font-size: var(--font-size-sm); }

/* 游戏 */
.quiz-card { margin-bottom: var(--spacing-md); }
.quiz-title { font-size: var(--font-size-md); font-weight: 600; margin-bottom: var(--spacing-md); }
.quiz-question { font-size: var(--font-size-base); line-height: 1.6; white-space: pre-line; margin-bottom: var(--spacing-md); }
.quiz-options { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.quiz-option {
  padding: var(--spacing-md); border-radius: var(--radius-md); border: 2px solid var(--color-bg);
  background: var(--color-bg-white); font-size: var(--font-size-base); cursor: pointer; text-align: left; transition: all 0.2s;
}
.quiz-option:active { transform: scale(0.98); }
.quiz-option.correct { border-color: var(--color-success); background: #E8F8F5; }
.quiz-option.wrong { border-color: var(--color-danger); background: #FFEAEA; }
.quiz-answer { margin-top: var(--spacing-md); padding: var(--spacing-md); background: var(--color-bg-blue); border-radius: var(--radius-md); }
.answer-text { font-weight: 600; margin-bottom: var(--spacing-xs); }
.answer-explain { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* 总结 */
.summary-list { margin-bottom: var(--spacing-md); }
.summary-item { padding: var(--spacing-sm) 0; font-size: var(--font-size-base); line-height: 1.5; }
.tasks-section { margin-bottom: var(--spacing-md); }
.tasks-section h3 { font-size: var(--font-size-md); margin-bottom: var(--spacing-md); }
.task-item { padding: var(--spacing-sm) 0; font-size: var(--font-size-sm); line-height: 1.5; }
.feedback-actions { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.rate-section { margin: var(--spacing-md) 0; text-align: center; }
.btn-rate {
  background: linear-gradient(135deg, #FFD700, #FFA500); color: white; border: none;
  padding: var(--spacing-md) var(--spacing-xl); border-radius: var(--radius-xl);
  font-size: var(--font-size-base); font-weight: 600; cursor: pointer;
}

/* 按钮 */
.btn-next {
  display: block; width: 100%; padding: var(--spacing-md);
  background: linear-gradient(135deg, var(--color-secondary), #45B7AA);
  color: white; border: none; border-radius: var(--radius-md);
  font-size: var(--font-size-md); font-weight: 600; cursor: pointer;
  margin-top: var(--spacing-lg); transition: transform 0.2s;
}
.btn-next:active { transform: scale(0.98); }
.btn-primary {
  display: block; width: 100%; padding: var(--spacing-md);
  background: linear-gradient(145deg, var(--color-primary), var(--color-primary-light));
  color: white; border: none; border-radius: var(--radius-xl);
  font-size: var(--font-size-base); font-weight: 600; cursor: pointer;
  transition: transform 0.25s var(--ease-spring);
  box-shadow: var(--shadow-glow), var(--clay-shadow-sm);
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ''; position: absolute;
  top: 1px; left: 10%; right: 10%; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%);
  border-radius: 50%;
}
.btn-primary:active { transform: scale(0.95); box-shadow: var(--clay-shadow-sm); }
.btn-secondary {
  display: block; width: 100%; padding: var(--spacing-md);
  background: var(--color-bg-white); color: var(--color-text-primary);
  border: 2px solid var(--color-text-light); border-radius: var(--radius-md);
  font-size: var(--font-size-base); font-weight: 600; cursor: pointer; transition: transform 0.2s;
}
.btn-secondary:active { transform: scale(0.98); }

/* AI 聊天 */
.ai-fab {
  position: fixed; bottom: calc(var(--tabbar-height) + 20px); right: 20px;
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; cursor: pointer; box-shadow: var(--shadow-lg); z-index: 50;
  max-width: 480px;
}
.ai-chat-panel {
  position: fixed; bottom: var(--tabbar-height); left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; height: 60vh; background: var(--color-bg-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15); z-index: 200;
  display: flex; flex-direction: column;
}
.ai-chat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid rgba(0,0,0,0.06);
  font-weight: 600;
}
.ai-close { cursor: pointer; font-size: 18px; color: var(--color-text-light); }
.ai-chat-messages { flex: 1; overflow-y: auto; padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-sm); }
.ai-msg { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); max-width: 80%; font-size: var(--font-size-sm); line-height: 1.5; }
.ai-msg.ai { background: var(--color-bg-blue); align-self: flex-start; }
.ai-msg.user { background: var(--color-primary); color: white; align-self: flex-end; }
.ai-chat-input { display: flex; gap: var(--spacing-sm); padding: var(--spacing-md); border-top: 1px solid rgba(0,0,0,0.06); }
.ai-chat-input input { flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: 2px solid var(--color-bg); border-radius: var(--radius-xl); outline: none; font-size: var(--font-size-base); }
.ai-chat-input button { background: var(--color-primary); color: white; border: none; border-radius: var(--radius-xl); padding: var(--spacing-sm) var(--spacing-lg); cursor: pointer; }

/* ========== 评分弹窗 ========== */
.rating-popup {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 300;
  display: flex; align-items: center; justify-content: center;
}
.rating-popup-content {
  background: var(--color-bg-white); border-radius: var(--radius-xl);
  padding: var(--spacing-xl); width: 90%; max-width: 360px;
}
.rating-title { font-size: var(--font-size-lg); font-weight: 600; text-align: center; margin-bottom: var(--spacing-md); }
.rating-stars { display: flex; justify-content: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.rating-stars .star { font-size: 36px; cursor: pointer; color: #ccc; transition: color 0.2s; }
.rating-stars .star:hover { color: #FFD700; }
.rating-comment {
  width: 100%; border: 2px solid var(--color-bg); border-radius: var(--radius-md);
  padding: var(--spacing-md); font-size: var(--font-size-sm); resize: none; outline: none;
}
.rating-actions { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.rating-cancel { flex: 1; padding: var(--spacing-sm); border: 1px solid var(--color-text-light); border-radius: var(--radius-md); background: none; cursor: pointer; }
.rating-submit { flex: 1; padding: var(--spacing-sm); background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); cursor: pointer; font-weight: 600; }

/* ========== 社区页 ========== */
.community-header {
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md);
  background: linear-gradient(135deg, var(--color-secondary), #45B7AA);
  color: white;
}
.community-title { font-size: var(--font-size-xl); font-weight: 700; display: block; }
.community-sub { font-size: var(--font-size-sm); opacity: 0.9; }
.community-search-bar {
  display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-md);
}
.community-search-bar input {
  flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: none; border-radius: var(--radius-xl);
  font-size: var(--font-size-base); outline: none;
}
.community-search-bar button {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.3); font-size: 18px; cursor: pointer;
}

.sort-bar {
  display: flex; gap: var(--spacing-xs); padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-white); border-bottom: 1px solid rgba(0,0,0,0.04);
}
.sort-btn {
  padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-xl);
  border: none; background: var(--color-bg); font-size: var(--font-size-sm);
  cursor: pointer; transition: all 0.2s;
}
.sort-btn.active { background: var(--color-secondary); color: white; }

.community-list { padding: var(--spacing-md) var(--spacing-lg); }
.community-card {
  display: flex; align-items: center; gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm); cursor: pointer; transition: transform 0.2s;
}
.community-card:active { transform: scale(0.98); }
.community-char {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFF9E6, #FFF3CC); border-radius: var(--radius-md);
  font-size: 14px; flex-direction: column;
}
.community-char-text { font-size: var(--font-size-xl); font-weight: 700; }
.community-info { flex: 1; }
.community-title { font-size: var(--font-size-base); font-weight: 600; margin-bottom: 2px; }
.community-meta { font-size: var(--font-size-xs); color: var(--color-text-secondary); display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.community-arrow { color: var(--color-text-light); font-size: 18px; }

.community-pagination { display: flex; justify-content: center; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); }
.page-btn { padding: var(--spacing-xs) var(--spacing-md); border: 1px solid var(--color-text-light); border-radius: var(--radius-md); background: none; cursor: pointer; font-size: var(--font-size-sm); }
.page-info { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ========== 游戏页 ========== */
.game-page-header {
  padding: var(--spacing-xl) var(--spacing-lg);
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
}
.game-page-title { font-size: var(--font-size-xl); font-weight: 700; display: block; }
.game-page-sub { font-size: var(--font-size-sm); }
.game-select { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-md); padding: var(--spacing-lg); }
.game-type-card { text-align: center; cursor: pointer; transition: transform 0.2s; }
.game-type-card:active { transform: scale(0.95); }
.game-type-emoji { font-size: 36px; margin-bottom: var(--spacing-sm); }
.game-type-name { font-size: var(--font-size-base); font-weight: 600; display: block; }
.game-type-desc { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

.game-result { text-align: center; padding: var(--spacing-xl); margin: var(--spacing-lg); }
.result-emoji { font-size: 60px; margin-bottom: var(--spacing-md); }
.result-score { font-size: var(--font-size-hero); font-weight: 700; color: var(--color-primary); }
.result-text { font-size: var(--font-size-lg); margin: var(--spacing-md) 0; }
.quiz-game { margin: var(--spacing-lg); text-align: center; }
.game-progress { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--spacing-md); }
.game-char { font-size: 60px; font-weight: 700; }
.game-pinyin { font-size: var(--font-size-md); color: var(--color-text-secondary); margin-bottom: var(--spacing-lg); }
.game-options { display: flex; flex-direction: column; gap: var(--spacing-sm); }

/* ========== 我的页 ========== */
.me-header {
  padding: var(--spacing-xl) var(--spacing-lg);
  background: linear-gradient(135deg, var(--color-purple), #8B7CF6);
  color: white; display: flex; align-items: center; justify-content: space-between;
}
.me-user-info { display: flex; align-items: center; gap: var(--spacing-md); }
.user-avatar { font-size: 40px; }
.user-name { font-size: var(--font-size-lg); font-weight: 600; display: block; }
.me-logout { font-size: var(--font-size-xs); opacity: 0.8; cursor: pointer; }
.login-btn {
  background: rgba(255,255,255,0.2); color: white; border: 2px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-xl); padding: var(--spacing-sm) var(--spacing-xl);
  font-size: var(--font-size-sm); font-weight: 600; cursor: pointer;
}

.me-stats { display: flex; gap: var(--spacing-sm); padding: var(--spacing-lg); }
.me-stat-card { flex: 1; text-align: center; }
.me-stat-num { font-size: var(--font-size-xxl); font-weight: 700; color: var(--color-primary); display: block; }
.me-stat-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

.me-sections { padding: 0 var(--spacing-lg); }
.me-section {
  display: flex; align-items: center; gap: var(--spacing-md);
  padding: var(--spacing-md); background: var(--color-bg-white);
  border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);
  cursor: pointer; transition: transform 0.2s;
}
.me-section:active { transform: scale(0.98); }
.me-section-icon { font-size: 22px; }
.me-section-title { flex: 1; font-size: var(--font-size-base); font-weight: 500; }
.me-section-arrow { color: var(--color-text-light); }

.me-sub-content { padding: var(--spacing-md) var(--spacing-lg); }
.me-content-item {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: var(--spacing-md); background: var(--color-bg-white);
  border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);
  cursor: pointer; font-size: var(--font-size-sm);
}
.me-content-emoji { font-size: 18px; }
.me-content-char { font-size: var(--font-size-lg); font-weight: 700; }
.me-content-title { flex: 1; color: var(--color-text-secondary); }
.me-content-badge { font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-sm); }
.me-content-badge.public { background: #E8F8F5; color: var(--color-success); }
.me-content-badge.private { background: #FFF9E6; color: var(--color-accent-dark); }
.me-content-score { font-size: var(--font-size-xs); color: var(--color-accent-dark); }

/* 日历 */
.parent-section { margin: 0 var(--spacing-lg) var(--spacing-lg); }
.section-header { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--spacing-md); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-header { font-size: var(--font-size-xs); color: var(--color-text-light); font-weight: 600; padding: 4px; }
.cal-day { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); border-radius: 50%; margin: 0 auto; }
.cal-day.learned { background: var(--color-success); color: white; font-weight: 600; }
.cal-day.today { border: 2px solid var(--color-primary); font-weight: 600; }

/* ========== 弹窗通用 ========== */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
.modal-card {
  background: var(--color-bg-white); border-radius: var(--radius-xl);
  width: 92%; max-width: 420px; max-height: 90vh; overflow-y: auto;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--spacing-lg); border-bottom: 1px solid rgba(0,0,0,0.06);
}
.modal-title { font-size: var(--font-size-lg); font-weight: 700; }
.auth-close, .editor-close-btn { cursor: pointer; font-size: 20px; color: var(--color-text-light); }

/* 登录弹窗 */
.auth-card { padding: 0; overflow: hidden; }
.auth-card .modal-header { padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md); }
#auth-login-form, #auth-register-form { padding: var(--spacing-lg); }
.form-group { margin-bottom: var(--spacing-md); }
.form-group label { display: block; font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--spacing-xs); color: var(--color-text-secondary); }
.form-group input {
  width: 100%; padding: var(--spacing-md); border: 2px solid var(--color-bg);
  border-radius: var(--radius-md); font-size: var(--font-size-base); outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus { border-color: var(--color-primary); }
.form-error { color: var(--color-danger); font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); min-height: 20px; }
.form-switch { text-align: center; margin-top: var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.form-switch span { color: var(--color-primary); font-weight: 600; cursor: pointer; }

/* 编辑器弹窗 */
.editor-card { max-width: 480px; width: 96%; max-height: 95vh; display: flex; flex-direction: column; }
.editor-body { display: flex; flex: 1; overflow: hidden; min-height: 400px; }
.editor-modules {
  width: 140px; border-right: 1px solid rgba(0,0,0,0.06);
  overflow-y: auto; flex-shrink: 0;
}
.editor-module-item {
  display: flex; align-items: center; gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md); cursor: pointer;
  font-size: var(--font-size-sm); transition: background 0.2s;
}
.editor-module-item:hover { background: var(--color-bg); }
.editor-module-item.active { background: var(--color-bg-blue); font-weight: 600; color: var(--color-primary); }
.module-icon { font-size: 16px; }
.editor-content { flex: 1; padding: var(--spacing-md); display: flex; flex-direction: column; }
.editor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-sm); }
.editor-module-title { font-size: var(--font-size-md); font-weight: 600; }
.editor-ai-btn {
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
  border: none; border-radius: var(--radius-xl); padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs); cursor: pointer; font-weight: 600;
}
.editor-textarea {
  flex: 1; width: 100%; border: 2px solid var(--color-bg); border-radius: var(--radius-md);
  padding: var(--spacing-md); font-size: var(--font-size-sm); line-height: 1.6;
  resize: none; outline: none; font-family: inherit;
}
.editor-textarea:focus { border-color: var(--color-primary); }
.editor-feedback {
  display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-sm);
}
.editor-feedback-input {
  flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: 2px solid var(--color-bg);
  border-radius: var(--radius-xl); font-size: var(--font-size-sm); outline: none;
}
.editor-feedback-btn {
  background: var(--color-secondary); color: white; border: none;
  border-radius: var(--radius-xl); padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm); cursor: pointer; font-weight: 600; white-space: nowrap;
}
.editor-footer {
  display: flex; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid rgba(0,0,0,0.06);
}
.editor-footer .btn-secondary, .editor-footer .btn-primary { width: auto; flex: 1; }

/* ========== 空状态 ========== */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--spacing-xl); text-align: center;
}
.empty-emoji { font-size: 40px; margin-bottom: var(--spacing-md); }
.empty-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ========== 响应式 ========== */
@media (max-width: 380px) {
  .hero-char { font-size: 80px; }
  .node-char { width: 48px; height: 48px; font-size: var(--font-size-xl); }
  .editor-modules { width: 110px; }
  .editor-module-item { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-xs); }
  .knowledge-tabs { gap: 2px; }
  .knowledge-tab { padding: 6px 10px; font-size: 12px; }
}

/* ========== 知识页 ========== */
.knowledge-header {
  position: relative; padding: var(--spacing-xl) var(--spacing-lg);
  color: white; overflow: hidden;
}
.knowledge-header-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #45B7D1, #4ECDC4);
  z-index: 0;
}
.knowledge-header-content { position: relative; z-index: 1; }
.knowledge-title { font-size: var(--font-size-xl); font-weight: 700; display: block; margin-bottom: 4px; }
.knowledge-sub { font-size: var(--font-size-sm); opacity: 0.9; margin-bottom: var(--spacing-md); }
.knowledge-search { margin-top: var(--spacing-md); }

/* 类别标签栏 */
.knowledge-tabs {
  display: flex; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-lg);
  overflow-x: auto; white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.knowledge-tabs::-webkit-scrollbar { display: none; }
.knowledge-tab {
  padding: 8px 14px; border-radius: var(--radius-xl); border: 2px solid var(--color-bg);
  background: var(--color-bg-white); font-size: var(--font-size-sm); font-weight: 500;
  cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.knowledge-tab.active {
  background: linear-gradient(135deg, #45B7D1, #4ECDC4);
  color: white; border-color: transparent;
}

/* 知识统计条 */
.knowledge-stats {
  padding: var(--spacing-xs) var(--spacing-lg);
  font-size: var(--font-size-xs); color: var(--color-text-secondary);
}

/* 知识列表 */
.knowledge-list { padding: 0 var(--spacing-lg); }

/* 知识卡片 */
.knowledge-card {
  cursor: pointer; transition: transform 0.2s; margin-bottom: var(--spacing-sm);
}
.knowledge-card:active { transform: scale(0.98); }
.knowledge-card-header {
  display: flex; align-items: center; gap: var(--spacing-xs); margin-bottom: 6px;
}
.knowledge-category-tag {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius-sm);
  font-weight: 600;
}
.knowledge-category-tag[data-cat="evolution"] { background: #FFF3E0; color: #E65100; }
.knowledge-category-tag[data-cat="poetry"] { background: #E8F5E9; color: #2E7D32; }
.knowledge-category-tag[data-cat="mythology"] { background: #F3E5F5; color: #7B1FA2; }
.knowledge-category-tag[data-cat="idiom"] { background: #E3F2FD; color: #1565C0; }
.knowledge-category-tag[data-cat="culture"] { background: #FFF9C4; color: #F57F17; }
.knowledge-category-tag[data-cat="character_origin"] { background: #FBE9E7; color: #BF360C; }
.knowledge-category-tag[data-cat="trivia"] { background: #E0F7FA; color: #00695C; }
.knowledge-category-tag[data-cat="general"] { background: #F5F5F5; color: #616161; }
.knowledge-char-tag {
  font-size: 14px; font-weight: 700; color: var(--color-primary);
}
.knowledge-verified { font-size: 12px; }
.knowledge-card-title {
  font-size: var(--font-size-base); font-weight: 600;
  margin-bottom: 4px; line-height: 1.4;
}
.knowledge-card-content {
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
  line-height: 1.5; margin-bottom: 6px;
}
.knowledge-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--font-size-xs); color: var(--color-text-light);
}
.knowledge-source { font-size: var(--font-size-xs); }

/* 浮动推荐按钮 */
.recommend-fab {
  position: fixed; bottom: calc(var(--tabbar-height) + 80px); right: 20px;
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, #45B7D1, #4ECDC4);
  color: white; font-size: 22px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; z-index: 500;
  box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
  transition: transform 0.2s;
}
.recommend-fab:active { transform: scale(0.9); }

/* 知识页操作按钮 */
.knowledge-actions {
  display: flex; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg);
}
.knowledge-action-btn { flex: 1; font-size: var(--font-size-sm); }

/* 推荐表单弹窗 */
.recommend-modal-card { max-height: 90vh; }
.recommend-close-btn { cursor: pointer; font-size: 20px; color: var(--color-text-light); }
.recommend-form { padding: var(--spacing-lg); }
.recommend-form select {
  width: 100%; padding: var(--spacing-md); border: 2px solid var(--color-bg);
  border-radius: var(--radius-md); font-size: var(--font-size-base);
  outline: none; background: white; transition: border-color 0.2s;
}
.recommend-form select:focus { border-color: var(--color-primary); }
.recommend-form textarea {
  width: 100%; padding: var(--spacing-md); border: 2px solid var(--color-bg);
  border-radius: var(--radius-md); font-size: var(--font-size-sm); line-height: 1.6;
  resize: vertical; outline: none; font-family: inherit;
}
.recommend-form textarea:focus { border-color: var(--color-primary); }
.rec-image-upload { margin-top: var(--spacing-xs); }
.rec-image-upload input[type="file"] { font-size: var(--font-size-sm); }
.rec-image-preview { margin-top: var(--spacing-sm); }
.rec-preview-img { max-width: 100%; max-height: 120px; border-radius: var(--radius-md); }

/* 推荐列表（我的推荐 / 审核列表） */
.recommend-list { padding: var(--spacing-md); max-height: 70vh; overflow-y: auto; }
.recommend-item { margin-bottom: var(--spacing-sm); }
.recommend-item-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.recommend-item-category {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--color-bg); font-weight: 500;
}
.recommend-item-status {
  font-size: 11px; padding: 2px 10px; border-radius: var(--radius-sm);
  color: white; font-weight: 600;
}
.recommend-item-title { font-size: var(--font-size-base); font-weight: 600; margin-bottom: 4px; }
.recommend-item-meta { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-bottom: 4px; }
.recommend-item-content {
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
  line-height: 1.5; margin-bottom: 6px;
}
.recommend-item-note {
  font-size: var(--font-size-xs); color: var(--color-text-light);
  padding: 6px 10px; background: var(--color-bg); border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.recommend-item-time { font-size: var(--font-size-xs); color: var(--color-text-light); }
.recommend-item-actions {
  display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-sm);
}
.recommend-item-actions .btn-sm {
  flex: 1; padding: 8px; font-size: var(--font-size-sm); text-align: center;
}
.recommend-ai-review {
  font-size: var(--font-size-xs); color: #45B7D1; padding: 6px 10px;
  background: #E0F7FA; border-radius: var(--radius-sm); margin-bottom: 6px;
  line-height: 1.4;
}

/* 知识详情弹窗 */
.knowledge-detail-card { max-height: 85vh; }
.knowledge-detail-body { padding: var(--spacing-lg); }
.knowledge-detail-tags { display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); flex-wrap: wrap; }
.knowledge-detail-content {
  font-size: var(--font-size-base); line-height: 1.8; color: var(--color-text);
  white-space: pre-line;
}
.knowledge-detail-source {
  margin-top: var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text-secondary);
}
.knowledge-detail-source a { color: #45B7D1; text-decoration: none; }
.knowledge-detail-tags-list {
  margin-top: var(--spacing-sm); font-size: var(--font-size-xs); color: var(--color-text-light);
}