/* 勤修成长营 · 全科学习平台 — 视觉设计 v2（浅色精美版）
   设计指南：~/workspace/qinxiu-words-data/design-guide.md
   浅色为主：页面底 #F7F9F4（带一点绿的暖白），卡片白、圆角、轻阴影；
   深色只做小面积点缀（按钮、标题、进度环）。品牌色只有 logo 绿 #729b4a 一种。
   手机优先；基础样式 = 手机版（320–640px），桌面规则只在宽屏
   （或用户强制电脑版时）生效。 */
:root {
  --primary: #729b4a;
  --primary-dark: #557a35;
  --primary-deep: #45652c;
  --logo-green: #729b4a;
  --logo-green-dark: #557a35;
  --tint: #EEF4E6;
  --tint-soft: #F5F8F0;
  --tint-border: #D5E3C8;
  --bg: #F7F9F4;
  --yellow: #F5C518;
  --yellow-dark: #D9A800;
  --yellow-ink: #4A3600;
  --yellow-bg: #FFF6D6;
  --surface: #FFFFFF;
  --ink: #26311F;
  --secondary: #5B6B52;
  --muted: #8A9781;
  --border: #E4EBDD;
  --border-strong: #CBD8BF;
  --amber: #E8A13A;
  --amber-ink: #7A5C00;
  --amber-bg: #FDF3E0;
  --blue: #4A90D9;
  --blue-ink: #2F5D8A;
  --blue-bg: #E3EEFA;
  --danger: #D95F4B;
  --danger-ink: #A93A2A;
  --danger-bg: #FBEDEA;
  --success: #5E9E4D;
  --green-ink: #4C7031;
  --green-bg: #E2EFDB;
  --shadow: 0 1px 2px rgba(38, 49, 31, .05), 0 4px 16px rgba(38, 49, 31, .06);
  --shadow-hover: 0 2px 4px rgba(38, 49, 31, .06), 0 8px 24px rgba(38, 49, 31, .10);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --font: "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-word: "Nunito", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px; line-height: 1.65;
  background: var(--bg); color: var(--ink);
}
::selection { background: var(--tint); color: var(--ink); }
#topbar h1 { color: var(--primary-deep); }
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 12px; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }
h4 { font-size: 16px; font-weight: 700; }
p { margin: 8px 0; }
a { color: var(--primary-dark); }
.hidden { display: none !important; }
.error { color: var(--danger-ink); font-size: 15px; font-weight: 500; }
.hint { color: var(--secondary); font-size: 14px; }
.big { font-size: 18px; }

/* ---------- 顶部栏 ---------- */
#topbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 12px; position: sticky; top: 0; z-index: 40;
  box-shadow: var(--shadow);
}
#topbar h1 { margin: 0; font-size: 18px; color: var(--primary-deep); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.logo { height: 40px; width: auto; border: none; border-radius: 0; box-shadow: none; }
#userbox { margin-left: auto; font-size: 14px; color: var(--secondary); white-space: nowrap; }

/* 版式切换：分段按钮 */
.layout-switch {
  display: inline-flex; margin-left: auto;
  border: 1px solid var(--border); border-radius: 999px; padding: 4px;
  background: var(--tint-soft); flex: 0 0 auto;
}
.layout-switch button {
  border: none; background: transparent; margin: 0; padding: 10px 14px;
  font-size: 14px; font-weight: 500; border-radius: 999px; color: var(--secondary);
  min-height: 44px; white-space: nowrap; cursor: pointer; box-shadow: none;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.layout-switch button.active { background: var(--surface); color: var(--primary-dark); font-weight: 700; box-shadow: var(--shadow); }
.layout-switch button:hover:not(.active) { color: var(--primary-dark); }

main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 16px 16px 88px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px; margin: 12px 0; box-shadow: var(--shadow);
}
.banner, .trial-banner, .trial-note {
  background: var(--amber-bg); border: 1px solid var(--amber); color: var(--amber-ink);
  padding: 12px 16px; margin: 12px 0; border-radius: 12px; font-size: 15px; line-height: 1.6;
}
.banner { margin: 12px auto 0; max-width: 1120px; }
#trial-banner:empty { display: none; }

