/* =============================================================================
 * student.css —— 学生版专属（场景首页 / 学习总览 / 快捷入口 / AI 问答 / 学情报告）
 * 所有卡片都基于 components.css 的 .card；这里只写学生版特有的组合与质感。
 * ========================================================================== */

/* 首页栅格：左「问候 + 回顾」，右「总览 + 视频 + 问答」 */
.sd-home {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 1100px) { .sd-home { grid-template-columns: minmax(0, 1fr); } }

/* 问候卡：今天是持续学习的第 N 天 */
.sd-hello { display: flex; flex-direction: column; gap: var(--s2); }
.sd-hello__day { font-size: var(--f-h1); font-weight: 700; color: #fff; line-height: var(--lh-tight); }
.sd-hello__num { color: #FFD66B; }
.sd-hello__meta { display: flex; align-items: center; gap: var(--s3); font-size: var(--f-sm); color: rgba(255, 255, 255, 0.85); }

/* 学习回顾 */
.sd-review { display: flex; flex-direction: column; gap: var(--s2); }
.sd-review__row {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 56px; padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.14); color: #fff; text-align: left;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.sd-review__row:hover { background: rgba(255, 255, 255, 0.24); transform: translateX(2px); }
.sd-review__thumb { width: 44px; height: 44px; border-radius: var(--r-xs); object-fit: cover; flex: 0 0 auto; }
.sd-review__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sd-review__title { font-size: var(--f-body); font-weight: 600; }
.sd-review__sub { font-size: var(--f-xs); color: rgba(255, 255, 255, 0.78); }

/* 学习总览：进度条 + 快捷入口 */
.sd-overview { display: flex; flex-direction: column; gap: var(--s3); }
.sd-overview__title { display: flex; align-items: center; justify-content: space-between; font-size: var(--f-h3); font-weight: 700; color: #fff; }

.sd-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 1100px) { .sd-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sd-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sd-shortcut {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--s3) var(--s2); border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.16); color: #fff;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.sd-shortcut:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-2px); }
.sd-shortcut__ico { width: 44px; height: 44px; }
.sd-shortcut__label { font-size: var(--f-sm); font-weight: 600; }
.sd-shortcut__note { font-size: 10px; padding: 1px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.24); }

/* 推荐视频 */
.sd-video { display: flex; flex-direction: column; gap: var(--s3); }
.sd-video__cover {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 230px; border-radius: var(--r-md);
  overflow: hidden; background: #0E2A3F; box-shadow: var(--sh-md);
}
.sd-video__cover img { width: 100%; height: 100%; object-fit: cover; }
.sd-video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92); color: var(--brand-d); box-shadow: var(--sh-lg);
  transition: transform var(--dur-2) var(--ease);
}
.sd-video__cover:hover .sd-video__play { transform: translate(-50%, -50%) scale(1.08); }
.sd-video__play svg { width: 26px; height: 26px; margin-left: 3px; }
.sd-video__meta { display: flex; flex-direction: column; gap: 2px; }
.sd-video__title { font-size: var(--f-body); font-weight: 600; color: #fff; }
.sd-video__sub { font-size: var(--f-xs); color: rgba(255, 255, 255, 0.8); }

/* AI 问答（小蒙） */
.sd-ask { display: flex; align-items: center; gap: var(--s3); }
.sd-ask__input {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s2); min-height: 52px;
  padding: 0 var(--s4); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92); color: var(--ink-1); box-shadow: var(--sh-md);
}
.sd-ask__input input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: none; background: transparent; font-size: var(--f-body); }
.sd-ask__key { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-dd); font-weight: 700; }
.sd-ask__key.is-on { background: var(--brand); color: #fff; }
.sd-ask__robot { width: 76px; height: 76px; flex: 0 0 auto; }
.sd-reply {
  position: relative; margin-left: var(--s6); max-width: 460px;
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: #fff; color: var(--ink-1); font-size: var(--f-sm); box-shadow: var(--sh-md);
}
.sd-reply::before {
  content: ''; position: absolute; left: -8px; top: 18px;
  border: 8px solid transparent; border-right-color: #fff; border-left: 0;
}

/* ============ 模块入口（首页 6 个模块在内容区内切换时的顶部卡片） ============ */
.sd-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.sd-module {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5); border-radius: var(--r-lg); text-align: left;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  transition: transform var(--dur-3) var(--ease), background var(--dur-3) var(--ease);
}
.sd-module:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.26); }
.sd-module__ico { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(255, 255, 255, 0.9); color: var(--brand-dd); }
.sd-module__ico svg { width: 28px; height: 28px; }
.sd-module__title { font-size: var(--f-h3); font-weight: 700; }
.sd-module__desc { font-size: var(--f-sm); color: rgba(255, 255, 255, 0.85); }

