/* ==================== 课本导航（练习卡片上方） ==================== */
.textbook-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.textbook-nav__btn {
  border: none;
  border-radius: 16px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.15s, box-shadow 0.15s;
}
.textbook-nav__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.textbook-nav__btn--chinese {
  background: linear-gradient(135deg, #ff9f43 0%, #f97316 100%);
}
.textbook-nav__btn--math {
  background: linear-gradient(135deg, #5ec2f2 0%, #2b8fd6 100%);
}
.textbook-nav__btn--english {
  background: linear-gradient(135deg, #8a6cff 0%, #6d28d9 100%);
}
.textbook-nav__btn--formula {
  background: linear-gradient(135deg, #f59e0b 0%, #e67e22 100%);
  text-decoration: none;
  display: inline-block;
}
.textbook-nav a.textbook-nav__btn {
  text-decoration: none;
  display: inline-block;
}

/* 朗读语速调节 */
.ra-rate-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ra-rate-label {
  font-size: 13px;
  color: #888;
}
.ra-rate-pill {
  background: #f0f2f8;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
}
.ra-rate-pill:hover { background: #e4e7f2; }
.ra-rate-pill.active {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
.textbook-nav__hint {
  font-size: 12px;
  color: #999;
  margin-left: 4px;
}
@media (max-width: 600px) {
  .textbook-nav__hint { display: none; }
}

/* ==================== 年级选择键 ==================== */
.ra-grade-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ra-grade-pill {
  background: #f0f2f8;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
}
.ra-grade-pill:hover { background: #e4e7f2; }
.ra-grade-pill.active {
  background: #667eea;
  color: #fff;
  border-color: #667eea;
}

/* ==================== 数学课本面板 ==================== */
.mathbook-unit {
  background: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.mathbook-unit__title {
  font-size: 16px;
  font-weight: 700;
  color: #2b6cb0;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8eef7;
}
.mathbook-points {
  margin: 0;
  padding-left: 18px;
}
.mathbook-points li {
  font-size: 14.5px;
  color: #444;
  line-height: 1.9;
  margin-bottom: 4px;
}
.mathbook-example {
  margin-top: 10px;
  background: #fef9e7;
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #7d6608;
  line-height: 1.9;
}

/* ==================== 本周练习统计 ==================== */
.weekly-stats {
  background: #fff;
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 版头中的本周统计（毛玻璃风格） */
.weekly-stats--header {
  margin: 12px auto 0;
  max-width: 720px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.weekly-stats--header .weekly-stats__title {
  color: #fff;
}
.weekly-stats--header .weekly-stats__summary {
  color: rgba(255, 255, 255, 0.85);
}
.weekly-stats--header .week-day {
  background: rgba(255, 255, 255, 0.9);
}
.weekly-stats--header .week-day.is-today {
  background: #fff;
  border-color: #ffd54f;
}
.weekly-stats--header .week-day.is-active {
  border-color: #ffd54f;
  box-shadow: 0 2px 10px rgba(255, 213, 79, 0.4);
}
.weekly-stats--header .week-day__name {
  color: #555;
}
.weekly-stats--header .week-day.is-today .week-day__name {
  color: #b45309;
}
.weekly-stats__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 6px;
}
.weekly-stats__title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.weekly-stats__summary {
  font-size: 13px;
  color: #888;
}
.weekly-stats__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.week-day {
  background: #f7f8fc;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.week-day:hover {
  background: #eef0fb;
  transform: translateY(-2px);
}
.week-day.is-today {
  border-color: #667eea;
  background: #eef0ff;
}
.week-day.is-active {
  border-color: #8b5cf6;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}
.week-day__name {
  font-size: 13px;
  font-weight: 700;
  color: #444;
}
.week-day.is-today .week-day__name { color: #667eea; }
.week-day__date {
  font-size: 11px;
  color: #aaa;
  margin: 2px 0 6px;
}
.week-day__status {
  font-size: 12px;
  margin-bottom: 3px;
}
.week-day__none { color: #bbb; }
.week-day__partial { color: #b45309; font-weight: 600; }
.week-day__all { color: #16a34a; font-weight: 600; }
.week-day__score {
  font-size: 12px;
  font-weight: 700;
  color: #555;
}
@media (max-width: 600px) {
  .weekly-stats__days { grid-template-columns: repeat(4, 1fr); }
}

/* ==================== 主页面两栏布局（左内容 + 右新闻） ==================== */
.page-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas:
    "top news"
    "content news";
  gap: 16px;
  align-items: start;
}
.top-section { grid-area: top; }
.content-row { grid-area: content; }
.news-sidebar {
  grid-area: news;
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
@media (max-width: 1200px) {
  .page-body {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "content" "news";
  }
  .news-sidebar {
    position: static;
    max-height: none;
  }
}

/* ==================== 每日科技新闻侧栏 ==================== */
.news-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.news-sidebar__title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.news-sidebar__more {
  font-size: 12px;
  color: #0ea5e9;
  text-decoration: none;
}
.news-sidebar__more:hover { text-decoration: underline; }
.news-sidebar__date {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f5;
}
.news-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.news-sidebar-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}
.news-sidebar-item:hover { background: #f0f9ff; }
.news-sidebar-item__cat {
  flex-shrink: 0;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  margin-top: 1px;
}
.news-sidebar-item__title {
  font-size: 13px;
  color: #444;
  line-height: 1.5;
}

/* ==================== 主页面课外书阅读 ==================== */
.books-inline {
  background: #fff;
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.books-inline__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 6px;
}
.books-inline__title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.books-inline__more {
  font-size: 13px;
  color: #8b5cf6;
  text-decoration: none;
}
.books-inline__more:hover { text-decoration: underline; }
.books-inline__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
/* 仿书籍封面卡片 */
.book-inline-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  border-radius: 6px 12px 12px 6px;
  padding: 18px 12px 14px;
  min-height: 160px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  transition: all 0.18s;
  overflow: hidden;
}
.book-inline-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}
/* 书脊 */
.book-inline-card__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: rgba(0,0,0,0.22);
  border-radius: 6px 0 0 6px;
}
.book-inline-card__icon {
  font-size: 30px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.book-inline-card__title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  letter-spacing: 0.03em;
}
.book-inline-card__author {
  font-size: 11px;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.35);
  padding-top: 6px;
  width: 80%;
}
@media (max-width: 600px) {
  .books-inline__grid { grid-template-columns: repeat(3, 1fr); }
  .book-inline-card { min-height: 130px; padding: 12px 8px 10px; }
  .book-inline-card__title { font-size: 12.5px; }
}

/* ==================== 悬浮返回按钮 ==================== */
.btn-floating-back {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 9000;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.45);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-floating-back:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(102, 126, 234, 0.55);
}
.btn-floating-back:active {
  transform: translateY(0);
}

/* ==================== 右上角返回按钮 ==================== */
.btn-back-topright {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255,255,255,0.22);
  padding: 7px 16px;
  border-radius: 16px;
  z-index: 20;
  transition: background 0.2s;
}
.btn-back-topright:hover { background: rgba(255,255,255,0.38); }

/* 打印练习卷按钮 */
.btn-print {
  display: inline-block;
  margin-top: 10px;
  background: rgba(255,255,255,0.25);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.65);
  border-radius: 18px;
  padding: 7px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-print:hover { background: rgba(255,255,255,0.42); }

/* 学科卡片里的打印按钮（右上角） */
.dash-card__print {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.06);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  z-index: 3;
}
.dash-card__print:hover {
  background: rgba(0,0,0,0.14);
  transform: scale(1.12);
}

.reading-inline-fill {
  display: inline-block;
  width: 110px;
  margin: 0 4px;
  vertical-align: middle;
  border: 1px solid #c8cde8;
  border-bottom: 2px solid #8b5cf6;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 14px;
}

/* ==================== 登录遮罩 ==================== */
.login-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
}
.login-card {
  background: #fff; border-radius: 16px; padding: 40px 36px;
  width: 360px; max-width: 90vw; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-card__icon { font-size: 48px; margin-bottom: 8px; }
.login-card h2 { font-size: 22px; color: #333; margin-bottom: 4px; }
.login-card__hint { font-size: 13px; color: #999; margin-bottom: 24px; }
.login-card__field {
  display: flex; align-items: center; margin-bottom: 14px;
  border: 1px solid #ddd; border-radius: 10px; overflow: hidden;
}
.login-card__label {
  padding: 10px 12px; font-size: 18px; background: #f5f5f5;
  border-right: 1px solid #ddd;
}
.login-card__input {
  flex: 1; border: none; outline: none; padding: 10px 14px;
  font-size: 15px; background: #fff;
}
.login-card__error {
  color: #e74c3c; font-size: 13px; min-height: 20px; margin-bottom: 8px;
}
.login-card__btn {
  width: 100%; padding: 12px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: opacity 0.2s;
}
.login-card__btn:hover { opacity: 0.9; }
.login-card__icp {
  margin-top: 16px; font-size: 11px; color: #bbb;
}

/* ==================== 基础样式 ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==================== 拼音注音样式 ==================== */
ruby {
  ruby-align: center;
}

ruby rt {
  font-size: 1em;
  font-weight: 400;
  color: #888;
  letter-spacing: 0;
  line-height: 1;
}

.question-text ruby rt {
  font-size: 1em;
  color: #999;
}

.option-btn ruby rt {
  font-size: 0.85em;
  color: #aaa;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif;
  background: #f0f2f8;
  min-height: 100vh;
  color: #333;
}

/* ==================== 页面主布局 ==================== */
.page-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px 30px;
}

/* 上方区域：科目 + 进度（独立占满宽度） */
.top-section {
  margin-bottom: 16px;
}

/* 内容行 */
.content-row {
  /* 单栏布局 */
}

/* 中间答题区 */
.center-area {
  max-width: 600px;
  margin: 0 auto;
}

/* ==================== 科目横排（Pill 样式） ==================== */
.subjects-row {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  background: white;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(102, 126, 234, 0.08);
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.subjects-row::-webkit-scrollbar { display: none; }

.subject-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--pill-color), color-mix(in srgb, var(--pill-color) 70%, #333));
  color: white;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--pill-color) 30%, transparent);
  position: relative;
  user-select: none;
}

.subject-pill:active {
  transform: scale(0.96);
}

.subject-pill:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--pill-color) 40%, transparent);
  transform: translateY(-2px);
}

.subject-pill.is-done {
  opacity: 0.7;
}
.subject-pill.is-done::after {
  content: '✓';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4caf50;
  color: white;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.25);
  font-size: 16px;
  font-weight: 800;
}

.pill-name {
  font-size: 15px;
  font-weight: 700;
}

.pill-progress {
  font-size: 12px;
  background: rgba(255,255,255,0.25);
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}

.pill-status {
  font-size: 12px;
  font-weight: 700;
}

/* ==================== 每日进度条 ==================== */
.daily-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  background: white;
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 2px 16px rgba(102, 126, 234, 0.08);
}

/* 版头中的今日进度 */
.daily-summary--header {
  margin: 12px auto 0;
  max-width: 640px;
  padding: 10px 18px;
  gap: 14px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.daily-summary--header .summary-label,
.daily-summary--header .stat-unit,
.daily-summary--header .stat-label {
  color: rgba(255, 255, 255, 0.85);
}
.daily-summary--header .stat-value {
  color: #fff;
}
.daily-summary--header .summary-progress-bar {
  background: rgba(255, 255, 255, 0.25);
}
.daily-summary--header .summary-progress-fill {
  background: linear-gradient(90deg, #ffd54f, #fff59d);
}
.daily-summary--header .btn-reset-today {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.summary-left {
  flex: 1;
  min-width: 0;
}

.summary-label {
  font-size: 13px;
  color: #888;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.summary-progress-bar {
  height: 10px;
  background: #eef0f6;
  border-radius: 5px;
  overflow: hidden;
}

.summary-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 5px;
  transition: width 0.5s ease;
}

.summary-right {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
}

.summary-stat {
  text-align: center;
}

.stat-value {
  font-size: 22px;
  font-weight: 800;
  color: #667eea;
}

.stat-unit {
  font-size: 13px;
  color: #999;
  font-weight: 500;
}

.summary-score .stat-value {
  color: #764ba2;
}

.btn-reset-today {
  margin-left: 12px;
  padding: 5px 14px;
  border: 1px solid #ddd;
  border-radius: 18px;
  background: #fff;
  color: #e67e22;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-weight: 600;
}
.btn-reset-today:hover {
  background: #e67e22;
  color: #fff;
  border-color: #e67e22;
}

.stat-label {
  font-size: 11px;
  color: #aaa;
  display: block;
  font-weight: 600;
}

/* ==================== 响应式：小屏 ==================== */
@media (max-width: 600px) {
  .page-body {
    padding: 10px 12px 20px;
  }
  .subjects-row {
    gap: 8px;
    padding: 10px 12px;
  }
  .subject-pill {
    padding: 8px 10px;
    gap: 4px;
  }
  .pill-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .pill-name {
    font-size: 13px;
  }
  .pill-progress {
    font-size: 11px;
    padding: 1px 6px;
  }
  .daily-summary {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .summary-right {
    justify-content: space-around;
  }
  .entry-links-row {
    flex-direction: column;
    gap: 10px;
  }
}

/* ==================== 顶部标题 ==================== */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 20px 18px;
  text-align: center;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.25);
  margin-bottom: 0;
}

.header h1 {
  font-size: 22px;
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.date-display {
  font-size: 14px;
  opacity: 0.9;
}

.header-date-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-catchup-inline {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-catchup-inline:hover {
  background: rgba(255,255,255,0.35);
}

.btn-logout-inline {
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-logout-inline:hover {
  background: rgba(255,100,100,0.4);
  border-color: rgba(255,150,150,0.5);
}

/* ==================== 周末模式横幅 ==================== */
.weekend-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), rgba(243, 156, 18, 0.06));
  border: 1.5px solid rgba(230, 126, 34, 0.25);
  border-radius: 16px;
  padding: 14px 18px;
  margin: 12px 20px 0;
}

.weekend-banner__icon {
  font-size: 28px;
  flex-shrink: 0;
}

.weekend-banner__text strong {
  display: block;
  font-size: 1rem;
  color: #d35400;
}

.weekend-banner__text small {
  display: block;
  font-size: 0.82rem;
  color: #e67e22;
  margin-top: 2px;
}

/* ==================== 补做模式横幅 ==================== */
.catchup-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.06));
  border: 1.5px solid rgba(102, 126, 234, 0.25);
  border-radius: 16px;
  padding: 14px 18px;
  margin: 12px 20px 0;
}

