/* 学习平台专属样式（2026-10-18）
 *
 * 独立成文件而不是追加到 app.css：
 * 三个平台会陆续进来，各自样式独立成文件才不会互相污染，
 * 也能一眼看出「这段是哪个平台的」。
 * 颜色全部复用 app.css 已定义的 CSS 变量，不新增色值。
 */

/* ── 平台切换器 ────────────────────────────────────────── */
.platform-switch {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.psw-btn {
  border: 0;
  background: transparent;
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.psw-btn:hover { background: var(--surface-2); }
.psw-btn.active {
  background: var(--blue);
  color: #fff;
}

/* ── 通用块 ────────────────────────────────────────────── */
.st-metrics { margin-bottom: 12px; }
.st-metrics .metric { cursor: default; }
.st-metrics .metric[data-go] { cursor: pointer; }
.st-metrics .metric[data-go]:hover { background: var(--surface-2); }

.st-count {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 400;
}

.st-gap-tip {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.6;
}

/* ── 徽标 ──────────────────────────────────────────────── */
.st-badge {
  display: inline-block;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.st-badge.ok      { background: var(--green-bg); color: var(--green); }
.st-badge.soon    { background: var(--blue-bg);  color: var(--blue); }
.st-badge.miss    { background: var(--gray-bg);  color: var(--gray); }
.st-badge.normal  { background: var(--surface-2); color: var(--text-2); }
.st-badge.warn    { background: var(--yellow-bg); color: var(--yellow); }
.st-badge.danger  { background: var(--red-bg);   color: var(--red); }
.st-badge.muted   { background: var(--gray-bg);  color: var(--text-3); }

/* ── 今天没课时的提示块 ────────────────────────────────── */
.st-gap {
  padding: 14px 16px;
  background: var(--green-bg);
  border-radius: var(--radius);
}
.st-gap-main { font-size: 14.5px; font-weight: 500; color: var(--green); }
.st-gap-sub  { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.st-gap-tip  { font-size: 12.5px; color: var(--text-3); margin-top: 8px; }

/* ── 课次行 ────────────────────────────────────────────── */
.st-session {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.st-session:last-child { border-bottom: 0; }
.st-session-time {
  font-size: 13px;
  color: var(--text);
  min-width: 92px;
  flex-shrink: 0;
}
.st-session-time span {
  display: block;
  font-size: 11.5px;
  color: var(--text-3);
}
.st-session-main { flex: 1; min-width: 0; }
.st-session-course { font-size: 14px; font-weight: 500; }
.st-session-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ── 本周末课表 ────────────────────────────────────────── */
.st-weekend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.st-wcol {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.st-wcol-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 500;
}
.st-wcol-head span { font-size: 11.5px; color: var(--text-3); font-weight: 400; }
.st-wcell {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.st-wcell-p    { font-size: 11.5px; color: var(--text-3); }
.st-wcell-name { font-size: 13.5px; font-weight: 500; margin-top: 2px; }
.st-wcell-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* 空档要显式标出来 ——「今天下午空」比什么都不显示有用 */
.st-wcell.free {
  background: var(--surface-2);
  text-align: center;
  padding: 16px 12px;
}
.st-wcell-free-text {
  font-size: 18px;
  color: var(--text-3);
  font-weight: 500;
}
.st-wcell-free-tip { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

@media (max-width: 640px) {
  .st-weekend { grid-template-columns: 1fr; }
}

/* ── 作业行 ────────────────────────────────────────────── */
.st-assign {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.st-assign:last-of-type { border-bottom: 0; }
.st-assign-main { flex: 1; min-width: 0; }
.st-assign-title { font-size: 14px; }
.st-assign-meta  { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.st-assign.done .st-assign-title { color: var(--text-3); text-decoration: line-through; }

.st-add-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.st-add-row input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}

.st-file-sel {
  font-size: 12.5px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: inherit;
}

/* ── 费曼回顾卡 ────────────────────────────────────────── */
.st-recap-card { border-left: 3px solid var(--purple); }
.st-recap-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.st-recap-item:last-child { border-bottom: 0; }
.st-recap-course { font-size: 14px; font-weight: 500; }
.st-recap-course span { font-size: 11.5px; color: var(--text-3); font-weight: 400; margin-left: 6px; }
.st-recap-hint  { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.st-recap-actions { display: flex; gap: 8px; margin-top: 10px; }

.st-q { margin-bottom: 16px; }
.st-q label { display: block; font-size: 13.5px; font-weight: 500; }
.st-q-hint { font-size: 12px; color: var(--text-3); margin: 4px 0 6px; line-height: 1.55; }
.st-q textarea {
  width: 100%;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}

/* 回顾存档 */
.st-recap-done {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.st-recap-done:last-child { border-bottom: 0; }
.st-recap-done-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.st-recap-done-head span { font-size: 12px; color: var(--text-3); }
.st-q-block {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-2);
  padding: 3px 0 3px 10px;
  border-left: 2px solid var(--border);
  margin-bottom: 4px;
}
.st-q-block b {
  color: var(--text-3);
  font-weight: 400;
  font-size: 12px;
  margin-right: 8px;
}

/* ── 学期概览 ──────────────────────────────────────────── */
.st-term {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.st-term-l { font-size: 12px; color: var(--text-3); }
.st-term-v { font-size: 14px; font-weight: 500; margin-top: 2px; }

.st-progress {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.st-progress-bar {
  height: 100%;
  background: var(--blue);
  border-radius: 999px;
  transition: width .3s;
}
.st-progress-txt { font-size: 12px; color: var(--text-3); margin-top: 6px; }

/* ── 课表全景的日期块 ──────────────────────────────────── */
.st-days { display: flex; flex-direction: column; gap: 2px; }
.st-day {
  display: flex;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
}
.st-day.past { opacity: .55; }
.st-day.now  { background: var(--blue-bg); opacity: 1; }
.st-day-date {
  min-width: 62px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.st-day-md  { font-size: 14px; font-weight: 500; }
.st-day-dow { font-size: 11.5px; color: var(--text-3); }
.st-day-tag {
  font-size: 10.5px;
  color: var(--blue);
  background: var(--surface);
  border-radius: 4px;
  padding: 0 4px;
  align-self: flex-start;
}
.st-day-items { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-day-item { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.st-day-p    { font-size: 11.5px; color: var(--text-3); min-width: 28px; flex-shrink: 0; }
.st-day-name { font-weight: 500; }
.st-day-meta { font-size: 11.5px; color: var(--text-3); }

/* ── 四块板块概览（2026-10-18）─────────────────────────────
   之前只有「学业」在导航里，用户以为另外三块没做。首页加一行卡片，
   一眼能看见四个板块都在、各有多少事。 */
.st-boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.st-board {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.st-board:hover { border-color: var(--blue); transform: translateY(-1px); }
.st-board-name { font-size: 14px; font-weight: 600; color: var(--text); }
.st-board-note { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.st-board-num { font-size: 12px; color: var(--blue); margin-top: 7px; font-weight: 500; }

/* ── 习惯：周目标进度条 ─────────────────────────────────── */
.st-habit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.st-habit:last-child { border-bottom: none; }
.st-habit-main { flex: 1; min-width: 0; }
.st-habit-title { font-size: 14px; color: var(--text); font-weight: 500; }
.st-habit-meta { font-size: 12px; color: var(--text-3); margin: 3px 0 6px; }
.st-progress-bar.ok { background: var(--green); }

/* ── 多条作业确认框 ─────────────────────────────────────── */
.st-cf-tip {
  font-size: 13px;
  color: var(--text-2);
  background: var(--blue-bg);
  padding: 9px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.st-cf-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.st-cf-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 7px;
}
.st-cf-row input, .st-cf-row select { width: 100%; margin-bottom: 6px; }
.st-cf-title { font-weight: 500; }
.st-cf-line { display: flex; gap: 8px; }
.st-cf-line select { flex: 1; margin-bottom: 0; }
.st-cf-line input { flex: 1; margin-bottom: 0; }
.st-cf-raw {
  font-size: 12px;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 9px 11px;
  border-radius: 6px;
  margin-top: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── 板块添加行：多字段竖排 ─────────────────────────────── */
.st-add-stack { flex-wrap: wrap; }
.st-add-stack input { min-width: 180px; }

/* ── 本周末课表：今天那一列高亮 ─────────────────────────── */
.st-wcol.today {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

/* ── 学习日历（2026-10-18）──────────────────────────────── */
.st-cal-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 「下个月有场考试 →」的直达按钮（2026-10-31）
 * 考试色是红，这里也用红 —— 同一个东西同一个颜色，用户不用学。 */
.st-cal-jump {
  color: var(--red);
  border-color: var(--red);
  background: var(--red-bg);
}
.st-cal-jump:hover { background: var(--red-bg); }
.st-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.st-cal-wd {
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  padding: 4px 0 6px;
}
.st-cal-cell {
  min-height: 74px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 6px;
  cursor: pointer;
  background: var(--surface);
  overflow: hidden;
}
.st-cal-cell.blank { border: none; background: transparent; cursor: default; }
.st-cal-cell:hover:not(.blank) { border-color: var(--blue); }
.st-cal-cell.today {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}
.st-cal-cell.has { background: var(--surface-2); }
.st-cal-n { font-size: 12px; color: var(--text-2); font-weight: 500; }
.st-cal-cell.today .st-cal-n { color: var(--blue); }
.st-cal-chip {
  font-size: 11px;
  line-height: 1.5;
  padding: 1px 5px;
  border-radius: 4px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-cal-chip.session { background: var(--blue-bg); color: var(--blue); }
.st-cal-chip.assign { background: var(--orange-bg); color: var(--orange); }
.st-cal-chip.item { background: var(--purple-bg); color: var(--purple); }
.st-cal-more { font-size: 10px; color: var(--text-3); margin-top: 2px; }
.st-cal-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-3);
  flex-wrap: wrap;
}
.st-cal-legend .st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.st-dot.session { background: var(--blue); }
.st-dot.assign { background: var(--orange); }
.st-dot.item { background: var(--purple); }

/* ── 站内提醒条（2026-10-18）────────────────────────────── */
.st-remind {
  border: 1px solid var(--blue);
  background: var(--blue-bg);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.st-remind.has-over { border-color: var(--red); background: var(--red-bg); }
.st-remind-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.st-remind-head span { color: var(--text-3); font-size: 12px; }
.st-remind-head button { margin-left: auto; }
.st-remind-head button + button { margin-left: 0; }
.st-remind-list { margin-top: 8px; }
.st-remind-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 13px;
}
.st-remind-row:hover .st-remind-text { text-decoration: underline; }
.st-remind-row.over .st-remind-meta { color: var(--red); font-weight: 500; }
.st-remind-kind {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.st-remind-kind.assign { background: var(--orange-bg); color: var(--orange); }
.st-remind-kind.item { background: var(--purple-bg); color: var(--purple); }
.st-remind-text { color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-remind-meta { font-size: 12px; color: var(--text-2); flex-shrink: 0; }

/* ── 可点的条目行 ─────────────────────────────────────── */
.st-day-item.clickable { cursor: pointer; }
.st-day-item.clickable:hover { background: var(--surface-2); }
.st-day-p.assign { background: var(--orange-bg); color: var(--orange); }
.st-day-p.item { background: var(--purple-bg); color: var(--purple); }

/* ══ 左侧导航：可展开的父项 + 子项（2026-10-19）══════════
 * 「学业」点箭头展开出 课表/作业/学到了什么。
 * 父项本身也能点（进学业页默认标签），所以箭头要单独一块点击区，
 * 否则用户想展开却总是跳走。 */
.side-caret {
  margin-left: 2px;
  font-size: 10px;
  color: var(--text-3);
  padding: 3px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background .12s;
}
.side-caret:hover { background: rgba(0, 0, 0, .06); color: var(--text-2); }
.side-item.has-child .side-badge { margin-left: auto; }
.side-item.has-child .side-caret { margin-left: auto; }
.side-item.has-child .side-badge + .side-caret { margin-left: 2px; }

.side-sub {
  margin: 1px 0 5px;
  padding-left: 12px;
  border-left: 1.5px solid var(--border);
  margin-left: 16px;
}
.side-item.sub {
  font-size: 12.5px;
  padding: 6px 9px;
  color: var(--text-3);
}
.side-item.sub .si { width: 13px; height: 13px; flex-basis: 13px; opacity: .7; }
.side-item.sub.active { font-weight: 500; }

/* 移动端侧栏收起时，子项缩进太多会挤，缩一点 */
@media (max-width: 860px) {
  .side-sub { margin-left: 10px; padding-left: 8px; }
}

/* ══ 页面内标签页（学业页）══════════════════════════════ */
.st-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.st-tab {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-2);
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 6px 6px 0 0;
}
.st-tab:hover { background: var(--surface-2); color: var(--text); }
.st-tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 500; }

/* ══ 日历：板块配色（2026-10-19 五色，2026-10-31 加考试色）═════════════════════
 * 原来只有 session/assign/item 三档，item 把三个板块全涂成紫色，
 * 用户看不出哪条是专业、哪条是探索。改成按板块各自一色。
 *
 * 2026-10-31 补：考试是第六种（红）。原来考试压根不在日历上，
 * 不只是颜色缺 —— 是数据源里就没有。这一轮把数据源和配色一起补齐。 */
.st-cal-chip.k-study { background: var(--blue-bg);   color: var(--blue); }
.st-cal-chip.k-assign { background: var(--orange-bg); color: var(--orange); }
.st-cal-chip.k-exam { background: var(--red-bg);    color: var(--red); }
.st-cal-chip.k-pro { background: var(--purple-bg); color: var(--purple); }
.st-cal-chip.k-expand { background: var(--teal-bg);  color: var(--teal); }
.st-cal-chip.k-habit { background: var(--green-bg); color: var(--green); }

.st-dot.k-study { background: var(--blue); }
.st-dot.k-assign { background: var(--orange); }
.st-dot.k-exam { background: var(--red); }
.st-dot.k-pro { background: var(--purple); }
.st-dot.k-expand { background: var(--teal); }
.st-dot.k-habit { background: var(--green); }

/* 当天详情：按板块分组 */
.st-day-group { margin-bottom: 14px; }
.st-day-group:last-child { margin-bottom: 0; }
.st-day-group-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.st-day-group-t {
  font-size: 11.5px;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 500;
}
.st-day-group-n { font-size: 11.5px; color: var(--text-3); }
.st-day-group-t.k-study { background: var(--blue-bg);   color: var(--blue); }
.st-day-group-t.k-assign { background: var(--orange-bg); color: var(--orange); }
.st-day-group-t.k-exam { background: var(--red-bg);    color: var(--red); }
.st-day-group-t.k-pro { background: var(--purple-bg); color: var(--purple); }
.st-day-group-t.k-expand { background: var(--teal-bg);  color: var(--teal); }
.st-day-group-t.k-habit { background: var(--green-bg); color: var(--green); }

/* 日历里每行的板块小标签也跟着上色 */
.st-day-p.k-study { background: var(--blue-bg);   color: var(--blue); }
.st-day-p.k-assign { background: var(--orange-bg); color: var(--orange); }
.st-day-p.k-exam { background: var(--red-bg);    color: var(--red); }
.st-day-p.k-pro { background: var(--purple-bg); color: var(--purple); }
.st-day-p.k-expand { background: var(--teal-bg);  color: var(--teal); }
.st-day-p.k-habit { background: var(--green-bg); color: var(--green); }
.st-day-p {
  border-radius: 4px;
  padding: 1px 5px;
  text-align: center;
  min-width: 34px;
}
.st-gap-tip { margin-left: auto; }

/* ══════════════════════════════════════════════════════════
   v5 · 待安排 / 待回头看（2026-10-19）
   ══════════════════════════════════════════════════════════ */

/* 两栏并排。左=还没决定，右=已排期。
   1:1 平分 —— 两栏内容都是条目列表，没有谁更重要的理由。
   窄屏（< 1080px）自动上下堆，左栏在上，符合阅读顺序。 */
.st-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 1080px) {
  .st-two-col { grid-template-columns: 1fr; }
}
.st-col { min-width: 0; }
.st-col-tip {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.st-col-group + .st-col-group { margin-top: 14px; }
.st-col-group-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  padding: 4px 0 6px;
}
.st-col-group-n { color: var(--text-3); font-weight: 400; }

/* 条目行。左栏和右栏**刻意长得不一样**：
   左栏（决定）行左边一道灰虚线，右栏（推进）左边一道实心色条 ——
   扫一眼就知道这两个栏的动作不同，不用读文字。 */
.st-plan-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 9px;
  border-left: 2px solid var(--border-strong);
  border-radius: 0 8px 8px 0;
  background: var(--surface-2);
  margin-bottom: 6px;
}
.st-plan-row:hover { background: var(--surface); border-left-color: var(--border-strong); }
.st-col-planned .st-plan-row { border-left-color: var(--blue); }
.st-plan-main { flex: 1; min-width: 0; }
.st-plan-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-plan-meta {
  font-size: 11.5px; color: var(--text-3); margin-top: 2px;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}

/* 阶段标签。inbox 灰（未定）、planned 蓝（已定） */
.st-stage-tag {
  font-size: 10.5px; padding: 1px 6px; border-radius: 4px; font-weight: 500;
}
.st-stage-tag.s-inbox { background: var(--gray-bg); color: var(--gray); }
.st-stage-tag.s-planned { background: var(--blue-bg); color: var(--blue); }

/* 「决定」弹窗 */
.st-decide-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.st-decide-meta { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.st-decide-tip { font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; }
.st-decide-boards { display: flex; gap: 8px; flex-wrap: wrap; }
.st-decide-board {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px; font-size: 13.5px; font-weight: 500;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  font-family: inherit;
}
.st-decide-board:hover { background: var(--surface); border-color: var(--border-strong); }
.st-decide-todo { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }

/* 待回头看 */
.st-reflect-group + .st-reflect-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.st-reflect-group-h {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  margin-bottom: 8px;
}
.st-reflect-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px; margin-bottom: 7px;
  background: var(--surface-2);
  border-left: 2px solid var(--orange);
  border-radius: 0 8px 8px 0;
}
.st-reflect-main { flex: 1; min-width: 0; }
.st-reflect-title {
  font-size: 13.5px; font-weight: 500; color: var(--text);
  display: flex; align-items: baseline; gap: 8px;
}
.st-reflect-date { font-size: 11.5px; color: var(--text-3); font-weight: 400; }
.st-reflect-meta {
  font-size: 11.5px; color: var(--text-3); margin-top: 3px;
  display: flex; align-items: center; gap: 5px;
}
.st-reflect-hint { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }

/* 固定周期条目的标记（「每周一 19:30」这种是时点型，
   长相要和次数型区分开 —— 否则会误以为钢琴课要一周练 3 次） */
.st-fixed-tag {
  font-size: 10.5px; padding: 1px 6px; border-radius: 4px;
  background: var(--teal-bg); color: var(--teal); font-weight: 500;
  white-space: nowrap;
}

/* 一句话录入弹窗：固定星期多选 + 回头看勾选（v5） */
.st-qa-fixed {
  margin-top: 8px; padding: 9px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
}
.st-qa-fixed-l { font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.st-qa-dow { display: flex; gap: 5px; }
.st-qa-dow-b {
  width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; color: var(--text-2); cursor: pointer;
  font-family: inherit; line-height: 1;
}
.st-qa-dow-b:hover { border-color: var(--border-strong); }
.st-qa-dow-b.on {
  background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600;
}
.st-qa-check {
  display: flex; align-items: center; gap: 7px;
  margin-top: 10px; font-size: 12.5px; color: var(--text-2); cursor: pointer;
}
.st-qa-check input { width: 15px; height: 15px; cursor: pointer; }

/* ══════════════════════════════════════════════════════════
   「新增学习任务」按钮 —— 独占一行的 sticky 条（2026-10-20 重做）
   ──────────────────────────────────────────────────────────
   ⚠️ 这里换过两次方案，第三次才做对，教训记在下面，别再退回去。

   【v1 position:fixed】按钮浮在视口右上角，任何页面都能点，但会盖住内容。
   【v2 给 #main 加 padding-right:161px】想在内容右边让出一条安全带。
     一处解决全部视图是对的，**但作用域给错了** ——
     按钮只占「页面最顶上那一行」（top:66px，高 33px），
     padding 却加给了**整个页面所有内容**，
     实测 1600 视口下学习平台内容宽被砍到 1209px（工作平台同宽是 1348px），
     右边整条 139px 永远空着 —— 用户反馈「右侧空出一大块」。
     教训：**padding 是按高度全页生效的，fixed 元素却只有一行高。两者作用域不匹配。**
     当初只验了「被压住没有」，没验「让出的空间有没有被浪费」。

   【v3 现在：自己占一行】按钮不再浮在内容上，也就不需要任何 padding。
     - .st-fab-bar 是 sticky（top 顶栏下方），滚动时跟着走，**任何时刻都在按钮上方**
     - 它自己占一行高度（~33px + 8px 间距），页头行整体下移一点，
       换来「内容永远满宽、按钮永远点得到、滚动时也不遮挡」
     - 代价是顶部多一行按钮条 —— 比整页空 139px 划算得多

   为什么不用 `position:sticky` 直接放按钮：
     sticky 的元素必须在自己的父容器内有「粘住」的空间。按钮原来是
     #main 的**最后一个子元素**，sticky 会把它顶到父容器底部才生效（实测
     页面最底下，完全看不见）。包一层 .st-fab-bar 作父容器，
     sticky 才有可粘的范围。❌ 别用 float:right —— 同样会跑到父容器末尾。
*/
.st-fab-bar {
  position: sticky;
  /* ⚠️⚠️ top 必须是 0，别图省事写顶栏高度。
   *
   * sticky 元素上提多少，紧跟其后的内容就会上移多少填坑 ——
   * **两者必然重叠 |top| 那么多**。实测：
   *   top:56px → 按钮条 y=126 / 页头 y=112，重叠 14px，压住页头右侧文字
   *   top:14px → 重叠 14px（= top 值），压字虽归零但布局仍然错位
   *   top:0    → 按钮条底 = 页头顶，零重叠 ✓
   * 所以「避开顶栏」这件事**不能靠 top**，要靠 margin-top：
   * top 定粘住位置（=0），margin-top 把整条往下推到顶栏之下。
   * ⚠️ 改顶栏高度或这条 margin，要重跑 scripts/probe-study-fab.js。 */
  top: 0;
  margin-top: 10px;      /* 顶栏高 56px，#main 顶部 padding 已避开了大部分，10px 足够留白 */
  z-index: 38;            /* 低于 modal(60) 与抽屉遮罩(40)，弹窗时按钮被遮住是对的 */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  background: var(--bg);  /* 滚过时下面的内容不能从按钮条里透出来 */
  /* 铺满内容宽，这样 justify-content 才能靠右；
     上面各页面容器有 max-width 的不受影响（这层自己算 100%） */
  width: 100%;
}
.st-fab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 11px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #fff;
  background: var(--blue);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}
.st-fab:hover { filter: brightness(1.06); }
.st-fab-plus { font-size: 16px; line-height: 1; font-weight: 400; }

/* 「详细填」页签里的节奏选择行 */
.st-add-rhythm {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; flex-wrap: wrap;
}
.st-add-rhythm-l { font-size: 12px; color: var(--text-3); }

/* 考试用红色 —— 学业色系里蓝色是课、橙色是作业，考试再占一个颜色没道理，
   而且红色天然对应「有 deadline 的硬日子」，跟逾期标红一致。 */
.st-dot.k-exam { background: var(--red); }

/* 卡片头右侧的小按钮（「+ 加一节课」「+ 加一场考试」「进板块」） */
.st-card-add { margin-left: auto; }

/* ══════════════════════════════════════════════════════════
   学习首页：四板块分栏 + 时间范围切换（今天/本周/本月）
   ══════════════════════════════════════════════════════════ */

/* ⚠️ padding-right 是必须的，别删。
   用户反馈「今天标签点了没反应」—— 时间范围切换器落在 x≈1077~1258，
   而 `.st-fab`（fixed, right:20px）落在 x≈1141~1260，
   **右半边整块压在浮按钮底下，鼠标事件被上层按钮吃掉，点「今天」毫无反应**。
   这种「元素被盖住」的问题截图能看出（按钮在切换器上）、
   但 window.onerror 抓不到，因为根本没报错。
   右边留 156px = 按钮宽 136 + 20 间隙。安全距离已在 .st-fab 段统一注明。 */
.st-home-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.st-home-date { display: flex; align-items: baseline; gap: 8px; }
.st-home-date strong { font-size: 19px; font-weight: 600; color: var(--text); }
.st-home-date span { font-size: 12.5px; color: var(--text-3); }
.st-home-acts { display: flex; gap: 7px; }

/* 四栏平铺，窄屏（<1280px）折成两行两列，再窄就单列
 *
 * ⚠️ align-items 必须留默认的 stretch（= 同行等高）。
 *    之前写了 `align-items: start`，四栏内容多少不同 → 卡片高低不一，
 *    2×2 布局下形成 L 形空洞，用户说「视觉上不对称」。已修。
 *
 * ⚠️⚠️ 必须写 minmax(0, 1fr) 而不是 1fr。
 *    `1fr` = minmax(auto, 1fr)，auto 的下限是内容的 min-content 宽度。
 *    `.st-home-task-title` 是 white-space:nowrap，算 min-content 时贡献的是
 *    **整句不换行的宽度**。于是「专业」那条 30 字的标题把所在栏顶到 439px，
 *    其余栏被挤到 88px —— 实测四栏宽度 281/439/291/88，1:5:3.3:0.3。
 *    （`.st-home-task-main{min-width:0}` 只管 flex 分配，管不到 grid 的下限。
 *      今天/本周看不出问题是因为那几条标题短；本月就暴露了。）
 *    minmax(0,1fr) 把下限压到 0，栏宽只由剩余空间均分。
 */
.st-home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;      /* 同行等高 —— 别改回 start */
}
@media (max-width: 1280px) { .st-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .st-home-grid { grid-template-columns: minmax(0, 1fr); } }

/* 每栏顶部一道细色边 —— 四栏长得几乎一样，靠这道边扫一眼就知道哪栏是哪块 */
.st-home-col {
  border-top: 3px solid var(--border);
  display: flex; flex-direction: column;   /* 让 card-body 能撑开填满等高后的空间 */
}
.st-home-col-academic { border-top-color: var(--blue); }
.st-home-col-pro      { border-top-color: var(--purple); }
.st-home-col-expand   { border-top-color: var(--teal); }
.st-home-col-habit    { border-top-color: var(--green); }

/* 段：段与段之间一条实线（不是虚线 —— 四栏并排时虚线视觉噪声太大）。
 * ⚠️ 上面的代码必须真的有 .st-home-sec 包裹层，这条规则才生效。
 *    上一轮重写时那层没了，规则整条失效，段标题就粘在一起了。 */
.st-home-col > .card-body { display: flex; flex-direction: column; }
.st-home-sec + .st-home-sec {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.st-home-sec {
  display: flex; flex-direction: column;
}
/* 段内最后一块吃掉多余空间：等高时留白沉到内容末尾，不散在段中间 */
.st-home-sec:last-child { flex: 1; }

.st-home-sec-h {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  margin-bottom: 6px;
}
/* 计数顶到行末右边缘 —— 四栏扫下来计数在同一列才叫对称 */
.st-home-sec-n {
  margin-left: auto; flex-shrink: 0;
  color: var(--text-3); font-weight: 400; font-size: 11px;
}

.st-home-task {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 7px; margin-bottom: 4px;
  background: var(--surface-2); border-radius: 6px;
}
.st-home-task:last-child { margin-bottom: 0; }
.st-home-task:hover { background: var(--surface); }
.st-home-task-main { flex: 1; min-width: 0; }
.st-home-task-title {
  font-size: 12.5px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-home-task-meta {
  font-size: 11px; color: var(--text-3); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 空态：和任务行同样的左边距和圆角，高度凑齐一条任务行（49px）
   —— 之前是 32px，习惯栏只有空态时整栏明显比其他栏矮一截。
   min-height 37 + padding 12 + border 2 = 51 ≈ 任务行的 49。 */
.st-home-none {
  font-size: 11.5px; color: var(--text-3);
  padding: 6px 7px; min-height: 37px;
  border: 1px dashed var(--border); border-radius: 6px;
  display: flex; align-items: center;
}
/* 数字/日期/计数用等宽数字 —— 四栏并排时比例数字宽度不一，视觉上轻微抖动。
   1fr → 3fr → 8 节 扫下来计数才对得齐。 */
.st-home-sec-n,
.st-home-task-meta,
.st-badge { font-variant-numeric: tabular-nums; }
.st-home-more {
  font-size: 11px; color: var(--text-3);
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border);
}

/* 课次行内的出席按钮：行整体可点开编辑，按钮自己标出席 */
.st-sess-att-btn { margin-left: auto; padding: 1px 7px; font-size: 11px; }

/* ══════════════════════════════════════════════════════════
   板块页（2026-10-19 晚）：记录收底，主体让给任务
   ══════════════════════════════════════════════════════════ */

/* ── 读宽上限：限的是「文字区」，不是「卡片」 ──────────────
 *
 * 2026-10-21 修：之前这条写成 `.st-metrics + .card { max-width:1180px }`，
 * 是个**相邻兄弟选择器** —— 只要页面结构是「上面一行指标 + 下面一张卡」就命中，
 * 于是误伤了学习日历 / 待回头看 / 学业·作业 / 学业·考试 四页：
 * 卡片被压到 1180、上面指标仍是 1440，视觉上卡片左右凭空多出一圈空隙
 * （用户原话「下面的视图两边都有比较大的空隙」）。
 *
 * 另外两个选择器是死规则：
 *   .st-board-card          全站 HTML 里根本没这个类
 *   .st-plan-top .card-body 待安排页 .st-plan-top 里没有 .card-body
 *
 * 读宽上限本身是有用的（1440px 上一行能塞70 多个汉字，视线要横跨整个屏幕），
 * 但它该管的是**文字块**，不该管**卡片边框**。
 * 卡片铺满 → 左右缘与上方指标齐平；文字块限宽 → 长标题照样不松散。两者不冲突。
 *
 * ⚠️ `margin-right:auto` 不能省：flex 子项限宽后，
 * auto 外边距会吃掉剩余空间把后面的按钮顶到卡片右缘 ——
 * 少了它，按钮会紧跟在 1180px 处，右边再空一截，反而更难看。 */
.st-board-list .st-habit-main,
.st-board-list .st-assign-main,
.st-reflect-main,
.st-assign-main { max-width: 1180px; margin-right: auto; }

.st-board-lead {
  font-size: 12px; color: var(--text-3);
  margin-bottom: 10px; line-height: 1.6;
}
.st-fold { margin-top: 12px; }
.st-fold > summary {
  cursor: pointer; font-size: 12px; color: var(--text-3);
  padding: 5px 0; list-style: none; user-select: none;
}
.st-fold > summary::-webkit-details-marker { display: none; }
.st-fold > summary::before { content: '▸ '; }
.st-fold[open] > summary::before { content: '▾ '; }
.st-fold > summary:hover { color: var(--text-2); }

/* 板块页顶部：一行标题 + 一行统计，比原来三条 metric 卡片省一大截 */
.st-board-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.st-board-head { display: flex; align-items: baseline; gap: 8px; }
.st-board-head strong { font-size: 17px; font-weight: 600; color: var(--text); }
.st-board-stat { font-size: 12.5px; color: var(--text-3); }
.st-board-stat b { color: var(--text-2); font-weight: 600; }

/* 任务列表：不再套 card，条目直接铺开 —— 少一层边框，看起来更清爽 */
.st-board-list { margin-top: 4px; }

/* 待安排页顶部（2026-10-19 晚：右栏删掉后重排） */
.st-plan-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.st-plan-head { display: flex; align-items: baseline; gap: 8px; }
.st-plan-head strong { font-size: 17px; font-weight: 600; color: var(--text); }
.st-plan-hint { font-size: 12px; color: var(--text-3); line-height: 1.6; text-align: right; }

/* 宽版弹窗：字段多的表单（新增学习任务、课次编辑、批量录作业）用。
   560px 装不下「板块+分组+名称+备注+日期+次数+星期+时间」这一排，
   挤成两行反而更难填。 */
.modal.wide { max-width: 720px; }

/* ══════════════════════════════════════════════════════════
   2026-10-19 晚二次改版：新增弹窗 / 首页范围切换 / 课程调整 / 板块分组
   ══════════════════════════════════════════════════════════ */

/* ── 新增弹窗 · 随手记页签 ────────────────────────────────
   用户反馈「图1 随手记进去 排版奇怪」：原来是一个 input + 两行小字，
   弹窗里大片空白，输一句话还得先在脑子里组织好。
   改成 textarea（能一次写多行）+ 可点的示例（照着点一下就填进去）。 */
.st-add-ta {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.7;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
  min-height: 84px;
}
.st-add-ta:focus { outline: none; border-color: var(--blue); }

.st-add-lock {
  font-size: 12.5px; color: var(--text-2);
  padding: 7px 11px; margin-bottom: 10px;
  background: var(--surface-2); border-radius: 7px;
}
.st-add-lock strong { color: var(--text); }
.st-add-lock-a { color: var(--blue); cursor: pointer; text-decoration: underline; }

.st-add-eg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 9px;
}
.st-add-eg-l { font-size: 11.5px; color: var(--text-3); }
.st-add-eg-b {
  font-family: inherit; font-size: 11.5px;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 3px 10px; cursor: pointer;
}
.st-add-eg-b:hover { color: var(--blue); border-color: var(--blue); }

.st-add-note {
  font-size: 11.5px; color: var(--text-3);
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--border); line-height: 1.6;
}
.st-add-note strong { color: var(--text-2); }

/* ── 新增弹窗 · 详细填：字段分三组 ──────────────────────
   原来十几个 input 平铺一列，看着像一张填不完的表。
   分成「是什么 / 什么时候 / 要不要提醒」三块，每块一个小标题。 */
.st-add-grp { margin-bottom: 14px; }
.st-add-grp-h {
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  margin-bottom: 7px; padding-left: 8px;
  border-left: 2px solid var(--blue);
}
.st-add-grp > input { margin-bottom: 6px; }

.st-seg {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 2px; gap: 2px;
}
.st-seg-b {
  font-family: inherit; font-size: 12.5px;
  color: var(--text-2); background: transparent;
  border: none; border-radius: 6px;
  padding: 5px 16px; cursor: pointer;
}
.st-seg-b:hover { color: var(--text); }
.st-seg-b.on {
  background: var(--blue); color: #fff; font-weight: 500;
}

/* 四栏小标题统一：段与段之间用一条实线，不用虚线 ——
   虚线在四栏并排时视觉噪声太大（用户说「视觉上不统一」）。
   ⚠️ 段间距/分隔线由上面的 `.st-home-sec + .st-home-sec` 控制。
   下面这两行曾用 `.st-home-sec-h + .st-home-sec-h`（相邻兄弟选择器），
   但每个段标题各自包在 .st-home-sec 里、从不是相邻兄弟 → **规则从来没生效**。
   已删，别再加回来。（margin-bottom 与上面那条重复，也一并去掉。） */

/* ── 课表 · 课程调整弹窗 ─────────────────────────────── */
.st-adj-top {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 11px; margin-bottom: 11px;
  border-bottom: 1px solid var(--border);
}
.st-adj-sec-h {
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  margin-bottom: 6px;
}
.st-adj-list { max-height: 46vh; overflow-y: auto; }
.st-adj-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 8px; border-bottom: 1px solid var(--border);
}
.st-adj-row:last-child { border-bottom: none; }
.st-adj-d {
  display: flex; align-items: baseline; gap: 5px;
  width: 92px; flex-shrink: 0;
}
.st-adj-md { font-size: 12.5px; font-weight: 600; color: var(--text); }
.st-adj-dow { font-size: 11px; color: var(--text-3); }
.st-adj-now {
  font-size: 10px; color: var(--blue);
  background: rgba(0, 102, 204, .09);
  border-radius: 3px; padding: 0 4px;
}
.st-adj-main { flex: 1; min-width: 0; }
.st-adj-name {
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-adj-meta {
  font-size: 11px; color: var(--text-3); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-adj-act { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.st-adj-att { font-size: 11px; padding: 1px 7px; border-radius: 9px; }
.st-adj-att.ok { color: #1a7f4b; background: rgba(26, 127, 75, .1); }
.st-adj-att.no { color: var(--red); background: rgba(200, 60, 60, .1); }

/* ── 板块页 · 分组结构 ──────────────────────────────────
   用户反馈「进去看着像是没开发完」——
   一条记录孤零零摆着、下面全白，跟空文件夹没区别。
   按分组归拢后，页面上有层次；分组名来自 BOARD_META 的 groupLabel
   （专业→方向 / 探索→主题 / 习惯→类别），本来就是这些板块的概念。 */
.st-board-grp { margin-top: 14px; }
.st-board-grp:first-of-type { margin-top: 6px; }
.st-board-grp-h {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  padding-bottom: 5px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.st-board-grp-n { color: var(--text-3); font-weight: 400; font-size: 11.5px; }