/* ==========================================================================
   学生工具箱 · 工具页共用样式

   下面「工具页布局 / 全屏专注模式 / 计时器」三段原样取自教师工具箱的
   assets/css/tools.css（1–102、194–299 行）—— 两个站的工具页骨架、
   面板、大字显示、全屏模式必须一致。教师站那份里「分组结果」「随机排序」
   「名单来源」等与班级名单相关的段落这里用不到，没有搬。

   学生站专有的工具样式接在文件末尾，按工具分段。
   ========================================================================== */

.tool { position: relative; }
.tool__badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--blue-600);
  font-size: 12.5px;
  font-weight: 600;
}

.tool__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .tool__grid { grid-template-columns: 300px minmax(0, 1fr) 260px; }
  .tool--two .tool__grid { grid-template-columns: 320px minmax(0, 1fr); }
}
@media (min-width: 700px) and (max-width: 999px) {
  .tool__grid { grid-template-columns: 1fr 1fr; }
  .tool__col--main { grid-column: 1 / -1; order: -1; }
}

.tool__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.panel {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.panel--muted { background: var(--bg); }
.panel--accent {
  background: var(--bg);
  border-color: var(--yellow-500);
  border-left-width: 4px;
}
.panel__title { margin: 0 0 4px; font-size: 16px; }
.panel--accent .panel__title { color: var(--text); }
.panel__desc { margin: 0 0 14px; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.panel__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.panel__actions .btn { flex: 1 1 auto; }

/* 中间主显示区 */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 320px;
  padding: 32px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  text-align: center;
}
.stage__label { margin: 0; color: var(--text-muted); font-size: 14px; }
.stage__result {
  margin: 0;
  font-size: clamp(40px, 9vw, 92px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--blue-600);
  letter-spacing: .06em;
  word-break: break-all;
}
.stage__result--placeholder { color: var(--text-muted); font-weight: 500; letter-spacing: 0; }
.stage__hint { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.btn--stage { min-height: 54px; padding: 0 40px; font-size: 17px; font-weight: 600; }

/* 历史记录 / 标签组 */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 14px;
}
.chip--recent { background: var(--blue-600); border-color: var(--blue-600); color: var(--text-on-brand); }
.chip__remove {
  border: 0; background: transparent; color: inherit;
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px;
}

/* ==========================================================================
   全屏课堂模式（文档 10.6）
   ========================================================================== */

body.is-fullscreen { overflow: hidden; }

.fs {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  /* 投影环境固定用高对比配色，不跟随暗色模式的低对比装饰色 */
  background: var(--surface);
  color: var(--text);
}
.fs__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fs__title { font-size: 16px; font-weight: 600; color: var(--text-muted); }
.fs__close {
  min-height: var(--tap-min);
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.fs__close:hover { border-color: var(--blue-600); color: var(--blue-600); }

.fs__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  min-height: 0;
  text-align: center;
}

/* 投影字号（文档 10.6 / 第 18 章） */
.fs .stage__result { font-size: clamp(72px, 15vw, 160px); }
.fs .stage__label { font-size: clamp(16px, 2vw, 24px); }
.fs .btn--stage { min-height: 64px; font-size: 20px; padding: 0 52px; }
.fs .chips { justify-content: center; max-width: 900px; }
.fs .chip { font-size: 16px; padding: 6px 14px; }
.fs .groups { max-width: 1400px; }

/* ==========================================================================
   计时器
   ========================================================================== */

.timer { gap: 16px; }
.timer__time {
  margin: 0;
  font-size: clamp(56px, 13vw, 128px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--text);
}
/* 告警级别同时改颜色和字重，不靠颜色单一维度 */
.timer__time[data-level="warn"]     { color: var(--yellow-500); }
.timer__time[data-level="critical"] { color: var(--danger-text); font-weight: 900; }
.timer__time[data-level="done"]     { color: var(--danger-text); font-weight: 900; }
.timer__time.is-flashing { animation: timer-flash 0.7s steps(1) infinite; }
@keyframes timer-flash { 50% { opacity: .25; } }

.timer__bar {
  width: min(100%, 560px);
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.timer__bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--blue-600);
  transition: width .2s linear;
}
.timer__bar-fill[data-level="warn"]     { background: var(--yellow-500); }
.timer__bar-fill[data-level="critical"],
.timer__bar-fill[data-level="done"]     { background: var(--danger); }

.timer__inputs { display: flex; align-items: center; gap: 8px; }
.timer__inputs .input { width: 90px; }

.fs .timer__time { font-size: clamp(120px, 26vw, 240px); }
.fs .timer__bar { height: 14px; width: min(90%, 1000px); }

/* ==========================================================================

/* ==========================================================================
   面包屑（工具页顶部）
   ========================================================================== */