.catchup-banner__icon {
  font-size: 28px;
  flex-shrink: 0;
}

.catchup-banner__text strong {
  display: block;
  font-size: 1rem;
  color: #5b4ba8;
}

.catchup-banner__text small {
  display: block;
  font-size: 0.82rem;
  color: #8a7bc8;
  margin-top: 2px;
}

.catchup-banner__back {
  margin-left: auto;
  background: rgba(102, 126, 234, 0.15);
  color: #5b4ba8;
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 12px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.catchup-banner__back:hover {
  background: rgba(102, 126, 234, 0.25);
}

/* ==================== 补做按钮（已移至 header 日期旁） ==================== */

/* ==================== 补做日期选择面板 ==================== */
.catchup-panel {
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(102, 126, 234, 0.2);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 12px;
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.1);
  animation: slideDown 0.3s ease;
}

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

.catchup-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.catchup-panel__header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #1a2a4a;
}

.catchup-panel__close {
  border: 0;
  background: rgba(26, 42, 74, 0.08);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 1.2rem;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.catchup-panel__close:hover {
  background: rgba(239, 83, 80, 0.15);
  color: #e74c3c;
}

.catchup-panel__dates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.catchup-date-card {
  background: rgba(26, 42, 74, 0.04);
  border: 1.5px solid rgba(26, 42, 74, 0.1);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.catchup-date-card:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.15);
}

