/* ============================================================
   QB · 页面级：登录 · 工作台 · 试卷 · 答题+导航 · 成绩 · 管理
   全站无位移动画
   ============================================================ */

/* ---------- 登录 ---------- */
.login-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  position: relative;
  overflow: hidden;
}
.login-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-grad);
}
.login-stage::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 640px; height: 640px;
  transform: translate(-50%, -58%);
  background: radial-gradient(closest-side, rgba(37, 99, 235, .13), transparent 72%);
  pointer-events: none;
}
[data-theme="dark"] .login-stage::after {
  background: radial-gradient(closest-side, rgba(79, 140, 255, .16), transparent 72%);
}
.login-card {
  position: relative; z-index: 1;
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-3);
  padding: 40px 38px 34px;
}
.login-lang {
  position: absolute;
  top: 18px; right: 18px;
  min-width: 40px; height: 30px; padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px; font-weight: 800;
  cursor: pointer;
}
.login-lang:hover { border-color: var(--brand-300); color: var(--brand-600); }
.login-logo {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.login-logo svg { width: 46px; height: 46px; }
.login-title { font-size: 32px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.login-sub { font-size: 13.5px; color: var(--text-2); margin: 6px 0 28px; }
.login-card .field { margin-bottom: 14px; }
.login-card .input { height: 48px; border-radius: 14px; background: var(--surface-2); font-size: 14px; }
.login-card .input:focus { background: var(--surface); }
.login-card .btn-lg { margin-top: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 22px -8px rgba(37, 99, 235, .65); }
.login-error[hidden] { display: none; }
.login-error {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-500);
  font-size: 12.5px; font-weight: 600;
  padding: 10px 13px; border-radius: var(--r-md); margin-bottom: 16px;
}
.login-error svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }
.login-remember { display: flex; align-items: center; margin: 2px 0 18px; font-size: 12.5px; color: var(--text-2); }
.login-remember label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.login-remember input { accent-color: var(--brand-500); width: 15px; height: 15px; }

/* ---------- 欢迎页（一键免密进入） ---------- */
.welcome-stage { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 28px 20px; position: relative; overflow: hidden; }
.welcome-card { position: relative; z-index: 1; width: min(400px, 100%); text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-3); padding: 44px 38px 36px; }
.welcome-logo { display: grid; place-items: center; margin-bottom: 18px; }
.welcome-logo svg { width: 64px; height: 64px; }
.welcome-title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 8px; }
.welcome-sub { font-size: 13px; color: var(--text-2); margin-bottom: 26px; }
.welcome-card .login-error { text-align: left; }
.welcome-card #welGo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.welcome-card #welGo svg { width: 17px; height: 17px; }

/* ---------- 工作台 ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.dash-stats { grid-column: span 12; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 0; }
.dash-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 18px 20px; min-width: 0; }
.dash-panel h3 { font-size: 14.5px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 2px; }
.dash-panel .sub { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
.dash-half { grid-column: span 6; }
.dash-two { grid-column: span 8; }
.recent-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.recent-item:last-child { border-bottom: 0; }
.recent-item-main { flex: 1; min-width: 0; }
.recent-item-title { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-item-sub { font-size: 11.5px; color: var(--text-3); }

/* ---------- 试卷 ---------- */
#paperZone { min-height: 320px; }
.paper-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.paper-card { display: flex; flex-direction: column; gap: 11px; cursor: pointer; position: relative; overflow: hidden; padding: 18px 20px; }
.paper-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-500); opacity: 0; transition: opacity var(--t-med); }
.paper-card:hover::before { opacity: 1; }
.paper-title { font-size: 15.5px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.45; }
.paper-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.paper-meta span + span::before { content: "·"; margin-right: 8px; color: var(--line-strong); }
.paper-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.resume-strip {
  display: flex; align-items: center; gap: 10px;
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px;
  font-size: 13px; color: var(--warn-500); font-weight: 650;
}
.resume-strip svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* ---------- 答题 / 背诵（默认单列；有章节目录时左侧多级树两栏） ---------- */
.exam-layout { display: block; max-width: 880px; margin: 0 auto; }
.exam-wrap { min-width: 0; }