.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.crumb a { color: var(--blue-600); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ==========================================================================
   考试倒计时
   ========================================================================== */

.cd-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.cd-presets .btn:disabled { opacity: .55; }

.cd-hero__days {
  /* 天数是个整数，不需要 .stage__result 那么大的字距 */
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
/* 紧迫程度改颜色，但旁边的 .cd-hero__desc 同时写着「还有 N 天」，
   颜色不是唯一区分手段 */
.cd-hero__days[data-urgency="critical"] { color: var(--danger-text); }
.cd-hero__days[data-urgency="warn"]     { color: var(--yellow-500); }
.cd-hero__days[data-urgency="past"]     { color: var(--text-muted); }
.cd-hero__desc { margin: 0; font-size: 15px; }

.cd-list { display: flex; flex-direction: column; gap: 10px; }

.cd-row {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue-600);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.cd-row[data-urgency="critical"] { border-left-color: var(--danger); }
.cd-row[data-urgency="warn"]     { border-left-color: var(--yellow-500); }
.cd-row[data-urgency="past"]     { border-left-color: var(--border); opacity: .72; }
.cd-row[data-urgency="none"]     { border-left-style: dashed; }

.cd-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.cd-row__days {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cd-row__name { margin: 0; flex: 1; min-width: 120px; font-size: 16px; }
.cd-row__btns { display: flex; gap: 6px; flex-wrap: wrap; }

.cd-row__body {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .cd-row__body { grid-template-columns: 1fr 1fr; } }

.cd-row__field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.cd-row__field-label { color: var(--text-muted); font-size: 12.5px; }
.cd-row__date { max-width: 220px; }

.cd-row__range-wrap { display: flex; align-items: center; gap: 10px; min-height: var(--tap-min); }
.cd-row__range { flex: 1; min-width: 0; accent-color: var(--blue-600); }
.cd-row__pct {
  min-width: 46px;
  text-align: right;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.cd-row__note {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ==========================================================================
   番茄自习室
   ========================================================================== */

.pomo-fs { display: flex; flex-direction: column; align-items: center; gap: 28px; }

.pomo-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 132px;
}
.pomo-bars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: 100%;
  min-width: 0;
}
.pomo-bars__track {
  flex: 1;
  width: 100%;
  max-width: 30px;
  display: flex;
  align-items: flex-end;
  border-radius: 5px;
  background: var(--bg);
}
.pomo-bars__track i {
  display: block;
  width: 100%;
  min-height: 3px;
  border-radius: 5px;
  background: var(--blue-600);
  opacity: .55;
}
.pomo-bars__col.is-today .pomo-bars__track i { opacity: 1; }
.pomo-bars__val {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.pomo-bars__label { font-size: 12px; color: var(--text-muted); }
.pomo-bars__col.is-today .pomo-bars__label { color: var(--text); font-weight: 600; }

/* ==========================================================================
   演讲计时器：分段进度条与分段编辑
   ========================================================================== */

.seg-bar {
  display: flex;
  gap: 3px;
  width: min(100%, 640px);
}
.seg-bar__item {
  /* flex-grow 由 JS 按各段时长设置（CSSOM 赋值，不受 CSP style-src 限制） */
  flex-basis: 0;
  min-width: 0;
  padding: 6px 4px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11.5px;
  font-style: normal;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 状态同时靠底色和文字（段名一直写着），不只靠颜色 */
.seg-bar__item.is-done {
  background: var(--success);
  color: var(--text-on-accent);
}
.seg-bar__item.is-current {
  background: var(--blue-600);
  color: var(--text-on-brand);
  font-weight: 600;
}

.seg-list { display: flex; flex-direction: column; gap: 6px; }
.seg-row { display: flex; align-items: center; gap: 6px; }
.seg-row .input { min-width: 0; }
.seg-row .seg-min { flex: 0 0 76px; }

.fs .seg-bar { width: min(90%, 1100px); }
.fs .seg-bar__item { font-size: 15px; padding: 9px 6px; }

/* ==========================================================================
   阅读计时器
   ========================================================================== */

.rt-to { max-width: 260px; }

/* ==========================================================================
   记忆卡片
   ========================================================================== */

.fc-progress {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.fc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 200px;
  padding: 28px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg);
  text-align: center;
  cursor: pointer;
}
.fc-card:hover { border-color: var(--blue-600); }
.fc-card.is-flipped { background: var(--surface); border-style: dashed; }
.fc-card__side { color: var(--text-muted); font-size: 12.5px; }
.fc-card__text { margin: 0; font-size: clamp(20px, 3.4vw, 30px); font-weight: 600; line-height: 1.45; }
.fc-card__hint { color: var(--blue-600); font-size: 12.5px; }

.fc-grades { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .fc-grades { grid-template-columns: repeat(4, 1fr); } }
.fc-grades .btn { min-height: 48px; }

/* ==========================================================================
   错题本
   ========================================================================== */

.eb-form { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }

.eb-question {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg);
}
.eb-question__text { margin: 0; font-size: 17px; line-height: 1.75; white-space: pre-wrap; }

.eb-answer {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--surface);
}
.eb-answer__label { color: var(--text-muted); font-size: 12.5px; }
.eb-answer p { margin: 4px 0 0; line-height: 1.7; white-space: pre-wrap; }
.eb-answer__reason { color: var(--text-muted); font-size: 13.5px; }

.eb-reasons { display: flex; flex-direction: column; gap: 7px; }
.eb-reasons__row { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.eb-reasons__name { flex: 0 0 84px; color: var(--text-muted); }
.eb-reasons__track { flex: 1; height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.eb-reasons__track i { display: block; height: 100%; border-radius: 999px; background: var(--danger); }
.eb-reasons b { min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   GPA
   ========================================================================== */

.gpa-table { display: flex; flex-direction: column; gap: 5px; overflow-x: auto; }

.gpa-row {
  display: grid;
  gap: 6px;
  align-items: center;
  grid-template-columns: minmax(120px, 1.6fr) 74px 74px 66px minmax(80px, 1fr) 78px 44px;
  min-width: 620px;
}
.gpa-row--head {
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 0 2px;
}
.gpa-row.is-excluded { opacity: .55; }
.gpa-cell { min-height: 38px; padding: 6px 9px; font-size: 14px; }
.gpa-point {
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.gpa-exclude {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.gpa-exclude input { width: 16px; height: 16px; accent-color: var(--blue-600); }

/* ==========================================================================
   习惯打卡
   ========================================================================== */

.habit-manage { display: flex; flex-direction: column; gap: 5px; }
.habit-manage__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0 5px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.habit-manage__row:last-child { border-bottom: 0; }

.habit-list { display: flex; flex-direction: column; gap: 7px; }
.hrow {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: var(--tap-min);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hrow:hover { border-color: var(--blue-600); }
/* 打过卡的同时改边框、底色和那个 ✓ —— 不只靠颜色 */
.hrow.is-on { border-color: var(--success); background: var(--bg); }
.hrow b { flex: 1; font-weight: 600; }
.hrow small { color: var(--text-muted); font-size: 12.5px; }
.hrow .check {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 14px;
  flex-shrink: 0;
}
.hrow.is-on .check { background: var(--success); color: var(--text-on-accent); }

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.calendar { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 10px; background: var(--surface); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head span { text-align: center; color: var(--text-muted); font-size: 12px; padding-bottom: 4px; }

.cal-grid i.is-blank { aspect-ratio: 1; }
.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  aspect-ratio: 1;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--bg);
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}
.cal-cell:hover:not(:disabled) { border-color: var(--blue-600); }
.cal-cell:disabled { cursor: default; opacity: .45; }
.cal-cell__num { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cal-cell__dots { font-size: 10px; font-variant-numeric: tabular-nums; }
/* 三档状态：格子里同时写着「已完成/总数」，颜色不是唯一手段 */
.cal-cell.is-full { background: var(--success); color: var(--text-on-accent); }
.cal-cell.is-partial { background: var(--yellow-500); color: var(--text-on-accent); }
.cal-cell.is-miss { background: var(--bg); color: var(--text-muted); }
.cal-cell.is-today { outline: 2px solid var(--blue-600); outline-offset: 1px; }

/* ==========================================================================
   计划三件套：今日计划 / 进度看板 / 论文规划
   ========================================================================== */

/* ---- 任务清单（今日计划） ---- */
.plan-list { display: flex; flex-direction: column; gap: 6px; }

.plan-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}
/* 重要的任务左侧一条色带。同时卡上写着「重要」二字，颜色不是唯一手段 */
.plan-row[data-priority="1"] { border-left: 3px solid var(--yellow-500); }
.plan-row.is-done { opacity: .6; }
.plan-row.is-done .plan-row__text { text-decoration: line-through; }

.plan-row__check {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 17px;
  cursor: pointer;
}
.plan-row__check:hover { border-color: var(--blue-600); }
.plan-row.is-done .plan-row__check {
  border-color: var(--success);
  background: var(--success);
  color: var(--text-on-accent);
}

.plan-row__body { min-width: 0; }
.plan-row__title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.plan-row__text { font-weight: 600; }
.plan-row__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12.5px;
}
/* 结转过的任务要看得见。--yellow-500 是底色（其上须用 --text，
   白字只有 1.8:1），所以做成小标签而不是给文字上色。 */
.plan-row__carried {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--yellow-500);
  color: var(--text);
  font-size: 11.5px;
}
.plan-row__btns { display: flex; gap: 2px; }

.plan-divider {
  margin: 10px 0 2px;
  color: var(--text-muted);
  font-size: 12.5px;
}

/* ---- 进度条 ---- */
/* .bar 由 core/ui.js 的 progressBar() 产出，全站共用。
   宽度走 CSSOM 赋值，不是行内 style —— CSP 的 style-src 'self' 会拦行内样式。 */
.bar {
  flex: 1;
  height: 9px;
  border-radius: 999px;
  /* 轨道用 --border 而不是 --bg：panel--muted 的底色就是 --bg，
     同色的话 0% 时整条轨道是隐形的，看着像「没有进度条」。
     .timer__bar 一直用的就是 --border。 */
  background: var(--border);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--success);
  transition: width .25s ease;
}
.plan-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.plan-progress__pct { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- 看板 ---- */
.bd-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
@media (max-width: 780px) {
  /* 手机上三列挤不下，堆成单列 */
  .bd-board { grid-template-columns: 1fr; }
}

.bd-col {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.bd-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-size: 14.5px;
}
.bd-col__count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bd-col__hint { margin: 2px 0 9px; color: var(--text-muted); font-size: 12px; }
.bd-col__cards { display: flex; flex-direction: column; gap: 7px; }
.bd-col__empty {
  padding: 14px 0;
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
}

.bd-card {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.bd-card[data-urgency="critical"] { border-left-color: var(--danger); }
.bd-card[data-urgency="warn"]     { border-left-color: var(--yellow-500); }
.bd-card[data-urgency="past"]     { border-left-color: var(--danger); }
.bd-card__title { font-weight: 600; font-size: 13.5px; }
.bd-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}
.bd-card__note {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  white-space: pre-wrap;
}
.bd-card__btns {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* ---- 论文时间轴 ---- */
.rp-timeline { margin: 0; padding: 0; list-style: none; }

.rp-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  padding-bottom: 14px;
}
/* 竖线把八个阶段串起来；最后一个不画，否则线会拖到空白处 */
.rp-stage::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 14px;
  width: 2px;
  height: calc(100% - 30px);
  background: var(--border);
}
.rp-stage:last-child::before { display: none; }

.rp-stage__mark {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}
.rp-stage[data-urgency="critical"] .rp-stage__mark { border-color: var(--danger); color: var(--danger); }
.rp-stage[data-urgency="warn"]     .rp-stage__mark { border-color: var(--yellow-500); }
.rp-stage[data-urgency="past"]     .rp-stage__mark { border-color: var(--danger); color: var(--danger); }
.rp-stage.is-done .rp-stage__mark {
  border-color: var(--success);
  background: var(--success);
  color: var(--text-on-accent);
}

.rp-stage__body { min-width: 0; padding-top: 2px; }
.rp-stage__head { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.rp-stage__name {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}
.rp-stage__name:hover { color: var(--blue-600); }
.rp-stage.is-done .rp-stage__name { text-decoration: line-through; opacity: .7; }
.rp-stage__days {
  color: var(--text-muted);
  font-size: 12.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rp-stage[data-urgency="critical"] .rp-stage__days,
.rp-stage[data-urgency="past"]     .rp-stage__days { color: var(--danger); font-weight: 600; }
.rp-stage__hint { margin: 2px 0 0; color: var(--text-muted); font-size: 12.5px; }
.rp-stage__meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.rp-stage__meta small { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.rp-tasks { margin: 7px 0 0; padding: 0; list-style: none; }
.rp-tasks li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  font-size: 13px;
}
.rp-tasks li.is-done .rp-tasks__text { text-decoration: line-through; opacity: .6; }
.rp-tasks__check {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
}
.rp-tasks li.is-done .rp-tasks__check {
  border-color: var(--success);
  background: var(--success);
  color: var(--text-on-accent);
}
.rp-next__name { margin: 0; font-size: 17px; font-weight: 700; }

/* ==========================================================================
   练习三件套：口算闯关 / 乘法口诀 / 随机出题
   ========================================================================== */

/* ---- 答题器（core/quiz-ui.js） ---- */
.quiz { display: flex; flex-direction: column; gap: 13px; }

.quiz__bar { height: 5px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.quiz__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--blue-600);
  transition: width .2s ease;
}
.quiz__head {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.quiz__text {
  margin: 0;
  padding: 24px 12px;
  border-radius: 14px;
  background: var(--surface);
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.quiz__answer-area { display: flex; flex-direction: column; gap: 9px; }
.quiz__input {
  height: 54px;
  font-size: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.quiz__btns { display: flex; gap: 7px; }
.quiz__btns .btn { flex: 1; }
.quiz__choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }

.quiz__feedback {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 11px;
  font-size: 14.5px;
}
.quiz__feedback.is-right,
.quiz__feedback.is-wrong,
/* 有讲解时要能换行 —— 讲解段落塞进横向 flex 会被挤成一列字 */
.quiz__feedback.is-skipped { display: flex; flex-wrap: wrap; }
/* ✓/✗ 加文字，不靠颜色单一维度 */
.quiz__feedback.is-right   { background: color-mix(in srgb, var(--success) 15%, var(--surface)); }
.quiz__feedback.is-wrong,
.quiz__feedback.is-skipped { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.quiz__mark { font-size: 20px; font-weight: 700; }
.quiz__feedback.is-right .quiz__mark { color: var(--success); }
.quiz__feedback.is-wrong .quiz__mark,
.quiz__feedback.is-skipped .quiz__mark { color: var(--danger); }
.quiz__answer { margin-left: auto; color: var(--text-muted); font-size: 13px; }

/* 讲解：只说「正确答案是 X」，学生下次照样错。这一行才是教学价值所在 */
.quiz__note {
  flex: 1 0 100%;
  margin: 7px 0 0;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  line-height: 1.75;
  text-align: left;
}

/* ---- 结算 ---- */
.quiz-result { text-align: center; }
.quiz-result__stars { font-size: 34px; letter-spacing: 5px; color: var(--yellow-500); }
.quiz-result__rate { margin: 5px 0 13px; }
.quiz-result__rate b { font-size: 27px; font-variant-numeric: tabular-nums; }
.quiz-result__rate span { color: var(--text-muted); }
.quiz-result__word { margin: 11px 0; color: var(--text-muted); }

/* ---- 难度档 / 模式选择（口算、乘法、随机出题共用） ---- */
.mm-levels { display: flex; flex-direction: column; gap: 5px; }
.mm-level {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: var(--tap-min);
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mm-level:hover { border-color: var(--blue-600); }
.mm-level.is-on {
  border-color: var(--blue-600);
  background: color-mix(in srgb, var(--blue-600) 10%, var(--surface));
}
.mm-level b { font-size: 13.5px; }
.mm-level small { color: var(--text-muted); font-size: 12px; }

/* ---- 错题清单 ---- */
.mm-missed { margin-top: 16px; text-align: left; }
.mm-missed__list { margin: 0; padding: 0; list-style: none; }
.mm-missed__list li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.mm-missed__list li:last-child { border-bottom: 0; }
.mm-missed__q { font-variant-numeric: tabular-nums; }
.mm-missed__given { margin-left: auto; color: var(--text-muted); font-size: 12.5px; }

/* ---- 历史记录 ---- */
.mm-history { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; }
.mm-history__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: 7px;
  font-size: 12.5px;
}
.mm-history__row small { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mm-history__row b { font-variant-numeric: tabular-nums; }
.mm-history__stars { color: var(--yellow-500); }

/* ---- 乘法口诀熟练度矩阵 ---- */
.mt-grid { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.mt-row { display: grid; grid-template-columns: repeat(10, minmax(26px, 1fr)); gap: 2px; }
.mt-head, .mt-corner {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.mt-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 6px;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
/* 四档：格子里同时写着正确率数字，颜色不是唯一手段 */
.mt-cell[data-level="good"] { background: var(--success); color: var(--text-on-accent); }
.mt-cell[data-level="mid"]  { background: var(--yellow-500); color: var(--text-on-accent); }
.mt-cell[data-level="weak"] { background: var(--danger); color: var(--text-on-accent); }
.mt-cell[data-level="none"] { background: var(--bg); color: var(--text-muted); }

.mt-legend { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 9px; font-size: 11.5px; }
.mt-legend span { display: flex; align-items: center; gap: 4px; color: var(--text-muted); }
.mt-legend span::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 3px;
}
.mt-legend span[data-level="good"]::before { background: var(--success); }
.mt-legend span[data-level="mid"]::before  { background: var(--yellow-500); }
.mt-legend span[data-level="weak"]::before { background: var(--danger); }
.mt-legend span[data-level="none"]::before { background: var(--bg); border: 1px solid var(--border); }

/* 「错题重练」标记：这一局不计入练习记录，结算页要标出来 */
.quiz-result__tag {
  display: inline-block;
  margin: 0 0 9px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
}

/* ==========================================================================
   成绩分析
   ========================================================================== */

.ga-chart { display: block; width: 100%; height: 320px; }

.ga-form { display: flex; flex-direction: column; gap: 5px; }
.ga-row {
  display: grid;
  grid-template-columns: 46px 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}
.ga-row__name { font-size: 13.5px; }
.ga-row__slash { color: var(--text-muted); }
.ga-in { text-align: center; }

.ga-details { margin-top: 12px; }
.ga-details summary { cursor: pointer; color: var(--text-muted); font-size: 13px; }
.ga-table { width: 100%; margin-top: 9px; border-collapse: collapse; font-size: 12.5px; }
.ga-table th, .ga-table td {
  padding: 5px 7px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ga-table thead th, .ga-table tbody th { text-align: left; font-weight: 600; }
.ga-table thead th { color: var(--text-muted); }

.ga-subjects { display: flex; flex-direction: column; gap: 7px; }
.ga-subject {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
/* 分档同时有文字标签（相对强 / 相对弱 / 差不多），颜色不是唯一手段 */
.ga-subject[data-level="strong"] { border-left-color: var(--success); }
.ga-subject[data-level="weak"]   { border-left-color: var(--danger); }
.ga-subject__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ga-subject__tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11.5px;
}
.ga-subject[data-level="strong"] .ga-subject__tag { color: var(--success); }
.ga-subject[data-level="weak"]   .ga-subject__tag { color: var(--danger-text, var(--danger)); }
.ga-subject__nums {
  display: flex;
  gap: 14px;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 12.5px;
}
.ga-subject__nums b { color: var(--text); font-variant-numeric: tabular-nums; }
.ga-subject__note { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.ga-subject__target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
}

.ga-exams { display: flex; flex-direction: column; gap: 7px; }
.ga-exam {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.ga-exam__head { display: flex; align-items: baseline; gap: 7px; }
.ga-exam__head small { color: var(--text-muted); font-size: 11.5px; }
.ga-exam__nums { grid-column: 1; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ga-exam__nums b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ga-exam__nums small { color: var(--text-muted); }
.ga-exam__delta { font-size: 12px; font-variant-numeric: tabular-nums; }
.ga-exam__delta.is-up   { color: var(--success); }
.ga-exam__delta.is-down { color: var(--danger-text, var(--danger)); }

/* ==========================================================================
   学习数据看板
   ========================================================================== */

.db-chart { display: block; width: 100%; height: 240px; }

.db-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 11px;
  margin-top: 16px;
}
.db-empty { margin: 0 0 9px; color: var(--text-muted); font-size: 13px; }

.db-streak { margin: 0; }
.db-streak b { font-size: 38px; font-variant-numeric: tabular-nums; line-height: 1; }
.db-streak span { color: var(--text-muted); }

.db-rate + .db-rate { margin-top: 11px; }
.db-rate__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  font-size: 13px;
}
.db-rate__head b { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   课程表
   ========================================================================== */

.sc-grid {
  display: grid;
  gap: 3px;
  /* grid-template-columns 由 JS 设：列数随「显示周末」变 */
  overflow-x: auto;
}
.sc-corner, .sc-head, .sc-period {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 12.5px;
}
.sc-head { font-weight: 600; padding: 5px 0; }
.sc-period { font-variant-numeric: tabular-nums; }

.sc-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 52px;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.sc-cell--empty {
  background: var(--bg);
  color: var(--text-muted);
  border-style: dashed;
  font-size: 15px;
}
.sc-cell--empty:hover { border-color: var(--blue-600); color: var(--blue-600); }
/* 六个配色都够深，白字对比度达标（见 schedule.js 的 COLORS 注释） */
.sc-cell--course { border-color: transparent; color: #FFFFFF; }
.sc-cell--course:hover { outline: 2px solid var(--text); outline-offset: 1px; }
.sc-cell__name { font-size: 12.5px; line-height: 1.25; }
.sc-cell--course small { font-size: 10.5px; opacity: .85; }

.sc-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-swatch {
  min-width: var(--tap-min);
  min-height: 34px;
  padding: 0 10px;
  border: 2px solid transparent;
  border-radius: 9px;
  color: #FFFFFF;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.sc-swatch.is-on { border-color: var(--text); }
.sc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

@media print {
  /* 打印时只留课表本身 */
  .tool__col--settings, .site-header, .site-footer, .crumb { display: none !important; }
  .sc-cell--course { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   中高考冲刺计划
   ========================================================================== */

.ep-subjects { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }

.ep-weeks { display: flex; flex-direction: column; gap: 10px; }
.ep-week {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.ep-week[data-urgency="critical"] { border-left-color: var(--danger); }
.ep-week[data-urgency="warn"]     { border-left-color: var(--yellow-500); }
/* 过去的周不标紧迫色，只压低存在感 */
.ep-week.is-past { opacity: .55; }

.ep-week__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
}
.ep-week__head small { color: var(--text-muted); font-size: 12px; }
.ep-week__days {
  color: var(--text-muted);
  font-size: 12.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ep-week[data-urgency="critical"] .ep-week__days { color: var(--danger-text, var(--danger)); font-weight: 600; }
.ep-week__empty { margin: 7px 0 0; color: var(--text-muted); font-size: 12.5px; }
.ep-week__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.ep-week__foot small { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.ep-days { margin: 0 0 9px; }
.ep-days b { font-size: 40px; font-variant-numeric: tabular-nums; line-height: 1; }
.ep-days span { color: var(--text-muted); }
.ep-days[data-urgency="critical"] b { color: var(--danger-text, var(--danger)); }

/* ==========================================================================
   内置内容包的来源标注（core/datapack.js 的 sourceNote）
   ========================================================================== */

/* 出处不是脚注，是这份内容的一部分（D5 第 3 条），所以不折叠、不缩到最小 */
.pack-source {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 18px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.pack-source a { color: var(--blue-600); }
.pack-source__license { opacity: .85; }
.pack-source__caveat { flex-basis: 100%; }

/* ==========================================================================
   公式速查（数学 / 物理共用）
   ========================================================================== */

.fm-group + .fm-group { margin-top: 22px; }
.fm-group__title {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 9px;
  font-size: 15.5px;
  /* 锚点跳转时别被吸顶的 header 盖住 */
  scroll-margin-top: 70px;
}
.fm-group__title small { color: var(--text-muted); font-weight: 400; font-size: 12px; }

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

.fm-card {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.fm-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fm-card__name { margin: 0; font-size: 13.5px; }
.fm-card__fav {
  min-width: 30px;
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.fm-card__fav.is-on { color: var(--yellow-500); }
.fm-card__fav:hover { background: var(--bg); }

/* 公式允许换行：长公式在手机上撑破卡片比换行难看得多 */
.fm-card__tex {
  margin: 7px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.fm-card__meta { display: flex; gap: 5px; flex-wrap: wrap; }
.fm-card__note { margin: 6px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }

.fm-empty { padding: 30px 12px; color: var(--text-muted); text-align: center; }

/* ==========================================================================
   元素周期表
   ========================================================================== */

/* ★ 滚动容器是**父元素**，不是网格自己。
   写成 .pt-grid { overflow-x: auto; min-width: 560px } 是无效的 ——
   元素自己就 560px 宽，overflow-x 管不住自身，照样撑开整页。
   实测 390px 宽下整页横向溢出 205px。 */
.pt-scroll {
  overflow-x: auto;
  /* 让镧系锕系两行跟着主表一起滚，对齐才不会散 */
  padding-bottom: 4px;
}

.pt-grid {
  display: grid;
  grid-template-columns: repeat(18, minmax(30px, 1fr));
  gap: 2px;
  /* 18 列在手机上必然要横向滚动，给一个下限保证格子还认得出 */
  min-width: 560px;
}

.pt-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  aspect-ratio: 1;
  padding: 1px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
}
.pt-tile:hover { outline: 2px solid var(--text); outline-offset: 1px; }
/* 筛选时压暗而不是隐藏 —— 周期表的形状本身就是信息，挖掉几个格子就不成表了 */
.pt-tile.is-dim { opacity: .22; }
.pt-tile__z { font-size: 8.5px; line-height: 1; opacity: .75; font-variant-numeric: tabular-nums; }
.pt-tile__sym { font-size: 13px; line-height: 1.15; }
.pt-tile__cn { font-size: 8.5px; line-height: 1; }

.pt-tile--ph {
  border-style: dashed;
  border-color: var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: default;
  font-size: 8.5px;
}
.pt-tile--ph b { font-size: 10px; }

/* 类别配色。每个格子里都写着符号和中文名，颜色不是唯一手段 */
.pt-tile[data-cat="alkali"],     .pt-legend i[data-cat="alkali"],     .pt-detail__tile[data-cat="alkali"]     { background: #F6C6C6; }
.pt-tile[data-cat="alkaline"],   .pt-legend i[data-cat="alkaline"],   .pt-detail__tile[data-cat="alkaline"]   { background: #F7DDB3; }
.pt-tile[data-cat="transition"], .pt-legend i[data-cat="transition"], .pt-detail__tile[data-cat="transition"] { background: #CFE0F5; }
.pt-tile[data-cat="post"],       .pt-legend i[data-cat="post"],       .pt-detail__tile[data-cat="post"]       { background: #D7E4CD; }
.pt-tile[data-cat="metalloid"],  .pt-legend i[data-cat="metalloid"],  .pt-detail__tile[data-cat="metalloid"]  { background: #E3D6F0; }
.pt-tile[data-cat="nonmetal"],   .pt-legend i[data-cat="nonmetal"],   .pt-detail__tile[data-cat="nonmetal"]   { background: #C9E9DE; }
.pt-tile[data-cat="halogen"],    .pt-legend i[data-cat="halogen"],    .pt-detail__tile[data-cat="halogen"]    { background: #F3E3A8; }
.pt-tile[data-cat="noble"],      .pt-legend i[data-cat="noble"],      .pt-detail__tile[data-cat="noble"]      { background: #D4D9F2; }
.pt-tile[data-cat="lanthanide"], .pt-legend i[data-cat="lanthanide"], .pt-detail__tile[data-cat="lanthanide"] { background: #F0D6E4; }
.pt-tile[data-cat="actinide"],   .pt-legend i[data-cat="actinide"],   .pt-detail__tile[data-cat="actinide"]   { background: #E8CFC2; }
.pt-tile[data-cat="unknown"],    .pt-legend i[data-cat="unknown"],    .pt-detail__tile[data-cat="unknown"]    { background: #DEE1E6; }
/* 这些底色都是浅色，深色模式下也保持浅底深字 —— 元素格是彩色分类块，
   跟着暗色反转会让整张表糊成一片 */
[data-theme="dark"] .pt-tile:not(.pt-tile--ph),
[data-theme="dark"] .pt-detail__tile { color: #182234; }

.pt-strip { display: flex; align-items: center; gap: 8px; margin-top: 7px; overflow-x: auto; }
.pt-strip__label {
  flex-shrink: 0;
  width: 36px;
  color: var(--text-muted);
  font-size: 11.5px;
  text-align: right;
}
.pt-strip__row { display: flex; gap: 2px; }
.pt-strip__row .pt-tile { width: 34px; flex-shrink: 0; }

.pt-legend { display: flex; flex-direction: column; gap: 2px; }
.pt-legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.pt-legend__item:hover { background: var(--bg); }
.pt-legend__item.is-on { border-color: var(--blue-600); background: var(--bg); }
.pt-legend i { width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0; }

.pt-detail { display: flex; flex-direction: column; gap: 13px; }
.pt-detail__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  align-self: center;
  width: 92px;
  aspect-ratio: 1;
  border-radius: 12px;
  color: #182234;
}
.pt-detail__tile b { font-size: 30px; line-height: 1; }
.pt-detail__tile small { font-size: 12px; }

/* ==========================================================================
   五十音
   ========================================================================== */

.kn-toggle { margin-bottom: 13px; }
.kn-section + .kn-section { margin-top: 20px; }
.kn-grid { display: grid; gap: 4px; }
.kn-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}
/* や行わ行的空位要留着 —— 那是五十音图本来的样子 */
.kn-cell--blank { border: 0; background: none; }
.kn-cell__kana { font-size: 21px; line-height: 1.1; }
.kn-cell__romaji { color: var(--text-muted); font-size: 10.5px; }
/* 熟练度四档：格子里同时有罗马音，颜色不是唯一手段 */
.kn-cell[data-level="good"] { border-color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
.kn-cell[data-level="mid"]  { border-color: var(--yellow-500); background: color-mix(in srgb, var(--yellow-500) 14%, var(--surface)); }
.kn-cell[data-level="weak"] { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }

/* ==========================================================================
   化学方程式
   ========================================================================== */

.ce-list { display: flex; flex-direction: column; gap: 8px; }
.ce-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}
.ce-card__eq {
  margin: 0 0 6px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14.5px;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.ce-card__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ce-card__meta small { color: var(--text-muted); font-size: 12px; }

.ce-face { text-align: center; }
.ce-face__eq {
  margin: 0;
  padding: 20px 12px;
  border-radius: 13px;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(16px, 4vw, 24px);
  line-height: 1.6;
  overflow-wrap: break-word;
}
.ce-face__prompt { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; }

/* ==========================================================================
   背诵检测
   ========================================================================== */

.rc-text {
  padding: 18px 16px;
  border-radius: 13px;
  background: var(--surface);
  font-size: 17px;
  line-height: 2.2;
}
.rc-line { margin: 0 0 4px; }
.rc-tok--space { white-space: pre; }

.rc-blank {
  display: inline-block;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid var(--blue-600);
  border-radius: 3px;
  background: color-mix(in srgb, var(--blue-600) 12%, transparent);
  color: transparent;
  font: inherit;
  cursor: pointer;
  vertical-align: baseline;
}
.rc-blank:hover { background: color-mix(in srgb, var(--blue-600) 22%, transparent); }
/* 点开看过的用另一种底色标出来 —— 收尾时要算「有几处是靠看的」，
   过程中就得看得见，不能等到结算才告诉人 */
.rc-blank.is-shown {
  border-bottom-color: var(--yellow-500);
  background: color-mix(in srgb, var(--yellow-500) 22%, transparent);
  color: var(--text);
  cursor: default;
}

/* ==========================================================================
   听写训练
   ========================================================================== */

.dc-face { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 18px 0; }
.dc-face__hint { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.ce-face__tip { margin: 5px 0 0; color: var(--text-muted); font-size: 12px; }

/* ==========================================================================
   参考文献生成器
   ========================================================================== */

.ct-form { display: flex; flex-direction: column; gap: 2px; }

/* 「生成的是草稿」这句放在显眼位置，不是折在角落的免责声明 */
.ct-warn {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--yellow-500);
  border-radius: 0 9px 9px 0;
  background: var(--bg);
  font-size: 12.5px;
  line-height: 1.65;
}
.ct-warn strong { display: block; margin-bottom: 3px; }
.ct-warn span { color: var(--text-muted); }

.ct-list { display: flex; flex-direction: column; gap: 10px; }
.ct-item {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.ct-item__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ct-item__no { color: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* 生成结果用可选中的正文样式，方便手动复制；允许换行不撑破卡片 */
.ct-item__out {
  margin: 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--bg);
  font-size: 13.5px;
  line-height: 1.8;
  overflow-wrap: break-word;
  user-select: text;
}
.ct-item__miss {
  margin: 6px 0 0;
  color: var(--danger-text, var(--danger));
  font-size: 12px;
}
.ct-item__btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   论文写作自查
   ========================================================================== */

.wc-editor { font-size: 14px; line-height: 1.8; resize: vertical; }

/* 「正文不保存」要说在输入框旁边，不是在页面底部 */
.wc-privacy {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
}
.wc-privacy strong { color: var(--text); }
.wc-privacy span { color: var(--text-muted); }

.wc-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 12px; }

.wc-summary {
  margin: 0 0 13px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--bg);
  font-size: 13.5px;
  line-height: 1.7;
}

.wc-issues { display: flex; flex-direction: column; gap: 8px; }
.wc-issue {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}
/* 三档同时有文字标签（基本可以确定 / 值得看一眼 / 看要求），颜色不是唯一手段 */
.wc-issue[data-level="high"] { border-left-color: var(--danger); }
.wc-issue[data-level="mid"]  { border-left-color: var(--yellow-500); }
.wc-issue[data-level="low"]  { border-left-color: var(--border); }

.wc-issue__head { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.wc-issue__level {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11.5px;
}
.wc-issue__excerpt {
  margin: 6px 0 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.wc-issue__detail { margin: 6px 0 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }

/* ==========================================================================
   文献阅读笔记
   ========================================================================== */

.rn-list { display: flex; flex-direction: column; gap: 9px; }
.rn-card {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.rn-card.is-open { border-color: var(--blue-600); }

.rn-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rn-card__title { display: block; font-size: 14px; line-height: 1.5; }
.rn-card__meta { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px; }
.rn-card__rating {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
}
/* 三档评价：文字本身就是标签，颜色只是辅助 */
.rn-card__rating[data-rating="must"]  { background: var(--blue-600); color: var(--text-on-brand); }
.rn-card__rating[data-rating="maybe"] { background: var(--bg); color: var(--text-muted); }
.rn-card__rating[data-rating="skip"]  { background: var(--bg); color: var(--text-muted); opacity: .7; }

.rn-card__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.rn-card__body { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.rn-card__body h4 { margin: 10px 0 3px; font-size: 12.5px; color: var(--text-muted); }
.rn-card__body h4:first-child { margin-top: 0; }
.rn-card__body p { margin: 0; font-size: 13.5px; line-height: 1.75; white-space: pre-wrap; }
.rn-card__doi { color: var(--text-muted); font-size: 12px; overflow-wrap: break-word; }

/* ==========================================================================
   资料收藏夹
   ========================================================================== */

.cl-list { display: flex; flex-direction: column; gap: 9px; }
.cl-card {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.cl-card__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cl-card__title { font-size: 14px; }

/* 摘录是这个工具的主体，给它引文的样式 */
.cl-card__excerpt {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--border);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.8;
  white-space: pre-wrap;
}
.cl-card__note { margin: 7px 0 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }

/* ==========================================================================
   图形交互组共用
   四个工具（分数、时钟、单位、几何）的 SVG 都在页面里活着，
   颜色一律走 CSS 变量而不是写死 —— 主题切换时图形要跟着变。
   ========================================================================== */

.fr-fig, .ck-face, .gm-fig { display: block; max-width: 100%; height: auto; }

/* ==========================================================================
   分数可视化
   ========================================================================== */

.fr-stage { display: flex; justify-content: center; padding: 6px 0 2px; }
.fr-fig { width: 180px; }
.fr-fig--bar { width: 100%; max-width: 340px; }

/* 每一份单独一块，边框把份数分开 —— 学生要能数出「切成 4 份」 */
.fr-slice, .fr-cell {
  fill: var(--bg);
  stroke: var(--border);
  stroke-width: 1.5;
}
.fr-slice.is-on, .fr-cell.is-on { fill: var(--blue-600); }
.fr-cell { rx: 2; }
.fr-fig__more { fill: var(--text-muted); font-size: 11px; }

.fr-read {
  margin: 8px 0 0;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fr-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.fr-facts dt { color: var(--text-muted); font-size: 13px; }
.fr-facts dd { margin: 0; font-size: 13.5px; line-height: 1.6; }

.fr-pair { display: flex; flex-direction: column; gap: 12px; }
.fr-pair__one { display: flex; flex-direction: column; gap: 5px; }
.fr-pair__one b { font-size: 15px; font-variant-numeric: tabular-nums; }

.fr-verdict {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-control);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.7;
}
.fr-sub { margin: 20px 0 6px; font-size: 14px; }
.fr-note { margin: 0 0 10px; color: var(--text-muted); font-size: 13px; line-height: 1.7; }
.fr-note b { color: var(--text); }

.fr-eq { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.fr-eq:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.fr-eq__line {
  margin: 0 0 3px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}
.fr-eq__fig { margin-top: 8px; }
.fr-eq__label { margin: 4px 0 0; color: var(--text-muted); font-size: 12.5px; }

/* 分子分母上下排的输入框 */
.fr-input {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 3px;
  margin-bottom: 14px;
}
.fr-input__label {
  color: var(--text-muted);
  font-size: 12.5px;
  justify-self: start;
  margin-bottom: 2px;
}
.fr-input__bar { width: 62px; height: 2px; background: var(--text); }
.fr-num {
  width: 72px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fr-num:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }

/* ==========================================================================
   时钟认知
   ========================================================================== */

.ck-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ck-face { width: 260px; }
.ck-face.is-draggable { cursor: pointer; touch-action: none; }
.ck-face:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; border-radius: 50%; }

.ck-dial { fill: var(--surface); stroke: var(--border); stroke-width: 2; }
.ck-tick { stroke: var(--border); stroke-width: 1.5; }
.ck-tick--hour { stroke: var(--text-muted); stroke-width: 2.5; }
.ck-numeral { fill: var(--text); font-size: 19px; font-weight: 600; }

.ck-hand { stroke-linecap: round; }
/* 时针短而粗，分针长而细 —— 认钟的第一课，图上必须一眼分得出 */
.ck-hand--hour { stroke: var(--text); stroke-width: 7; }
.ck-hand--minute { stroke: var(--blue-600); stroke-width: 4; }
.ck-pin { fill: var(--text); }

.ck-handpick { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.ck-ask { margin: 0 0 14px; font-size: 15px; line-height: 1.7; text-align: center; }
.ck-target {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--blue-600);
}
.ck-answer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.ck-answer .select { width: auto; min-width: 82px; font-size: 17px; text-align: center; }
.ck-colon { font-size: 22px; font-weight: 700; }

.ck-now, .ck-tip { margin: 10px 0 0; color: var(--text-muted); font-size: 13px; text-align: center; line-height: 1.7; }
.ck-readout { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 14px; }
.ck-digital { font-size: 34px; font-variant-numeric: tabular-nums; }
.ck-spoken { color: var(--text-muted); font-size: 14px; }

.ck-fb {
  margin-top: 16px;
  padding: 12px 15px;
  border-radius: var(--radius-control);
  border-left: 3px solid var(--border);
  background: var(--bg);
}
.ck-fb.is-ok { border-left-color: var(--success); }
.ck-fb.is-bad { border-left-color: var(--danger); }
.ck-fb__text { margin: 0; font-size: 14px; line-height: 1.75; }
.ck-fb__fig { display: flex; justify-content: center; margin-top: 12px; }
.ck-fb__fig .ck-face { width: 180px; }

.ck-score { margin: 0 0 8px; font-size: 19px; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   单位换算
   ========================================================================== */

.un-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 10px;
}
.un-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.un-value { font-size: 20px; font-variant-numeric: tabular-nums; }
.un-swap { align-self: center; margin-top: 6px; padding: 8px 10px; font-size: 16px; }

.un-result {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: var(--radius-control);
  background: var(--bg);
  overflow-wrap: anywhere;
}
.un-result__num { font-size: 20px; font-variant-numeric: tabular-nums; }
.un-result__unit { color: var(--text-muted); font-size: 13px; }
.un-result__empty { margin: 0; color: var(--text-muted); font-size: 13px; align-self: center; }

.un-rate {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: var(--radius-control);
  border-left: 3px solid var(--yellow-500);
  background: var(--bg);
}
.un-rate b { font-size: 17px; font-variant-numeric: tabular-nums; }
.un-rate span { color: var(--text-muted); font-size: 12.5px; line-height: 1.65; }
.un-rate--none { border-left-color: var(--border); color: var(--text-muted); font-size: 13px; }

.un-all { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.un-all__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
}
.un-all__row + .un-all__row { border-top: 1px solid var(--border); border-radius: 0; }
.un-all__row.is-on { background: var(--bg); font-weight: 600; }
.un-all__num { min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.un-all__unit { color: var(--text-muted); font-size: 13px; }
.un-money { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 14px; }

.un-note { margin: 0 0 10px; color: var(--text-muted); font-size: 12.5px; line-height: 1.7; }
.un-note strong { color: var(--text); display: block; }

@media (max-width: 480px) {
  /* 手机上三栏挤不下，改成上下两行，交换键横过来 */
  .un-row { grid-template-columns: 1fr; }
  .un-swap { justify-self: center; margin: 0; }
}

/* ==========================================================================
   几何计算器
   ========================================================================== */

.gm-top { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.gm-fig { width: 200px; flex: 0 0 auto; }
.gm-fig__shape { fill: var(--bg); stroke: var(--blue-600); stroke-width: 2; }
.gm-fig__aux { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.gm-fig__label { fill: var(--text-muted); font-size: 12px; }
.gm-fig__note { margin: 10px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }

.gm-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  flex: 1 1 220px;
}
.gm-field { margin: 0; }

.gm-out { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.gm-out__hint { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.7; }

.gm-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gm-result {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.gm-result__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gm-result__label { color: var(--text-muted); font-size: 13px; }
.gm-result__value { font-size: 19px; font-variant-numeric: tabular-nums; }
/* 公式用等宽，跟散文区分开 */
.gm-result__formula {
  margin: 8px 0 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.gm-result__plug {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.gm-note {
  margin: 12px 0 0;
  padding: 10px 13px;
  border-radius: var(--radius-control);
  border-left: 3px solid var(--yellow-500);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.7;
}

/* 拨钟的加减按钮。给不用鼠标的人留的路径，不是装饰 */
.ck-steppers { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.ck-stepper { display: flex; align-items: center; gap: 6px; }
.ck-stepper__name { color: var(--text-muted); font-size: 12.5px; }
.ck-stepper .btn { min-width: 40px; font-size: 17px; line-height: 1; }

/* 假分数拆成几个整来画。17/12 画成「一个满的 + 一个 5/12」，
   不是一个涂满的图 —— 那样看起来跟 12/12 没区别 */
.fr-figs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fr-figs.is-multi .fr-fig--bar { flex: 1 1 130px; min-width: 110px; }
.fr-figs__note {
  flex-basis: 100%;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}

/* ==========================================================================
   函数图像实验室
   ========================================================================== */

.fp-formula {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 17px;
  text-align: center;
}
.fp-stage { display: flex; justify-content: center; }
.fp-graph { width: 100%; max-width: 460px; height: auto; }

.fp-grid { stroke: var(--border); stroke-width: .6; }
.fp-axis { stroke: var(--text-muted); stroke-width: 1.4; }
.fp-tick { fill: var(--text-muted); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.fp-axis-name { fill: var(--text-muted); font-size: 12px; font-style: italic; }
/* 曲线不填充 —— 忘了写 fill:none 的话 SVG 会把折线首尾连起来填成一块色 */
.fp-curve { fill: none; stroke: var(--blue-600); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.fp-point { fill: var(--yellow-500); stroke: var(--surface); stroke-width: 2; }
.fp-empty { fill: var(--text-muted); font-size: 13px; }

.fp-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-control);
  border-left: 3px solid var(--yellow-500);
  background: var(--bg);
  font-size: 13px;
  line-height: 1.75;
}

.fp-points { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.fp-points__title { margin: 0 0 8px; font-size: 14px; }
.fp-points__list { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; }
.fp-points__list dt { color: var(--text-muted); font-size: 13px; }
.fp-points__list dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; line-height: 1.6; }

.fp-param { margin-bottom: 14px; }
.fp-param__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.fp-param__label { color: var(--text-muted); font-size: 12.5px; }
.fp-param__value { font-size: 15px; font-variant-numeric: tabular-nums; }
.fp-param__num { margin-top: 6px; font-size: 13px; }
.fp-range { width: 100%; accent-color: var(--blue-600); }

/* ==========================================================================
   思维导图
   ========================================================================== */

.mp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mp-bar__stat { color: var(--text-muted); font-size: 12.5px; }
.mp-bar__spacer { flex: 1 1 auto; }

/* 图会比屏幕宽，横向滚动比缩到看不清强 */
.mp-scroll {
  overflow-x: auto;
  padding: 6px 2px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.mp-canvas { display: block; height: auto; }

.mp-link { fill: none; stroke: var(--border); stroke-width: 1.8; }

.mp-node { cursor: pointer; }
.mp-node:focus-visible { outline: none; }
.mp-node__box {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.5;
}
.mp-node__text { fill: var(--text); font-size: 13px; }
.mp-node:hover .mp-node__box { stroke: var(--blue-600); }
.mp-node.is-on .mp-node__box { stroke: var(--blue-600); stroke-width: 2.5; }
.mp-node:focus-visible .mp-node__box { stroke: var(--blue-600); stroke-width: 2.5; stroke-dasharray: 4 2; }
.mp-node.is-root .mp-node__box { fill: var(--blue-600); stroke: var(--blue-600); }
.mp-node.is-root .mp-node__text { fill: var(--text-on-brand); }

/* 颜色只是辅助，节点的意义靠文字。这里不做「只有颜色能区分」的设计 */
.mp-node[data-color="blue"]   .mp-node__box { stroke: var(--blue-600); }
.mp-node[data-color="green"]  .mp-node__box { stroke: var(--success); }
.mp-node[data-color="yellow"] .mp-node__box { stroke: var(--yellow-500); }
.mp-node[data-color="purple"] .mp-node__box { stroke: var(--purple-600); }

.mp-fold { fill: var(--bg); stroke: var(--border); stroke-width: 1.5; }
.mp-fold__n { fill: var(--text-muted); font-size: 10px; }

.mp-maps { display: flex; flex-direction: column; gap: 6px; }
.mp-maps__one {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; text-align: left;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: inherit; font: inherit; cursor: pointer;
}
.mp-maps__one b { font-size: 13.5px; }
.mp-maps__one small { color: var(--text-muted); font-size: 11.5px; }
.mp-maps__one.is-on { border-color: var(--blue-600); background: var(--bg); }

.mp-sel { display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px; }
.mp-sel small { color: var(--text-muted); font-size: 11.5px; }
.mp-path {
  margin: 0 0 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px; line-height: 1.6;
  overflow-wrap: anywhere;
}
.mp-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

/* ==========================================================================
   生字田字格
   ========================================================================== */

.wg-hint, .wg-warn { margin: 0 0 12px; color: var(--text-muted); font-size: 12.5px; line-height: 1.7; }
.wg-warn { color: var(--danger-text); }
.wg-stat {
  margin: 10px 0 0; padding: 9px 12px;
  border-radius: var(--radius-control); background: var(--bg);
  color: var(--text-muted); font-size: 12.5px; line-height: 1.65;
}
.wg-check { flex-direction: row; align-items: center; gap: 8px; }

.wg-preview { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* 屏幕上把整页缩到容器宽度；打印时 width/height 属性上的 mm 生效 */
.wg-page {
  /* ★ 必须是块级。<svg> 默认行内级，而 CSS 的 `page` 属性只对块级盒子生效 ——
     不写这一行，print.css 里的具名页面 @page wg-sheet { margin: 0 } 会被忽略，
     落回全局那条 @page { margin: 12mm }，可打印区只剩 186mm，
     而这张 SVG 是 210mm，Chrome 于是「缩放以适应」：整页按 88.6% 印出来，
     设定 20mm 的格子实际印成 17.65mm。屏幕上完全看不出来。 */
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: #FFFFFF;      /* 纸永远是白的，深色主题下也一样 */
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
}

/* 格线用固定的深浅，不跟主题走 —— 这些线是要印在纸上的 */
.wg-box { fill: none; stroke: #333333; stroke-width: .4; }
.wg-guide { stroke: #C62828; stroke-width: .25; stroke-dasharray: 1.6 1.2; fill: none; }
.wg-pinyin { stroke: #7A7A7A; stroke-width: .2; }
.wg-pinyin--mid { stroke: #333333; stroke-width: .3; }
.wg-char { fill: #222222; }
/* 描红字要浅到能盖住又看得清。太深会盖不住，太浅打印机印不出来 */
.wg-char--trace { fill: #C9C9C9; }
.wg-pageno { fill: #999999; }

/* ==========================================================================
   古诗词背诵
   ========================================================================== */

.pm-head { margin-bottom: 12px; }
.pm-title { margin: 0; font-size: 21px; }
.pm-meta { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }
.pm-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.pm-lines { margin: 14px 0; }
.pm-line {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 2.1;
  letter-spacing: .06em;
  text-align: center;
}
.pm-tok { white-space: pre; }
/* 遮住的地方用等宽底纹，看得出「这里有几个字」—— 那本身就是提示 */
.pm-tok--hidden {
  display: inline-block;
  border-bottom: 2px solid var(--text-muted);
  background: var(--bg);
  border-radius: 3px;
}
/* 对完答案后，刚才被遮住的字标出来，一眼看见自己漏了哪几个 */
.pm-tok--was { color: var(--blue-600); font-weight: 600; }

.pm-recite__stat { margin: 0; color: var(--text-muted); font-size: 12.5px; }
.pm-grade { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pm-grade__ask { margin: 0 0 8px; font-size: 14px; }

.pm-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 380px; overflow-y: auto; }
.pm-list__one {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  width: 100%; padding: 8px 11px; text-align: left;
  border: 1px solid transparent; border-radius: 9px;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.pm-list__one:hover { background: var(--bg); }
.pm-list__one.is-on { border-color: var(--blue-600); background: var(--bg); }
.pm-list__one b { font-size: 13.5px; }
.pm-list__one small { color: var(--text-muted); font-size: 11.5px; }
.pm-star { color: var(--yellow-500); }
.pm-due { margin-left: auto; color: var(--text-muted); font-size: 11px; }

.pm-stat { margin: 0 0 8px; font-size: 17px; font-variant-numeric: tabular-nums; }
.pm-empty { margin: 0 0 6px; font-size: 15px; }
.pm-diff { margin: 8px 0; padding: 9px 12px; border-radius: var(--radius-control); background: var(--bg); font-size: 15px; line-height: 1.9; }

/* 「为什么没有注释」要主动说，否则会被当成内容做漏了 */
.pm-license {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-control);
  border-left: 3px solid var(--yellow-500);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.7;
}
.pm-license strong { color: var(--text); display: block; margin-bottom: 2px; }

/* ==========================================================================
   拼音识字
   ========================================================================== */

.py-group { margin: 18px 0 8px; font-size: 14px; color: var(--text-muted); }
.py-group:first-child { margin-top: 0; }

.py-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.py-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; text-align: left;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: inherit; font: inherit; cursor: pointer;
  min-height: var(--tap-min);
}
.py-cell:hover { border-color: var(--blue-600); }
.py-cell__sound { font-size: 20px; font-family: var(--font-mono); }
.py-cell__eg { color: var(--text); font-size: 12.5px; }
.py-cell__tip { color: var(--text-muted); font-size: 11.5px; line-height: 1.5; }

.py-types { display: flex; flex-direction: column; gap: 8px; }
.py-types__note { color: var(--text-muted); font-weight: 400; }

.py-q { text-align: center; }
.py-q__prompt { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; }
.py-q__text { font-size: 40px; line-height: 1.3; }

.py-note {
  margin: 14px 0 0; padding: 10px 14px;
  border-radius: var(--radius-control); border-left: 3px solid var(--yellow-500);
  background: var(--bg); color: var(--text-muted); font-size: 12.5px; line-height: 1.7;
}
.py-note strong { color: var(--text); display: block; margin-bottom: 2px; }
.py-empty { margin: 0 0 6px; font-size: 15px; }

/* ==========================================================================
   英语语法卡
   ========================================================================== */

.eg-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.eg-name { margin: 0; font-size: 20px; }
.eg-rule { margin: 10px 0 0; font-size: 15px; line-height: 1.8; }

.eg-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 0; }
.eg-facts dt { color: var(--text-muted); font-size: 13px; }
.eg-facts dd { margin: 0; font-size: 14px; line-height: 1.7; }
.eg-form { font-family: var(--font-mono); font-size: 13.5px; }

.eg-sub { margin: 18px 0 7px; font-size: 14px; }
.eg-eg { margin: 0; padding-left: 20px; }
.eg-eg li { margin-bottom: 6px; font-size: 14.5px; line-height: 1.8; }

/* 考试丢的分几乎都在这一栏。做成折叠或小字脚注就白写了 */
.eg-trap {
  margin: 16px 0 0;
  padding: 12px 15px;
  border-radius: var(--radius-control);
  border-left: 4px solid var(--danger);
  background: var(--bg);
}
.eg-trap strong { display: block; margin-bottom: 4px; color: var(--danger-text); font-size: 13px; }
.eg-trap p { margin: 0; font-size: 13.5px; line-height: 1.8; }

.eg-quiz__q { margin: 0; padding: 11px 14px; border-radius: var(--radius-control); background: var(--bg); font-size: 15px; line-height: 1.8; }
.eg-quiz__a { margin: 10px 0 0; padding: 11px 14px; border-radius: var(--radius-control); border-left: 3px solid var(--success); background: var(--bg); }
.eg-quiz__a b { font-size: 16px; font-family: var(--font-mono); }
.eg-quiz__a p { margin: 5px 0 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.7; }

.eg-grade { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); }
.eg-grade__ask { margin: 0 0 8px; font-size: 14px; }

.eg-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 340px; overflow-y: auto; }
.eg-list__one {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  width: 100%; padding: 7px 11px; text-align: left;
  border: 1px solid transparent; border-radius: 9px;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.eg-list__one:hover { background: var(--bg); }
.eg-list__one.is-on { border-color: var(--blue-600); background: var(--bg); }
.eg-list__one b { font-size: 13px; }
.eg-list__one small { margin-left: auto; color: var(--text-muted); font-size: 11px; }
.eg-star { color: var(--yellow-500); }
.eg-stat { margin: 0 0 8px; font-size: 17px; font-variant-numeric: tabular-nums; }

.eg-q { text-align: center; }
.eg-q__prompt { margin: 0 0 8px; color: var(--text-muted); font-size: 12.5px; }
.eg-q__text { margin: 0; font-size: 19px; line-height: 1.8; }

.eg-note {
  margin: 12px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.7;
}

/* ==========================================================================
   作文素材卡
   ========================================================================== */

.wc-list { display: flex; flex-direction: column; gap: 12px; }
.wc-card {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
/* 自建的卡跟内置的要分得出来 —— 但靠左边一条杠，不只靠颜色 */
.wc-card.is-mine { border-left: 3px solid var(--blue-600); }

.wc-card__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wc-card__title { margin: 0; font-size: 15.5px; flex: 1 1 auto; }
.wc-star {
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
  color: var(--text-muted); font-size: 17px; line-height: 1;
}
.wc-star.is-on { color: var(--yellow-500); }

.wc-card__body { margin: 9px 0 0; font-size: 14.5px; line-height: 1.9; white-space: pre-wrap; }
/* 出处紧跟内容，不折起来 —— 写进作文的东西必须能说清哪儿来的 */
.wc-card__source { margin: 7px 0 0; color: var(--text-muted); font-size: 13px; text-align: right; }

.wc-card__use {
  margin: 11px 0 0;
  padding: 10px 13px;
  border-radius: var(--radius-control);
  border-left: 3px solid var(--yellow-500);
  background: var(--bg);
}
.wc-card__use strong { display: block; margin-bottom: 3px; font-size: 12.5px; }
.wc-card__use p { margin: 0; font-size: 13px; line-height: 1.8; white-space: pre-wrap; }

.wc-card__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.chip--btn { border: 0; cursor: pointer; font: inherit; font-size: 11.5px; }
.wc-card__btns { display: flex; gap: 6px; align-items: center; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); }
.wc-badge { margin-left: auto; color: var(--text-muted); font-size: 11.5px; }

.wc-empty { margin: 0; color: var(--text-muted); font-size: 14px; }
.wc-license {
  margin: 16px 0 0; padding: 11px 14px;
  border-radius: var(--radius-control); border-left: 3px solid var(--yellow-500);
  background: var(--bg); color: var(--text-muted); font-size: 12.5px; line-height: 1.7;
}
.wc-license strong { color: var(--text); display: block; margin-bottom: 2px; }

/* ==========================================================================
   语言学习中心
   ========================================================================== */

.vc-plan { margin: 0 0 6px; font-size: 15px; line-height: 1.7; }
/* 积压要看得见 —— 一边积着几百个到期的、一边继续推新词，队列只会越滚越大 */
.vc-backlog {
  margin: 0 0 10px; padding: 9px 13px;
  border-radius: var(--radius-control); border-left: 3px solid var(--yellow-500);
  background: var(--bg); color: var(--text-muted); font-size: 12.5px; line-height: 1.7;
}
.vc-count { margin: 0 0 6px; color: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.vc-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 18px 0; padding: 26px 18px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--bg);
  min-height: 180px; justify-content: center;
}
.vc-word { font-size: 34px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.vc-reading { margin: 0; color: var(--text-muted); font-size: 15px; }
.vc-back { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vc-meaning { margin: 0; font-size: 17px; line-height: 1.7; text-align: center; }
.vc-example { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.7; text-align: center; }
.vc-hint { margin: 0; color: var(--text-muted); font-size: 13px; }

.vc-grade { margin-top: 4px; }
.vc-grade__ask { margin: 0 0 8px; font-size: 14px; }
.vc-done { margin: 0; font-size: 17px; }

.vc-shards { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 7px; margin: 6px 0 12px; }
.vc-shard {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; text-align: left;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: inherit; font: inherit; cursor: pointer;
}
.vc-shard b { font-size: 12.5px; }
.vc-shard small { color: var(--text-muted); font-size: 11px; }
.vc-shard.is-on { border-color: var(--blue-600); background: var(--bg); }
.vc-shard.is-on small { color: var(--blue-600); }

.vc-own { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.vc-own b { font-size: 13px; }
.vc-own small { color: var(--text-muted); font-size: 11.5px; }
.vc-own .btn { margin-left: auto; }

.vc-stat { margin: 0 0 8px; font-size: 17px; font-variant-numeric: tabular-nums; }
.vc-states { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 12px 0 8px; }
.vc-states dt { color: var(--text-muted); font-size: 12.5px; }
.vc-states dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }

.vc-q { text-align: center; }
.vc-q__prompt { margin: 0 0 10px; color: var(--text-muted); font-size: 13px; }
.vc-q__text { font-size: 28px; line-height: 1.4; overflow-wrap: anywhere; }
.vc-listen { font-size: 15px; }

.vc-license {
  margin: 10px 0 0; padding: 10px 14px;
  border-radius: var(--radius-control); border-left: 3px solid var(--yellow-500);
  background: var(--bg); color: var(--text-muted); font-size: 12.5px; line-height: 1.7;
}
.vc-license strong { color: var(--text); display: block; margin-bottom: 2px; }

/* 用不了的模式要看得出来，但不能只靠灰度 —— 副标题里写清原因 */
.mm-level.is-off { opacity: .55; }

/* ==========================================================================
   高考日语专项
   ========================================================================== */

.gj-lead { margin: 0 0 14px; font-size: 13.5px; line-height: 1.8; color: var(--text-muted); }
.gj-lead a { color: var(--blue-600); }

.gj-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.gj-card { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.gj-card__p { font-size: 24px; line-height: 1.2; }
.gj-card__use { margin: 6px 0 0; font-size: 13px; line-height: 1.7; }
/* 「跟谁容易混」比「它是什么意思」有用得多，给它自己的样式 */
.gj-card__vs {
  margin: 7px 0 0; padding: 7px 10px;
  border-radius: 8px; border-left: 3px solid var(--danger);
  background: var(--bg); color: var(--text-muted); font-size: 12px; line-height: 1.65;
}
.gj-card__eg { margin: 7px 0 0; font-size: 13.5px; }

.gj-verb { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 8px; font-size: 16px; }
.gj-verb:first-of-type { margin-top: 0; }
.gj-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gj-table th, .gj-table td { padding: 6px 9px; border-bottom: 1px solid var(--border); text-align: left; }
.gj-table th { color: var(--text-muted); font-weight: 600; font-size: 12px; }
.gj-form { font-size: 15px; }
.gj-trap {
  margin: 8px 0 0; padding: 9px 12px;
  border-radius: var(--radius-control); border-left: 3px solid var(--yellow-500);
  background: var(--bg); color: var(--text-muted); font-size: 12.5px; line-height: 1.7;
}

.gj-q { text-align: center; }
.gj-q__prompt { margin: 0 0 8px; color: var(--text-muted); font-size: 12.5px; }
.gj-q__text { font-size: 24px; line-height: 1.6; }
.gj-stat { margin: 12px 0 8px; font-size: 15px; font-variant-numeric: tabular-nums; }
.gj-note {
  margin: 0 0 10px; color: var(--text-muted); font-size: 12.5px; line-height: 1.7;
}
.gj-note strong { color: var(--text); display: block; }


/* ==========================================================================
   触摸目标尺寸
   实测（scripts/viewport-sweep.mjs）量出来的：浏览器默认的复选框只有
   14–18px，滑块只有 20px 高，手机上点不准。WCAG 2.5.8 要求 24×24。
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
  /* 24px 是 WCAG 2.5.8 的下限。浏览器默认只有 14–18px */
  width: 24px;
  height: 24px;
  accent-color: var(--blue-600);
  flex: 0 0 auto;
  cursor: pointer;
}

/* 滑块：默认只有 20px 高，拇指很难压住 */
input[type="range"] {
  min-height: 28px;
  cursor: pointer;
}

/* 收藏星标原来是 25×21，高度差 3px */
.wc-star { min-width: 28px; min-height: 28px; }