/* ============ 学情报告（浅色页） ============ */
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap); }
.rp-entry {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5); border-radius: var(--r-md); background: #fff;
  box-shadow: var(--sh-sm); text-align: left; width: 100%;
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.rp-entry:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.rp-entry__ico { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--brand-50); flex: 0 0 auto; }
.rp-entry__ico svg { width: 26px; height: 26px; color: var(--brand-dd); }
.rp-entry__main { flex: 1 1 auto; min-width: 0; }
.rp-entry__title { font-size: var(--f-h3); font-weight: 700; color: var(--ink-1); }
.rp-entry__sub { font-size: var(--f-sm); color: var(--ink-4); }
.rp-entry__val { font-family: var(--font-num); font-size: var(--f-h2); font-weight: 700; color: var(--brand-dd); }

.wrong-item { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.wrong-item__q { font-size: var(--f-body); color: var(--ink-1); line-height: var(--lh-loose); }
.wrong-item__opts { display: flex; flex-direction: column; gap: 6px; }
.wrong-item__opt { display: flex; align-items: center; gap: var(--s2); font-size: var(--f-sm); color: var(--ink-3); }
.wrong-item__opt.is-wrong { color: var(--red-d); font-weight: 600; }
.wrong-item__opt.is-right { color: var(--green-d); font-weight: 600; }
.wrong-item__tag { display: inline-flex; align-items: center; gap: 4px; }

/* ============ 做题页（今日任务 / 试卷作答） ============ */
.quiz-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap); align-items: start; }
@media (max-width: 1000px) { .quiz-wrap { grid-template-columns: minmax(0, 1fr); } }
.quiz-main { display: flex; flex-direction: column; gap: var(--s4); }
.quiz-opts { display: flex; flex-direction: column; gap: var(--s3); }
.quiz-meta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.timer-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--s3); border-radius: var(--r-pill);
  background: var(--orange-50); color: var(--orange-d);
  font-size: var(--f-sm); font-weight: 700; font-family: var(--font-num);
}
.timer-chip svg { width: 16px; height: 16px; }
/* 判题反馈区（对/错 + 解析） */
.quiz-feedback { display: flex; flex-direction: column; gap: var(--s3); }
.quiz-feedback__head { display: flex; align-items: center; gap: var(--s3); font-size: var(--f-h3); font-weight: 700; }
.quiz-feedback__head.is-right { color: var(--green-d); }
.quiz-feedback__head.is-wrong { color: var(--red-d); }
.quiz-feedback__head svg { width: 26px; height: 26px; }
.kp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--s3); border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand-dd); font-size: var(--f-xs); }

/* ============ 单词连连看 ============ */
.match-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.match-col { display: flex; flex-direction: column; gap: var(--s2); }
.match-col__title { font-size: var(--f-sm); font-weight: 700; color: var(--ink-3); }
.match-item {
  min-height: 56px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2); background: #fff;
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  font-size: var(--f-lg); color: var(--ink-1);
  transition: all var(--dur-2) var(--ease);
}
.match-item:hover { border-color: var(--brand-200); background: var(--brand-50); }
.match-item.is-on { border-color: var(--brand); background: var(--brand-100); box-shadow: var(--sh-brand); }
.match-item.is-done { border-color: var(--green); background: var(--green-50); color: var(--green-d); }
.match-item.is-done::after {
  content: '✓'; margin-left: var(--s2); font-weight: 700;
}
.game-score { display: flex; gap: var(--s5); flex-wrap: wrap; }
.game-score__item { display: flex; flex-direction: column; gap: 2px; }
.game-score__val { font-family: var(--font-num); font-size: var(--f-h2); font-weight: 700; color: var(--ink-1); }

