/* ================================================================
   App —— 业务组件
   ================================================================ */

/* —— 顶部 Hero —— */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--c-primary-bg) 0%, var(--c-accent-soft) 100%);
  padding: var(--sp-10) var(--sp-6);
  border-radius: var(--r-xl);
  margin: var(--sp-6) 0;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.8) 1px, transparent 2px),
                    radial-gradient(circle at 80% 70%, rgba(255,255,255,.6) 1px, transparent 2px),
                    radial-gradient(circle at 50% 80%, rgba(255,255,255,.5) 1px, transparent 2px);
  background-size: 50px 50px;
  opacity: 0.5;
  pointer-events: none;
}
.hero__inner { position: relative; display: flex; align-items: center; gap: var(--sp-6); }
.hero__text { flex: 1; }
.hero__hi { font-family: var(--ff-deco); font-size: var(--fs-sm); color: var(--c-primary-deep); font-weight: 600; }
.hero__title { font-family: var(--ff-deco); font-size: var(--fs-2xl); font-weight: 700; color: var(--c-text); margin: var(--sp-1) 0 var(--sp-2); }
.hero__sub { color: var(--c-text-soft); margin-bottom: var(--sp-4); }
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero__avatar {
  width: 96px; height: 96px;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-deep) 100%);
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  font-size: 48px;
  box-shadow: 0 12px 24px rgba(233,106,130,.3);
  flex-shrink: 0;
}

@media (max-width: 680px) {
  .hero { padding: var(--sp-6); }
  .hero__inner { flex-direction: column; align-items: flex-start; }
  .hero__avatar { align-self: center; width: 72px; height: 72px; font-size: 36px; }
}

/* —— 今日进度仪表盘 —— */
.today-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--sp-4);
}
.today-panel__stat {
  background: var(--c-bg-card);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--sh-md);
  text-align: center;
}
.today-panel__stat-val { font-family: var(--ff-mono); font-size: var(--fs-xl); font-weight: 700; color: var(--c-primary-deep); line-height: 1; }
.today-panel__stat-label { font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: var(--sp-1); }

@media (max-width: 880px) { .today-panel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .today-panel { grid-template-columns: 1fr 1fr; } }

/* —— 任务卡（打卡项）—— */
.task {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), border-color var(--tr-fast);
  position: relative;
}
.task:hover { transform: translateY(-1px); box-shadow: var(--sh-md); border-color: var(--c-primary-soft); }
.task--locked { opacity: 0.5; pointer-events: none; }
.task--done { background: var(--c-accent-soft); border-color: var(--c-accent-deep); }
.task--done .task__check { background: var(--c-accent-deep); border-color: var(--c-accent-deep); color: white; }

.task__check {
  width: 28px; height: 28px;
  border: 2px solid var(--c-text-mute);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: transparent;
  transition: all var(--tr-base);
  flex-shrink: 0;
  font-size: 14px;
}
.task__icon { font-size: 26px; flex-shrink: 0; width: 36px; text-align: center; }
.task__body { flex: 1; }
.task__title { font-weight: 600; color: var(--c-text); }
.task__sub { font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: 2px; }
.task__chips { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.task__action { flex-shrink: 0; }

/* —— 进度环大图 —— */
.ring-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.ring-wrap svg { flex-shrink: 0; }
.ring-wrap__big { font-family: var(--ff-mono); font-size: var(--fs-2xl); font-weight: 700; color: var(--c-primary-deep); }
.ring-wrap__label { color: var(--c-text-soft); font-size: var(--fs-sm); }

/* —— 单词卡 —— */
.word-card {
  background: var(--c-bg-card);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  text-align: center;
  box-shadow: var(--sh-md);
  position: relative;
  border: 1px solid var(--c-border);
}
.word-card__en {
  font-family: var(--ff-deco);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-primary-deep);
  margin-bottom: var(--sp-1);
}
.word-card__phonetic { color: var(--c-text-soft); font-style: italic; font-size: var(--fs-sm); }
.word-card__zh { margin-top: var(--sp-3); font-size: var(--fs-lg); color: var(--c-text); }
.word-card__level { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.word-card__speak {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  width: 32px; height: 32px;
  background: var(--c-cool-soft);
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  color: var(--c-cool-deep);
  cursor: pointer;
  transition: transform var(--tr-fast);
}
.word-card__speak:hover { transform: scale(1.1); }

/* —— 答题选项 —— */
.options { display: grid; gap: var(--sp-3); }
.option {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--tr-fast);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.option:hover { border-color: var(--c-cool); background: var(--c-cool-soft); transform: translateX(2px); }
.option--picked { border-color: var(--c-cool-deep); background: var(--c-cool-soft); }
.option--correct { border-color: var(--c-accent-deep); background: var(--c-accent-soft); }
.option--wrong { border-color: var(--c-primary-deep); background: var(--c-primary-bg); }
.option__label {
  width: 28px; height: 28px;
  background: var(--c-bg-soft);
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-weight: 700;
  font-family: var(--ff-mono);
  color: var(--c-text-soft);
  flex-shrink: 0;
}
.option--correct .option__label { background: var(--c-accent-deep); color: white; }
.option--wrong .option__label { background: var(--c-primary-deep); color: white; }

/* —— 统计图表 —— */
/* —— 提示框 callout —— */
.callout {
  background: linear-gradient(135deg, var(--c-primary-bg) 0%, var(--c-accent-soft) 100%);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid var(--c-primary-soft);
}
.callout__icon { font-size: 28px; flex-shrink: 0; }
.callout__title { font-family: var(--ff-deco); font-weight: 700; font-size: var(--fs-md); color: var(--c-text); }
.callout__hint { font-size: var(--fs-sm); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.stat-card {
  background: var(--c-bg-card);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-md);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--c-primary-bg);
  transform: translate(30%, -30%);
}
.stat-card--accent::before { background: var(--c-accent-soft); }
.stat-card--warm::before   { background: var(--c-warm-soft); }
.stat-card--cool::before   { background: var(--c-cool-soft); }
.stat-card__val { font-family: var(--ff-mono); font-size: var(--fs-2xl); font-weight: 700; color: var(--c-text); position: relative; }
.stat-card__label { font-size: var(--fs-sm); color: var(--c-text-soft); margin-top: var(--sp-1); position: relative; }

