/* ============================================
   页面专属样式
   ============================================ */

/* === 首页仪表盘 === */
.home-page .dashboard-overview { margin-bottom: var(--space-xl); }
.home-page .dashboard-main { margin-bottom: var(--space-xl); }
.home-page .dashboard-secondary { margin-bottom: var(--space-xl); }

.progress-overview {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}
.progress-details { flex: 1; min-width: 250px; }

.streak-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--fs-base);
}
.streak-icon { color: var(--accent-danger); display: flex; }
.streak-time { margin-left: auto; color: var(--text-tertiary); font-size: var(--fs-sm); }

.heatmap {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 4px;
  margin-bottom: var(--space-md);
}
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  transition: all var(--transition-fast);
}
.heatmap-cell.active {
  background: var(--accent-primary);
  opacity: 0.8;
}
.heatmap-cell.active:hover { opacity: 1; transform: scale(1.15); }
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.heatmap-cells { display: flex; gap: 2px; }
.heatmap-cells .heatmap-cell { width: 12px; height: 12px; }

.trend-chart {
  position: relative;
  height: 140px;
  display: flex;
  align-items: flex-end;
  margin-bottom: var(--space-md);
}
.trend-bar {
  position: absolute;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trend-bar-fill {
  width: 100%;
  background: var(--accent-primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 2px;
  transition: height var(--transition-slow);
}
.trend-bar-value {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  font-family: var(--font-mono);
}
.trend-bar-label {
  position: absolute;
  bottom: -20px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.trend-summary {
  display: flex;
  gap: var(--space-xl);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding-top: var(--space-lg);
  border-top: 1px dashed var(--border);
  margin-top: var(--space-xl);
}

.study-plan { padding: var(--space-sm) 0; }
.plan-phase {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: var(--space-sm);
}
.plan-desc {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}
.plan-progress { margin-bottom: var(--space-md); }

.quick-actions { margin-top: var(--space-2xl); }
.action-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
  font-family: var(--font-body);
}
.action-card:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.action-card svg { color: var(--accent-primary); margin-bottom: var(--space-sm); }
.action-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}
.action-desc { font-size: var(--fs-sm); color: var(--text-secondary); }

/* === 章节学习页 === */
.study-page .kp-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
}
.kp-code-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--accent-primary);
  background: var(--accent-primary-bg);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-right: var(--space-sm);
}
.kp-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.kp-content { margin-bottom: var(--space-2xl); }
.content-section {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px dashed var(--border);
}
.content-section:last-child { border-bottom: none; }
.content-section-title {
  font-size: var(--fs-md);
  color: var(--accent-primary);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.content-details p { margin-bottom: var(--space-md); line-height: 1.8; }
.feature-list {
  list-style: none;
  padding-left: 0;
}
.feature-list li {
  padding: var(--space-sm) 0;
  padding-left: var(--space-xl);
  position: relative;
  border-bottom: 1px solid var(--border-light);
}
.feature-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--accent-primary);
  font-weight: bold;
}
.key-points { display: flex; flex-direction: column; gap: var(--space-sm); }
.key-point-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--accent-secondary-bg);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-base);
}
.key-point-item svg { color: var(--accent-secondary); flex-shrink: 0; margin-top: 3px; }
.exam-tips-section { background: var(--accent-gold-bg); border-radius: var(--radius-lg); padding: var(--space-lg); border-bottom: none; }
.exam-tips {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text-primary);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-gold);
}

.kp-exercises { margin-bottom: var(--space-2xl); }
.section-title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.section-count { font-size: var(--fs-sm); color: var(--text-tertiary); font-weight: 400; }

.page-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-top: var(--space-xl);
  border-top: 1px dashed var(--border);
}
.page-actions {
  margin-top: var(--space-xl);
  text-align: center;
}

/* === 错题本页 === */
.wrong-stats { margin-bottom: var(--space-xl); }
.wrong-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
  flex-wrap: wrap;
}
.wrong-group { margin-bottom: var(--space-xl); }
.wrong-group-title {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px dashed var(--border);
}
.wrong-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
  border-left: 3px solid var(--accent-danger);
}
.wrong-item.reviewed { border-left-color: var(--accent-gold); }
.wrong-item.mastered { border-left-color: var(--accent-secondary); }
.wrong-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.wrong-item-count { color: var(--accent-danger); }
.wrong-item-date { margin-left: auto; }
.wrong-item-question {
  font-size: var(--fs-base);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}
.wrong-item-actions {
  display: flex;
  gap: var(--space-sm);
}

/* === 模拟测试页 === */
.mock-config-card { margin-bottom: var(--space-xl); }
.mock-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.mock-info-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-md);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}
.mock-info-label { color: var(--text-secondary); font-size: var(--fs-sm); }
.mock-info-value { font-weight: 600; color: var(--text-primary); font-size: var(--fs-base); }

.mock-distribution { margin-bottom: var(--space-xl); }
.distribution-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.distribution-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

.mock-history { margin-top: var(--space-2xl); }
.mock-history-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.mock-history-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.mock-history-item:hover { background: var(--bg-hover); }
.mock-history-score {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  width: 48px;
  text-align: center;
}
.mock-history-score.good { color: var(--accent-secondary); }
.mock-history-score.ok { color: var(--accent-gold); }
.mock-history-score.bad { color: var(--accent-danger); }
.mock-history-info { flex: 1; font-size: var(--fs-sm); }
.mock-history-arrow { color: var(--text-tertiary); }