.catchup-date-card.is-today {
  border-color: rgba(138, 108, 255, 0.4);
  background: rgba(138, 108, 255, 0.08);
}

.catchup-date-card.is-today .catchup-date-card__weekday {
  color: #6c3dd8;
}

.catchup-date-card.is-active {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.15);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.catchup-date-card__weekday {
  font-size: 0.75rem;
  color: #666;
  font-weight: 600;
  margin-bottom: 4px;
}

.catchup-date-card__date {
  font-size: 1rem;
  font-weight: 700;
  color: #1a2a4a;
  margin-bottom: 6px;
}

.catchup-date-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-block;
}

.catchup-date-card__label.is-done {
  background: rgba(46, 175, 97, 0.12);
  color: #2eaf61;
}

.catchup-date-card__label.is-partial {
  background: rgba(230, 126, 34, 0.12);
  color: #e67e22;
}

.catchup-date-card__label.is-todo {
  background: rgba(239, 83, 80, 0.1);
  color: #e74c3c;
}

.catchup-date-card__label.is-today-label {
  background: rgba(138, 108, 255, 0.12);
  color: #6c3dd8;
}

/* ==================== 英文单词、短语练习 + 科技前沿 并列入口 ==================== */
.entry-links-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.btn-entry-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  text-decoration: none;
  padding: 14px 14px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.btn-entry-link:hover {
  transform: translateY(-2px);
}

.btn-entry-link:active {
  transform: scale(0.98);
}

.btn-entry-link--words {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 4px 16px rgba(245, 87, 108, 0.25);
}

.btn-entry-link--words:hover {
  box-shadow: 0 6px 24px rgba(245, 87, 108, 0.35);
}

.btn-entry-link__icon {
  font-size: 22px;
  flex-shrink: 0;
}

.btn-entry-link__text {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
}

.btn-entry-link__arrow {
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ==================== 空状态 ==================== */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(102, 126, 234, 0.08);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #555;
  margin-bottom: 6px;
}