/* ============ 知识地图 ============ */
.map-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 320px;
  border-radius: var(--r-lg); overflow: hidden;
  background: url('static/student/map-bg.jpg') center / cover no-repeat;
  box-shadow: var(--sh-md);
}
.map-stage.is-lit { background-image: url('static/student/map-bg-lit.jpg'); }
.map-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.map-node__dot {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.62);
  border: 2px dashed rgba(82, 67, 55, 0.35);
  color: var(--ink-4); font-size: var(--f-lg); font-weight: 700;
  backdrop-filter: blur(2px);
}
.map-node__label {
  padding: 2px var(--s3); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9); color: var(--ink-1); font-size: var(--f-xs); white-space: nowrap;
}
.map-node.is-on .map-node__dot { background: #fff; border: 2px solid var(--brand); border-style: solid; color: var(--brand-dd); box-shadow: var(--sh-brand); }
.map-node.is-lit .map-node__dot { background: var(--gold); border-color: #fff; border-style: solid; color: #fff; }
.map-node.is-locked .map-node__dot { background: rgba(255, 255, 255, 0.42); }
.map-node.is-locked .map-node__label { color: var(--ink-4); }
/* 手机：地图改竖向拉伸，节点缩小、标签紧贴，避免挤在一团 */
@media (max-width: 700px) {
  .map-stage { aspect-ratio: 3 / 4; min-height: 0; }
  .map-node__dot { width: 46px; height: 46px; font-size: var(--f-body); }
  .map-node__label { font-size: 10px; padding: 1px 6px; }
}
.map-legend { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; font-size: var(--f-xs); color: var(--ink-3); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }

/* ============ 作文批改结果 ============ */
.essay-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1100px) { .essay-split { grid-template-columns: minmax(0, 1fr); } }
.essay-paper { position: relative; background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-sm); overflow: hidden; }
.essay-paper img { width: 100%; }
.essay-mark { position: absolute; border-radius: 6px; cursor: pointer; }
.essay-mark--good { background: rgba(53, 199, 89, 0.16); box-shadow: inset 0 0 0 1.5px var(--green); }
.essay-mark--bad { background: rgba(255, 90, 95, 0.14); box-shadow: inset 0 0 0 1.5px var(--red); }
.essay-comment { border-left: 3px solid var(--brand); padding: var(--s1) 0 var(--s1) var(--s3); }
.essay-comment--good { border-left-color: var(--green); }
.essay-comment--bad { border-left-color: var(--red); }
.essay-score { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.essay-score__big { font-family: var(--font-num); font-size: 56px; font-weight: 700; color: var(--brand-dd); line-height: 1; }
.essay-score__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); flex: 1 1 260px; }

/* ============ 数字课堂详情 ============ */
.cw-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1100px) { .cw-split { grid-template-columns: minmax(0, 1fr); } }
.cw-player { background: #0E2A3F; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-md); }
.cw-player__stage { position: relative; }
.cw-player__stage img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cw-player__bar { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); color: #fff; font-size: var(--f-sm); }
.cw-player__bar .progress { flex: 1 1 auto; background: rgba(255, 255, 255, 0.28); }
.cw-chapters { display: flex; flex-direction: column; }
.cw-danmaku { display: flex; flex-direction: column; gap: var(--s2); max-height: 220px; overflow: auto; }

/* ============ 好习惯训练（限时抢答） ============ */
.speed-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.speed-opt {
  min-height: 84px; display: flex; align-items: center; justify-content: center; gap: var(--s3);
  border-radius: var(--r-md); border: 1.5px solid var(--line-2); background: #fff;
  font-size: var(--f-h2); font-weight: 700; color: var(--ink-1);
  transition: all var(--dur-2) var(--ease);
}
.speed-opt:hover { border-color: var(--brand); background: var(--brand-50); }
.speed-opt.is-right { border-color: var(--green); background: var(--green-50); color: var(--green-d); }
.speed-opt.is-wrong { border-color: var(--red); background: var(--red-50); color: var(--red-d); }
.streak { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-num); font-weight: 700; color: var(--orange-d); }
.speed-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.speed-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--orange)); transition: width 120ms linear; }