/* 模考答题界面 */
.mock-exam-page { max-width: 800px; margin: 0 auto; }
.mock-exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
  position: sticky;
  top: 60px;
  z-index: 10;
}
.mock-exam-timer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.mock-exam-timer.timer-warning { color: var(--accent-danger); animation: shake 500ms ease infinite; }
.mock-exam-progress { font-size: var(--fs-sm); color: var(--text-secondary); }

.mock-exam-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px dashed var(--border);
}
.mock-question-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  flex: 1;
}
.mock-grid-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mock-grid-btn:hover { border-color: var(--border-strong); }
.mock-grid-btn.answered {
  background: var(--accent-primary-bg);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.mock-grid-btn.current {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}

/* 模考结果页 */
.mock-result-page { max-width: 800px; margin: 0 auto; }
.result-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  padding: var(--space-2xl);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
}
.result-info { text-align: left; }
.result-score {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 700;
}
.result-score.pass { color: var(--accent-secondary); }
.result-score.fail { color: var(--accent-danger); }
.result-label { font-size: var(--fs-md); color: var(--text-secondary); margin-bottom: var(--space-md); }
.result-meta {
  display: flex;
  gap: var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.result-meta span { display: flex; align-items: center; gap: 4px; }

.result-categories { margin-bottom: var(--space-xl); }
.category-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.category-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.category-name { width: 140px; font-size: var(--fs-sm); color: var(--text-secondary); flex-shrink: 0; }
.category-bar { flex: 1; }
.category-score { width: 40px; text-align: right; font-size: var(--fs-sm); font-family: var(--font-mono); color: var(--text-primary); }

.result-review { margin-bottom: var(--space-xl); }
.review-list { display: flex; flex-direction: column; gap: var(--space-md); }
.review-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.review-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.review-item-num { font-size: var(--fs-sm); color: var(--text-tertiary); font-family: var(--font-mono); }

.result-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  padding-top: var(--space-xl);
}

/* === 收藏夹页 === */
.fav-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-sm);
}
.fav-tab {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: var(--fs-base);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}
.fav-tab:hover { color: var(--text-primary); }
.fav-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}
.fav-tab-count {
  font-size: var(--fs-xs);
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}
.fav-tab.active .fav-tab-count {
  background: var(--accent-primary-bg);
  color: var(--accent-primary);
}

.fav-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.fav-item:hover { border-color: var(--accent-primary); }
.fav-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.fav-item-code { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent-primary); }
.fav-item-chapter { font-size: var(--fs-xs); color: var(--text-tertiary); }
.fav-item-title { font-size: var(--fs-md); color: var(--text-primary); margin-bottom: var(--space-xs); }
.fav-item-summary { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-sm); }
.fav-item-actions { display: flex; gap: var(--space-sm); }

/* === 速记卡页 === */
.flashcards-page { max-width: 700px; margin: 0 auto; }
.flashcard-filters {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}
.flashcard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xl);
}
.flashcard-position {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

/* === 章节列表 === */
.chapter-list { display: flex; flex-direction: column; gap: var(--space-md); }
.kp-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.exercise-list { display: flex; flex-direction: column; gap: var(--space-lg); }

/* === 设置/同步页 === */
.settings-page { max-width: 800px; margin: 0 auto; }
.sync-overview-card { margin-bottom: var(--space-xl); }
.sync-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.sync-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.sync-stat-label { font-size: var(--fs-sm); color: var(--text-tertiary); }
.sync-stat-value { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }

.sync-method-card { margin-bottom: var(--space-lg); }
.sync-method-header {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.sync-method-icon {
  color: var(--accent-primary);
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary-bg);
  border-radius: var(--radius-md);
}
.sync-method-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.sync-method-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}
.sync-method-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}
.sync-method-body { margin-top: var(--space-md); }

.sync-code-display {
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.sync-code-display label { font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 1px; }
.sync-code-value {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent-primary);
  cursor: pointer;
  padding: var(--space-sm) 0;
  word-break: break-all;
}
.sync-code-hint { font-size: var(--fs-xs); color: var(--text-tertiary); }

.sync-code-input-group {
  display: flex;
  gap: var(--space-sm);
  flex: 1;
}
.sync-code-input-group input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--fs-base);
  font-family: var(--font-mono);
  outline: none;
  transition: border-color var(--transition-fast);
}
.sync-code-input-group input:focus { border-color: var(--accent-primary); }

.qr-container {
  margin-top: var(--space-lg);
  text-align: center;
}
#qrCodeArea {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
}
#qrCodeArea img, #qrCodeArea canvas {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.qr-loading { padding: var(--space-xl); color: var(--text-secondary); }
.qr-fallback input {
  width: 100%;
  padding: var(--space-sm);
  margin-top: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.sync-url-display { margin-top: var(--space-sm); }
.sync-url-display input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  background: var(--bg-primary);
  color: var(--text-primary);
}
.sync-hint {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-md);
  text-align: center;
}

.firebase-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.firebase-setup-hint { font-weight: 500; margin-bottom: var(--space-sm); }
.firebase-steps {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.8;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-md);
}
.firebase-steps code {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}
.firebase-steps a { color: var(--accent-primary); }
.firebase-config-input textarea {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  resize: vertical;
  outline: none;
  margin-bottom: var(--space-md);
  transition: border-color var(--transition-fast);
}
.firebase-config-input textarea:focus { border-color: var(--accent-primary); }

.danger-card {
  border-color: var(--accent-danger);
  border-style: dashed;
}