/* 口算系统基础样式 — 使用 CSS 变量支持主题切换 */
:root {
  --header_start: #6366F1;
  --header_end: #818CF8;
  --primary: #6366F1;
  --primary_hover: #5558E6;
  --accent: #6366F1;
  --accent_hover: #5558E6;
  --bg: #f0f0ff;
  --card_bg: #ffffff;
  --footer_bg: #3730A3;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, "Microsoft YaHei", sans-serif; background: var(--bg, #f5f5f5); color: #333; line-height: 1.6; }

.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* 页头 */
.site-header { background: linear-gradient(135deg, var(--header_start, #FF7E5F), var(--header_end, #FEB47B)); color: #fff; padding: 15px 0; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-header .logo { font-size: 24px; }
.site-header nav a { color: #fff; text-decoration: none; margin-left: 20px; opacity: 0.9; }
.site-header nav a:hover { opacity: 1; }

/* 移动端导航 */
@media (min-width: 769px) {
  .menu-toggle { display: none !important; }
}
.menu-toggle { background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; padding: 0 4px; line-height: 1; }

/* 横幅 */
.today-banner { background: var(--card_bg, #fff); border-radius: 12px; padding: 30px; margin: 20px 0; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.today-banner h2 { font-size: 22px; margin-bottom: 8px; }
.today-banner p { color: #666; }

/* 年级板块 */
.grade-section { background: var(--card_bg, #fff); border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.grade-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #f0f0f0; }
.grade-title { font-size: 20px; color: var(--accent, #4ECDC4); }

.grade-controls { display: flex; align-items: center; gap: 10px; }

/* 学期切换标签 */
.sem-tabs { display: flex; gap: 2px; background: #f0f0f0; border-radius: 6px; padding: 2px; }
.sem-tab { padding: 4px 14px; border: none; border-radius: 4px; background: transparent; color: #666; cursor: pointer; font-size: 13px; font-family: inherit; transition: 0.2s; }
.sem-tab.active { background: var(--primary, #4ECDC4); color: #fff; }
.sem-tab:hover:not(.active) { color: #333; }

/* 历史口算按钮 */
.btn-history { display: inline-block; padding: 6px 14px; background: #f0f0f0; color: var(--accent, #4ECDC4); border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 500; transition: 0.2s; }
.btn-history:hover { background: color-mix(in srgb, var(--accent, #4ECDC4) 10%, var(--card_bg, #fff)); }

/* 暂无题目 */
.sem-empty { text-align: center; padding: 20px; color: #ccc; font-size: 14px; }

/* 题目网格 */
.exercise-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.exercise-card { background: color-mix(in srgb, var(--card_bg, #fff) 98%, #ccc); border: 1px solid #eee; border-radius: 8px; padding: 14px; text-align: center; }
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.card-meta { font-size: 12px; color: #999; margin-bottom: 10px; }

.btn-download { display: inline-block; background: var(--primary, #4ECDC4); color: #fff; padding: 6px 16px; border-radius: 20px; text-decoration: none; font-size: 13px; transition: background 0.2s; }
.btn-download:hover { background: var(--primary_hover, #45B7AA); }
.btn-sm { padding: 3px 12px; font-size: 12px; }

.btn-disabled { display: inline-block; background: #ddd; color: #999; padding: 6px 16px; border-radius: 20px; font-size: 13px; }

.empty-state { text-align: center; padding: 60px 20px; color: #999; }

/* 页脚 */
.site-footer { background: var(--footer_bg, #333); color: #999; text-align: center; padding: 20px 0; margin-top: 40px; font-size: 13px; }

/* 年级页面 */
.page-header { display: flex; align-items: center; justify-content: space-between; margin: 20px 0; }
.page-header h2 { font-size: 22px; }
.btn-back { color: var(--accent, #4ECDC4); text-decoration: none; font-size: 14px; }
.btn-back:hover { color: var(--accent_hover, #45B7AA); }

.unit-list { background: var(--card_bg, #fff); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.unit-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #f0f0f0; }
.unit-item:last-child { border-bottom: none; }
.unit-keyword { font-size: 15px; font-weight: 500; }

/* 搜索 */
.search-box { display: flex; gap: 10px; margin-bottom: 20px; }
.search-box input { flex: 1; padding: 10px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; }
.search-box button { padding: 10px 24px; background: var(--primary, #4ECDC4); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 15px; }
.search-box button:hover { background: var(--primary_hover, #45B7AA); }
.search-results .exercise-card { margin-bottom: 10px; }

/* 站点地图 */
.sitemap-section { background: var(--card_bg, #fff); border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.sitemap-section h3 { margin-bottom: 15px; color: var(--accent, #4ECDC4); }
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; }
.sitemap-card { background: color-mix(in srgb, var(--card_bg, #fff) 98%, #ccc); border: 1px solid #eee; border-radius: 8px; padding: 15px; text-align: center; }
.sitemap-card h4 { margin-bottom: 10px; font-size: 16px; }
.sitemap-card .btn-download { margin: 3px; font-size: 12px; padding: 4px 12px; }
.article-list { list-style: none; }
.article-list li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.article-list a { color: var(--accent, #4ECDC4); text-decoration: none; }
.article-list a:hover { text-decoration: underline; }

/* 历史口算页面 */
.exercise-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 10px 24px; border-bottom: 1px solid #f5f5f5; gap: 8px; }
.exercise-row:last-child { border-bottom: none; }
.exercise-row:hover { background: color-mix(in srgb, var(--accent, #4ECDC4) 5%, var(--card_bg, #fff)); }
.exercise-title { flex: 1; font-size: 14px; margin: 0 12px; }
.exercise-count { color: #999; font-size: 12px; min-width: 50px; text-align: right; margin-right: 4px; }
.date-group { margin-bottom: 20px; }
.date-header { padding: 8px 16px; background: color-mix(in srgb, var(--accent, #4ECDC4) 8%, var(--card_bg, #fff)); border-radius: 6px; font-size: 14px; color: #555; margin: 0 0 8px 0; }
.no-data { text-align: center; padding: 40px; color: #ccc; }
.loading { text-align: center; padding: 40px; color: #999; }

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
  .container { padding: 0 12px; }
  .site-header { padding: 12px 0; }
  .site-header .logo { font-size: 18px; }
  .site-header nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: color-mix(in srgb, var(--header_start, #FF7E5F) 85%, #000); flex-direction: column; padding: 8px 0; z-index: 100; border-radius: 0 0 12px 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: 12px 20px; margin: 0; border-top: 1px solid rgba(255,255,255,0.08); font-size: 15px; }
  .site-header nav a:first-child { border-top: none; }
  .site-header .container { position: relative; }
  .menu-toggle { display: block; }
  .today-banner { padding: 20px 16px; margin: 12px 0; border-radius: 10px; }
  .today-banner h2 { font-size: 17px; }
  .today-banner p { font-size: 13px; }
  .grade-section { padding: 14px; border-radius: 10px; }
  .grade-title { font-size: 17px; }
  .sem-tab { padding: 6px 12px; font-size: 13px; }
  .btn-history { font-size: 12px; padding: 5px 10px; }
  .exercise-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .exercise-card { padding: 12px 8px; }
  .card-title { font-size: 13px; }
  .card-meta { font-size: 11px; }
  .btn-download { font-size: 12px; padding: 6px 12px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-header h2 { font-size: 18px; }
  .unit-item { padding: 12px 14px; flex-wrap: wrap; gap: 6px; }
  .unit-keyword { font-size: 14px; }
  .sitemap-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sitemap-section { padding: 14px; }
  .search-box { flex-direction: column; }
  .search-box input { font-size: 16px; }
  .search-box button { width: 100%; }
  .site-footer { font-size: 12px; padding: 14px 0; margin-top: 24px; }
  .empty-state { padding: 40px 16px; font-size: 14px; }
  .exercise-row { padding: 10px 12px; flex-wrap: wrap; gap: 10px; }
  .exercise-title { font-size: 13px; margin: 0 8px; }
  .date-header { font-size: 13px; padding: 6px 12px; }
  .date-group { margin-bottom: 14px; }
}

@media (max-width: 480px) {
  .exercise-grid { grid-template-columns: 1fr; }
  .grade-header { flex-direction: column; align-items: stretch; }
  .grade-controls { justify-content: space-between; }
  .sitemap-grid { grid-template-columns: 1fr; }
  .today-banner h2 { font-size: 15px; }
}