/* ---------- 学习进行中：退出、发音选择、反馈 ---------- */
.session-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.session-top .hint { margin: 0; }
.session-top > span { min-width: 0; }
/* 保存状态小徽标：轻量一行字，不打扰学习；窄屏自动换行，不溢出 */
.save-state { font-size: 12px; color: #2e7d32; white-space: nowrap; flex: 0 0 auto; }
.save-state.pending { color: #b26a00; }
.save-state.offline { color: #c62828; }
.exit-btn { flex: 0 0 auto; min-height: 36px; padding: 6px 12px; margin: 0; font-size: 14px; border-radius: 999px; color: var(--secondary); }
.speak-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.speak-row .speak-btn { margin: 0; }
.accent-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; background: var(--tint-soft); vertical-align: middle; }
.accent-seg button { border: none; background: transparent; margin: 0; padding: 8px 14px; min-height: 36px; font-size: 14px; font-weight: 500; border-radius: 999px; color: var(--secondary); box-shadow: none; }
.accent-seg button.active { background: var(--surface); color: var(--primary-dark); font-weight: 700; box-shadow: var(--shadow); }
.fb-line { min-height: 22px; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--primary-dark); }
.type-correct { color: #d32f2f; font-weight: 700; font-size: 1.2em; }
/* 输入打错时红色答案弹框：显示在输入框上方，2 秒后自动消失 */
.type-answer { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdecea; border: 1px solid #f5c6cb; text-align: center; font-size: 1.05em; }
.type-answer.show { animation: type-pop .18s ease-out; }
@keyframes type-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* 单词卡片轻轻换一点底色，学起来不那么单调 */
.flash.hue-1 { background: var(--tint-soft); }
.flash.hue-2 { background: #EFF6EC; }
.flash.hue-3 { background: #F7F3EA; }

/* ---------- 登录 / 注册 ---------- */
.login-card { max-width: 400px; margin: 24px auto; padding: 28px; border-radius: 20px; border-top: 4px solid var(--primary); }
.login-logo { display: block; margin: 0 auto 8px; height: 96px; }
.login-sub { text-align: center; font-size: 15px; color: var(--secondary); margin: 0 0 16px; }
.login-card h2 { text-align: center; }
.login-card .primary { width: 100%; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 52px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 36px; min-width: 40px; padding: 4px 8px; border: none; background: transparent;
  box-shadow: none; font-size: 18px; color: var(--secondary); margin: 0;
}
.pw-eye:hover { color: var(--primary-dark); }
.login-card label { text-align: left; }

/* ---------- 表单与按钮 ---------- */
label { display: block; margin: 12px 0; font-size: 14px; color: var(--secondary); font-weight: 500; }
input, select, textarea {
  width: 100%; height: 48px; padding: 10px 12px; margin-top: 4px;
  font-size: 16px; font-family: var(--font); color: var(--ink);
  border: 2px solid var(--border-strong); border-radius: 12px; background: var(--surface);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
textarea { height: auto; min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--tint); }
input::placeholder { color: var(--muted); }
button {
  padding: 10px 18px; min-height: 44px; font-size: 15px; line-height: 1.4; font-family: var(--font);
  border: 2px solid var(--border-strong); border-radius: 12px; background: var(--surface);
  color: var(--ink); cursor: pointer; margin: 4px 4px 4px 0;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease);
}
button:hover { border-color: var(--primary); color: var(--primary-dark); }
button:active { transform: translateY(1px); }
button.primary {
  background: var(--primary); border-color: var(--primary-dark); border-bottom-width: 4px;
  color: #fff; font-weight: 700; font-size: 16px;
}
button.primary:hover { background: var(--primary-dark); border-color: var(--primary-deep); color: #fff; }
button.primary:active { transform: translateY(3px); border-bottom-width: 1px; }
button.btn-yellow {
  background: var(--yellow); border-color: var(--yellow-dark); border-bottom-width: 4px;
  color: var(--yellow-ink); font-weight: 700; font-size: 16px; border-radius: 999px;
}
button.btn-yellow:hover { background: #FFD83D; border-color: var(--yellow-dark); color: var(--yellow-ink); }
button.btn-yellow:active { transform: translateY(3px); border-bottom-width: 1px; }
button.link-btn {
  border: none; background: transparent; box-shadow: none; color: var(--primary-dark);
  text-decoration: underline; text-underline-offset: 3px; font-size: 14px; min-height: 36px;
}
button.link-btn:hover { color: var(--primary-deep); }
button:disabled.link-btn { color: var(--muted); text-decoration: none; }
button.big-btn { width: 100%; min-height: 52px; margin: 12px 0 0; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #9dbb7f; outline-offset: 2px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.toolbar button { margin: 0; }
.toolbar .primary { min-height: 44px; font-size: 15px; }
/* 返回上一级：去边框的文字链接，干净一点 */
#course-back, #study-back {
  border: none; background: transparent; box-shadow: none; color: var(--primary-dark);
  font-weight: 700; padding-left: 0; margin: 4px 0 0;
}
#course-back:hover, #study-back:hover { color: var(--primary-deep); }

/* ---------- 顶部标签页 ---------- */
.tabs {
  display: flex; gap: 8px; margin: 12px 0; flex-wrap: nowrap; overflow-x: auto;
  padding: 6px; scrollbar-width: none; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 0 0 auto; margin: 0; padding: 10px 16px; min-height: 44px;
  border-radius: 999px; border: 2px solid transparent; background: transparent;
  font-size: 15px; font-weight: 500; color: var(--secondary); box-shadow: none;
}
.tabs button:hover { color: var(--primary-dark); border-color: var(--border-strong); }
.tabs button.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.tab-panel { margin-top: 8px; }

/* ---------- 底部导航（手机版学生端） ---------- */
#bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; background: var(--surface); border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 12px rgba(38, 49, 31, .06);
}
#bottom-nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 52px; margin: 0; padding: 4px 2px;
  border: none; border-radius: 12px; background: transparent; box-shadow: none;
  font-size: 22px; color: var(--secondary);
}
#bottom-nav button span { font-size: 12px; font-weight: 500; line-height: 1.2; }
#bottom-nav button.active { color: var(--primary); }
#bottom-nav button.active span { font-weight: 700; }

/* ---------- 图标（内联 SVG，不依赖系统 emoji 字体） ---------- */
.ic { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.15em; }
.speak-btn .ic { width: 28px; height: 28px; vertical-align: 0; }
.nav-ic { width: 24px; height: 24px; fill: currentColor; }

/* ---------- 首页仪表盘 ---------- */
.dash-greet { background: var(--tint); border: 1px solid var(--tint-border); border-radius: 20px; }
.dash-greet h2 { font-size: 22px; }
.dash-greet .big-num { font-family: var(--font-word); font-weight: 800; font-size: 32px; color: var(--primary-dark); }
.dash-greet .amber-num { font-family: var(--font-word); font-weight: 800; font-size: 24px; color: #8A6200; }
.task-card { background: var(--tint); border: 2px solid var(--tint-border); border-radius: 20px; }
.task-card h3 { font-size: 20px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }
.stat-mini {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 8px; text-align: center; box-shadow: var(--shadow);
}
.stat-mini b { display: block; font-family: var(--font-word); font-weight: 800; font-size: 28px; color: var(--ink); line-height: 1.2; }
.stat-mini span { display: block; font-size: 13px; color: var(--secondary); margin-top: 4px; }

.course-row { padding: 12px 0; }
.course-row + .course-row { border-top: 1px solid var(--border); }
.course-modes button[data-locked] { opacity: .55; }

/* ---------- 课程卡片 ---------- */
.course-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.course-card {
  border: 2px solid var(--border);
  border-top: 4px solid var(--primary);
  transition: border-color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.course-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.course-card h3 { margin-bottom: 4px; }
.course-card .grade-tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--tint); color: var(--primary-dark);
}
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; vertical-align: middle;
}
.badge-trial { background: var(--amber-bg); color: var(--amber-ink); border: 1px solid var(--amber); }
.badge-active { background: var(--green-bg); color: var(--green-ink); border: 1px solid #B9D1A6; }
/* 课程卡片头：标题 + 掌握进度环 */
.course-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.course-head h3 { margin-bottom: 4px; }
.ring-wrap { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; }
.ring-wrap > span { font-size: 11px; color: var(--secondary); white-space: nowrap; }
.ring-num { font-family: var(--font-word); font-weight: 800; font-size: 15px; fill: var(--primary-dark); }

/* 单元：浅色瓷砖，绿字 + 右侧进入箭头；手机 2 列，电脑 3–4 列 */
.unit-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.unit-list button {
  position: relative; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 30px 12px 14px; min-height: 56px; font-size: 15px; font-weight: 500; text-align: left;
  background: var(--surface); border: 2px solid var(--border); color: var(--ink);
}
.unit-list button::after {
  content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 22px; font-weight: 700; line-height: 1;
}
.unit-list button:hover { background: var(--tint-soft); border-color: var(--primary); color: var(--ink); }
.unit-list button:hover::after { color: var(--primary); }
.unit-name { font-weight: 600; font-size: 15px; line-height: 1.3; display: flex; align-items: center; gap: 4px; }
.unit-count { font-size: 12px; color: var(--muted); }
.locked-unit {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; min-height: 56px;
  border-radius: 12px; background: var(--tint-soft); color: var(--muted); font-size: 15px;
  border: 1px dashed var(--border-strong);
}
@media (min-width: 760px) { .unit-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.force-desktop .unit-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 试学小结卡 + 老师端试学列表 */
.trial-result { border: 2px solid var(--primary); background: var(--tint); }
.trial-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
.trial-row + .trial-row { border-top: 1px solid var(--border); }
.course-progress { background: var(--tint); border-radius: 999px; height: 8px; margin: 12px 0 4px; overflow: hidden; }
.course-progress > div { background: var(--primary); height: 100%; border-radius: 999px; }

/* ---------- 课程页：左侧课程栏 + 右侧主面板 ---------- */
.course-page { display: flex; flex-direction: column; gap: 12px; }
.course-side { margin: 12px 0; }
.course-side button {
  display: block; width: 100%; text-align: left; margin: 0 0 8px; font-size: 15px;
}
.course-side button.active { background: var(--tint); color: var(--primary-dark); font-weight: 700; border-color: var(--primary); }
.course-main { min-width: 0; }
.course-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.course-modes button { margin: 0; min-height: 52px; font-size: 16px; font-weight: 700; }
.course-modes button.active { background: var(--primary); border-color: var(--primary-dark); color: #fff; }
.course-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.course-actions button { margin: 0; min-height: 52px; padding: 10px 22px; }

/* ---------- P1：课程页标签 + 实色单元方块 + 右置双按钮 ---------- */
.course-mode-tabs {
  display: flex; gap: 4px; margin: 12px 0 4px; flex-wrap: wrap;
  border-bottom: 2px solid var(--border);
}
.course-mode-tabs button {
  margin: 0 0 -2px; border: none; background: transparent; box-shadow: none;
  padding: 10px 14px; min-height: 44px; font-size: 16px; font-weight: 500;
  color: var(--secondary); border-radius: 0; border-bottom: 3px solid transparent;
}
.course-mode-tabs button:hover { color: var(--primary-dark); border-color: transparent; }
.course-mode-tabs button.active { color: var(--ink); font-weight: 700; border-bottom-color: var(--yellow); }
.course-mode-tabs button[data-locked] { opacity: .55; }
.unit-list button {
  background: var(--primary); border-color: var(--primary-dark); color: #fff;
}
.unit-list button .unit-name { color: #fff; }
.unit-list button .unit-count { color: rgba(255, 255, 255, .85); }
.unit-list button::after { color: rgba(255, 255, 255, .85); }
.unit-list button:hover { background: var(--primary-dark); border-color: var(--primary-deep); color: #fff; }
.unit-list button:hover::after { color: #fff; }
.course-main-row { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.course-main-row .unit-list { margin-top: 0; flex: 1; min-width: 0; }
.course-side-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.course-side-actions button { margin: 0; flex: 1; white-space: nowrap; }
@media (min-width: 760px) {
  .course-main-row { flex-direction: row; align-items: flex-start; }
  .course-side-actions { flex-direction: column; flex: 0 0 150px; }
  .course-side-actions button { width: 100%; }
}

/* ---------- P1：选课页搜索 + 版本筛选 + 书脊卡片 ---------- */
.xuan-search { margin: 12px 0; }
.xuan-search input { border-radius: 999px; padding-left: 16px; margin-top: 0; }
.xuan-layout { display: flex; flex-direction: column; gap: 12px; }
.xuan-filter { flex: 0 0 auto; }
.xuan-filter h4 { margin: 4px 0 8px; font-size: 15px; }
.chips-col { flex-wrap: wrap; }
.xuan-layout .course-grid { margin-top: 0; flex: 1; min-width: 0; }
@media (min-width: 760px) {
  /* qk45：选课三栏改到 ≥1024 才横排（见文件末 qk45 块），760–1023 保持单列。 */
  .chips-col { flex-direction: column; align-items: stretch; }
  .chips-col button { text-align: left; }
}
/* 书脊：左侧深绿书脊条 + 右上黄色书签 + 底部黄色条（纯 CSS，不改卡片内容） */
.course-card.book-cover { position: relative; border-left: 10px solid var(--primary-dark); border-bottom: 6px solid var(--yellow); overflow: hidden; }
.course-card.book-cover::before {
  content: ""; position: absolute; top: 0; right: 18px; width: 0; height: 0;
  border: 9px solid transparent; border-top: 16px solid var(--yellow);
}

/* ---------- 学习模式 & 单词卡 ---------- */
.mode-row, #study-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.mode-row button, #study-modes button { margin: 0; min-height: 52px; font-size: 16px; font-weight: 700; }
.flash { text-align: center; padding: 28px 16px; max-width: 480px; margin: 16px auto; border-radius: 20px; }
.learn-progress { background: var(--tint); border-radius: 999px; height: 8px; overflow: hidden; margin-bottom: 16px; }
.learn-progress > div { background: var(--primary); height: 100%; border-radius: 999px; transition: width 240ms var(--ease); }
.flash .word {
  font-family: var(--font-word); font-weight: 800; font-size: 40px; line-height: 1.1;
  margin: 8px 0; color: var(--ink);
}
.flash .meaning { font-size: 18px; font-weight: 700; color: var(--primary-dark); margin-top: 16px; }
.flash .example { color: var(--secondary); font-style: italic; margin-top: 8px; font-size: 15px; }
.speak-btn {
  width: 56px; height: 56px; min-height: 56px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--primary-dark); border-bottom-width: 4px;
  color: #fff; font-size: 24px; margin: 16px auto 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--tint);
}
.speak-btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.learn-actions { display: flex; gap: 8px; margin-top: 20px; }
.learn-actions button { flex: 1; margin: 0; min-height: 52px; font-size: 16px; font-weight: 700; border-radius: 12px; }
.btn-bad { background: var(--danger-bg); border-color: #F0C4BC; color: var(--danger-ink); }
.btn-bad:hover { border-color: var(--danger); color: var(--danger-ink); }
.btn-mid { background: var(--amber-bg); border-color: #F0D3A8; color: var(--amber-ink); }
.btn-mid:hover { border-color: var(--amber); color: var(--amber-ink); }
.btn-good { background: var(--tint); border-color: #B9D1A6; color: var(--primary-dark); }
.btn-good:hover { border-color: var(--primary); color: var(--primary-dark); }
.phonetic { color: var(--secondary); font-size: 14px; font-weight: 400; margin-left: 6px; white-space: nowrap; }
.flash .phonetic { display: block; margin: 8px 0 0; font-size: 14px; }
.progress { color: var(--muted); font-size: 13px; }

/* ---------- 测试 ---------- */
.opt {
  display: block; width: 100%; text-align: left; padding: 14px 16px; margin: 0 0 8px;
  min-height: 56px; font-size: 16px; line-height: 1.5;
  border: 2px solid var(--border-strong); border-radius: 12px; background: var(--surface);
}
.opt:hover { border-color: var(--primary); color: var(--ink); }
.opt:active { transform: translateY(1px); }
.opt:disabled { opacity: 1; cursor: default; }
.opt-key {
  display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--tint); color: var(--primary-dark);
  font-weight: 700; font-size: 14px; margin-right: 12px; flex: 0 0 auto;
}
.opt.correct { background: var(--primary); border-color: var(--primary-dark); color: #fff; font-weight: 700; }
.opt.correct .opt-key { background: rgba(255, 255, 255, .25); color: #fff; }
.opt.wrong { background: var(--danger); border-color: #B0432F; color: #fff; font-weight: 700; }
.opt.wrong .opt-key { background: rgba(255, 255, 255, .25); color: #fff; }
.test-feedback { font-size: 15px; font-weight: 700; padding: 12px 16px; border-radius: 12px; margin: 12px 0 0; }
.test-feedback.ok { background: var(--tint); color: var(--primary-dark); }
.test-feedback.bad { background: var(--danger-bg); color: var(--danger-ink); }
#t-input { height: 56px; }
#study-body h3 { font-size: 20px; }

/* ---------- 单词本 ---------- */
.wb-search { position: sticky; top: 64px; z-index: 5; margin: 12px 0; }
.wb-search input { border-radius: 999px; padding-left: 16px; background: var(--surface); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; margin: 4px 0 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: 0 0 auto; margin: 0; padding: 10px 16px; min-height: 44px;
  border-radius: 999px; border: 2px solid var(--border-strong); background: var(--surface);
  font-size: 15px; font-weight: 500; color: var(--secondary); box-shadow: none;
}
.chips button.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.wb-detail td { background: var(--tint-soft); font-size: 14px; }

/* ---------- 数据分析 ---------- */
.bar-chart { display: flex; gap: 8px; align-items: flex-end; height: 120px; padding: 8px 0 4px; margin: 8px 0; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bar-col b { font-size: 13px; font-weight: 700; color: var(--primary-dark); }
.bar-col .bar { width: 100%; max-width: 36px; background: var(--primary); border-radius: 6px 6px 0 0; margin-top: 4px; }
.bar-col span { font-size: 12px; color: var(--muted); margin-top: 4px; }
.mastery-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--border); margin: 12px 0 8px; }
.mastery-bar .seg { height: 100%; }
.seg-known { background: var(--primary); }
.seg-mid { background: var(--blue); }
.seg-new { background: var(--amber); }
.seg-unlearned { background: #D9DFD2; }
.score-good { color: var(--primary-dark); }
.score-mid { color: #8A6D1F; }
.score-bad { color: var(--danger-ink); }

/* ---------- 表格（手机上改卡片） ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
th, td { border-top: 1px solid var(--border); padding: 10px 12px; text-align: left; font-size: 15px; }
th { background: var(--tint); font-size: 13px; color: var(--secondary); border-top: none; font-weight: 700; }
td { word-break: break-word; }
table button { min-height: 44px; padding: 8px 12px; font-size: 14px; }
table select { min-height: 44px; font-size: 14px; }
@media (max-width: 640px) {
  table, tbody, tr, td { display: block; width: 100%; }
  table { background: transparent; box-shadow: none; border-radius: 0; }
  table tr:first-child { display: none; }
  table tr { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); margin: 0 0 12px; padding: 6px 12px; }
  table td { border-top: none; border-bottom: 1px solid var(--border); padding: 10px 2px; }
  table td:last-child { border-bottom: none; }
  table td button, table td select { width: 100%; margin: 4px 0; }
  .row label { min-width: 100%; }
}
/* qk60：原「强制电脑版」遗留规则 html.layout-desktop table{display:block;overflow-x:auto}
   已删除——它把表格变块级、与逐表滚动容器冲突；横向滚动改由 qk60 块里各表的
   min-width + 外层 overflow 容器接管（见文件末尾 qk60 段）。 */

/* ---------- 掌握度标签（颜色 + 文字 + 图标，三重提示） ---------- */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.pill.l0 { background: var(--amber-bg); color: var(--amber-ink); border-color: #F0D3A8; }
.pill.l1 { background: var(--blue-bg); color: var(--blue-ink); border-color: #B7D4EE; }
.pill.l2 { background: var(--green-bg); color: var(--green-ink); border-color: #B9D1A6; }

/* ---------- 老师后台 ---------- */
.students-cards { display: block; }
.students-table { display: none; }
.student-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.sc-top { display: flex; gap: 12px; align-items: center; }
.sc-top > div { flex: 1; min-width: 0; }
.avatar {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%;
  background: var(--tint); color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
}
.avatar.big { width: 64px; height: 64px; font-size: 28px; }
.code-text { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--primary-dark); cursor: pointer; border-bottom: 1px dashed var(--primary-dark); }
.code-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.code-badge.unused { background: var(--tint); color: var(--primary-dark); border-color: #B9D1A6; }
.code-badge.suspended { background: #FEF3C7; color: #92400E; border-color: #F59E0B; }
.code-badge.used { background: #F0F0EC; color: var(--secondary); border-color: var(--border); }
.code-badge.revoked { background: var(--danger-bg); color: var(--danger-ink); border-color: #F0C4BC; }
.me-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.me-card .primary, .me-card #me-logout { width: 100%; }
/* ---------- 个人中心（照 ynwords 个人中心的两栏排版） ---------- */
.profile-card h3 { margin-bottom: 4px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; margin-top: 12px; }
.profile-field { display: block; margin: 0 0 12px; }
.profile-field > span { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.profile-field input, .profile-field select { width: 100%; }
.profile-field input:disabled { background: var(--tint-soft); color: var(--secondary); }
.profile-field .hint { display: block; margin-top: 2px; }
.profile-btns { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.profile-btns .primary { min-width: 120px; }
.profile-pw { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.profile-pw h4 { margin-bottom: 8px; }
#userbox button { min-height: 36px; padding: 6px 14px; font-size: 14px; border-radius: 999px; margin: 0; }
@media (max-width: 640px) {
  .profile-grid { grid-template-columns: 1fr; }
}
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row label { flex: 1; min-width: 140px; margin: 0; }
#ty-kbd button { min-height: 44px; padding: 8px 4px; border-radius: 8px; }

/* ---------- 桌面规则 ---------- */
@media (min-width: 641px) {
  html:not(.layout-mobile) body { font-size: 16px; }
  html:not(.layout-mobile) main { padding: 24px 24px 48px; }
  html:not(.layout-mobile) #topbar { padding: 14px 24px; }
  html:not(.layout-mobile) #topbar h1 { font-size: 20px; }
  html:not(.layout-mobile) .logo { height: 46px; }
  html:not(.layout-mobile) #bottom-nav { display: none; }
  html:not(.layout-mobile) .tabs { flex-wrap: wrap; overflow: visible; }
  html:not(.layout-mobile) .card { padding: 20px; }
  html:not(.layout-mobile) .mode-row, html:not(.layout-mobile) #study-modes { grid-template-columns: repeat(4, 1fr); }
  html:not(.layout-mobile) .course-page { flex-direction: row; align-items: flex-start; }
  html:not(.layout-mobile) .course-side { width: 220px; flex: 0 0 220px; position: sticky; top: 76px; }
  html:not(.layout-mobile) .course-main { flex: 1; }
  html:not(.layout-mobile) .course-modes { grid-template-columns: repeat(4, 1fr); }
  html:not(.layout-mobile) .flash .word { font-size: 52px; }
  html:not(.layout-mobile) .flash { padding: 28px; }
  html:not(.layout-mobile) .course-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  html:not(.layout-mobile) .students-cards { display: none; }
  html:not(.layout-mobile) .students-table { display: table; }
  html:not(.layout-mobile) .row label { min-width: 160px; }
  html:not(.layout-mobile) .login-card { margin: 40px auto; }
  html:not(.layout-mobile) button { min-height: 44px; }
  html:not(.layout-mobile) input, html:not(.layout-mobile) select { min-height: 48px; }
}
/* 手机版作用域（qk60 起由视口 ≤640px 自动赋予 layout-mobile）： */
html.layout-mobile #bottom-nav { display: flex; }
html.layout-mobile .students-cards { display: block; }
html.layout-mobile .students-table { display: none; }

/* 电脑版作用域（qk60 起由视口 ≥641px 自动赋予 layout-desktop；与上方
   min-width:641px 的 not(.layout-mobile) 规则同值并行。原 .course-grid 三列
   一条已删：641–1023px 沿用二列（与旧自动模式一致），≥1024px 由下方媒体块给三列）： */
html.layout-desktop main { padding: 24px 24px 48px; }
html.layout-desktop #topbar { padding: 14px 24px; }
html.layout-desktop #topbar h1 { font-size: 20px; }
html.layout-desktop .logo { height: 46px; }
html.layout-desktop #bottom-nav { display: none; }
html.layout-desktop .tabs { flex-wrap: wrap; overflow: visible; }
html.layout-desktop .card { padding: 20px; }
html.layout-desktop .mode-row, html.layout-desktop #study-modes { grid-template-columns: repeat(4, 1fr); }
html.layout-desktop .course-page { flex-direction: row; align-items: flex-start; }
html.layout-desktop .course-side { width: 220px; flex: 0 0 220px; position: sticky; top: 76px; }
html.layout-desktop .course-main { flex: 1; }
html.layout-desktop .course-modes { grid-template-columns: repeat(4, 1fr); }
html.layout-desktop .flash .word { font-size: 52px; }
html.layout-desktop .flash { padding: 28px; }
html.layout-desktop .students-cards { display: none; }
html.layout-desktop .students-table { display: table; }
html.layout-desktop .row label { min-width: 160px; }
html.layout-desktop .login-card { margin: 40px auto; }

@media (min-width: 1024px) {
  html:not(.layout-mobile) .course-grid { grid-template-columns: repeat(3, 1fr); }
  html:not(.layout-mobile) .teacher-layout { display: flex; gap: 16px; align-items: flex-start; }
  html:not(.layout-mobile) #teacher-tabs { flex-direction: column; width: 240px; flex: 0 0 240px; position: sticky; top: 76px; }
  html:not(.layout-mobile) #teacher-tabs button { width: 100%; text-align: left; }
  html:not(.layout-mobile) .teacher-panels { flex: 1; min-width: 0; }
  html.layout-desktop .teacher-layout { display: flex; gap: 16px; align-items: flex-start; }
  html.layout-desktop #teacher-tabs { flex-direction: column; width: 240px; flex: 0 0 240px; position: sticky; top: 76px; }
  html.layout-desktop #teacher-tabs button { width: 100%; text-align: left; }
  html.layout-desktop .teacher-panels { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 卡密有效期（7天卡 / 30天卡 / 180天卡） ---------- */
.badge-expired { background: var(--danger-bg); color: var(--danger-ink); border: 1px solid #F0C4BC; }
.code-badge.expired { background: var(--danger-bg); color: var(--danger-ink); border-color: #F0C4BC; }
.expired-note { background: var(--danger-bg); border: 1px solid #F0C4BC; color: var(--danger-ink);
  padding: 12px 16px; margin: 12px 0; border-radius: 12px; font-size: 15px; line-height: 1.6; }
.dur-pick { align-items: center; }
.dur-pick > span:first-child { font-weight: 700; }
.dur-pick label { flex: none; min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.dur-pick input[type="radio"] { accent-color: var(--primary); }

/* ============================================================
   视觉打磨 v3（2026-11-11，美化一轮）
   只做视觉层：沿用设计指南（浅色暖白、logo 绿 #729b4a 为唯一品牌色、
   纯色填充不用渐变、8pt 间距、圆角与轻阴影）；不动任何布局结构与功能。
   做法：以下规则全部后置，同名选择器以后面的为准；原规则一行未改。
   ============================================================ */
:root {
  --shadow-soft: 0 1px 2px rgba(38, 49, 31, .04), 0 2px 8px rgba(38, 49, 31, .05);
  --shadow-lift: 0 2px 6px rgba(38, 49, 31, .06), 0 12px 28px rgba(38, 49, 31, .10);
  --ring: 0 0 0 3px var(--tint);
}
html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { letter-spacing: -.01em; text-wrap: balance; }
img { max-width: 100%; }
button { -webkit-tap-highlight-color: transparent; }

/* ---------- 顶部栏：半透明毛玻璃，logo 无边框，滚动时仍轻盈 ---------- */
#topbar {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#topbar h1 { letter-spacing: .01em; }
.logo { border: none; border-radius: 0; box-shadow: none; }
#userbox { font-weight: 500; }

/* ---------- 卡片：更透气的留白，层次靠阴影不靠描边 ---------- */
.card { box-shadow: var(--shadow-soft); }
.dash-greet { box-shadow: var(--shadow-soft); }
.dash-greet .big-num, .dash-greet .amber-num, .stat-mini b { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.task-card h3 { letter-spacing: -.01em; }
.stat-mini { transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), border-color 150ms var(--ease); }
.stat-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.stat-mini span { letter-spacing: .02em; }

/* ---------- 按钮：hover 轻微上浮 + 阴影，按压感保留 ---------- */
button { transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease); }
button.primary { box-shadow: 0 1px 2px rgba(85, 122, 53, .35); }
button.primary:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(85, 122, 53, .35); }
button.btn-yellow { box-shadow: 0 1px 2px rgba(122, 92, 0, .25); }
button.btn-yellow:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(122, 92, 0, .25); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #9dbb7f; outline-offset: 2px; box-shadow: var(--ring);
}

/* ---------- 顶部标签页：选中态加阴影，未选中 hover 给浅绿底 ---------- */
.tabs button:hover:not(.active) { background: var(--tint-soft); }
.tabs button.active { box-shadow: 0 1px 3px rgba(85, 122, 53, .4); }
.layout-switch button:hover:not(.active) { background: var(--tint); }
.accent-seg button:hover:not(.active) { background: var(--tint); }

/* ---------- 课程卡片：上浮更明显一点，年级标签字距放开 ---------- */
.course-card:hover { transform: translateY(-3px); }
.course-card .grade-tag { letter-spacing: .04em; }
.ring-wrap > span { letter-spacing: .02em; }

/* ---------- 单元卡片：行高提到 60px，箭头 hover 时右移 ---------- */
.unit-list button { min-height: 60px; transition: background 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease); }
.unit-list button::after { transition: transform 150ms var(--ease), color 150ms var(--ease); }
.unit-list button:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.unit-list button:hover::after { transform: translateY(-50%) translateX(2px); }
.locked-unit { min-height: 60px; }

/* ---------- 进度条：加粗到 10px，内阴影做凹槽感，填充带轻微投影 ---------- */
.course-progress, .learn-progress { height: 10px; box-shadow: inset 0 1px 2px rgba(38, 49, 31, .08); }
.course-progress > div, .learn-progress > div { box-shadow: 0 1px 2px rgba(85, 122, 53, .35); }
.mastery-bar { height: 14px; box-shadow: inset 0 1px 2px rgba(38, 49, 31, .08); }
.bar-col .bar { transition: height 240ms var(--ease); box-shadow: 0 1px 2px rgba(85, 122, 53, .3); }

/* ---------- 单词卡：字距与留白，发言按钮 hover 放大 ---------- */
.flash { padding: 32px 20px; }
.flash .word { letter-spacing: .015em; }
.flash .meaning { letter-spacing: .01em; }
.speak-btn { transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease); }
.speak-btn:hover { transform: scale(1.06); box-shadow: 0 0 0 8px var(--tint); }
.learn-actions button { transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease); }
.learn-actions button:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }

/* ---------- 测试选项：hover 上浮，答对/答错带轻微投影 ---------- */
.opt:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.opt.correct, .opt.wrong { box-shadow: 0 1px 3px rgba(38, 49, 31, .18); }
.test-feedback { letter-spacing: .01em; }

/* ---------- 单词本：搜索框聚焦给阴影，chips hover 描边变绿 ---------- */
.wb-search input:focus { box-shadow: var(--ring); }
.chips button:hover:not(.active) { border-color: var(--primary); color: var(--primary-dark); }

/* ---------- 登录页：卡片阴影加深一档，logo 无边框 ---------- */
.login-card { box-shadow: var(--shadow-lift); }
.login-logo { border: none; border-radius: 0; box-shadow: none; }
.login-sub { letter-spacing: .02em; }
.login-card input { box-shadow: 0 1px 2px rgba(38, 49, 31, .04); }
.login-card h2 { letter-spacing: -.01em; }

/* ---------- 提示条：左侧 4px 强调边 ---------- */
.banner, .trial-banner, .trial-note { border-left-width: 4px; }
.expired-note { border-left-width: 4px; }

/* ---------- 保存状态：改成小药丸，不再是光秃秃一行字 ---------- */
.save-state { background: var(--tint-soft); border: 1px solid var(--border); padding: 3px 10px; border-radius: 999px; font-weight: 500; }
.save-state.pending { background: var(--amber-bg); border-color: #F0D3A8; }
.save-state.offline { background: var(--danger-bg); border-color: #F0C4BC; }

/* ---------- 老师后台：学生卡 hover 上浮，头像加描边光环 ---------- */
.student-card { transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), border-color 150ms var(--ease); }
.student-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.avatar { box-shadow: 0 0 0 2px var(--tint-border); }
.code-text:hover { color: var(--primary-deep); }
.code-badge, .badge, .pill { letter-spacing: .02em; }
.me-head { gap: 16px; }

/* ---------- 底部导航：选中项给浅绿药丸底 ---------- */
#bottom-nav button.active { background: var(--tint); }
#bottom-nav button { transition: background 150ms var(--ease), color 150ms var(--ease); }

/* ---------- 表格（桌面）：表头字距、行 hover 浅绿底 ---------- */
th { letter-spacing: .03em; }
@media (min-width: 641px) {
  tbody tr:hover td { background: var(--tint-soft); }
  .card { padding: 20px 24px; }
  .flash { padding: 36px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (min-width: 1024px) {
  html:not(.layout-mobile) .course-grid { gap: 20px; }
  html.layout-desktop .course-grid { gap: 20px; }
}

/* ---------- 课程页侧栏与模式按钮 ---------- */
.course-side button { transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease); }
.course-side button:hover:not(.active) { background: var(--tint-soft); }
.course-modes button.active { box-shadow: 0 1px 3px rgba(85, 122, 53, .4); }
#course-back:hover, #study-back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   首页与电脑版重设计 v4（2026-11-11）
   - 顶栏：全站 sticky + 不透明底（覆盖 v3 的半透明毛玻璃，避免滚动时内容透出来）
   - 课程卡片悬停提示 .qx-expiry-tip（只由 tooltip.js 在 hover 指针下使用）
   - 电脑版：只在 @media (min-width: 1024px) 和 html.layout-desktop 作用域内，
     基础（手机）规则一行未改。浅色主题、logo 绿 #729b4a、口号均不动。
   ============================================================ */

/* ---------- 顶栏固定：全宽度生效 ---------- */
#topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------- 课程卡片悬停提示 ---------- */
.qx-expiry-tip {
  position: fixed; z-index: 200; display: none; pointer-events: none;
  max-width: 300px; padding: 8px 12px; border-radius: 10px;
  background: var(--tint); border: 1px solid var(--primary);
  color: var(--primary-deep); font-size: 14px; font-weight: 600; line-height: 1.5;
  box-shadow: var(--shadow-hover);
}

/* ---------- 电脑版：自动模式 ≥1024px，或用户强制电脑版 ---------- */
@media (min-width: 1024px) {
  html:not(.layout-mobile) main,
  html.layout-desktop main { max-width: 1200px; padding: 32px 32px 64px; }
  html:not(.layout-mobile) .banner,
  html.layout-desktop .banner { max-width: 1200px; }
  /* 2026-11-11 用户澄清：弹窗与页面居中，之前的靠左作废。main/.banner 恢复 margin:0 auto
     居中，弹窗恢复 overlay 居中 + 卡片 margin:auto；上面的滚动修复（body min-height:0 等）不动。 */
  html:not(.layout-mobile) body,
  html.layout-desktop body { font-size: 17px; line-height: 1.7; }
  html:not(.layout-mobile) h1,
  html.layout-desktop h1 { font-size: 24px; }
  html:not(.layout-mobile) h2,
  html.layout-desktop h2 { font-size: 22px; }
  html:not(.layout-mobile) h3,
  html.layout-desktop h3 { font-size: 20px; }
  /* 桌面顶栏：品牌在左、控件在右（原有 flex + margin-left:auto 结构不变），留白放大，
     内容左右边缘与 1200px 主容器对齐 */
  html:not(.layout-mobile) #topbar,
  html.layout-desktop #topbar {
    padding: 16px max(32px, calc((100vw - 1200px) / 2 + 32px)); gap: 16px;
  }
  html:not(.layout-mobile) #topbar h1,
  html.layout-desktop #topbar h1 { font-size: 22px; }
  html:not(.layout-mobile) .logo,
  html.layout-desktop .logo { height: 52px; }
  html:not(.layout-mobile) .brand,
  html.layout-desktop .brand { gap: 12px; }
  html:not(.layout-mobile) .card,
  html.layout-desktop .card { padding: 24px; }
  /* 选课网格：3 列 */
  html:not(.layout-mobile) .course-grid,
  html.layout-desktop .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  /* 首页课程行：桌面下排成 2 列卡片网格（纯 CSS，app.js 渲染结构不变） */
  html:not(.layout-mobile) #tab-courses .card:has(> .course-row),
  html.layout-desktop #tab-courses .card:has(> .course-row) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  }
  html:not(.layout-mobile) #tab-courses .card:has(> .course-row) > h3,
  html.layout-desktop #tab-courses .card:has(> .course-row) > h3 { grid-column: 1 / -1; margin-bottom: 0; }
  html:not(.layout-mobile) #tab-courses .course-row,
  html.layout-desktop #tab-courses .course-row {
    border: 2px solid var(--border); border-radius: 16px;
    padding: 20px; margin: 0; box-shadow: var(--shadow-soft);
  }
  html:not(.layout-mobile) #tab-courses .course-row + .course-row,
  html.layout-desktop #tab-courses .course-row + .course-row { border-top: 2px solid var(--border); }
  /* 学习页模式按钮剩 3 个（学前测试已删），桌面 3 列正好 */
  html:not(.layout-mobile) #study-modes,
  html.layout-desktop #study-modes { grid-template-columns: repeat(3, 1fr); }
  html:not(.layout-mobile) .course-modes,
  html.layout-desktop .course-modes { grid-template-columns: repeat(3, 1fr); }
  /* 课程页：真正的左右两栏，侧栏加宽并吸顶（顶栏加高后 top 相应提高） */
  html:not(.layout-mobile) .course-page,
  html.layout-desktop .course-page { gap: 24px; }
  html:not(.layout-mobile) .course-side,
  html.layout-desktop .course-side { width: 260px; flex: 0 0 260px; top: 100px; }
  html:not(.layout-mobile) .course-side button,
  html.layout-desktop .course-side button { font-size: 16px; }
  html:not(.layout-mobile) .unit-list,
  html.layout-desktop .unit-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html:not(.layout-mobile) .tabs button,
  html.layout-desktop .tabs button { padding: 12px 20px; font-size: 16px; }
  html:not(.layout-mobile) .dash-greet h2,
  html.layout-desktop .dash-greet h2 { font-size: 24px; }
  html:not(.layout-mobile) .dash-greet .big-num,
  html.layout-desktop .dash-greet .big-num { font-size: 36px; }
  html:not(.layout-mobile) .stat-grid,
  html.layout-desktop .stat-grid { gap: 16px; }
  html:not(.layout-mobile) .stat-mini,
  html.layout-desktop .stat-mini { padding: 20px 12px; }
  html:not(.layout-mobile) .stat-mini b,
  html.layout-desktop .stat-mini b { font-size: 32px; }
  html:not(.layout-mobile) .flash,
  html.layout-desktop .flash { padding: 40px 32px; }
  html:not(.layout-mobile) .flash .word,
  html.layout-desktop .flash .word { font-size: 56px; }
  html:not(.layout-mobile) .teacher-layout,
  html.layout-desktop .teacher-layout { gap: 24px; }
  html:not(.layout-mobile) #teacher-tabs,
  html.layout-desktop #teacher-tabs { width: 260px; flex: 0 0 260px; top: 100px; }
  html:not(.layout-mobile) button,
  html.layout-desktop button { font-size: 16px; }
  html:not(.layout-mobile) .course-modes button,
  html:not(.layout-mobile) #study-modes button,
  html.layout-desktop .course-modes button,
  html.layout-desktop #study-modes button { font-size: 17px; min-height: 56px; }
  html:not(.layout-mobile) #course-back,
  html:not(.layout-mobile) #study-back,
  html.layout-desktop #course-back,
  html.layout-desktop #study-back { font-size: 16px; }
}

/* ---------- 强制电脑版（任意宽度）：与上面同一套桌面规则 ---------- */
html.layout-desktop main { max-width: 1200px; padding: 32px 32px 64px; }
html.layout-desktop .banner { max-width: 1200px; }
html.layout-desktop body { font-size: 17px; line-height: 1.7; }
html.layout-desktop h1 { font-size: 24px; }
html.layout-desktop h2 { font-size: 22px; }
html.layout-desktop h3 { font-size: 20px; }
html.layout-desktop #topbar {
  padding: 16px max(32px, calc((100vw - 1200px) / 2 + 32px)); gap: 16px;
}
html.layout-desktop #topbar h1 { font-size: 22px; }
html.layout-desktop .logo { height: 52px; }
html.layout-desktop .brand { gap: 12px; }
html.layout-desktop .card { padding: 24px; }
html.layout-desktop .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
html.layout-desktop #tab-courses .card:has(> .course-row) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
html.layout-desktop #tab-courses .card:has(> .course-row) > h3 { grid-column: 1 / -1; margin-bottom: 0; }
html.layout-desktop #tab-courses .course-row {
  border: 2px solid var(--border); border-radius: 16px;
  padding: 20px; margin: 0; box-shadow: var(--shadow-soft);
}
html.layout-desktop #tab-courses .course-row + .course-row { border-top: 2px solid var(--border); }
html.layout-desktop #study-modes { grid-template-columns: repeat(3, 1fr); }
html.layout-desktop .course-modes { grid-template-columns: repeat(3, 1fr); }
html.layout-desktop .course-page { gap: 24px; }
html.layout-desktop .course-side { width: 260px; flex: 0 0 260px; top: 100px; }
html.layout-desktop .course-side button { font-size: 16px; }
html.layout-desktop .unit-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.layout-desktop .tabs button { padding: 12px 20px; font-size: 16px; }
html.layout-desktop .dash-greet h2 { font-size: 24px; }
html.layout-desktop .dash-greet .big-num { font-size: 36px; }
html.layout-desktop .stat-grid { gap: 16px; }
html.layout-desktop .stat-mini { padding: 20px 12px; }
html.layout-desktop .stat-mini b { font-size: 32px; }
html.layout-desktop .flash { padding: 40px 32px; }
html.layout-desktop .flash .word { font-size: 56px; }
html.layout-desktop .teacher-layout { gap: 24px; }
html.layout-desktop #teacher-tabs { width: 260px; flex: 0 0 260px; top: 100px; }
html.layout-desktop button { font-size: 16px; }
html.layout-desktop .course-modes button,
html.layout-desktop #study-modes button { font-size: 17px; min-height: 56px; }
html.layout-desktop #course-back,
html.layout-desktop #study-back { font-size: 16px; }

/* ---------- P2：学习弹窗（B0 底座 + 单词卡/回忆/拼写组件） ---------- */
/* 2026-11-11 滚动修复：.modal-body 是 column-flex 子项，默认 min-height:auto 会撑到内容高，
   卡片 overflow:hidden 就把底部截掉、body 自己的滚动永远不触发（短屏上输入框/按钮够不着）。
   修：body 给 flex:1 + min-height:0（能缩、能滚），头/尾 flex-shrink:0，卡片最高 90vh；
   overlay 用 align-items:flex-start + 卡片 margin:auto——能放下时仍垂直居中，超高时顶对齐、
   内部可滚；body 不锁滚动，不会把用户困住。 */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(38, 49, 31, .55);
  display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto;
}
.modal-card {
  background: var(--surface); border-radius: 20px; box-shadow: 0 12px 48px rgba(0, 0, 0, .25);
  width: 100%; max-width: 640px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden; margin: auto;
}
.modal-head { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.modal-title { flex: 1; font-weight: 700; font-size: 16px; min-width: 0; line-height: 1.4; overflow-wrap: break-word; }
.modal-close {
  flex: 0 0 auto; width: 36px; height: 36px; min-height: 36px; border-radius: 50%;
  padding: 0; margin: 0; font-size: 17px; line-height: 1;
}
.modal-body { flex: 1 1 auto; min-height: 0; padding: 8px 16px 16px; overflow-y: auto; }
.modal-body .card.flash { margin: 8px auto; box-shadow: none; border: none; padding: 20px 8px; }
.modal-body .exit-btn { display: none; }
.modal-foot { flex-shrink: 0; border-top: 1px solid var(--border); padding: 8px 16px 12px; }
.stat-line { font-size: 13px; color: var(--secondary); line-height: 1.7; text-align: left; }
.stat-line b { color: var(--ink); font-weight: 700; }
/* 弹窗打开时，底下的学习页只留标题和返回（模式行藏起来，点不到也看不到） */
body.modal-open #study-modes, body.modal-open #review-unit-btn { display: none; }
/* 倒计时圈：SVG 环 + 中央数字；到 0 停住，闪一下提示 */
.count-ring { position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.count-ring svg { transform: rotate(-90deg); display: block; }
.count-ring .count-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: var(--primary-dark);
}
.count-ring.zero .count-num { color: var(--danger); }
.count-ring.flash-once { animation: ringflash .45s ease 2; }
@keyframes ringflash { 50% { opacity: .3; } }
/* 双色字母（装饰性分色，不代表音节） */
.flash .word .wl-a { color: var(--primary-dark); }
.flash .word .wl-b { color: var(--amber); }
/* 字母–音节对照格：上行字母/词，下行音标 */
.syll-grid { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; margin: 12px 0 4px; }
.syll-cell, .syll-block { display: flex; flex-direction: column; align-items: center; min-width: 28px; }
.syll-cell .syll-letter, .syll-block .syll-word { font-family: var(--font-word); font-weight: 800; font-size: 21px; line-height: 1.2; }
.syll-cell .syll-ph, .syll-block .syll-ph {
  font-size: 13px; color: var(--secondary); border-top: 2px solid var(--border-strong);
  padding-top: 2px; margin-top: 2px; line-height: 1.3;
}
/* 中文占位 -- */
.mean-ph { font-size: 18px; font-weight: 700; color: var(--muted); margin-top: 16px; }
/* 圆形三按钮：认识 / 发音 / 不认识 */
.learn-actions-round { display: flex; justify-content: center; gap: 28px; margin-top: 20px; }
.round-btn {
  width: 78px; height: 78px; min-height: 78px; border-radius: 50%; padding: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1.25; border-width: 3px;
}
.round-btn span { font-size: 13px; font-weight: 700; }
.round-good { background: var(--green-bg); border-color: var(--primary); color: var(--primary-dark); }
.round-speak { background: var(--yellow-bg); border-color: var(--yellow-dark); color: var(--yellow-ink); }
.round-bad { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-ink); }
.fuzzy-link {
  border: none; background: transparent; box-shadow: none; color: var(--secondary);
  text-decoration: underline; text-underline-offset: 3px; font-size: 14px; min-height: 36px; margin-top: 10px;
}
.fuzzy-link:hover { color: var(--primary-dark); }
/* 回忆：选项横排（桌面 4 列，手机 2×2），无字母角标 */
.recall-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.recall-opts .opt { text-align: center; margin: 0; min-height: 52px; }
@media (min-width: 760px) { .recall-opts { grid-template-columns: repeat(4, 1fr); } }
/* 回忆/拼写的大号黄色发音钮 */
.speak-btn.yellow { background: var(--yellow); border-color: var(--yellow-dark); color: var(--yellow-ink); box-shadow: 0 0 0 6px var(--yellow-bg); }
/* 拼写：提示牌 + 黄色提交箭头 */
.hint-btn {
  border: 2px solid var(--border-strong); background: var(--amber-bg); color: var(--amber-ink);
  border-radius: 999px; min-height: 44px; font-size: 15px; font-weight: 700; padding: 10px 18px; margin: 0;
}
.hint-btn:disabled { opacity: .55; }
.spell-cue { min-height: 88px; }
.spell-arrow {
  width: 56px; height: 56px; min-height: 56px; border-radius: 50%; background: var(--yellow);
  border: 2px solid var(--yellow-dark); border-bottom-width: 4px; color: var(--yellow-ink);
  font-size: 26px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center;
}
.spell-arrow:active { transform: translateY(3px); border-bottom-width: 1px; }
.spell-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.spell-mode-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.spell-mode-btns button { min-height: 56px; font-size: 17px; font-weight: 700; }

/* ---------- P3：单元测试分段列表式 ---------- */
.test-list { max-width: 860px; margin: 0 auto; }
.test-head { position: sticky; top: 0; z-index: 20; background: var(--bg); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.test-head h3 { margin: 0 0 4px; font-size: 18px; }
.test-head p { margin: 0; font-size: 13px; color: var(--secondary); }
.test-timer { text-align: center; flex: 0 0 auto; }
.test-timer .tt-box { display: flex; gap: 4px; justify-content: center; }
.test-timer .tt-cell { min-width: 42px; }
.test-timer .tt-num { display: block; font-size: 20px; font-weight: 800; background: var(--ink); color: #fff; border-radius: 8px; padding: 4px 6px; font-variant-numeric: tabular-nums; }
.test-timer .tt-lab { font-size: 11px; color: var(--muted); }
.test-timer.low .tt-num { background: var(--danger); }
.test-section { margin-top: 20px; }
.test-section-head { background: var(--primary-dark); color: #fff; font-weight: 800; font-size: 17px; padding: 10px 14px; border-radius: 10px 10px 0 0; }
.test-q { border: 1px solid var(--border); border-top: none; padding: 12px 14px; background: var(--surface); }
.test-q:last-child { border-radius: 0 0 10px 10px; }
.test-stem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--tint-soft); border-radius: 8px; padding: 8px 10px; font-size: 17px; font-weight: 700; }
.test-stem .stem-num { color: var(--muted); font-size: 14px; font-weight: 700; }
.test-stem .speak-btn { width: 36px; height: 36px; min-height: 36px; font-size: 16px; padding: 0; }
.test-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 16px; background: var(--surface); }
.test-opt:hover { border-color: var(--primary); }
.test-opt input { accent-color: var(--primary); width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
.test-opt:has(input:checked) { border-color: var(--primary); background: var(--yellow-bg); }
.test-opt:has(input:disabled) { cursor: default; opacity: .75; }
.test-legacy-note { font-size: 13px; color: var(--muted); margin: 8px 2px 0; }
.test-submit-row { text-align: center; margin: 26px 0 10px; }
.test-passage { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 16px; line-height: 1.8; font-weight: 400; margin: 10px 0 0; }
.pretest-entry .row { flex-wrap: wrap; }
.test-submit-row .primary { min-height: 52px; font-size: 18px; padding: 12px 44px; }
.test-submit-row p { margin: 10px 0 0; }
/* 交卷确认（复用 B0 弹窗底座） */
.confirm-body { text-align: center; padding: 18px 6px 6px; }
.confirm-body p { font-size: 17px; margin: 0 0 20px; }
.confirm-btns { display: flex; gap: 12px; justify-content: center; }
button.btn-blue { background: var(--blue); border-color: var(--blue-ink); color: #fff; }
button.btn-blue:hover { background: #3d7fc4; }
/* 成绩弹窗（复用 B0 弹窗底座） */
.result-modal { text-align: center; padding: 6px 4px 2px; }
.result-logo { height: 44px; width: auto; border: none; border-radius: 0; box-shadow: none; }
.result-slogan { font-size: 13px; color: var(--secondary); margin: 6px 0 0; }
.result-score { font-size: 56px; font-weight: 900; line-height: 1.1; margin: 8px 0 0; }
.result-score small { font-size: 20px; font-weight: 700; color: var(--muted); }
.result-stats { display: flex; gap: 10px; justify-content: center; margin: 14px 0; }
.result-stat { flex: 1; max-width: 150px; background: var(--primary); color: #fff; border-radius: 10px; padding: 10px 6px; }
.result-stat b { display: block; font-size: 24px; }
.result-stat span { font-size: 13px; opacity: .92; }
.result-btns { display: flex; gap: 12px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.result-next { margin-top: 16px; }
.result-wrong-item { text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 10px; background: var(--surface); }
.result-wrong-item .rw-en { font-size: 18px; font-weight: 800; }
.result-wrong-item .rw-cn { margin-top: 2px; }
.result-wrong-item .rw-picked { color: var(--danger); font-weight: 700; margin-top: 4px; }
.result-wrong-item .rw-unanswered { color: var(--muted); font-weight: 700; margin-top: 4px; }

/* ---------- 选课页改版 v13：三栏 + 小书脊 ---------- */
.xuan-head { margin-bottom: 0; }
.xuan-head h3 { margin-bottom: 6px; }
.xuan-head p { margin: 0 0 6px; }
.xuan-head p:last-child { margin-bottom: 0; }
.xuan-center { flex: 1; min-width: 0; }
.xuan-side { flex: 0 0 auto; }
.xuan-side h4 { margin: 4px 0 8px; font-size: 15px; }
.xuan-side h4:not(:first-child) { margin-top: 18px; }
.mine-list { display: flex; flex-direction: column; gap: 6px; }
.mine-list .hint { margin: 0; }
.mine-item {
  display: block; width: 100%; text-align: left; margin: 0; min-height: 0;
  padding: 7px 10px; font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px;
  color: var(--ink); cursor: pointer;
}
.mine-item:hover { border-color: var(--primary); color: var(--primary-dark); }
.xuan-empty { color: var(--secondary); padding: 18px 4px; }
#xuan-list.spine-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 14px; margin-top: 4px;
}
.spine {
  position: relative; display: block; width: 100%; height: 168px;
  margin: 0; padding: 0; border: none; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, #3d7049 0%, #2f5d3a 55%, #2a5233 100%);
  box-shadow: 0 2px 6px rgba(38, 49, 31, .18);
  cursor: pointer; text-align: left; appearance: none; -webkit-appearance: none;
  transition: transform 150ms, box-shadow 150ms, filter 150ms;
}
.spine:hover, .spine:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(38, 49, 31, .22); filter: brightness(1.07); outline: none; }
.spine::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  background: rgba(255, 255, 255, .16); border-right: 1px solid rgba(0, 0, 0, .18);
}
.spine-ribbon {
  position: absolute; top: 0; right: 14px; width: 16px; height: 26px;
  background: #bcd8e8;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}
.spine-tag {
  position: absolute; top: 10px; left: 13px; z-index: 1;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.spine-tag.tag-active { background: #dcebd2; color: #2f5d1f; }
.spine-tag.tag-trial { background: #fdeecb; color: #7a5c00; }
.spine-tag.tag-expired { background: #fbe3de; color: #a93a2a; }
.spine-name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: block; background: var(--yellow); color: var(--yellow-ink);
  font-size: 13px; font-weight: 800; line-height: 1.35; text-align: center;
  padding: 7px 4px;
}
.xuan-pager { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 16px; color: var(--secondary); font-size: 14px; }
.xuan-pager button { margin: 0; min-height: 0; padding: 6px 12px; font-size: 13px; }
.xuan-pager button:disabled { opacity: .45; cursor: default; }
.xuan-redeem { display: flex; flex-direction: column; gap: 8px; }
.xuan-redeem input { margin: 0; min-height: 44px; }
.xuan-redeem button { margin: 0; }
.xuan-redeem .hint { margin: 0; min-height: 1.2em; }
@media (min-width: 760px) {
  .xuan-layout { gap: 18px; }
  .xuan-side { flex: 0 0 168px; position: sticky; top: 64px; }
  .xuan-filter { flex: 0 0 150px; }
}

/* 登录页账号历史：用户名输入框上的下拉箭头，点开选（只记用户名，不存密码、不自动填密码） */
.login-user-wrap { position: relative; display: block; }
.login-user-wrap input { padding-right: 34px; }
.hist-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; min-height: 0; margin: 0; padding: 0; border: none; background: transparent; color: var(--secondary); font-size: 15px; line-height: 1; cursor: pointer; }
.hist-toggle:hover { color: var(--primary); }
.login-history { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; display: block; background: #fff; border: 1px solid #c9dcb0; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); overflow: hidden; text-align: left; }
.login-history[hidden] { display: none; }
.login-history .hist-item { display: block; width: 100%; margin: 0; padding: 9px 12px; border: none; border-bottom: 1px solid #eef3e6; border-radius: 0; background: #fff; color: #333; font-size: 14px; text-align: left; cursor: pointer; }
.login-history .hist-item:last-child { border-bottom: none; }
.login-history .hist-item:hover { background: #f2f7ea; }
.login-history .hist-empty { display: block; padding: 9px 12px; font-size: 13px; color: var(--secondary); }
.register-link { text-align: center; margin: 12px 0 0; font-size: 14px; color: var(--secondary); }
.register-link a { color: var(--primary); cursor: pointer; }

/* ---------- 卡密管理 ---------- */
.codes-filter { margin-bottom: 12px; }
.codes-table-wrap { overflow-x: auto; }
.codes-actions { white-space: nowrap; }
.codes-actions button + button { margin-left: 6px; }
.codes-actions button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) {
  .codes-actions button + button { margin-left: 0; }
  .codes-table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--secondary); font-weight: 700; margin-bottom: 2px; }
}

/* ---------- 账号管理 ---------- */
.accounts-table-wrap { overflow-x: auto; }
.pw-once { margin: 10px 0; padding: 12px 14px; border: 2px solid var(--primary); background: #f2f7ea; border-radius: 12px; font-size: 15px; }
.pw-once[hidden] { display: none; }
.pw-once b { font-size: 20px; letter-spacing: 2px; }
.pw-once-close { margin-left: 8px; min-height: 36px; }
@media (max-width: 640px) {
  .accounts-table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--secondary); font-weight: 700; margin-bottom: 2px; }
}


/* 学前测试“以前的记录”：可点的旧报告（-23） */
.pretest-hist { display:block; width:100%; text-align:left; margin:6px 0; padding:8px 10px; background:#f4f8ef; border:1px solid #dfe8d2; border-radius:8px; cursor:pointer; font-size:14px; }
.pretest-hist:hover { background:#e9f1df; }

/* ---------- 全站页脚版权声明 ---------- */
#site-footer{max-width:1200px;margin:24px auto 0;padding:16px 20px 28px;color:#6B7280;font-size:12.5px;line-height:1.7;text-align:center}

/* ---------- 单元工具条：打印预览 / PDF 导出 ---------- */
.unit-tools{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.unit-tools a{border:1.5px solid #0E7A5F;color:#0E7A5F;border-radius:999px;padding:5px 14px;font-size:13.5px;font-weight:600;background:#fff}
.unit-tools a:hover{background:#ECFDF5}

/* ---------- 听力训练 ---------- */
.lis-item{border-top:1px solid #EEF2F0;padding:14px 0}
.lis-item h4{margin:4px 0 8px;color:#1E3A5F}
.lis-q{margin:10px 0}
.lis-q p{margin:4px 0;font-weight:600}
.lis-op{display:block;padding:4px 8px;border-radius:8px;cursor:pointer}
.lis-op:hover{background:#ECFDF5}
.lis-score{margin-left:10px;font-weight:700;color:#0E7A5F}
.lis-script{margin-top:10px}
.lis-script p{white-space:normal;color:#374151}

/* ---------- 首页（与登录合并）公开区 ---------- */
.pub-hero{max-width:880px;margin:26px auto 4px;text-align:center;padding:0 16px}
.pub-hero h2{font-size:27px;color:#1E3A5F;margin:0 0 8px}
.pub-hero p{color:#374151;max-width:720px;margin:0 auto}
.pub-timeline{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 6px;text-align:left}
.pub-step{flex:1 1 140px;background:#fff;border-radius:16px;box-shadow:0 4px 16px rgba(15,23,42,.06);padding:12px 14px;border-top:4px solid #729b4a}
.pub-step b{display:block;color:#1E3A5F}
.pub-step span{font-size:12.5px;color:#6B7280}
.pub-navlinks{margin-top:12px;font-weight:600}
.pub-sections{max-width:1000px;margin:34px auto 0;padding:0 16px}
.pub-h{font-size:21px;color:#1E3A5F;margin:26px 0 6px}
.pub-sub{color:#6B7280;margin:0 0 14px}
.pub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.pub-subj,.pub-feat{background:#fff;border-radius:16px;box-shadow:0 4px 16px rgba(15,23,42,.06);padding:16px 18px;display:block;color:#111827}
.pub-subj b,.pub-feat b{display:block;font-size:17px;color:#0E7A5F;margin-bottom:4px}
.pub-subj span,.pub-feat span{font-size:13.5px;color:#374151}
.pub-table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(15,23,42,.06);font-size:14px}
.pub-table th,.pub-table td{padding:10px 12px;border-bottom:1px solid #EEF2F0;text-align:left}
.pub-table th{background:#ECFDF5;color:#1E3A5F}

.subj-badge{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;background:#FEF3C7;color:#92400E;font-size:12.5px;font-weight:700;vertical-align:middle}

/* ---------- 升学资讯 ---------- */
.info-cats{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.info-cats .chip{border:1.5px solid #CBD5E1;background:#fff;border-radius:999px;padding:5px 14px;cursor:pointer;font-size:14px}
.info-cats .chip.on{border-color:#0E7A5F;background:#ECFDF5;color:#0E7A5F;font-weight:700}
.info-list-box{display:flex;flex-direction:column;gap:10px}
.info-item{text-align:left;background:#F8FAF7;border:1px solid #E5E7EB;border-radius:14px;padding:12px 16px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.info-item:hover{border-color:#0E7A5F}
.info-item b{font-size:16px;color:#1E3A5F}
.info-item span{font-size:12.5px;color:#6B7280}
.info-h{color:#1E3A5F;margin:18px 0 6px;font-size:16.5px}
.info-p{margin:6px 0;color:#374151}
.info-list{margin:6px 0;color:#374151;padding-left:20px}
.info-tablewrap{overflow-x:auto;margin:10px 0}
.info-table{border-collapse:collapse;min-width:520px;font-size:13.5px}
.info-table th,.info-table td{border:1px solid #E5E7EB;padding:6px 10px;text-align:left;white-space:nowrap}
.info-table th{background:#ECFDF5;color:#1E3A5F}
.info-back{background:none;border:none;color:#0E7A5F;font-weight:700;cursor:pointer;padding:0;margin-bottom:8px;font-size:14.5px}

/* ---------- 专项训练 / 规划助手 ---------- */
.drill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:6px}
.drill-card{text-align:left;background:#F8FAF7;border:1.5px solid #E5E7EB;border-radius:14px;padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.drill-card:hover{border-color:#0E7A5F;background:#ECFDF5}
.drill-card b{font-size:16px;color:#1E3A5F}
.drill-card span{font-size:13px;color:#6B7280}
.plan-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:8px 0}
.plan-row input{width:90px;padding:6px 8px;border:1.5px solid #CBD5E1;border-radius:8px}
.plan-row input[type="date"]{width:160px}

/* ---------- 家长专区 / 消息中心 / 模考 ---------- */
.msg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#DC2626;margin-left:6px;vertical-align:super}
.unread-badge{background:#DC2626;color:#fff;border-radius:999px;padding:1px 10px;font-size:12.5px;margin-left:8px}
.msg-list{display:flex;flex-direction:column;gap:10px}
.msg-item{background:#F8FAF7;border:1px solid #E5E7EB;border-radius:14px;padding:12px 16px}
.msg-item.unread{border-color:#F59E0B;background:#FFFBEB}
.msg-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.msg-head b{color:#1E3A5F}
.msg-type{background:#ECFDF5;color:#0E7A5F;border-radius:999px;padding:0 9px;font-size:12px;font-weight:700}
.msg-time{color:#6B7280;font-size:12.5px;margin-left:auto}
.msg-item p{margin:6px 0;color:#374151}
.msg-ops button{margin-right:8px}
.msg-tools{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin:4px 0 12px}
.msg-item.msg-link{cursor:pointer}
.msg-item.msg-link:hover{border-color:#0E7A5F}
.msg-goto{margin:2px 0 0;color:#0E7A5F;font-weight:700;font-size:13px}
.prog-course{margin-bottom:16px}
.prog-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.prog-head span{color:#6B7280;font-size:13px}
.prog-bar{background:#E5E7EB;border-radius:999px;height:10px;overflow:hidden;margin:6px 0}
.prog-bar div{background:#0E7A5F;height:100%}
.prog-units{margin:4px 0;display:flex;flex-wrap:wrap;gap:6px}
.unit-chip{display:inline-block;background:#F1F5F9;border:1px solid #E2E8F0;border-radius:999px;padding:2px 10px;font-size:12.5px;margin:0;color:#374151}
.unit-chip.done{background:#ECFDF5;border-color:#A7E8CF;color:#0E7A5F;font-weight:700}
.trend-svg{max-width:100%;height:auto;background:#F8FAF7;border-radius:12px}
#mock-timer{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:999;background:#1E3A5F;color:#fff;padding:8px 20px;border-radius:999px;font-weight:700;box-shadow:0 6px 20px rgba(15,23,42,.25)}
#mock-timer.over{background:#DC2626}

.codes-pager{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0}
.codes-pager button[disabled]{opacity:.45}
/* qk39 统一分页条：五件套（第一页/上一页/页码输入/下一页/最后一页）+ 总数文案。
   颜色全走主题变量，深色模式自动跟随，不写死浅底。 */
.qk-pager{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;margin:10px 0;overflow-x:auto;padding-bottom:2px}
.qk-pager button{white-space:nowrap;padding:6px 12px}
.qk-pager button[disabled]{opacity:.45}
.qk-pager-jump{white-space:nowrap;color:var(--secondary);font-size:14px}
.qk-pager-jump input{width:52px;text-align:center;padding:5px 4px}
.qk-pager-total{white-space:nowrap;color:var(--secondary);font-size:14px;margin-left:2px}
@media (max-width:640px){
  .qk-pager{gap:5px}
  .qk-pager button{padding:5px 8px;font-size:13px}
  .qk-pager-jump,.qk-pager-total{font-size:12.5px}
  .qk-pager-jump input{width:42px;padding:4px 2px}
}

.pt-opt{display:block;width:100%;text-align:left;margin:6px 0;padding:10px 14px;border:1px solid #E5E7EB;border-radius:12px;background:#fff;font-size:15px}
.pt-opt.sel{border-color:#0E7A5F;background:#ECFDF5;font-weight:700}

/* ---------- 导航分级：更多下拉 / 页内锚点 / 报告档案 ---------- */
.tabs-more{position:relative;display:inline-block}
.more-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #E5E7EB;border-radius:14px;box-shadow:0 14px 34px rgba(15,23,42,.16);display:flex;flex-direction:column;min-width:160px;z-index:80;padding:6px}
.more-menu button{text-align:left;border-radius:10px;padding:9px 12px;white-space:nowrap}
.more-menu button.active{background:#ECFDF5;color:#0E7A5F;font-weight:700}
/* qk39：「更多」菜单打开时节点被移到 body 并 fixed 定位（绕开 .tabs 横向
   滚动容器的纵向裁剪，手机上原 absolute 展开会被裁掉）；外观沿用 .more-menu，
   位置由 JS 按按钮 rect 写 inline top/right。 */
.more-menu-fixed{position:fixed;z-index:300;min-width:160px}
.anchor-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.anchor-chips button{background:#fff;border:1px solid #0E7A5F;color:#0E7A5F;border-radius:999px;padding:5px 14px;font-weight:700;font-size:13.5px}
.anchor-chips button:hover{background:#ECFDF5}
.arch-item{background:#F8FAF7;border:1px solid #E5E7EB;border-radius:14px;padding:12px 16px;margin-bottom:10px}
.arch-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.arch-head b{color:#1E3A5F}
.arch-item p{margin:6px 0;color:#374151}
.arch-detail{background:#fff;border:1px dashed #CBD5E1;border-radius:10px;padding:8px 12px;margin:8px 0}

.kp-badge{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;background:#FEE2E2;color:#B91C1C;font-size:12.5px;font-weight:700;vertical-align:middle}
.kp-badge.trap{background:#FEF3C7;color:#92400E}

/* ---------- 老师端学情总览 ---------- */
.risk-badge{display:inline-block;padding:2px 10px;border-radius:999px;background:#FEE2E2;color:#B91C1C;font-size:12.5px;font-weight:700;margin:2px 2px 2px 0}
.ov-row{cursor:pointer}
.ov-row:hover{background:#ECFDF5}
.subj-card{border:1px solid #E5E7EB;border-left:4px solid #0E7A5F;border-radius:12px;padding:12px 16px;margin:12px 0;background:#F8FAF7}
.subj-card h4{margin:0 0 8px;color:#1E3A5F}
.subj-card p{margin:5px 0;color:#374151}
.sug-box{background:#ECFDF5;border:1px solid #A7F3D0;border-radius:10px;padding:8px 14px;margin-top:8px}
.sug-box ul{margin:6px 0 6px 18px;padding:0}
.sug-box li{margin:3px 0}

/* ---------- 学科切换器（学科优先导航：先选学科，再年级/学期/课程） ---------- */
.subj-switch-card h3{margin-bottom:4px}
.subj-switch{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.subj-chip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid #CBD5E1;background:#fff;border-radius:999px;padding:7px 16px;cursor:pointer;font-size:15px;color:#374151}
.subj-chip .subj-dot{width:10px;height:10px;border-radius:50%;flex:none}
.subj-chip:hover{border-color:#0E7A5F;color:#0E7A5F}
.subj-chip.on{border-color:#0E7A5F;background:#ECFDF5;color:#0E7A5F;font-weight:700}

/* 逐题测试：上一题/下一题/交卷导航（runTest） */
.test-nav { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.test-nav-spacer { flex: 1; }
.test-nav button:disabled { opacity: .45; cursor: default; }
.test-nav .hint { margin: 0; }

.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cl-card{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:12px;border:1px solid #D1D5DB;border-radius:12px;background:#fff;cursor:pointer;text-align:left}
.cl-card:hover{border-color:#0E7A5F;background:#ECFDF5}
.cl-line{padding:8px 10px;border-radius:10px;border-bottom:1px dashed #E5E7EB}
.cl-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cl-t{font-size:19px;font-weight:600;letter-spacing:.5px}
.cl-n{color:#374151;font-size:13.5px;margin-top:3px}
.cl-y{color:#6B7280;font-size:13.5px;margin-top:2px}
.mode-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0;padding:8px 10px;background:#F8FAF7;border-radius:10px}

body.parent-mode #student-tabs button[data-tab]:not([data-tab="parent"]){display:none}
body.parent-mode #student-tabs .tabs-more{display:none}
body.parent-mode #student-exp-link{display:none}
body.parent-mode #bottom-nav{display:none}

/* 自动练习：数学计算专项 + 化学配平闯关 */
.calc-q{font-size:22px;font-weight:700;margin:12px 0;letter-spacing:.5px;line-height:1.5}
.calc-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.calc-in{width:160px;padding:9px 10px;font-size:17px;border:1.5px solid #D1D5DB;border-radius:10px}
.calc-in.ok{border-color:#0E7A5F;background:#ECFDF5}
.calc-in.bad{border-color:#DC2626;background:#FEF2F2}
.bal-eq{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:19px;font-weight:600;margin:12px 0;line-height:1.6}
.bal-term{display:inline-flex;gap:3px;align-items:baseline}
.bal-in{width:46px;padding:6px 4px;font-size:16px;text-align:center;border:1.5px solid #D1D5DB;border-radius:8px}
.bal-in.ok{border-color:#0E7A5F;background:#ECFDF5}
.bal-in.bad{border-color:#DC2626;background:#FEF2F2}
.prac-score{font-size:17px;font-weight:600}

/* 多教师：注册身份切换 + 提交成功提示 */
.reg-role-row{display:flex;gap:18px;margin:6px 0 10px}
.reg-role{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.success{color:#0E7A5F;background:#ECFDF5;border:1px solid #A7F3D0;border-radius:10px;padding:8px 10px;margin:8px 0}

/* 课件中心：学科 → 课程 → 单元 分级展开 */
.pptx-course{border:1px solid #E5E7EB;border-radius:12px;margin-bottom:8px;overflow:hidden}
.pptx-crow{display:flex;width:100%;align-items:center;gap:12px;background:#F8FAF7;border:none;padding:12px 16px;cursor:pointer;font-size:15px;text-align:left}
.pptx-crow:hover{background:#ECFDF5}
.pptx-crow .hint{margin:0}
.pptx-arrow{margin-left:auto;color:#729B4A;font-weight:700;white-space:nowrap}
.pptx-units{padding:6px 16px 10px}
.pptx-unit{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed #E5E7EB}
.pptx-unit:last-child{border-bottom:none}
.pptx-dl{margin-left:auto;background:#729B4A;color:#fff;border-radius:999px;padding:6px 16px;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.pptx-dl:hover{background:#557A35}

/* 作业系统：拍照提交 / 涂鸦批改 / 评级评语 */
.hw-st{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.hw-st-todo{background:#F3F4F6;color:#6B7280}
.hw-st-pending{background:#FEF3C7;color:#92400E}
.hw-st-graded{background:#ECFDF5;color:#0E7A5F}
.hw-grade-badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;color:#fff}
.hw-g1{background:#0E7A5F}.hw-g2{background:#2471A3}.hw-g3{background:#D97706}.hw-g4{background:#DC2626}
.hw-subj-tag{display:inline-block;background:#EEF4E8;color:#3F6212;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.hw-due{font-size:13px;color:#6B7280}
.hw-due.over{color:#DC2626;font-weight:700}
.hw-asg-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed #E5E7EB}
.hw-asg-row:last-child{border-bottom:none}
.hw-asg-main{flex:1}
.hw-asg-main .hw-st,.hw-asg-main .hw-due{margin-left:8px}
.hw-asg-img{max-width:220px;max-height:160px;border-radius:8px;margin-top:6px}
.hw-add-photo{display:inline-block;background:#fff;border:1.5px solid var(--primary);color:var(--primary-dark,#557A35);border-radius:999px;padding:8px 18px;font-weight:700;cursor:pointer}
.hw-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.hw-thumb{position:relative;width:84px;height:84px}
.hw-thumb img{width:84px;height:84px;object-fit:cover;border-radius:8px;display:block}
.hw-thumb button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:none;background:#DC2626;color:#fff;font-size:14px;line-height:1;cursor:pointer}
.hw-item{border:1px solid #E5E7EB;border-radius:12px;margin-bottom:8px;overflow:hidden}
.hw-item-head{display:flex;width:100%;align-items:center;gap:10px;flex-wrap:wrap;background:#F8FAF7;border:none;padding:11px 14px;cursor:pointer;font-size:15px;text-align:left}
.hw-item-head:hover{background:#ECFDF5}
.hw-item-head .pptx-arrow{margin-left:auto}
.hw-detail{padding:10px 14px}
.hw-photo-view{margin:10px 0}
.hw-photo-view>img{max-width:100%;border-radius:8px;display:block}
.hw-photo-bar{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.hw-vt{border:1.5px solid #D1D5DB;background:#fff;border-radius:999px;padding:4px 14px;cursor:pointer;font-size:13px}
.hw-vt.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}
.hw-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.hw-photo-grid img{width:100%;border-radius:8px;display:block}
.hw-q-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0;border-bottom:1px dashed #E5E7EB}
.hw-q-row:last-child{border-bottom:none}
.hw-q-title{font-weight:600}
.hw-q-nums{margin-left:auto;color:#6B7280;font-size:13px}
.hw-q-row .primary{margin-left:auto}
.hw-q-row .hw-q-nums + .primary{margin-left:0}
.hw-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.hw-tools button{border:1.5px solid #D1D5DB;background:#fff;border-radius:999px;padding:6px 14px;cursor:pointer;font-size:14px}
.hw-tools button.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}
.hw-swatch{width:28px;height:28px;border-radius:50%!important;padding:0!important;border:2px solid #fff!important;box-shadow:0 0 0 1.5px #D1D5DB}
.hw-swatch.on{box-shadow:0 0 0 2.5px #111827}
.hw-grade-btn{font-weight:700;padding:8px 20px!important}
.hw-chip{font-size:13px}
.hw-canvas-wrap{max-width:780px;margin:6px auto}
#hw-canvas{width:100%;display:block;touch-action:none;border:1.5px solid #D1D5DB;border-radius:10px;background:#fff;cursor:crosshair}
.hw-ref-preview{max-width:180px;max-height:140px;border-radius:8px;margin-left:10px;vertical-align:middle}
#hwg-anno-text{padding:7px 10px;border:1.5px solid #D1D5DB;border-radius:10px;max-width:170px}

/* 管理员界面精简：工具条 / 分段切换 / 可搜索下拉 */
.admin-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 8px 0 10px; }
.admin-bar label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #4B5563; }
.admin-bar input, .admin-bar select { min-height: 34px; }
.seg-switch { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.seg-switch button { padding: 6px 14px; border: 1px solid #D1D5DB; background: #fff; border-radius: 999px; cursor: pointer; }
.seg-switch button.on { background: #729B4A; border-color: #729B4A; color: #fff; font-weight: 600; }
.pick-wrap { position: relative; min-width: 240px; flex: 0 1 340px; }
.pick-wrap input { width: 100%; min-height: 34px; }
.pick-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; max-height: 240px; overflow: auto; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.pick-item { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid #F3F4F6; padding: 8px 10px; cursor: pointer; font-size: 14px; }
.pick-item:hover { background: #F0F7E6; }

/* ---------- 教务系统（qk22） ---------- */
.edu-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-left: 4px; }
.edu-badge-owing { background: #FDECEC; color: #B91C1C; }
.edu-badge-low { background: #FEF3C7; color: #92400E; }
.edu-owing { color: #B91C1C; font-weight: 700; }
.edu-over { color: #B45309; font-weight: 600; }
.edu-tbl-wrap { overflow-x: auto; }
.edu-enr { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 12px 0; background: var(--surface); }
.edu-enr-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.edu-stats { display: flex; gap: 6px 18px; flex-wrap: wrap; margin: 6px 0 2px; font-size: 14px; color: var(--secondary); }
.edu-stats b { color: var(--ink); font-size: 15px; }
.edu-flow { margin-top: 12px; }
.edu-flow h5 { margin: 0 0 6px; font-size: 14px; }
.edu-flow table { box-shadow: none; }
.edu-list-flex { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.edu-list-box { flex: 1 1 300px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.edu-list-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 8px 2px; cursor: pointer; font-size: 14px; color: var(--ink); }
.edu-list-row:last-child { border-bottom: none; }
.edu-list-row:hover { background: var(--tint); }
@media (max-width: 640px) {
  .edu-table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--secondary); font-weight: 700; margin-bottom: 2px; }
}

/* ---------- 意见反馈（悬浮入口 / 提交弹窗 / 管理员处理） ---------- */
.fb-fab {
  position: fixed; right: 16px; bottom: 86px; z-index: 90;
  background: #729B4A; color: #fff; border: none; border-radius: 999px;
  padding: 11px 18px; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(38, 49, 31, .35);
}
.fb-fab.hidden { display: none; }
.fb-fab:active { transform: scale(.97); }
.fb-form label { display: block; font-weight: 600; margin: 10px 0 4px; }
.fb-form select, .fb-form textarea {
  width: 100%; box-sizing: border-box; margin-top: 4px; padding: 9px 10px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 15px; font-family: inherit;
}
.fb-form textarea { resize: vertical; line-height: 1.6; }
.fb-imgrow { margin-top: 12px; }
.fb-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fb-prev { position: relative; display: inline-block; }
.fb-prev img {
  width: 76px; height: 76px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border);
}
.fb-prev button {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  min-height: 22px; padding: 0; border-radius: 50%; font-size: 12px; line-height: 1;
}
.fb-error { color: #C0392B; font-size: 14px; min-height: 18px; margin: 6px 0 0; }
.fb-submit {
  width: 100%; margin-top: 10px; background: #729B4A; color: #fff; border: none;
  padding: 12px; font-size: 16px; font-weight: 700; border-radius: 12px; cursor: pointer;
}
.fb-item {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin: 10px 0; background: #fff;
}
.fb-item-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.fb-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.fb-badge-type { background: #EEF3E6; color: #55702F; }
.fb-badge-wait { background: #FDF0DC; color: #A86E12; }
.fb-badge-done { background: #E4F2E2; color: #2E7D32; }
.fb-text { white-space: pre-wrap; overflow-wrap: break-word; line-height: 1.65; margin: 4px 0; }
.fb-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.fb-thumbs img {
  width: 92px; height: 92px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); cursor: zoom-in;
}
.fb-reply {
  background: #F4F8EE; border-left: 3px solid #729B4A; border-radius: 6px;
  padding: 8px 10px; margin-top: 8px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.fb-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.fb-toolbar select, .fb-toolbar input {
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 14px;
}
.fb-toolbar input { flex: 1; min-width: 160px; }
.fb-handle textarea {
  width: 100%; box-sizing: border-box; padding: 9px 10px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 14px; font-family: inherit; line-height: 1.55;
}
.fb-handle-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.fb-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; }
#fb-lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(20, 26, 16, .88);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
#fb-lightbox.hidden { display: none; }
#fb-lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 10px; }

/* 学科适配：知识点模式学习卡（讲解直达、例题与解析左对齐易读） */
.kp-body { text-align: left; margin-top: 4px; }
.kp-body .meaning { margin-top: 10px; line-height: 1.65; }
.kp-example { font-style: normal; color: var(--secondary); line-height: 1.65; white-space: pre-wrap; }

/* ---------- qk28：课程切换按钮化 / 语文专属卡 / 古诗文默写自测 ---------- */
.qk28-side-title { font-size: 12.5px; color: var(--secondary); margin: 2px 0 8px; }
.course-side button.qk28-side-item { display: flex; align-items: center; gap: 6px; }
.qk28-side-name { flex: 1; min-width: 0; }
.qk28-side-cur { flex: none; font-size: 11px; font-weight: 700; color: var(--primary-dark); background: var(--tint); border: 1px solid var(--primary); border-radius: 999px; padding: 1px 7px; }
.qk28-side-arrow { flex: none; color: var(--secondary); font-weight: 700; font-size: 17px; }
.course-side button.qk28-side-xuan { text-align: center; font-weight: 700; color: var(--primary-dark); border-style: dashed; }
.qk28-last-badge { background: var(--green-bg); color: var(--green-ink); border: 1px solid #B9D1A6; }
.qk28-yw-tag { background: var(--tint); color: var(--primary-dark); border: 1px solid var(--primary); }
.qk28-yw-think { margin-top: 14px; text-align: left; background: #F8FAF7; border: 1px dashed #C9D8BC; border-radius: 12px; padding: 12px 14px; }
.qk28-yw-think-t { font-weight: 700; color: var(--primary-dark); margin-bottom: 6px; }
.qk28-yw-think p { margin: 0; line-height: 1.7; }
.qk28-yw-sec { margin-top: 12px; }
.qk28-yw-sec h4 { margin: 0 0 6px; color: var(--primary-dark); }
.qk28-yw-trap { margin-top: 12px; text-align: left; background: var(--amber-bg); color: var(--amber-ink); border: 1px solid var(--amber); border-radius: 10px; padding: 10px 12px; line-height: 1.6; }
/* qk40 语文单面卡「核心要点」：讲解全文逐句成段直呈，读学为主 */
.qk40-yw-core { margin-top: 12px; text-align: left; }
.qk40-yw-core h4 { margin: 0 0 6px; color: var(--primary-dark); }
.qk40-yw-core p { margin: 0 0 7px; line-height: 1.75; }
.qk40-yw-core p:last-child { margin-bottom: 0; }
#yw-ex { text-align: left; }
.cl-dict { margin-top: 8px; }
.cl-dict-hint { display: block; font-size: 13px; color: var(--secondary); margin-bottom: 6px; }
.cl-dict-input { width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 16px; }
.cl-dict-result { margin-top: 6px; font-size: 16px; letter-spacing: .04em; line-height: 1.7; word-break: break-all; }
.cl-dc-bad { color: #D92D20; font-weight: 700; }
.cl-dc-miss { color: #9CA3AF; text-decoration: underline dotted; }

/* ---------- qk29：学科卡片差异化（历史高亮 / 解析分步 / 数学草稿纸） ---------- */
.qk29-hl { background: #FFF1A8; color: inherit; padding: 0 2px; border-radius: 3px; }
.qk29-step { margin-top: 8px; }
.qk29-step-end { margin-top: 6px; }
.qk29-draft { margin-top: 8px; text-align: left; }
.qk29-draft-canvas { display: block; width: 100%; height: 220px; background: #fff; border: 1px solid #D8D8D8; border-radius: 8px; touch-action: none; box-sizing: border-box; }

/* qk30 学科下拉多选 */
.qk30-dd-btn{display:flex;align-items:center;gap:10px;width:100%;border:1.5px solid #CBD5E1;background:#fff;border-radius:12px;padding:10px 14px;cursor:pointer;font-size:15px;color:#374151;text-align:left;margin-top:6px}
.qk30-dd-btn:hover{border-color:#0E7A5F}
.qk30-dd-label{font-weight:700;color:#0E7A5F;flex:none}
.qk30-dd-sum{flex:1;font-weight:600;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk30-dd-arrow{flex:none;color:#6B7280}
.qk30-dd-panel{margin-top:10px;border:1px solid #E5E7EB;border-radius:12px;padding:10px;background:#fff}
.qk30-dd-search{width:100%;border:1px solid #CBD5E1;border-radius:999px;padding:8px 14px;font-size:14px;margin-bottom:8px;box-sizing:border-box}
.qk30-dd-list{display:flex;flex-direction:column;gap:4px;max-height:452px;overflow-y:auto;overflow-x:hidden}
.qk30-dd-row{display:flex;align-items:center;gap:8px;width:100%;border:1px solid transparent;background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;font-size:15px;color:#374151;text-align:left}
.qk30-dd-row:hover{background:#F8FAFC}
.qk30-dd-row.on{background:#ECFDF5;color:#0E7A5F;font-weight:700}
.qk30-dd-row .subj-dot{width:10px;height:10px;border-radius:50%;flex:none}
.qk30-dd-name{flex:1}
.qk30-dd-check{flex:none;width:20px;text-align:center;color:#0E7A5F;font-weight:700}
.qk30-dd-empty{margin:4px 2px}
.qk30-dd-warn{color:#B45309;font-weight:600}
.qk30-group-title{display:flex;align-items:center;gap:7px;font-weight:700;color:#374151;margin:16px 0 2px;font-size:15px}
.qk30-group-title .subj-dot{width:10px;height:10px;border-radius:50%;flex:none}

/* qk31 通用单选下拉（与 qk30 下拉同族视觉） */
.qk31-dd{margin:6px 0}
.qk31-dd-btn{display:flex;align-items:center;gap:10px;width:100%;border:1.5px solid #CBD5E1;background:#fff;border-radius:12px;padding:10px 14px;cursor:pointer;font-size:15px;color:#374151;text-align:left}
.qk31-dd-btn:hover{border-color:#0E7A5F}
.qk31-dd-label{font-weight:700;color:#0E7A5F;flex:none}
.qk31-dd-sum{flex:1;font-weight:600;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk31-dd-arrow{flex:none;color:#6B7280}
.qk31-dd-badge{flex:none;background:#ECFDF5;color:#0E7A5F;border:1px solid #0E7A5F;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700}
.qk31-dd-panel{margin-top:10px;border:1px solid #E5E7EB;border-radius:12px;padding:10px;background:#fff}
.qk31-dd-search{width:100%;border:1px solid #CBD5E1;border-radius:999px;padding:8px 14px;font-size:14px;margin-bottom:8px;box-sizing:border-box}
.qk31-dd-list{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow:auto}
.qk31-dd-row{display:flex;align-items:center;gap:8px;width:100%;border:1px solid transparent;background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;font-size:15px;color:#374151;text-align:left}
.qk31-dd-row:hover{background:#F8FAFC}
.qk31-dd-row.on{background:#ECFDF5;color:#0E7A5F;font-weight:700}
.qk31-dd-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk31-dd-sub{flex:none;color:#6B7280;font-size:13px;font-weight:400}
.qk31-dd-row.on .qk31-dd-sub{color:#0E7A5F}
.qk31-dd-empty{margin:4px 2px}

/* qk31 首页顶部导航（与公开页同款 site-nav*，仅 view-login） */
.site-nav{display:flex;align-items:center;gap:14px;padding:8px 4px;margin-bottom:10px}
.site-nav-brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.site-nav-logo{width:34px;height:34px;object-fit:contain;border-radius:8px}
.site-nav-name{font-size:16.5px;font-weight:800;color:var(--primary-deep);white-space:nowrap}
.site-nav-menu{display:flex;align-items:center;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.site-nav-menu::-webkit-scrollbar{display:none}
.site-nav-item{flex:none;padding:7px 12px;border-radius:999px;color:#374151;text-decoration:none;font-size:15px;white-space:nowrap}
.site-nav-item:hover{color:var(--primary-dark)}
.site-nav-item.on{color:var(--primary-dark);font-weight:700;background:#F2F7EA}
.site-nav-login{flex:none;background:var(--primary);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:8px 18px;border-radius:999px;white-space:nowrap}
.site-nav-login:hover{background:var(--primary-dark);color:#fff}
@media (max-width:640px){.site-nav{gap:8px;padding:8px 2px}.site-nav-brand{gap:6px}.site-nav-logo{width:26px;height:26px}.site-nav-name{font-size:13.5px}.site-nav-menu{flex:1;min-width:0;overflow-x:auto}.site-nav-item{padding:6px 8px;font-size:14px}.site-nav-login{padding:6px 12px;font-size:13.5px}}

/* qk33 个人中心「我的课程与有效期」行 */
.qk33-me-course{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:9px 0}
.qk33-me-course b{font-weight:600}
.qk33-me-course .hint{flex:none}

/* ---------- qk33 深色模式（html.theme-dark） ----------
   偏好存 localStorage qx-theme（auto/light/dark，默认 auto）；boot 内联脚本先行定 class 防闪烁。
   做法：整套 CSS 变量换深色（变量驱动的组件——body/卡片/顶栏/页签/表格/表单/弹窗/底部导航——自动跟随）
   + 硬编码浅色组件定点覆盖。品牌主绿 --primary #729b4a 不变；无 theme-dark（浅色）时本节全部不生效。 */
html.theme-dark {
  color-scheme: dark;
  --bg: #0B0F0C;
  --surface: #161B17;
  --tint: #1E2420;
  --tint-soft: #1E2420;
  --tint-border: #2C352D;
  --border: #2C352D;
  --border-strong: #3A453B;
  --ink: #E7ECE7;
  --secondary: #9AA79B;
  --muted: #7E8C7F;
  --primary-dark: #A8C686;
  --primary-deep: #A8C686;
  --amber-ink: #EBCB8B;
  --amber-bg: #2E2712;
  --blue: #6FA8DC;
  --blue-ink: #A9CCF0;
  --blue-bg: #1B2A3A;
  --danger: #E07A63;
  --danger-ink: #F0A08D;
  --danger-bg: #33201B;
  --success: #7FB069;
  --green-ink: #A8C686;
  --green-bg: #22331E;
  --yellow-bg: #2E2712;
  --yellow-ink: #F5D76E;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.5);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.55);
}
html.theme-dark ::selection { background: #2C352D; color: #E7ECE7; }
html.theme-dark button.primary:hover { background: #5C853E; border-color: #45652C; }
html.theme-dark .modal-overlay { background: rgba(0,0,0,.65); }
/* 下拉组件（qk30 学科多选 / qk31 通用单选，基样式为硬编码浅色） */
html.theme-dark .qk30-dd-btn, html.theme-dark .qk31-dd-btn { background: #161B17; border-color: #2C352D; color: #E7ECE7; }
html.theme-dark .qk30-dd-btn:hover, html.theme-dark .qk31-dd-btn:hover { border-color: #A8C686; }
html.theme-dark .qk30-dd-label, html.theme-dark .qk31-dd-label { color: #A8C686; }
html.theme-dark .qk30-dd-sum, html.theme-dark .qk31-dd-sum, html.theme-dark .qk31-dd-name { color: #E7ECE7; }
html.theme-dark .qk30-dd-arrow, html.theme-dark .qk31-dd-arrow, html.theme-dark .qk31-dd-sub { color: #9AA79B; }
html.theme-dark .qk30-dd-panel, html.theme-dark .qk31-dd-panel { background: #161B17; border-color: #2C352D; }
html.theme-dark .qk30-dd-search, html.theme-dark .qk31-dd-search { background: #161B17; border-color: #2C352D; color: #E7ECE7; }
html.theme-dark .qk30-dd-row, html.theme-dark .qk31-dd-row { background: transparent; color: #E7ECE7; }
html.theme-dark .qk30-dd-row:hover, html.theme-dark .qk31-dd-row:hover { background: #1E2420; }
html.theme-dark .qk30-dd-row.on, html.theme-dark .qk31-dd-row.on { background: #22331E; color: #A8C686; }
html.theme-dark .qk31-dd-row.on .qk31-dd-sub { color: #A8C686; }
html.theme-dark .qk30-dd-check { color: #A8C686; }
html.theme-dark .qk31-dd-badge { background: #22331E; color: #A8C686; border-color: #A8C686; }
/* 学科 chips（课件中心等仍在用） */
html.theme-dark .subj-chip { background: #161B17; border-color: #2C352D; color: #E7ECE7; }
html.theme-dark .subj-chip.on { background: #22331E; color: #A8C686; border-color: #A8C686; }
/* 首页 site-nav（菜单文字与 on 底色为硬编码浅色） */
html.theme-dark .site-nav-item { color: #9AA79B; }
html.theme-dark .site-nav-item.on { background: #22331E; color: #A8C686; }
/* 更多菜单 / 登录历史下拉（硬编码白底） */
html.theme-dark .more-menu { background: #161B17; border-color: #2C352D; }
html.theme-dark .more-menu button.active { background: #22331E; color: #A8C686; }
html.theme-dark .login-history { background: #161B17; border-color: #2C352D; }
/* 历史卡高亮（浅黄底在深色下过亮） */
html.theme-dark .qk29-hl { background: #4A3F14; }
/* 卡密状态徽标（边框/底色硬编码浅色） */
html.theme-dark .code-badge.unused { border-color: #3A453B; }
html.theme-dark .code-badge.suspended { background: #2E2712; color: #EBCB8B; border-color: #8A6D1F; }
html.theme-dark .code-badge.used { background: #1E2420; }
html.theme-dark .code-badge.revoked, html.theme-dark .code-badge.expired { border-color: #5C352C; }
/* 选课书脊状态签（浅色 pastel） */
html.theme-dark .spine-tag.tag-active { background: #22331E; color: #A8C686; }
html.theme-dark .spine-tag.tag-trial { background: #2E2712; color: #EBCB8B; }
html.theme-dark .spine-tag.tag-expired { background: #33201B; color: #F0A08D; }
/* 保存状态小徽标（硬编码浅色绿/橙/红） */
html.theme-dark .save-state { color: #7FB069; }
html.theme-dark .save-state.pending { color: #EBCB8B; }
html.theme-dark .save-state.offline { color: #F0A08D; }

/* ---------- qk34 页面收拢（登录页：学科一行横滑 / 特色与学段折叠 / 卖点卡压缩） ----------
   只做信息架构收拢，配色与格调不动；新类一律 qk34- 前缀，挂在既有 .pub-* 结构上做覆盖。 */
/* 年级卖点卡片行压缩（内边距与间距收紧） */
.qk34-steps { gap: 8px; margin-top: 14px; }
.qk34-steps .pub-step { padding: 9px 12px; }
/* 8 科入口：一行横向滑动的学科链接片（整行一片高） */
.qk34-subj-strip { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 9px; padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; }
.qk34-subj-strip .pub-subj { flex: 0 0 auto; display: flex; align-items: baseline; gap: 7px; white-space: nowrap; padding: 10px 14px; }
.qk34-subj-strip .pub-subj b { display: inline; margin: 0; font-size: 16px; }
.qk34-subj-strip .pub-subj span { white-space: nowrap; }
/* 折叠区（平台特色 / 各学段开设学科）：原生 details，summary 作标题行，默认收起 */
.qk34-fold { margin-top: 26px; }
.qk34-fold-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 700; color: #1E3A5F; padding: 2px 0 6px; -webkit-tap-highlight-color: transparent; }
.qk34-fold-sum::-webkit-details-marker { display: none; }
.qk34-fold-arrow { font-size: 15px; color: #729b4a; transition: transform .18s ease; }
.qk34-fold[open ] .qk34-fold-arrow { transform: rotate(180deg); }
.qk34-fold .pub-grid, .qk34-fold .pub-table { margin-top: 10px; }
/* 深色模式下折叠标题行跟随（.pub-* 卡片底色为既有口径，本批不动） */
html.theme-dark .qk34-fold-sum { color: #E7ECE7; }

/* ---------- qk35 深色模式可读性修复（html.theme-dark） ----------
   背景：qk33 深色靠 CSS 变量翻转 + 定点覆盖，漏了三类组件——
   ① 硬编码深色文字（#1E3A5F/#374151 等）压在翻暗的页面底色上；
   ② 固定浅底盒子：正文色随变量翻亮、底色不动，亮字压浅底；
   ③ 变量配对翻车：一侧颜色随变量翻转、配对色写死（如 --ink 底+白字、黄底+翻亮的 --yellow-ink）。
   本节全部挂 html.theme-dark 下，浅色模式像素不变；只改 color/background，不动布局尺寸。 */
/* ① 登录页公开区：不在白卡内的标题与段落（.pub-step/.pub-subj/.pub-feat 白卡内部文字为既有设计，不动） */
html.theme-dark .pub-hero h2 { color: #E7ECE7; }
html.theme-dark .pub-hero p { color: #B9C4B9; }
html.theme-dark .pub-h { color: #E7ECE7; }
html.theme-dark .pub-sub { color: #9AA79B; }
/* 例外：学段表 .pub-table 是白卡但 td 无显式色、继承翻亮 → 白卡内恢复深字，保持白卡观感 */
html.theme-dark .pub-table td { color: #374151; }
/* ② 固定浅底盒子 → 深色下改深底（边框保持原样），正文随变量翻亮后自然可读 */
html.theme-dark .qk28-yw-think { background: #1E2420; }        /* 语文卡「想一想」（原 #F8FAF7，正文 1.14 完全看不见） */
html.theme-dark .test-passage { background: #161B17; }          /* 测试阅读材料（原 #fff） */
html.theme-dark .arch-detail { background: #161B17; }           /* 报告档案详情（原 #fff） */
html.theme-dark .sug-box { background: #22331E; }               /* 学情建议盒（原 #ECFDF5） */
html.theme-dark .fb-item { background: #161B17; }               /* 反馈条目（原 #fff） */
html.theme-dark .fb-reply { background: #1E2420; }              /* 反馈回复（原 #F4F8EE） */
html.theme-dark .pw-once { background: #1E2420; }               /* 一次性密码提示（原 #f2f7ea） */
html.theme-dark .pretest-hist { background: #1E2420; }          /* 测评历史记录（原 #f4f8ef） */
html.theme-dark .pretest-hist:hover { background: #22331E; }
html.theme-dark .type-answer { background: #33201B; }           /* 打字错题答案弹条（原 #fdecea） */
html.theme-dark .flash.hue-2 { background: #1E2420; }           /* 单词卡底色轮换（原 #EFF6EC） */
html.theme-dark .flash.hue-3 { background: #262019; }           /* 单词卡底色轮换（原 #F7F3EA 暖色 → 暖深色） */
html.theme-dark .mode-bar { background: #1E2420; }              /* 古诗文模式条（原 #F8FAF7） */
html.theme-dark .pt-opt { background: #161B17; }                /* 入学测评选项（原 #fff） */
html.theme-dark .pt-opt.sel { background: #22331E; }
html.theme-dark .cl-card { background: #161B17; }               /* 古诗文篇目卡（原 #fff） */
html.theme-dark .cl-card:hover { background: #22331E; }
html.theme-dark .info-cats .chip:not(.on) { background: #161B17; }  /* 资讯分类 chip（原 #fff） */
html.theme-dark .info-cats .chip.on { background: #22331E; }        /* 选中态改深绿底（原 #ECFDF5） */
html.theme-dark .seg-switch button:not(.on) { background: #161B17; } /* 管理员分段切换（原 #fff；.on 绿底白字不动） */
html.theme-dark .pick-list { background: #161B17; }             /* 教务搜索下拉（原 #fff） */
html.theme-dark .pick-item:hover { background: #1E2420; }
html.theme-dark .hw-item-head { background: #1E2420; }          /* 作业条目头（原 #F8FAF7） */
html.theme-dark .hw-item-head:hover { background: #22331E; }
html.theme-dark .hw-tools button:not(.on) { background: #161B17; }  /* 批改工具钮（原 #fff；.on 绿底白字不动） */
html.theme-dark .hw-vt:not(.on) { background: #161B17; }            /* 作业照片视图切换（原 #fff；.on 不动） */
html.theme-dark .hw-add-photo { background: #161B17; }          /* 添加照片钮（原 #fff，字色 --primary-dark 翻亮后压白底） */
html.theme-dark .pptx-crow { background: #1E2420; }             /* 课件中心课程行（原 #F8FAF7） */
html.theme-dark .pptx-crow:hover { background: #22331E; }
html.theme-dark .calc-in.ok, html.theme-dark .bal-in.ok { background: #22331E; }   /* 练习判对底（原 #ECFDF5，输入字随变量翻亮） */
html.theme-dark .calc-in.bad, html.theme-dark .bal-in.bad { background: #33201B; } /* 练习判错底（原 #FEF2F2） */
html.theme-dark .lis-op:hover { background: #22331E; }          /* 听力选项 hover（原 #ECFDF5） */
html.theme-dark .ov-row:hover { background: #1E2420; }          /* 学情总览行 hover（原 #ECFDF5） */
/* ③ 硬编码深色文字压在已翻暗的面上 → 提亮（底色为变量面，随深色翻暗） */
html.theme-dark .lis-item h4 { color: #E7ECE7; }                /* 听力标题（原 #1E3A5F） */
html.theme-dark .lis-script p { color: #B9C4B9; }               /* 听力原文（原 #374151） */
html.theme-dark .info-h { color: #E7ECE7; }                     /* 资讯正文小标题（原 #1E3A5F） */
html.theme-dark .info-p, html.theme-dark .info-list { color: #B9C4B9; }  /* 资讯正文（原 #374151；.info-item 卡内文字在浅卡上不动） */
html.theme-dark .info-back { color: #A8C686; }                  /* 资讯返回钮（原 #0E7A5F 压暗面） */
html.theme-dark .cl-n { color: #B9C4B9; }                       /* 古诗文注释（原 #374151） */
html.theme-dark .cl-y { color: #9AA79B; }                       /* 古诗文译文（原 #6B7280） */
html.theme-dark .prog-head span { color: #9AA79B; }             /* 家长进度头注（原 #6B7280） */
html.theme-dark .hw-due { color: #9AA79B; }                     /* 作业截止注（原 #6B7280；.over 红字不动） */
html.theme-dark .hw-q-nums { color: #9AA79B; }                  /* 批改队列计数（原 #6B7280） */
html.theme-dark .admin-bar label { color: #9AA79B; }            /* 管理员工具条标签（原 #4B5563） */
html.theme-dark .qk30-group-title { color: #E7ECE7; }           /* 学科分组标题（原 #374151） */
html.theme-dark .qk30-dd-warn { color: #EBCB8B; }               /* 下拉警告字（原 #B45309 压暗面板） */
html.theme-dark #site-footer { color: #9AA79B; }                /* 页脚（原 #6B7280） */
html.theme-dark .score-mid { color: #EBCB8B; }                  /* 中等分数（原 #8A6D1F 压暗面） */
html.theme-dark .edu-owing { color: #F0A08D; }                  /* 教务欠费字（原 #B91C1C 压暗面） */
html.theme-dark .edu-over { color: #EBCB8B; }                   /* 教务超额字（原 #B45309 压暗面） */
html.theme-dark .fb-error { color: #F0A08D; }                   /* 反馈表单错误字（原 #C0392B 压暗面） */
/* ④ 变量配对翻车：底色随变量翻浅/翻亮而配对字写死白色（或黄字） → 深色下把底压回深色或字恢复深色 */
html.theme-dark .test-timer .tt-num { color: #0B0F0C; }         /* 计时格：底 var(--ink) 翻亮、白字写死 → 字改深（.low 红底时深字亦可读） */
html.theme-dark .test-section-head { background: #5C853E; }     /* 测试大题头：底 var(--primary-dark) 翻成浅绿 #A8C686、白字压浅底 → 底压回深绿 */
html.theme-dark .unit-list button:hover { background: #5C853E; }/* 单元钮 hover 同上 */
html.theme-dark .site-nav-login:hover { background: #5C853E; }  /* SPA 登录页导航登录钮 hover 同上（常态 --primary 不动） */
html.theme-dark button.btn-blue { background: #2F6DB3; }        /* 蓝钮：--blue 翻成浅蓝 #6FA8DC、白字发虚 → 压深 */
html.theme-dark .opt.wrong { background: #B0432F; }             /* 答错项：--danger 翻成浅红 #E07A63 → 压回其边框深红 */
html.theme-dark button.btn-yellow, html.theme-dark button.btn-yellow:hover { color: #4A3600; }  /* 黄钮：--yellow 两模式不变、--yellow-ink 却翻成浅黄 → 字恢复深色 */
html.theme-dark .speak-btn.yellow { color: #4A3600; }           /* 发音黄钮同上 */
html.theme-dark .spell-arrow { color: #4A3600; }                /* 拼写提交黄钮同上 */
html.theme-dark .spine-name { color: #4A3600; }                 /* 选课书脊名牌：黄底 + 翻亮黄字同上 */

/* ---------- qk35 统一白字总则（用户定调：深色模式字体统一白色） ----------
   本节为 qk35 最终口径，置于文件最末：① 先把所有浅底/白底盒子改深底（白卡、浅色条、pastel 语义徽章），
   ② 再用一条 !important 兜底把全部文字统一成 #FFFFFF。上方零散的彩色字规则保留作底，
   实际渲染以本节为准。例外仅两类：品牌绿按钮/徽章（本就白字、底色不动）、canvas/图片等图形内部（不动）。
   语义色（错误红/警告黄等）出现在文字上同样统一白；作背景色块时保留色系、压深后托白字。 */
/* ①-A 登录页公开区白卡改深底（年级卖点卡 / 学科与特色卡 / 学段表，内部文字随兜底变白） */
html.theme-dark .pub-step { background: #161B17; }
html.theme-dark .pub-subj, html.theme-dark .pub-feat { background: #161B17; }
html.theme-dark .pub-table { background: #161B17; }
html.theme-dark .pub-table th { background: #1E2420; }
/* ①-B 内容区浅底卡/条改深底（资讯 / 专项 / 消息 / 档案 / 学情卡及其表头与小组件） */
html.theme-dark .info-item { background: #161B17; }
html.theme-dark .drill-card { background: #161B17; }
html.theme-dark .drill-card:hover { background: #22331E; }
html.theme-dark .msg-item { background: #161B17; }
html.theme-dark .msg-item.unread { background: #2E2712; }
html.theme-dark .msg-goto { color: #A8C686; }
html.theme-dark .msg-item.msg-link:hover { border-color: #A8C686; }
html.theme-dark .arch-item { background: #161B17; }
html.theme-dark .subj-card { background: #161B17; }
html.theme-dark .info-table th { background: #1E2420; }
html.theme-dark .unit-tools a { background: #161B17; }
html.theme-dark .unit-tools a:hover { background: #22331E; }
html.theme-dark .anchor-chips button { background: #161B17; }
html.theme-dark .anchor-chips button:hover { background: #22331E; }
html.theme-dark .login-history .hist-item { background: #1E2420; }
html.theme-dark .login-history .hist-item:hover { background: #22331E; }
html.theme-dark .prog-bar { background: #1E2420; }              /* 进度轨道（无文字，压深后填充绿更醒目） */
/* ①-C pastel 语义徽章：底色压深为同色系深底，白字托底（饱和色徽章如 .hw-grade-badge 本就白字，不动） */
html.theme-dark .subj-badge, html.theme-dark .kp-badge.trap, html.theme-dark .hw-st-pending, html.theme-dark .fb-badge-wait, html.theme-dark .edu-badge-low { background: #2E2712; }
html.theme-dark .kp-badge, html.theme-dark .risk-badge, html.theme-dark .edu-badge-owing { background: #33201B; }
html.theme-dark .hw-st-graded, html.theme-dark .msg-type, html.theme-dark .unit-chip.done, html.theme-dark .success, html.theme-dark .fb-badge-done, html.theme-dark .hw-subj-tag, html.theme-dark .fb-badge-type { background: #22331E; }
html.theme-dark .hw-st-todo, html.theme-dark .unit-chip { background: #1E2420; }
/* ①-D 黄底组件（--yellow 两模式不变）：底压深金，白字才可读（涉及黄钮/发音钮/拼写钮/书脊名牌；上方 #4A3600 字色规则被兜底白字覆盖） */
html.theme-dark button.btn-yellow, html.theme-dark button.btn-yellow:hover { background: #8A6D1F; }
html.theme-dark .speak-btn.yellow { background: #8A6D1F; }
html.theme-dark .spell-arrow { background: #8A6D1F; }
html.theme-dark .spine-name { background: #8A6D1F; }
/* ①-E 计时格：底 var(--ink) 在深色下翻亮 → 改深底托白字；.low 红底压深为深红 */
html.theme-dark .test-timer .tt-num { background: #1E2420; }
html.theme-dark .test-timer.low .tt-num { background: #B0432F; }
/* ② 统一白字兜底：正文/标题/段落/列表/表格/标签/按钮/链接一律 #FFFFFF（链接的下划线等识别特征不变） */
html.theme-dark body,
html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6,
html.theme-dark p, html.theme-dark li, html.theme-dark td, html.theme-dark th,
html.theme-dark a, html.theme-dark label, html.theme-dark button,
html.theme-dark input, html.theme-dark select, html.theme-dark textarea,
html.theme-dark span, html.theme-dark div, html.theme-dark summary,
html.theme-dark b, html.theme-dark strong, html.theme-dark small, html.theme-dark em { color: #fff !important; }
/* 输入框 placeholder：半透明白，能看清又可与输入内容区分 */
html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: rgba(255,255,255,.55) !important; }

/* ---------- qk38 学生首页实验专区入口卡（今日任务与我的课程之间） ----------
   配色全走变量：浅色 --surface #FFFFFF / --ink #26311F / --border #E4EBDD；
   html.theme-dark 下变量自动翻转（--surface #161B17 / --ink #E7ECE7 / --border #2C352D，见 qk33 变量块），不写死浅底。 */
.exp-home-entry { display: flex; align-items: center; gap: 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin: 12px 0; box-shadow: var(--shadow-soft); text-decoration: none; }
.exp-home-entry:active { transform: scale(.99); }
.exp-home-ic { font-size: 27px; line-height: 1; color: var(--primary); display: flex; flex: none; }
.exp-home-tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.exp-home-tx b { font-size: 16.5px; }
.exp-home-tx small { color: var(--secondary); font-size: 13px; line-height: 1.45; }
.exp-home-arrow { font-size: 22px; line-height: 1; color: var(--muted); flex: none; }

/* ---------- qk42 护眼模式（html.theme-eyecare） ----------
   第四档主题，偏好仍存 qx-theme=eyecare；boot 内联脚本先行加 class 防闪烁。
   暖纸色调：底 #F5EFE0 / 面 #FBF7EA / 字 #3A3428 / 边 #D8CFB4，品牌绿不变。
   做法同 qk33 深色：整套变量换暖纸色（变量驱动组件自动跟随）+ 硬编码纯白组件定点压纸色，
   保证无纯白刺眼底、无黑底；与 theme-dark 互斥（偏好单值，applyTheme 二选一）。 */
html.theme-eyecare {
  color-scheme: light;
  --bg: #F5EFE0;
  --surface: #FBF7EA;
  --tint: #F1E9D2;
  --tint-soft: #F7F1DE;
  --tint-border: #D8CFB4;
  --border: #D8CFB4;
  --border-strong: #C9BB93;
  --ink: #3A3428;
  --secondary: #6B6152;
  --muted: #978A6F;
  --amber-bg: #F7EBCE;
  --blue-bg: #ECEEDD;
  --danger-bg: #F9E9DC;
  --green-bg: #E7EDD3;
  --yellow-bg: #FBF0C0;
  --shadow: 0 1px 2px rgba(58,52,40,.06), 0 4px 16px rgba(58,52,40,.08);
  --shadow-hover: 0 2px 4px rgba(58,52,40,.08), 0 8px 24px rgba(58,52,40,.12);
}
html.theme-eyecare ::selection { background: #EFE3BC; color: #3A3428; }
/* 硬编码纯白组件压纸色（对应 qk33/qk35 在深色下点过的同一批主要表面） */
html.theme-eyecare .qk30-dd-btn, html.theme-eyecare .qk31-dd-btn { background: #FBF7EA; border-color: #D8CFB4; color: #3A3428; }
html.theme-eyecare .qk30-dd-panel, html.theme-eyecare .qk31-dd-panel { background: #FBF7EA; border-color: #D8CFB4; }
html.theme-eyecare .qk30-dd-row, html.theme-eyecare .qk31-dd-row { background: transparent; color: #3A3428; }
html.theme-eyecare .qk30-dd-row:hover, html.theme-eyecare .qk31-dd-row:hover { background: #F1E9D2; }
html.theme-eyecare .qk30-dd-row.on, html.theme-eyecare .qk31-dd-row.on { background: #E7EDD3; }
html.theme-eyecare .subj-chip { background: #FBF7EA; border-color: #D8CFB4; color: #3A3428; }
html.theme-eyecare .more-menu { background: #FBF7EA; border-color: #D8CFB4; }
html.theme-eyecare .seg-switch button { background: #FBF7EA; border-color: #D8CFB4; color: #3A3428; }
html.theme-eyecare .login-history, html.theme-eyecare .login-history .hist-item { background: #FBF7EA; }
html.theme-eyecare .test-passage { background: #FBF7EA; }
html.theme-eyecare .pt-opt { background: #FBF7EA; border-color: #D8CFB4; }
html.theme-eyecare .hw-vt, html.theme-eyecare .hw-tools button { background: #FBF7EA; border-color: #D8CFB4; color: #3A3428; }
html.theme-eyecare .hw-add-photo { background: #FBF7EA; }
html.theme-eyecare .cl-card { background: #FBF7EA; border-color: #D8CFB4; }
html.theme-eyecare .pick-list { background: #FBF7EA; border-color: #D8CFB4; }
html.theme-eyecare .unit-tools a, html.theme-eyecare .anchor-chips button { background: #FBF7EA; }
html.theme-eyecare .arch-detail { background: #F7F1DE; }
html.theme-eyecare .qk29-draft-canvas { background: #FFFDF4; border-color: #D8CFB4; }
/* 黄底组件在纸色上保持原黄（--yellow 两模式不变，--yellow-ink 深字可读），无需覆盖。 */

/* ---------- qk42 屏幕键盘深色/护眼补齐（keyboard.css 的基样式不在本仓库文件内，
   故覆盖写在本文件：选择器带 html.theme-* 前缀，特异性高于 keyboard.css 的单类基样式，
   加载顺序不影响；状态色只改底/边/字，不动 keyboard.js 的判定逻辑） ---------- */
/* 深色：键盘底/键帽改深底，白字与全站 qk35 口径一致；目标键保留品牌绿系高亮 */
html.theme-dark .qk { background: #161B17; border-color: #2C352D; }
html.theme-dark .qk-key { background: #1E2420; border-color: #2C352D; color: #fff; box-shadow: 0 2px 0 #0B0F0C; }
html.theme-dark .qk-key--func { background: #252C26; color: #fff; }
html.theme-dark .qk-key.is-pressed { background: #2C352D; }
html.theme-dark .qk-key.is-target { background: #22331E; border-color: #A8C686; color: #fff; box-shadow: 0 0 0 2px rgba(168,198,134,.45); }
html.theme-dark .qk-key.is-correct { background: #22331E; color: #fff; }
html.theme-dark .qk-key.is-wrong { background: #4A2620; border-color: #E07A63; color: #fff; }
html.theme-dark .qk.qk-disabled .qk-key { color: #9AA79B; }
/* 护眼：键盘走纸色，键帽比板面略浅，目标键品牌绿浅底 */
html.theme-eyecare .qk { background: #F1E9D2; border-color: #D8CFB4; }
html.theme-eyecare .qk-key { background: #FFFDF4; border-color: #D8CFB4; color: #3A3428; box-shadow: 0 2px 0 #E3D9BE; }
html.theme-eyecare .qk-key--func { background: #F7F1DE; color: #3A3428; }
html.theme-eyecare .qk-key.is-pressed { background: #EFE6CC; }
html.theme-eyecare .qk-key.is-target { background: #E2EFDB; border-color: #729b4a; color: #3A3428; box-shadow: 0 0 0 2px rgba(114,155,74,.4); }
html.theme-eyecare .qk-key.is-correct { background: #E2EFDB; }
html.theme-eyecare .qk-key.is-wrong { background: #F9E3D8; border-color: #D95F4B; }
html.theme-eyecare .qk.qk-disabled .qk-key { color: #978A6F; }

/* ---------- qk42 新组件：TTS 降级提示条 / toast / 被挤下线弹窗层级 ---------- */
.qk42-tts-tip { display: flex; align-items: flex-start; gap: 10px; background: var(--amber-bg); color: var(--amber-ink); border: 1px solid var(--border-strong); border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: 14px; line-height: 1.55; }
.qk42-tts-tip span { flex: 1; }
.qk42-tts-tip-x { flex: none; min-height: 0; margin: 0; padding: 2px 8px; border: none; background: transparent; color: inherit; font-size: 14px; }
#qk42-toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px); z-index: 500; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 540px); background: #45652C; color: #fff; border-radius: 14px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; box-shadow: 0 8px 28px rgba(15,23,42,.28); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
#qk42-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#qk42-toast .qk42-toast-act { flex: none; min-height: 0; margin: 0; padding: 7px 14px; background: #fff; border: none; border-radius: 999px; color: #45652C; font-weight: 700; font-size: 14px; }
#qk42-toast .qk42-toast-x { flex: none; min-height: 0; margin: 0; padding: 4px 6px; background: transparent; border: none; color: #fff; font-size: 14px; }
#qk42-kick .modal-overlay { z-index: 600; }

/* ===================== qk44 KaTeX 一期 ===================== */
/* KaTeX 输出继承 currentColor，深色/护眼下自动跟随文字色；此处只管版式与公式面板，不设公式颜色。 */
.qk-math .katex-display { margin: 6px 0; }
.qk44-fx { margin: 8px 0; }
.qk44-fx-groups { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0; }
.qk44-fx-group { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.qk44-fx-lab { font-size: 12px; color: var(--secondary); margin-right: 2px; }
.qk44-fx-btn { min-width: 32px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: 14px; }
.qk44-fx-btn:hover { border-color: var(--primary); }
.qk44-fx-prev-lab { font-size: 12px; color: var(--secondary); margin-top: 6px; }
.qk44-fx-preview { border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; min-height: 36px; background: var(--surface); margin-top: 4px; overflow-x: auto; }

/* ================= qk45：选课/课程页三栏改版 + 选中前置规则 ================= */
/* 选课操作区（搜索下方）：未选时按钮置灰、给「先选一门课程」提示。 */
.xuan-action {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 10px 0 2px; padding: 10px 12px;
  background: var(--surface); border: 1.5px dashed var(--border); border-radius: 12px;
}
.xuan-action-hint { font-weight: 700; color: var(--ink); }
.xuan-action-hint.is-none { color: var(--secondary); font-weight: 500; }
.xuan-action-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.xuan-action-btns button { margin: 0; }
.xuan-action-btns button[disabled] { opacity: .45; cursor: not-allowed; }
/* 课程卡选中态：品牌绿描边（外加白圈保证在深绿卡面上醒目）+「已选」徽标。 */
.spine.qk45-sel {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px var(--primary), 0 8px 20px rgba(38, 49, 31, .25);
}
.spine-sel-badge {
  position: absolute; left: 13px; bottom: 46px; z-index: 1; display: none;
  background: var(--primary); color: #FFFFFF;
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.spine.qk45-sel .spine-sel-badge { display: block; }
.spine-enter {
  position: absolute; right: 12px; bottom: 46px; z-index: 1;
  background: rgba(255, 255, 255, .92); color: #2F5D1F;
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.spine-enter:hover { background: #FFFFFF; text-decoration: underline; }
/* 左栏试学课程行 + 移出小按钮（选课页左栏 / 首页课程行共用口径）。 */
.xuan-trial-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0;
}
.xuan-trial-name {
  font-size: 13px; color: var(--secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xuan-remove { margin: 0; padding: 3px 10px; min-height: 0; font-size: 12.5px; flex: 0 0 auto; }
.qk45-remove-btn { font-size: 13px; opacity: .85; }
/* 课程详情页标签面板。 */
.cp-panel { margin-top: 12px; }
.cp-wrong-list .card { margin: 8px 0; }
#cp-wrong-retest { margin: 6px 0 10px; }
/* 移动端（<1024）：三栏塌缩单列，顺序 筛选 → 左栏（我的/过期） → 课程列表；
   搜索与操作区在布局之外、天然在最前。左栏不设限高（下拉自身收起）。 */
@media (max-width: 1023px) {
  .xuan-filter { order: 1; }
  .xuan-side { order: 2; }
  .xuan-center { order: 3; }
}
/* 桌面（≥1024）：选课三栏 + 课程页左右两栏；侧栏 sticky 且自身限高滚动，不撑长页面。 */
@media (min-width: 1024px) {
  .xuan-layout { flex-direction: row; align-items: flex-start; }
  .xuan-side {
    flex: 0 0 216px; position: sticky; top: 64px;
    max-height: calc(100vh - 84px); overflow-y: auto;
  }
  .xuan-center { flex: 1; min-width: 0; }
  .xuan-filter { flex: 0 0 176px; position: sticky; top: 64px; }
  .course-page { flex-direction: row; align-items: flex-start; }
  .course-side {
    flex: 0 0 224px; margin: 0; position: sticky; top: 64px;
    max-height: calc(100vh - 84px); overflow-y: auto;
  }
  .course-main { flex: 1; min-width: 0; }
}
/* 深色/护眼兜底：操作区虚线框与选中描边在两套主题下保持可辨。 */
html.theme-dark .xuan-action { background: #161B17; border-color: #2C352D; }
html.theme-eyecare .xuan-action { background: #FBF7EA; border-color: #D8CFB4; }
html.theme-dark .spine.qk45-sel {
  box-shadow: 0 0 0 2px #0B0F0C, 0 0 0 5px var(--primary), 0 8px 20px rgba(0, 0, 0, .5);
}

/* qk47 语文课文目录：三栏（左 年级/册次、中 目录列表、右 筛选），≥1024 三栏 sticky；
   <1024 单列，侧栏隐藏改用顶部下拉行（.ywcat-filters-m），顺序 提示→筛选→列表。
   颜色一律走 CSS 变量，深色/护眼自动一致；类型徽标复用 .pill 三色。 */
.ywcat-note {
  background: var(--green-bg); color: var(--green-ink);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; font-size: 14px; margin: 8px 0 0;
}
.ywcat-layout { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.ywcat-side h4, .ywcat-filter h4 { margin: 4px 0 8px; font-size: 15px; }
.ywcat-side h4:not(:first-child) { margin-top: 18px; }
.ywcat-grades { display: flex; flex-direction: column; gap: 6px; }
.ywcat-grade { text-align: left; }
.ywcat-grade.active, .ywcat-vol.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ywcat-vols { display: flex; gap: 6px; flex-wrap: wrap; }
.ywcat-center { flex: 1; min-width: 0; }
.ywcat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--border);
}
.ywcat-row-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ywcat-t { font-weight: 600; font-size: 16px; }
.ywcat-a { color: var(--secondary); font-size: 13.5px; }
.ywcat-un { color: var(--secondary); font-size: 12.5px; }
.ywcat-go { flex: 0 0 auto; }
.ywcat-search { width: 100%; margin-top: 10px; box-sizing: border-box; }
.ywcat-filters-m { display: none; }
@media (max-width: 1023px) {
  .ywcat-side, .ywcat-filter { display: none; }
  .ywcat-filters-m { display: block; margin-top: 10px; }
  .ywcat-filters-m .qk31-dd { margin-bottom: 8px; }
  .ywcat-filters-m .ywcat-search { margin-top: 2px; }
}
@media (min-width: 1024px) {
  .ywcat-layout { flex-direction: row; align-items: flex-start; }
  .ywcat-side { flex: 0 0 168px; position: sticky; top: 64px; }
  .ywcat-filter { flex: 0 0 200px; position: sticky; top: 64px; }
}

/* ---------- qk48 全站 Logo 纯文字化 ----------
   顶栏图片 Logo 已撤，.brand 内只剩 h1 纯文字字标「勤修成长营」：字重/字体与标题一致、
   字号放大（移动 23px / ≥641px 27px / ≥1024px 29px，与各桌面作用域规则同特异性镜像覆盖）。
   颜色走主题：浅色 var(--primary-deep) 深绿 #45652c；深色白色（qk35 白字兜底之外再点名）；
   护眼 --primary-deep 未被护眼变量重定义、仍为深绿，与护眼深色字同系。背景即顶栏容器本身，不加底色/边框。
   成绩弹窗 .result-logo 由 img 改为文字 div，沿用同套配色；.result-slogan 重复品牌行已随模板删除。 */
.brand { gap: 0; }
#topbar h1 { font-size: 23px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
@media (min-width: 641px) {
  html:not(.layout-mobile) #topbar h1 { font-size: 27px; }
}
html.layout-desktop #topbar h1 { font-size: 27px; }
@media (min-width: 1024px) {
  html:not(.layout-mobile) #topbar h1,
  html.layout-desktop #topbar h1 { font-size: 29px; }
}
html.theme-dark #topbar h1 { color: #fff; }
html.theme-eyecare #topbar h1 { color: var(--primary-deep); }
.result-logo { height: auto; font-size: 25px; font-weight: 800; letter-spacing: .04em; line-height: 1.25; color: var(--primary-deep); }
html.theme-dark .result-logo { color: #fff; }

/* ---------- qk48b Logo 图形恢复 ----------
   用户亲令「logo 不能丢」：图形标志（static/logo-mark.png，透明底品牌绿单色）与 qk48 放大文字字标并排。
   只加图形尺寸规则，qk48 的文字字号/颜色/三模式规则一律不动；图形无背景/边框，透明底直接融容器，深色下原样呈现。 */
.brand { gap: 8px; }
.brand-mark { height: 30px; width: auto; display: block; flex: none; }
@media (min-width: 641px) {
  html:not(.layout-mobile) .brand-mark { height: 34px; }
}
html.layout-desktop .brand-mark { height: 34px; }
@media (min-width: 1024px) {
  html:not(.layout-mobile) .brand-mark,
  html.layout-desktop .brand-mark { height: 34px; }
}
.result-mark { height: 34px; width: auto; vertical-align: middle; margin-right: 8px; }

/* ---------- qk49 内容版本管理（老师端「内容版本」页签） ---------- */
.cv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.cv-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cv-row-act { display: flex; align-items: center; gap: 6px; }
.cv-row-act select { max-width: 140px; }
#ttab-content textarea { width: 100%; }
#ttab-content input[type="file"] { padding: 6px 0; }
.cv-ok { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--green-bg); color: var(--green-ink); }
.cv-warns { margin: 10px 0; padding: 8px 12px; border-radius: 10px; background: var(--amber-bg); color: var(--amber-ink); }
.cv-warns p { margin: 4px 0; }
.cv-risks { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-bg); color: var(--danger-ink); }
.cv-risks p { margin: 4px 0; }
.cv-detail { margin-top: 14px; border-top: 2px solid var(--border-strong); padding-top: 10px; }
.cv-diff-row { padding: 6px 4px; border-bottom: 1px dashed var(--border); word-break: break-word; }
.cv-detail-btns { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html.theme-dark .cv-ok { color: #fff; }
html.theme-dark .cv-warns, html.theme-dark .cv-risks { color: #fff; }

/* ---------- qk50 去水印申请与审核 ---------- */
.wm-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 9px 4px; border-bottom: 1px dashed var(--border); }
.wm-row-main { flex: 1; min-width: 0; }
.wm-reason { margin-top: 3px; word-break: break-word; color: var(--text); }
.wm-row-act { display: flex; gap: 8px; flex-shrink: 0; }

/* ---------- qk51 全站「‹ 返回上级」 ----------
   .qk-back：视图级/详情级返回按钮的统一样式（与 #course-back/#study-back 既有口径一致，
   颜色走 --primary-dark/--primary-deep 变量，深色下自动变浅绿、护眼下保持深绿，三主题可读）。
   .qk-backbar：各页签面板顶部的返回条。它是面板的前置兄弟元素（不是面板子元素）——
   面板内容由各 loader 用 innerHTML 整盘重渲染，放面板内会被冲掉；显隐靠 :has 紧随面板
   的 hidden 类联动，不改 switchTab 行为。不支持 :has 的老浏览器下返回条不显示（优雅降级）。 */
.qk-back { border: none; background: transparent; box-shadow: none; color: var(--primary-dark); font-weight: 700; padding-left: 0; margin: 4px 0 0; cursor: pointer; text-align: left; }
.qk-back:hover { color: var(--primary-deep); }
.qk-backbar { display: none; border: none; background: transparent; box-shadow: none; color: var(--primary-dark); font-weight: 700; font-size: 15px; padding: 6px 0; margin: 8px 0 2px; cursor: pointer; text-align: left; }
.qk-backbar:has(+ .tab-panel:not(.hidden)) { display: block; }
.qk-backbar:hover { color: var(--primary-deep); }
/* 家长只读账号只有家长专区一个面板（即其主页），面板返回条对其无意义，整体隐藏 */
body.parent-mode .qk-backbar { display: none !important; }

/* ---------- qk52 信息架构 S1：学生「更多」菜单分组标题 ----------
   不可点的小组标题（学习资料 / 资讯工具），随菜单节点一起被 qk39 的
   body 挂载 fixed 逻辑搬运；颜色走 --secondary/--border 主题变量，
   浅色/深色/护眼三主题自动适配。 */
.more-menu .more-group { display: block; padding: 8px 12px 3px; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--secondary); pointer-events: none; user-select: none; }
.more-menu .more-group:not(:first-child) { border-top: 1px solid var(--border); margin-top: 6px; }

/* ---------- qk53 信息架构 S2：家长专区二级页签 ----------
   胶囊按钮组，形态对齐站内既有分段控件 .seg-switch；颜色全走主题变量
   （--surface/--border/--ink/--primary），浅色/深色/护眼三主题自动适配。
   移动端不换行、整排横滑；页签切换只切分块显隐（见 app.js pzShowTab）。 */
.pz-tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; padding-bottom: 2px; scrollbar-width: none; }
.pz-tabs::-webkit-scrollbar { display: none; }
.pz-tabs button { flex: 0 0 auto; padding: 6px 16px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 999px; cursor: pointer; font-size: 14px; }
.pz-tabs button.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* ---------- qk54 信息架构 S3-1：学生端全局搜索 ----------
   顶栏搜索（桌面框 / 移动图标+全宽搜索行），仅 body.qk54-on（学生/家长
   登录后）显示；面板 z-index 90：高于顶栏(40)/页签栏，低于弹窗层。
   颜色全走主题变量，浅色/深色/护眼三主题自动适配。 */
.qk54-search { display: none; position: relative; flex: 0 1 300px; min-width: 180px; }
@media (min-width: 641px) { body.qk54-on .qk54-search { display: block; } }
html.layout-desktop body.qk54-on .qk54-search { display: block; }
html.layout-mobile body.qk54-on .qk54-search { display: none; }
.qk54-search input, .qk54-row input { width: 100%; box-sizing: border-box; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; }
.qk54-search input:focus, .qk54-row input:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
.qk54-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--primary-deep); cursor: pointer; font-size: 17px; }
@media (max-width: 640px) { body.qk54-on .qk54-toggle { display: inline-flex; } }
html.layout-mobile body.qk54-on .qk54-toggle { display: inline-flex; }
html.layout-desktop body.qk54-on .qk54-toggle { display: none; }
.qk54-row { display: none; position: relative; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
body.qk54-on .qk54-row.open { display: block; }
.qk54-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); z-index: 90; padding: 6px; text-align: left; }
.qk54-panel.open { display: block; }
.qk54-row .qk54-panel { left: 12px; right: 12px; }
.qk54-gtitle { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--secondary); padding: 7px 8px 2px; }
.qk54-item { display: block; width: 100%; box-sizing: border-box; text-align: left; background: none; border: none; border-radius: 8px; padding: 7px 8px; cursor: pointer; color: var(--ink); font-size: 14px; }
.qk54-item b { display: block; font-weight: 600; }
.qk54-item span { display: block; font-size: 12px; color: var(--secondary); margin-top: 1px; }
.qk54-item i { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qk54-item:hover, .qk54-item.qk54-active { background: var(--tint); }
.qk54-empty { padding: 16px 10px; text-align: center; color: var(--secondary); font-size: 14px; }
.qk54-flash { outline: 2px solid var(--primary) !important; outline-offset: 2px; }

/* qk55：报告档案管理（老师端清空按钮 danger 样式） */
.ta-danger { color: #DC2626; border-color: #DC2626; }
.ta-danger:hover { background: #FEF2F2; }
html.theme-dark .ta-danger { color: #F87171; border-color: #F87171; }
html.theme-dark .ta-danger:hover { background: #2A1717; }

/* qk56：收藏 ☆/★ 按钮（知识点本行内 / 学习卡标题旁共用） */
.fav-btn { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 2px 6px; vertical-align: middle; }
.fav-btn:hover { color: #F59E0B; }
.fav-btn.on { color: #F59E0B; }
.fav-slot { margin: 2px 0 4px; }
#wb-list .fav-btn { font-size: 17px; padding: 2px 4px; }
.wb-favonly { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* qk57：进度锚点徽标 + 个人中心草稿箱 */
.qk57-anchor-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 600; vertical-align: middle; }
.qk57-draft { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.qk57-draft:last-child { border-bottom: none; }
.qk57-draft-main { flex: 1; min-width: 0; }
.qk57-draft-main p { margin: 2px 0 0; color: var(--secondary); word-break: break-all; }
.qk57-draft-ops { display: flex; gap: 6px; flex-shrink: 0; }

/* qk58：老师端分组导航（桌面侧栏分组标题；移动端隐藏、维持单行横滑）。
   组标题默认不显示，仅 ≥1024px 侧栏形态下出现；侧栏宽度由 240/260 收窄到 190，
   并给侧栏加最大高度滚动，长屏矮屏都够得着底部页签。 */
.tnav-group { display: none; }
@media (min-width: 1024px) {
  html:not(.layout-mobile) #teacher-tabs,
  html.layout-desktop #teacher-tabs { width: 190px; flex: 0 0 190px; max-height: calc(100vh - 92px); overflow-y: auto; }
  html:not(.layout-mobile) #teacher-tabs .tnav-group,
  html.layout-desktop #teacher-tabs .tnav-group {
    display: block; padding: 12px 10px 2px; font-size: 12px; font-weight: 700;
    letter-spacing: .08em; color: var(--secondary);
  }
  html:not(.layout-mobile) #teacher-tabs .tnav-group:first-child,
  html.layout-desktop #teacher-tabs .tnav-group:first-child { padding-top: 2px; }
}

/* qk59：老师端桌面侧栏精修。图标默认隐藏、仅 ≥1024 侧栏显示（移动端横滑零影响）；
   行/组/容器精修全部关进 ≥1024 media 并沿用 qk58 布局选择器（后置同特异性胜出）。
   角标是功能元素（红 pill、>0 才显示，与 #hw-dot 同色 #DC2626）；
   角标可见时压住作业页签的旧红点，避免双提示。 */
.tnav-ic { display: none; }
.tnav-badge {
  margin-left: auto; padding: 1px 6px; border-radius: 999px;
  background: #DC2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5;
}
#teacher-tabs button:has(.tnav-badge:not(.hidden)) #hw-dot { display: none; }
@media (min-width: 1024px) {
  html:not(.layout-mobile) #teacher-tabs,
  html.layout-desktop #teacher-tabs {
    padding: 10px; gap: 2px; background: var(--surface);
    border: 1px solid var(--border); border-right: 1px solid var(--border);
  }
  html:not(.layout-mobile) #teacher-tabs button,
  html.layout-desktop #teacher-tabs button {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; min-height: 0; border: 1px solid transparent; border-radius: 10px;
    background: transparent; color: var(--ink); font-size: 14px; font-weight: 500;
    box-shadow: none;
  }
  html:not(.layout-mobile) #teacher-tabs button:hover,
  html.layout-desktop #teacher-tabs button:hover {
    background: var(--tint-soft); color: var(--primary-deep); border-color: transparent;
  }
  html:not(.layout-mobile) #teacher-tabs button.active,
  html.layout-desktop #teacher-tabs button.active {
    background: rgba(114, 155, 74, .13); color: var(--primary-deep); border-color: transparent;
    font-weight: 600; box-shadow: inset 3px 0 0 var(--primary);
  }
  html:not(.layout-mobile) #teacher-tabs .tnav-ic,
  html.layout-desktop #teacher-tabs .tnav-ic { display: block; width: 16px; height: 16px; flex: 0 0 16px; }
  html:not(.layout-mobile) #teacher-tabs .tnav-group,
  html.layout-desktop #teacher-tabs .tnav-group {
    padding: 15px 10px 4px; margin-top: 7px; border-top: 1px solid var(--border);
    font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--muted);
  }
  html:not(.layout-mobile) #teacher-tabs .tnav-group:first-child,
  html.layout-desktop #teacher-tabs .tnav-group:first-child {
    padding-top: 3px; margin-top: 0; border-top: none;
  }
}

/* ================= qk60 表格横向化 =================
   病根：多列表格在窄内容区里被 width:100% 挤压，td 默认可断字，中文逐字竖排。
   修法：表头一律不换行；宽表设 min-width 并由外层容器横向滚动；只有明确的
   长文本列（课程清单、备注、已选课程）放行换行并给保底宽度。操作列不再挤没前列。
   手机（≤640px）既有卡片化规则不变，本段只影响仍以表格形态出现的场景。 */
th { white-space: nowrap; }
.tbl-scroll { overflow-x: auto; }

/* 学生管理表（qk60 新增滚动外层 .students-table-wrap） */
.students-table-wrap { overflow-x: auto; }
.students-table { min-width: 1020px; }
.students-table th, .students-table td { white-space: nowrap; }
.students-table td:nth-child(7) { white-space: normal; min-width: 170px; }
.students-table td:nth-child(8) { white-space: normal; min-width: 320px; }

/* 账号管理表（外层 .accounts-table-wrap 既有 overflow-x:auto） */
.accounts-table { min-width: 980px; }
.accounts-table th, .accounts-table td { white-space: nowrap; }
.accounts-table td:nth-child(8) { white-space: normal; min-width: 150px; }

/* 卡密管理表（外层 .codes-table-wrap 既有 overflow-x:auto） */
.codes-table { min-width: 920px; }
.codes-table th, .codes-table td { white-space: nowrap; }

/* 教务表（外层 .edu-tbl-wrap 既有 overflow-x:auto；报名档案 11 列用宽版） */
.edu-table { min-width: 700px; }
.edu-table-wide { min-width: 1080px; }
.edu-table th, .edu-table td { white-space: nowrap; }
[id^="edu-pay-tbody-"] td:nth-child(4),
[id^="edu-les-tbody-"] td:nth-child(3),
#edu-exp-tbody td:nth-child(4) { white-space: normal; min-width: 140px; }

/* 学情总览表（#ov-table 是容器 div，内含裸 table） */
#ov-table { overflow-x: auto; }
#ov-table table { min-width: 900px; }
#ov-table th, #ov-table td { white-space: nowrap; }
#ov-table td:nth-child(2) { white-space: normal; min-width: 150px; }

/* 数据分析表 / 课程管理表（qk60 新增 .tbl-scroll 外层） */
.an-table { min-width: 780px; }
.an-table th, .an-table td { white-space: nowrap; }
.tc-table { min-width: 620px; }
.tc-table th, .tc-table td { white-space: nowrap; }

/* 学前测试记录表（#pt-list 是容器 div） */
#pt-list { overflow-x: auto; }
#pt-list table { min-width: 620px; }
#pt-list th, #pt-list td { white-space: nowrap; }

/* qk61：老师学生调试视角横幅（仅老师身份进入学生端时显示，固定在学生视图顶部） */
.qk61-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #FFF4D6; border: 1px solid #E3B341; color: #6B5310;
  border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; font-size: 13px; }
.qk61-banner button { margin-left: auto; border: 1px solid #E3B341;
  background: #fff; color: #6B5310; border-radius: 8px; padding: 4px 12px; cursor: pointer; }
html.theme-dark .qk61-banner { background: #3A2F10; border-color: #8A6D1F; color: #F2D98C; }
html.theme-dark .qk61-banner button { background: transparent; color: #F2D98C; border-color: #8A6D1F; }
html.theme-eyecare .qk61-banner { background: #F7ECD2; border-color: #D8C58F; color: #5F5226; }
html.theme-eyecare .qk61-banner button { border-color: #D8C58F; color: #5F5226; }

/* ================= qk62 题库管理 ================= */
.qb-filters { margin: 10px 0 6px; }
.qb-dd-row { display: flex; flex-wrap: wrap; gap: 8px; }
.qb-search-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.qb-search-row input { flex: 1 1 200px; }
.qb-table { min-width: 920px; }
.qb-table th { white-space: nowrap; }
.qb-table td { vertical-align: top; }
.qb-title { min-width: 260px; }
.qb-cn { color: var(--secondary); font-size: 12.5px; margin-top: 2px; }
.qb-ph { color: var(--secondary); font-size: 12.5px; margin-top: 1px; }
.qb-where { white-space: nowrap; }
.qb-unit { color: var(--secondary); font-size: 12.5px; }
.qb-tags { min-width: 130px; }
.qb-ops { white-space: nowrap; }
.qb-ops button { margin-right: 4px; }
tr.qb-off .qb-title, tr.qb-off .qb-where { opacity: .55; }
.qb-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--tint); color: var(--primary-dark); border: 1px solid #B9D1A6; margin: 1px 2px 1px 0; white-space: nowrap; }
.qb-badge-trap { background: #FEF3C7; color: #92400E; border-color: #F59E0B; }
.qb-badge-diff { background: #FEE2E2; color: #B91C1C; border-color: #F0C4BC; }
.qb-badge-fx { background: #E0E7FF; color: #3730A3; border-color: #C7D2FE; }
.qb-badge-subj { background: #F3E8FF; color: #6B21A8; border-color: #E9D5FF; }
.qb-badge-tag { background: #ECFDF5; color: #0E7A5F; border-color: #0E7A5F; }
.qb-pv-word { font-size: 30px; font-weight: 800; text-align: center; margin-top: 10px; }
.qb-pv-ph { text-align: center; color: var(--secondary); margin: 4px 0 10px; }
.qb-pv-cn { font-size: 16px; line-height: 1.7; }
.qb-pv-ex { margin-top: 10px; color: var(--secondary); line-height: 1.7; }
.qb-pv-h { margin: 14px 0 6px; }
.qb-pv-text { line-height: 1.8; white-space: pre-wrap; }
.qb-modal-btns { margin-top: 12px; text-align: right; }
html.theme-dark .qb-badge-diff { background: #3A1D1D; color: #F2B8B5; border-color: #7A3B36; }
html.theme-dark .qb-badge-fx { background: #232743; color: #C3CBF5; border-color: #4A548F; }
html.theme-dark .qb-badge-subj { background: #2E2140; color: #DCC7F5; border-color: #5F478A; }
html.theme-dark .qb-badge-tag { background: #17352C; color: #A8C686; border-color: #0E7A5F; }
/* qk64 组卷：工具条 / 篮徽标 / 篮与抽题弹层清单 / 保存行 / 试卷表 */
.qb-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 2px; }
.qb-count-badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.qb-basket-list, .qb-draw-list { max-height: 340px; overflow-y: auto; margin: 8px 0; }
.qb-mini-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #DCE5D5; }
.qb-mini-t { line-height: 1.5; }
.qb-mini-w { display: block; color: var(--secondary); font-size: 12.5px; }
.qb-save-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.qb-save-row input { flex: 1 1 220px; }
.qb-draw-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0; }
.qb-draw-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.qb-draw-form input[type="number"] { width: 90px; }
.qb-paper-table { min-width: 720px; }
.qb-paper-table th { white-space: nowrap; }
.qb-link-btn { display: inline-block; margin-right: 4px; padding: 3px 8px; text-decoration: none; }
.qb-pv-item { border-bottom: 1px dashed #DCE5D5; padding-bottom: 8px; }
.qb-pv-ex2 { color: var(--secondary); margin-top: 4px; }
html.theme-dark .qb-mini-row, html.theme-dark .qb-pv-item { border-bottom-color: #2C352D; }

/* ================= qk63：实验专区内嵌面板 =================
   #tab-exp 是纵向 flex 容器：高度 = 视口高减去外壳（顶栏+工具条+页签+返回条），
   iframe flex:1 占满剩余空间，滚动只发生在 iframe 内部，外层页面不再双滚动。 */
#tab-exp:not(.hidden) { display: flex; flex-direction: column; height: calc(100dvh - 196px); min-height: 320px; }
#exp-frame { flex: 1; width: 100%; min-height: 0; border: 0; border-radius: 12px; background: #fff; display: block; }
html.layout-mobile #tab-exp:not(.hidden) { height: calc(100dvh - 246px); }

/* ================= qk65：标记 / 笔记 / 错因 / 背诵工具条 / 错因分布 =================
   标记按钮与 qk56 收藏星标同排（.fav-slot 内并排）；选中态用橙红，
   与收藏的琥珀区分。错因小按钮为胶囊，选中填品牌绿。 */
.flag-btn { background: none; border: 1px solid transparent; border-radius: 999px; font-size: 13px; line-height: 1; cursor: pointer; color: var(--muted); padding: 3px 8px; vertical-align: middle; display: inline-flex; align-items: center; gap: 3px; }
.flag-btn .ic { width: 15px; height: 15px; }
.flag-btn:hover { color: #D3542A; border-color: #D3542A; }
.flag-btn.on { color: #D3542A; border-color: #D3542A; background: rgba(211, 84, 42, .08); font-weight: 600; }
.note-btn { background: none; border: 1px solid var(--border, #D8CFB4); border-radius: 999px; font-size: 13px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 10px; vertical-align: middle; }
.note-btn:hover { color: var(--primary-deep, #4c7031); border-color: var(--primary); }
.note-btn.on { color: var(--primary-deep, #4c7031); border-color: var(--primary); font-weight: 600; }
.qk65-tflag { margin-left: 6px; }
.qk65-qflag { margin-top: 8px; text-align: right; }
.qk65-badge { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: #FDF0E6; color: #B95A1B; border: 1px solid #EAC9A8; vertical-align: middle; margin-left: 6px; }
.qk65-badge.flag { background: #FDECEA; color: #B03A2E; border-color: #E5B4AE; }
.qk65-sum { margin: 10px 0 2px; }
.qk65-reasons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.qk65-reasons-lab { font-size: 12.5px; color: var(--muted); }
.qk65-reason-btn { border: 1px solid var(--border, #D8CFB4); background: none; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; color: inherit; }
.qk65-reason-btn:hover { border-color: var(--primary); }
.qk65-reason-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.qk65-note-text { width: 100%; min-height: 120px; box-sizing: border-box; border: 1px solid var(--border, #D8CFB4); border-radius: 10px; padding: 10px; font-size: 15px; line-height: 1.6; background: var(--surface, #fff); color: inherit; resize: vertical; }
.qk65-note-item { margin-bottom: 10px; }
.qk65-note-text-view { white-space: pre-wrap; line-height: 1.6; margin: 4px 0 8px; }
.qk65-bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.qk65-bar-lab { flex: 0 0 64px; font-size: 13.5px; }
.qk65-bar-track { flex: 1; height: 12px; border-radius: 999px; background: rgba(114, 155, 74, .15); overflow: hidden; }
.qk65-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.rv-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.rv-masked { margin-top: 8px; padding: 10px; border: 1px dashed var(--border, #D8CFB4); border-radius: 10px; text-align: center; }
html.theme-dark .qk65-badge { background: #3A2417; color: #F0C297; border-color: #7A4A21; }
html.theme-dark .qk65-badge.flag { background: #3A1D1D; color: #F2B8B5; border-color: #7A3B36; }
html.theme-dark .qk65-reason-btn { border-color: #2C352D; }
html.theme-dark .qk65-note-text { background: #161B17; border-color: #2C352D; }
html.theme-dark .rv-masked { border-color: #2C352D; }
html.theme-dark .qk65-bar-track { background: rgba(168, 198, 134, .18); }
html.theme-eyecare .qk65-note-text { background: #FBF7EA; }

/* ---------- qk67 学科深化二期 · 组件批 ---------- */
.qk67-steps { margin-bottom: 4px; }

/* 变式推送（答错反馈区） */
.qk67-var { margin-top: 10px; }
.qk67-var-title { font-size: 13.5px; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.qk67-var-title .hint { font-weight: 400; }
.qk67-var-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; margin: 0 0 6px; padding: 9px 12px; border: 1px solid var(--border, #D8CFB4); border-radius: 10px; background: var(--surface, #fff); cursor: pointer; font-size: 14.5px; color: inherit; }
.qk67-var-btn:hover { border-color: var(--primary); }
.qk67-var-go { margin-left: auto; color: var(--primary); font-size: 13px; white-space: nowrap; }

/* 历史时间轴（纵向轴 + 分段加载） */
.qk67-tl { position: relative; margin: 8px 0 4px 6px; padding-left: 18px; border-left: 2px solid var(--border, #D8CFB4); display: flex; flex-direction: column; gap: 8px; }
.qk67-tl-item { position: relative; display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; padding: 9px 12px; border: 1px solid var(--border, #D8CFB4); border-radius: 10px; background: var(--surface, #fff); cursor: pointer; color: inherit; }
.qk67-tl-item::before { content: ""; position: absolute; left: -25px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.qk67-tl-item:hover { border-color: var(--primary); }
.qk67-tl-year { flex: 0 0 auto; background: var(--primary); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; margin-top: 1px; }
.qk67-tl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qk67-tl-main b { font-size: 15px; line-height: 1.35; }
.qk67-tl-sum { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.qk67-tl-unit { font-size: 12px; color: var(--muted); }

/* 知识点对比卡 */
.qk67-cmp-bar { align-items: center; }
.qk67-cmp-cb { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.qk67-cmp-card { max-width: 960px; width: 94vw; }
.qk67-cmp-grid { display: grid; gap: 12px; }
.qk67-cmp-grid.n2 { grid-template-columns: 1fr 1fr; }
.qk67-cmp-grid.n3 { grid-template-columns: 1fr 1fr 1fr; }
.qk67-cmp-col { border: 1px solid var(--border, #D8CFB4); border-radius: 12px; padding: 12px 14px; background: var(--surface, #fff); min-width: 0; }
.qk67-cmp-col h4 { margin: 0 0 6px; font-size: 16px; line-height: 1.4; }
.qk67-cmp-ph { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.qk67-cmp-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.qk67-cmp-sec { margin: 8px 0; }
.qk67-cmp-sec p { margin: 2px 0; line-height: 1.55; font-size: 14px; }
.qk67-cmp-lab { font-size: 12px; font-weight: 700; color: var(--primary); letter-spacing: .04em; }
@media (max-width: 720px) {
  .qk67-cmp-grid.n2, .qk67-cmp-grid.n3 { grid-template-columns: 1fr; }
  .qk67-tl-item { flex-direction: column; gap: 4px; }
  .qk67-tl-item::before { top: 13px; }
}

/* 方程式默写 */
#study-modes button[data-mode="eq"]:disabled { opacity: .45; cursor: not-allowed; }

/* qk67 深色覆盖 */
html.theme-dark .qk67-var-btn { background: #161B17; border-color: #2C352D; color: #E7ECE7; }
html.theme-dark .qk67-tl { border-left-color: #2C352D; }
html.theme-dark .qk67-tl-item { background: #161B17; border-color: #2C352D; color: #E7ECE7; }
html.theme-dark .qk67-tl-sum, html.theme-dark .qk67-tl-unit { color: #A9B4A9; }
html.theme-dark .qk67-cmp-col { background: #161B17; border-color: #2C352D; color: #E7ECE7; }
html.theme-eyecare .qk67-var-btn, html.theme-eyecare .qk67-tl-item, html.theme-eyecare .qk67-cmp-col { background: #FBF7EA; }

/* qk68 学科深化三期·主观题批改闭环：作答文本域 / 批改记录区 / 老师端
   分区页签与逐点批改页。状态徽标复用 .hw-st-pending / .hw-st-graded。 */
.qk68-subj-ta { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border, #D8CFB4); border-radius: 8px; background: var(--surface, #fff); color: inherit; font: inherit; line-height: 1.6; resize: vertical; }
.qk68-subj-row { align-items: center; justify-content: space-between; margin-top: 8px; }
.qk68-pending-note { background: #FFF7E6; border: 1px solid #F0D9A8; border-radius: 8px; padding: 8px 12px; }
.qk68-subj-item { margin-bottom: 12px; }
.qk68-ans-box, .qk68-ref-box { border: 1px solid var(--border, #D8CFB4); border-radius: 8px; padding: 8px 12px; margin: 8px 0; background: var(--surface, #fff); }
.qk68-ans-label { font-size: 12px; color: var(--muted, #8a8378); margin-bottom: 4px; }
.qk68-ans-text { white-space: pre-wrap; word-break: break-word; line-height: 1.7; }
.qk68-ans-text.qk68-big { font-size: 16px; }
.qk68-points { margin: 8px 0; }
.qk68-point-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border, #D8CFB4); }
.qk68-point-score { font-weight: 600; white-space: nowrap; }
.qk68-total { font-size: 15px; margin: 8px 0; }
.qk68-comment { background: #F2F7EC; border-radius: 8px; padding: 8px 12px; }
.qk68-seg-card { padding-top: 10px; padding-bottom: 10px; }
.qk68-seg { display: inline-flex; border: 1px solid var(--border, #D8CFB4); border-radius: 999px; overflow: hidden; }
.qk68-seg button { border: 0; background: transparent; padding: 7px 16px; cursor: pointer; font: inherit; color: inherit; position: relative; }
.qk68-seg button.on { background: var(--primary, #729b4a); color: #fff; }
.qk68-seg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; margin-left: 4px; vertical-align: middle; }
.qk68-grade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0; }
.qk68-grade-col { border: 1px solid var(--border, #D8CFB4); border-radius: 8px; padding: 10px 12px; background: var(--surface, #fff); }
@media (max-width: 720px) { .qk68-grade-grid { grid-template-columns: 1fr; } }
.qk68-gp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed var(--border, #D8CFB4); }
.qk68-gp-text { flex: 1; min-width: 140px; }
.qk68-gp-btns button { margin-right: 4px; }
.qk68-gp-in { width: 76px; }
.qk68-chips { margin: 12px 0 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.qk68-chip { border: 1px solid var(--border, #D8CFB4); border-radius: 999px; background: var(--surface, #fff); padding: 4px 12px; cursor: pointer; font: inherit; color: inherit; }
.qk68-grade-single label { margin-right: 14px; }
html.theme-dark .qk68-subj-ta, html.theme-dark .qk68-ans-box, html.theme-dark .qk68-ref-box, html.theme-dark .qk68-grade-col, html.theme-dark .qk68-chip { background: #161B17; border-color: #2C352D; color: #E7ECE7; }
html.theme-dark .qk68-pending-note { background: #2A2416; border-color: #4A3F22; color: #E7ECE7; }
html.theme-dark .qk68-comment { background: #1E2A1A; color: #E7ECE7; }
html.theme-dark .qk68-point-row, html.theme-dark .qk68-gp-row { border-bottom-color: #2C352D; }
html.theme-dark .qk68-seg { border-color: #2C352D; }
html.theme-eyecare .qk68-subj-ta, html.theme-eyecare .qk68-ans-box, html.theme-eyecare .qk68-ref-box, html.theme-eyecare .qk68-grade-col, html.theme-eyecare .qk68-chip { background: #FBF7EA; }

/* qk69 虚拟实验室：模式切换 / 实验列表 / 分步播放器 / 复盘。
   #tab-exp 是定高 flex 列：模式条不收缩，内容区（册 iframe 或实验室）占余高滚动。 */
.qk69-modebar { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; }
#exp-book-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#exp-labs-wrap { flex: 1; min-height: 0; overflow-y: auto; }
#exp-labs-wrap.hidden, #exp-book-wrap.hidden { display: none; }
.qk69-group-title { margin: 14px 0 8px; font-size: 17px; }
.qk69-lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.qk69-lab-card { display: flex; flex-direction: column; gap: 8px; }
.qk69-lab-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qk69-lab-head h4 { margin: 0; font-size: 16px; }
.qk69-badges { display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.qk69-badge { font-size: 12px; border-radius: 999px; padding: 2px 10px; background: #EEF3E6; color: #45652C; border: 1px solid #C9D8B4; }
.qk69-badge.lock { background: #F5F0E4; color: #8A6D1F; border-color: #E3D3A8; }
.qk69-badge.done { background: #E6F4EA; color: #1E7A3C; border-color: #A9D6B5; }
.qk69-lab-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.qk69-dl { color: var(--primary, #729b4a); text-decoration: underline; font-size: 14px; }
.qk69-player-card { max-width: 860px; margin: 0 auto; }
.qk69-player-top { align-items: center; gap: 10px; flex-wrap: wrap; }
.qk69-progress { height: 8px; border-radius: 999px; background: #E7EBE0; overflow: hidden; margin: 10px 0 4px; }
.qk69-progress-bar { height: 100%; background: var(--primary, #729b4a); border-radius: 999px; transition: width .25s; }
.qk69-intro { background: #F6F8F1; border: 1px solid #DCE5CE; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.qk69-intro p { margin: 4px 0; }
.qk69-step-title { margin: 12px 0 6px; font-size: 17px; }
.qk69-step-text { line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.qk69-opts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.qk69-opt { text-align: left; padding: 10px 12px; border: 1px solid var(--border, #D8CFB4); border-radius: 8px; background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; line-height: 1.6; }
.qk69-opt:hover { border-color: var(--primary, #729b4a); }
.qk69-opt.right { border-color: #2E9E5B; background: #EAF7EF; }
.qk69-opt.wrong { border-color: #D9534F; background: #FDECEC; }
.qk69-opt.picked { border-color: var(--primary, #729b4a); background: #EFF5E6; font-weight: 600; }
.qk69-opt:disabled { cursor: default; opacity: .92; }
.qk69-feedback { border-radius: 8px; padding: 9px 12px; margin: 8px 0; line-height: 1.7; }
.qk69-feedback.ok { background: #EAF7EF; border: 1px solid #A9D6B5; }
.qk69-feedback.bad { background: #FDECEC; border: 1px solid #F0B4B0; }
.qk69-measure { margin: 10px 0; }
.qk69-slider-label { display: block; margin-bottom: 6px; }
.qk69-measure input[type="range"] { width: 100%; min-height: 40px; accent-color: var(--primary, #729b4a); cursor: pointer; }
.qk69-linked { font-size: 17px; margin: 6px 0 10px; }
.qk69-read-row { align-items: center; gap: 10px; flex-wrap: wrap; }
.qk69-read-row input[type="number"] { width: 130px; padding: 8px 10px; border: 1px solid var(--border, #D8CFB4); border-radius: 8px; background: var(--surface, #fff); color: inherit; font: inherit; }
.qk69-nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.qk69-table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.qk69-table th, .qk69-table td { border: 1px solid var(--border, #D8CFB4); padding: 6px 10px; text-align: left; }
.qk69-blank { margin: 12px 0; }
.qk69-blank-label { margin: 0 0 6px; font-weight: 600; }
.qk69-score { font-size: 17px; }
.qk69-review-item { border: 1px solid var(--border, #D8CFB4); border-left: 5px solid #2E9E5B; border-radius: 8px; padding: 8px 12px; margin: 8px 0; background: var(--surface, #fff); }
.qk69-review-item.bad { border-left-color: #D9534F; }
.qk69-review-item p { margin: 3px 0; line-height: 1.7; }
.qk69-cautions { line-height: 1.8; padding-left: 20px; }
@media (max-width: 720px) {
  .qk69-lab-grid { grid-template-columns: 1fr; }
  .qk69-modebar { gap: 8px; }
  .qk69-read-row input[type="number"] { width: 110px; }
}
html.theme-dark .qk69-badge { background: #1E2A1A; color: #FFFFFF; border-color: #2C352D; }
html.theme-dark .qk69-badge.lock { background: #2A2416; color: #FFFFFF; border-color: #4A3F22; }
html.theme-dark .qk69-badge.done { background: #16301F; color: #FFFFFF; border-color: #2C4A33; }
html.theme-dark .qk69-intro { background: #161B17; border-color: #2C352D; }
html.theme-dark .qk69-opt, html.theme-dark .qk69-review-item { background: #161B17; border-color: #2C352D; color: #FFFFFF; }
html.theme-dark .qk69-opt.right { background: #16301F; border-color: #2E9E5B; }
html.theme-dark .qk69-opt.wrong { background: #33191B; border-color: #D9534F; }
html.theme-dark .qk69-opt.picked { background: #1E2A1A; border-color: #729b4a; }
html.theme-dark .qk69-feedback.ok { background: #16301F; border-color: #2C4A33; color: #FFFFFF; }
html.theme-dark .qk69-feedback.bad { background: #33191B; border-color: #6E2A2E; color: #FFFFFF; }
html.theme-dark .qk69-progress { background: #2C352D; }
html.theme-dark .qk69-read-row input[type="number"] { background: #161B17; border-color: #2C352D; color: #FFFFFF; }
html.theme-dark .qk69-table th, html.theme-dark .qk69-table td { border-color: #2C352D; }
html.theme-eyecare .qk69-intro { background: #FBF7EA; border-color: #D8CFB4; }
html.theme-eyecare .qk69-opt, html.theme-eyecare .qk69-review-item { background: #FBF7EA; }
html.theme-eyecare .qk69-read-row input[type="number"] { background: #FBF7EA; }

/* ---------- qk70 学霸笔记（机制层）：纸感笔记页 + 矩阵笔记钮 ---------- */
.unit-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.unit-cell > button[data-cp-unit] { flex: 1; }
.unit-list button.qk70-note-btn {
  position: static; flex-direction: row; align-items: center; justify-content: center;
  min-height: 34px; padding: 5px 10px; font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1.5px dashed var(--border-strong); color: var(--primary-dark);
}
.unit-list button.qk70-note-btn::after { content: none; }
.unit-list button.qk70-note-btn:hover { background: var(--tint-soft); border-color: var(--primary); color: var(--primary-dark); }
.qk70-unit-note-btn {
  border: 1.5px solid #0E7A5F; color: #0E7A5F; border-radius: 999px; padding: 5px 14px;
  font-size: 13.5px; font-weight: 600; background: #fff; margin: 0; cursor: pointer;
}
.qk70-unit-note-btn:hover { background: #ECFDF5; }
.qk70-note-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.qk70-note-top .primary { margin: 0; }
.qk70-paper {
  background: #FFFDF4; border: 1px solid #E9E0C6; border-radius: 12px;
  padding: 18px 18px 8px; box-shadow: 0 1px 3px rgba(90, 80, 40, .07);
}
.qk70-title {
  margin: 0 0 4px; background: var(--primary); color: #fff; padding: 10px 14px;
  border-radius: 8px; font-size: 17px; line-height: 1.45;
}
.qk70-sec { padding: 13px 0 15px; }
.qk70-sec + .qk70-sec { border-top: 1.5px dashed #DAD0AC; }
.qk70-sec h4 {
  margin: 0 0 10px; font-size: 15.5px; color: var(--primary-dark);
  border-left: 4px solid var(--primary); padding-left: 8px;
}
.qk70-sec p { line-height: 1.75; }
.qk70-fw-item {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  margin: 0; padding: 8px 6px; background: transparent; border: none; border-radius: 0;
  border-bottom: 1px dashed #E3DAB9; box-shadow: none; font-size: 14.5px; color: inherit; cursor: pointer;
}
.qk70-fw-item:hover { background: rgba(114, 155, 74, .08); }
.qk70-fw-en { flex: 1; min-width: 0; }
.qk70-fw-go { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.qk70-kn { padding: 7px 0; }
.qk70-kn p { margin: 3px 0; }
.qk70-kn-en { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.qk70-kn-trap { border-left: 3px solid #D9534F; padding-left: 10px; }
.qk70-ex { padding: 7px 0; }
.qk70-ex-en { margin: 3px 0; }
.qk70-ex-stem { white-space: pre-wrap; line-height: 1.75; }
.qk70-ex-ana { margin-top: 6px; }
.qk70-steps { margin: 4px 0 4px 18px; padding: 0; }
.qk70-steps li { margin: 3px 0; line-height: 1.7; }
.qk70-koujue {
  text-align: center; font-size: 20px; font-weight: 700; letter-spacing: .04em;
  color: var(--primary-dark); padding: 6px 0 14px; line-height: 1.9; margin: 0;
}
@media (max-width: 480px) {
  .qk70-paper { padding: 14px 12px 4px; }
  .qk70-title { font-size: 16px; }
  .qk70-koujue { font-size: 18px; }
}
html.theme-dark .qk70-paper { background: #1E2420; border-color: #2C352D; color: #FFFFFF; box-shadow: none; }
html.theme-dark .qk70-sec + .qk70-sec { border-top-color: #2C352D; }
html.theme-dark .qk70-sec h4 { color: #A8C686; }
html.theme-dark .qk70-fw-item { border-bottom-color: #2C352D; color: #FFFFFF; }
html.theme-dark .qk70-fw-item:hover { background: rgba(168, 198, 134, .12); }
html.theme-dark .qk70-koujue { color: #A8C686; }
html.theme-dark .qk70-unit-note-btn { background: #161B17; color: #FFFFFF; border-color: #2C352D; }
html.theme-dark .unit-list button.qk70-note-btn { background: #161B17; color: #FFFFFF; border-color: #2C352D; }
html.theme-eyecare .qk70-paper { background: #FBF7EA; border-color: #D8CFB4; }
html.theme-eyecare .qk70-sec + .qk70-sec { border-top-color: #D8CFB4; }
html.theme-eyecare .qk70-fw-item { border-bottom-color: #D8CFB4; }
html.theme-eyecare .qk70-unit-note-btn { background: #FBF7EA; }

/* qk71 教务二期：班级 / 周课表网格 / 课次行 / 考勤 / 徽标 / 参考要点盒。
   颜色走全站变量，底盒在深色下压深（同 qk35/qk70 口径），护眼走米色边。 */
.qk71-subcard { margin-top: 12px; }
.qk71-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; line-height: 1.7; white-space: nowrap;
  background: rgba(114, 155, 74, .13); color: var(--primary-dark);
}
.qk71-b-cancel { background: rgba(120, 120, 120, .18); color: var(--muted); }
.qk71-b-moved { background: rgba(217, 164, 32, .18); color: #9A7200; }
.qk71-b-pending { background: rgba(217, 164, 32, .18); color: #9A7200; }
.qk71-b-rej, .qk71-low { color: #D9534F; }
.qk71-b-leave { background: rgba(70, 130, 180, .15); color: #2F6DA3; }
.qk71-sess-row {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 9px 4px; border-bottom: 1px dashed var(--border, #E3DAB9);
}
.qk71-sess-row:last-child { border-bottom: none; }
.qk71-sess-main { flex: 1; min-width: 240px; line-height: 1.8; }
.qk71-sess-main .qk71-badge { margin-left: 6px; }
.qk71-sess-ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qk71-ics { font-size: 13.5px; white-space: nowrap; }
.qk71-weeknav { align-items: center; gap: 10px; }
.qk71-leave-form { flex-basis: 100%; margin-top: 6px; }
.qk71-leave-form textarea { width: 100%; box-sizing: border-box; }
.qk71-today-card h3 { margin-top: 0; }
.qk71-weekgrid {
  display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 8px; overflow-x: auto; padding-bottom: 6px;
}
.qk71-daycol {
  background: var(--card, #fff); border: 1px solid var(--border, #E5E7EB);
  border-radius: 10px; padding: 8px; min-height: 120px;
}
.qk71-daycol.today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.qk71-dayhead { font-weight: 700; text-align: center; margin-bottom: 8px; line-height: 1.5; }
.qk71-dayhead span { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.qk71-sessblk {
  display: block; width: 100%; text-align: left; margin: 0 0 8px;
  padding: 7px 8px; font-size: 12.5px; line-height: 1.55; cursor: pointer;
  background: rgba(114, 155, 74, .10); border: 1px solid rgba(114, 155, 74, .35);
  border-radius: 8px; color: inherit; box-shadow: none;
}
.qk71-sessblk.cancelled { background: rgba(120, 120, 120, .10); border-color: rgba(120, 120, 120, .3); color: var(--muted); }
.qk71-noday { text-align: center; }
.qk71-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.qk71-table th, .qk71-table td {
  padding: 7px 8px; border-bottom: 1px solid var(--border, #E5E7EB);
  text-align: left; vertical-align: top; line-height: 1.6;
}
.qk71-table th { white-space: nowrap; }
.qk71-thsort { background: none; border: none; box-shadow: none; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; }
.qk71-picklist { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; max-height: 220px; overflow-y: auto; }
.qk71-pick { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; cursor: pointer; }
.qk71-photo { max-width: 100%; max-height: 420px; border-radius: 8px; border: 1px solid var(--border, #E5E7EB); }
.qk71-answer-box {
  margin-top: 8px; padding: 9px 11px; border-radius: 8px;
  background: rgba(114, 155, 74, .09); border: 1px solid rgba(114, 155, 74, .3);
}
.qk71-answer-box p { margin: 4px 0 0; white-space: pre-wrap; line-height: 1.7; }
.qk71-asg-row { flex-wrap: wrap; }
.tha-editbox {
  flex-basis: 100%; margin-top: 8px; padding: 10px; border-radius: 8px;
  background: rgba(114, 155, 74, .06); border: 1px dashed rgba(114, 155, 74, .4);
}
.tha-editbox textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 720px) {
  .qk71-weekgrid { grid-template-columns: repeat(7, minmax(104px, 1fr)); }
  .qk71-sess-main { min-width: 200px; }
}
html.theme-dark .qk71-daycol { background: #161B17; border-color: #2C352D; color: #FFFFFF; }
html.theme-dark .qk71-sess-row { border-bottom-color: #2C352D; }
html.theme-dark .qk71-table th, html.theme-dark .qk71-table td { border-bottom-color: #2C352D; color: #FFFFFF; }
html.theme-dark .qk71-b-moved, html.theme-dark .qk71-b-pending { color: #E8C86A; }
html.theme-dark .qk71-b-leave { color: #9CC3E5; }
html.theme-dark .qk71-answer-box { background: rgba(168, 198, 134, .10); border-color: rgba(168, 198, 134, .35); }
html.theme-dark .tha-editbox { background: rgba(168, 198, 134, .06); border-color: rgba(168, 198, 134, .35); }
html.theme-dark .qk71-photo { border-color: #2C352D; }
html.theme-eyecare .qk71-daycol { background: #FBF7EA; border-color: #D8CFB4; }
html.theme-eyecare .qk71-sess-row { border-bottom-color: #D8CFB4; }
html.theme-eyecare .qk71-table th, html.theme-eyecare .qk71-table td { border-bottom-color: #D8CFB4; }
html.theme-eyecare .qk71-photo { border-color: #D8CFB4; }

/* ---------- qk72 家长账号 polish ---------- */
/* 二次确认弹窗：复用 .modal-overlay/.modal-card，只收窄卡片宽度并抬高层级
   （盖在学习弹窗之上）；深色/护眼沿用全站 modal 变量与面板色口径。 */
#qk72-confirm-root .modal-overlay { z-index: 300; }
.qk72-confirm-card { max-width: 440px; }
.qk72-confirm-card .modal-body p { line-height: 1.7; }
.qk72-confirm-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
html.theme-dark .qk72-confirm-card { background: #161B17; color: #FFFFFF; }
html.theme-dark .qk72-confirm-card .modal-head { border-bottom-color: #2C352D; }
html.theme-eyecare .qk72-confirm-card { background: #FBF7EA; color: #3A3428; }
html.theme-eyecare .qk72-confirm-card .modal-head { border-bottom-color: #D8CFB4; }

/* ---------- qk74 知识点本「未学」标记 ---------- */
/* 淡色中性标记，与三档掌握 pill（琥珀/蓝/绿实底）区分：透明底 + 虚线边 + 弱化字，
   只出现在从没学过的条目上（learned=false），跟在掌握 pill 后面。 */
.pill.wb-unlearned {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border-strong);
  font-weight: 400;
  margin-left: 6px;
}
html.theme-dark .pill.wb-unlearned {
  color: rgba(255, 255, 255, .55);
  border-color: #2C352D;
}
html.theme-eyecare .pill.wb-unlearned {
  color: #8A7F63;
  border-color: #D8CFB4;
}

/* ---------- qk77 背单词专区（#tab-words） ----------
   状态条 + 词库课卡片两列网格（移动单列）；状态 pill 与选课页
   spine-tag 同色系；深色/护眼逐档补覆盖，口径同 qk35/qk42。 */
.wz-status { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wz-status-main { display: flex; flex-direction: column; gap: 2px; }
.wz-status-main span { color: var(--secondary); font-size: 14px; }
.wz-status-side { display: flex; align-items: center; gap: 10px; }
.wz-group { margin: 18px 0 8px; }
.wz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .wz-grid { grid-template-columns: 1fr; } }
.wz-card { margin: 0; }
.wz-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.wz-meta { margin: 4px 0 8px; }
.wz-bar { height: 8px; border-radius: 99px; background: var(--border, #E2E8F0); overflow: hidden; }
.wz-bar > span { display: block; height: 100%; background: var(--primary, #729B4A); border-radius: 99px; }
.wz-prog { margin: 6px 0 10px; }
.pill.wz-none { background: #EEF1EA; color: #5A6B5A; }
.pill.wz-trial { background: #FDEECB; color: #7A5C00; }
.pill.wz-active { background: #DCEBD2; color: #2F5D1F; }
.pill.wz-expired { background: #FBE3DE; color: #A93A2A; }
.spine-tag.tag-vocab { background: #E3E8F7; color: #33509E; }
html.theme-dark .pill.wz-none { background: #1E2420; color: #FFFFFF; }
html.theme-dark .pill.wz-trial { background: #2E2712; color: #EBCB8B; }
html.theme-dark .pill.wz-active { background: #22331E; color: #A8C686; }
html.theme-dark .pill.wz-expired { background: #33201B; color: #F0A08D; }
html.theme-dark .spine-tag.tag-vocab { background: #1D2742; color: #A9BDF0; }
html.theme-eyecare .pill.wz-none { background: #F1EAD3; color: #6B6046; }
html.theme-eyecare .pill.wz-trial { background: #F7E7BE; color: #7A5C00; }
html.theme-eyecare .pill.wz-active { background: #E4EBCB; color: #46601F; }
html.theme-eyecare .pill.wz-expired { background: #F6DCD2; color: #9C3A28; }
html.theme-eyecare .spine-tag.tag-vocab { background: #E6E4D2; color: #4A5B8C; }

/* ---------- qk78 选课页三级级联下拉（一本书原则） ----------
   级联：学科 → 学段 → 册次（站内 qk31 dd 组件；上级未选时下级为禁用态同款按钮）。
   移动端纵向排列（390px 一屏内完成三级选择并看到书卡主体），≥1024 三列排布。
   选中后只呈现一本书的大卡（居中限宽），不再有卡片墙。
   颜色走 CSS 变量与 qk77 同色系 pill，深色/护眼逐档补覆盖，不改其它页面的 dd 样式。 */
.qk78-cascade { display: grid; grid-template-columns: 1fr; gap: 2px 12px; margin-top: 10px; }
.qk78-cascade .qk31-dd { min-width: 0; margin: 4px 0; }
@media (min-width: 1024px) { .qk78-cascade { grid-template-columns: repeat(3, 1fr); } }
.qk78-dd-off .qk31-dd-btn { opacity: .55; cursor: not-allowed; }
.qk78-dd-off .qk31-dd-btn:hover { border-color: var(--border); }
#xuan-book { margin-top: 12px; }
.qk78-guide {
  border: 1.5px dashed var(--border); border-radius: 12px;
  padding: 18px 14px; text-align: center; background: var(--surface);
}
.qk78-guide-t { font-weight: 700; font-size: 16px; margin: 0 0 6px; color: var(--ink); }
.qk78-guide .hint { margin: 0; }
.qk78-book { max-width: 720px; margin: 0 auto; }
.qk78-book-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qk78-book-name { margin: 0; font-size: 20px; word-break: break-word; }
.qk78-badges { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.pill.qk78-st-none { background: #EEF1EA; color: #5A6B5A; }
.pill.qk78-st-trial { background: #FDEECB; color: #7A5C00; }
.pill.qk78-st-active { background: #DCEBD2; color: #2F5D1F; }
.pill.qk78-st-expired { background: #FBE3DE; color: #A93A2A; }
.pill.qk78-vocab { background: #E3E8F7; color: #33509E; }
.qk78-book-meta { margin: 6px 0 2px; }
.qk78-book-valid { margin: 2px 0; }
.qk78-bar { height: 8px; border-radius: 99px; background: var(--border, #E2E8F0); overflow: hidden; margin-top: 10px; }
.qk78-bar > span { display: block; height: 100%; background: var(--primary, #729B4A); border-radius: 99px; }
.qk78-book-prog { margin: 6px 0 0; }
.qk78-book-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.qk78-book-actions button { margin: 0; }
.qk78-book-actions button[disabled] { opacity: .45; cursor: not-allowed; }
.qk78-book-actions .hint { margin: 0; }
.qk78-below { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
@media (min-width: 1024px) { .qk78-below { grid-template-columns: 1fr 1fr; align-items: start; } }
.qk78-below.single { grid-template-columns: 1fr; }
.qk78-below .xuan-side, .qk78-below .xuan-filter { flex: none; position: static; max-height: none; overflow: visible; }
html.theme-dark .qk78-guide { background: #161B17; border-color: #2C352D; }
html.theme-dark .qk78-guide-t { color: #FFFFFF; }
html.theme-dark .pill.qk78-st-none { background: #1E2420; color: #FFFFFF; }
html.theme-dark .pill.qk78-st-trial { background: #2E2712; color: #EBCB8B; }
html.theme-dark .pill.qk78-st-active { background: #22331E; color: #A8C686; }
html.theme-dark .pill.qk78-st-expired { background: #33201B; color: #F0A08D; }
html.theme-dark .pill.qk78-vocab { background: #1D2742; color: #A9BDF0; }
html.theme-eyecare .qk78-guide { background: #FBF7EA; border-color: #D8CFB4; }
html.theme-eyecare .pill.qk78-st-none { background: #F1EAD3; color: #6B6046; }
html.theme-eyecare .pill.qk78-st-trial { background: #F7E7BE; color: #7A5C00; }
html.theme-eyecare .pill.qk78-st-active { background: #E4EBCB; color: #46601F; }
html.theme-eyecare .pill.qk78-st-expired { background: #F6DCD2; color: #9C3A28; }
html.theme-eyecare .pill.qk78-vocab { background: #E6E4D2; color: #4A5B8C; }

/* ---------- qk80 学科贴：首页选学科卡片（平铺彩贴，替下拉） ---------- */
.qk80-card h3 { font-size: 19px; margin-bottom: 2px; }
.qk80-sub { margin: 0 0 10px; }
.qk80-chips { gap: 10px; margin: 4px 0 6px; }
.qk80-chip { padding: 10px 18px; font-size: 16px; border-radius: 14px; background: var(--card, #fff); border-color: var(--border, #CBD5E1); color: var(--text, #374151); transition: border-color .15s, background .15s, transform .1s; }
.qk80-chip .subj-dot { width: 11px; height: 11px; }
.qk80-chip:hover { transform: translateY(-1px); }
.qk80-chip.on { border-color: var(--primary, #729b4a); background: #EFF6E4; color: #3E601F; font-weight: 700; box-shadow: 0 1px 4px rgba(114,155,74,.25); }
.qk80-check { font-weight: 700; color: var(--primary, #729b4a); }
.qk80-sel { margin: 2px 0 0; }
html.theme-dark .qk80-chip { background: #1E2420; border-color: #2C352D; color: #FFFFFF; }
html.theme-dark .qk80-chip.on { background: #26331F; border-color: #A8C686; color: #FFFFFF; }
html.theme-dark .qk80-check { color: #A8C686; }
html.theme-eyecare .qk80-chip { background: #FBF7EA; border-color: #D8CFB4; color: #3A3428; }
html.theme-eyecare .qk80-chip.on { background: #EDF2D8; border-color: #729b4a; color: #3E601F; }

/* ---------- qk82 听词磨耳朵（#tab-ear） ----------
   来源 chips + 路线/模式/语速 segmented（复用 .qk68-seg）+ 步进器
   + 大字播放器 + 听过的词表。颜色走 CSS 变量与 qk77/qk80 同色系，
   深色/护眼逐档补覆盖；390px 单列不溢出（chips 与按钮行均可换行）。 */
.ear-card .ear-h { margin: 14px 0 6px; }
.ear-card .ear-h:first-of-type { margin-top: 4px; }
.ear-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.ear-chip { border: 1.5px solid var(--border, #CBD5E1); background: var(--surface, #fff); color: inherit; border-radius: 999px; padding: 7px 15px; cursor: pointer; font: inherit; font-size: 15px; }
.ear-chip:hover { border-color: var(--primary, #729b4a); }
.ear-chip.on { border-color: var(--primary, #729b4a); background: #EFF6E4; color: #3E601F; font-weight: 700; }
.ear-count { margin: 8px 0 0; font-weight: 700; }
.ear-note { margin: 2px 0 0; }
.ear-setrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.ear-stepper { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.ear-stepper button { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--border, #CBD5E1); background: transparent; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; }
.ear-stepper b { min-width: 52px; text-align: center; }
.ear-toggle { border: 1.5px solid var(--border, #CBD5E1); background: var(--surface, #fff); color: inherit; border-radius: 999px; padding: 7px 15px; cursor: pointer; font: inherit; font-size: 15px; }
.ear-toggle.on { border-color: var(--primary, #729b4a); background: #EFF6E4; color: #3E601F; font-weight: 700; }
.ear-timer-dd { display: inline-block; min-width: 170px; }
.ear-timer-left { color: var(--secondary); font-variant-numeric: tabular-nums; }
.ear-player .ear-now { text-align: center; padding: 10px 4px 4px; }
.ear-now-en { font-size: 38px; font-weight: 800; line-height: 1.2; word-break: break-word; }
.ear-now-ph { color: var(--secondary); font-size: 17px; margin-top: 2px; min-height: 22px; }
.ear-now-cn { font-size: 21px; margin-top: 6px; }
.ear-now-ex { color: var(--secondary); font-size: 15.5px; margin-top: 6px; }
.ear-bar { margin-top: 12px; }
.ear-prog { text-align: center; margin: 6px 0 0; }
.ear-transport { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ear-play-btn { padding: 10px 28px; font-size: 16px; }
.ear-status { text-align: center; margin: 8px 0 0; min-height: 20px; }
.ear-his-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ear-his-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.ear-his-item { padding: 8px 2px; border-bottom: 1px dashed var(--border, #E2E8F0); }
.ear-his-main b { font-size: 16.5px; }
.ear-his-ph { color: var(--secondary); margin-left: 8px; }
.ear-his-cn { margin-left: 8px; }
.ear-his-ex { color: var(--secondary); font-size: 14px; margin-top: 2px; }
@media (max-width: 640px) {
  .ear-now-en { font-size: 30px; }
  .ear-timer-dd { min-width: 150px; }
}
html.theme-dark .ear-chip { background: #1E2420; border-color: #2C352D; color: #FFFFFF; }
html.theme-dark .ear-chip.on { background: #26331F; border-color: #A8C686; color: #FFFFFF; }
html.theme-dark .ear-toggle { background: #1E2420; border-color: #2C352D; color: #FFFFFF; }
html.theme-dark .ear-toggle.on { background: #26331F; border-color: #A8C686; color: #FFFFFF; }
html.theme-dark .ear-stepper button { border-color: #2C352D; color: #FFFFFF; }
html.theme-eyecare .ear-chip { background: #FBF7EA; border-color: #D8CFB4; color: #3A3428; }
html.theme-eyecare .ear-chip.on { background: #EDF2D8; border-color: #729b4a; color: #3E601F; }
html.theme-eyecare .ear-toggle { background: #FBF7EA; border-color: #D8CFB4; color: #3A3428; }
html.theme-eyecare .ear-toggle.on { background: #EDF2D8; border-color: #729b4a; color: #3E601F; }
html.theme-eyecare .ear-stepper button { border-color: #D8CFB4; color: #3A3428; }

/* ---------- R1 顶栏两态 + 登录页极简（体验重构第一批） ---------- */
/* 未登录态公开菜单：只在未登录（body 无 qx-in）时出现在顶栏中部；
   登录后整体让位，顶栏只剩品牌 + 身份区（见 renderUserbox）。 */
#topnav-public { display: none; }
body:not(.qx-in) #topnav-public { display: flex; flex: 1 1 auto; justify-content: center; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
#topnav-public::-webkit-scrollbar { display: none; }
#topnav-public a { flex: none; padding: 7px 12px; border-radius: 999px; color: #374151; text-decoration: none; font-size: 15px; white-space: nowrap; }
#topnav-public a:hover { color: var(--primary-dark); }
#topnav-public a.on { color: var(--primary-dark); font-weight: 700; background: #F2F7EA; }
body:not(.qx-in) .brand { flex: 0 1 auto; }
@media (max-width: 900px) { body:not(.qx-in) #topnav-public { display: none; } }
/* 顶栏右端两态 */
#userbox { display: flex; align-items: center; gap: 8px; }
.ub-login-btn { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.ub-login-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
/* qk87b：登录页（body.qx-onlogin）顶栏隐藏【学员登录】——人已在登录页，自指冗余；
   公开页的同名按钮由 pubnav.js 呈现，不走 SPA 的 #userbox，此规则不影响公开页。 */
body.qx-onlogin #ub-login { display: none; }
.ub-chip { display: inline-flex; align-items: center; gap: 7px; }
span.ub-chip { min-height: 36px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; font-weight: 500; }
.ub-avatar { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ub-name { font-weight: 600; white-space: nowrap; }
.ub-badge { flex: none; font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 999px; background: #F2F7EA; color: var(--primary-deep); }
.ub-logout { flex: none; }
/* 历史账号常驻可选行（登录卡内） */
.hist-rows { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; text-align: left; }
.hist-rows[hidden] { display: none; }
.hist-rows-cap { margin: 0 0 2px; font-size: 12.5px; color: var(--secondary); }
.hist-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--tint-soft); cursor: pointer; }
.hist-row:hover, .hist-row:focus-visible { border-color: var(--primary); outline: none; }
.hist-row-name { font-weight: 600; font-size: 15px; }
.hist-row-x { margin-left: auto; width: 26px; height: 26px; min-height: 0; padding: 0; border: none; background: transparent; color: var(--secondary); font-size: 16px; line-height: 1; border-radius: 50%; box-shadow: none; }
.hist-row-x:hover { color: var(--danger-ink); border: none; background: rgba(0,0,0,.05); }
.login-history .hist-item .ub-badge { margin-left: 6px; }
/* 报错贴字段下方（密码框与登录按钮之间），空时不占位 */
.login-card #login-error { margin: 2px 0 10px; text-align: left; }
.login-card #login-error:empty { display: none; }
/* 横屏矮屏（844×390 等）：顶栏与登录卡收紧，保证正文/登录卡露出 */
@media (max-height: 480px) {
  #topbar { padding-top: 6px; padding-bottom: 6px; }
  .login-card { margin-top: 12px; margin-bottom: 12px; padding-top: 18px; padding-bottom: 18px; }
}
/* 深色主题跟随 */
html.theme-dark #topnav-public a { color: #9AA79B; }
html.theme-dark #topnav-public a.on { background: #22331E; color: #A8C686; }
html.theme-dark .ub-badge { background: #22331E; color: #A8C686; }
html.theme-dark .hist-row { background: #161B17; border-color: #2C352D; }
html.theme-dark .hist-row-x:hover { background: rgba(255,255,255,.08); }