/* ============ 学霸进阶（关卡 + 解答区） ============ */
.level-track { display: flex; align-items: flex-start; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); }
.level-node { flex: 0 0 auto; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--f-xs); color: var(--ink-4); }
.level-node__dot { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-4); font-weight: 700; font-family: var(--font-num); }
.level-node.is-done .level-node__dot { background: var(--gold); color: #fff; }
.level-node.is-on .level-node__dot { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.level-node.is-on { color: var(--brand-dd); font-weight: 700; }
.answer-area {
  min-height: 168px; padding: var(--s4); border-radius: var(--r-md);
  border: 1.5px dashed var(--line-2); background: #fff;
  background-image: repeating-linear-gradient(transparent 0 31px, var(--line) 31px 32px);
  color: var(--ink-1); font-size: var(--f-body); line-height: 2;
}
.hint-step { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-dd); font-size: var(--f-sm); }
.hint-step.is-locked { background: var(--surface-3); color: var(--ink-4); }

/* ============ 大表速记 ============ */
.mem-table { width: 100%; font-size: var(--f-body); }
.mem-table th, .mem-table td { padding: var(--s3); border-bottom: 1px solid var(--line); text-align: left; }
.mem-table th { font-size: var(--f-xs); color: var(--ink-4); font-weight: 600; }
.mem-group { font-size: var(--f-sm); font-weight: 700; color: var(--brand-dd); background: var(--brand-50); }
.mem-cell {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 104px; min-height: 40px; padding: 0 var(--s3);
  border-radius: var(--r-xs); background: var(--surface-3);
  color: transparent; font-family: var(--font-num); font-weight: 700; cursor: pointer;
  transition: all var(--dur-2) var(--ease);
}
.mem-cell:hover { background: var(--surface-4); }
.mem-cell.is-shown { background: var(--brand-50); color: var(--brand-dd); }
.mem-cell.is-right { background: var(--green-50); color: var(--green-d); }
.mem-cell.is-wrong { background: var(--red-50); color: var(--red-d); }

/* ============ 单词（列表 / 详情 / 释义） ============ */
.word-row { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); text-align: left; border-radius: var(--r-xs); }
.word-row:hover { background: var(--brand-50); }
.word-row.is-on { background: var(--brand-100); }
.word-row__en { min-width: 128px; font-size: var(--f-lg); font-weight: 700; color: var(--ink-1); }
.word-row__ph { font-family: var(--font-num); font-size: var(--f-sm); color: var(--ink-4); }
.word-row__cn { flex: 1 1 auto; min-width: 0; font-size: var(--f-sm); color: var(--ink-3); }
.word-hero { display: flex; flex-direction: column; gap: 6px; }
.word-hero__en { font-size: 44px; font-weight: 700; color: var(--ink-1); line-height: 1.15; word-break: break-word; }
.word-hero__ph { font-family: var(--font-num); color: var(--ink-4); }
.speak-btn { width: var(--tap); height: var(--tap); border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-dd); flex: 0 0 auto; }
.speak-btn:hover { background: var(--brand-100); }
.sense { display: flex; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px dashed var(--line); }
.sense:last-child { border-bottom: 0; }
.sense__pos { flex: 0 0 auto; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-3); font-size: var(--f-xs); line-height: 22px; }