.empty-hint {
  font-size: 14px;
  color: #aaa;
}

/* ==================== 答题区域 ==================== */
.main-area {
  /* 答题主区域 */
}

.subject-panel {
  /* 面板 */
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-header h2 {
  font-size: 20px;
  color: #333;
}

.btn-back {
  background: #eef0f6;
  border: none;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  color: #667eea;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-back:hover {
  background: #e0e4f0;
}

/* 答题进度条 */
.quiz-progress {
  margin-bottom: 16px;
}

.quiz-progress__bar {
  height: 8px;
  background: #eef0f6;
  border-radius: 4px;
  overflow: hidden;
}

.quiz-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 4px;
  transition: width 0.3s;
}

.quiz-progress__text {
  text-align: center;
  font-size: 13px;
  color: #999;
  margin-top: 4px;
}

/* 题目 */
.question-box {
  background: white;
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* 题目行（文字 + 朗读按钮） */
.question-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

.question-text {
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
  flex: 1;
}

/* 朗读按钮 */
.speak-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #f0f2f8;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}

.speak-btn:hover {
  background: #e0e4f0;
  transform: scale(1.1);
}

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

.speak-btn.speaking {
  background: #d0e8ff;
  animation: speakPulse 0.6s ease;
}

@keyframes speakPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); background: #c0ddff; }
  100% { transform: scale(1); }
}

/* 选项 */
.options-box {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.option-btn {
  background: white;
  border: 3px solid #eef0f6;
  border-radius: 15px;
  padding: 16px 18px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

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

.option-btn.correct {
  border-color: #4caf50;
  background: #e8f5e9;
  color: #388e3c;
  pointer-events: none;
}

.option-btn.wrong {
  border-color: #f44336;
  background: #ffebee;
  color: #d32f2f;
  pointer-events: none;
}

.correct-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  background: #4caf50;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
  animation: badgePop 0.3s ease;
}

@keyframes badgePop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* 大按钮 */
.big-btn {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 16px;
  border-radius: 15px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 12px;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

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

.big-btn:hover {
  box-shadow: 0 6px 24px rgba(102, 126, 234, 0.4);
}

.next-btn {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3);
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 15px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

/* ==================== 弹窗 ==================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 25px;
  padding: 30px;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-content h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.score-big {
  font-size: 56px;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 15px 0;
}

.score-detail {
  font-size: 16px;
  color: #666;
  margin-bottom: 8px;
}

.wrong-list {
  font-size: 15px;
  color: #e74c3c;
  margin: 10px 0 20px;
  line-height: 1.5;
}

/* ==================== 备案号底部 ==================== */
.site-footer {
  text-align: center;
  padding: 20px 0 16px;
  margin-top: 20px;
}

.site-footer a {
  color: #aaa;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer a:hover {
  color: #667eea;
  text-decoration: underline;
}

/* ==================== 跟读科目 pill ==================== */
.subject-pill--readalong {
  cursor: pointer;
}

.subject-pill--news {
  cursor: pointer;
}

/* ==================== 跟读学习面板 ==================== */
.readalong-panel .panel-header h2 {
  font-size: 18px;
}

.readalong-body {
  padding: 0 4px 20px;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 科目/学期选择行 */
.readalong-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.readalong-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 2px solid #ddd;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.readalong-tab:hover {
  border-color: #11998e;
}

.readalong-tab.active {
  background: linear-gradient(135deg, #11998e, #38ef7d);
  color: #fff;
  border-color: transparent;
}

/* 科目 tab（语文/English）放大 */
.readalong-tab--subject {
  padding: 10px 22px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 24px;
}

/* 单元选择列表（换行展示） */
.readalong-unit-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0 10px;
  margin-bottom: 12px;
}

.readalong-unit-pill {
  padding: 6px 14px;
  border-radius: 16px;
  background: #f0f2f8;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
  border: 1.5px solid transparent;
}

.readalong-unit-pill:hover {
  background: #e8eaf6;
}

.readalong-unit-pill.active {
  background: #11998e;
  color: #fff;
  border-color: #11998e;
}

/* 内容卡片 */
.readalong-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-left: 4px solid #11998e;
}

.readalong-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.readalong-card__icon {
  font-size: 18px;
}

.readalong-card__title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.readalong-card__author {
  font-size: 12px;
  color: #999;
  margin-left: 4px;
}

.readalong-card__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background: #fff3cd;
  color: #856404;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

/* 文本内容区 */
.readalong-card__text {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #f8f9ff;
  border-radius: 8px;
}

.readalong-card__text ruby {
  margin-right: 1px;
}

.readalong-card__text rt {
  font-size: 10px;
  color: #11998e;
}

/* 英语对话展示 */
.readalong-card__dialogue {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #f8f9ff;
  border-radius: 8px;
}

.readalong-card__line {
  margin: 4px 0;
}

.readalong-card__speaker {
  display: inline-block;
  min-width: 52px;
  font-weight: 600;
  color: #11998e;
  font-size: 13px;
}

.readalong-card__dialogue-text {
  color: #333;
}

/* 操作按钮行 */
.readalong-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.readalong-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 20px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}

.readalong-btn--play {
  background: #e8f5e9;
  color: #2e7d32;
}

.readalong-btn--play:hover {
  background: #c8e6c9;
}

.readalong-btn--record {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
}

.readalong-btn--record:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(231,76,60,0.3);
}

.readalong-btn--record.recording {
  animation: pulse-record 1s ease-in-out infinite;
  box-shadow: 0 0 0 4px rgba(231,76,60,0.3);
}

@keyframes pulse-record {
  0% { box-shadow: 0 0 0 0 rgba(231,76,60,0.5); }
  70% { box-shadow: 0 0 0 10px rgba(231,76,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); }
}

.readalong-btn--replay {
  background: #e3f2fd;
  color: #1565c0;
}

.readalong-btn--replay:hover {
  background: #bbdefb;
}

.readalong-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 评分结果 */
.readalong-card__result {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  display: none;
}