@media (max-width: 880px) { .stat-grid { grid-template-columns: 1fr 1fr; } }

/* —— 日历（打卡热力图） —— */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: var(--c-bg-soft);
  display: grid; place-items: center;
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
  position: relative;
}
.cal-cell--today { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.cal-cell--done-1 { background: var(--c-accent-soft); }
.cal-cell--done-2 { background: var(--c-accent-deep); color: white; }
.cal-cell--missed { background: var(--c-primary-bg); color: var(--c-primary-deep); }
.cal-cell--future { opacity: 0.4; }

/* —— 错题 / 美文 / 套卷 列表项 —— */
.list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
  transition: transform var(--tr-fast);
}
.list-item:hover { transform: translateX(2px); border-color: var(--c-primary-soft); }
.list-item__icon {
  width: 44px; height: 44px;
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.list-item__icon--pink   { background: var(--c-primary-bg); color: var(--c-primary-deep); }
.list-item__icon--accent { background: var(--c-accent-soft);  color: var(--c-accent-deep); }
.list-item__icon--warm   { background: var(--c-warm-soft);    color: var(--c-warm-deep); }
.list-item__icon--cool   { background: var(--c-cool-soft);    color: var(--c-cool-deep); }
.list-item__body { flex: 1; }
.list-item__title { font-weight: 600; }
.list-item__sub { font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: 2px; }
.list-item__meta { display: flex; gap: var(--sp-2); flex-shrink: 0; align-items: center; }

/* —— 题卡 / 阅读卡 —— */
.passage {
  background: var(--c-bg-card);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  font-size: var(--fs-md);
  line-height: 1.9;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  white-space: pre-wrap;
}
.passage__title {
  font-family: var(--ff-deco);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-primary-deep);
  margin-bottom: var(--sp-3);
}

.question-block {
  background: var(--c-bg-card);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  margin-top: var(--sp-4);
}
.question-block__title {
  font-weight: 600;
  margin-bottom: var(--sp-3);
  font-family: var(--ff-deco);
}

/* —— 复述文本（美文/诗歌） —— */
.recite-card {
  background: linear-gradient(180deg, #FFFBF5 0%, #FFF 100%);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  border: 1px dashed var(--c-primary-soft);
  margin: var(--sp-4) 0;
}
.recite-card__title {
  font-family: var(--ff-deco);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-primary-deep);
}
.recite-card__author { font-size: var(--fs-sm); color: var(--c-text-soft); margin-left: var(--sp-2); }
.recite-card__body { white-space: pre-wrap; line-height: 2; font-family: var(--ff-deco); font-size: var(--fs-md); }

/* —— 计时器 —— */
.timer {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
}
.timer__display {
  font-family: var(--ff-mono);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--c-primary-deep);
  margin: var(--sp-4) 0;
  letter-spacing: -0.02em;
}
.timer__progress-ring { margin: var(--sp-6) auto; }

/* —— 标签页 —— */
.tabs {
  display: flex;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-6);
  overflow-x: auto;
}
.tab {
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--c-text-soft);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--tr-fast), border-color var(--tr-fast);
}
.tab:hover { color: var(--c-primary-deep); }
.tab--active { color: var(--c-primary-deep); border-bottom-color: var(--c-primary); }

/* —— 徽章 —— */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-yellow-soft);
  color: #C4900A;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* —— 答案强调 —— */
.answer-hint { background: var(--c-primary-bg); padding: var(--sp-3); border-radius: var(--r-md); margin-top: var(--sp-3); color: var(--c-primary-deep); font-size: var(--fs-sm); }

/* —— 复习进度条 —— */
.review-progress { margin: var(--sp-4) 0; }