/* ============ 写作文 ============ */
.write-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1100px) { .write-split { grid-template-columns: minmax(0, 1fr); } }
.write-paper {
  border-radius: var(--r-md); border: 1.5px solid var(--line-2); background: #fff; padding: var(--s5);
  background-image: linear-gradient(transparent calc(100% - 1px), var(--line) 1px);
  background-size: 100% 2.1em;
}
.write-paper textarea { width: 100%; min-height: 320px; border: 0; outline: none; resize: vertical; background: transparent; line-height: 2.1; font-size: var(--f-body); color: var(--ink-1); }
.write-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: var(--f-sm); color: var(--ink-4); }
.prompt-card { display: flex; flex-direction: column; gap: var(--s2); width: 100%; padding: var(--s4); border-radius: var(--r-md); border: 1.5px solid var(--line-2); background: #fff; text-align: left; transition: all var(--dur-2) var(--ease); }
.prompt-card:hover { border-color: var(--brand-200); }
.prompt-card.is-on { border-color: var(--brand); background: var(--brand-50); }
.ai-hint { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-sm); font-size: var(--f-sm); color: var(--ink-3); }
.ai-hint__ico { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: var(--brand-50); display: grid; place-items: center; color: var(--brand-dd); font-weight: 700; }

/* ============ 历史作文 ============ */
.essay-card { display: flex; flex-direction: column; gap: var(--s2); width: 100%; padding: var(--s4); border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-sm); text-align: left; transition: box-shadow var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.essay-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.essay-card__head { display: flex; align-items: center; gap: var(--s3); }
.essay-card__score { font-family: var(--font-num); font-size: var(--f-h1); font-weight: 700; color: var(--brand-dd); line-height: 1; }
.essay-card__score.is-warn { color: var(--orange-d); }
.essay-card__quote { border-left: 3px solid var(--brand); padding-left: var(--s3); font-size: var(--f-sm); color: var(--ink-3); }

/* ============ 错题解析（学生端查看解析） ============ */
.wrong-q { display: flex; flex-direction: column; gap: var(--s3); }
.wrong-opt { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: #fff; font-size: var(--f-body); color: var(--ink-1); }
.wrong-opt.is-mine { border-color: var(--red); background: var(--red-50); }
.wrong-opt.is-right { border-color: var(--green); background: var(--green-50); }
.wrong-opt__key { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-3); color: var(--ink-3); display: grid; place-items: center; font-size: var(--f-xs); font-weight: 700; }
.wrong-opt.is-mine .wrong-opt__key { background: var(--red); color: #fff; }
.wrong-opt.is-right .wrong-opt__key { background: var(--green); color: #fff; }

/* ============ 跟课本学（单元 / 课节） ============ */
.unit-list { display: flex; flex-direction: column; gap: var(--s3); }
.unit-row { display: flex; align-items: center; gap: var(--s4); width: 100%; padding: var(--s3) var(--s4); border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-sm); text-align: left; transition: box-shadow var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.unit-row:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.unit-row.is-locked { opacity: 0.6; }
.unit-row__no { width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-dd); display: grid; place-items: center; font-family: var(--font-num); font-weight: 700; font-size: var(--f-h3); }
.unit-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lesson-row { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); text-align: left; border-radius: var(--r-xs); }
.lesson-row:hover { background: var(--brand-50); }
.lesson-row__no { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: var(--surface-3); color: var(--ink-3); display: grid; place-items: center; font-size: var(--f-xs); font-family: var(--font-num); }
.lesson-row.is-done .lesson-row__no { background: var(--green); color: #fff; }
.lesson-row.is-on .lesson-row__no { background: var(--brand); color: #fff; }

/* ============ 视频学习（笔记） ============ */
.note-item { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: #fff; box-shadow: var(--sh-sm); }
.note-item__time { flex: 0 0 auto; font-family: var(--font-num); font-size: var(--f-xs); color: var(--brand-dd); font-weight: 700; }
.note-item__body { flex: 1 1 auto; min-width: 0; font-size: var(--f-sm); color: var(--ink-3); }