.readalong-card__result.show {
  display: block;
}

.readalong-card__result.score-great {
  background: #e8f5e9;
  border-left: 3px solid #4caf50;
}

.readalong-card__result.score-good {
  background: #e3f2fd;
  border-left: 3px solid #2196f3;
}

.readalong-card__result.score-ok {
  background: #fff3e0;
  border-left: 3px solid #ff9800;
}

.readalong-card__result.score-try {
  background: #fce4ec;
  border-left: 3px solid #e74c3c;
}

.readalong-card__score {
  font-size: 20px;
  font-weight: 700;
  margin-right: 8px;
}

.readalong-card__stars {
  font-size: 16px;
  letter-spacing: 2px;
}

.readalong-card__message {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

.readalong-card__transcript {
  font-size: 12px;
  color: #999;
  margin-top: 6px;
  line-height: 1.5;
}

.readalong-card__transcript-label {
  font-weight: 600;
  color: #666;
}

/* 不支持语音识别提示 */
.readalong-unsupported {
  background: #fff3e0;
  color: #e65100;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  line-height: 1.5;
}

/* 空状态 */
.readalong-empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.readalong-empty__icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.readalong-empty__text {
  font-size: 14px;
}

/* Word List & Chunks list display */
.readalong-card__wordlist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
}

.readalong-card__word-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  padding: 4px 14px;
  background: #f0f7ff;
  border-radius: 6px;
  border: 1px solid #d0e3f7;
}

.readalong-card__word-en {
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  flex-shrink: 0;
  min-width: 100px;
}

.readalong-card__word-zh {
  font-size: 13px;
  color: #7f8c8d;
}

/* Chunks竖式排列样式 */
.readalong-card__chunks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.readalong-card__chunk-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  padding: 8px 14px;
  background: #fff8f0;
  border-radius: 8px;
  border: 1px solid #f0dcc7;
}

.readalong-card__chunk-en {
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  flex-shrink: 0;
}

.readalong-card__chunk-zh {
  font-size: 13px;
  color: #7f8c8d;
}

/* 单词/短语逐个朗读按钮 */
.readalong-card__word-play,
.readalong-card__chunk-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #4a90d9;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  padding: 0;
  line-height: 1;
}

.readalong-card__word-play:hover,
.readalong-card__chunk-play:hover {
  background: #357abd;
  transform: scale(1.1);
}

.readalong-card__word-play.playing,
.readalong-card__chunk-play.playing {
  background: #e74c3c;
  animation: pulse-play 0.8s infinite;
}

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

/* 单词/短语逐个跟读按钮 */
.readalong-card__word-record,
.readalong-card__chunk-record {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #27ae60;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  padding: 0;
  line-height: 1;
  margin-left: auto;
}

.readalong-card__word-record:hover,
.readalong-card__chunk-record:hover {
  background: #1e8449;
  transform: scale(1.1);
}

.readalong-card__word-record.recording,
.readalong-card__chunk-record.recording {
  background: #e74c3c;
  animation: pulse-record 0.8s infinite;
}

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

/* 逐项跟读结果 */
.readalong-card__item-result {
  margin-left: 8px;
  white-space: nowrap;
}

/* ==================== 题型标签 ==================== */
.qtype-badge {
  display: inline-block;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 10px;
  margin-right: 8px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}
.qtype-badge--tf {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
}
.qtype-badge--fill {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #17a2b8;
}
.qtype-badge--pinyin {
  background: #f3e8ff;
  color: #6b21a8;
  border: 1px solid #a855f7;
}
.qtype-badge--zuci {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #f97316;
}
.qtype-badge--idiom {
  background: #fce7f3;
  color: #9d174d;
  border: 1px solid #ec4899;
}
.qtype-badge--reading {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #3b82f6;
}

.qtype-badge--geo7 {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #10b981;
}