/* 左侧多级大纲（章节 → 题号） */
.exam-side {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-1);
  padding: 8px; max-height: calc(100vh - var(--header-h) - 30px); overflow-y: auto;
}
/* 左侧栏顶部：返回 / 标题 / 进度 / 保存态 / 筛选（原中间置顶大卡已并入此处） */
.exam-side-top { display: grid; gap: 9px; padding: 8px 8px 11px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.exam-back {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  padding: 6px 12px 6px 9px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.exam-back:hover { border-color: var(--brand-300); color: var(--text-1); }
.exam-back svg { width: 14px; height: 14px; }
.exam-side-title { font-size: 13px; font-weight: 750; color: var(--text-1); line-height: 1.55; }
.exam-side-progress { display: flex; align-items: center; gap: 8px; }
.exam-side-progress .progress { flex: 1; }
.exam-side-progress .exam-progress-label { margin-left: 0; }
.exam-side-sub { display: flex; }
.exam-side-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tree-sub { display: grid; gap: 1px; }
.tree-row.tree-chap { font-weight: 700; }
.tree-row.tree-chap .tree-ico svg { width: 14px; height: 14px; }
.tree-row.tree-chap.collapsed .tree-label { color: var(--text-3); }
.tree-row .tree-no {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: 6px;
  background: var(--surface-3); color: var(--text-3);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tree-row.tree-q { font-weight: 500; font-size: 12.5px; }
.tree-row.tree-q.on { background: var(--brand-50); color: var(--brand-600); font-weight: 650; }
.tree-row.tree-q.on .tree-no { background: var(--brand-500); color: #fff; }

/* 工具条内的胶囊 chips（题号 / 只看未答 / 章节） */
.exam-chiprow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 11px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-2); font-size: 12px; font-weight: 650;
  cursor: pointer; white-space: nowrap; max-width: 100%;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.chip:hover { border-color: var(--brand-300); color: var(--text-1); }
.chip.on { border-color: var(--brand-500); color: var(--brand-600); background: var(--brand-50); }

/* 横向章节条（替代原左侧目录栏）；知识点多时限高滚动，不把正文顶走 */
.toc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; max-height: 118px; overflow-y: auto; padding: 2px; }

/* 背诵/答题题干放大一档，长术语不换行挤压 */
.exam-layout .q-prompt { font-size: 15px; }

/* 题号网格内联展开（替代原右侧栏） */
.qnav.exam-qnav { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); margin-bottom: 14px; max-height: 220px; overflow-y: auto; padding: 2px; }

.exam-toolbar {
  position: sticky; top: calc(var(--header-h) + 10px); z-index: 30;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 14px 18px 13px; margin-bottom: 16px;
}
.exam-progress-label { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; margin-left: 12px; }
.save-state {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 650; color: var(--text-3);
  padding: 5px 11px; border-radius: var(--r-full);
  background: var(--surface-3); border: 1px solid var(--line); white-space: nowrap;
}
.save-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.save-state.dirty { color: var(--warn-500); background: var(--warn-bg); border-color: var(--warn-line); }
.save-state.saving { color: var(--info-500); background: var(--info-bg); border-color: var(--info-line); }
.save-state.saved { color: var(--ok-500); background: var(--ok-bg); border-color: var(--ok-line); }

.exam-nav {
  position: sticky; top: calc(var(--header-h) + 10px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: 16px; max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto;
}
.exam-nav h4 { font-size: 12px; font-weight: 750; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.exam-nav-foot { display: grid; gap: 8px; margin-top: 12px; }
.exam-hint { font-size: 11.5px; color: var(--text-3); margin-top: 10px; line-height: 1.7; }

/* 掌握程度三态点（ exam 题卡右上角，点击循环切换；接口缺失时整块隐藏） */
.mastery-btn {
  width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  display: inline-grid; place-items: center;
  padding: 0; margin-top: 3px;
}
.mastery-btn i { width: 10px; height: 10px; border-radius: 50%; background: transparent; display: block; }
.mastery-btn[data-level="FUZZY"] { border-color: var(--warn-500); }
.mastery-btn[data-level="FUZZY"] i { background: var(--warn-500); }
.mastery-btn[data-level="PROFICIENT"] { border-color: var(--ok-500); }
.mastery-btn[data-level="PROFICIENT"] i { background: var(--ok-500); }
.mastery-btn:hover { border-color: var(--brand-400); }

.q-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: 20px 22px 16px; margin-bottom: 14px;
  scroll-margin-top: 84px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.q-card:hover { border-color: var(--line-strong); }
.q-card.answered { border-color: var(--brand-300); box-shadow: var(--shadow-1), 0 0 0 1px var(--brand-100); }
.q-head { display: flex; gap: 13px; margin-bottom: 15px; align-items: flex-start; }
.q-no {
  flex: 0 0 32px; height: 32px; border-radius: 10px;
  background: var(--surface-3); border: 1px solid var(--line);
  color: var(--text-2); font-weight: 750; font-size: 13px; font-family: var(--mono);
  display: grid; place-items: center;
}
.q-card.answered .q-no { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-600); }
.q-prompt { font-size: 14.5px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.65; padding-top: 4px; flex: 1; min-width: 0; }
.q-score { margin-left: auto; flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: var(--r-full); margin-top: 4px; white-space: nowrap; }
/* 答对/答错徽标（2026-09-17 用户：全局 toast 浮层挡住题目）——
 * 与「单选」标签同排、贴在其左侧（exam.js setVerdict 插在 .q-score 之前）。 */
.q-verdict {
  flex: 0 0 auto; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  padding: 4px 9px 4px 7px; border-radius: var(--r-full); border: 1px solid transparent;
}
.q-verdict svg { width: 13px; height: 13px; display: block; }
.q-verdict.ok { color: var(--ok-600, #16a34a); background: var(--ok-bg, rgba(22, 163, 74, .12)); border-color: rgba(22, 163, 74, .28); }
.q-verdict.err { color: var(--err-600, #dc2626); background: var(--err-bg, rgba(220, 38, 38, .1)); border-color: rgba(220, 38, 38, .24); }
@media (max-width: 900px) {
  .q-verdict { margin-top: 2px; font-size: 10.5px; padding: 3px 7px 3px 6px; gap: 3px; }
  .q-verdict svg { width: 12px; height: 12px; }
}

.opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  margin-bottom: 8px; font-size: 13.5px; user-select: none; background: var(--surface);
}
.opt:last-child { margin-bottom: 2px; }
/* 触屏粘滞 hover：`:hover` 只对真鼠标启用（触屏 tap 会"粘住"高亮、无 mouseleave 清除，
 * 表现为"上题的选项一直亮着"）。桌面 hover 反馈不变。 */
@media (hover: hover) {
  .opt:hover { border-color: var(--brand-300); background: var(--brand-50); }
}
.opt.sel { border-color: var(--brand-500); background: var(--brand-50); box-shadow: 0 0 0 1px var(--brand-500); }
.opt-key {
  flex: 0 0 24px; height: 24px; border-radius: 8px;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: var(--text-3); background: var(--surface);
  margin-top: 1px; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.opt.sel .opt-key { border-color: var(--brand-500); background: var(--brand-500); color: #fff; }
.opt-text { padding-top: 2px; line-height: 1.6; }

/* ---------- 成绩单 ---------- */
.score-hero {
  position: relative; display: flex; align-items: center; gap: 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  padding: 26px 28px; margin-bottom: 20px; overflow: hidden;
}
.score-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-500); }
.score-ring { position: relative; width: 108px; height: 108px; flex: 0 0 108px; }
.score-ring svg { transform: rotate(-90deg); display: block; }
.score-ring-bg { stroke: var(--surface-3); }
.score-ring-val { stroke: var(--brand-500); stroke-linecap: round; }
.score-ring-label { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; gap: 2px; padding-top: 36px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.score-ring-label small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.score-sum { font-size: 13px; color: var(--text-2); line-height: 2; min-width: 0; }
.score-sum b { font-size: 15px; color: var(--text-1); }

.ans-key { font-family: var(--mono); font-size: 12px; padding: 3px 9px; border-radius: 7px; background: var(--surface-3); border: 1px solid var(--line); }
.exp { margin-top: 13px; padding: 11px 14px 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--brand-500); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 12.5px; color: var(--text-2); line-height: 1.75; }
.exp b { color: var(--text-1); font-size: 12px; font-weight: 750; display: block; margin-bottom: 3px; }

/* ---------- 导入任务 ---------- */
.job-card { display: grid; gap: 12px; }
.job-progress-row { display: flex; align-items: center; gap: 12px; }
.job-progress-row .progress { flex: 1; }
.job-pct { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 750; min-width: 44px; text-align: right; }

/* ---------- 管理页 ---------- */
.draft-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; background: var(--surface); }
.draft-row:hover { border-color: var(--line-strong); }
.q-editor { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; margin-bottom: 12px; background: var(--surface-2); }
.q-editor:focus-within { border-color: var(--brand-300); box-shadow: var(--ring); }
.q-editor-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.q-editor-head .q-no { flex: 0 0 28px; height: 28px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 12.5px; }
.q-editor .textarea, .q-editor .input { background: var(--surface); }
.q-editor-tools { display: flex; gap: 4px; margin-left: auto; }
.mini-btn { width: 30px; height: 30px; padding: 0; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; display: inline-grid; place-items: center; }
.mini-btn:hover { border-color: var(--brand-300); color: var(--brand-600); }
.mini-btn.danger:hover { border-color: var(--err-500); color: var(--err-500); }
.mini-btn:disabled { opacity: .4; cursor: not-allowed; }
.mini-btn svg { width: 15px; height: 15px; }
.opt-edit { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.opt-edit .input { height: 36px; }
.opt-edit .check { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--text-2); cursor: pointer; user-select: none; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid transparent; white-space: nowrap; }
.opt-edit .check:hover { background: var(--surface-3); border-color: var(--line); }
.opt-edit .check:has(input:checked) { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-600); }
.opt-edit .check input { accent-color: var(--brand-500); width: 15px; height: 15px; cursor: pointer; margin: 0; }

#autoState { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; color: var(--ok-500); background: var(--ok-bg); border: 1px solid var(--ok-line); padding: 5px 11px; border-radius: var(--r-full); white-space: nowrap; }

.notfound { text-align: center; padding: 80px 20px; }
.notfound h1 { font-size: 56px; font-weight: 800; letter-spacing: -0.04em; color: var(--brand-500); }
.notfound p { color: var(--text-2); margin: 8px 0 20px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1020px) {
  .dash-half, .dash-two { grid-column: span 12; }
}
@media (max-width: 640px) {
  .score-hero { flex-direction: column; text-align: center; padding: 24px 20px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-head-actions { margin-left: 0; width: 100%; }
  .q-card { padding: 16px; }
  .exam-toolbar { top: calc(var(--header-h) + 6px); }
  .login-card { padding: 30px 24px 24px; }
  .qnav.exam-qnav { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- 科目详情：左侧多级大纲树（VSCode 风格） ---------- */
.subject-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 16px; align-items: start; }
.side-tree {
  position: sticky; top: calc(var(--header-h) + 10px);
  padding: 8px; max-height: calc(100vh - var(--header-h) - 30px); overflow-y: auto;
}
/* 左树顶新建文件夹（2026-09-13 用户要求从页头右搬到左边） */
.tree-tools { display: flex; padding: 2px 4px 8px; }
.tree-tools .btn { flex: 1; justify-content: center; }
.tree-row {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 10px; padding-left: calc(10px + var(--depth, 0) * 16px);
  border: 0; background: transparent; border-radius: 9px;
  color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.tree-row:hover { background: var(--surface-2); color: var(--text-1); }
.tree-row.on { background: var(--brand-50); color: var(--brand-600); }
.tree-row .tree-ico { display: inline-flex; color: var(--text-3); }
.tree-row .tree-ico svg { width: 14px; height: 14px; }
.tree-row .tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row .tree-count { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* VSCode 式缩进参考线（2026-09-13）：--guide=父层级，每级 16px 常显 */
.tree-line { position: relative; }
.tree-line[style]::before {
  content: ''; position: absolute; top: 3px; bottom: 3px;
  left: calc(20px + var(--guide, 0) * 16px);
  border-left: 1px solid var(--line-strong, var(--line));
  opacity: .28; pointer-events: none;
}
/* 书叶子的形态短标签（全文/背诵/图片/试卷）：右端小胶囊，IA 两形态可见性 */
.tree-row .tree-kind {
  flex: 0 0 auto; font-size: 10px; line-height: 1; font-weight: 600;
  padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px;
  color: var(--text-3); background: var(--surface-2);
}
.tree-row.on .tree-kind { color: var(--brand-600); border-color: var(--brand-300); }

/* ---------- 阅读器：左侧大纲 + 主区（页宽收敛，不挤书行） ---------- */
.reader-layout { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 10px; }
.reader-toc {
  position: sticky; top: calc(var(--header-h) + 10px);
  max-height: 420px; overflow-y: auto; display: grid; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.rtoc-side-head {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 4px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.rtoc-side-title {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 750; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rtoc-row {
  border: 0; background: transparent; text-align: left; padding: 6px 9px; border-radius: 8px;
  font-size: 12.5px; color: var(--text-2); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
/* 书内左大纲允许两行（2026-09-13：单行截断总断在括号中间没法看；全名仍在 title 里） */
.book-reader .reader-toc .rtoc-row,
.book-reader .reader-toc .rtoc-group {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.rtoc-row:hover { background: var(--surface-2); color: var(--text-1); }
.rtoc-row.on { background: var(--brand-50); color: var(--brand-600); font-weight: 650; }
/* 大纲分组头可点（button  reset 后保持原观感，hover 给出可点反馈） */
button.rtoc-group { display: block; width: 100%; text-align: left; background: transparent; border: 0; font: inherit; cursor: pointer; border-radius: 8px; }
button.rtoc-group:hover { background: var(--surface-2); color: var(--text-1); }
/* 嵌入式阅读器主区：与独立阅读器同口径通栏（2026-09-15 用户点名"内容竖着只留在左侧"）；
 * 660px 上限只收纯散文 .book-text 保可读行长，背诵/图页用满轨道 */
.reader-main { min-width: 0; max-width: none; }
.reader-main > .book-text { max-width: 980px; margin-inline: auto; }
.draft-row { align-items: center; }

/* ---------- md-lite / 公式 / 卡片编辑（2026-09-13） ---------- */
.md-h1 { font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin: 14px 0 8px; }
.md-h2 { font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin: 12px 0 7px; }
.md-h3 { font-size: 14px; font-weight: 750; margin: 10px 0 6px; }
.md-h4 { font-size: 13px; font-weight: 750; margin: 8px 0 5px; }
.md-code { font-family: var(--mono); font-size: .92em; background: var(--surface-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.md-pre { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 8px 0; overflow-x: auto; white-space: pre-wrap; }
.md-ul, .md-ol { margin: 6px 0 6px 20px; padding: 0; display: grid; gap: 4px; font-size: 13px; line-height: 1.7; }
.md-quote { border-left: 3px solid var(--brand-500); background: var(--surface-2); border-radius: 0 8px 8px 0; padding: 8px 12px; margin: 8px 0; font-size: 13px; line-height: 1.7; }
.md-hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.md-img { display: block; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; margin: 8px auto; }
.math-inline { font-family: Georgia, 'Times New Roman', serif; font-style: italic; letter-spacing: .01em; }
.math-display { font-family: Georgia, 'Times New Roman', serif; font-style: italic; text-align: center; padding: 10px 12px; margin: 8px 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.kp-edit { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-3); cursor: pointer; display: inline-grid; place-items: center; }
.kp-edit:hover { border-color: var(--brand-300); color: var(--brand-600); background: var(--brand-50); }
.kp-edit svg { width: 13px; height: 13px; }
.kp-edit:disabled { opacity: .4; cursor: default; }
.kp-edit-ta { width: 100%; font-size: 13px; line-height: 1.7; margin-top: 8px; }

/* ---------- 专注页精简版（图标化） ---------- */
.focus-top { display: flex; gap: 20px; align-items: center; padding: 18px 22px; margin-bottom: 14px; flex-wrap: wrap; }
.focus-top-right { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 220px; }
.focus-addcat { display: flex; gap: 8px; max-width: 300px; }
.focus-cats { display: grid; gap: 10px; }
.focus-cat-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.focus-cat-name { font-size: 13.5px; flex: 0 0 auto; }
.focus-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; align-items: center; }
.focus-none { font-size: 12px; }
.focus-cat-acts { display: flex; gap: 4px; flex: 0 0 auto; }
.fchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface-2); font-size: 12px;
}
.fchip.running { border-color: var(--cat, var(--brand-500)); }
.fchip.running .fchip-clock { color: var(--cat, var(--brand-500)); font-weight: 750; }
.fchip-btn {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: transparent; color: var(--text-2); cursor: pointer; padding: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.fchip-btn:hover { background: var(--surface-3); color: var(--text-1); }
.fchip-btn svg { width: 13px; height: 13px; }
.fchip-btn.ok:hover { color: var(--ok-500); }
.fchip-btn.danger:hover { color: var(--err-500); }
.fchip-name { font-weight: 650; cursor: pointer; }
.fchip-clock { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .subject-layout { grid-template-columns: minmax(0, 1fr); }
  /* 手机端左右只是上下堆叠、没有并排的阅读区抢空间，故目录不该再被 200px 卡住
   * （2026-09-14 用户："书籍目录变成了一小半"——200px 只够看 2~3 行，下面整屏空着）。
   * 未选书时目录就是本页主体 → 放到视口级上限内自然增高，由整页滚动接管。 */
  .side-tree { position: static; max-height: min(62dvh, 560px); }
  .reader-layout { grid-template-columns: minmax(0, 1fr); }
  .reader-toc { position: static; max-height: 140px; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
}

/* ---------- 工作台科目卡：框体不动，只滚内容 ---------- */
.dash-subcard { overflow: hidden; }
.dash-subcard #dashList { max-height: min(58vh, 620px); overflow-y: auto; overscroll-behavior: contain; }