/* ==================== 阅读理解 ==================== */
.reading-passage {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
  max-height: 200px;
  overflow-y: auto;
}
.reading-questions { margin-top: 8px; }
.reading-subq {
  margin-bottom: 10px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 8px;
}
.reading-subq__num { font-weight: 700; color: #555; }
.reading-subq__q { margin-right: 8px; color: #333; }
.tf-btn--small, .option-btn--small {
  display: inline-block;
  margin: 2px 4px;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.tf-btn--small.correct, .option-btn--small.correct {
  background: #d4edda; color: #155724; border-color: #28a745;
}
.tf-btn--small.wrong, .option-btn--small.wrong {
  background: #f8d7da; color: #721c24; border-color: #dc3545;
}
.tf-btn--small.selected, .option-btn--small.selected {
  background: #cce5ff; border-color: #007bff;
}
.fill-input--small {
  width: 120px;
  padding: 4px 8px;
  font-size: 13px;
  margin-left: 4px;
}
.idiom-hint {
  font-size: 13px;
  color: #999;
  margin-bottom: 6px;
}

/* ==================== 判断题按钮 ==================== */
.tf-btn {
  padding: 16px 24px !important;
  font-size: 18px !important;
  text-align: center;
  min-width: 140px;
}
.tf-btn--true {
  border: 2px solid #27ae60;
  color: #27ae60;
}
.tf-btn--true:hover {
  background: #e8f8ef;
}
.tf-btn--false {
  border: 2px solid #e74c3c;
  color: #e74c3c;
}
.tf-btn--false:hover {
  background: #fdecea;
}
.tf-btn.correct {
  background: #d4edda !important;
  border-color: #27ae60 !important;
  color: #155724 !important;
}
.tf-btn.wrong {
  background: #f8d7da !important;
  border-color: #e74c3c !important;
  color: #721c24 !important;
  text-decoration: line-through;
}

/* ==================== 填空题 ==================== */
.fill-input-area {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}
.fill-input {
  flex: 1;
  max-width: 360px;
  padding: 14px 18px;
  font-size: 17px;
  border: 2px solid #ddd;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.fill-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
}

/* 组词题：横线答题区 */
.zuci-answer-area {
  background: #fafbff;
  border: 2px solid #e8ecfa;
  border-radius: 16px;
  padding: 18px 20px 16px;
  margin-top: 4px;
}
.zuci-lines { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.zuci-line { display: flex; align-items: flex-end; gap: 8px; }
.zuci-line__num { font-size: 14px; font-weight: 700; color: #667eea; flex-shrink: 0; }
.zuci-line__blank { flex: 1; border-bottom: 2px solid #b9c2ea; height: 26px; }
.fill-input--zuci {
  background: transparent;
  border: none;
  border-bottom: 2px solid #667eea;
  border-radius: 0;
  font-size: 18px;
  letter-spacing: 2px;
  max-width: 100%;
  padding: 8px 4px;
}

.fill-input:disabled {
  background: #f5f5f5;
  color: #666;
}
.fill-submit-btn {
  padding: 14px 28px;
  font-size: 16px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s, transform 0.1s;
  font-family: inherit;
}
.fill-submit-btn:hover {
  background: #5a6fd6;
}
.fill-submit-btn:active {
  transform: scale(0.96);
}
.fill-submit-btn:disabled {
  background: #ccc;
  cursor: default;
}
.fill-result {
  text-align: center;
  margin-top: 12px;
  font-size: 16px;
  padding: 10px;
  border-radius: 8px;
}
.fill-correct {
  color: #155724;
  background: #d4edda;
}
.fill-wrong {
  color: #721c24;
  background: #f8d7da;
}
.fill-wrong strong {
  color: #c0392b;
}

/* ==================== 补做面板成绩显示 ==================== */
.catchup-date-card.has-score {
  cursor: pointer;
}
.catchup-date-card__score-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 5px 0;
  font-size: 12px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}
.catchup-date-card__score-btn:hover {
  background: #5a6fd6;
}

/* ==================== 过往成绩详情弹窗 ==================== */
.modal-content--history {
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
}
.history-subjects {
  margin: 16px 0;
}
.history-subject-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: #f8f9fa;
  border-radius: 10px;
}
.history-subject-row--empty {
  opacity: 0.5;
}
.history-subject-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0;
}
.history-subject-name {
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 40px;
}
.history-subject-bar-wrap {
  flex: 1;
  height: 12px;
  background: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
}
.history-subject-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
  min-width: 4px;
}
.history-subject-score {
  font-size: 15px;
  font-weight: bold;
  flex-shrink: 0;
  min-width: 42px;
  text-align: right;
}
.history-subject-empty {
  font-size: 13px;
  color: #aaa;
}

/* ==================== 错题分析（成绩弹窗内） ==================== */
.wrong-list-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #e74c3c;
}
.wrong-list-perfect {
  text-align: center;
  font-size: 18px;
}
.wrong-item {
  background: #fff8f0;
  border: 1px solid #ffe0c0;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  text-align: left;
}
.wrong-item__header {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}
.wrong-item__answers {
  display: flex;
  gap: 20px;
  margin-bottom: 6px;
  font-size: 14px;
}
.wrong-item__yours {
  color: #e74c3c;
}
.wrong-item__yours strong {
  color: #c0392b;
}
.wrong-item__correct {
  color: #27ae60;
}
.wrong-item__correct strong {
  color: #1e8449;
}
.wrong-item__exp {
  margin-top: 8px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  border-left: 3px solid #f39c12;
}

/* 错题逐题回顾 */
.wrong-review {
  text-align: left;
}
.wrong-review__header {
  font-size: 14px;
  font-weight: 700;
  color: #e74c3c;
  margin-bottom: 12px;
  text-align: center;
}
.wrong-review__question {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
}
.wrong-review__answers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.wrong-review__yours {
  font-size: 14px;
  color: #666;
}
.wrong-review__correct {
  font-size: 15px;
}
.wrong-review__exp {
  margin-top: 10px;
  padding: 12px 14px;
  background: #fef9e7;
  border-radius: 8px;
  font-size: 14px;
  color: #7d6608;
  line-height: 1.7;
  border-left: 3px solid #f39c12;
}
.wrong-review__nav {
  text-align: center;
}

/* === 错题详细解析增强 === */

/* 解析详情区 */
.wrong-review__detail {
  margin-bottom: 10px;
}

/* 答案行 */
.wrong-detail__row {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.wrong-detail__row--wrong {
  background: #fdedec;
  border-left: 3px solid #e74c3c;
  color: #c0392b;
}
.wrong-detail__row--wrong span {
  text-decoration: line-through;
  font-weight: 600;
}
.wrong-detail__row--correct {
  background: #eafaf1;
  border-left: 3px solid #27ae60;
  color: #1e8449;
}
.wrong-detail__row--correct span {
  font-weight: 700;
}
.wrong-detail__row--alt {
  background: #fef9e7;
  border-left: 3px solid #f39c12;
  color: #7d6608;
}

/* 选择题选项列表 */
.wrong-options-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wrong-option {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  gap: 8px;
  background: #f5f5f5;
  color: #999;
}
.wrong-option__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #e0e0e0;
  font-size: 12px;
  font-weight: 700;
  color: #666;
  flex-shrink: 0;
}
.wrong-option__text { flex: 1; }
.wrong-option__marker {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.wrong-option--correct {
  background: #eafaf1;
  border: 1.5px solid #27ae60;
  color: #1e8449;
}
.wrong-option--correct .wrong-option__label {
  background: #27ae60;
  color: #fff;
}

.wrong-option--correct-picked {
  background: #eafaf1;
  border: 1.5px solid #27ae60;
  color: #1e8449;
}
.wrong-option--correct-picked .wrong-option__label {
  background: #27ae60;
  color: #fff;
}

.wrong-option--wrong {
  background: #fdedec;
  border: 1.5px solid #e74c3c;
  color: #c0392b;
}
.wrong-option--wrong .wrong-option__label {
  background: #e74c3c;
  color: #fff;
}

/* 答案对比 */
.wrong-review__diff {
  margin: 10px 0;
  padding: 10px 14px;
  background: #fff;
  border-radius: 8px;
  border: 1px dashed #ddd;
}
.diff-label {
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
}
.diff-content {
  font-size: 16px;
  line-height: 2;
  word-break: break-all;
}

/* 阅读理解回顾 */
.reading-passage-review {
  padding: 12px 14px;
  background: #f0f4ff;
  border-radius: 8px;
  border-left: 3px solid #667eea;
  margin-bottom: 12px;
}
.reading-passage-review strong {
  display: block;
  font-size: 14px;
  color: #667eea;
  margin-bottom: 6px;
}
.reading-passage-review p {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  margin: 0;
  text-indent: 2em;
}

.reading-subs-title {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.reading-sub-result {
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 14px;
}
.reading-sub-result--correct {
  background: #eafaf1;
  border-left: 3px solid #27ae60;
}
.reading-sub-result--wrong {
  background: #fdedec;
  border-left: 3px solid #e74c3c;
}
.reading-sub-result__q {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}
.reading-sub-result__user {
  font-size: 13px;
  color: #999;
  margin-bottom: 2px;
}
.reading-sub-result__correct {
  font-size: 13px;
  color: #333;
}
.reading-sub-result__ok {
  font-size: 13px;
  color: #27ae60;
}

/* 预写详细解析 */
.wrong-review__exp--author {
  background: #fff8e1;
  border-left: 3px solid #ff9800;
  color: #5d4037;
}

/* ==================== 满分庆祝效果 ==================== */
@keyframes screenShake {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-4px,-3px); }
  20% { transform: translate(3px,4px); }
  30% { transform: translate(-3px,2px); }
  40% { transform: translate(4px,-2px); }
  50% { transform: translate(-2px,-4px); }
  60% { transform: translate(2px,3px); }
  70% { transform: translate(-4px,-1px); }
  80% { transform: translate(3px,1px); }
  90% { transform: translate(-1px,3px); }
}

@keyframes giftFloatIn {
  0% { transform: translateY(100vh) scale(0.2); opacity: 0; }
  40% { transform: translateY(-20px) scale(1.15); opacity: 1; }
  55% { transform: translateY(0) scale(0.95); }
  70% { transform: translateY(-5px) scale(1.05); }
  85% { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes giftLidOpen {
  0% { transform: rotate(0) translateY(0); }
  100% { transform: rotate(-35deg) translateY(-20px) translateX(10px); }
}

@keyframes fireworkBurst {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  50% { transform: scale(1) rotate(180deg); opacity: 1; }
  100% { transform: scale(1.5) rotate(360deg); opacity: 0; }
}

@keyframes confettiFall {
  0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

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

@keyframes scorePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); color: #ffd700; text-shadow: 0 0 30px #ff6b6b, 0 0 60px #ffd700; }
  100% { transform: scale(1); }
}

.celebration-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

.celebration-overlay.shaking {
  animation: screenShake 0.6s ease-in-out 3;
}

.celebration-gift {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10001;
  text-align: center;
}

.celebration-gift__box {
  font-size: 80px;
  animation: giftFloatIn 1.2s ease-out forwards;
  position: relative;
  display: inline-block;
}

.celebration-gift__lid {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 50px;
  transform-origin: right bottom;
}

.celebration-gift__lid.opening {
  animation: giftLidOpen 0.8s ease-in-out forwards;
  animation-delay: 1.5s;
}

.celebration-gift__text {
  font-size: 28px;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 0 20px #ff6b6b;
  margin-top: 16px;
  animation: scorePulse 1s ease-in-out 3;
  animation-delay: 1s;
}

.firework-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 10000;
  animation: fireworkBurst 2s ease-out forwards;
}

.confetti-piece {
  position: fixed;
  width: 12px;
  height: 6px;
  z-index: 10000;
  animation: confettiFall 4s ease-in forwards;
}

.sparkle-dot {
  position: fixed;
  z-index: 10000;
  font-size: 20px;
  animation: sparklePulse 0.8s ease-in-out infinite;
}

.celebration-gift,
.firework-particle,
.confetti-piece,
.sparkle-dot {
  pointer-events: none;
}

/* ==================== 错题即时解析 ==================== */
.instant-exp {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 12px 0 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff8e1, #fff3cd);
  border: 2px solid #ffc107;
  border-radius: 14px;
  animation: expSlideIn 0.4s ease-out;
}
@keyframes expSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.instant-exp__icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1.4;
}
.instant-exp__text {
  font-size: 15px;
  color: #5d4037;
  line-height: 1.7;
  flex: 1;
}

/* 错题徽章 */
.wrong-badge {
  display: inline-block;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 4px;
  font-weight: 600;
  animation: badgePop 0.3s ease;
}
@keyframes badgePop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* ==================== 英文单词/短语练习页 ==================== */
.page-body.words-page {
  display: flex;
  gap: 20px;
  padding: 16px 20px 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.col-word, .col-phrase {
  flex: 1;
  min-width: 0;
}
.daily-words, .daily-phrases {
  background: white;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 2px 16px rgba(102,126,234,0.08);
  margin-bottom: 16px;
}
.daily-words__header, .daily-phrases__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.daily-words__header h2, .daily-phrases__header h2 {
  font-size: 18px;
  color: #333;
}
.daily-words__grid, .daily-phrases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.word-card, .phrase-card {
  background: #f8f9fc;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
  border: 2px solid transparent;
}
.word-card:hover, .phrase-card:hover {
  transform: translateY(-2px);
  border-color: #667eea;
}
.word-card__en, .phrase-card__en {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}
.word-card__zh, .phrase-card__zh {
  font-size: 14px;
  color: #888;
}
.btn-word-quiz, .btn-phrase-quiz {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.quiz-box {
  background: white;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 2px 16px rgba(102,126,234,0.08);
}
.quiz-q {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  text-align: center;
}
.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.quiz-option {
  background: #f8f9fc;
  border: 2px solid #eef0f6;
  border-radius: 14px;
  padding: 14px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.quiz-option:hover { border-color: #667eea; background: #eef0ff; }
.quiz-option.correct { border-color: #4caf50; background: #e8f5e9; color: #2e7d32; }
.quiz-option.wrong { border-color: #e74c3c; background: #ffebee; color: #c62828; }
.quiz-result {
  text-align: center;
  font-size: 16px;
  margin-top: 12px;
  font-weight: 600;
}
.quiz-done-card {
  text-align: center;
  padding: 20px;
}
.quiz-done-icon { font-size: 48px; margin-bottom: 8px; }
.quiz-done-score { font-size: 28px; font-weight: 800; color: #667eea; }

@media (max-width: 700px) {
  .page-body.words-page { flex-direction: column; }
}

/* ==================== 新版科目网格 ==================== */
.subjects-grid-new {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.subject-card-new {
  background: white;
  border-radius: 18px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  border-top: 4px solid var(--card-color);
  position: relative;
}
.subject-card-new:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.subject-card-new:active { transform: scale(0.96); }
.subject-card-new__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--card-color);
  color: white;
  font-size: 20px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.subject-card-new__name {
  font-size: 16px; font-weight: 700;
  color: #333; margin-bottom: 4px;
}
.subject-card-new__progress {
  font-size: 13px; color: #888; font-weight: 600;
}
.subject-card-new__status {
  font-size: 12px; font-weight: 700;
  margin-top: 2px; min-height: 16px;
}
.subject-card-new.is-done { opacity: 0.6; }
.subject-card-new.is-done::after {
  content: '✓';
  position: absolute; top: 8px; right: 10px;
  width: 22px; height: 22px;
  border-radius: 50%; background: #4caf50;
  color: white; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* 错题徽章 */
.subject-card-new .wrong-badge {
  position: absolute; top: 8px; left: 10px;
  background: #e74c3c; color: #fff;
  font-size: 11px; padding: 2px 8px;
  border-radius: 10px; font-weight: 600;
}

/* ==================== 工具横排 ==================== */
.tools-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}
.tool-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 25px;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid #eef0f6;
}
.tool-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.tool-pill__icon { font-size: 20px; }
.tool-pill__label {
  font-size: 13px; font-weight: 600; color: #555;
}
.tool-pill--words { border-color: #8a6cff; }
.tool-pill--readalong { border-color: #11998e; }
.tool-pill--formulas { border-color: #e67e22; }
.tool-pill--news { border-color: #667eea; }

@media (max-width: 650px) {
  .subjects-grid-new { grid-template-columns: repeat(3, 1fr); }
  .tools-row { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .subjects-grid-new { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .subject-card-new { padding: 12px 8px; }
}

.tool-pill--garden { border-color: #8e44ad; }

/* ==================== 跟读面板·分步导航 ==================== */
.ra-step-title {
  font-size: 20px;
  font-weight: 800;
  color: #333;
  margin-bottom: 16px;
  text-align: center;
}
.ra-step-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ra-step-row .ra-step-title {
  margin-bottom: 0;
  flex: 1;
}
.ra-back-btn {
  background: #f0f2f8;
  border: none;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #667eea;
  cursor: pointer;
  white-space: nowrap;
}
.ra-back-btn:hover { background: #e0e4f0; }

.ra-big-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.ra-big-card {
  background: white;
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  border: 3px solid transparent;
}
.ra-big-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}
.ra-big-card--chinese:hover { border-color: #ff9f43; }
.ra-big-card--english:hover { border-color: #8a6cff; }
.ra-big-card--grade:hover { border-color: #667eea; }

.ra-big-card__icon {
  font-size: 48px;
  margin-bottom: 10px;
}
.ra-big-card__name {
  font-size: 22px;
  font-weight: 800;
  color: #333;
  margin-bottom: 4px;
}
.ra-big-card__desc {
  font-size: 14px;
  color: #999;
}

/* ==================== 快捷链接 ==================== */
.quick-links {
  display: flex;
  gap: 8px;
  padding: 0 2px 6px;
  flex-wrap: wrap;
}
.quick-link {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  background: #f0f4ff;
  color: #667eea;
  font-size: 12px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
}
.quick-link:hover {
  background: #667eea;
  color: #fff;
}

/* ==================== 每日提醒 ==================== */
.daily-reminder {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  border: 2px solid #ffc107;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 10px;
  animation: reminderPulse 2s ease-in-out infinite;
}
@keyframes reminderPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(255,193,7,0); }
}
.daily-reminder__icon { font-size: 22px; flex-shrink: 0; }
.daily-reminder__text { font-size: 14px; color: #856404; font-weight: 600; flex: 1; }

/* ==================== 3×3 仪表盘布局 ==================== */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.dash-card {
  background: white;
  border-radius: 18px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  border-top: 4px solid var(--card-color);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
.dash-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.dash-card:active { transform: scale(0.96); }
.dash-card__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--card-color);
  color: white;
  font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.dash-card__name {
  font-size: 16px; font-weight: 700; color: #333;
}
.dash-card__desc {
  font-size: 12px; color: #999;
}
.dash-card__progress {
  font-size: 13px; color: #888; font-weight: 600;
}
.dash-card__status {
  font-size: 12px; font-weight: 700; min-height: 16px;
}
/* 当日完成是/否 + 完成时间 */
.dash-card__done {
  font-size: 11.5px; font-weight: 600; color: #aaa;
  min-height: 15px; line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.dash-card__done.is-done { color: #2eaf61; }
.dash-card--subject.is-done { opacity: 0.6; }
.dash-card--subject.is-done::after {
  content: '✓';
  position: absolute; top: 6px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%; background: #4caf50;
  color: white; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.dash-card .wrong-badge {
  position: absolute; top: 6px; left: 8px;
  background: #e74c3c; color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600;
}
.dash-card--tool {
  border-top-width: 4px;
  border-top-style: solid;
}
.dash-card--tool .dash-card__icon {
  font-size: 24px;
}

@media (max-width: 500px) {
  .dashboard-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dash-card { padding: 12px 6px; }
  .dash-card__name { font-size: 13px; }
  .dash-card__icon { width: 32px; height: 32px; font-size: 16px; }
}