/* ============================================================
   2026-10-31 空灵风换肤（用户口径：神性、玄境、空灵、孤独宁静、内心平和充盈）
   参考云海晨光图重定全站色板：
   · 底色从冷灰蓝 → 奶油暖白，正文换暖棕灰；
   · 主色从冷蓝 → 晨光琥珀金（按钮 / 链接 / 页签高亮），语义色（绿=对、红=错、橙=警）不变；
   · 阴影换成暖色柔光；body 铺极淡的云霞渐变。
   登录 / 注册页另铺全屏云海大图（body.wb-auth，见文件末尾「空灵登录页」一节）。
   ============================================================ */
:root {
  /* 2026-10-31 下午「清透薄雾感」：面板底色改半透明白（叠加在云霞渐变 body 上），
     边线同步调淡 —— 卡片像蒙了一层薄雾玻璃，而不是实心白块。 */
  --bg: #faf6f1;
  --surface: rgba(255, 254, 252, .74);
  --surface-2: rgba(249, 243, 235, .8);
  --line: rgba(228, 209, 186, .6);
  --line-strong: rgba(204, 183, 156, .72);
  --text: #2b241c;
  --text-2: #6b5e4f;
  --muted: #9c8d7a;
  --primary: #a8763e;
  --primary-dark: #845a2a;
  --primary-soft: #f8efdf;
  --ok: #0d8f61;
  --ok-soft: #e4f6ee;
  --warn: #b8761a;
  --warn-soft: #fdf3e2;
  --danger: #c93b52;
  --danger-soft: #fdeaee;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(120, 88, 44, .05), 0 10px 30px -12px rgba(168, 118, 62, .18);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background:
    linear-gradient(180deg, #fdf9f3 0%, #f9efe6 34%, #f6e9e4 62%, #f7f1ea 100%) fixed,
    var(--bg);
  color: var(--text);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 10px; }

/* ---------- shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 1180px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(135deg, #e5b678, var(--primary));
  color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.topbar-sp { flex: 1 1 auto; }
.user-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: 13px; max-width: 260px;
}
.avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  background: var(--primary-soft); color: var(--primary-dark);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.user-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-tag {
  font-size: 11px; padding: 1px 7px; border-radius: 999px; flex: 0 0 auto;
  background: var(--primary-soft); color: var(--primary-dark); font-weight: 600;
}
.role-tag.teacher { background: var(--ok-soft); color: var(--ok); }
.role-tag.admin { background: var(--warn-soft); color: var(--warn); }
.role-tag.editor { background: var(--primary-soft); color: var(--primary-dark); }

.tabbar { border-bottom: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(14px) saturate(1.12); -webkit-backdrop-filter: blur(14px) saturate(1.12); position: relative; z-index: 60; }
.tabbar-in {
  max-width: 1180px; margin: 0 auto; padding: 0 12px;
  display: flex; gap: 2px; flex-wrap: wrap;
  /* ⚠️ 2026-10-15：这里原来是 overflow-x:auto —— 它会把一级菜单的下拉面板**裁掉**
     （overflow 一个方向非 visible 时，另一个方向会被算成 auto）。菜单改成分组下拉后
     必须放开；横排项已压到 5~6 个，窄屏改成换行即可，不会溢出。 */
}
.tabbar-in::-webkit-scrollbar { display: none; }
.tabbar a {
  padding: 11px 12px; font-size: 14px; color: var(--text-2); white-space: nowrap;
  border-bottom: 2px solid transparent; text-decoration: none;
}
.tabbar a:hover { color: var(--text); text-decoration: none; }
.tabbar a.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
/* 后台顶栏最左的「← 返回主站」：它不是后台功能页签，是一条退路，所以单独摘出来 */
.tabbar a.back-tab {
  color: var(--primary); font-weight: 650; padding-left: 4px; margin-right: 10px;
  border-right: 1px solid var(--line); padding-right: 16px;
}
.tabbar a.back-tab:hover { color: var(--primary); opacity: .82; }

/* ---- 一级菜单的下拉分组（2026-10-15 菜单改版）----
   横排只放「分类」，同类页面收进 .nav-dd-m 面板：
     · 桌面：鼠标悬停即开（:hover），移出自动收起（JS 也绑了 mouseleave 兜底）；
     · 触屏 / 键盘：点 .nav-dd-t 切换 .open；点面板外或按 Esc 收起。 */
.nav-dd { position: relative; display: inline-flex; flex: 0 0 auto; }
.nav-dd-t {
  padding: 11px 12px; font-size: 14px; color: var(--text-2); white-space: nowrap;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.nav-dd-t:hover { color: var(--text); }
.nav-dd.has-on > .nav-dd-t,
.nav-dd-t.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.nav-dd-c { font-style: normal; font-size: 10px; opacity: .7; transform: translateY(1px); }
.nav-dd-m {
  position: absolute; top: 100%; left: 0; min-width: 172px; z-index: 70;
  display: none; flex-direction: column; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 24, 40, .14);
}
.nav-dd:hover > .nav-dd-m,
.nav-dd.open > .nav-dd-m { display: flex; }
.nav-dd-m .nav-dd-i {
  padding: 9px 10px; font-size: 14px; color: var(--text-2); white-space: nowrap;
  border: 0; border-bottom: 0; border-radius: 8px; text-decoration: none;
}
.nav-dd-m .nav-dd-i:hover { color: var(--primary-dark); background: var(--primary-soft); }
.nav-dd-m .nav-dd-i.on { color: var(--primary); font-weight: 600; background: var(--primary-soft); }
/* 靠右的分类（资源中心 / 用户与权限）：面板改成右对齐，别顶出屏幕外 */
.nav-dd:last-child .nav-dd-m { left: auto; right: 0; }

/* ---- 板块目录的**方格面板**（2026-10-15）：15 个板块 3 行 5 列平铺，
       替代原来一条拉很长的竖列表 ---- */
.nav-dd-grid > .nav-dd-m {
  min-width: 0; width: min(720px, calc(100vw - 28px)); padding: 10px; gap: 8px;
  flex-direction: column;
}
.nav-grid-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.nav-grid-load { padding: 10px; font-size: 12.5px; color: var(--muted); grid-column: 1 / -1; }
.nav-grid-foot {
  display: flex; gap: 14px; padding-top: 8px; margin-top: 2px;
  border-top: 1px solid var(--line); font-size: 12.5px;
}
.nav-grid-foot a { color: var(--primary); text-decoration: none; }
.nav-grid-foot a:hover { text-decoration: underline; }
/* ---- 「课程总览」下拉的三大类汇总（2026-11-01 夜，用户口径）：
       鼠标放上去只显示三大类 + 各自的科目数量与课程总数（课程数含课程、习题、模拟）。
       每行整幅铺满（grid-column 跨满），不再是一片板块方格。 ---- */
.nav-cat {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .15s, background .15s;
}
.nav-cat + .nav-cat { margin-top: 0; }
.nav-cat:hover { border-color: var(--primary); background: var(--primary-soft); }
.nav-cat b { font-size: 14px; font-weight: 650; flex: 0 0 auto; }
.nav-cat b i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.nav-cat .nav-cat-n { margin-left: auto; text-align: right; font-size: 12px; color: var(--muted); line-height: 1.55; white-space: nowrap; }
.nav-cat .nav-cat-n b { font-size: 13.5px; color: var(--primary-dark); font-weight: 650; flex: none; }
.nav-cat.zone:hover { border-color: #8B7BA5; background: #F7F4FA; }
.nav-cat.gen:hover { border-color: #C79A5B; background: #FBF6EE; }
.nav-cat.ig:hover { border-color: #3E6E9E; background: #F2F7FB; }
.nav-cats-note { grid-column: 1 / -1; padding: 2px 2px 0; font-size: 11.5px; color: var(--muted); }
/* 三大类汇总面板比板块方格窄（只放三行） */
.nav-dd-cats > .nav-dd-m { width: min(440px, calc(100vw - 28px)); }
/* 后台顶部「老师与学生」下拉里的老师名单（2026-10-21） */
.nav-tch-list { max-height: 320px; overflow: auto; padding: 6px; }
.nav-tch { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 8px;
  color: var(--fg); text-decoration: none; white-space: nowrap; }
.nav-tch:hover { background: var(--hover); }
.nav-tch b { font-size: 14px; }
.nav-tch span { font-size: 12px; color: var(--muted); }
.nav-cell {
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  padding: 9px 6px; text-align: center; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 58px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.nav-cell b { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.nav-cell span { font-size: 11.5px; color: var(--muted); }
.nav-cell:hover {
  border-color: var(--primary); color: var(--primary);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .13); transform: translateY(-1px);
}
.nav-cell.building { background: var(--surface-2); opacity: .66; cursor: help; }
.nav-cell.building:hover { border-color: var(--line-strong); box-shadow: none; transform: none; }
/* 学生视角的「已开通 / 试读 10%」角标（2026-10-25） */
.nav-cell.mine { border-color: var(--ok, #16a34a); background: var(--ok-soft, #f0fdf4); }
/* 老师视角：分配给你的板块描绿 + 挂「教学」（2026-10-28 用户口径「他能见的显示教学」）。
   顶栏方格 / 板块目录方格 / 随便逛逛小卡三处同一套配色，哪个是自己的板块一眼可辨。 */
.nav-cell.teach, .kb-cell.teach, .mini-kb.teach {
  border-color: var(--ok, #16a34a);
  background: var(--ok-soft, #f0fdf4);
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .16);
}
/* 小卡没有边框，用内描边代替（2px 才看得出来） */
.mini-kb.teach { box-shadow: inset 0 0 0 2px rgba(22, 163, 74, .5); }
.nav-cell.teach:hover, .kb-cell.teach:hover { border-color: #15803d; box-shadow: 0 6px 16px rgba(22, 163, 74, .18); }
.nav-cell .tag { font-size: 10.5px; padding: 1px 6px; line-height: 1.4; }
/* 顶栏板块目录面板：**等高**方格（2026-10-28 用户口径「板块的大小要均匀」）。
   板块数按合并后的格数算（考研、专四 / 专八 各占一格）= 16 格 → 4 行 × 4 列正好铺满。 */
.nav-grid-in { grid-auto-rows: 1fr; align-items: stretch; }
.nav-grid-in > .nav-cell { height: 100%; }
@media (min-width: 760px) {
  .nav-grid-in { grid-template-columns: repeat(5, 1fr); }   /* 3 行 × 5 列 = 15 个板块格（合并组只占一格） */
}

/* ---- 国际课程下拉面板（2026-11-01 用户口径）：十二门主课 **4 列 × 3 行** 对齐排满。
       面板收窄到 620px，单格宽度与「板块目录」（720 / 5 列）基本一致，两张格子手感统一；
       末尾两门（进阶数学 / 英语文学）先挂目录、标「排课中」，格子照样等高不塌。 ---- */
.nav-dd-m[data-grid="ig"] { width: min(620px, calc(100vw - 28px)); }
.nav-dd-m[data-grid="ig"] .nav-grid-in { grid-template-columns: repeat(var(--ig-cols, 4), 1fr); }
.nav-cell.soon { background: var(--surface-2); border-style: dashed; }
@media (max-width: 560px) {
  .nav-dd-m[data-grid="ig"] .nav-grid-in { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 板块目录页的方格卡（与顶栏面板同一口径：4 列 × 4 行等高）---- */
.kb-cell {
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: 12px 8px 11px; min-height: 92px; height: 100%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kb-cell.go:hover {
  border-color: var(--primary); box-shadow: 0 6px 16px rgba(37, 99, 235, .14); transform: translateY(-2px);
}
.kb-cell-no { font-size: 11px; color: var(--muted); }
.kb-cell-nm { font-size: 15px; font-weight: 700; line-height: 1.2; }
.kb-cell-n { font-size: 12px; color: var(--text-2); }
.kb-cell-sk { display: flex; gap: 4px; margin-top: 2px; }
.kb-cell-sk i {
  font-style: normal; font-size: 10.5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 4px;
}
.kb-cell-sk i.on { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.kb-cell.building { background: var(--surface-2); opacity: .62; cursor: help; }
.kb-cell.building:hover { border-color: var(--line-strong); box-shadow: none; transform: none; }
/* 合并组（考研 = 英语一 + 英语二）：一格之内两块，各自可点进自己的目录 */
.kb-cell-kids, .nav-cell-kids {
  display: flex; gap: 4px; align-items: center; justify-content: center; flex-wrap: wrap;
  font-size: 11px; line-height: 1.3; margin-top: 2px;
}
.kb-cell-kids i, .nav-cell-kids i { font-style: normal; color: var(--line-strong); }
.kb-cell-kids a, .nav-cell-kids a {
  color: var(--primary); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; text-decoration: none; font-weight: 600;
}
.kb-cell-kids a:hover, .nav-cell-kids a:hover { background: var(--primary-soft); border-color: var(--primary); }

.main { max-width: 1180px; margin: 0 auto; padding: 18px 16px 64px; }

.page-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head .sub { color: var(--muted); font-size: 13px; }
.page-head .sp { flex: 1 1 auto; }

/* ---------- surfaces ---------- */
/* 2026-10-31 薄雾感：主要面板统一磨砂玻璃（backdrop blur 把 body 云霞渐变晕成柔雾） */
.card, .kpi, .entry, .mini-kb, .kb-card, .enr-board {
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
}
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px;
}
.card.tight { padding: 13px; }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-h .sp { flex: 1 1 auto; }
.card-h .hint { color: var(--muted); font-size: 12px; }

.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: 1fr; }
.g3 { grid-template-columns: 1fr; }
.g4 { grid-template-columns: repeat(2, 1fr); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 760px) {
  .g2 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- controls ---------- */
.btn {
  appearance: none; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); border-radius: 9px; padding: 8px 13px; font-size: 14px; font-weight: 550;
  cursor: pointer; font-family: inherit; line-height: 1.35; transition: .14s;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); color: #fff; }
.btn.ghost { border-color: transparent; background: var(--surface-2); }
.btn.ghost:hover { background: var(--primary-soft); border-color: transparent; }
.btn.danger { color: var(--danger); border-color: #f0c3cc; }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn.sm { padding: 4px 9px; font-size: 12.5px; border-radius: 7px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.link { border: none; background: none; color: var(--primary); padding: 2px 4px; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.field > span { font-size: 12.5px; color: var(--text-2); font-weight: 550; }
.field .tip { font-size: 12px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: 9px; padding: 8px 11px; font: inherit; font-size: 14px; color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 91, 234, .13);
}
textarea { resize: vertical; min-height: 90px; line-height: 1.65; }
select { cursor: pointer; }
label.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer; }
label.chk input { margin-top: 4px; flex: 0 0 auto; }

/* ---------- data ---------- */
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; }
.kpi .k { font-size: 12px; color: var(--muted); }
.kpi .v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.kpi .v small { font-size: 13px; font-weight: 500; color: var(--muted); }

/* KPI 卡的补充小字（2026-10-15：学习总览里的「已完成 x · 在学 y」这类副说明） */
.kpi .kpi-x { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* ---------- 管理后台工作台（2026-10-16 重设计）---------- */
/* 待办卡片：整卡可点，有数量角标 */
a.todo {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 15px; color: var(--text);
  text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.todo:hover { border-color: var(--primary); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-1px); }
a.todo.hot { border-color: #f0c36d; background: var(--warn-soft); }
a.todo .todo-n { font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: var(--text); line-height: 1.1; }
a.todo.hot .todo-n { color: var(--warn); }
a.todo .todo-t { font-size: 14px; font-weight: 650; margin-top: 5px; }
a.todo .todo-d { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
a.todo .todo-go { font-size: 12.5px; font-weight: 600; color: var(--primary); margin-top: 8px; }

/* 可点击的 KPI */
a.kpi-link { display: block; color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.kpi-link:hover { border-color: var(--primary); box-shadow: var(--shadow); text-decoration: none; }
a.kpi-link:hover .v { color: var(--primary); }

/* 职能分区导航卡：一区一卡，入口两行式（标题 + 说明） */
.navg-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.navg-l a {
  display: block; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; text-decoration: none; transition: border-color .15s, background .15s;
}
.navg-l a:hover { border-color: var(--primary); background: var(--primary-soft); text-decoration: none; }
.navg-l a b { display: block; font-size: 13.5px; font-weight: 650; color: var(--text); }
.navg-l a span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; line-height: 1.45; }

/* ---- 学习总览：各板块 AI 错题分析报告（图文卡）---- */
.rp-card { margin-bottom: 14px; }
.rp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rp-head .rp-title { font-size: 16px; font-weight: 700; }
.rp-head .rp-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.rp-kpis { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.rp-fig { min-width: 0; }
.rp-fig-t { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.rp-hb { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rp-hb-t {
  flex: 0 0 42%; font-size: 12.5px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-hb-bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rp-hb-bar > i { display: block; height: 100%; border-radius: 999px; background: #d9534f; opacity: .85; }
.rp-hb-n { flex: 0 0 34px; text-align: right; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.rp-md { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.rp-ai-h { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.rp-ring-row { display: flex; align-items: center; gap: 14px; }
.rp-ring-txt { font-size: 13px; line-height: 1.8; color: var(--text-2); }
@media (max-width: 760px) {
  .rp-figs { grid-template-columns: 1fr; }
  .rp-hb-t { flex: 0 0 50%; }
}

.bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s; }
.bar.ok > i { background: var(--ok); }

.tag {
  display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2); font-weight: 550;
}
.tag.blue { background: var(--primary-soft); color: var(--primary-dark); }
.tag.green { background: var(--ok-soft); color: var(--ok); }
.tag.amber { background: var(--warn-soft); color: var(--warn); }
.tag.red { background: var(--danger-soft); color: var(--danger); }

/* ---------- 知识库：子板块（听 / 说 / 读 / 写）与难度阶梯 ---------- */
.tag.sk { font-weight: 650; }
.tag.sk-listening { background: #e7f1ff; color: #1b5fb8; }
.tag.sk-speaking { background: #e7f1ee; color: #3d6b67; }
.tag.sk-reading { background: var(--ok-soft); color: #0a7a52; }
.tag.sk-writing { background: #fdeede; color: #a2620f; }
/* 成长营两个子板块：讲课区 / 做题区（暖色系，跟成长营卡的橘红同一家族，但更深更稳） */
.tag.sk-teach { background: #F6D6BE; color: #8A3A15; }
.tag.sk-drill { background: #FBE3D4; color: #993C1D; }
.tag.df { background: var(--surface-2); color: var(--text-2); }
.tag.df-1 { background: #eaf3ff; color: #2a5db0; }
.tag.df-2 { background: var(--warn-soft); color: #96601a; }
.tag.df-3 { background: var(--danger-soft); color: #a8293d; }

/* ---------- 沐晓独家模拟题（挂在 听/说/读/写 每一格下） ---------- */
.tag.mock {
  background: linear-gradient(135deg, #fff4d9, #ffe7c2);
  color: #9a5a00; font-weight: 650; box-shadow: inset 0 0 0 1px #f2d29a;
}
.tag.mock::before { content: '★'; font-size: 9px; margin-right: 3px; opacity: .75; }
.mock-sec {
  border: 1px dashed #edc98a; background: #fffcf5; border-radius: 11px;
  padding: 10px 11px; margin-top: 10px;
}
.mock-sec > .mock-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mock-sec > .mock-head .sp { flex: 1 1 auto; }
.mock-sec > .mock-head .hint { color: var(--muted); font-size: 12px; }
.sk-sec .sk-sub { margin: 9px 0 6px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.sk-sec .sk-sub .ln { flex: 1 1 auto; height: 1px; background: var(--line); }

/* ---------- 沐晓英语训练营（总板块 · 排所有板块最前；下挂 泛听 / 精读 / 思辨 三条线） ----------
   展示口径：总卡**排在所有板块最前面**，并用**专属配色**跟其它板块区分开；
   三条线**装在总卡里当入口**（.mini-line / .camp-dir），不铺进英语板块列表；
   入口**只放名称 + 一句简介**，课程目录与内容点进去才有（#/browse/<线id>，那一页只有这条线）。
   配色（2026-10-16 用户改版）：**中国紫**（原先的暖橘红让给了「中国文化英语课」）——
   明确不要绿色；不要太艳丽（避开荧光高饱和），但**底色要实**（实色填充，不用半透明 / 渐变），
   靠一整行紫底 + 左侧深色竖条把版面压住，在一屏浅蓝灰的板块里一眼就跳出来。
   配色盘点：普通板块=浅蓝灰面(--surface-2)，心理解压=淡紫渐变(蓝紫 #3d6b67)，
   沐晓独家模拟题=金，训练营=中国紫(#5B4A69)，中国文化英语课=朱红+描金(#B02A1E/#C9A227)。
   ⚠️ 与心理解压的紫要分得开：心理解压是**淡紫白底**（紫只落在小标签/按钮上），
   训练营是**实紫底整条卡**（.camp 系列，深紫竖条压边），两者体量差得远，不会看混。 */
.tag.camp { background: #EDE9F1; color: #463A52; font-weight: 650; box-shadow: inset 0 0 0 1px #CFC6D8; }
.tag.camp::before { content: '◆'; font-size: 8px; margin-right: 3px; opacity: .7; }

.card.tight.camp,
.card.kb-card.camp {
  border-color: #CFC6D8; background: #F6F3F8;
  box-shadow: inset 4px 0 0 #5B4A69, var(--shadow);
}
.card.tight.camp:hover, .card.kb-card.camp:hover { border-color: #5B4A69; }
.card.tight.camp h3, .card.kb-card.camp h2 { color: #463A52; }

.mini-kb.camp {
  border: 1px solid #CFC6D8; background: #F6F3F8;
  box-shadow: inset 3px 0 0 #5B4A69;
  /* 门户「板块一览」四列网格里**整行铺满** —— 跟心理解压一样占一整行，一眼就看到它在最前面 */
  grid-column: 1 / -1; padding: 14px 16px;
}
.mini-kb.camp:hover { border-color: #5B4A69; }
.mini-kb.camp .mini-kb-h b { color: #463A52; font-size: 16px; }
.mini-kb.camp .hint { color: #6F6480; }

/* 三条线（门户「板块一览」的成长营卡里）：**只露名称 + 一句简介**，
   课程目录与内容点进那条线自己的页面才铺开。
   2026-10-08 用户口径：训练营在主页不要摊这么多内容，只显示三个子板块与其简介。 */
.mini-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.mini-line {
  display: block; text-decoration: none; cursor: pointer;
  padding: 10px 12px; border-radius: 11px; background: #fff; border: 1px solid #D8D3DD;
}
.mini-line:hover { border-color: #5B4A69; background: #F8F5FA; }
.mini-line-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mini-line-h b { color: #463A52; font-size: 14.5px; }
.mini-line-h .hint { color: #6F6480; font-size: 12px; font-weight: 500; }
.mini-line-p {
  color: #6F6480; font-size: 12.5px; line-height: 1.55; margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mini-line-go { font-size: 12px; margin-top: 6px; }
.mini-line.off { background: #F1EFF3; border-style: dashed; cursor: pointer; }
.mini-line.off:hover { border-color: #5B4A69; }

/* 三条线分块（随便逛逛 / 板块目录里的训练营总卡内）：**一条线一块，只放名称与简介**；
   课程目录 / 矩阵 / 前 10% 正文都挪到那条线自己的页面（#/browse/<线id>）。 */
.camp-dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.camp-dir {
  display: block; text-decoration: none;
  border: 1px solid #D8D3DD; border-radius: 12px; background: #FAF5FD; padding: 12px 14px;
}
.camp-dir.go { cursor: pointer; }
.camp-dir.go:hover { border-color: #5B4A69; box-shadow: 0 2px 10px rgba(91, 74, 105, .12); }
.camp-dir.building { border-style: dashed; background: #F1EFF3; cursor: pointer; }
.camp-dir-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.camp-dir-h .sp { flex: 1 1 auto; }
.camp-dir-n { color: #463A52; font-weight: 700; font-size: 15px; }
.camp-dir .p2 {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.camp-dir .p2 { margin: 6px 0 0; }
@media (max-width: 900px) {
  .mini-lines, .camp-dirs { grid-template-columns: 1fr; }
}

/* ===== 训练营三块互跳 / 随便听听 / 主题分类 / 全部课程目录（2026-10-09 口径 4.0）=====
   用户口径：主页要看得见「泛听 / 精读 / 思辨」三块且能分开点进去；任意一块里能切到另外两块；
   泛听页最上面一条「随便听听」随机进一节；泛听按五类主题详细分类；课程页有「随机选课」+
   跨课程的「全部课程目录」。配色继续沿用训练营暖橘红，不要绿色。 */
.camp-switch {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 12px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid #CFC6D8; background: #F6F3F8;
}
.camp-switch .cs-label { font-size: 12px; font-weight: 650; color: #463A52; letter-spacing: .3px; }
.camp-switch .cs-hint { margin-left: auto; color: #6F6480; }
.camp-switch .cs {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; text-decoration: none; cursor: pointer;
  border: 1px solid #D8D3DD; background: #fff; color: #463A52; font-size: 13px; font-weight: 600;
}
.camp-switch .cs:hover { border-color: #5B4A69; background: #F8F5FA; }
.camp-switch .cs.on { background: #5B4A69; border-color: #5B4A69; color: #fff; cursor: default; }
.camp-switch .cs-go { font-size: 11.5px; font-weight: 500; color: #6F6480; }
.camp-switch .cs.on .cs-go { color: #E6E0EA; }

/* 「随便听听」：泛听页最上面那一条，整条可点的大按钮 */
.card.shuffle-card { border-color: #CFC6D8; background: #F6F3F8; box-shadow: inset 4px 0 0 #5B4A69; }
.shuffle-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: #5B4A69; color: #fff; font-size: 13px; line-height: 34px; text-align: center;
}
.shuffle-ttl { color: #463A52; font-size: 16px; }
.shuffle-card .hint { color: #6F6480; }

/* ---------- 沐晓英语-中国文化英语课（2026-10-16 建 · 特色板块） ----------
   与训练营**同样的地位与排版**（门户页各占一整条大卡、都排在 15 个英语板块之前），
   但配色刻意分开：训练营 = 中国紫(#5B4A69)，本板块 = **朱红 + 描金**(#B02A1E / #C9A227)。
   骨架完全同构（实色底 + 左侧深色竖条），只换色 —— 用户一眼就能把两个特色板块分开。
   描金只做**点缀**：左侧竖条外侧再叠一道 3px 细金线、标签描边偏金，不铺大面积，免得俗气。
   内容未上线时加 .is-building（虚线边），与「建设中」标签配合。 */
.tag.culture { background: #F7DED6; color: #8E1F14; font-weight: 650; box-shadow: inset 0 0 0 1px #DCA793; }
.tag.culture::before { content: '❖'; font-size: 8px; margin-right: 3px; opacity: .8; color: #A8801A; }

.card.tight.culture,
.card.kb-card.culture {
  border-color: #DCA793; background: #FCF0E9;
  box-shadow: inset 4px 0 0 #B02A1E, inset 7px 0 0 #C9A227, var(--shadow);
}
.card.tight.culture:hover, .card.kb-card.culture:hover { border-color: #B02A1E; }
.card.tight.culture h3, .card.kb-card.culture h2 { color: #8E1F14; }
.card.tight.culture.is-building, .card.kb-card.culture.is-building { border-style: dashed; }

.mini-kb.culture {
  border: 1px solid #DCA793; background: #FCF0E9;
  box-shadow: inset 3px 0 0 #B02A1E, inset 6px 0 0 #C9A227;
  grid-column: 1 / -1; padding: 14px 16px;
}
.mini-kb.culture:hover { border-color: #B02A1E; }
.mini-kb.culture .mini-kb-h b { color: #8E1F14; font-size: 16px; }
.mini-kb.culture .hint { color: #9A4A3A; }

/* 门户一条大卡里的「金线分隔」：两个特色板块挨着放时，用一道细金线把段落隔开 */
.culture-rule { height: 1px; background: linear-gradient(90deg, #C9A227, rgba(201, 162, 39, 0)); margin: 14px 0 0; }

/* 泛听课课程目录（2026-10-28 用户口径）：**一类一横条，横条内横向滚动课程视频卡**。
   卡顶是视频界面（第一节视频的首帧，懒加载 + 悬停静音预览），点卡进课程。 */
.fan-cat { border-top: 1px dashed #D8D3DD; padding-top: 12px; margin-top: 14px; }
.fan-cat:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.fan-cat-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fan-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  background: #5B4A69; color: #fff; font-size: 12px; font-weight: 650; letter-spacing: .3px;
}
.fan-cat-h .hint { color: #6F6480; }
.fan-cat-d { color: var(--muted); }

.fan-strip-wrap { position: relative; }
.fan-strip {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: 4px 2px 12px;
  scrollbar-width: thin; scrollbar-color: #D8D3DD transparent;
}
.fan-strip::-webkit-scrollbar { height: 6px; }
.fan-strip::-webkit-scrollbar-track { background: transparent; }
.fan-strip::-webkit-scrollbar-thumb { background: #D8D3DD; border-radius: 3px; }

.fan-vcard {
  appearance: none; cursor: pointer; text-align: left; font-family: inherit;
  flex: 0 0 auto; width: 212px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid #E7BE9E; border-radius: 12px; background: #FFF8F3; padding: 8px; color: inherit;
  scroll-snap-align: start;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fan-vcard:hover { border-color: #C9522B; box-shadow: 0 4px 14px rgba(201, 82, 43, .18); transform: translateY(-2px); }
.fan-vcard.off { cursor: default; }
.fan-vcard.off:hover { border-color: #E7BE9E; box-shadow: none; transform: none; }
.fan-vcard .fv-video {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; background: #2A1836;
}
.fan-vcard .fv-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan-vcard .fv-video.blank { background: #F3E9F7; display: flex; align-items: center; justify-content: center; }
.fan-vcard .fv-video .fv-none { font-size: 12px; color: #6F6480; letter-spacing: 1px; }
.fv-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201, 82, 43, .88); color: #fff; font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3); pointer-events: none;
  transition: transform .15s, background .15s;
}
.fan-vcard:hover .fv-play { background: #C9522B; transform: translate(-50%, -50%) scale(1.12); }
.fan-vcard .fv-ttl {
  font-weight: 650; color: #7E2F0D; font-size: 13.5px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fan-vcard .fv-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted);
}

/* 横条左右箭头：悬停横条时浮现，一次滚约一屏宽 */
.fan-nav {
  appearance: none; cursor: pointer; position: absolute; top: 62px; z-index: 2;
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid #E7BE9E; background: #fff; color: #9A4A22; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
  opacity: 0; transition: opacity .15s, background .15s, color .15s;
  padding: 0;
}
.fan-strip-wrap:hover .fan-nav, .fan-nav:focus { opacity: 1; }
.fan-nav:hover { background: #C9522B; border-color: #C9522B; color: #fff; }
.fan-nav.prev { left: -8px; }
.fan-nav.next { right: -8px; }
@media (hover: none) {
  .fan-nav { opacity: .9; width: 30px; height: 30px; }
  .fan-nav.prev { left: -4px; }
  .fan-nav.next { right: -4px; }
}

/* ------------------------------------------------------------------
   沐晓英语-高阶语言能力训练（#/camphome）：泛听 / 精读 / 思辨 三列
   2026-10-18 用户口径：三块分成一横排（左 / 中 / 右）；
     每列 = 上「分板块按键」 + 下「推荐课名纵向列表」；
     **三列等宽、等高、固定大小**，内容多少不影响版式；
     没有课程的板块 → 显示「正在建设中」，不摆占位课。
   ------------------------------------------------------------------ */
.cmp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.cmp-col {
  /* 固定高度：三列永远一样大；列内自己滚动，不把页面撑长 */
  height: 430px;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #E7BE9E;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFFDFA, #FFF6EE);
  box-sizing: border-box;
  overflow: hidden;
}
.cmp-col.camp { border-color: #D8D0DF; background: linear-gradient(135deg, #FCFBFD, #F7F4F8); }
.cmp-col.culture { border-color: #E6C9B0; background: linear-gradient(135deg, #FFFCF8, #FDF3E9); }
/* 列上部：这一块的按键 */
.cmp-btn {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  border: 1px solid #E0CDBA; border-radius: 10px;
  background: #fff; color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.cmp-btn:hover { border-color: #C9522B; box-shadow: 0 2px 10px rgba(201, 82, 43, .12); }
.cmp-btn-t { font-size: 15px; font-weight: 700; color: #7E2F0D; }
.cmp-btn-d { font-size: 12px; color: var(--muted); }
.cmp-btn-m { font-size: 11.5px; color: var(--muted); }
.cmp-btn.is-building { background: #FBF6F1; border-style: dashed; }
.cmp-btn.is-building .cmp-btn-t { color: #8A7B6B; }
/* 列下部：推荐课名（纵向排列，只有标题） */
.cmp-sec-h {
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px; color: #8A6A4E;
  padding: 0 2px; border-top: 1px dashed #E7D3BC; padding-top: 8px;
}
.cmp-list { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.cmp-item {
  appearance: none; cursor: pointer; text-align: left; font-family: inherit;
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 8px; background: #fff; color: #4A3A2C;
  font-size: 13px; line-height: 1.45;
  border: 1px solid #F0E2D2;
}
.cmp-item:hover { background: #FFF3EA; border-color: #E7BE9E; }
.cmp-no {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px;
  background: #F3E7D8; color: #8A6A4E; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.cmp-ttl {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 推荐课右侧的**所属类别**小字（泛听 20 个类别 / 305 节课：类名只作注释，不占课名） */
.cmp-cat {
  flex: 0 0 auto; max-width: 34%;
  font-size: 11px; color: #A08B75;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-go { flex: 0 0 auto; color: #B08560; font-size: 15px; font-weight: 700; }
.cmp-item:hover .cmp-go { color: #C9522B; }
.cmp-more {
  flex: 0 0 auto; text-align: center; text-decoration: none;
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid #E7BE9E; background: #FFF8F3; color: #9A4A22;
  font-size: 12.5px; font-weight: 650;
}
.cmp-more:hover { background: #FFF3EA; border-color: #C9522B; }
.cmp-empty {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12.5px; text-align: center; padding: 8px;
}
.cmp-empty b { font-size: 13px; color: #8A7B6B; }
/* 窄屏兜底：三列挤不下就退成单列（高度仍固定，不塌） */
@media (max-width: 900px) {
  .cmp-grid { grid-template-columns: 1fr; }
}

/* 课程页左栏的「全部课程」：跨课程目录（按主题分组、每门课可折叠到节次） */
.cg-ls-wrap .card-h { flex-wrap: wrap; row-gap: 6px; }
.cg-ls-wrap .card-h h2 { flex: 0 0 auto; white-space: nowrap; }
.cg-ls-wrap .seg { margin-left: auto; }
.cg-all { max-height: 62vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.cgc-cat { border-top: 1px dashed var(--line); padding-top: 8px; }
.cgc-cat:first-child { border-top: 0; padding-top: 0; }
.cgc-cat-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cgc { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); margin-bottom: 5px; }
.cgc[open] { border-color: #E7BE9E; background: #FFF8F3; }
.cgc > summary {
  cursor: pointer; list-style: none; padding: 8px 10px;
  display: flex; align-items: center; gap: 8px; font-size: 13px;
}
.cgc > summary::-webkit-details-marker { display: none; }
.cgc > summary::before { content: '▸'; color: #9A4A22; font-size: 11px; }
.cgc[open] > summary::before { content: '▾'; }
.cgc-ttl { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--text); }
.cgc-ttl.on { color: #9A4A22; }
.cgc-ls { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.cg-ls.sm { padding: 6px 8px; font-size: 12.5px; }
.cg-ls.sm .cg-ls-ttl { font-weight: 500; }

   门禁页沿用训练营专属暖橘红配色（#C9522B / #7E2F0D / #FDF3EC），
   与英语板块的蓝色系区分开：一眼就知道这是「另一套体系」。 */
.card.camp-gate { border-color: #EFD3C4; background: linear-gradient(180deg, #FFF9F5, #FFFFFF); }
.card.camp-gate .card-h h2 { color: #7E2F0D; }
.cg-rules { margin: 4px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.85; color: var(--text-2); }
.cg-rules li { margin: 4px 0; }
.cg-rules b { color: #7E2F0D; }
.cg-rules a { font-weight: 600; }

/* 体验阅读页：左课时清单 / 右讲义全文（窄屏纵向堆叠） */
.cg-read { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; align-items: start; }
.cg-ls-wrap { position: sticky; top: 12px; }
.cg-ls-list { display: flex; flex-direction: column; gap: 4px; max-height: 62vh; overflow: auto; }
.cg-ls {
  appearance: none; cursor: pointer; text-align: left; font-family: inherit;
  display: flex; align-items: flex-start; gap: 9px; width: 100%;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  padding: 8px 10px; color: inherit; font-size: 13px;
}
.cg-ls:hover { border-color: #C9522B; }
.cg-ls.on { border-color: #C9522B; background: #FDF3EC; }
.cg-ls-seq { flex: 0 0 auto; min-width: 22px; font-weight: 700; color: #9A4A22; font-variant-numeric: tabular-nums; }
.cg-ls .grow { min-width: 0; }
.cg-ls-ttl { display: block; font-weight: 600; line-height: 1.45; }
.cg-ls-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cg-ls-go { flex: 0 0 auto; font-size: 11.5px; color: #9A4A22; }
.cg-doc-wrap .cls-doc { max-height: 74vh; overflow: auto; padding-right: 4px; }
/* 训练营体验页（#/camp-read）右栏 = 视频卡 + 讲义卡：开放期内游客两者都能看 */
.cg-main { display: grid; gap: 12px; min-width: 0; align-content: start; }
.cg-video-card .cls-videowrap { border-radius: 11px; max-height: 58vh; }
.cg-video-card .cls-videowrap video { max-height: 56vh; }
/* 2026-10-31 用户口径：泛听上课页改版 —— 左栏 = 视频卡（上）+ 课程目录卡（下），
   右栏 = 讲义卡（分章页签）。左栏随页面滚动保持可见，目录列表内部滚动。 */
.cg-read.cg-read2 { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.cg-left { display: grid; gap: 12px; min-width: 0; align-content: start; position: sticky; top: 12px; }
.cg-read2 .cg-ls-wrap { position: static; }
.cg-read2 .cg-ls-list { max-height: 34vh; }
.cg-read2 .cg-all { max-height: 34vh; }
.cg-read2 .cg-video-card .cls-videowrap { max-height: none; }
.cg-read2 .cg-video-card .cls-videowrap video { max-height: none; width: 100%; }
/* 讲义页签：复用精读页的 .og-seg 页签条；章节信息条与正文区各自独立 */
.cg-lec-seg { flex-wrap: wrap; }
.cg-lec-meta { margin: 10px 0 2px; }
.cg-doc-wrap .og-seg { margin-bottom: 10px; }
@media (max-width: 900px) {
  .cg-read { grid-template-columns: 1fr; }
  .cg-read.cg-read2 { grid-template-columns: 1fr; }
  .cg-ls-wrap { position: static; }
  .cg-left { position: static; }
  .cg-ls-list, .cg-read2 .cg-ls-list, .cg-read2 .cg-all,
  .cg-doc-wrap .cls-doc { max-height: none; }
  .cg-video-card .cls-videowrap, .cg-video-card .cls-videowrap video { max-height: none; }
}

.sk-sec { border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; margin-bottom: 11px; }
.sk-sec:last-child { margin-bottom: 0; }
.sk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.sk-head .sp { flex: 1 1 auto; }
.sk-head .hint { color: var(--muted); font-size: 12px; }
.sk-badge {
  width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--text-2);
}
.sk-badge.sk-listening { background: #e7f1ff; color: #1b5fb8; }
.sk-badge.sk-speaking { background: #e7f1ee; color: #3d6b67; }
.sk-badge.sk-reading { background: var(--ok-soft); color: #0a7a52; }
.sk-badge.sk-writing { background: #fdeede; color: #a2620f; }
.sk-badge.sk-teach { background: #F6D6BE; color: #8A3A15; }
.sk-badge.sk-drill { background: #FBE3D4; color: #993C1D; }

.item.on { background: var(--primary-soft); }
.item.occ { opacity: .72; }
.radio {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--line-strong); margin-top: 3px; position: relative; background: var(--surface);
}
.radio.on { border-color: var(--primary); }
.radio.on::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--primary); }

.matrix { width: 100%; border-collapse: separate; border-spacing: 6px 6px; font-size: 12.5px; }
.matrix th { font-size: 12px; color: var(--muted); font-weight: 600; text-align: center; }
.matrix th.rowh { text-align: left; white-space: nowrap; }
.matrix td { text-align: center; padding: 7px 4px; border-radius: 8px; background: var(--surface-2); color: var(--muted); }
.matrix td.has { background: var(--ok-soft); color: var(--ok); font-weight: 650; }
.matrix td.none { background: var(--danger-soft); color: var(--danger); font-weight: 650; }

.list { display: flex; flex-direction: column; }
.item {
  display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.item:last-child { border-bottom: none; }
.item .grow { flex: 1 1 auto; min-width: 0; }
.item .ttl { font-weight: 600; font-size: 14.5px; }
.item .meta { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.item .desc { font-size: 13.5px; color: var(--text-2); margin-top: 5px; }

table.tb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tb th, table.tb td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tb th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--surface-2); }
table.tb tr:last-child td { border-bottom: none; }
.tb-wrap { overflow-x: auto; }
/* 2026-10-30：老师端「作业完成情况」可点行 —— 点整行跳到该生的作业明细 */
tr.hw-go { cursor: pointer; }
tr.hw-go:hover td { background: var(--surface-2); }

.empty { text-align: center; padding: 34px 16px; color: var(--muted); font-size: 14px; }
.empty .big { font-size: 15px; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.empty.sm { padding: 14px 10px; font-size: 13px; }

/* ---------- 课程目录（随便逛逛 / 课程简介共用） ---------- */
.toc { margin: 12px 0 4px; border-top: 1px dashed var(--line); padding-top: 10px; }
.toc-title {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 650; color: var(--text); margin-bottom: 8px;
}
.toc-title .hint { font-weight: 400; }
.toc-sec { margin-bottom: 10px; }
.toc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 2px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.toc-head b { font-size: 13px; color: var(--text-2); font-weight: 600; }
.toc-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; margin-bottom: 6px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  font: inherit; color: inherit;
}
.toc-row:hover { border-color: var(--primary); background: var(--primary-soft); }
.toc-row .toc-d { flex: 0 0 auto; padding-top: 1px; }
.toc-main { display: flex; flex-direction: column; gap: 4px; }
.toc-ttl { font-weight: 600; font-size: 14px; line-height: 1.45; }
.toc-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); align-items: center; }
.toc-sum { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.toc-go { flex: 0 0 auto; align-self: center; font-size: 12.5px; color: var(--primary); white-space: nowrap; }
.toc-row:hover .toc-go { text-decoration: underline; }

/* ---------- 课程简介页 ---------- */
/* 课程简介页（2026-10-08 用户口径）：简介与目录**上下排** —— 左右两栏长短悬殊不均衡，
   全站凡「简介 + 目录」都按此办理 */
.c-stack { display: grid; gap: 14px; }
.c-abs { margin: 0 0 10px; }
.c-abs p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text); }
.c-abs p.muted { color: var(--muted); }
.c-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.ci { display: flex; gap: 8px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.ci-k { flex: 0 0 68px; color: var(--muted); font-size: 12.5px; }
.ci-v { flex: 1 1 auto; color: var(--text); font-weight: 550; }
.lesson-ol { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lo-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.lo-row:last-child { border-bottom: none; }
.lo-row:nth-child(even) { background: var(--surface-2); }
/* 课时行是可点按钮：点了弹去向提示（内容在课堂里），不再是点不动的死键 */
button.lo-row { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; border-left: none; border-right: none; border-top: none; }
button.lo-row:hover { background: var(--primary-soft); }
button.lo-row:hover .lo-lock { color: var(--primary); font-weight: 650; }
.lo-seq {
  flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 700;
}
.lo-ttl { font-size: 14px; font-weight: 600; }
.lo-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 2px; align-items: center; }
.lo-lock { flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.sib-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sib {
  display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); font: inherit; color: inherit;
}
.sib:hover { border-color: var(--primary); background: var(--primary-soft); }
.sib .toc-meta { margin: 0; }
/* 随便逛逛末尾的心理解压提示条：与英语板块拉开配色 */
.mind-strip {
  border-color: #c2d8d2;
  background: linear-gradient(135deg, #f0f7f4, #edf5f1);
  font-size: 13.5px; color: var(--text-2);
}
@media (max-width: 820px) {
  .c-info { grid-template-columns: 1fr; }
  .sib-row { grid-template-columns: 1fr; }
}

.note { font-size: 13px; color: var(--text-2); background: var(--surface-2); border-radius: 9px; padding: 10px 12px; }
.note.warn { background: var(--warn-soft); color: #7a4d10; }
.note.ok { background: var(--ok-soft); color: #0a5c40; }

/* ---------- modal ---------- */
.mask {
  position: fixed; inset: 0; background: rgba(18, 22, 38, .42); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
.modal {
  background: var(--surface); width: 100%; max-width: 560px;
  border-radius: 16px 16px 0 0; max-height: 92vh; overflow: auto; padding: 18px;
}
@media (min-width: 760px) {
  .mask { align-items: center; padding: 20px; }
  .modal { border-radius: 16px; }
}
.modal-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.modal-h h2 { flex: 1 1 auto; }

/* ---------- feedback ---------- */
.banner {
  border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 12px;
  border: 1px solid var(--line-strong); background: var(--surface);
}
.banner.err { background: var(--danger-soft); border-color: #f0c3cc; color: #8f2436; }
.banner.warn { background: var(--warn-soft); border-color: #f0dcb6; color: #7a4d10; }
.banner.ok { background: var(--ok-soft); border-color: #bfe6d5; color: #0a5c40; }
.banner.info { background: var(--primary-soft); border-color: #c6d4fb; color: #1d3aa8; }

/* 可点选筹码（风格标签等） */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { font-size: 12.5px; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 3px 11px; cursor: pointer; color: var(--text-2); background: var(--surface); user-select: none; }
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }

#toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: #1c2338; color: #fff; padding: 9px 15px; border-radius: 9px; font-size: 13.5px;
  box-shadow: 0 8px 26px -8px rgba(0, 0, 0, .5); animation: pop .2s ease;
}
.toast.err { background: #a8293d; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }

.loading { padding: 30px; text-align: center; color: var(--muted); font-size: 14px; }

.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; font-size: 13px; color: var(--muted); }

.split { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 300px 1fr; align-items: start; } }

.pick-list { max-height: 460px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.pick-list .item { padding: 10px 12px; }

.side-list { display: flex; flex-direction: column; gap: 4px; }
.side-list button {
  text-align: left; border: 1px solid transparent; background: none; border-radius: 9px;
  padding: 8px 11px; font: inherit; font-size: 13.5px; color: var(--text-2); cursor: pointer;
}
.side-list button:hover { background: var(--surface-2); }
.side-list button.on { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }

/* ---------- print (PDF export) ---------- */
#printArea { display: none; }
@media print {
  body { background: #fff; }
  .topbar, .tabbar, .main, #toasts { display: none !important; }
  #printArea { display: block !important; padding: 0 8mm; }
  #printArea h1 { font-size: 20pt; margin-bottom: 4pt; }
  #printArea .pd-meta { color: #666; font-size: 10pt; margin-bottom: 14pt; }
  #printArea .pd-item { page-break-inside: avoid; border-bottom: 1px solid #ddd; padding: 8pt 0; }
  #printArea .pd-item h3 { font-size: 12.5pt; margin-bottom: 3pt; }
  #printArea .pd-item .pd-body { white-space: pre-wrap; font-size: 10.5pt; line-height: 1.55; }
  #printArea .pd-foot { margin-top: 16pt; color: #888; font-size: 9pt; }
}

/* ---------- 品牌门户 / 随便逛逛 / 体验学生身份 ---------- */
.hint { color: var(--muted); font-size: 12px; }
.row > .sp, .foot > .sp, .tour-bar .sp { flex: 1 1 auto; }
.p2 { color: var(--text-2); font-size: 13.5px; margin: 6px 0 0; }

.hero {
  /* 2026-10-31 空灵风：主页横幅直接铺云海晨光大图 ——
     左侧文字区压一层暖白纱（105° 渐变，越往右越透），云海从右侧透出来；
     窄屏时整体纱罩加重，保证文字始终可读。
     同日加：hero-in 之上再叠 hero-fx 三层「墟境」巨物图做 Ken Burns 交叉淡入循环（见下）。 */
  position: relative; overflow: hidden;
  background:
    linear-gradient(105deg, rgba(255, 253, 249, .97) 0%, rgba(255, 252, 246, .9) 44%, rgba(255, 250, 243, .38) 78%, rgba(255, 248, 240, .22) 100%),
    url("img/hero-sky.jpg") center 38% / cover no-repeat,
    linear-gradient(135deg, #f8efe4, #fdf6ec);
  border: 1px solid rgba(206, 175, 128, .42); border-radius: 16px;
  padding: 30px 26px 26px; margin-bottom: 16px;
}
/* ---------- 开屏动效：墟境巨物十连（交叉淡入淡出 + 缓慢缩放） ---------- */
/* 2026-10-31 傍晚（用户口径：前面用过的图也都好看，全部用上）：
   10 张 × 5s（一轮 50s），mega9/mega10 为同场景两版，隔开放置。 */
.hero-fx { position: absolute; inset: 0; pointer-events: none; }
/* 纱罩压在轮播图之上：无论轮到哪张巨物图，左侧文字对比度都够 */
.hero-fx::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255, 253, 249, .74) 0%, rgba(255, 252, 246, .44) 44%, rgba(255, 250, 243, .1) 78%, rgba(255, 248, 240, .03) 100%);
}
.hero-fx i {
  position: absolute; inset: 0; opacity: 0;
  /* 取景下移：小人一狗都在画面下部（约 70-82% 高度），Y=40% 会被横幅裁掉 → 78% 保人物可见 */
  background-position: center 78%; background-size: cover; background-repeat: no-repeat;
  animation: heroFx 50s linear infinite;
}
.hero-fx .fx1  { background-image: url("img/mega1.jpg");  animation-delay: 0s; }
.hero-fx .fx2  { background-image: url("img/mega2.jpg");  animation-delay: 5s; }
.hero-fx .fx3  { background-image: url("img/mega3.jpg");  animation-delay: 10s; }
.hero-fx .fx4  { background-image: url("img/mega4.jpg");  animation-delay: 15s; }
.hero-fx .fx5  { background-image: url("img/mega5.jpg");  animation-delay: 20s; }
.hero-fx .fx6  { background-image: url("img/mega9.jpg");  animation-delay: 25s; }
.hero-fx .fx7  { background-image: url("img/mega6.jpg");  animation-delay: 30s; }
.hero-fx .fx8  { background-image: url("img/mega7.jpg");  animation-delay: 35s; }
.hero-fx .fx9  { background-image: url("img/mega8.jpg");  animation-delay: 40s; }
.hero-fx .fx10 { background-image: url("img/mega10.jpg"); animation-delay: 45s; }
@keyframes heroFx {
  /* 每张 5s：0-8% 快速淡入（0.4s），76-100% 淡出，全程缓慢放大（Ken Burns） */
  0%   { opacity: 0; transform: scale(1.02); }
  8%   { opacity: .95; }
  76%  { opacity: .82; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.14); }
}
.hero-in { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-fx i { animation: none; opacity: 0; }
}
.hero-en { font-size: 12px; letter-spacing: .22em; color: var(--primary); font-weight: 700; }
.hero-ttl { font-size: 34px; letter-spacing: -.02em; margin: 6px 0 8px; }
.hero-tag { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.hero-intro { font-size: 14px; color: var(--text-2); max-width: 780px; margin-bottom: 14px; }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.hb {
  font-size: 12.5px; background: rgba(255, 255, 255, .85);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 11px; color: var(--text-2);
}

.grid.g5 { grid-template-columns: repeat(2, 1fr); }

.entry {
  position: relative; overflow: hidden;
  /* 2026-11-01 傍晚（用户口径「更通透灵动」）：磨砂玻璃 + 顶边微光 + 悬浮光晕。
     半透明让 hero 的云海透上来，不再是一块实心米色卡片。 */
  background: linear-gradient(158deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .74) 54%, rgba(255, 255, 255, .58) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 16px 34px -26px rgba(93, 66, 32, .45);
  padding: 20px 20px 18px; display: flex; flex-direction: column; min-height: 228px;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s, border-color .22s;
}
.entry::after {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, rgba(214, 170, 105, .6), transparent);
}
.entry-glow {
  position: absolute; width: 230px; height: 230px; right: -78px; top: -96px; border-radius: 50%;
  pointer-events: none; opacity: .6;
  background: radial-gradient(circle at 50% 50%, rgba(222, 178, 112, .38), rgba(222, 178, 112, 0) 70%);
}
.entry-ico {
  width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; color: #8a5c2b;
  background: linear-gradient(150deg, rgba(255, 249, 240, .96), rgba(246, 232, 210, .88));
  border: 1px solid rgba(214, 180, 131, .55);
  box-shadow: 0 8px 18px -14px rgba(150, 105, 50, .8);
  transition: transform .22s;
}
.entry-ico svg { width: 21px; height: 21px; }
.entry:hover { transform: translateY(-4px); border-color: rgba(214, 176, 120, .95);
  box-shadow: 0 1px 0 #fff inset, 0 28px 46px -30px rgba(93, 66, 32, .55); }
.entry:hover .entry-ico { transform: translateY(-1px) scale(1.04); }
.entry.primary { border-color: rgba(227, 201, 154, .9); }
.entry.amber { border-color: rgba(240, 220, 182, .95); }
.entry.mind { border-color: #e3cfae; background: linear-gradient(135deg, #fdf8f0, #fbf3e6); }

/* ---------- 主页横幅：外接「沐晓英语电子书库」跳转按钮 ---------- */
.hero-acts { display: flex; flex-direction: column; gap: 8px; align-items: stretch; flex: 0 0 auto; }
.hero-acts .btn { white-space: nowrap; justify-content: center; }
.btn.lib-btn { display: inline-flex; align-items: center; gap: 7px;
  border-color: #dcc49a; background: rgba(255, 253, 249, .92); color: #8a5c2b; font-weight: 600; }
.btn.lib-btn:hover { border-color: #c9a25f; background: #fdf6ec; color: #71481f; }
.lib-ic { display: inline-flex; align-items: center; color: #a8763e; }
.btn.lib-btn:hover .lib-ic { color: #8a5c2b; }
.lib-out { font-size: 12px; opacity: .62; }
@media (max-width: 760px) {
  .hero-acts { flex-direction: row; flex-wrap: wrap; }
  .hero { background:
    linear-gradient(100deg, rgba(255, 253, 249, .96) 0%, rgba(255, 252, 246, .92) 55%, rgba(255, 250, 243, .55) 100%),
    url("img/hero-sky.jpg") center 30% / cover no-repeat,
    linear-gradient(135deg, #f8efe4, #fdf6ec); }
}.entry.mind .entry-ttl { color: #3d6b67; }
.entry.mind .btn { background: #3d6b67; border-color: #3d6b67; color: #fff; }
.entry.mind .btn:hover { background: #3d6b67; border-color: #3d6b67; color: #fff; }
.entry-kicker { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.entry-ttl { font-size: 21px; margin: 6px 0 8px; letter-spacing: -.01em; }
.entry-txt { font-size: 13.5px; color: var(--text-2); flex: 1 1 auto; margin-bottom: 16px; line-height: 1.68; }
.entry .btn { align-self: flex-start; }
/* 入口卡的行动键：胶囊 + 细边，hover 填色（比实心按钮更轻，和玻璃卡更搭） */
.entry-go {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 650; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(200, 166, 116, .6); background: rgba(255, 255, 255, .72); color: #7a4f22;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.entry-go i { font-style: normal; transition: transform .2s; }
.entry:hover .entry-go { background: #8a5c2b; color: #fff; border-color: #8a5c2b;
  box-shadow: 0 10px 20px -14px rgba(122, 79, 34, .9); }
.entry:hover .entry-go i { transform: translateX(3px); }

/* 主页（2026-11-01 用户口径）：只有顶部展示窗 + 登录 / 注册两个入口，不铺任何课程板块。
   两张入口卡居中对齐、等高，屏宽过大时不至于拉成一整条。 */
/* 2026-11-01：主页三入口（学生 / 教师 / 访客）横向一排，最宽 1120；窄屏先落两列再落单列，
   访客卡用中性雾青边线，与两张登录卡区分开（它是「先看后注册」的过渡口）。 */
/* 2026-11-01 傍晚：**宽度不再自己限** —— 与上面的 hero 同宽（同一父容器），左右边线严丝合缝。 */
.home-gate { max-width: none; width: 100%; margin: 0 0 8px; gap: 14px; align-items: stretch; }
.entry.guest { border-color: rgba(207, 217, 212, .95);
  background: linear-gradient(158deg, rgba(255, 255, 255, .93) 0%, rgba(246, 251, 249, .78) 56%, rgba(240, 248, 245, .62) 100%); }
.entry.guest .entry-ico { color: #2f6660; background: linear-gradient(150deg, rgba(247, 253, 251, .96), rgba(226, 242, 237, .9));
  border-color: rgba(178, 208, 198, .7); }
.entry.guest .entry-glow { background: radial-gradient(circle at 50% 50%, rgba(112, 176, 160, .34), rgba(112, 176, 160, 0) 70%); }
.entry.guest::after { background: linear-gradient(90deg, transparent, rgba(120, 172, 158, .55), transparent); }
.entry.guest .entry-go { border-color: rgba(178, 208, 198, .9); color: #2f6660; }
.entry.guest:hover .entry-go { background: #2f6660; border-color: #2f6660; color: #fff; }
@media (max-width: 1000px) { .home-gate.g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .home-gate.g3 { grid-template-columns: 1fr; } }
.home-gate a.entry { text-decoration: none; color: inherit; }
/* 入场：三卡依次浮起（只在支持动画的环境；减弱动效偏好下直接显示） */
@keyframes entryIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.home-gate .entry { animation: entryIn .5s cubic-bezier(.2, .7, .3, 1) both; }
.home-gate .entry:nth-child(2) { animation-delay: .06s; }
.home-gate .entry:nth-child(3) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .home-gate .entry { animation: none; } }

.mini-kb { background: var(--surface-2); border-radius: 11px; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; }
/* 已开放板块：整张卡可点（点了进「随便逛逛」并摊开该板块目录），要有明确的可点反馈 */
.mini-kb.link { cursor: pointer; transition: background .15s, box-shadow .15s; }
.mini-kb.link:hover { background: #e5ebf8; box-shadow: inset 0 0 0 2px var(--line-strong); }
.mini-kb.link:hover .hint { color: var(--primary); }
.mini-kb-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; }

/* ---- 板块方格「大小均匀」（2026-10-28 用户口径）----
   用户原话：「板块的大小要均匀，考研板块就特别突兀，请修复这个排版的问题。
             每一个板块的介绍要保持内容多少的一致。」
   ⇒ ① 方格用等高行（.kb-grid），所有卡一样高；
     ② 每张卡都有**同样两行**的介绍（.mini-kb-desc，两行截断），内容多少一致；
     ③ 合并组（考研 / 专四专八）的两个子块压成一行小按钮（.kb-chip），
        不再各占一行把这一格顶高。 */
.kb-grid { grid-auto-rows: 1fr; align-items: stretch; }
.kb-grid > .mini-kb { height: 100%; }
.mini-kb-desc {
  font-size: 12.5px; line-height: 1.45; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.9em;
}
.mini-kb-top { min-height: 22px; }
.mini-kb-meta { font-size: 12px; }
/* 合并组里每个子板块的小按钮（英语一 / 英语二、专四 / 专八） */
.kb-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
  color: var(--primary); background: var(--primary-soft);
  border: 1px solid #b9c8ee; border-radius: 5px; padding: 0 6px;
  text-decoration: none; white-space: nowrap;
}
.kb-chip i { font-style: normal; font-weight: 400; color: var(--text-2); font-size: 11px; }
.kb-chip:hover { border-color: var(--primary); background: #e2eaff; }

/* ---- 沐晓独家课板块卡顶部标注条：( PART ) & ( 场景 ) & ( 题量 ) ----
   用户 2026-10-13：「在板块框的最上方标明 ( PART ) & ( 场景 ) & ( 题量 )」。 */
.mini-kb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.mini-kb-top .tag.blk {
  padding: 1px 7px; border-radius: 6px; font-size: 11px;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-2);
}
.mini-kb-top .tag.part-tag {
  background: #17325c; border-color: #17325c; color: #fff; font-weight: 700; letter-spacing: .04em;
}
.mini-kb-top .tag.part { background: var(--surface-2); }
.mini-kb-top .tag.part.off { opacity: .55; }
.mini-kb-top .tag.blue { background: var(--primary-soft); border-color: #b9c8ee; color: var(--primary); font-weight: 600; }

/* 首页「板块目录」里已开放的板块卡：整张可点（进该板块的课程目录），给明确的悬停反馈 */
.card.tight.go { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.card.tight.go:hover { border-color: #b9c8ee; box-shadow: var(--shadow); }
.card.tight.go:hover .hint { color: var(--primary); }

/* ==================================================================
   板块总览（2026-11-01）
     三大栏：沐晓专训（顶部，两子板块左右）→ 通用课程 ｜ 国际课程（下面分左右）。
     配色刻意压暗：沐晓专训用「黛紫」（低饱和），国际课程用「墨蓝」，
     不再用高饱和的中国紫 —— 用户口径：「有紫色配色的请重新调整，太过艳丽」。
   ================================================================== */
.ov-jump { border-color: var(--line); background: var(--surface-2); }

.ov-cat { padding: 14px 16px; }
.ov-cat .card-h { margin-bottom: 10px; }
.ov-zone { border-color: #D6CFDC; background: linear-gradient(180deg, #FBF9FC, #FFFFFF); }
.ov-cat + .ov-cat { margin-top: 14px; }

/* ---------- 课程总览 · 板块配色（2026-11-01 夜改版式后保留） ----------
   参考选课页「选板块」的排版：三大类整幅从上到下 ——
   沐晓专训（两大子板块左右排开）→ 通用课程（3 列卡片）→ 国际课程（简介行 + 3 列 × 5 行学科格）。
   通用 / 国际两卡保留顶边色条（左暖金 / 右墨蓝）作区分。 */
.ov-gen, .ov-igc { position: relative; border-radius: 14px; }
.ov-gen { border-color: #E4D6C2; background: linear-gradient(180deg, #FFFDF9, #FFFFFF);
  box-shadow: inset 0 3px 0 #C79A5B, var(--shadow); }
.ov-igc { border-color: #D3DEE9; background: linear-gradient(180deg, #FBFDFF, #FFFFFF);
  box-shadow: inset 0 3px 0 #3E6E9E, var(--shadow); }
.ov-gen .card-h h2 { color: #8A5C2B; }
.ov-igc .card-h h2 { color: #2C567F; }

/* 国际课程卡内的定位简介行（对齐选课页国际课程简介卡） */
.ov-ig-intro {
  font-size: 12.5px; line-height: 1.7; color: var(--text-2);
  border: 1px dashed #C9D8E6; background: #F7FAFD; border-radius: 10px;
  padding: 8px 12px; margin: 2px 0 10px;
}
.ov-ig-intro b { color: #2C567F; }

/* 沐晓专训：两张子卡左右排开 */
.ov-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 780px) { .ov-sub-grid { grid-template-columns: 1fr; } }
/* 沐晓专训两张子板块卡（2026-11-01 深夜重做，用户口径「更丑了，跟整体更不协调」）：
   回归站内沐晓专训的既定视觉 —— 与选课页 .mini-kb.camp / .mini-kb.culture 完全同一套：
   camp = 淡紫底 #F6F3F8 + 紫左边条 #5B4A69；culture = 橘粉底 #FCF0E9 + 红金双左边条。
   无图标、无渐变、无药丸按钮，信息从上到下：标题行 → 子课名 → 一句简介 → chips → 底部 meta。 */
.ov-sub {
  display: flex; flex-direction: column; gap: 7px; text-decoration: none;
  border-radius: 12px; padding: 14px 16px 13px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.ov-sub:hover { transform: translateY(-2px); }
.ov-sub.camp { border: 1px solid #CFC6D8; background: #F6F3F8; box-shadow: inset 3px 0 0 #5B4A69; }
.ov-sub.camp:hover { border-color: #5B4A69; }
.ov-sub.culture { border: 1px solid #DCA793; background: #FCF0E9; box-shadow: inset 3px 0 0 #B02A1E, inset 6px 0 0 #C9A227; }
.ov-sub.culture:hover { border-color: #B02A1E; }
.ov-sub-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-sub-h b { font-size: 16px; letter-spacing: .01em; }
.ov-sub.camp .ov-sub-h b { color: #463A52; }
.ov-sub.culture .ov-sub-h b { color: #8E1F14; }
.ov-sub .tag.camp { background: #EFEBF3; color: #5B4A69; border-color: #CFC6D8; }
.ov-sub .tag.culture { background: #F9E4DB; color: #B02A1E; border-color: #DCA793; }
.ov-sub-st {
  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  color: #6B5316; background: #FFF6DF; border: 1px solid #EEDCB0;
}
.ov-sub-sub { font-size: 12.5px; font-weight: 600; }
.ov-sub.camp .ov-sub-sub { color: #6F6480; }
.ov-sub.culture .ov-sub-sub { color: #9A4A3A; }
.ov-sub-d {
  font-size: 12.5px; line-height: 1.65; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ov-sub-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 1px; }
.ov-sub.camp .ov-sub-chips .tag { background: #FFFFFF; border-color: #D8D0E0; color: #5B4A69; }
.ov-sub.culture .ov-sub-chips .tag { background: #FFFFFF; border-color: #E8C4B5; color: #A03424; }
.ov-sub-meta { margin-top: auto; padding-top: 3px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ov-sub .ov-sub-meta .hint { font-size: 11.5px; }
.ov-sub.camp .ov-sub-meta .hint { color: #6F6480; }
.ov-sub.culture .ov-sub-meta .hint { color: #9A4A3A; }
.ov-sub-go { font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.ov-sub.camp .ov-sub-go { color: #5B4A69; }
.ov-sub.culture .ov-sub-go { color: #B02A1E; }
.ov-sub:hover .ov-sub-go { text-decoration: underline; }
@media (max-width: 780px) {
  .ov-sub { padding: 12px 13px 11px; }
}

/* 通用课程：板块方格（2026-11-01 夜用户口径「排得太松散，横 5 竖 3」）
   → 桌面 5 列 × 3 行（15 个板块），窄屏逐级降到 3 / 2 / 1 列；
     5 列下卡内边距与字号同步收紧，保证不挤、也不显得空。 */
.ov-kb { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; grid-auto-rows: 1fr; }
.ov-kb > .mini-kb { height: 100%; padding: 9px 10px; gap: 5px; }
.ov-kb > .mini-kb .mini-kb-h { font-size: 13px; }
.ov-kb > .mini-kb .mini-kb-desc { font-size: 11.5px; line-height: 1.5; min-height: 2.9em; }
.ov-kb > .mini-kb .mini-kb-meta { font-size: 11px; }
.ov-kb > .mini-kb .mini-kb-top .tag.blk { padding: 0 5px; font-size: 10.5px; }
@media (max-width: 1360px) { .ov-kb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-kb > .mini-kb { padding: 11px 12px; gap: 6px; }
  .ov-kb > .mini-kb .mini-kb-h { font-size: 14px; }
  .ov-kb > .mini-kb .mini-kb-desc { font-size: 12.5px; }
  .ov-kb > .mini-kb .mini-kb-meta { font-size: 12px; } }
@media (max-width: 900px) { .ov-kb { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ov-kb { grid-template-columns: 1fr; } }

/* 国际课程：学科展开 —— 与左边通用课程**同列数、同列宽**（3 列），15 门走 5 行，左右列线对齐 */
.ov-ig-sys { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.ov-ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; grid-auto-rows: 1fr; }
@media (max-width: 1280px) { .ov-ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ov-ig-grid { grid-template-columns: 1fr; } }
.ov-ig-tile {
  display: flex; flex-direction: column; gap: 2px; min-height: 96px;
  padding: 10px 11px; border-radius: 10px; text-decoration: none;
  border: 1px solid #D6DFEA; background: #FAFCFE;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ov-ig-tile:hover { border-color: #17325C; background: #F2F7FC; box-shadow: 0 2px 10px rgba(23, 50, 92, .08); }
.ov-ig-tile b { font-size: 13.5px; color: #17325C; }
.ov-ig-en { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 与左栏通用课程卡同密度：一句介绍，最多两行（用户口径：介绍只两行就好） */
.ov-ig-desc {
  font-size: 11.5px; line-height: 1.5; color: var(--text-2); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ov-ig-meta { margin-top: auto; padding-top: 4px; font-size: 11.5px; color: var(--muted); }
.ov-ig-tile.soon { background: #FBFBFB; border-style: dashed; }
.ov-ig-tile.soon b { color: var(--text-2); }
.ov-ig-tile.locked { background: #F6F6F7; border-style: dashed; color: var(--muted); cursor: not-allowed; }
.ov-ig-tile.locked b { color: var(--muted); }
.ov-lock-tip {
  font-size: 12.5px; line-height: 1.6; color: #8A4B12; background: #FFF8EE;
  border: 1px solid #F0DDBF; border-radius: 9px; padding: 8px 10px; margin-bottom: 10px;
}
.ov-cat-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ov-igc.is-locked { border-color: #E7E3DA; }

/* 选课 / 加课页（2026-11-01）：国际课程那一类的横条 —— 板块名 + 勾选 + 申请按钮。
   学科格只做「开通后能学什么」的说明，整条可点区域只有按钮，不做整块热区。 */
.ov-ig-head {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid #D6DFEA; background: #F7FAFD; border-radius: 11px;
  padding: 11px 12px; margin-bottom: 10px;
}
/* 选课页里沐晓专训子卡需要在底部对齐按钮行（两卡等高） */
.ov-sub > .row:last-child { margin-top: auto; }
.ov-pick-camp { border-left: 3px solid #5B4A69; }


.trial-resume { border-color: #bcd0ff; background: #f5f8ff; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; display: inline-block; }

.pv {
  position: relative; margin-top: 9px; padding: 10px 12px; max-height: 130px; overflow: hidden;
  background: var(--surface-2); border-radius: 9px; font-size: 13.5px; color: var(--text-2); white-space: pre-wrap;
}
.pv::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36px;
  background: linear-gradient(180deg, rgba(238, 241, 249, 0), var(--surface-2));
}
.pv-lock {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px;
  font-size: 12px; color: var(--warn); background: var(--warn-soft); border-radius: 8px;
}
.pv-ico { position: relative; width: 12px; height: 9px; border: 1.5px solid var(--warn); border-radius: 2px; flex: 0 0 auto; }
.pv-ico::before {
  content: ''; position: absolute; left: 2px; top: -6px; width: 6px; height: 6px;
  border: 1.5px solid var(--warn); border-bottom: none; border-radius: 6px 6px 0 0;
}

.trial-head {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  background: linear-gradient(135deg, #eef3ff, #f7f9ff); border: 1px solid #dbe4ff;
  border-radius: 14px; padding: 16px 18px; margin-bottom: 12px;
}
.trial-head .grow { flex: 1 1 260px; }
.trial-role { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--primary-dark); }
.trial-kb { font-size: 24px; margin: 5px 0 3px; }
.trial-head .sub { font-size: 13px; color: var(--text-2); }

.trial-nav { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tnav {
  border: none; background: none; font: inherit; font-size: 14px; color: var(--text-2);
  padding: 9px 12px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.tnav:hover { color: var(--text); }
.tnav.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.trial-area { min-height: 120px; }

.pbar {
  display: inline-block; vertical-align: middle; width: 110px; height: 6px; margin-right: 6px;
  background: var(--surface-2); border-radius: 999px; overflow: hidden;
}
.pbar > span { display: block; height: 100%; background: var(--primary); }

.foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; padding: 18px 4px 8px; }
.foot a { color: var(--text-2); }

/* ---------- 功能区使用引导（coach mark） ---------- */
.tour-layer { position: fixed; inset: 0; z-index: 120; }
.tour-hole { position: absolute; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55); transition: left .18s, top .18s, width .18s, height .18s; }
.tour-tip {
  position: absolute; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(22, 27, 46, .45); padding: 14px;
}
.tour-step { font-size: 12px; font-weight: 600; color: var(--primary); }
.tour-ttl { font-size: 16px; margin: 6px 0; }
.tour-txt { font-size: 13.5px; color: var(--text-2); margin-bottom: 12px; }
.tour-bar { display: flex; align-items: center; gap: 8px; }

/* ---------- 注册身份选择（学生 / 老师） ---------- */
.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rcard {
  position: relative; display: block; padding: 13px 14px 12px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface);
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.rcard input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rcard .rc-t { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 14.5px; }
.rcard .rc-ic {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--muted);
}
.rcard .rc-d { display: block; color: var(--text-2); font-size: 12.5px; margin-top: 7px; line-height: 1.5; }
.rcard .rc-h {
  display: inline-block; margin-top: 8px; font-size: 11.5px; color: var(--muted);
  background: var(--surface-2); border-radius: 6px; padding: 2px 7px;
}
.rcard:hover { border-color: var(--line-strong); }
.rcard:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary) inset; }
.rcard:has(input:checked) .rc-ic { background: var(--primary); color: #fff; }
.rcard:has(input:checked) .rc-h { background: #fff; color: var(--primary-dark); }
.rcard:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.rcard.pending-flag { border-color: var(--warn); }
@media (max-width: 560px) { .role-cards { grid-template-columns: 1fr; } }

/* 顶栏「待审核」标记 */
.tag.pending-dot { background: var(--warn-soft); color: var(--warn); }

@media (min-width: 760px) {
  .grid.g5 { grid-template-columns: repeat(5, 1fr); }
  .hero { padding: 38px 34px 32px; }
  .hero-ttl { font-size: 40px; }
}

/* ---------- 学生选课（选板块 → 四门课 → 自有课程库） ---------- */
.enr-banner { border-width: 1px; }
.enr-banner.free { border-color: #bcd0ff; background: #f5f8ff; }
.enr-banner.done { border-color: #bfe6d5; background: var(--ok-soft); }
.enr-banner.lock { border-color: #f0c3cc; background: var(--danger-soft); }
.enr-bn-t { font-weight: 700; font-size: 15px; }
.enr-bn-d { color: var(--text-2); font-size: 13px; margin-top: 5px; line-height: 1.6; max-width: 720px; }
.enr-bn-w { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line-strong); color: var(--text-2); font-size: 12.5px; }
.enr-clock { text-align: right; min-width: 130px; }
.enr-clock .k { font-size: 11.5px; color: var(--muted); }
.enr-clock .v { font-size: 24px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.enr-banner.lock .enr-clock .v { color: var(--danger); }
.enr-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
.enr-seg-b { appearance: none; border: none; background: var(--surface); color: var(--text-2); font-family: inherit;
  font-size: 13px; font-weight: 600; padding: 6px 14px; cursor: pointer; border-right: 1px solid var(--line); }
.enr-seg-b:last-child { border-right: none; }
.enr-seg-b.on { background: var(--primary); color: #fff; }
.enr-seg-b:disabled { opacity: .55; cursor: not-allowed; }
.enr-kb { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px; }
.enr-kb-h { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.enr-kb-h h3 { font-size: 16px; }
.enr-kb-n { width: 22px; height: 22px; border-radius: 7px; background: var(--primary-soft); color: var(--primary-dark);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; }
.enr-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .enr-grid { grid-template-columns: repeat(4, 1fr); } }
.enr-cell { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface-2); }
.enr-cell.ok { border-color: #bfe6d5; background: #f2fbf7; }
.enr-cell.none { opacity: .62; }
.enr-cell-h { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.enr-picked { font-weight: 650; font-size: 13.5px; line-height: 1.5; }
.enr-opt { font-weight: 600; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.enr-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.enr-none { font-size: 12.5px; color: var(--muted); }
.enr-sel { width: 100%; margin: 8px 0; font-size: 12.5px; padding: 5px 7px; border-radius: 7px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-family: inherit; }
.enr-cut { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-strong);
  color: var(--muted); font-size: 12.5px; text-align: center; }
.enr-table { overflow-x: auto; }
.enr-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.enr-table th, .enr-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.enr-table th { font-size: 12px; color: var(--muted); font-weight: 600; }

/* 第一步：板块卡片 */
.enr-board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 15px; }
.enr-board.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.enr-board-h { display: flex; align-items: center; gap: 9px; }
.enr-board-h h3 { font-size: 16px; }
.enr-bskills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.enr-bs { font-size: 12px; border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; color: var(--text-2); }
.enr-bs.mock { border-color: #edc98a; background: linear-gradient(135deg, #fff4d9, #ffe7c2); color: #9a5a00; font-weight: 650; }
/* 第 1 步：顶级菜单卡里的子菜单区 */
.enr-subs { display: grid; gap: 10px; margin-top: 12px; }
.enr-subs > .enr-sub:only-child { margin: 0; }
.enr-sub { border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; background: var(--surface-2); }
.enr-sub.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.enr-sub-h { display: flex; align-items: center; gap: 8px; }
.enr-sub-h b { font-size: 14px; }
.enr-sub .enr-bskills { margin-top: 8px; }

/* 第二步：课程结构四格 */
.enr-slots { display: grid; gap: 10px; }
.enr-slot { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 11px;
  padding: 12px; background: var(--surface-2); }
@media (min-width: 760px) { .enr-slot { grid-template-columns: 260px 1fr; align-items: start; } }
.enr-slot.ok { border-color: #bfe6d5; background: #f2fbf7; }
.enr-slot-k { width: 26px; height: 26px; border-radius: 8px; background: var(--primary-soft);
  color: var(--primary-dark); display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.enr-slot-t { font-weight: 600; font-size: 13.5px; line-height: 1.55; }
.enr-pickbox { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface); }

/* 表单里的复选框（如「这是模拟题」） */
.ckbox { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; }
.ckbox input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: #d99a2b; }
.ckbox span { font-size: 13px; color: var(--text-2); line-height: 1.35; }
.enr-diffs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.enr-diff-b { appearance: none; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-2); font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 7px; cursor: pointer; }
.enr-diff-b.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.enr-diff-b:disabled { opacity: .45; cursor: not-allowed; }
.enr-slot .enr-meta { margin-top: 6px; }
.enr-slot .enr-sel { margin-top: 9px; }
.doc-body { white-space: pre-wrap; line-height: 1.75; font-size: 14.5px; }

/* ---------- 英文爱好（全公开阅读） ---------- */
.hobby-band { border-left: 3px solid #12a06a; }
.hz-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hz-sep { font-size: 12px; color: var(--muted); margin: 0 2px 0 8px; font-weight: 600; }
.hz-chip { display: inline-block; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-2); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; line-height: 1.5;
  cursor: pointer; font-family: inherit; text-decoration: none; white-space: nowrap; }
.hz-chip:hover { border-color: var(--primary); color: var(--primary); }
.hz-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.hz-chip.sm { padding: 3px 9px; font-size: 12px; }
.hz-chip.ghost { background: transparent; border-style: dashed; }
.hz-chip.z-lit { border-left: 3px solid #3b5bdb; }
.hz-chip.z-speech { border-left: 3px solid #0f9d58; }
.hz-chip.z-academy { border-left: 3px solid #d9920b; }
.hz-chip.z-world { border-left: 3px solid #7c4dff; }
.hz-zone-h { display: flex; align-items: center; gap: 10px; }
.hz-zone-h .grow { min-width: 0; }
.hz-zone-h b { font-size: 15.5px; }
.hz-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; }
.hz-ic.lit { background: #3b5bdb; }
.hz-ic.speech { background: #0f9d58; }
.hz-ic.academy { background: #d9920b; }
.hz-ic.world { background: #7c4dff; }
.hz-ic.band { width: 42px; height: 42px; font-size: 17px; background: #12a06a; }
.hz-art { cursor: pointer; }
.hz-art:hover .ttl { color: var(--primary); }
.hz-go { font-size: 12.5px; color: var(--primary); white-space: nowrap; align-self: center; }
.crumb { font-size: 12.5px; color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--primary); }


/* ================= 师资介绍海报（统一模板 · 页面内展示版） =================
   与 cloud.js 的 WB.posterCss() 保持一致：页面内、打印、独立开窗三处同款。 */
.poster { --pa: var(--primary); background: var(--surface); color: var(--text);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); max-width: 760px; }
.poster.accent-teal { --pa: #0d9488; }
.poster.accent-violet { --pa: #7c3aed; }
.poster.accent-amber { --pa: #b45309; }
.poster.accent-rose { --pa: #be123c; }
.poster.accent-green { --pa: #15803d; }
.poster.compact { padding: 14px 16px; }
.poster-empty { color: var(--muted); text-align: center; padding: 28px; }

.poster .po-top { display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid var(--pa); padding-bottom: 9px; gap: 10px; }
.poster .po-brand { font-weight: 700; color: var(--pa); font-size: 13.5px; }
.poster .po-badge { font-size: 11.5px; background: var(--pa); color: #fff; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }

.poster .po-head { display: flex; gap: 14px; align-items: center; margin: 16px 0 10px; }
.poster .po-ava { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; background: var(--pa);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.poster .po-id { min-width: 0; }
.poster .po-name { margin: 0; font-size: 21px; }
.poster .po-headline { margin: 2px 0 6px; color: var(--text-2); font-size: 13.5px; }
.poster .po-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.poster .po-tag { font-size: 12px; border: 1px solid var(--pa); color: var(--pa); border-radius: 999px; padding: 1px 9px; }

.poster .po-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 8px 0;
  padding: 9px 12px; background: var(--surface-2); border-radius: 10px; font-size: 13px; color: var(--text-2); }
.poster .po-facts b { color: var(--pa); }
.poster .po-org { color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }

.poster .po-sec { margin: 13px 0; }
.poster .po-sec h3 { margin: 0 0 6px; font-size: 13.5px; color: var(--pa);
  border-left: 3px solid var(--pa); padding-left: 8px; }
.poster .po-text { margin: 0; white-space: pre-wrap; color: var(--text); font-size: 13.5px; }

.poster .po-boards { display: flex; flex-wrap: wrap; gap: 8px; }
.poster .po-board { border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px;
  display: flex; gap: 8px; align-items: center; font-size: 12.5px; background: var(--surface); }
.poster .po-bk { font-weight: 600; }
.poster .po-bd { color: var(--pa); }
.poster .po-by { color: var(--muted); font-size: 11.5px; }

.poster .po-motto { margin: 12px 0; padding: 9px 13px; background: var(--surface-2);
  border-left: 3px solid var(--pa); font-style: italic; color: var(--text-2); font-size: 13.5px; }

.poster .po-proofs, .poster .po-certs { margin: 0; padding-left: 0; list-style: none; }
.poster .po-proofs li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.poster .po-pl { flex: 0 0 128px; color: var(--pa); font-weight: 600; font-size: 12.5px; }
.poster .po-pt { color: var(--text-2); white-space: pre-wrap; font-size: 13px; }
.poster .po-certs li { padding: 3px 0 3px 14px; position: relative; color: var(--text-2); font-size: 13px; }
.poster .po-certs li::before { content: ""; position: absolute; left: 2px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--pa); }

.poster .po-contact { margin-top: 12px; padding: 8px 12px; background: var(--surface-2);
  border-radius: 10px; font-size: 12.5px; color: var(--text-2); }
.poster .po-cl { color: var(--pa); font-weight: 600; margin-right: 8px; }
.poster .po-foot { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px; text-align: right; }

/* 师资墙：卡片列表 */
.twall { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tcard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tcard:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.tcard.on { border-color: var(--primary); background: var(--primary-soft); }
.tcard-h { display: flex; gap: 11px; align-items: center; }
.tcard-ava { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; }
.tcard-n { font-weight: 650; font-size: 15px; }
.tcard-hl { color: var(--text-2); font-size: 12.5px; margin-top: 1px; }
.tcard-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tcard-tags .tag { font-size: 11.5px; }
.tcard-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding-top: 9px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.tcard-foot .sp { flex: 1 1 auto; }
.tcard-st { font-size: 11.5px; border-radius: 999px; padding: 1px 8px; }
.tcard-st.pending { background: var(--warn-soft); color: var(--warn); }
.tcard-st.accepted { background: var(--ok-soft); color: var(--ok); }
.tcard-st.declined { background: var(--danger-soft); color: var(--danger); }
.tcard-st.cancelled { background: var(--surface-2); color: var(--muted); }

/* 通用数据表（管理端用户 / 师资明细等） */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { border-bottom: 1px solid var(--line); padding: 8px 9px; text-align: left; vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 550; font-size: 12px; white-space: nowrap; background: var(--surface-2); }
.tbl tbody tr:hover { background: var(--surface-2); }

/* 资质申报表（老师端） */
.qual-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.qual-tbl th, .qual-tbl td { border-bottom: 1px solid var(--line); padding: 7px 6px; text-align: left; vertical-align: top; }
.qual-tbl th { color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; }
.qual-tbl select, .qual-tbl input { width: 100%; }
.qual-tbl .q-proof { min-width: 220px; }
.qual-tbl .q-del { color: var(--danger); cursor: pointer; white-space: nowrap; }
.qual-add { margin-top: 8px; }

/* 师资矩阵（管理端科学编排） */
.tmatrix { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tmatrix th, .tmatrix td { border: 1px solid var(--line); padding: 7px 8px; vertical-align: top; }
.tmatrix th { background: var(--surface-2); color: var(--text-2); font-weight: 600; white-space: nowrap; }
.tmatrix td.cell { min-width: 150px; }
.tmatrix .tc-n { display: block; font-weight: 600; }
.tmatrix .tc-p { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.tmatrix tr.gap td.cell:empty::after { content: "缺口"; color: var(--danger); font-size: 11.5px; }
.tmatrix td.gapcell { background: var(--danger-soft); }
.tmatrix td.filled { background: var(--ok-soft); }

/* 简历表单 */
.resume-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.resume-grid label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 4px; }
.resume-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .resume-2col { grid-template-columns: 1fr; } }
.poster-print { max-width: none; }

/* ---------- 课时表：每节课的主题标签与课时级约课 ---------- */
.lesson-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lesson-row {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface);
}
.lesson-row:hover { border-color: var(--primary); }
.ls-seq {
  flex: 0 0 auto; min-width: 52px; text-align: center;
  font-size: 12px; font-weight: 650; color: var(--primary);
  background: var(--primary-soft); border-radius: 8px; padding: 4px 6px;
}
.ls-main { flex: 1 1 auto; min-width: 0; }
.ls-title { font-weight: 600; font-size: 14px; }
.ls-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ls-obj { color: var(--text-2); font-size: 12.5px; margin-top: 6px; }
.ls-side {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; min-width: 108px;
}
.ls-tn { font-size: 12px; color: var(--text-2); }
.ltag {
  font-size: 11.5px; border-radius: 6px; padding: 2px 7px;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line);
}
.on-dot { font-size: 11.5px; color: var(--ok); font-weight: 600; }
.on-dot::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); margin-right: 4px; vertical-align: middle;
}
/* 分段切换（预选 / 当场挑） */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.seg-b {
  border: 0; background: transparent; cursor: pointer; padding: 5px 14px;
  font-size: 12.5px; color: var(--text-2); font-family: inherit;
}
.seg-b.on { background: var(--primary); color: #fff; font-weight: 600; }
.lpick { cursor: pointer; }
@media (max-width: 640px) {
  .lesson-row { flex-wrap: wrap; }
  .ls-side { align-items: flex-start; min-width: 0; flex-direction: row; flex-wrap: wrap; }
}

/* 音频：后台挂接的音频播放按钮 */
.audio-btn .ab-ico { margin-right: 5px; font-size: 12px; }
.audio-btn.on { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }
.audio-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.aud-note { font-size: 12px; color: var(--muted); }
.aud-ico { font-size: 13px; margin-right: 4px; }
.lesson-row .audio-btn { flex: 0 0 auto; }

/* ==================================================================
   双栏课堂（讲课 = 左讲义 / 右笔记；练习 = 左文章 / 右题目·一键出分）
   全部选择器以 .cls- 开头，避免与站内既有类名冲突。
   ================================================================== */
.main.wide { max-width: 1580px; }

.cls-crumb { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.cls-crumb .kb { background: var(--primary-soft); color: var(--primary-dark); border-radius: 6px; padding: 2px 8px; font-weight: 650; font-size: 12px; }
.cls-crumb .lv { background: var(--warn-soft); color: var(--warn); border-radius: 6px; padding: 2px 8px; font-weight: 650; font-size: 12px; }
.cls-crumb .tt { background: #f3f0ff; color: #5b21b6; border-radius: 6px; padding: 2px 8px; font-weight: 650; font-size: 12px; }
.cls-crumb .cur { color: var(--text); font-weight: 600; }
.cls-crumb .sep { opacity: .55; }
.cls-crumb .pill { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
.cls-crumb a.pill:hover { text-decoration: none; border-color: var(--primary); color: var(--primary); }

.cls-subtabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cls-stab { appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer;
  padding: 8px 15px; font-size: 13.5px; color: var(--text-2); border-radius: 9px; font-family: inherit; font-weight: 550; }
.cls-stab:hover { background: var(--surface); border-color: var(--line); }
.cls-stab.on { background: var(--surface); border-color: var(--primary); color: var(--primary-dark); box-shadow: var(--shadow); }
.cls-stab .tn { font-size: 11px; color: var(--muted); margin-left: 5px; font-weight: 400; }
/* 只有「学习」一个页签时（该课时没有课堂练习，2026-11-01）：不做成可点的页签样式，
   只当一行标签用，右边照样留「专注模式」。 */
.cls-subtabs.solo .cls-stab { cursor: default; background: none; border-color: transparent; box-shadow: none;
  color: var(--text); font-weight: 650; padding-left: 4px; }
.cls-subtabs.solo .cls-stab:hover { background: none; border-color: transparent; }

.cls-tip { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; border-radius: var(--radius); padding: 9px 12px; margin-bottom: 12px; }
.cls-tip.info { background: var(--primary-soft); color: #1e3a8a; }
.cls-tip.lock { background: var(--warn-soft); color: #7a4d10; }
.cls-tip.ok { background: var(--ok-soft); color: #0a5c40; }
.cls-tip b { font-weight: 650; }
.cls-tip svg { flex: 0 0 auto; margin-top: 2px; }

/* ===== 我的笔记区（2026-10-19 自学版）：课堂页双栏下方的整宽笔记卡 ===== */
.cls-notecard { margin-top: 12px; }
.cls-notecard .cls-pane-h { border-bottom: 1px solid var(--line); }
.cls-notes-ta { display: block; width: 100%; min-height: 120px; box-sizing: border-box;
  border: 0; outline: none; resize: vertical; padding: 12px 14px; font-family: inherit;
  font-size: 13.5px; line-height: 1.8; color: var(--text); background: var(--surface);
  border-radius: 0 0 var(--radius) var(--radius); }
.cls-notes-ta:focus { background: #fcfdff; }

/* 只读小标（视频窗等用） */
.cls-rochip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; }

/* ===== 游客浏览防护（2026-10-19）：未注册只能看，不能复制/打印/下载 ===== */
.guest-guarding #view { user-select: none; -webkit-user-select: none; }
.guest-wm { position: fixed; inset: 0; z-index: 900; pointer-events: none; overflow: hidden; }
/* 教师浏览板块内容时的水印（2026-10-21）：与游客同一套只读防护，只是换成老师身份 */
.guest-wm.teacher-wm span { color: rgba(120, 80, 40, .13); }
.guest-wm span { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%) rotate(-24deg);
  font-size: 15px; font-weight: 600; color: rgba(47,91,234,.10); white-space: nowrap; letter-spacing: 1px; }
@media print {
  body.guest-guarding #view, body.guest-guarding .tabbar { display: none !important; }
  body.guest-guarding::before { content: '沐晓英语：课程内容仅供注册学员学习，游客不可打印或下载';
    display: block; padding: 40px; text-align: center; color: #8a5a12; font-size: 15px; }
}


/* ===== 在线电子书库：站内内嵌外部翻页书，一屏铺满、整页不滚 ===== */
body.ebook-on { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
@supports (height: 100dvh) { body.ebook-on { height: 100dvh; } }
body.ebook-on .topbar, body.ebook-on .tabbar { flex: 0 0 auto; }
body.ebook-on .main {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1580px;
  display: flex; flex-direction: column; padding-bottom: 14px; overflow: hidden;
}
body.ebook-on .page-head { flex: 0 0 auto; }
.eb-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.eb-frame { flex: 1 1 auto; min-height: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.eb-ifr { display: block; width: 100%; height: 100%; border: 0; }
.eb-tip { flex: 0 0 auto; margin-top: 7px; }
@media (max-width: 820px) {
  /* 手机：不锁屏，书框给一屏略小的高度，整页可以自然滚一点 */
  body.ebook-on { display: block; height: auto; overflow: visible; }
  body.ebook-on .main { display: block; overflow: visible; }
  .eb-wrap { display: block; }
  .eb-frame { height: calc(100vh - 232px); min-height: 420px; }
  @supports (height: 100dvh) { .eb-frame { height: calc(100dvh - 232px); } }
}

.cls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.cls-grid.pr { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.cls-pane { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-width: 0;
  height: calc(100vh - 258px); min-height: 460px; }
.cls-grid.pr .cls-pane { height: calc(100vh - 274px); min-height: 500px; }
.cls-pane-h { flex: 0 0 auto; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cls-pane-t { font-weight: 650; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.cls-pane-t .ic { width: 22px; height: 22px; border-radius: 6px; background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cls-pane-t .ic.g { background: var(--ok-soft); color: var(--ok); }
.cls-pane-t .cnt { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.cls-sp { flex: 1 1 auto; }
.cls-scroll { flex: 1 1 auto; overflow: auto; position: relative; overscroll-behavior: contain; }
.cls-scroll.note { display: flex; }
.cls-inkwrap { position: relative; padding: 14px 16px 30px; }
canvas.cls-ink { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; touch-action: none; }
canvas.cls-ink.on { cursor: crosshair; }
.cls-pane-f { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--surface-2); padding: 7px 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }

/* 训练营（泛听）的学习界面：左栏是本节视频，不是课程原文（用户 2026-10-08 定稿）。
   视频在栏内等比铺满、竖屏也不溢出；没有视频时给一块可读的引导，而不是空白栏。 */
.cls-videowrap {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; background: #0b1020;
}
.cls-videowrap video { width: 100%; max-height: 100%; border-radius: 10px; background: #000; display: block; }
.cls-videowrap .loading { color: #c8d2e0; background: none; padding: 10px; }
.cls-videofoot { color: #9fb0c6; font-size: 12px; text-align: center; }
.cls-videowrap.empty { background: var(--surface-2); }
.cls-video-empty { text-align: center; color: var(--text-2); font-size: 13px; line-height: 1.7; max-width: 340px; }
.cls-video-empty b { display: block; margin-bottom: 5px; color: var(--text); font-size: 14px; }
.cls-video-empty div { color: var(--muted); font-size: 12.5px; }

.cls-tools { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.cls-tools .btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.cls-tools .btn.on:hover { color: #fff; }
.cls-sw { width: 22px; height: 22px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); flex: 0 0 auto; }
.cls-sw.on { border-color: var(--text); transform: scale(1.06); }
.cls-sw:disabled { opacity: .35; cursor: not-allowed; }
.cls-div { width: 1px; height: 20px; background: var(--line-strong); display: inline-block; }

.cls-doc h3 { font-size: 14.5px; margin: 18px 0 8px; padding-left: 9px; border-left: 3px solid var(--primary); line-height: 1.4; }
.cls-doc h3:first-child { margin-top: 0; }
.cls-doc h4 { font-size: 13.5px; margin: 14px 0 6px; }
.cls-doc p { margin: 8px 0; }
.cls-doc ul, .cls-doc ol { margin: 8px 0; padding-left: 20px; }
.cls-doc li { margin: 5px 0; }
.cls-doc .lead { background: var(--primary-soft); border: 1px solid #c7d7fe; border-radius: 9px; padding: 10px 12px; font-size: 13px; color: #1e3a8a; }
.cls-doc .en { background: #fcfcfd; border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: 9px; padding: 11px 13px; margin: 10px 0; font-family: Georgia, "Times New Roman", serif;
  font-size: 14.5px; line-height: 1.9; }
.cls-doc .lw { background: #fff3c4; border-radius: 3px; padding: 0 2px; font-style: normal; }
.cls-doc .cn { color: var(--text-2); font-size: 12.5px; margin-top: 6px; }
.cls-doc table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12.5px; }
.cls-doc th, .cls-doc td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; }
.cls-doc th { background: var(--surface-2); font-weight: 600; color: var(--text-2); }
.cls-doc .k { font-family: Georgia, serif; color: var(--primary); font-weight: 600; }
.cls-doc .note { font-size: 12.5px; color: var(--text-2); background: var(--surface-2);
  border: 1px dashed var(--line-strong); border-radius: 9px; padding: 9px 11px; margin: 10px 0; }

/* ---- 全站正文与表格统一排版（2026-11-01 夜，用户口径）----
   「考研里面课程的原文、试题与解析的文字与表格排版，非常不整洁美观，全站核查，
    遇到了排版不美观就调整。」—— 练习题页（#/exam）的 .ex-body 此前**没有任何表格样式**，
    落到浏览器默认（无边框、不折行、列宽失衡）；这里把课堂 .cls-doc 的那套表格式
    推广到全站所有正文容器，并统一段距 / 行高 / 长词折行 / 图片圆角。 */
.ex-body table, .og-src table, .th-topic table, .cls-doc table {
  width: 100%; border-collapse: collapse; margin: 10px 0;
  font-size: 13px; line-height: 1.6; table-layout: auto;
}
.ex-body th, .ex-body td, .og-src th, .og-src td, .th-topic th, .th-topic td {
  border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top;
  overflow-wrap: break-word; word-break: normal;
}
.ex-body th, .og-src th, .th-topic th {
  background: var(--surface-2); font-weight: 650; color: var(--text-2); white-space: nowrap;
}
.ex-body tr:nth-child(even) td, .og-src tr:nth-child(even) td { background: rgba(0, 0, 0, .014); }
.ex-body p, .og-src p { margin: 0 0 10px; }
.ex-body li, .og-src li { margin: 0 0 4px; }
.ex-body img, .og-src img, .cls-doc img { max-width: 100%; height: auto; border-radius: 8px; }
.ex-body, .og-src, .th-topic, .cls-doc { overflow-wrap: break-word; }
/* 代码块：ASCII 示意图（考研讲义的「全卷结构树」等）用 pre 不折行，
   会把正文容器撑出 70~80px 横向溢出 —— 改成块内横向滚动，容器永不撑破。 */
.ex-body pre, .og-src pre, .th-topic pre, .cls-doc pre,
.ex-body pre > code, .og-src pre > code, .th-topic pre > code, .cls-doc pre > code {
  display: block; max-width: 100%; overflow-x: auto; white-space: pre;
}
.ex-body pre, .og-src pre, .th-topic pre, .cls-doc pre {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin: 10px 0; font-size: 12.5px; line-height: 1.55;
}
.ex-body pre > code, .og-src pre > code, .th-topic pre > code, .cls-doc pre > code {
  background: none; border: none; padding: 0; margin: 0;
}
/* 行内 code：长串（URL/变量名）按词折行，不许撑破段落 */
.ex-body code, .og-src code, .th-topic code { word-break: break-word; }

/* ---- 正文分级标题（2026-11-01 深夜，用户口径「讲义/解析/原文没有主次、看不清逻辑」）----
   上传正文里「一、二、…」「（一）（二）…」「Part N」式的节标题原本只是一段加粗文字，
   与正文加粗词混成一片。WB.docReflow 把它们升级为 .doc-h1 / .doc-h2，层级一眼可辨：
   一级 = 大标题（色条 + 浅底）；二级 = 小标题（圆点 + 加重）。 */
.ex-body .doc-h1, .og-src .doc-h1 {
  margin: 20px 0 10px; padding: 7px 12px;
  font-size: 14.5px; font-weight: 700; line-height: 1.5; color: #6B4A22;
  background: linear-gradient(90deg, #F6EFE4 0%, rgba(246, 239, 228, 0) 78%);
  border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0;
}
.ex-body .doc-h1:first-child, .og-src .doc-h1:first-child { margin-top: 2px; }
.ex-body .doc-h2, .og-src .doc-h2 {
  margin: 15px 0 7px; font-size: 13.5px; font-weight: 700; line-height: 1.5; color: #5A4630;
  display: flex; align-items: baseline; gap: 7px;
}
.ex-body .doc-h2::before, .og-src .doc-h2::before {
  content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); opacity: .55; transform: translateY(-2px);
}
.ex-body .doc-h1 b, .ex-body .doc-h1 strong,
.ex-body .doc-h2 b, .ex-body .doc-h2 strong { font-weight: inherit; }
/* 有真标题之后，正文里的加粗强调不再需要顶满字重 —— 略降一档，标题才压得住 */
.ex-body p b, .ex-body p strong, .ex-body li b, .ex-body li strong,
.og-src p b, .og-src p strong, .og-src li b, .og-src li strong { font-weight: 620; }
/* 列表与引用：编号上色、间距一致、引用块成块（不再是裸缩进） */
.ex-body ol, .ex-body ul, .og-src ol, .og-src ul { margin: 8px 0 12px; padding-left: 22px; }
.ex-body ol > li, .ex-body ul > li, .og-src ol > li, .og-src ul > li { margin: 0 0 7px; }
.ex-body ol > li::marker, .og-src ol > li::marker { color: var(--primary); font-weight: 700; }
.ex-body ul > li::marker, .og-src ul > li::marker { color: var(--primary); }
.ex-body blockquote, .og-src blockquote {
  margin: 10px 0; padding: 8px 12px; color: var(--text-2);
  border-left: 3px solid var(--line-strong); background: var(--surface-2);
  border-radius: 0 8px 8px 0;
}
.ex-body blockquote p:last-child, .og-src blockquote p:last-child { margin-bottom: 0; }

/* 阅读理解清单里的篇号小徽标（文章标题为主、篇号收小） */
.ex-no {
  display: inline-block; font-size: 11px; line-height: 1.5; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px;
  padding: 0 6px; margin-right: 7px; vertical-align: 1px; white-space: nowrap;
}

/* ---- Markdown 表格容器（2026-10-30 用户口径：「涉及表格的地方有一些乱」）----
   考研课程 md 里的教学设计表常有 5~6 列、几十行；塞进课堂三栏的窄列会挤成竖条。
   现在 mdToHtml 给每张表外套 .md-tbwrap：超宽时在本栏内横向滚动，表头不折行、单元格按词折行。 */
.md-tbwrap { max-width: 100%; overflow-x: auto; margin: 10px 0; -webkit-overflow-scrolling: touch; }
.md-tbwrap > table.md-tb {
  width: 100%; min-width: 460px; border-collapse: collapse;
  font-size: 12.5px; line-height: 1.62;
}
.md-tbwrap > table.md-tb th, .md-tbwrap > table.md-tb td {
  border: 1px solid var(--line); padding: 7px 9px;
  text-align: left; vertical-align: top; word-break: break-word;
}
.md-tbwrap > table.md-tb th {
  background: var(--surface-2); color: var(--text-2); font-weight: 600; white-space: nowrap;
}
.md-tbwrap > table.md-tb tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .012); }

.cls-drill { border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; margin: 0 0 10px; background: var(--surface); }
.cls-drill-h { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.cls-drill-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: var(--primary-soft);
  color: var(--primary-dark); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cls-drill-t { font-weight: 600; font-size: 13px; }
.cls-drill-q { font-size: 13px; }
.cls-drill-a { margin-top: 8px; border-top: 1px dashed var(--line-strong); padding-top: 8px; font-size: 12.5px; color: var(--text-2); display: none; }
.cls-drill.open .cls-drill-a { display: block; }
.cls-chip { font-size: 11.5px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2);
  border-radius: 6px; padding: 2px 8px; display: inline-block; margin: 0 3px 3px 0; }

.cls-notewrap { flex: 1 1 auto; min-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 22px; }
.cls-notetip { background: #fffef7; border: 1px dashed #e4d9a8; border-radius: 9px; padding: 9px 11px;
  font-size: 12px; color: #7a5c00; line-height: 1.7; }
textarea.cls-notes { flex: 1 1 auto; width: 100%; min-height: 300px; border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 12px 13px; font-size: 14.5px; line-height: 2; resize: none;
  color: var(--text); background: #fffefb;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 28px, #eff2f6 28px, #eff2f6 29px);
  background-position: 0 12px; }
textarea.cls-notes:disabled { background: #f8fafc; color: var(--text-2); }

.cls-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 13px 15px; margin-bottom: 12px; }
.cls-card-h { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cls-card-h h2 { font-size: 14.5px; }
.cls-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cls-sec-h h3 { font-size: 13.5px; }
.cls-badge { font-size: 11px; border-radius: 6px; padding: 2px 7px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text-2); }
.cls-badge.p { background: var(--primary-soft); border-color: #c7d7fe; color: var(--primary-dark); font-weight: 600; }
.cls-badge.g { background: var(--ok-soft); border-color: #b7e4c7; color: #14532d; }
/* 2026-10-29：课堂练习页「作答期不可查词」提示条（提交出分后整条消失） */
.cls-nolook {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.6;
  color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 9px;
}
.cls-nolook b { color: #78350f; }
.cls-nolook-when {
  margin-left: auto; font-size: 11px; font-weight: 700; color: #78350f;
  background: #fde68a; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.cls-q { border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; margin-bottom: 9px; background: var(--surface); }
.cls-q.done { border-color: #c7d7fe; }
.cls-q-w { font-size: 13px; margin-bottom: 8px; color: var(--text); }
.cls-q-w .qn { font-weight: 650; color: var(--primary); margin-right: 5px; }
.cls-opts { display: flex; flex-direction: column; gap: 5px; }
.cls-opt { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; cursor: pointer; font-size: 12.8px; background: var(--surface); }
.cls-opt:hover { border-color: var(--primary); }
.cls-opt input { width: auto; margin: 3px 0 0; accent-color: var(--primary); flex: 0 0 auto; }
.cls-opt .ol { font-weight: 650; color: var(--text-2); flex: 0 0 auto; }
.cls-opt.on { border-color: var(--primary); background: var(--primary-soft); }
.cls-opt.right { border-color: #86d9a8; background: var(--ok-soft); }
.cls-opt.wrong { border-color: #f4b6b4; background: var(--danger-soft); }
.cls-blank { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cls-blank .bt { font-size: 12.8px; flex: 1 1 220px; min-width: 0; }
.cls-blank input[type=text] { width: auto; flex: 0 0 auto; min-width: 150px; font-size: 15px; }
textarea.cls-ta { width: 100%; min-height: 96px; font-size: 15px; line-height: 1.7; }
table.cls-corr { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.cls-corr th, table.cls-corr td { border: 1px solid var(--line); padding: 8px 9px; text-align: left; vertical-align: middle; }
table.cls-corr th { background: var(--surface-2); font-weight: 600; color: var(--text-2); font-size: 12px; }
table.cls-corr .cline { font-family: Georgia, serif; }
table.cls-corr select { width: auto; min-width: 96px; }
table.cls-corr input[type=text] { width: 100%; min-width: 90px; }
.cls-res { margin-top: 6px; font-size: 12.5px; padding: 7px 9px; border-radius: 7px; line-height: 1.6; }
.cls-res.ok { background: var(--ok-soft); color: #0a5c40; }
.cls-res.no { background: var(--danger-soft); color: #7f1d1d; }
.cls-res.part { background: var(--warn-soft); color: #7a4d10; }
.cls-res .rf { color: var(--text-2); }
.cls-marks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cls-mk { font-size: 11px; border-radius: 5px; padding: 2px 6px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text-2); }
.cls-mk.hit { background: var(--ok-soft); border-color: #b7e4c7; color: #14532d; }
.cls-score { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cls-num { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.cls-num small { font-size: 13px; color: var(--muted); font-weight: 400; }
.cls-main-t { font-size: 12.5px; color: var(--text-2); }
.cls-ai { font-size: 12px; color: var(--primary-dark); background: var(--primary-soft); border-radius: 7px; padding: 6px 9px; margin-top: 7px; }
.cls-pop { position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(22, 27, 46, .18); padding: 7px; display: flex;
  gap: 6px; align-items: center; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .cls-grid, .cls-grid.pr { grid-template-columns: 1fr; }
  .cls-pane { height: auto; min-height: 0; }
  .cls-pane .cls-scroll { max-height: 62vh; }
  .cls-crumb .hide-sm { display: none; }
}

/* ===== 课堂笔记：两份各自独立 · 学生与老师都可随时下载 ===== */
.cls-note2 { border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; background: var(--surface);
  display: flex; flex-direction: column; gap: 8px; }
.cls-note2.mine { flex: 1 1 auto; }
.cls-note2.mine textarea.cls-notes { min-height: 190px; }
.cls-note2-h { display: flex; align-items: center; gap: 8px; }
.cls-peerbox { font-size: 12.5px; line-height: 1.9; white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  min-height: 84px; max-height: 300px; overflow: auto; color: var(--text); }
.cls-peerbox.mut { color: var(--muted); }

/* ===== 课堂笔记汇总：学生端「我的笔记库 → 课堂笔记」/ 教师端「教学笔记 → 学生的课堂笔记」 ===== */
.nb-tip { background: var(--primary-soft); border: 1px solid #c7d7fe; border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px; line-height: 1.8; color: #1e3a8a; margin-bottom: 12px; }
.nb-list { display: flex; flex-direction: column; gap: 12px; }
.nb-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.nb-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nb-top b { font-size: 14px; }
.nb-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.nb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.nb-box { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--surface-2); min-width: 0; }
.nb-box.t { background: #fffefb; }
.nb-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nb-b { font-size: 13px; line-height: 1.9; white-space: pre-wrap; word-break: break-word;
  max-height: 220px; overflow: auto; }
.nb-b.mut { color: var(--muted); }
.nb-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 760px) { .nb-grid { grid-template-columns: 1fr; } }

/* ===== 三区阅读布局：左「课程原文」/ 中「课程讲义」/ 右「课堂笔记」 =====
   科学布局的口径：原文与讲义是并列的学习区，笔记是伴随性的记录区。
   ≥1280px 三栏并排（笔记固定 340px，可一键收起把宽度全给正文）；
   中窄屏笔记改为右侧抽屉，优先保住「原文 + 讲义」的并列阅读宽度（英文原文在 380px 以下会塌）；
   ≤820px 原文 / 讲义纵向堆叠，笔记仍是抽屉。 */
.cls-grid.read { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px; }
.cls-grid.read.no-note { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cls-grid.read .cls-pane { height: calc(100vh - 268px); min-height: 460px; }
.cls-grid.read .note-pane { background: var(--surface-2); }
.cls-grid.read .note-pane .cls-pane-h,
.cls-grid.read .note-pane .cls-scroll.note { background: var(--surface); }

/* 原文栏：由后台录入内容自带 .en / .cn / .lw 等类名排版，这里只做轻微的字号区分 */
.cls-doc.src { font-size: 14px; }
.cls-doc.src > .en { font-size: 15px; }

/* 本节媒体条：贴在讲义栏顶部（视频 / 音频 / 讲义附件），横条最省纵向空间 */
.cls-mediabar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 12px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--primary-soft), var(--surface)); font-size: 12px; }
.cls-mediabar .mb-t { font-weight: 650; color: var(--primary-dark); flex: 0 0 auto; }
.cls-mediabar .btn.sm { font-size: 12px; }
.mc-ico { margin-right: 5px; font-size: 11px; opacity: .85; }
.mc-sz { margin-left: 6px; font-size: 11px; color: var(--muted); }

@media (min-width: 1280px) {
  .cls-grid.read.no-note .note-pane { display: none; }
}
@media (max-width: 1279px) {
  .cls-grid.read, .cls-grid.read.no-note { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cls-grid.read .cls-pane { height: calc(100vh - 262px); }
  .cls-grid.read .note-pane {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
    width: min(430px, 94vw); height: 100vh; min-height: 0;
    border-radius: 0; box-shadow: -16px 0 44px rgba(22, 27, 46, .22);
    transform: translateX(103%); transition: transform .22s ease;
  }
  .cls-grid.read .note-pane.open { transform: none; }
}
@media (max-width: 820px) {
  .cls-grid.read, .cls-grid.read.no-note { grid-template-columns: 1fr; }
  .cls-grid.read .cls-pane { height: auto; min-height: 0; }
  .cls-grid.read .cls-pane .cls-scroll { max-height: none; }
  .cls-grid.read .note-pane { width: min(430px, 96vw); height: 100vh; min-height: 0; }
}

/* ===== 家庭作业面板 ===== */
.cls-hw-mask { position: fixed; inset: 0; background: rgba(22, 27, 46, .5); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 22px; }
.cls-hw { background: var(--surface); border-radius: 14px; box-shadow: 0 18px 48px rgba(22, 27, 46, .3);
  width: min(1080px, 100%); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.cls-hw-h { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.cls-hw-t { font-size: 15px; font-weight: 700; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.cls-hw-t .tn { font-size: 12px; color: var(--muted); font-weight: 400; }
.cls-hw-scroll { flex: 1 1 auto; overflow: auto; padding: 14px 16px 20px; }
.cls-hw-f { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-top: 1px solid var(--line);
  background: var(--surface-2); flex-wrap: wrap; }
.cls-hw-basis { background: var(--primary-soft); border: 1px solid #c7d7fe; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.cls-hw-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; }
.cls-hw-note { font-size: 12px; line-height: 1.8; color: #1e3a8a; }
.cls-hw-score { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--ok-soft);
  border: 1px solid #b7e4c7; border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }
.cls-hw-big { font-size: 27px; font-weight: 700; color: #14532d; line-height: 1.1; }
.cls-hw-big small { font-size: 12px; font-weight: 400; color: var(--muted); }
.cls-hw-bgs { display: flex; gap: 6px; flex-wrap: wrap; }
.cls-hw-hist { font-size: 11.5px; color: var(--text-2); }
@media (max-width: 1000px) { .cls-hw-mask { padding: 8px; } .cls-hw { max-height: 96vh; } }

/* ---------- 教师端「学生工作台」与「学生子工作台」 ---------- */
.ws-card { display: flex; flex-direction: column; }
.ws-head { display: flex; align-items: flex-start; gap: 10px; }
.ws-head-m { flex: 1 1 auto; min-width: 0; }
.ws-ava { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--primary-soft);
  color: var(--primary-dark); font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.ws-name { font-size: 15.5px; font-weight: 650; }

.ws-mini-list { display: flex; flex-direction: column; margin-top: 12px; }
.ws-mini { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--line); min-width: 0; }
.ws-mini:first-child { border-top: 0; }
.ws-mini-t { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-mini-n { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.ws-kvs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.ws-kv { background: var(--surface-2); border-radius: 9px; padding: 8px 10px; }
.ws-kv .k { font-size: 11.5px; color: var(--muted); }
.ws-kv .v { font-size: 14px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ws-kv .v small { font-size: 11.5px; font-weight: 400; color: var(--muted); }

.ws-sub { font-size: 13px; font-weight: 650; color: var(--text-2); margin-bottom: 9px; }

.ws-course { border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: var(--surface); }
.ws-c-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ws-c-h .sp { flex: 1 1 auto; }
.ws-c-t { font-size: 14px; font-weight: 620; margin: 7px 0 6px; }

@media (min-width: 760px) { .ws-kvs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) {
  .ws-head { flex-wrap: wrap; }
  .ws-head .btn { width: 100%; }
  .ws-kvs { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 课件文件槽位（后台「知识库管理」：上传替代文本框） ---------- */
.doc-slot { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong);
  background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.doc-slot.empty { display: block; background: #fffdf6; border-style: dashed; }
.doc-slot.empty b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.doc-slot.empty span { color: var(--muted); font-size: 12.5px; }
.doc-slot .ds-ico { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--primary-soft); color: var(--primary-dark); border-radius: 6px; padding: 4px 8px; }
.doc-slot .ds-main { flex: 1 1 auto; min-width: 0; }
.doc-slot .ds-main b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.doc-slot .ds-main i { display: block; font-style: normal; color: var(--muted); font-size: 12px; margin-top: 2px; }
details.adv { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fbfcff; }
details.adv > summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
details.adv[open] > summary { margin-bottom: 8px; }
.doc-prev { position: relative; max-height: 62vh; overflow: auto; }
.doc-page { display: block; width: 100%; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }

/* ---------- 课堂内容防护层 ----------
   .cls-guard 罩住「课程原文 / 课程讲义 / 阅读文章」三栏：禁选中、禁拖动图片。
   .cls-wm 是水印层（品牌平铺 + 每人不同的身份行），z-index 压正文、垫在画笔 canvas 之下。 */
.cls-guard { user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; }
.cls-guard img { -webkit-user-drag: none; }
.cls-wm { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.cls-wm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-rows: 76px; align-items: center; justify-items: center;
  transform: rotate(-18deg) scale(1.45); transform-origin: center; }
.cls-wm-grid span { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: #1f3a63;
  opacity: .085; white-space: nowrap; }
.cls-wm-tag { position: absolute; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: #1f3a63; opacity: .17; white-space: nowrap; }
.cls-wm-tag:nth-of-type(1) { top: 12px; left: 14px; }
.cls-wm-tag:nth-of-type(2) { bottom: 12px; right: 14px; }
.cls-wm-tag:nth-of-type(3) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.cls-docchip { flex: 0 0 auto; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.cls-pages { display: flex; flex-direction: column; gap: 10px; }
.cls-docpage { display: block; width: 100%; border: 1px solid var(--line); border-radius: 6px; }

/* 打印：课堂里按 Ctrl+P / 用浏览器菜单打印，只会得到一张「不支持打印」的提示页 */
@media print {
  body.cls-guarding .main { display: block !important; }
  body.cls-guarding .main > * { display: none !important; }
  body.cls-guarding .main::after {
    content: "本页的课程原文与课程讲义仅支持在线学习，不提供打印与导出。";
    display: block; padding: 40mm 14mm; text-align: center; font-size: 15pt; line-height: 1.9; color: #333;
  }
}

/* 2026-11-01：超级管理员例外 —— 他要用「导出 / 打印课件」交付与归档，
   所以课堂正文对他可选中、可直接 Ctrl+P（cls-guarding 类本身保留，专注模式布局靠它）。 */
body.cls-super.cls-guarding .cls-guard,
body.cls-super.cls-guarding .cls-guard * { user-select: text; -webkit-user-select: text; }
@media print {
  body.cls-super.cls-guarding .main > * { display: revert !important; }
  body.cls-super.cls-guarding .main::after { content: none !important; display: none !important; }
}

/* ---------- 练习区：按板块差异化（听 / 说 / 读 / 写） ----------
   练习区外面包一层 .cls-practice，顶部常驻「本节媒体」条，
   四套左右两栏的形态差异只体现在 .cls-grid.pr.sk-* 与各自的栏内组件上。 */
.cls-practice { display: flex; flex-direction: column; gap: 8px; }
.cls-practice > .cls-mediabar { flex: 0 0 auto; }
.cls-practice > .cls-grid.pr .cls-pane { height: calc(100vh - 330px); }

/* 练习区顶部媒体条 */
.cls-mediabar.top { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px;
  background: var(--surface); }
.cls-mediabar.top.empty { background: #fffdf6; border-style: dashed; }
.cls-mediabar .mb-hint { color: var(--muted); font-size: 12.5px; line-height: 1.7; }

/* 听力：大号音频播放条（作答期也高亮可见） */
.cls-audiobar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin: 0 0 10px; border-radius: var(--radius);
  background: linear-gradient(180deg, #eef4ff, #e5eeff); border: 1px solid #cfdcff; }
.cls-audiobar .cls-ab-play { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650;
  background: var(--primary); color: #fff; border: 1px solid var(--primary-dark); border-radius: 999px;
  padding: 9px 20px; cursor: pointer; font-family: inherit; }
.cls-audiobar .cls-ab-play:hover { background: var(--primary-dark); }
.cls-audiobar .cls-ab-play.on { background: var(--danger); border-color: var(--danger); }
.cls-audiobar .cls-ab-play .ab-ico { font-size: 15px; }
.cls-audiobar .cls-ab-info { min-width: 0; }
.cls-audiobar .cls-ab-info b { display: block; font-size: 13px; }
.cls-audiobar .cls-ab-info i { font-style: normal; color: var(--muted); font-size: 12px; }

/* 听力文案遮蔽态（作答期） */
.cls-locked { border: 1px dashed var(--line-strong); border-radius: var(--radius); background: #fffdf6;
  padding: 22px 20px; text-align: center; }
.cls-locked .lk-t { font-size: 15px; font-weight: 700; color: var(--warn); margin-bottom: 8px; }
.cls-locked .lk-d { font-size: 13px; color: var(--text-2); line-height: 1.85; }

/* 口语：语料（问题 + 参考答案） */
.cls-oral { display: flex; flex-direction: column; gap: 12px; }
.cls-oral-i { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; }
.cls-oral-i .oa-q { font-size: 14.5px; line-height: 1.75; }
.cls-oral-i .oa-q .qn { font-weight: 650; color: var(--primary); margin-right: 6px; }
.cls-oral-i .oa-a { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line);
  font-size: 14px; line-height: 1.8; color: var(--text-2); }
.cls-oral-i .oa-a .lb { display: inline-block; font-size: 11.5px; font-weight: 650; color: var(--ok);
  background: var(--ok-soft); border-radius: 999px; padding: 2px 8px; margin-right: 8px; }

/* 写作：题目（提示 + 提纲逻辑） */
.cls-wt .wt-t { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.cls-wt .wt-p { font-size: 14.5px; line-height: 1.85; margin-bottom: 12px; white-space: pre-wrap; }
.cls-wt .wt-sec { margin-bottom: 12px; }
.cls-wt .sec-lb { font-size: 12px; font-weight: 650; color: var(--primary-dark); letter-spacing: .06em; margin-bottom: 6px; }
.cls-wt .wt-tips { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.9; color: var(--text-2); }
.cls-wt .wt-outline { margin: 0; padding-left: 22px; font-size: 13.5px; line-height: 1.9; }
.cls-wt .wt-outline li b { font-weight: 650; }
.cls-wt .wt-outline li span { display: block; color: var(--muted); font-size: 12.5px; }
.cls-wt .wt-note { font-size: 12.5px; color: var(--muted); }

/* 写作：录入框 */
.cls-writewrap { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
textarea.cls-write { flex: 1 1 auto; width: 100%; min-height: 360px; font-size: 15.5px; line-height: 1.9;
  padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); resize: vertical; font-family: inherit; }
textarea.cls-write:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.cls-write-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); }
.cls-wt-ai { font-size: 13.5px; line-height: 1.9; white-space: pre-wrap; color: var(--text-2); }

/* 常用表达词组 */
.cls-phr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 10px 12px; margin-bottom: 12px; }
.cls-phr .ph-t { font-size: 12px; font-weight: 650; color: var(--primary-dark); margin-bottom: 8px; }
.cls-phr .ph-t i { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 8px; font-size: 11.5px; }
.cls-phr .ph-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cls-phr-chip { font-size: 12.5px; border: 1px solid var(--line-strong); background: var(--surface-2);
  border-radius: 999px; padding: 4px 12px; cursor: pointer; color: var(--text-2); font-family: inherit; }
.cls-phr-chip:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }

/* 练习区内容内衬（原来是行内 style，收进样式表） */
.cls-quest-in { padding: 14px 16px 24px; }

/* 窄屏：练习区不再固定栏高，交给内容自然撑开 */
@media (max-width: 880px) {
  .cls-practice > .cls-grid.pr .cls-pane { height: auto; min-height: 0; }
}

/* ===== 心理解压：第 14 个板块，排在最后但视觉上要自己跳出来 ===== */
.tag.mind { background: #e7f1ee; color: #3d6b67; }
.mini-kb.mini-mind { background: #e7f1ee; border: 1px solid #bcd8d1; text-decoration: none; color: var(--text); }
.mini-kb.mini-mind:hover { border-color: #9dbfba; }
/* 补满每行最后那格：4 列网格宽屏跨 3 列；中窄屏按当行剩下的格数补齐，都不留缺角 */
/* 心理解压卡：整行铺满（grid-column: 1 / -1），与英语板块数量无关 ——
   2026-10-08 板块从 13 增到 14 后，原来的固定 span 3 会在最后一行留空角，改成整行铺满后增删板块都不再错位 */
.mini-kb.mini-mind.spanall { border-color: #b9d2ce; padding: 14px 16px; grid-column: 1 / -1; }
.mini-kb.mini-mind.spanall .mini-kb-h b { font-size: 16px; }
/* 心理解压「补齐尾行」：数量由 portal.js 按板块数算好后写进 --t4 / --t2。
   宽屏（≥760px）四列用 --t4（13 个英语板块 → 3 格），窄屏两列用 --t2 —— 尽量不留空格。 */
.mini-kb.mini-mind.tail { border-color: #b9d2ce; padding: 14px 16px; grid-column: span var(--t4, 3); }
.mini-kb.mini-mind.tail .mini-kb-h b { font-size: 16px; }
@media (max-width: 759px) {
  .mini-kb.mini-mind.tail { grid-column: span var(--t2, 1); }
}
.mini-mind .mini-kb-h b { color: #3d6b67; }

.card.mind-card { border-color: #c2d8d2; background: linear-gradient(135deg, #f0f7f4, #edf5f1); }
.card.mind-card.wide { grid-column: 1 / -1; border-width: 1px; border-color: #b9d2ce; }
.card.mind-card.wide h3 { font-size: 17px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mind-card-in { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.mind-cta { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.mind-cta .btn { white-space: nowrap; }
@media (max-width: 820px) { .mind-card-in { grid-template-columns: 1fr; gap: 12px; } .mind-cta { align-items: flex-start; } }
.tag.mind.plain { background: #fff; color: #3d6b67; border: 1px solid #bcd8d1; }
.mind-mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 4px; }
.mind-mod { border: 1px solid #e2d7f7; border-radius: 10px; padding: 9px 10px; background: #fff; }
.mind-mod b { display: block; font-size: 13px; color: #3d6b67; }
.mind-mod span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
@media (max-width: 880px) { .mind-mods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mind-mods { grid-template-columns: 1fr; } }
/* 心理解压占满整行（第 14、15、16 格），单列时也独占一行 */
@media (max-width: 759px) { .card.mind-card.wide { grid-column: 1 / -1; } }

/* 后台「方式二 · 直接粘贴文字」面板（与上传文件并存） */
details.adv.paste-box { background: #f7faff; border-color: var(--line-strong); }
details.adv.paste-box > summary { color: var(--primary-dark); }
details.adv.paste-box textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 9px 11px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); resize: vertical; }
.paste-md { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); margin-top: 7px; cursor: pointer; }
details.adv code { background: var(--surface-2); border-radius: 5px; padding: 1px 5px; font-size: 12px; color: var(--text-2); }

/* ===== 心理解压页面（#/mind）===== */
/* 导航里格外显眼：紫色底 + 加粗，和别的入口区分开 */
.tabbar a.mind-tab { color: #3d6b67; font-weight: 650; background: #e7f1ee; border-radius: 8px 8px 0 0; }
.tabbar a.mind-tab:hover { color: #3d6b67; background: #e7f1ee; }
.tabbar a.mind-tab.on { color: #fff; background: #3d6b67; }
/* 课堂工具条里的心理解压快捷入口 */
.btn.cls-mind { color: #3d6b67; border-color: #bcd8d1; background: #faf7ff; font-weight: 600; text-decoration: none; }
.btn.cls-mind:hover { color: #3d6b67; border-color: #9dbfba; background: #ecf4f1; }

.mind-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 14px; }
.mind-open { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.mind-tab-b { appearance: none; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid #e2d7f7; background: #fbf9ff; border-radius: 12px; padding: 11px 13px; }
.mind-tab-b b { display: block; font-size: 14px; color: #3d6b67; font-weight: 650; }
.mind-tab-b span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.mind-tab-b:hover { border-color: #9dbfba; }
.mind-tab-b.on { background: #3d6b67; border-color: #3d6b67; }
.mind-tab-b.on b, .mind-tab-b.on span { color: #fff; }
@media (max-width: 880px) { .mind-tabs { grid-template-columns: repeat(2, 1fr); } }

.mind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 12px; }
.mind-card2 { background: var(--surface); border: 1px solid #e6dcf8; border-radius: var(--radius); padding: 14px 16px; }
.mind-card2 h3 { font-size: 15px; color: #4d2690; margin-bottom: 6px; }
.mind-card2 > p { font-size: 13px; color: var(--text-2); line-height: 1.7; margin-bottom: 10px; }
.mind-hud { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.mind-hud b { font-size: 16px; color: #3d6b67; }
.mind-disclaim { margin-top: 14px; border: 1px dashed #c2d8d2; background: #f4f9f7; }

/* 解压小游戏：敲泡泡 */
.mind-stage { position: relative; overflow: hidden; height: 226px; border-radius: 12px;
  background: linear-gradient(180deg, #f4f8ff, #eef4ff 60%, #e8f1ff); border: 1px solid #e2e9f7; }
.mind-stage .mind-hud { position: absolute; left: 10px; right: 10px; top: 9px; z-index: 3; justify-content: space-between; }
.bubble { position: absolute; bottom: -50px; z-index: 1; border: none; cursor: pointer; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #9dbfba 62%, #8f6ed6);
  color: #3b1d6e; font-family: inherit; font-size: 12px; font-weight: 650;
  box-shadow: 0 3px 10px rgba(106, 55, 184, .22); opacity: .96; }
.bubble.pop { opacity: 0; transform: scale(1.55); }
.eyebox { position: relative; overflow: hidden; height: 168px; border-radius: 12px;
  background: linear-gradient(180deg, #fbf9ff, #f2f7ff); border: 1px solid #e6dcf8; }
.eyedot { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: #3d6b67; box-shadow: 0 0 0 7px rgba(61, 107, 103, .13); }
.stretch-t { font-size: 14px; color: #4d2690; min-height: 22px; }
.stretch-t b { display: block; font-weight: 650; }
.stretch-t b i { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 7px; }
.stretch-t span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 5px; line-height: 1.7; }
.stretch-bar { height: 7px; border-radius: 999px; background: #efe9fb; overflow: hidden; margin: 10px 0; }
.stretch-bar i { display: block; height: 100%; width: 0; background: #3d6b67; border-radius: 999px;
  transition: width .9s linear; }

/* 心理小测试 */
.test-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
@media (max-width: 700px) { .test-pick { grid-template-columns: 1fr; } }
.tp-b { appearance: none; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid var(--line-strong); background: var(--surface); border-radius: 11px; padding: 10px 12px; }
.tp-b b { display: block; font-size: 13.5px; color: var(--text); }
.tp-b span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.tp-b.on { border-color: #3d6b67; background: #e7f1ee; }
.tp-b.on b { color: #3d6b67; }
.test-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.test-ask { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.tq { border-top: 1px dashed var(--line); padding: 10px 0 4px; }
.tq-w { font-size: 13.5px; color: var(--text); margin-bottom: 8px; line-height: 1.6; }
.tq-o { display: flex; gap: 6px; flex-wrap: wrap; }
.tq-b { appearance: none; cursor: pointer; font-family: inherit; font-size: 12.5px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 5px 13px; }
.tq-b:hover { border-color: #9dbfba; }
.tq-b.on { background: #3d6b67; border-color: #3d6b67; color: #fff; }
.test-res { margin-top: 14px; border: 1px solid #bcd8d1; background: #f4f9f7; border-radius: 12px; padding: 14px 16px; }
.tr-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tr-num { font-size: 30px; font-weight: 700; color: #3d6b67; line-height: 1; }
.tr-num small { font-size: 13px; font-weight: 400; color: var(--muted); }
.tr-band { font-size: 14px; font-weight: 650; color: #4d2690; }
.tr-bar { height: 8px; border-radius: 999px; background: #ece5fa; overflow: hidden; margin: 11px 0; }
.tr-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6f9d97, #3d6b67); border-radius: 999px; }
.tr-tip { font-size: 13.5px; color: var(--text-2); line-height: 1.75; }
.tr-acts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; }

/* 脑电波 */
.band-list { display: flex; flex-direction: column; gap: 6px; }
.band-i { appearance: none; cursor: pointer; font-family: inherit; text-align: left;
  display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); background: var(--surface);
  border-radius: 10px; padding: 8px 11px; }
.band-i:hover { border-color: #9dbfba; }
.band-i.on { border-color: #3d6b67; background: #e7f1ee; }
.bi-hz { flex: 0 0 auto; width: 46px; font-size: 16px; font-weight: 700; color: #3d6b67; text-align: right;
  font-variant-numeric: tabular-nums; }
.bi-hz small { font-size: 10.5px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.bi-t { flex: 0 0 auto; font-size: 13px; font-weight: 650; color: var(--text); width: 88px; }
.bi-r { font-size: 11.5px; color: var(--muted); }
.band-desc { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.band-desc b { font-size: 13.5px; color: #4d2690; }
.band-desc .hint { margin-left: 8px; }
.band-desc p { font-size: 13px; color: var(--text-2); line-height: 1.8; margin-top: 7px; }
.wave-canvas-wrap { position: relative; height: 132px; border-radius: 12px; overflow: hidden;
  background: #fbf9ff; border: 1px solid #e6dcf8; }
.wave-canvas { display: block; width: 100%; height: 132px; }
.wave-idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--muted); }

/* 冥想空间 */
.pat-list { display: flex; flex-direction: column; gap: 7px; }
.pat-i { appearance: none; cursor: pointer; font-family: inherit; text-align: left;
  border: 1px solid var(--line); background: var(--surface); border-radius: 11px; padding: 10px 12px; }
.pat-i:hover { border-color: #9dbfba; }
.pat-i.on { border-color: #3d6b67; background: #e7f1ee; }
.pat-i b { display: block; font-size: 13.5px; color: var(--text); }
.pat-i.on b { color: #3d6b67; }
.pat-i span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.breath-wrap { display: flex; align-items: center; justify-content: center; padding: 18px 0 6px; }
.breath-ring { width: 196px; height: 196px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 38% 32%, #ffffff, #cdb8f0 60%, #6f9d97);
  box-shadow: 0 8px 26px rgba(106, 55, 184, .18);
  transform: scale(.74); transition: transform 4s ease-in-out; }
.breath-ring.inhale { transform: scale(1); }
.breath-ring.hold { transform: scale(1); }
.breath-ring.exhale { transform: scale(.74); }
.breath-in { text-align: center; }
.br-phase { display: block; font-size: 15px; font-weight: 650; color: #3b1d6e; }
.br-cnt { display: block; font-size: 22px; font-weight: 700; color: #4d2690; margin-top: 4px;
  font-variant-numeric: tabular-nums; }

/* ---------- 建设中板块（前台还没开放的板块）：看得见、点得动，点下去统一提示「正在建设中，敬请期待」 ----------
   原则：不隐藏（板块看得见才有规划感），但锁住内容与入口；判据 = kb_categories.is_index_public。 */
.mini-kb.building, .kb-card.building, .card.tight.building, .enr-board.building { cursor: pointer; border-style: dashed; }
.mini-kb.building { border: 1px dashed var(--line); opacity: .88; }
.mini-kb.building .mini-kb-h b { color: var(--text-2); }
.mini-kb.building:hover, .kb-card.building:hover, .card.tight.building:hover { border-color: var(--warn); }
.kb-card.building:hover, .card.tight.building:hover { background: #fffdf7; }
.enr-board.building { opacity: .92; background: #fcfcfe; }


/* ================= 精读（camp-read）：话题 + 星级筛选、文章清单、上课页 =================
   一门课 = 一篇文章。配色沿用训练营暖色系（#C9522B / #DC8F63 / #FBEBE0 / #7E2F0D），不引入绿色。 */

/* --- 板块页：筛选条 --- */
.og-filter { padding: 12px 14px; }
.og-frow { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; flex-wrap: wrap; }
.og-flabel { flex: 0 0 42px; font-size: 12.5px; font-weight: 650; color: #9A4A22; padding-top: 4px; }
.og-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.og-chips .chip { display: inline-flex; align-items: center; gap: 5px; }
.og-chips .chip.on { color: #fff; }
.chip-n { font-size: 10.5px; opacity: .75; font-variant-numeric: tabular-nums; }
.og-chips .chip.on .chip-n { opacity: .9; }
.og-fsum { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.og-star { color: #C9522B; font-size: 13px; letter-spacing: 1px; font-weight: 650; }
.og-star.sm { font-size: 11px; display: block; margin-top: 2px; }

/* --- 板块页：文章清单（一门课一张卡） --- */
.og-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.og-card {
  appearance: none; cursor: pointer; text-align: left; font-family: inherit;
  display: flex; flex-direction: column; gap: 7px; width: 100%;
  border: 1px solid #E7BE9E; border-radius: 10px; background: #FFF8F3; padding: 10px 12px; color: inherit;
}
.og-card:hover { border-color: #C9522B; background: #FFF3EA; box-shadow: 0 2px 10px rgba(201, 82, 43, .12); }
.og-ttl { font-weight: 600; font-size: 13.5px; line-height: 1.45; }
/* 话题标题「英文（中文）」里的中文括注：压低一档，不跟英文抢视觉重心 */
.og-zh { color: var(--muted); font-weight: 500; font-size: 12px; }
.og-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.og-go { font-size: 11.5px; color: #9A4A22; }

/* --- 精读上课页（2026-10-12 用户口径）---
   左 = 文章原文（朗读音频按键在原文顶部）；右 = 文章讲义（含自己的内页页签）；
   底部 = 全部文章目录（横向排列，一列一个话题）。 */
body.og-on .main { max-width: 1580px; }
.og-read { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.og-pane { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.og-audio { width: 100%; margin: 1px 0; }
/* 朗读音频就在原文卡顶部 */
.og-src-audio { flex: 0 0 auto; padding: 10px 14px 8px; background: #FFFBF8; border-bottom: 1px dashed #F2D9C8; }
.og-src-audio .audio-bar { margin: 0 0 7px; }
.og-src-audio .audio-bar .grow b { font-size: 14px; }
.og-src-audio .aud-note { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
/* 思辨话题页 · 朗读音频卡（/a/<res_id>/1.mp3，404 自动隐藏） */
.th-audio { margin-bottom: 14px; }
.th-audio .audio-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.th-audio .audio-bar .grow b { font-size: 14px; }
.og-item {
  appearance: none; cursor: pointer; text-align: left; font-family: inherit;
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  padding: 7px 9px; color: inherit; font-size: 12.5px;
}
.og-item:hover { border-color: #C9522B; }
.og-item.on { border-color: #C9522B; background: #FDF3EC; }
.og-item .grow { min-width: 0; }
.og-item-ttl { display: block; font-weight: 600; line-height: 1.4; }
.og-doc .cls-doc { max-height: 74vh; overflow: auto; padding-right: 4px; }

/* --- 底部「全部文章」目录：横向排列，一列一个话题 ---
   2026-10-12 用户口径：「全部文章的目录建议在底部，横向排列」。
   七个话题并排成列，列头常驻，列内上下滚动；窄屏在列条上左右滑。 --- */
.og-cat-card { margin-top: 12px; }
.og-cat-wrap {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 1fr);
  gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 4px 14px 14px;
  align-items: start; scrollbar-width: thin;
}
.og-cat-col {
  min-width: 0; display: flex; flex-direction: column; max-height: 40vh;
  border: 1px solid #F2D9C8; border-radius: 10px; background: #FFFCFA; overflow: hidden;
}
.og-cat-col.on { border-color: #C9522B; }
.og-cat-col-h {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; background: #FFF3EA; border-bottom: 1px solid #F2D9C8;
}
.og-cat-col-h .hint { margin-left: auto; font-size: 11px; color: #9A4A22; }
.og-cat-col.on .og-cat-col-h { background: #FBE3D5; }
.og-cat-col-b {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 5px; padding: 7px;
}
.og-cat-col-b .og-item { padding: 6px 8px; font-size: 12px; }
.og-cat-col-b .og-item-ttl {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.og-cat-col-b .og-item .cg-ls-go { font-size: 11px; padding-top: 1px; color: #9A4A22; }
.og-cat-col-b .og-item.on .cg-ls-go { font-weight: 700; }

/* 2026-10-19：目录横幅自动横向滚动 —— 滚动条做明显一点，用户一眼知道能横着看 */
.og-cat-wrap { scrollbar-width: auto; scrollbar-color: #C9522B #FBE3D5; }
.og-cat-wrap::-webkit-scrollbar { height: 8px; }
.og-cat-wrap::-webkit-scrollbar-track { background: #FBE3D5; border-radius: 8px; }
.og-cat-wrap::-webkit-scrollbar-thumb { background: #C9522B; border-radius: 8px; }

/* --- 专注模式：只留「原文 + 讲义」，满屏展示（Esc 退出）--- */
body.og-focus-on { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
@supports (height: 100dvh) { body.og-focus-on { height: 100dvh; } }
body.og-focus-on .topbar,
body.og-focus-on .tabbar,
body.og-focus-on .page-head,
body.og-focus-on .back-bar,
body.og-focus-on .banner,
body.og-focus-on .og-cat-card,
body.og-focus-on .og-foot-note { display: none !important; }
body.og-focus-on .main {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; box-sizing: border-box;
  display: flex; flex-direction: column; padding: 10px 14px; overflow: hidden;
}
body.og-focus-on .og-read {
  flex: 1 1 auto; min-height: 0; height: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
}
body.og-focus-on .og-pane { height: auto; }
body.og-focus-on .og-pane .cls-doc { flex: 1 1 auto; min-height: 0; max-height: none; }
.og-focus-exit {
  position: fixed; right: 16px; top: 14px; z-index: 95; display: none;
  appearance: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 650;
  border-radius: 999px; padding: 6px 14px; border: 1px solid #F2D9C8;
  background: #FFF3EA; color: #7E2F0D; box-shadow: 0 6px 18px -8px rgba(22, 27, 46, .5);
}
.og-focus-exit:hover { background: #FBE3D5; }
body.og-focus-on .og-focus-exit { display: inline-flex; align-items: center; }
/* 悬浮的「退出专注」压在讲义卡右上角：给讲义卡的页头让出一点位置，别盖住角标 */
body.og-focus-on #ogLecCard .card-h { padding-right: 112px; }

/* --- 讲义 / 课后习题 页签（2026-10-11 用户：「没看到精读的习题区」）
   习题是独立一份内容，做成页签后不必先读完讲义就能切过去。 --- */
.og-tabs { display: flex; align-items: center; gap: 6px; margin-right: 8px; }
.og-tabs .btn.xs { padding: 2px 10px; font-size: 11.5px; border-radius: 999px; }

/* --- 讲义卡内的五页签：分段精译 / 词汇精讲 / 长难句 / 知识拓展 / 课后习题（2026-10-11 用户口径）
   「讲义区域依然只有分段精译，原先设计的词汇精讲 / 长难句 / 知识拓展 / 习题，
     请在这个区域一起形成页签，用户可以点页签切换。」
   下划线式页签条，主色 #C9522B；一条放不下就换行，手机上只留主标题。 --- */
.og-seg {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px;
  margin: 2px 0 12px; border-bottom: 1px solid var(--line);
}
.og-seg-btn {
  appearance: none; cursor: pointer; font-family: inherit; background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 13px 6px; color: var(--text-2); border-radius: 7px 7px 0 0;
}
.og-seg-btn b { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.og-seg-btn span { font-size: 10.5px; opacity: .8; white-space: nowrap; }
.og-seg-btn:hover { color: #C9522B; background: #FFF8F3; }
.og-seg-btn.on { color: #C9522B; border-bottom-color: #C9522B; background: #FFF8F3; }
.og-seg-btn.on b { font-weight: 700; }
.og-seg-btn.empty { color: var(--text-3, #9aa0a6); }
.og-seg-btn.empty span { opacity: .6; }
/* 「话题 ｜ 难度 ｜ 全文约 N 词 ｜ 共 M 段」信息条 */
.og-lec-meta {
  font-size: 12.5px; line-height: 1.6; color: #7E2F0D;
  background: #FFF8F3; border: 1px solid #F2D9C8; border-radius: 9px;
  padding: 7px 11px; margin-bottom: 10px;
}
.og-lec-meta p { margin: 0; }
@media (max-width: 640px) {
  .og-seg-btn { padding: 6px 9px 5px; }
  .og-seg-btn span { display: none; }
  .og-seg-btn b { font-size: 13px; }
}
.og-src p { font-size: 15px; line-height: 1.85; margin: 0 0 12px; }
.og-src p.en { font-size: 15px; }

/* --- 「全部文章」目录的三栏页签式写法已于 2026-10-12 下线：
   目录搬到页面底部、改成一列一话题的横向排列（见上方 .og-cat-col-* 一组规则）。 --- */

@media (max-width: 900px) {
  /* 窄屏：原文 / 讲义上下堆叠，目录列改为横向滑动（每列不设上限高度，跟着内容走） */
  .og-read { grid-template-columns: 1fr; }
  .og-cat-wrap { grid-auto-columns: minmax(180px, 1fr); }
  .og-cat-col { max-height: 56vh; }
  .og-doc .cls-doc { max-height: none; }
  body.og-focus-on .og-read { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ================= 精读「课后习题」（2026-10-10） =================
   讲义与习题是两份独立内容：读完讲义点「完成学习」，讲义位置**原地**换成习题界面。
   六种题型（单选 / 多选 / 填空 / 语法 / 翻译 / 开放问答），客观题自动判分、
   主观题走 AI 按采分点评分。整套沿用精读的暖橙主色 #C9522B。 */

.og-learnbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.og-learnbar .hint { flex: 1; min-width: 180px; }

/* ---- 习题头部 ---- */
.oq-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.oq-head-l { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.oq-head-l b { font-size: 16px; }
.oq-head-r { margin-left: auto; display: flex; gap: 8px; }
.oq-legend {
  font-size: 13px; color: var(--text-2); background: #FDF3EC;
  border: 1px solid #F2D9C8; border-radius: 10px; padding: 8px 10px; margin: 10px 0 4px;
}

/* ---- 分区 ---- */
.oq-sec { margin-top: 16px; }
.oq-sec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.oq-sec-h h3 { font-size: 15px; color: #7E2F0D; }
.oq-sec-h .hint { font-size: 12px; }

/* ---- 单题 ---- */
.oq-item {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; background: var(--surface);
}
.oq-item.ok { border-color: #9AD6BC; background: var(--ok-soft); }
.oq-item.half { border-color: #F0D3A0; background: var(--warn-soft); }
.oq-item.bad { border-color: #EFB9C4; background: var(--danger-soft); }
.oq-q { line-height: 1.6; }
.oq-n {
  display: inline-block; min-width: 22px; height: 22px; line-height: 22px; text-align: center;
  background: #C9522B; color: #fff; border-radius: 6px; font-size: 12px;
  font-weight: 700; margin-right: 8px;
}
.oq-opts { display: grid; gap: 4px; margin-top: 8px; }
.oq-opt {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  padding: 5px 8px; border-radius: 8px; line-height: 1.5;
}
.oq-opt:hover { background: var(--surface-2); }
.oq-opt input { margin-top: 3px; accent-color: #C9522B; flex: none; }
.oq-opt-k {
  flex: none; width: 18px; height: 18px; line-height: 18px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: 5px; font-size: 11px; color: var(--text-2);
}
.oq-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.oq-inline { margin-top: 8px; }
.oq-input {
  width: 100%; max-width: 340px; padding: 7px 10px; font: inherit;
  border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text);
}
.oq-input:focus { outline: 2px solid #F2D9C8; border-color: #C9522B; }
.oq-ta {
  width: 100%; margin-top: 8px; padding: 8px 10px; font: inherit; line-height: 1.6;
  border: 1px solid var(--line-strong); border-radius: 8px; background: #fff;
  color: var(--text); resize: vertical;
}
.oq-ta:focus { outline: 2px solid #F2D9C8; border-color: #C9522B; }

/* ---- 判分反馈 ---- */
.oq-fb { margin-top: 8px; font-size: 13px; line-height: 1.6; }
.oq-mark { font-weight: 700; margin-right: 8px; }
.oq-mark.ok { color: var(--ok); }
.oq-mark.half { color: var(--warn); }
.oq-mark.bad { color: var(--danger); }
.oq-exp { color: var(--text-2); }
.oq-ai { display: block; color: #7E2F0D; margin-top: 2px; }

/* ---- 成绩单 ---- */
.oq-score {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-radius: 12px; padding: 12px 14px; margin: 10px 0 4px;
}
.oq-score.pass { background: var(--ok-soft); border: 1px solid #9AD6BC; }
.oq-score.fail { background: var(--warn-soft); border: 1px solid #F0D3A0; }
.oq-score-n { font-size: 30px; font-weight: 750; line-height: 1; }
.oq-score-n span { font-size: 15px; color: var(--muted); font-weight: 500; }
.oq-score-t { font-weight: 700; }
.oq-score-d { font-size: 12px; color: var(--text-2); flex: 1; min-width: 160px; }


/* ================= 思辨：板块页 + 话题页（2026-10-11） =================
   话题页版式（用户口径）：顶部长条（话题介绍）→ 下方左侧（正方，可折叠目录）
   + 下方右侧（反方，可折叠目录）→ 底部长条（归纳总结）。
   正方用训练营暖橘（#C9522B），反方用冷调蓝灰（#2F6B7E）作对照 —— 两侧一眼分得开，
   且都不落进「红涨绿跌」的习惯色里。 */
.think-shuffle .shuffle-ico { color: #C9522B; }

.th-wrap { display: flex; flex-direction: column; gap: 12px; }

/* 顶部长条 / 底部长条 */
.th-top, .th-bottom {
  border: 1px solid #E7BE9E; border-radius: 12px; padding: 13px 16px;
  background: linear-gradient(180deg, #FFF7F1, #FDEFE6);
}
.th-bottom { border-color: #DFB08A; background: linear-gradient(180deg, #FDF3EC, #F7E4D5); }
.th-bar-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.th-bar-tag {
  font-size: 12px; font-weight: 700; color: #fff; background: #C9522B;
  padding: 3px 10px; border-radius: 999px; letter-spacing: .5px;
}
.th-bottom .th-bar-tag { background: #7E2F0D; }
.th-top-d { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.95; }

/* 下方左右两栏 */
.th-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.th-side {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--surface); min-width: 0;
}
.th-side-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.th-side-h h2 { font-size: 15px; margin: 0; }
.th-side-h .sp { flex: 1 1 auto; }
.th-side-h .btn.xs { padding: 2px 8px; font-size: 11.5px; border-radius: 6px; }
.th-pro .th-side-h h2 { color: #C9522B; }
.th-con .th-side-h h2 { color: #2F6B7E; }
.th-pro { border-color: #EFD6C4; }
.th-con { border-color: #CFDCE4; }

.th-list { display: flex; flex-direction: column; gap: 6px; }
.th-arg { border: 1px solid #EFE7E0; border-radius: 10px; background: #FFFDFB; overflow: hidden; }
.th-arg[open] { border-color: #E0B48C; background: #FFF9F4; }
.th-con .th-arg { border-color: #E4EAEF; background: #FBFDFE; }
.th-con .th-arg[open] { border-color: #A9C4D2; background: #F6FAFC; }
.th-arg-h {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; min-height: 40px;
}
.th-arg-h::-webkit-details-marker { display: none; }
.th-arg-h::marker { content: ''; }
.th-idx {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; font-size: 11.5px; font-weight: 700;
  color: #fff; background: #C9522B; display: inline-flex; align-items: center; justify-content: center;
}
.th-con .th-idx { background: #2F6B7E; }
.th-arg-t { flex: 1 1 auto; min-width: 0; font-weight: 650; font-size: 13.5px; line-height: 1.5; color: #7E2F0D; }
.th-con .th-arg-t { color: #24505F; }
.th-arg-go { flex: 0 0 auto; font-size: 11.5px; color: #9A4A22; }
.th-con .th-arg-go { color: #4A7C8C; }
.th-arg-b { padding: 2px 12px 12px 40px; }
.th-arg-en { margin: 0 0 6px; font-size: 13px; color: #9A4A22; font-style: italic; line-height: 1.7; }
.th-con .th-arg-en { color: #3C6C80; }
.th-arg-d { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.9; }

@media (max-width: 768px) {
  .th-cols { grid-template-columns: 1fr; }
  .th-arg-h { min-height: 44px; }
  .th-arg-b { padding-left: 14px; }
  .th-top-d { font-size: 14px; }
}

/* ===== 思辨 2.0：10 类筛选 + 中英搜索 + 中英对照三态（2026-10-11 口径升级） =====
   从「5 类 · 12 题」扩到「10 类 · 200 题」后新增的三样东西：
   ① 板块页的搜索框与命中高亮  ② 话题页的中英对照三态开关  ③ 多段文本的段间距
   语言显隐**只切外层 class，不重绘 DOM** —— 折叠状态与滚动位置都不会丢。 */

/* ① 搜索框（配合 #thQ / #thQClr，局部刷新列表，输入不失焦） */
.og-search {
  flex: 1 1 260px; min-width: 190px; max-width: 470px;
  padding: 7px 11px; border: 1px solid #E6D6C8; border-radius: 9px;
  background: #FFFDFB; color: var(--text-1, #3A2A20); font-size: 13px; font-family: inherit;
}
.og-search:focus { outline: none; border-color: #DC8F63; box-shadow: 0 0 0 3px rgba(220, 143, 99, .16); }
.og-search::-webkit-search-cancel-button { display: none; }
mark { background: #FFE7A8; color: #7E2F0D; border-radius: 3px; padding: 0 2px; }
/* 十类 chips 一定换行，收紧尺寸让筛选区不至于吃掉半屏 */
.og-chips .chip { padding: 4px 9px; font-size: 12.5px; }

/* ② 中英对照三态开关 */
.th-lang {
  display: inline-flex; border: 1px solid #E6D6C8; border-radius: 9px;
  overflow: hidden; background: #FFFDFB;
}
.th-lang button {
  border: 0; background: transparent; color: #9A4A22; cursor: pointer;
  padding: 6px 11px; font-size: 12.5px; font-family: inherit; line-height: 1.4;
}
.th-lang button + button { border-left: 1px solid #EFE2D6; }
.th-lang button.on { background: #C9522B; color: #fff; }
.th-lang button:not(.on):hover { background: #FBEADE; }
.th-wrap.lang-cn .th-en { display: none; }
.th-wrap.lang-en .th-cn { display: none; }

/* 英文段：斜体 + 略小，和中文正文一眼分得开 */
.th-top-en { margin: 8px 0 0; color: #6B5A4E; font-size: 13.5px; line-height: 1.85; font-style: italic; }

/* 侧内导语（「第一，…」这类枚举前的总起句） */
.th-lead {
  margin: 0 0 10px; padding: 8px 11px; border-left: 3px solid #DC8F63;
  background: #FDF6F1; border-radius: 0 8px 8px 0;
}
.th-con .th-lead { border-left-color: #A9C4D2; background: #F5FAFC; }
.th-lead-cn, .th-lead-en { margin: 0; font-size: 12.5px; line-height: 1.8; color: #7A6558; }
.th-lead-en { font-style: italic; color: #6B7E86; }

/* ③ 段落间距：正文按空行切成多个 <p>，不留间距会粘成一坨 */
.th-top > p + p, .th-bottom > p + p,
.th-arg-b > p + p, .th-lead > p + p { margin-top: 9px; }
.th-arg-b > p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .og-search { flex: 1 1 100%; max-width: none; }
  .th-lang { width: 100%; }
  .th-lang button { flex: 1 1 auto; text-align: center; }
}

/* ===== 返回条（各页顶部的「回到清单」入口）2026-10-11 =====
   起因：返回入口原来是 .hint 里的灰字小链接（12px、与正文同色阶），
   进到话题页后几乎找不到回清单的路。现在主返回做成暖色实心胶囊、置顶第一眼位置，
   其余导航降级为小号文字链。站点主色是蓝，这里用训练营暖色系做区分（#C9522B 系）。 */
.back-bar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.back-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px 9px 13px; border-radius: 999px;
  background: #C9522B; border: 1.5px solid #C9522B; color: #fff;
  font-size: 13.5px; font-weight: 700; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(201, 82, 43, .22);
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.back-pill:hover {
  background: #7E2F0D; border-color: #7E2F0D; color: #fff;
  transform: translateX(-2px); box-shadow: 0 4px 14px rgba(126, 47, 13, .3);
}
.back-pill:active { transform: translateX(-1px) scale(.99); }
.back-pill .bp-ico { font-size: 15px; font-weight: 900; line-height: 1; }
.back-rest { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.back-mini {
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap; transition: .15s;
}
.back-mini:hover { color: #C9522B; background: #FBEBE0; }

@media (max-width: 768px) {
  .back-bar { margin-bottom: 11px; gap: 2px; }
  .back-pill { padding: 8px 15px 8px 11px; font-size: 13px; }
  .back-mini { font-size: 12px; padding: 5px 8px; }
}

/* ================= 单词本：正文点译 + 释义卡 + 单词本页 =================
   品牌色沿用训练营那一套（#C9522B / #FBEBE0 / #7E2F0D），与站点其它模块区分开。
   点译仅在正文容器（.cls-doc）里生效，正文排版不受影响：.wb-w 是纯 inline 元素，
   不改变盒模型，行高与断行保持原样。 */
.wb-w {
  cursor: pointer; border-radius: 3px; padding: 0 1px;
  border-bottom: 1px dashed transparent; transition: background .12s, border-color .12s;
}
.wb-w:hover { background: #FBEBE0; border-bottom-color: #DC8F63; }
.wb-w.on { color: #7E2F0D; background: #FBEBE0; border-bottom-color: #C9522B; }
.wb-w.on::after { content: "★"; font-size: 8px; vertical-align: super; color: #C9522B; margin-left: 1px; }

.wb-pop {
  position: fixed; left: 0; top: 0; z-index: 90; width: 340px; max-width: calc(100vw - 20px);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 10px 34px -12px rgba(22, 27, 46, .35); display: none; overflow: hidden;
}
.wb-pop.on { display: block; }
.wb-pop-h {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px 8px 13px;
  border-bottom: 1px solid var(--line); background: #fbfcfe;
}
.wb-pop-w { font-size: 16px; font-weight: 700; color: #7E2F0D; word-break: break-all; }
.wb-pop-x {
  border: 0; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer;
  padding: 2px 6px; border-radius: 6px;
}
.wb-pop-x:hover { background: var(--surface-2); color: var(--text); }
.wb-pop-b { padding: 11px 13px 12px; }
.wb-pop-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.wb-ph { font-family: Georgia, "Times New Roman", serif; color: #C9522B; font-size: 13.5px; }
.wb-pop-pos {
  font-size: 11.5px; color: var(--text-2); background: var(--surface-2);
  border-radius: 6px; padding: 1px 7px;
}
.wb-pop-spk {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  cursor: pointer; font-size: 12px; line-height: 1; padding: 3px 7px;
}
.wb-pop-spk:hover { background: #FBEBE0; border-color: #DC8F63; }
.wb-pop-meaning { font-size: 14px; color: var(--text); margin-bottom: 8px; line-height: 1.6; }
.wb-pop-ex {
  border-left: 3px solid #FBEBE0; padding: 6px 0 6px 9px; margin-bottom: 10px;
  font-size: 12.5px; color: var(--text-2);
}
.wb-pop-ex i { display: block; font-family: Georgia, "Times New Roman", serif; font-style: normal; color: #3c4358; }
.wb-pop-ex span { display: block; margin-top: 3px; color: var(--muted); }
.wb-pop-foot {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  border-top: 1px dashed var(--line); padding-top: 9px;
}
.wb-pop-foot .hint { font-size: 11.5px; color: var(--muted); }
.wb-sk { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.wb-sk-l {
  height: 10px; border-radius: 6px; background: linear-gradient(90deg, #f6efe6, #fdf8f0, #f6efe6);
  background-size: 200% 100%; animation: wbSk 1.1s linear infinite;
}
.wb-sk-l.short { width: 55%; }
@keyframes wbSk { from { background-position: 0 0; } to { background-position: -200% 0; } }

/* ---------- 我的单词本页 ---------- */
.wb-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 12px 0 4px; }
.wb-search {
  flex: 1 1 220px; min-width: 180px; padding: 8px 11px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text);
}
.wb-src {
  padding: 8px 10px; font: inherit; font-size: 13.5px; max-width: 320px;
  border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text);
}
.wb-doc-b { padding: 4px 14px 14px; overflow-x: auto; }
.wb-grp { margin-top: 14px; }
.wb-grp-h {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #7E2F0D;
  border-left: 3px solid #C9522B; padding-left: 8px; margin-bottom: 7px;
}
.wb-grp-h .cnt { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.wb-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wb-tbl th, .wb-tbl td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.wb-tbl th { background: #FBEBE0; color: #7E2F0D; font-weight: 600; white-space: nowrap; }
.wb-tbl .c-i { width: 34px; text-align: center; color: var(--muted); }
.wb-tbl .c-w { width: 108px; white-space: nowrap; }
.wb-tbl .c-ph { width: 120px; font-family: Georgia, "Times New Roman", serif; color: #7E2F0D; }
.wb-tbl .c-pos { width: 68px; color: var(--text-2); }
.wb-tbl .c-mean { width: 210px; }
.wb-tbl .c-ex { font-family: Georgia, "Times New Roman", serif; color: #3c4358; }
.wb-tbl .c-a { width: 52px; text-align: center; }
.wb-spk { border: 0; background: transparent; cursor: pointer; font-size: 11px; padding: 0 2px; opacity: .5; }
.wb-spk:hover { opacity: 1; }
.wb-tbl tbody tr:hover { background: #fffaf7; }

@media (max-width: 768px) {
  .wb-pop { width: calc(100vw - 20px); }
  .wb-tbl .c-ex, .wb-tbl th.c-ex { display: none; }
  .wb-tbl .c-mean { width: auto; }
}

/* ==========================================================================
   真题板块（中考 / 高考 / 考研英语一 / 考研英语二）· 2026-10-12
   · 板块页：按**题型目录**成课，一题一卡；
   · 课堂页：左「原文」/ 中「习题」/ 右「解析」三栏并排，各自内部滚动。
   ========================================================================== */

body.ex-on .main { max-width: 1580px; }

/* ---- 板块页：题型目录（可收起 · 课程数徽标 · 难度标签页） ---- */
.ex-sec { margin-bottom: 12px; }
.ex-sec-h { cursor: pointer; user-select: none; }
.ex-sec-h h2 { flex: none; transition: color .15s; }
.ex-sec-h:hover h2 { color: var(--primary); }
/* PART 徽标（用户 2026-10-13：「SECTION 字样要明显」）—— 第一部分 ~ 第四部分前置一个醒目的 PART n */
.ex-part {
  flex: none; display: inline-flex; align-items: center; min-width: 52px; height: 22px;
  padding: 0 9px; border-radius: 6px; margin-right: -2px;
  background: linear-gradient(180deg, var(--primary), var(--primary-2, var(--primary)));
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
}
.ex-part i { font-style: normal; }
.ex-part.plain {
  background: var(--surface-2); color: var(--text-2); font-weight: 700;
  border: 1px solid var(--line); box-shadow: none; min-width: 0;
  font-size: 12px; letter-spacing: 0;
}
.ex-sec.is-part > .ex-sec-h { padding-left: 2px; }
.ex-sec.is-part > .ex-sec-h h2 { font-size: 15.5px; font-weight: 800; letter-spacing: .01em; }
/* ---- 「沐晓英语雅思听力能力专训」（Cloze · PART1~4 页签）板块卡 ----
   用户 2026-10-13：「CLOZE 板块改名：沐晓英语雅思听力能力专训。把这个板块提到最上面。
   不分星级难度。」→ 用一条醒目的主色左边框 + 徽标点名，与下面「听力」卡区分开。 */
.ex-sec.is-cz { border-left: 4px solid var(--primary); }
.ex-sec.is-cz > .ex-sec-h h2 { font-size: 16.5px; font-weight: 800; letter-spacing: .01em; }
.ex-sec.is-cz > .ex-sec-h .ex-part { background: var(--primary); color: #fff; border-color: var(--primary); }
/* 二级「第N部分」的头：PART n 徽标 + 部分名 + 星级 + 题量 + 大类数（用户口径：「SECTION 字样要明显」） */
.ex-sub-h { scroll-margin-top: 12px; }
.ex-sub-h .ex-part {
  height: 24px; min-width: 58px; padding: 0 10px; font-size: 12px;
  border-radius: 7px;
}
.ex-sub-h .ex-sub-t { font-size: 14.5px; font-weight: 800; }
/* ---- PART 1~4 页签式布局（用户 2026-10-13 最终口径）----
   「PART1-4 做四个页签，点页签跳转，每一个页签下面就是一个 PART。」
   → 一次只显示**一个** PART：上面是页签条，下面是该 PART 的固定高度面板。 */
.ex-quad { display: block; }
/* 页签条：PART 1~4 四个页签，等宽平分 */
.ex-parttabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin-bottom: 12px;
}
.ex-parttab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 8px; min-width: 0;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2);
  cursor: pointer; font: inherit; color: var(--muted);
  transition: border-color .15s, background .15s, color .15s;
}
.ex-parttab:hover { border-color: var(--primary); color: var(--primary); }
.ex-parttab.on {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 2px 10px rgba(37, 99, 235, .22);
}
.ex-parttab .pt-n { font-size: 14.5px; font-weight: 800; letter-spacing: .3px; }
.ex-parttab .pt-s { font-size: 11px; opacity: .78; white-space: nowrap; }
.ex-parttab.on .pt-s { opacity: .92; }
/* 页签面板：固定高度，内容在面板内滚动，不再把页面无限撑长 */
.ex-quad > .ex-sub {
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: 12px 14px; margin: 0; min-width: 0;
  display: flex; flex-direction: column;
  height: 620px;
}
.ex-quad > .ex-sub[hidden] { display: none; }
@media (max-width: 1100px) {
  .ex-quad > .ex-sub { height: 560px; }
  .ex-parttabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ex-sec.collapsed .ex-parttabs, .ex-sec.collapsed .ex-quad { display: none; }
/* 面板标题条：只写 PART n（用户：「课程名不要再带『第几部分』这样的字样」），不可收起 */
.ex-part-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 9px; margin-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
/* 顶部工具行：场景选择菜单键（+ 难度标签），只此一行，下面就是平铺表 */
.ex-partbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
/* 表区：面板内部滚动（固定高度的剩余空间），表头吸附 */
.ex-quad .ex-sub-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ex-quad .ex-grid { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.ex-quad .ex-grid .ex-table thead th { position: sticky; top: 0; z-index: 1; }
.ex-quad .ex-grid .ex-tablewrap { max-height: none; border: 0; border-radius: 0; }
/* 旧版收起样式清理（面板固定后不再按格收起） */
/* ---- 顶部跳转链接条（口语 / 阅读 / 写作）----
   用户 2026-10-13：「听力下面不要有口语、阅读、写作的内容占位，这几个的跳转链接放到最上面」 */
.ex-jumpbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.ex-jumpbar-l { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.ex-jumpbar-i {
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--primary);
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--primary-soft, var(--line));
  background: var(--surface);
}
.ex-jumpbar-i:hover { background: var(--primary-soft, var(--surface-2)); }
.ex-jumpbar-i i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted); }

/* ---- 一级「目录页」的五门课入口卡（用户 2026-10-14：
        「雅思板块点进去应该是听、说、读、写四门课，点任何一门都可以进相应的板块」）----
   卡片与 .ex-sec 同款视觉骨架，但整张可点、有「进入 →」的明确落点。 */
.ex-lp {
  display: grid; gap: 12px; margin: 0 0 14px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
/* 卡片数 → 列数（2026-10-24 用户口径：「六个板块均匀地分为上下各 3 个」）：
   英一 / 英二 = 6 张（五板块 + 模拟题库）→ 3 列 × 2 行，正好铺满不缺口；
   中考 / 高考 = 4 张 → 2 列 × 2 行；雅思 = 5 张 → 3 列（3 + 2）。 */
.ex-lp.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-lp.n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-lp.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 考研目录页「三大方块」：英一 / 英二 / 复试各一张大卡 → 正好一行三个（2026-10-30） */
.ex-lp.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .ex-lp.n6, .ex-lp.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-lp.n3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .ex-lp, .ex-lp.n6, .ex-lp.n5, .ex-lp.n4, .ex-lp.n3 { grid-template-columns: minmax(0, 1fr); }
}
.ex-lp-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.ex-lp-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
  transform: translateY(-1px);
}
.ex-lp-card.empty { opacity: .82; }
.ex-lp-card.empty:hover { border-color: var(--line); box-shadow: none; transform: none; }
.ex-lp .lp-h { display: flex; align-items: center; gap: 8px; }
.ex-lp .lp-n { font-size: 15px; font-weight: 700; color: var(--text); }
.ex-lp .lp-d { font-size: 12.5px; line-height: 1.62; color: var(--text-2); }
.ex-lp .lp-kids { display: flex; flex-wrap: wrap; gap: 5px; }
.ex-lp .lp-kid {
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2);
}
.ex-lp .lp-kid.off { opacity: .55; }
.ex-lp .lp-kid b { font-weight: 700; color: var(--primary); margin-left: 2px; }
.ex-lp .lp-go {
  margin-top: auto; font-size: 12.5px; font-weight: 700; color: var(--primary);
  align-self: flex-end;
}
.ex-lp-extra { margin: 0 0 14px; }

/* ---- 考研（英一/英二）清单 · 主题小方块（2026-10-24 用户口径）----
   「用一个个小方块显示作文主题，不要场景/难度/题型/题量等没有核心信息的标注」。
   平铺网格：每道题一格 = 题号 + 出题主题，整格可点。 */
.ex-topics {
  display: grid; gap: 8px; margin: 2px 0 4px;
  /* 2026-10-30：课程方块要放**完整标题**（「句法基石（一）：五大基本句型与句子成分识别」），
     格子从 168px 放宽到 200px，标题最多三行。 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.ex-topic {
  display: flex; align-items: flex-start; gap: 8px; min-width: 0;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); text-align: left;
  font: inherit; cursor: pointer;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.ex-topic:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
  transform: translateY(-1px);
}
.ex-topic-no {
  flex: none; font-size: 12px; font-weight: 800; color: var(--primary);
  min-width: 26px;
}
.ex-topic-t {
  flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--text);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* ---- 板块页顶部的「板块间跳转按键」（用户 2026-10-14：「每一个板块间，设置跳转按键」）---- */
.ex-secjump {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  position: sticky; top: 0; z-index: 6;
}
.ex-secjump-home {
  font-size: 13px; font-weight: 700; color: var(--primary); text-decoration: none;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--primary-soft, var(--line));
  background: var(--surface);
}
.ex-secjump-home:hover { background: var(--primary-soft, var(--surface-2)); }
.ex-secjump-l { font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.ex-secjump-i {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none;
  padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface);
}
.ex-secjump-i:hover { border-color: var(--primary); color: var(--primary); }
.ex-secjump-i.on {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.ex-secjump-i i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted); }
.ex-secjump-i.on i { color: rgba(255, 255, 255, .85); }
.ex-fold {
  flex: none; width: 20px; height: 20px; line-height: 19px; text-align: center;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2);
  color: var(--text-2); font-size: 12px;
}
.ex-fold.off { opacity: .3; }
.ex-sec.collapsed .ex-sec-body { display: none; }
.ex-sec.collapsed .ex-sec-h { margin-bottom: 0; }
.ex-sec-body { min-width: 0; }
.ex-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ex-tab {
  appearance: none; cursor: pointer; font: inherit; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px;
  background: var(--surface); color: var(--text-2);
}
.ex-tab b { font-weight: 600; color: var(--muted); margin-left: 2px; }
.ex-tab:hover { border-color: var(--primary); color: var(--primary); }
.ex-tab:hover b { color: var(--primary); }
.ex-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ex-tab.on b { color: rgba(255, 255, 255, .85); }
.ex-tab.static { cursor: default; }
/* ---- 「场景｜难度」筛选行（2026-10-13 用户：「题目清单最上方的『场景｜难度』筛选」）----
   左「场景」下拉选择器（20 个场景用下拉比标签条省地方），右「难度」标签页；两者是**与**关系。 */
.ex-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 0 0 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.ex-sel-wrap { display: inline-flex; align-items: center; gap: 6px; }
.ex-sel-l {
  font-size: 11.5px; font-weight: 700; color: var(--text-2);
  letter-spacing: .06em; white-space: nowrap;
}
.ex-sel {
  appearance: none; font: inherit; font-size: 12.5px; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 4px 26px 4px 10px; background: var(--surface); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  max-width: 230px;
}
.ex-sel:hover { border-color: var(--primary); color: var(--primary); }
.ex-filter .ex-tabs { margin: 0; }

/* ---- 题目清单：表格式（题名 ｜ 场景 ｜ 难度 ｜ 题型 ｜ 题量 ｜ 进入）----
   用户 2026-10-13：「题目清单最上方的『场景｜难度』『题型｜题量』筛选，以表格式呈现」。 */
.ex-tablewrap {
  max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px;
}
.ex-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ex-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--text-2);
  font-size: 11.5px; font-weight: 700; text-align: left; letter-spacing: .04em;
  padding: 7px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
/* 可点表头（场景 / 难度 / 题型）：点了弹筛选菜单 */
.ex-table thead th.ex-th[data-col] { cursor: pointer; user-select: none; }
.ex-table thead th.ex-th[data-col]:hover { color: var(--primary); }
.ex-table thead th.ex-th.on { color: var(--primary); background: var(--primary-soft); }
.ex-table thead th.ex-th.on b { color: var(--primary); }
.ex-table thead th b { font-size: 9px; }
/* 表头筛选下拉菜单（挂在 body 上，随视口定位） */
.ex-colmenu {
  position: fixed; z-index: 9999; min-width: 150px; max-height: 320px; overflow: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(16, 26, 48, .18); padding: 5px;
}
.ex-colmenu-i {
  display: block; width: 100%; text-align: left; appearance: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--text); background: none; border: 0;
  border-radius: 7px; padding: 6px 9px; white-space: nowrap;
}
.ex-colmenu-i:hover { background: var(--primary-soft); color: var(--primary); }
.ex-colmenu-i.on { background: var(--primary); color: #fff; font-weight: 600; }
.ex-table tbody tr { border-bottom: 1px solid var(--line); cursor: pointer; }
.ex-table tbody tr:last-child { border-bottom: 0; }
.ex-table tbody tr:hover { background: var(--primary-soft); }
.ex-table td { padding: 8px 10px; vertical-align: middle; }
/* 课程名：一直横排太长（用户 2026-10-13：「课程名横排太长了」）→
   限宽 + 单行省略号，鼠标悬停看完整名字（行本身已带 title）。 */
.ex-td-ttl {
  font-weight: 600; line-height: 1.42;
  max-width: 340px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-td-ttl .ex-ttl-sub { color: var(--muted); font-weight: 500; font-size: 12px; }
.ex-td-sc, .ex-td-ty { white-space: nowrap; }
.ex-td-lv { white-space: nowrap; }
.ex-td-qn { white-space: nowrap; color: var(--muted); font-size: 12px; }
.ex-td-go { text-align: right; white-space: nowrap; }
.ex-sc {
  display: inline-block; padding: 1px 7px; border-radius: 6px;
  background: #FBEBE0; border: 1px solid #F0D6C6; color: #7E2F0D; font-size: 11.5px;
}
.ex-ty {
  display: inline-block; padding: 1px 7px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); font-size: 11.5px;
}
.ex-qn { font-variant-numeric: tabular-nums; }
.ex-table .ex-go { color: var(--primary); font-weight: 600; white-space: nowrap; font-size: 12px; }
.ex-table .tag { padding: 1px 6px; font-size: 11px; }
.ex-grid { min-width: 0; }

/* ---- 目录页：二级「部分」分组 + 难度星级（2026-10-13 雅思新口径）----
   一级目录平铺五个；「听力」一级目录下再按 第一~第四部分 分成小块，每块标星级。 */
.ex-sec-desc { margin: 0 0 10px; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.ex-star { color: #E8A33D; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.ex-star.big { font-size: 13.5px; letter-spacing: 1.5px; }
.ex-sub { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 2px; }
.ex-quad > .ex-sub { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 0; }
.ex-sub-h { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; }
.ex-sub-t { font-weight: 700; font-size: 13.5px; color: var(--text); }
.ex-sub-h .tag { padding: 1px 7px; font-size: 11px; }
/* ---- 大类块（第三 / 四部分按 5-8 大主题归类；第一部分按 20 场景）---- */
.ex-cat { margin: 0 0 12px; }
.ex-cat:last-child { margin-bottom: 0; }
.ex-cat-h {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  padding-left: 8px; border-left: 3px solid var(--primary-soft, var(--primary));
}
.ex-cat-t { font-weight: 700; font-size: 12.5px; color: var(--text); }
.ex-cat-h .tag { padding: 0 6px; font-size: 10.5px; }
.ex-cat .ex-tablewrap { margin-bottom: 0; }

/* ---- 课堂页：三栏并排 ---- */
.ex3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ex-col { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.ex-body {
  flex: 1 1 auto; min-height: 0; max-height: 76vh; overflow: auto;
  padding: 12px 14px; font-size: 14.5px; line-height: 1.75;
}
.ex-body p { margin: 0 0 10px; }
/* ---- 完型填空：20 空选项网格（2026-10-24 用户口径）
       每一空的 A/B/C/D 两两一行（A B 一行、C D 一行，列宽一致 → 上下对齐），
       空与空之间留一段间距互相区分，不再一个选项占一段。 ---- */
.clz-wrap { margin: 0; }
.clz-item { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px dashed var(--line); }
.clz-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.clz-no {
  display: inline-block; min-width: 24px; margin: 0 0 6px; padding: 0 8px;
  border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark);
  font-size: 12px; font-weight: 700; line-height: 19px; text-align: center;
}
.clz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
.clz-opt { display: flex; align-items: baseline; gap: 6px; font-size: 14px; line-height: 1.7; }
.clz-opt b { flex: 0 0 auto; color: var(--text-2); font-weight: 700; }
.clz-opt span { overflow-wrap: anywhere; }
.clz-opt.clz-miss { opacity: .45; }
@media (max-width: 900px) { .clz-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- 考研客观题「可交互试题 + 一键出分」（2026-10-24 用户口径） ----
   试题区 = .ex-quiz（容器带 data-ans / data-full），每题 .ex-qi，
   选项为可点按钮 .ex-qopt。交卷后：对的标 .ok、选错的标 .bad、题号旁挂 ✓/✗。 */
.ex-quizbar {
  position: sticky; top: -12px; z-index: 5;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -4px -4px 12px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(22, 27, 46, .06);
}
.ex-quizbar .ex-quiz-stat { flex: 1 1 auto; font-size: 13px; color: var(--text-2); min-width: 120px; }
.ex-quizbar.graded { border-color: var(--primary); background: var(--primary-soft); }
.ex-quizbar.graded .ex-quiz-stat b { color: var(--primary-dark); font-size: 16px; }
.ex-qopt {
  display: flex; align-items: baseline; gap: 6px; width: 100%;
  margin: 0; padding: 5px 9px; text-align: left; cursor: pointer;
  font: inherit; font-size: 14px; line-height: 1.6; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .12s, background .12s;
}
.ex-qopt b { flex: 0 0 auto; color: var(--text-2); font-weight: 700; }
.ex-qopt span { overflow-wrap: anywhere; }
.ex-qopt:hover { border-color: var(--primary); }
.ex-qopt.on { border-color: var(--primary); background: var(--primary-soft); }
.ex-qopt.on b { color: var(--primary-dark); }
.ex-quiz.graded .ex-qopt { cursor: default; }
.ex-qopt.ok { border-color: var(--ok); background: var(--ok-soft); }
.ex-qopt.ok b { color: var(--ok); }
.ex-qopt.bad { border-color: var(--danger); background: var(--danger-soft); }
.ex-qopt.bad b { color: var(--danger); }
.ex-qi { margin: 0 0 14px; }
.ex-qi-stem { margin: 0 0 6px; font-size: 14.5px; line-height: 1.65; }
.ex-qi-stem b { margin-right: 5px; }
.ex-qi-mark { display: inline-block; margin-right: 6px; font-weight: 800; }
.ex-qi-mark.ok { color: var(--ok); }
.ex-qi-mark.bad { color: var(--danger); }
.ex-qi-opts { display: grid; gap: 6px; }
/* 新题型：每空一排 A–G 字母按钮 */
.ex-nt-slot { margin-left: 8px; font-size: 13px; color: var(--text-2); }
.ex-nt-pick { font-weight: 800; color: var(--primary-dark); }
.ex-nt-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-nt-opt { flex: 0 0 auto; width: auto; min-width: 36px; padding: 4px 10px; justify-content: center; font-weight: 700; }
.ex-nt-pool { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ex-quiz-tip { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0 0 10px; }
/* 翻译「一键出分」结果条 */
.ex-tr-score {
  margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.7;
  background: var(--ok-soft); border: 1px solid #bfe6d3; color: var(--text);
}
.ex-tr-score b.big { font-size: 17px; color: var(--ok); }
.ex-tr-score .pts { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.ex-tr-score .pt { padding: 1px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); background: var(--surface); }
.ex-tr-score .pt.hit { border-color: var(--ok); color: var(--ok); }
.ex-tr-score .pt.miss { opacity: .55; }
.ex-body h3, .ex-body h4, .ex-body h5 { margin: 12px 0 8px; line-height: 1.4; }
.ex-body ul, .ex-body ol { margin: 0 0 10px; padding-left: 20px; }
#exColSrc .ex-body { font-family: Georgia, "Times New Roman", var(--serif-cn, inherit); }
.ex-col.blurred .ex-body { filter: blur(6px); user-select: none; pointer-events: none; }
.ex-more { margin-top: 12px; border: 1px dashed var(--line-strong); border-radius: 9px; padding: 8px 11px; background: var(--surface-2); }
.ex-more > summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--text-2); }
.ex-more[open] > summary { margin-bottom: 8px; }

@media (max-width: 1180px) {
  .ex3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #exColAna { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .ex3 { grid-template-columns: minmax(0, 1fr); }
  #exColAna { grid-column: auto; }
  .ex-body { max-height: none; }
  .ex-grid { max-height: none; }
}

/* ================= 翻译题课堂：两栏（题目 + 我的译文 ｜ 参考译文 · 解析）
   2026-10-12 用户：「翻译题请重新调上课页面，让画面更饱满」。
   翻译的原文与写作要求只有一两句、解析却有好几千字，沿用三栏会「左空右满」；
   故单独走两栏版式，并在左栏给出「我的译文」输入区，把版面真正撑起来。 ================= */
.ex3.trans { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.ex-src-big { font-size: 17px; line-height: 2.05; }
.ex-src-big p { margin: 0 0 12px; }
.ex-src-big p:last-child { margin-bottom: 0; }
.ex-ask {
  margin-top: 14px; padding: 11px 13px; border-radius: 11px;
  background: #FFF8F3; border: 1px dashed #F2D9C8;
}
.ex-ask .ex-ask-h { font-weight: 700; font-size: 12.5px; color: #7E2F0D; margin-bottom: 5px; }
.ex-ask p { margin: 0 0 5px; font-size: 13.5px; line-height: 1.7; }
.ex-ask p:last-child { margin-bottom: 0; }
.ex-mytr-h { display: flex; align-items: center; gap: 8px; margin: 16px 2px 7px; }
.ex-mytr-h b { font-size: 13.5px; color: #7E2F0D; }
.ex-mytr-h .hint { font-size: 11.5px; }
textarea.ex-mytr {
  width: 100%; box-sizing: border-box; min-height: 190px; resize: vertical; display: block;
  font-family: inherit; font-size: 15px; line-height: 1.95; color: var(--text);
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #FFFDFB;
}
textarea.ex-mytr:focus { outline: none; border-color: #DC8F63; box-shadow: 0 0 0 3px rgba(220, 143, 99, .16); }
.ex-mytr-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ex-mytr-bar .hint { font-size: 11.5px; }
@media (max-width: 980px) {
  .ex3.trans { grid-template-columns: minmax(0, 1fr); }
  textarea.ex-mytr { min-height: 150px; }
}

/* ================= 雅思口语课堂：两栏（原文 + 成片视频 ｜ 八页签讲义）
   2026-10-14 用户口径：雅思板块建设「口语」板块，首期上线「进阶语料-日常话题」。
   一门课 = 一篇英语美文：左栏原文（顶部是横版成片，中英对照字幕），
   右栏讲义 8 个页签（概览 / 核心词汇 / 地道表达 / 高阶句型 / 思维与文化 /
   口语练习 / 跟读发音 / 金句背诵）。复用 .og-seg 页签样式，不另造一套。 ================= */
.ex3.speak { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.16fr); }
.ex3.speak .ex-src-audio { padding: 10px 14px 9px; background: #FFFBF8; border-bottom: 1px dashed #F2D9C8; }
.ex3.speak .ex-src-audio .audio-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ex3.speak .ex-src-audio .audio-bar .grow b { font-size: 14px; }
.ex3.speak .ex-src-audio .aud-note { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
video.og-video { width: 100%; display: block; border-radius: 10px; background: #000; }

/* --- 口语课堂 2026-10-14 改版：视频整行铺顶 → 原文（中英页签）+ 讲义 → 最底层板块目录 --- */
.ex3.speak .spk-video-card { grid-column: 1 / -1; }
.ex3.speak .spk-video-card .ex-src-audio { padding: 10px 14px 12px; background: #FFFBF8; border-radius: 0 0 10px 10px; }
.ex3.speak .spk-video-card .og-video { max-height: 62vh; }
.ex3.speak .spk-src-seg { border-bottom: 1px solid #F2D9C8; }
.spk-src-pane[hidden] { display: none; }
.spk-src-pane .og-src { max-height: 60vh; overflow: auto; }

/* 口语：最底层「本板块目录」——一篇文章一条横幅 + 文章分类下拉菜单 */
.spk-dir-card { margin-top: 12px; }
.spk-cat-lab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #9A4A22; white-space: nowrap;
}
.spk-cat-sel {
  padding: 4px 9px; font-size: 12.5px; color: inherit;
  border: 1px solid #F2D9C8; border-radius: 8px; background: #FFFBF8;
}
.spk-cat-sel:focus { outline: 2px solid #DC8F63; outline-offset: 1px; }
.spk-dir-body { padding: 10px 14px 14px; }
.spk-dir-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px; max-height: 46vh; overflow: auto;
}
.spk-dir-it {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid #F2D9C8; border-radius: 10px; background: #FFFCFA;
  text-decoration: none; color: inherit; transition: border-color .12s, background .12s;
}
.spk-dir-it:hover { border-color: #DC8F63; background: #FFF6F0; }
.spk-dir-it.on { border-color: #C9522B; background: #FBEBE0; }
.spk-dir-it .sd-n {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #C9522B;
  font-variant-numeric: tabular-nums;
}
.spk-dir-it .sd-t {
  flex: 1 1 auto; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spk-dir-it .sd-c {
  flex: 0 0 auto; font-size: 11px; color: #9A4A22;
  background: #FFF3EA; border-radius: 999px; padding: 1px 8px;
}
.spk-dir-it.on .sd-c { background: #FBE3D5; }
.spk-dir-it .sd-go { flex: 0 0 auto; font-size: 11.5px; color: #C9522B; }

/* 讲义「表格 → 文字条目」（WB.tableToText 生成）：一条一块，便于阅读 */
.hp-list { display: flex; flex-direction: column; gap: 8px; }
.hp-it {
  border: 1px solid #F2D9C8; border-left: 3px solid #DC8F63;
  border-radius: 8px; background: #FFFCFA; padding: 8px 10px;
}
.hp-lead { font-weight: 700; color: #7E2F0D; margin-bottom: 4px; font-size: 13.5px; }
.hp-l { display: flex; gap: 6px; font-size: 13px; line-height: 1.68; }
.hp-k { flex: 0 0 auto; min-width: 4.5em; font-size: 12px; color: #9A4A22; }
.hp-v { flex: 1 1 auto; min-width: 0; }
.spk-panes { padding: 0; }
.spk-pane { padding: 12px 14px 6px; }
.spk-pane[hidden] { display: none; }
@media (max-width: 980px) {
  .ex3.speak { grid-template-columns: minmax(0, 1fr); }
}

/* 口语「三个平行板块」：板块页上并排的三张卡（有内容的可点，其余显示「建设中」） */
.ex-par { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 2px 0 12px; }
.ex-par-c {
  display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: #FFFDFB; font: inherit; color: inherit;
}
.ex-par-c .pc-top { display: flex; align-items: center; gap: 8px; }
.ex-par-c .pc-t { font-weight: 700; font-size: 14px; color: #7E2F0D; }
.ex-par-c .pc-n { margin-left: auto; font-size: 12px; color: #C9522B; font-weight: 600; white-space: nowrap; }
.ex-par-c .pc-d { font-size: 12px; line-height: 1.65; color: var(--muted); }
.ex-par-c:hover { border-color: #DC8F63; background: #FFF8F3; }
.ex-par-c.on { border-color: #C9522B; box-shadow: 0 0 0 3px rgba(201, 82, 43, .12); background: #FFF8F3; }
.ex-par-c.empty { background: #FAFAF8; }
.ex-par-c.empty .pc-t { color: var(--text-3, #9aa0a6); }
.ex-par-c.empty .pc-n { color: #B08355; }
@media (max-width: 980px) {
  .ex-par { grid-template-columns: minmax(0, 1fr); }
}

/* ================= 沐晓独家课课堂 · 专注模式 =================
   2026-10-12 用户：「所有的课，一定都要设计专注模式」。
   口径与精读 / 课堂一致：进专注 → 藏顶栏、页签栏、返回条、页头、提示条、页脚说明，
   内容区满屏、各栏内部滚动；退出 = 右上悬浮「✕ 退出专注」或 Esc；换页自动退出。 */
body.ex-focus-on { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
@supports (height: 100dvh) { body.ex-focus-on { height: 100dvh; } }
body.ex-focus-on .topbar,
body.ex-focus-on .tabbar,
body.ex-focus-on .page-head,
body.ex-focus-on .back-bar,
body.ex-focus-on .banner,
body.ex-focus-on .note { display: none !important; }
body.ex-focus-on .main {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; box-sizing: border-box;
  display: flex; flex-direction: column; padding: 10px 14px; overflow: hidden;
}
body.ex-focus-on .ex3 { flex: 1 1 auto; min-height: 0; align-items: stretch; }
body.ex-focus-on .ex-col .ex-body { max-height: none; flex: 1 1 auto; min-height: 0; }
body.ex-focus-on .og-focus-exit { display: inline-flex; align-items: center; }
body.ex-focus-on #exColAna .card-h { padding-right: 112px; }
@media (max-width: 780px) {
  body.ex-focus-on { display: block; height: auto; overflow: visible; }
  body.ex-focus-on .main { display: block; padding: 0; }
}

/* ================= 雅思听力课（一课一题 · 原文｜习题｜解析 横向） =================
   一份听力材料 = 一门课。进页面时**听力原文与解析一律先模糊**，点一下才显形，
   强制「先盲听 → 再做习题 → 后对答案」的学习动作。音频固定在原文卡顶部，不跟着模糊。 */
.ex3.listen { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.14fr) minmax(0, 1.02fr); }
/* 听力课表格偏宽（套题表 / 对照表），统一给横向滚动，避免在窄栏里被压碎 */
.ex3.listen .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ex3.listen .tbl-wrap table { min-width: 100%; }
.ex3.listen .tbl-wrap th, .ex3.listen .tbl-wrap td { white-space: nowrap; }

/* 原文卡里的音频区：与精读原文卡一致，但多一排语速开关 */
.ex3.listen .ex-src-audio { padding: 10px 14px 9px; background: #FFFBF8; border-bottom: 1px dashed #F2D9C8; }
.ex3.listen .ex-src-audio .audio-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ex3.listen .ex-src-audio .audio-bar .grow b { font-size: 14px; }
.ex3.listen .ex-src-audio .aud-note { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.ib-audio { margin: 0; }
.ib-spd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ib-spd .hint { margin-right: 2px; }
.ib-spd .btn.sm.on { background: #C9522B; border-color: #C9522B; color: #fff; }

/* ---- 同一套音频 · 多套习题：页签条（2026-10-13 用户口径）----
   习题卡顶部一排页签，每套一个；点一下就切换，音频不重载、滚动回顶部。 */
.ex-setbar {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 9px 14px 10px;
  background: #FFFBF8; border-bottom: 1px dashed #F2D9C8;
}
.ex-setbar:empty { display: none; }
.ex-setab {
  appearance: none; cursor: pointer; font: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 1px; line-height: 1.25;
  border: 1px solid var(--line); border-radius: 9px; padding: 5px 11px;
  background: var(--surface); color: var(--text-2); min-width: 0;
}
.ex-setab b { font-weight: 700; font-size: 12.5px; }
.ex-setab span { font-size: 10.5px; color: var(--muted); }
.ex-setab:hover { border-color: #C9522B; color: #C9522B; }
.ex-setab:hover span { color: #C9522B; }
.ex-setab.on { background: #C9522B; border-color: #C9522B; color: #fff; }
.ex-setab.on span { color: rgba(255, 255, 255, .82); }

/* 模糊栏：蒙层本身就是按钮，点一下即显形（不只靠右上角按钮） */
.ib-pane { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ib-pane > .ex-body { flex: 1 1 auto; min-height: 0; }
.ib-body.blurred { filter: blur(7px); user-select: none; }
.ib-body.blurred + .ib-veil { display: flex; }
.ib-veil {
  position: absolute; inset: 0; z-index: 3; margin: 0; padding: 18px;
  border: 0; border-radius: 10px; cursor: pointer; text-align: center;
  font-family: inherit; font-size: 14px; line-height: 1.7; color: #7E2F0D; font-weight: 600;
  background: linear-gradient(180deg, rgba(255, 251, 248, 0.90), rgba(251, 235, 224, 0.95));
  display: flex; align-items: center; justify-content: center;
}
.ib-veil:hover { background: linear-gradient(180deg, rgba(255, 245, 238, 0.96), rgba(248, 226, 210, 0.98)); }
.ib-veil b { color: #C9522B; }
.ib-veil span { max-width: 240px; }
/* 解析栏没有音频，蒙层直接铺满卡片正文区 */

/* 听力课的填空位显形：md 里的 ______ 由上传器包成 span，样式在这里 */
.ex-body .ib-blank {
  display: inline-block; min-width: 62px; border-bottom: 1.6px solid #C9522B;
  color: transparent; background: rgba(201, 82, 43, 0.06); border-radius: 2px;
}
.ex-body .ib-ans { color: #C9522B; font-weight: 700; border-bottom: 1.6px solid #C9522B; }

@media (max-width: 1180px) {
  .ex3.listen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ex3.listen #exColAna { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .ex3.listen { grid-template-columns: minmax(0, 1fr); }
  .ex3.listen #exColAna { grid-column: auto; }
}


/* ---- 专项 CLOZE 难度标签（用户 2026-10-13：「最后的 CLOZE 课程，请设置难度标签」）---- */
.ex-lvbar { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.ex-lvtag {
  appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text-2);
}
.ex-lvtag b { font-variant-numeric: tabular-nums; opacity: .75; font-size: 11.5px; }
.ex-lvtag:hover { border-color: var(--primary); color: var(--primary); }
.ex-lvtag.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ex-lvtag.on b { opacity: .9; }
.ex-lvtag.off, .ex-lvtag[disabled] { opacity: .45; cursor: default; }
.ex-lvtag.lv-3 { border-left-width: 4px; }
.ex-lvtag.lv-4 { border-left-width: 4px; }
.ex-lvtag.lv-5 { border-left-width: 4px; }

/* ---- 精选课程：一行横幅 + 课程名左右自动滚动（用户 2026-10-13）---- */
.ex-marquee {
  position: relative; overflow: hidden; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2);
  padding: 10px 0; display: flex; gap: 10px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ex-marquee-track {
  display: flex; gap: 10px; flex: 0 0 auto;
  animation: exMarquee 38s linear infinite;
}
.ex-marquee:hover .ex-marquee-track { animation-play-state: paused; }
@keyframes exMarquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.ex-marquee-i {
  appearance: none; cursor: pointer; font: inherit; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  flex: 0 0 auto;
}
.ex-marquee-i:hover { border-color: var(--primary); color: var(--primary); }
.ex-marquee-t { font-weight: 600; font-size: 13px; }
.ex-marquee-go { font-size: 11px; color: var(--primary); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .ex-marquee-track { animation: none; } }

/* ================= 思辨课件共享排版（cloud.js thinkTopicHtml / thinkLecHtml） =================
   课堂页左右栏、思辨话题页讲义区、导出水印 PDF 共用这一套类名。 */
.th-cls h3, .thl-h3 { font-size: 13.5px; margin: 14px 0 7px; padding-left: 8px; border-left: 3px solid var(--primary); }
.th-cls h3:first-child { margin-top: 0; }
.th-cls-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
@media (max-width: 900px) { .th-cls-cols { grid-template-columns: 1fr; } }
.thl-vocab { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; }
.thl-vocab th, .thl-vocab td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.thl-vocab th { background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.thl-mut { color: var(--muted); font-size: 11.5px; }
.thl-list { margin: 7px 0; padding-left: 20px; }
.thl-list li { margin: 6px 0; line-height: 1.75; }
.thl-sent { margin: 8px 0; }
.thl-view { border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 8px;
  padding: 8px 11px; margin: 8px 0; line-height: 1.75; }
.thl-view.con { border-left-color: var(--danger); }
.thl-side-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--ok);
  background: var(--ok-soft, #e8f7ee); border-radius: 999px; padding: 1px 9px; margin-right: 7px; }
.thl-view.con .thl-side-tag { color: var(--danger); background: var(--danger-soft, #fdecec); }
.thl-essay { border-left-color: var(--primary) !important; }
/* 思辨话题页的「课程讲义」卡 */
.th-lec-card .cls-doc { max-height: 460px; overflow: auto; }
/* 2026-10-19 用户口径：「思辨这个板块的讲义，请根据内容设置不同部分的页签」——
   讲义按五个 <h3> 切成 词汇精讲 / 词组句子 / 观点表达 / 开放探讨 / 思辨题 五个页签，
   复用精读讲义同一套 .og-seg / .og-seg-btn 下划线页签样式，不另造一套。 */
.th-lec-card .og-seg { margin: 4px 0 10px; }
.th-lec-card .cls-doc > .thl-h3:first-child { margin-top: 0; }


/* ============ 雅思全真模拟（mock.js · 2026-10-25） ============ */
.im-card { margin-bottom: 12px; }
.im-ana-ok { }
.im-ana-lock { opacity: .45; cursor: not-allowed; }
.im-cover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.im-cover-box { border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 12px 14px; }
.im-cover-box b { display: block; margin-bottom: 6px; }
.im-cover-box .hint { margin: 2px 0; }

/* 考试页：整屏布局，顶栏固定 */
.im-exam { display: flex; flex-direction: column; height: calc(100vh - 120px); min-height: 560px; }
.im-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px 12px 0 0;
  background: var(--card, #fff);
}
.im-tt { font-weight: 700; }
.im-phase {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  background: var(--primary-soft, #eef2ff); color: var(--primary-dark, #3730a3);
  padding: 3px 10px; border-radius: 999px;
}
.im-clock {
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 2px 14px; border-radius: 10px; background: var(--bg, #f6f7f9);
}
.im-clock.warn { color: #b91c1c; background: #fee2e2; animation: imblink 1s step-start infinite; }
/* 2026-10-29：作答期封锁查词 / 收藏的状态标（顶栏常驻，交卷后才解除） */
.im-nolook {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: #92400e;
  background: #fef3c7; border: 1px solid #fcd34d; border-radius: 999px;
  padding: 3px 10px; white-space: nowrap; cursor: help;
}
.im-nolook::before { content: "🔒"; font-size: 11px; }
@keyframes imblink { 50% { opacity: .55; } }
.im-main { flex: 1; min-height: 0; border-left: 1px solid var(--line, #e5e7eb); border-right: 1px solid var(--line, #e5e7eb); }
.im-split { display: grid; grid-template-columns: 1fr 1fr; height: 100%; min-height: 0; }
.im-passage, .im-questions { overflow-y: auto; padding: 18px 20px; min-height: 0; }
.im-passage { border-right: 1px solid var(--line, #e5e7eb); }
.im-pt { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--primary-dark, #3730a3); margin-bottom: 6px; }
.im-ptitle { margin: 0 0 12px; }
.im-passage p { line-height: 1.85; margin: 0 0 14px; text-align: justify; }
.im-plabel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; margin-right: 8px;
  background: var(--primary-soft, #eef2ff); color: var(--primary-dark, #3730a3); font-weight: 700; font-size: 12px;
}
.im-nav {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 0 0 12px 12px;
  background: var(--card, #fff);
}
.im-ptab {
  border: 1px solid var(--line, #e5e7eb); background: var(--card, #fff); color: inherit;
  padding: 5px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
}
.im-ptab.on { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); color: #fff; }
.im-ptab.sm { padding: 3px 10px; font-size: 12px; }
.im-nvbox { display: flex; flex-wrap: wrap; gap: 4px; }
.im-nv {
  width: 30px; height: 28px; border: 1px solid var(--line, #e5e7eb); border-radius: 6px;
  background: var(--card, #fff); color: inherit; cursor: pointer; font-size: 12px;
}
.im-nv.done { background: var(--ok-soft, #dcfce7); border-color: var(--ok, #16a34a); color: var(--ok, #16a34a); font-weight: 700; }
.im-nv.cur { box-shadow: 0 0 0 2px var(--primary, #4f46e5) inset; }

/* 题目 */
.im-blk { margin-bottom: 22px; }
.im-ins {
  font-size: 12.5px; color: var(--muted, #6b7280); background: var(--bg, #f6f7f9);
  border-left: 3px solid var(--primary, #4f46e5); padding: 8px 10px; border-radius: 0 8px 8px 0; margin-bottom: 10px;
  line-height: 1.6;
}
.im-q { display: flex; align-items: flex-start; gap: 8px; padding: 8px 6px; border-bottom: 1px dashed var(--line, #e5e7eb); flex-wrap: wrap; }
.im-q.col { flex-direction: column; align-items: stretch; }
.im-q.flash { background: var(--primary-soft, #eef2ff); border-radius: 8px; }
.im-qno {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 4px; border-radius: 7px;
  background: var(--ink, #111827); color: #fff; font-size: 12.5px; font-weight: 700;
}
.im-stem { flex: 1; min-width: 200px; line-height: 1.6; }
.im-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.im-opt {
  border: 1px solid var(--line, #e5e7eb); background: var(--card, #fff); color: inherit;
  padding: 4px 12px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
}
.im-opt.on { background: var(--primary, #4f46e5); border-color: var(--primary, #4f46e5); color: #fff; font-weight: 700; }
.im-mc { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.im-mcopt {
  display: flex; gap: 8px; align-items: baseline; text-align: left;
  border: 1px solid var(--line, #e5e7eb); background: var(--card, #fff); color: inherit;
  padding: 7px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px; line-height: 1.5;
}
.im-mcopt b { flex: none; }
.im-mcopt.on { border-color: var(--primary, #4f46e5); background: var(--primary-soft, #eef2ff); }
.im-sel {
  border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 4px 8px;
  background: var(--card, #fff); color: inherit; font-size: 13px;
}
.im-fill {
  border: none; border-bottom: 2px solid var(--primary, #4f46e5); background: transparent;
  color: inherit; font-size: 13.5px; padding: 2px 4px; margin: 0 4px; text-align: center;
}
.im-fill:focus { outline: none; background: var(--primary-soft, #eef2ff); border-radius: 6px 6px 0 0; }
.im-heads { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.im-head-row { display: flex; gap: 8px; padding: 3px 0; font-size: 13.5px; line-height: 1.55; }
.im-hk {
  flex: none; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--bg, #f6f7f9); font-weight: 700; font-size: 12px;
}
.im-fillbox { line-height: 2.1; }
.im-tbl { border-collapse: collapse; width: 100%; margin: 8px 0; }
.im-tbl th, .im-tbl td { border: 1px solid var(--line, #e5e7eb); padding: 6px 10px; font-size: 13px; text-align: left; }
.im-tbl th { background: var(--bg, #f6f7f9); }

/* 写作 */
.im-essay {
  width: 100%; height: calc(100% - 40px); min-height: 380px; resize: none;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 12px 14px;
  background: var(--card, #fff); color: inherit; font-size: 14px; line-height: 1.8;
  font-family: inherit;
}
.im-wc { text-align: right; color: var(--muted, #6b7280); font-size: 12.5px; padding-top: 6px; }
.im-chart { max-width: 100%; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; margin: 10px 0; }
.im-wpane { height: 100%; display: flex; flex-direction: column; }

/* 成绩页 */
.im-score-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.im-score-big {
  flex: 1; min-width: 130px; text-align: center; border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px; padding: 16px 10px;
}
.im-score-big .n { font-size: 30px; font-weight: 800; }
.im-score-big .n small { font-size: 14px; font-weight: 500; color: var(--muted, #6b7280); }
.im-score-big.band { background: var(--primary-soft, #eef2ff); border-color: var(--primary, #4f46e5); }
.im-score-big.band .n { color: var(--primary-dark, #3730a3); }
/* 整套总分指导（2026-10-29） */
.im-score-big.overall { background: linear-gradient(135deg, #fff7ed, #fff); border-color: #f0b37e; flex: 1.25; }
.im-score-big.overall .n { color: #b45309; font-size: 34px; }
/* 写作三档分：小作文 / 大作文 / 写作总分 */
.im-band-row { display: flex; gap: 12px; flex-wrap: wrap; margin: -4px 0 12px; }
.im-band-cell {
  flex: 1; min-width: 150px; display: flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 10px 14px; background: var(--surface, #fff);
}
.im-band-cell b { font-size: 22px; font-weight: 800; color: var(--primary-dark, #3730a3); font-variant-numeric: tabular-nums; }
.im-band-cell span { font-size: 12px; color: var(--muted, #6b7280); }
.im-band-cell.wt { background: #f0fdf6; border-color: #9fd3ba; }
.im-band-cell.wt b { color: #15803d; }
.im-band-cell.none b { color: var(--muted, #9ca3af); }
/* 作文批改的折叠块（逐句点评 / 优化全文） */
.ws-ai-fold { margin-top: 8px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 6px 12px 0; }
.ws-ai-fold > summary { cursor: pointer; padding: 6px 0; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.ws-ai-fold > summary span { font-size: 11.5px; color: var(--muted, #6b7280); }
.ws-ai-fold[open] > summary { border-bottom: 1px dashed var(--line, #e5e7eb); margin-bottom: 6px; }
.ws-ai-fold .wq-sents { border: 0; padding: 0 0 8px; }
.ws-ai-fold .wq-doc { padding-bottom: 10px; }
.im-grid { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.im-cell {
  width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; font-size: 12.5px; font-weight: 700; cursor: default;
}
.im-cell.ok { background: var(--ok-soft, #dcfce7); color: var(--ok, #16a34a); }
.im-cell.bad { background: #fee2e2; color: #b91c1c; }
.im-myessay { white-space: normal; line-height: 1.8; margin-top: 8px; font-size: 13.5px; }

/* 解析页 */
.im-anatabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.im-anatabs.sub { margin: 0 0 12px; }
.im-anabody { min-height: 200px; }
.im-doc { font-size: 14px; line-height: 1.9; }
.im-doc h3 { margin: 18px 0 8px; }
.im-doc blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--primary, #4f46e5); background: var(--bg, #f6f7f9); border-radius: 0 8px 8px 0; }
.im-mine { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }
.im-mine.ok { background: var(--ok-soft, #dcfce7); color: var(--ok, #16a34a); }
.im-mine.bad { background: #fee2e2; color: #b91c1c; }

/* 2026-10-25 解析页两栏：左「原文 / 范文」· 右「讲义」
   两边各自独立滚动 —— 左栏停在原文某一段，右栏翻讲义页签不互相打断。 */
.im-ana2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start;
}
.im-ana2-l, .im-ana2-r {
  background: var(--card, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  padding: 14px 16px; min-width: 0;
}
.im-ana2-l, .im-ana2-r { max-height: 78vh; overflow: auto; }
.im-side-h {
  font-size: 13px; font-weight: 700; color: var(--muted, #6b7280);
  padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--line, #e5e7eb);
}
.im-orig { line-height: 2; font-size: 14.5px; }
/* 范文：英文一段 + 中文一段，中文用浅底区分，一眼能看出哪段是翻译 */
.im-mdl-en { margin: 0 0 4px; line-height: 1.95; font-size: 14.5px; }
.im-mdl-zh {
  margin: 0 0 14px; padding: 8px 12px; border-radius: 8px;
  background: var(--bg, #f6f7f9); color: var(--muted, #6b7280);
  font-size: 13.5px; line-height: 1.9;
}
.im-model .im-anatabs.sub { margin: 0 0 12px; }

/* 词汇一键收藏：按钮贴在词条行尾，收藏后变绿勾 */
.im-fav {
  margin-left: 8px; padding: 1px 8px; font-size: 12px; line-height: 1.6;
  border: 1px solid var(--line, #e5e7eb); border-radius: 999px;
  background: transparent; color: var(--muted, #6b7280); cursor: pointer;
  white-space: nowrap; vertical-align: middle;
}
.im-fav:hover { border-color: var(--primary, #4f46e5); color: var(--primary, #4f46e5); }
.im-fav.on { background: var(--ok-soft, #dcfce7); border-color: var(--ok, #16a34a); color: var(--ok, #16a34a); }

/* 专注模式（模拟题）：藏掉全站顶栏与导航，只留题目、计时与交卷键。
   退出条件写死在页面上（Esc / 右上角按钮），不会出现「进得去出不来」。
   2026-10-26 用户口径：**要布满整个屏幕** —— 之前只藏了顶栏，题目区还是被
   .main 的容器边距与页面留白挤成一小块。现在改成：整屏只有「一条工具条 + 铺满的答题区」，
   并顺手接上浏览器原生全屏（requestFullscreen），不支��也不影响 CSS 兜底。 */
body.wb-focus { overflow: hidden; }
body.wb-focus .topbar,
body.wb-focus .tabbar,
body.wb-focus .page-head,
body.wb-focus .back-bar { display: none !important; }
body.wb-focus .main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body.wb-focus .wrap { max-width: none !important; padding: 0 !important; margin: 0 !important; }
/* 专注模式：顶部导航都藏了，考试框直接撑满整屏（2026-10-27 用户口径：
   「窗口还可以往下拉一些，下面空白不需要这么多」——原来仍按 100vh - 120px 扣减，
   等于把已藏掉的导航高度又扣了一遍，底部就空出一大截）。
   im-main 用 flex:1 自动占满，im-split 跟到 100% 即可，不再写死 vh。 */
body.wb-focus .im-exam { border-radius: 0; overflow: hidden; margin: 0; height: calc(100vh - 2px); min-height: 0; }
body.wb-focus .im-topbar { position: sticky; top: 0; z-index: 20; border-radius: 0; }
body.wb-focus .im-split { height: 100%; }
body.wb-focus .im-passage,
body.wb-focus .im-questions { max-height: none; height: 100%; }
/* 课堂里的练习也走同一套（考研客观题 / 翻译 / 写作都在 #/classroom） */
body.wb-focus .cls-crumb { padding-top: 0; }
body.wb-focus .cls-focus { background: var(--primary, #4f46e5); color: #fff; border-color: transparent; }
/* ---------- 课堂页专注模式：真正铺满一屏（2026-11-01 用户口径） ----------
   用户原话：「所有的专注模式打开应该是满屏状态。现在很多课程的专注模式底部是
   以前『笔记』区占位的空缺，请扩展专注模式的对话框把空位填满。」
   病根：笔记卡 2026-10-29 全站下架后，.cls-pane 仍按 calc(100vh - 268px) 扣减，
   这个值当年是「页头 + 页签 + 底部笔记卡」的合高；顶栏在专注模式下已经藏掉，
   等于把不存在的东西又扣了一遍，底部就空出一大块。老规则 .cls-panes/.cls-split
   早就不存在对应 DOM，一直是空转。
   现在改成布局自洽的写法：整页竖排 flex，页签条 / 工具条按内容占高，
   中间两栏 flex:1 吃满剩余空间并在栏内滚动 —— 不写死 vh，也就不会再出现空位。 */
body.wb-focus.cls-guarding #view.main {
  display: flex; flex-direction: column; gap: 8px;
  height: 100vh; min-height: 0; overflow: hidden;
  padding: 6px 10px 0 !important;
}
@supports (height: 100dvh) { body.wb-focus.cls-guarding #view.main { height: 100dvh; } }
body.wb-focus.cls-guarding #view .cls-crumb,
body.wb-focus.cls-guarding #view .cls-guestbar,
body.wb-focus.cls-guarding #view #clsBanner { display: none !important; }
body.wb-focus.cls-guarding #view .cls-subtabs,
body.wb-focus.cls-guarding #view .cls-tools,
body.wb-focus.cls-guarding #view .cls-mediabar,
body.wb-focus.cls-guarding #view .cls-nolook,
body.wb-focus.cls-guarding #view #clsHw { flex: 0 0 auto; }
body.wb-focus.cls-guarding #view .cls-subtabs { margin-bottom: 0; }
body.wb-focus.cls-guarding #view .cls-grid.read,
body.wb-focus.cls-guarding #view .cls-grid.pr,
body.wb-focus.cls-guarding #view .cls-practice { flex: 1 1 auto; min-height: 0; height: auto; }
body.wb-focus.cls-guarding #view .cls-practice { display: flex; flex-direction: column; }
body.wb-focus.cls-guarding #view .cls-practice > .cls-grid.pr { flex: 1 1 auto; min-height: 0; }
body.wb-focus.cls-guarding #view .cls-grid.read,
body.wb-focus.cls-guarding #view .cls-grid.pr { align-items: stretch; }
body.wb-focus.cls-guarding #view .cls-grid.read .cls-pane,
body.wb-focus.cls-guarding #view .cls-grid.pr .cls-pane { height: auto; min-height: 0; }
body.wb-focus.cls-guarding #view .cls-pane > .cls-inkwrap { min-height: 100%; }
/* 原生全屏时（点了按钮但浏览器真的进全屏了）把那一条工具条也压到最薄 */
/* 原生全屏也一样：由父容器 flex 分配高度，两栏一律占满，不写死 vh */
body.wb-focus:fullscreen .im-split,
body.wb-focus:fullscreen .cls-split { height: 100%; }
/* 退出键固定在右上角，任何滚动位置都能点得到 */
.wb-focus-exit { position: fixed; right: 14px; top: 12px; z-index: 4000; }

/* ---------- 专注模式统一兜底（2026-11-01 夜，用户口径「一定要满屏」）----------
   全站三套专注态（课堂 wb-focus / 练习题页 ex-focus-on / 精读 og-focus-on）各自都调过，
   这里再加一层总保险：任何专注态下 ——
     ① 页面本身高度锁死为一屏、不出整页滚动；
     ② 主内容容器 #view.main 一律吃满视口高（不被旧 vh 扣减或 max-width 压住）；
     ③ 底部不留白：容器 padding-bottom 收 0，末级面板 flex 吃满。 */
body.wb-focus, body.ex-focus-on, body.og-focus-on { height: 100vh; overflow: hidden; }
@supports (height: 100dvh) {
  body.wb-focus, body.ex-focus-on, body.og-focus-on { height: 100dvh; }
}
body.wb-focus #view.main,
body.ex-focus-on #view.main,
body.og-focus-on #view.main { height: 100vh; max-height: none; max-width: none; }
@supports (height: 100dvh) {
  body.wb-focus #view.main,
  body.ex-focus-on #view.main,
  body.og-focus-on #view.main { height: 100dvh; }
}
body.wb-focus #view.main,
body.ex-focus-on #view.main,
body.og-focus-on #view.main { padding-bottom: 0 !important; }
/* 页脚（#siteFoot，约 70px）不属于正文，专注态下必须一并隐藏，
   否则 main 的 flex:1 只能吃到「视口 − 页脚」，底部永远留一条空白。 */
body.wb-focus #siteFoot,
body.ex-focus-on #siteFoot,
body.og-focus-on #siteFoot { display: none !important; }
body.ex-focus-on #view .ex3,
body.og-focus-on #view .og-read { margin-bottom: 0; }
body.ex-focus-on #view .ex-col,
body.og-focus-on #view .og-pane { height: 100%; }
body.ex-focus-on #view .ex-col > .card,
body.og-focus-on #view .og-pane > .card { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: auto; }
body.og-focus-on #view .og-pane > .card > .og-doc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.og-focus-on #view .og-doc .cls-doc { flex: 1 1 auto; min-height: 0; max-height: none; }

/* ================= 雅思写作专属版面（2026-10-25） =================
   写作 = 小作文 / 大作文两个专板；每块内上下两段（基础 / 进阶），课以方块展示，
   每段下再挂两个「待建」板块（习题与范文 / 句子与语料）。 */
.wz-sec { margin-top: 14px; }
.wz-boards { display: grid; gap: 14px; }
.wz-board {
  border: 1px solid var(--line, #e5e7eb); border-radius: 12px; background: var(--card, #fff);
  padding: 12px 14px 14px;
}
.wz-board-h {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px dashed var(--line, #e5e7eb);
}
.wz-board-h h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.tag.wz { background: var(--primary-soft, #eef2ff); color: var(--primary, #4f46e5); border-color: transparent; }
.wz-desc {
  margin: 8px 0 2px; font-size: 13px; line-height: 1.65; color: var(--text-2, #4b5563);
}
.wz-stage { margin-top: 12px; }
.wz-stage-h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.wz-stage-h b { font-size: 14px; }
.wz-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wz-tile {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: var(--surface, #f9fafb);
  padding: 10px 11px; text-decoration: none; color: var(--text, #111827);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.wz-tile:hover {
  border-color: var(--primary, #4f46e5); color: var(--primary, #4f46e5);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .12); transform: translateY(-1px);
}
.wz-tile .wz-no {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  background: var(--primary, #4f46e5); color: #fff;
  font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.wz-tile b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.wz-empty {
  border: 1px dashed var(--line, #e5e7eb); border-radius: 10px; padding: 14px;
  text-align: center; color: var(--muted, #6b7280); font-size: 13px;
}
.wz-pending { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.wz-pend {
  display: flex; align-items: center; gap: 8px;
  border: 1px dashed var(--line, #e5e7eb); border-radius: 10px;
  background: repeating-linear-gradient(135deg, var(--surface, #f9fafb), var(--surface, #f9fafb) 8px, transparent 8px, transparent 16px);
  padding: 9px 11px; opacity: .78;
}
.wz-pend b { font-size: 13px; font-weight: 600; }
@media (max-width: 900px) {
  .wz-tiles { grid-template-columns: repeat(2, 1fr); }
  .wz-pending { grid-template-columns: 1fr; }
}

/* ================= 雅思阅读专属版面（2026-10-26） =================
   阅读 = 两门课（筑基十讲 / 破局二十讲）；每门课按内容分 4 段，
   讲次以方块展示，点方块直接进那一讲的课堂页。 */
.rd-sec { margin-top: 14px; }
.rd-courses { display: grid; gap: 14px; }
.rd-course {
  border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  background: var(--card, #fff); padding: 12px 14px 14px;
}
.rd-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 9px; border-bottom: 1px dashed var(--line, #e5e7eb);
}
.rd-level {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: .5px;
}
.rd-level.base { background: #0d9488; }
.rd-level.adv { background: #c2410c; }
.rd-ttl { min-width: 0; }
.rd-ttl h3 {
  margin: 0; font-size: 17px; line-height: 1.3;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.rd-ttl h3 span { font-size: 13px; font-weight: 500; color: var(--muted, #6b7280); }
.rd-en { font-size: 12px; color: var(--muted, #6b7280); margin-top: 2px; }
.rd-desc {
  margin: 9px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-2, #4b5563);
}
.rd-seg { margin-top: 12px; }
.rd-seg-h {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px;
}
.rd-seg-h b { font-size: 14px; }
.rd-range { font-size: 12px; color: var(--muted, #6b7280); }
.rd-segd { font-size: 12px; color: var(--muted, #6b7280); }
.rd-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rd-tile {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
  gap: 2px 8px; align-items: center;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
  background: var(--surface, #f9fafb); padding: 9px 10px;
  text-decoration: none; color: var(--text, #111827);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rd-tile:hover {
  border-color: var(--primary, #4f46e5); color: var(--primary, #4f46e5);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .12); transform: translateY(-1px);
}
.rd-tile .rd-no {
  grid-row: 1 / 3; grid-column: 1;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--primary, #4f46e5); color: #fff;
  font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.rd-tile b { grid-column: 2 / 4; font-size: 13px; font-weight: 600; line-height: 1.4; }
.rd-min { grid-column: 2; font-size: 11px; color: var(--muted, #6b7280); justify-self: start; }
.rd-go {
  grid-column: 3; font-size: 11px; color: var(--primary, #4f46e5);
  justify-self: end; opacity: 0; transition: opacity .15s;
}
.rd-tile:hover .rd-go { opacity: 1; }
.rd-loading, .rd-empty {
  border: 1px dashed var(--line, #e5e7eb); border-radius: 10px; padding: 12px;
  font-size: 13px; color: var(--muted, #6b7280);
}
.rd-empty { text-align: center; margin-top: 8px; }
.rd-empty.sm { padding: 9px; font-size: 12px; }
@media (max-width: 900px) {
  .rd-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ================= 讲义正文排版（雅思阅读 / 写作讲义共用） =================
   讲义本体是 HTML 片段，靠这几个 class 撑起「标题 · 表格 · 元信息 · 英文例句 · 答案行」。
   没有它们：表格是裸的、英文原文与中文讲解挤成一团、答案看不出是答案。
   一律用 wt- 前缀 + 具体 class 名，不碰 .cls-scroll h3 这类全局选择器 ——
   别的课型（听力 / 口语 / 精读）的讲义不受影响。 */
.wt-h3 {
  margin: 16px 0 8px; padding-bottom: 6px;
  font-size: 15px; font-weight: 700; line-height: 1.4;
  border-bottom: 1px solid var(--line, #e5e7eb); color: var(--text, #111827);
}
.wt-h4 {
  margin: 12px 0 5px; font-size: 13.5px; font-weight: 650; line-height: 1.45;
  color: var(--primary-dark, #4338ca);
}
.wt-tbl { overflow-x: auto; margin: 9px 0 13px; }
.wt-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wt-tbl th, .wt-tbl td {
  border: 1px solid var(--line, #e5e7eb); padding: 6px 9px;
  text-align: left; vertical-align: top;
}
.wt-tbl th {
  background: var(--surface, #f9fafb); font-weight: 650;
  color: var(--text-2, #4b5563); white-space: nowrap;
}
.wt-tbl td { line-height: 1.65; color: var(--text-2, #4b5563); }
.wt-meta {
  margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: 12.5px; line-height: 1.6;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
  background: var(--surface, #f9fafb); padding: 10px 12px;
}
.wt-meta dt { font-weight: 650; color: var(--text-2, #4b5563); }
.wt-meta dd { margin: 0; color: var(--muted, #6b7280); }
.wt-en {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.6;
  color: var(--muted, #6b7280); letter-spacing: .02em;
}
.wt-eg {
  margin: 8px 0; padding: 8px 11px;
  border-left: 3px solid var(--primary, #4f46e5);
  background: var(--primary-soft, #eef2ff); border-radius: 0 8px 8px 0;
  font-size: 13.5px; line-height: 1.8; color: var(--text, #111827);
  word-break: break-word;
}
.wt-qa {
  margin: 6px 0 10px; padding: 7px 11px; border-radius: 8px;
  background: var(--surface, #f9fafb);
  font-size: 12.5px; line-height: 1.75; color: var(--text-2, #4b5563);
}
.wt-note { margin: 4px 0 8px; font-size: 12.5px; line-height: 1.7; color: var(--muted, #6b7280); }
@media (max-width: 700px) {
  .wt-meta { grid-template-columns: 1fr; gap: 2px; }
  .wt-meta dt { margin-top: 6px; }
}

/* 我的词汇收藏（#/myvocab） */
.mv-list { display: grid; gap: 8px; }
.mv-row {
  background: var(--card, #fff); border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px; padding: 10px 12px;
}
.mv-main { font-size: 14.5px; line-height: 1.8; }
.mv-main b { font-size: 15px; }
.mv-mean { color: var(--muted, #6b7280); margin-left: 8px; }
.mv-x { display: block; color: var(--muted, #6b7280); font-size: 13px; margin-top: 2px; }
.mv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* 单词本两类视图（2026-10-26）：总词汇本 A-Z 的字母索引与分组行 */
.hz-chip i { font-style: normal; opacity: .68; margin-left: 4px; font-size: 11.5px; }
.hz-chip.on i { opacity: .85; }
.vb-grp td {
  background: var(--surface-2, #eef1f9); letter-spacing: .6px;
  font-size: 12px; padding: 6px 10px !important;
}
.vb-grp td b { font-size: 13px; }

/* 课程增补向导（2026-10-26）：三步条 / 动作卡 / 当前选中条 / 去向卡 */
.sup-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sup-step { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px;
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: var(--surface-2, #eef1f9); }
.sup-step > b { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary, #2f6fed); color: #fff; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center; }
.sup-step span { display: block; font-size: 13.5px; font-weight: 600; }
.sup-step i { display: block; font-style: normal; font-size: 12px;
  color: var(--muted, #6b7280); margin-top: 2px; }
.sup-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.sup-act { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 11px 12px;
  background: var(--surface, #fff); display: flex; flex-direction: column; gap: 7px; }
.sup-act.hot { border-color: var(--primary, #2f6fed); }
.sup-act-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-act-h b { font-size: 14px; }
.sup-when { font-size: 12.5px; color: var(--text-2, #4b5563); }
.sup-ol { margin: 0; padding-left: 18px; font-size: 12.5px;
  color: var(--text-2, #4b5563); line-height: 1.75; }
.sup-now { margin-top: 10px; padding: 9px 11px; border-radius: 10px;
  background: var(--surface-2, #eef1f9); display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; font-size: 13px; }
.sup-after { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.sup-af { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 10px 12px; }
.sup-af b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.sup-af span { display: block; font-size: 12.5px; color: var(--text-2, #4b5563); margin-bottom: 7px; }
@media (max-width: 900px) { .sup-steps { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .im-split { grid-template-columns: 1fr; }
  .im-passage { border-right: none; border-bottom: 1px solid var(--line, #e5e7eb); max-height: 40vh; }
  .im-cover-grid { grid-template-columns: 1fr; }
  /* 窄屏（手机 / 平板竖屏）改上下排：两栏挤在一起谁都读不了 */
  .im-ana2 { grid-template-columns: 1fr; }
  .im-ana2-l, .im-ana2-r { max-height: none; overflow: visible; }
}

/* ---------- 3 天免费体验提示条（2026-10-26 总规则）----------
   课堂页顶部：未登录访客看到本机还剩几天；已到期则明说降为前 10%，并给出注册入口。 */
.cls-guestbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cls-guestbar .sp { flex: 1 1 auto; }

/* ---------- 老师端 · 学生子工作台七块（2026-10-26）---------- */
.ws-navcard { padding: 10px 12px; }
/* ④ 词汇本：通用（左） / 收藏（右）两栏对照（2026-10-30 用户口径「分左右排版」） */
.vb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.vb-pane { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); }
.vb-pane .grid.g4 { gap: 8px; }
.vb-pane .kpi { padding: 8px 10px; }
.vb-pane .kpi .v { font-size: 19px; }
.vb-pane .tb-wrap { max-height: 460px; overflow: auto; }
@media (max-width: 1000px) { .vb-two { grid-template-columns: 1fr; } }
/* ⑥ 其它：三小节竖排，节与节之间一条分隔线 */
.ws-other { min-width: 0; }
.ws-other.sep { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ws-other-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ws-other-h h3 { font-size: 15px; margin: 0; }
.ws-sec-no { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); font-size: 12.5px; font-weight: 700; }
/* ① 近 30 天每日登录次数：小柱图 */
.lg-days { display: flex; align-items: flex-end; gap: 4px; height: 74px; margin-top: 4px; overflow-x: auto; }
.lg-day { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.lg-day i { display: block; width: 14px; border-radius: 3px 3px 0 0; background: var(--brand); opacity: .75; }
.lg-day span { font-size: 10px; color: var(--muted); }
/* ④ 错题题干：长文本截断成两行 */
.ws-stem { max-width: 340px; white-space: normal; color: var(--text-2); font-size: 12.5px; }
/* ⑥⑦ 模拟题详情：作文原文与 AI 批改 */
.ws-mini-mock { cursor: pointer; }
.ws-essay { max-height: 220px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface-2); font-size: 13px; line-height: 1.75; }
.ws-ai { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.ws-ai-p { margin-top: 7px; font-size: 13px; color: var(--text-2); line-height: 1.7; }
.ws-ai-p ul { margin: 4px 0 0 18px; }
.ws-ai-model { margin-top: 9px; padding: 9px 11px; border-radius: 8px; background: var(--brand-soft); font-size: 13px; line-height: 1.75; }

/* ---------- 老师端 · 我的资料 / 简历解析（2026-10-26）---------- */
.rs-upload .rs-uprow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.rs-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 14px; }
.rs-fields .field { display: flex; flex-direction: column; gap: 4px; }
.rs-fields .field > span { font-size: 12.5px; color: var(--muted); }
.rs-fields .field .inp { width: 100%; }
.rs-fields textarea.inp { resize: vertical; min-height: 84px; line-height: 1.6; }
.rs-qual { display: grid; grid-template-columns: 1.4fr .8fr .7fr 2fr 1.2fr auto; gap: 8px; margin-top: 8px; align-items: center; }
.rs-qual .inp { width: 100%; }
@media (max-width: 860px) {
  .rs-qual { grid-template-columns: 1fr 1fr; }
}

/* ---------- 登录活跃日历 / 词汇量自测（2026-10-26）---------- */
.lg-cal { display: flex; gap: 4px; margin-top: 6px; overflow-x: auto; padding-bottom: 4px; }
.lg-cell { flex: 0 0 auto; width: 21px; }
.lg-cell i { display: block; height: 16px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); }
.lg-cell.on i { background: var(--brand); border-color: var(--brand); }
.lg-cell span { display: block; margin-top: 2px; font-size: 9px; color: var(--muted); text-align: center; }

.vt-prog { height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.vt-prog i { display: block; height: 100%; background: var(--brand); transition: width .25s; }
.vt-q-meta { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.vt-word { margin: 14px 0 4px; font-size: 30px; font-weight: 700; letter-spacing: .5px; }
.vt-opts { display: grid; gap: 8px; margin-top: 12px; }
.vt-opt { text-align: left; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); font-size: 14px; color: inherit; cursor: pointer; }
.vt-opt:hover { border-color: var(--brand); background: var(--brand-soft); }
.vt-hero { text-align: center; padding: 16px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.vt-hero-k { font-size: 13px; color: var(--muted); }
.vt-hero-v { font-size: 40px; font-weight: 750; color: var(--brand); line-height: 1.25; }
.vt-hero-v small { font-size: 15px; font-weight: 500; color: var(--muted); }
.vt-hero-l { margin-top: 6px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.vt-bands { margin-top: 8px; display: grid; gap: 9px; }
.vt-band-t { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vt-band-t .sp { flex: 1 1 auto; }
.vt-bar { margin-top: 4px; height: 8px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.vt-bar i { display: block; height: 100%; border-radius: 5px; background: var(--brand); }

/* ---------- 单词本：多选 · 一键删除 · 导出三件套（2026-10-26）---------- */
.vb-pick { width: 34px; text-align: center; }
.vb-pick input { width: 15px; height: 15px; cursor: pointer; }
tr.vb-on td { background: var(--brand-soft); }
.vb-bar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 9px 12px; margin-top: 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); box-shadow: 0 -2px 10px rgba(20, 26, 48, .06); }
.vb-bar .sp { flex: 1 1 auto; }
.vb-exp { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vb-exp .btn { white-space: nowrap; }

/* ---------- 我的错词本（2026-10-27）：左侧日期 · 右侧两部分 ---------- */
.vw-wrap { display: grid; grid-template-columns: 246px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; }
.vw-side { display: flex; flex-direction: column; gap: 6px; max-height: 72vh; overflow: auto; padding-right: 2px; }
.vw-day { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer;
  font: inherit; color: inherit; transition: border-color .12s, background .12s; }
.vw-day:hover { border-color: var(--line-strong); }
.vw-day.on { border-color: var(--primary); background: var(--primary-soft); }
.vw-day b { font-size: 13.5px; }
.vw-day .hint { font-size: 11.5px; }
.vw-num { font-size: 12px; color: var(--text-2); }
.vw-num i { font-style: normal; }
.vw-num i.bad { color: var(--danger); font-weight: 700; }
.vw-main { min-width: 0; }
.vw-bad td { background: var(--danger-soft); }
@media (max-width: 820px) {
  .vw-wrap { grid-template-columns: 1fr; }
  .vw-side { flex-direction: row; max-height: none; overflow-x: auto; padding-bottom: 4px; }
  .vw-day { min-width: 158px; }
}

/* ---------- 阅读专训（2026-10-27 · 400 篇长文） ---------- */
.rd-wrap { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1000px) { .rd-wrap { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: start; } }
.rd-pass { font-size: 15px; line-height: 1.85; }
.rd-pass p { margin: 0 0 12px; }
.rd-p-h { font-size: 14px; margin: 14px 0 8px; color: var(--text-2); }
.rd-quiz { position: sticky; top: 64px; }
@media (max-width: 999px) { .rd-quiz { position: static; } }
.rd-q { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.rd-q.wrong { border-color: #e11d4855; background: #e11d4808; }
.rd-q-h { font-size: 14px; line-height: 1.6; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.rd-q-no { color: var(--muted); font-variant-numeric: tabular-nums; }
.rd-q-opts { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.rd-opt.ok { border-color: var(--ok); color: var(--ok); }
.rd-opt.bad { border-color: #e11d48; color: #e11d48; }
.rd-short { max-width: 260px; }
.rd-key { margin-top: 8px; font-size: 13px; color: var(--text-2); }
.rd-expl { margin-top: 6px; font-size: 13px; line-height: 1.7; }
.rd-i-no { font-variant-numeric: tabular-nums; color: var(--muted); }
.rd-i-ttl a { font-weight: 600; }
.row-dim { opacity: .45; }
.rd-v-w { white-space: nowrap; }
.rd-drill { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 12px 0 16px; background: var(--surface-2); }
.rd-drill .rd-d-head { display: flex; align-items: center; gap: 10px; }
.rd-drill h3 { font-size: 16px; }
.rd-drill p { font-size: 13.5px; color: var(--text-2); line-height: 1.75; margin: 8px 0 0; }

/* ---- 板块页顶部的「词汇打卡」入口条（2026-10-28）----
   用户口径：每一个板块都要有词汇打卡。做成一条与板块卡同宽的浅蓝条，
   放在标题下面、板块正文上面，不抢板块主体的版面。 */
.vocab-entry {
  border-color: #c7d2fe;
  background: linear-gradient(135deg, #f5f8ff, #fbfcff);
  margin-bottom: 14px;
}
.vocab-entry h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vocab-entry .hint b { color: var(--text); }

/* ---------- 阅读专训目录：方块排版（2026-10-28 · 英文 + 中文双行标题） ---------- */
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.rd-box {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px;
  background: var(--surface, #fff); transition: box-shadow .15s, border-color .15s;
}
.rd-box:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(15, 23, 42, .07); }
.rd-box-dim { opacity: .55; }
.rd-box-dim:hover { border-color: var(--line); box-shadow: none; }
.rd-b-hd { display: flex; align-items: center; gap: 8px; }
.rd-b-no { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.rd-b-en { display: block; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--text); }
.rd-box-dim .rd-b-en { pointer-events: none; }
.rd-b-cn { display: block; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.rd-b-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.rd-b-act { margin-top: auto; padding-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.rd-page-cn { font-size: 15px; color: var(--text-2); line-height: 1.5; }

/* ---------- 阅读专训：两栏独立滚动（2026-10-28 用户口径） ----------
   做题页：左栏原文自己滚、右栏习题自己滚，套题页签放在右栏顶部；
   解析页：左栏是原文讲义（原文/词汇表/长难句/全文翻译/文章特点与行文逻辑/做题思路
   六个页签），右栏是解析，顶部三套页签。两栏互不牵连 —— 换套题时原文位置不丢。
   形态与课堂页 .cls-pane / .cls-scroll 同源：pane 定高 + 栏体 overflow:auto。
   .rd-board 的高度由 readdrill.js 的 fitBoard() 按视口实测写入，不写死减量。 */
.rd-board { display: flex; flex-direction: column; min-width: 0; }
.rd-split { flex: 1 1 auto; min-height: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  /* 做题页：原文略宽（要读长句），习题略窄但要放得下选项按钮 */
  .rd-split { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
  /* 解析页：左讲义与右解析等宽 */
  .rd-split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* 讲义页：只有一个栏，占满整幅宽度 */
  .rd-split.one { grid-template-columns: minmax(0, 1fr); }
}
.rd-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); }
.rd-pane-h { flex: 0 0 auto; padding: 7px 10px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-pane-t { font-weight: 650; font-size: 13.5px; white-space: nowrap; }
.rd-pane-b { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 12px 14px 22px; font-size: 15px; line-height: 1.85; }
.rd-pane-b p { margin: 0 0 12px; }
.rd-pane-f { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--surface-2);
  padding: 7px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); }
.rd-sp { flex: 1 1 auto; }

/* ---------- 原文标记工具（2026-10-30）：划线 / 下划线 / 波浪 / 圈圆 / 圈方 / 高亮 × 5 色 ---------- */
.rd-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.rd-tools-lb { font-size: 12px; color: var(--muted); margin-right: 2px; }
.rd-tools-sep { width: 1px; height: 16px; background: var(--line); margin: 0 3px; }
.rd-tools-hint { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.rd-tool { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  font-size: 12.5px; line-height: 1.5; cursor: pointer; white-space: nowrap; }
.rd-tool i { font-style: normal; font-size: 12.5px; }
.rd-tool:hover { background: var(--surface-2); }
.rd-tool.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 650; }
.rd-tool.ghost { border-color: transparent; background: transparent; }
.rd-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent;
  background: var(--sw); cursor: pointer; padding: 0; }
.rd-swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.rd-mark-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
/* 「读原文」= 手掌：按住原文就能上下推（拖拽滚动），拖的时候整页变抓握手型 */
.rd-grab { cursor: grab; }
body.rd-panning, body.rd-panning * { cursor: grabbing !important; }
body.rd-panning, body.rd-panning * { user-select: none !important; -webkit-user-select: none !important; }
.rd-mark-svg.on { pointer-events: auto; touch-action: none; }
.rd-mark-svg.on[data-tool="pen"], .rd-mark-svg.on[data-tool="wave"] { cursor: crosshair; }
.rd-mark-svg.on[data-tool="under"] { cursor: text; }
.rd-mark-svg.on[data-tool="circle"], .rd-mark-svg.on[data-tool="rect"],
.rd-mark-svg.on[data-tool="hl"] { cursor: cell; }
/* 栏内页签：默认不撑破栏头，窄屏可横向滑动 */
.rd-tabs { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.rd-tab { border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 4px 11px; font-size: 12.5px; line-height: 1.5;
  cursor: pointer; white-space: nowrap; font-family: inherit; }
.rd-tab:hover { border-color: var(--primary); color: var(--primary); }
.rd-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.rd-tab .sc { font-size: 11px; opacity: .85; margin-left: 4px; }
/* 段号：题目里写「见第 X 段」，原文侧要能一眼数出来 */
.rd-pn { display: inline-block; min-width: 15px; margin-right: 7px; color: var(--muted);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.rd-pane-b .rd-q-h { font-size: 14px; line-height: 1.6; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
/* 讲义页签里的表格/清单在窄栏里也要能滚 */
.rd-pane-b .tb-wrap { overflow: auto; }
.rd-pane-b h4 { font-size: 13.5px; margin: 14px 0 6px; color: var(--text-2); }
.rd-pane-b .rd-doc { font-size: 14.5px; line-height: 1.8; }
@media (max-width: 999px) {
  .rd-board { height: auto !important; }
  .rd-split { grid-template-columns: 1fr; }
  .rd-pane { height: auto; }
  .rd-pane-b { overflow: visible; max-height: none; }
}

/* ================= 管理后台排版统一（2026-10-28） =================
   口径：去掉多余空白、建立主次 —— 表格里的下拉不再独占一行；
   工作台职能分区等宽三列；页面节奏统一。 */
/* ① 表格单元格里的下拉 / 小按钮：行内紧凑排，不再整行堆叠（用户与角色等页） */
table.tb td select { width: auto; min-width: 96px; margin: 2px 6px 2px 0; vertical-align: middle; }
table.tb td .btn { vertical-align: middle; }
/* ② 工作台职能分区（.ov-zones）：三张卡等高起点，卡内条目收紧 */
.ov-zones { align-items: start; }
.ov-zones .navg .navg-l a { padding: 8px 11px; }
.ov-zones .navg .card-h h3 { font-size: 14.5px; }
/* ③ 我的提交状态页签（复用 .chip，加一条与卡头的间距） */
.card-h .chip { margin-top: -2px; }

/* ---------- 阅读专训讲义：行文特点 / 考核重点 / 做题思路 分段排版（2026-10-28） ---------- */
.rd-prose { line-height: 1.9; font-size: 14.5px; color: var(--text); }
/* 段间空一行：下边距取 1em（≈一个空行），比单纯换行更稳，不会被字体行高带偏 */
.rd-prose .rd-para { margin: 0 0 1em; }
.rd-prose .rd-para:last-child { margin-bottom: 0; }
/* 编号（① / 1.）提出来做行首标记，扫读时一眼看到第几条 */
.rd-prose .rd-p-no {
  display: inline-block; min-width: 1.6em; margin-right: .35em;
  color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* 「考核重点：」这类只有几个字的引导语，单独提一行当小标题 */
.rd-prose .rd-para-lead { font-weight: 700; color: var(--primary); margin-bottom: .5em; }
.rd-prose-h { margin: 18px 0 10px; font-size: 15px; }
.rd-prose-h:first-child { margin-top: 0; }

/* ---------- 板块介绍统一三行版式（2026-10-28 用户口径） ----------
   第 1 行定位 / 第 2 行内容 / 第 3 行学法；序号小圆点 + 紧凑行距。
   下面再跟一行 .intro3-tags —— 板块内部的分板块一律用小标签展示。 */
.intro3 { margin: 2px 0 8px; display: grid; gap: 6px; }
.intro3-line { display: flex; gap: 8px; align-items: baseline; line-height: 1.7; }
.intro3-n {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; margin-top: 2px;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; transform: translateY(2px);
}
.intro3-t { font-size: 13.5px; color: var(--text-2); min-width: 0; }
.intro3-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.intro3-tags .tag { font-size: 12px; }

/* ---------- 错词本：批量管理勾选态（2026-10-28） ---------- */
.vw-day { position: relative; }
.vw-day.sel { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.vw-ck {
  position: absolute; top: 6px; right: 8px; width: 20px; height: 20px;
  border-radius: 6px; border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; background: #fff;
}
.vw-day.sel .vw-ck { background: var(--primary); border-color: var(--primary); }

/* ---------- 国际课程 · 蓝金主题（2026-10-28 用户口径） ----------
   与沐晓专训（紫）同级、但配色独立：藏青蓝 = 专业学术，描金 = 主课待发的仪式感。
   只挂在 .alevel / .alevel-card / .al-* 上，不碰其它板块。 */
.tag.alevel {
  background: #E3ECFA; color: #123C78; font-weight: 650;
  box-shadow: inset 0 0 0 1px #B9CCe8;
}
.tag.alevel::before { content: '◆'; font-size: 8px; margin-right: 3px; color: #C9A227; }
.card.alevel, .card.tight.alevel-card {
  border-color: #C7D6EE;
  background: linear-gradient(180deg, #FBFDFF, #F3F7FE);
}
.card.alevel .card-h h2, .alevel-card h3 { color: #123C78; }
/* 卡头金线：标题下压一条渐变描金 */
.card.alevel .card-h h2::after, .alevel-card h3::after {
  content: ''; display: block; height: 2px; margin-top: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #C9A227, rgba(201, 162, 39, 0));
}
/* 「国际课程」黑标 → 藏青底描金字，主页与内页同口径 */
.alevel .tag.part-tag, .alevel-card .tag.part-tag {
  background: #123C78; color: #F3D27A; box-shadow: inset 0 0 0 1px #C9A227;
}
/* 蓝金体系标签（A Level / IGCSE / IB） */
.alevel .tag.blue, .alevel-card .tag.blue {
  background: #E3ECFA; color: #123C78; box-shadow: inset 0 0 0 1px #B9CCE8;
}
/* 「即将上线」/「建设中」在蓝金语境里统一走金调 */
.alevel .tag.amber, .alevel-card .tag.amber, .mini-kb.al-up .tag.amber {
  background: #F9F0D6; color: #8A6A12; box-shadow: inset 0 0 0 1px #DEC98A;
}
/* 「这个板块是什么」三行解读：深蓝引导词 + 金色行线 */
.card.alevel .al-read-row b { color: #123C78; }
.card.alevel .al-read-row { border-bottom: 1px dashed #E4D6A8; }
.card.alevel .al-read-row:last-child { border-bottom: 0; }
/* 10 门主课占位卡：蓝边、悬停描金 */
.mini-kb.al-up { border-color: #C7D6EE; background: #FBFDFF; }
.mini-kb.al-up:hover { border-color: #C9A227; }
.mini-kb.al-up .mini-kb-h b { color: #123C78; }
/* 已上线科目卡（2026-11-01）：绿标 + 悬停浮起，与占位卡一眼区分 */
.mini-kb.al-up.live { border-color: #9CC9A8; background: #F7FCF8; }
.mini-kb.al-up.live:hover { border-color: #15803d; box-shadow: 0 6px 16px rgba(21, 128, 61, .14); transform: translateY(-2px); }
.mini-kb.al-up.live .mini-kb-h b { color: #14532d; }
.mini-kb.al-up .tag.green { background: #E4F5E9; color: #15803d; box-shadow: inset 0 0 0 1px #A7D7B4; }
/* 科目页：沐晓专训卡描金边 */
.card.alevel.al-drill { border-color: #DEC98A; background: linear-gradient(180deg, #FFFDF4, #FBFDFF 62%); }
.card.alevel.al-drill .card-h h2 { color: #8A6A12; }
/* 科目页课时方格：复用 .rd-tile，未排课的那张置灰不可点 */
.rd-tile.off { opacity: .55; cursor: default; }
.rd-tile.off:hover { border-color: var(--line); box-shadow: none; transform: none; }
/* alevelhome 头部介绍容器 */
.alevel-intro { color: var(--text-2); }

/* ---------- 老师工作台 · 总统计块状一排（2026-10-28 用户口径） ---------- */
.tst-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: stretch;
}
@media (max-width: 1180px) { .tst-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .tst-grid { grid-template-columns: repeat(2, 1fr); } }
.tst-block {
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: 12px 14px; min-height: 96px; display: flex; flex-direction: column; gap: 4px;
}
.tst-block .k { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.tst-block .v { font-size: 24px; line-height: 1.2; color: var(--text); }
.tst-block .v small { font-size: 12.5px; color: var(--text-2); font-weight: 500; margin-left: 2px; }
.tst-block .s { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-top: auto; }
.tst-block .tst-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tst-block .tst-tags .tag { font-size: 11.5px; }

/* ---------- 派发学情三方块（2026-10-28 用户口径）----------
   学生子工作台 ⑨：课程 / 习题 / 模拟测试三个方块 —— 没派发的点进去就是「还未派发」，
   派发过的点进去看这一栏的统计（完成度、正确率、解析、作文与 AI 评价）。 */
.dsp-blks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.dsp-blk {
  appearance: none; cursor: pointer; font-family: inherit; text-align: left; color: inherit;
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: 12px 14px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.dsp-blk:hover { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.dsp-blk.on { border-color: var(--primary); background: var(--primary-soft); }
.dsp-blk-t { font-size: 14px; font-weight: 700; color: var(--text); }
.dsp-blk-v { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--text); }
.dsp-blk-v small { font-size: 12px; font-weight: 500; color: var(--muted); }
.dsp-blk-s { font-size: 12px; color: var(--text-2); }
.dsp-blk-go { font-size: 12px; font-weight: 600; color: var(--primary); margin-top: 2px; }
.dsp-item { border-top: 1px dashed var(--line); padding: 10px 0 4px; }
.dsp-item:first-child { border-top: 0; }
.dsp-item-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dsp-item-m { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.dsp-item-x { margin-top: 8px; }

/* ---------- 任务派发：三步流程 + 内容按类目分组（2026-10-28）----------
   内容不再是一张几千条的长表：课程栏 = 技能类目 → 课程 → 课时，
   习题栏 = 技能类目 → 习题，模拟栏 = Test 1-10 / 11-20 / 21-30 三段。
   每一层都能整组全选，也能只勾某一条。 */
.dsp-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 6px; border-radius: 6px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 12px; font-weight: 700;
}
.dsp-grps { display: flex; flex-direction: column; gap: 8px; }
/* ⚠️ 这里是「右边内容看不到全部 / 滚不动」的真正病根（2026-10-30 第五轮定位）：
   .dsp-grps 是定高的 flex 列，子项默认 flex-shrink:1 → 组一多就被**压扁**，
   每组的方块被自己的 overflow:hidden 裁掉，scrollHeight 永远等于 clientHeight，
   于是既不滚、也看不到后面的题（看起来还像「下面把上面盖住了」）。
   子项一律 flex:0 0 auto，高度按内容走，溢出交给外层的 overflow-y:scroll。 */
.dsp-grps > * { flex: 0 0 auto; }
.dsp-grp { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.dsp-grp.open { border-color: var(--primary-soft); }
.dsp-grp-h {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; background: var(--surface-2);
}
.dsp-grp.open > .dsp-grp-h { border-bottom: 1px solid var(--line); }
.dsp-grp-all { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13.5px; color: var(--text); }
.dsp-grp-b { padding: 6px 12px 10px; }
.dsp-sub { border-top: 1px dashed var(--line); padding: 6px 0 2px; }
.dsp-sub:first-child { border-top: 0; }
.dsp-sub-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.dsp-sub-h .dsp-grp-all { font-size: 13px; color: var(--text-2); }
.dsp-sub-b { padding: 2px 0 4px 26px; }
/* 具体内容一律铺成方块，不再从上往下码成一张长表 —— 老师一眼扫到、一点即选 */
.dsp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.dsp-tile {
  position: relative; cursor: pointer; user-select: none;
  display: flex; flex-direction: column; gap: 4px; min-height: 64px;
  padding: 10px 26px 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.dsp-tile:hover { border-color: var(--primary); background: var(--primary-soft); }
.dsp-tile.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.dsp-tile input { position: absolute; width: 0; height: 0; opacity: 0; }
.dsp-tile::after {
  content: '✓'; position: absolute; top: 6px; right: 9px;
  font-size: 13px; font-weight: 700; color: var(--primary); opacity: 0; transition: opacity .12s;
}
.dsp-tile.on::after { opacity: 1; }
.dsp-tile-t {
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dsp-tile-m { font-size: 11.5px; color: var(--muted); }
/* 派发选题上的「学生做过没有」标记：
   已派·已完成（绿）/ 已派·待完成（橙）/ 已自刷（蓝）—— 老师仍可勾选重派，只是看得见。 */
.dsp-tile-s {
  font-size: 10.5px; font-weight: 700; line-height: 1.5; padding: 1px 7px; border-radius: 999px;
  align-self: flex-start; background: var(--surface-2); color: var(--muted);
}
.dsp-tile-wait { border-color: #f0d59a; background: #fffaf0; }
.dsp-tile-wait .dsp-tile-s { background: var(--warn-soft, #fef3c7); color: #a16207; }
.dsp-tile-ok { border-color: #9fd3ba; background: #f4fdf8; }
.dsp-tile-ok .dsp-tile-s { background: var(--ok-soft, #dcfce7); color: #15803d; }
.dsp-tile-self { border-color: #bcd0f5; background: #f4f7ff; }
.dsp-tile-self .dsp-tile-s { background: var(--primary-soft, #eef2ff); color: var(--primary-dark, #3730a3); }
.dsp-tile.on.dsp-tile-ok, .dsp-tile.on.dsp-tile-self, .dsp-tile.on.dsp-tile-wait {
  box-shadow: inset 0 0 0 1px var(--primary); border-color: var(--primary);
}
/* 2026-10-30 派发选题时的状态标记：已自刷 / 已派 · 待完成 / 已派 · 已完成 */
.dsp-tile-s {
  align-self: flex-start; font-size: 11px; line-height: 1.4; padding: 1px 7px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--bg);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.dsp-tile-self .dsp-tile-s { color: #8a5a12; border-color: #f0d9a8; background: #fdf5e3; }
.dsp-tile-wait .dsp-tile-s { color: #2c5aa0; border-color: #c6d8f2; background: #eef4fd; }
.dsp-tile-ok .dsp-tile-s { color: #1f7a45; border-color: #bfe3ce; background: #eaf7ef; }
.dsp-tile-ok, .dsp-tile-wait { background-image: none; }

/* 2026-10-30 学生总览第一屏：老师派发的任务（课程 / 习题 / 模拟） */
.todo-card { border-left: 3px solid var(--primary); }
.todo-sec { margin-top: 10px; }
.todo-sec:first-of-type { margin-top: 4px; }
.todo-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.todo-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-top: 1px dashed var(--line);
}
.todo-row:first-of-type { border-top: 0; }
.todo-t { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.45; }
.todo-row .grow { min-width: 0; }
.todo-row .btn { flex: none; }

/* ---------- 学生自刷模拟题：一套一张「分题统计」卡，点进去是详情页 ---------- */
.mk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.mk-card {
  appearance: none; cursor: pointer; font-family: inherit; text-align: left; color: inherit;
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: 12px 14px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.mk-card:hover { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.mk-card-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-card-score { font-size: 20px; font-weight: 700; line-height: 1; color: var(--text); }
.mk-card-score small { font-size: 12px; font-weight: 500; color: var(--muted); }
.mk-card-m { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.mk-card-go { font-size: 12px; font-weight: 600; color: var(--primary); }

/* 详情页里的解析正文（与学生端解析页同口径，只是容器不同） */
.mk-ana-p { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; }
.mk-ana-p:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.mk-ana-h { font-size: 13.5px; line-height: 1.75; color: var(--text); margin-top: 4px; }
.mk-ana-h p { margin: 6px 0; }
.mk-ana-h h3 { font-size: 14px; margin: 8px 0 4px; }

/* ---- 成人英语板块：20 大场景折叠目录（2026-10-28） ---- */
details.adult-sec {
  border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: 8px; background: #fff; overflow: hidden;
}
details.adult-sec > summary {
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-size: 14px; background: var(--surface-2, #f7f9ff);
}
details.adult-sec > summary::-webkit-details-marker { display: none; }
details.adult-sec > summary::before {
  content: '▸'; color: var(--text-2); transition: transform .15s; font-size: 12px;
}
details.adult-sec[open] > summary::before { transform: rotate(90deg); }
details.adult-sec > summary:hover { color: var(--primary); }
details.adult-sec > summary b { font-size: 14.5px; }
details.adult-sec > summary .hint { color: var(--text-2); font-size: 12.5px; }
details.adult-sec[open] > summary { border-bottom: 1px solid var(--line); }
details.adult-sec .toc { padding: 6px 10px 10px; }

/* ---- 成人英语：场景方格 + 课程方格（2026-10-28 用户口径：两级方格排列，方格带简介） ---- */
.adult-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.adult-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left; width: 100%;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2, #f8faff);
  padding: 12px 14px; cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.adult-cell:hover {
  border-color: var(--primary); box-shadow: 0 2px 10px rgba(37,99,235,.10);
  transform: translateY(-1px);
}
.adult-cell b { font-size: 15px; line-height: 1.35; }
.adult-cell .adult-cell-en { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.adult-cell .adult-cell-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.adult-cell .adult-cell-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 12px; color: var(--text-2);
}
.adult-cell .adult-cell-go { font-size: 12px; color: var(--primary); margin-top: auto; }
a.adult-cell { text-decoration: none; }

/* ---- 课堂页：成人英语正文页签（背景 / 第1-3关，左右栏各自切换） ---- */
.cls-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px 0; position: sticky; top: 0; z-index: 3;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--line);
}
.cls-tab {
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 8px 8px 0 0; background: var(--surface-2, #f5f7fa);
  padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--text-2);
}
.cls-tab.on {
  background: var(--surface, #fff); color: var(--primary);
  font-weight: 650; border-color: var(--primary);
}
.cls-tpane { padding-top: 4px; }

/* 成人英语页签 2.0（2026-10-28 二轮）：两行标签（第 N 关 / 场景对话）+ 页内小节跳转 */
.cls-tab.adult {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  line-height: 1.25; padding: 5px 12px 6px;
}
.cls-tab.adult b { font-size: 13px; font-weight: 650; }
.cls-tab.adult span { font-size: 11px; color: var(--text-2); font-weight: 400; }
.cls-tab.adult.on span { color: var(--primary); opacity: .9; }
.cls-subnav {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px 6px; margin-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.cls-subnav-b {
  border: 1px solid var(--line); background: var(--surface-2, #f5f7fa);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px;
  color: var(--text-2); cursor: pointer;
}
.cls-subnav-b:hover { color: var(--primary); border-color: var(--primary); }
.cls-subh { font-size: 14px; margin: 16px 0 6px; color: var(--text); }

/* ---- 老师的教学板块锁（2026-10-28 用户口径：其它板块上锁，可教的标「教学」） ---- */
.kb-cell.locked,
.nav-cell.locked,
.mini-kb.locked {
  cursor: not-allowed;
  opacity: .62;
  background: #f3f4f6 !important;
  border-color: #d7dbe2 !important;
  filter: grayscale(.28);
}
.kb-cell.locked:hover,
.nav-cell.locked:hover,
.mini-kb.locked:hover {
  box-shadow: none !important;
  transform: none !important;
  border-color: #d7dbe2 !important;
}
.kb-cell.locked .kb-cell-nm,
.nav-cell.locked b,
.mini-kb.locked .mini-kb-h b { color: #6b7280; }
.locked-tag {
  background: #e5e7eb !important;
  color: #6b7280 !important;
  border-color: #d1d5db !important;
}
.tag.sm { font-size: 11.5px; padding: 1px 6px; }

/* ---- 全站页脚（2026-10-28：「管理员入口」从顶栏挪到网页最底部） ---- */
.site-foot {
  max-width: 1180px;
  margin: 26px auto 0;
  padding: 16px 18px 26px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.site-foot-in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sf-brand { display: flex; align-items: center; gap: 8px; }
.sf-brand .brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; font-size: 11px; font-weight: 700;
}
.sf-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sf-links a { color: var(--text-2); }
.sf-links a:hover { color: var(--primary); }
/* 2026-11-02：备案号行（工信部要求首页底部可见并外链 beian.miit.gov.cn）。
   单独占一行居中，移动端也稳。 */
.sf-icp { flex-basis: 100%; text-align: center; margin-top: 4px; }
.sf-icp a { color: var(--muted); text-decoration: none; }
.sf-icp a:hover { color: var(--text-2); text-decoration: underline; }
.sf-admin {
  margin-left: auto;
  color: var(--text-2) !important;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.sf-admin:hover { border-color: var(--primary); color: var(--primary) !important; }
@media (max-width: 640px) {
  .site-foot { padding: 14px 14px 22px; }
  .sf-links { gap: 10px; font-size: 12px; }
  .sf-admin { margin-left: 0; }
}

/* ---- 访客「体验与记录」弹窗正文（portal.js guestTrialNotice） ---- */
.gt-tip p { margin: 0 0 8px; line-height: 1.75; }
.gt-tip .gt-hl { color: var(--primary); }
.gt-list { margin: 0; padding-left: 20px; line-height: 1.8; }
.gt-list li { margin-bottom: 4px; }

/* ---- 知识库咨询：协议正文留白区（下一轮填协议全文） ---- */
.consult-body {
  min-height: 220px;
  line-height: 1.9;
  font-size: 14px;
  color: var(--text-2);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 18px;
  background: var(--surface-2, #fafbfc);
}

/* ---- 管理工作台首页：两个大方块（2026-10-28 用户口径：管人 / 管内容 分开进去，不混排） ---- */
.wb2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .wb2-grid { grid-template-columns: 1fr; } }
.wb2-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s;
}
.wb2-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.wb2-card .wb2-ico { font-size: 24px; line-height: 1; }
.wb2-card h3 { margin: 0; font-size: 20px; letter-spacing: .3px; }
.wb2-card p { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--text-2); }
.wb2-card .wb2-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.wb2-card .wb2-go { margin-top: auto; padding-top: 6px; color: var(--primary); font-weight: 650; font-size: 14px; }

/* ---- 咨询服务：协议正文编辑器 ---- */
.doc-ed { display: flex; flex-direction: column; gap: 6px; }
.doc-lb { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.doc-ed input[type=text] { width: 100%; }
.doc-ed textarea { width: 100%; min-height: 340px; line-height: 1.85; font-size: 14px; }
.doc-prev {
  margin-top: 14px; padding: 16px 18px; border: 1px dashed var(--line);
  border-radius: 10px; background: var(--surface-2); line-height: 1.9; font-size: 14px;
}

/* ---- 老师端作业提醒（2026-10-28） ---- */
.al-bell { position: relative; }
.al-bell.has-new { color: var(--primary); border-color: var(--primary); }
.al-dot {
  display: inline-block; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px;
  margin-left: 5px; border-radius: 9px; background: #e5484d; color: #fff;
  font-size: 11px; font-weight: 700; text-align: center; vertical-align: middle;
}
.al-list { max-height: 52vh; overflow: auto; }
.al-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.al-item.unread { background: var(--primary-soft, rgba(59,130,246,.08)); border-color: var(--primary); }
.al-item .al-t { font-size: 13.5px; line-height: 1.7; }
.al-item .al-t span { color: var(--primary); }
.al-item .al-m { margin-top: 4px; font-size: 12px; color: var(--muted); }
/* 2026-10-29：整条提醒可点（点击直达作业完成详情），给足可点的视觉暗示 */
.al-item.go { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.al-item.go:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(15,23,42,.08); }
.al-item.go:active { transform: translateY(1px); }
.al-item.go:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 站内提醒里的「查看作业详情 →」（2026-10-29）：提醒不该只报个信就断在这里 */
.al-go { margin-top: 8px; }

/* ---- 知识库咨询：管理员微信二维码名片（2026-10-28 协议配套） ---- */
.qr-img {
  width: 220px; height: 220px; max-width: 100%;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; object-fit: contain; padding: 6px;
}

/* ---- 老师「教学板块」分配弹窗（2026-10-28：师资与简历 → 教学板块） ---- */
.tb-note { font-size: 13px; line-height: 1.8; color: var(--text-2); margin-bottom: 10px; }
.tb-list { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.tb-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
.tb-row:hover { background: var(--surface-2); }
.tb-row.big { font-weight: 650; }
.tb-grp { border-bottom: 1px dashed var(--line); padding-bottom: 6px; margin-bottom: 6px; }
.tb-grp:last-child { border-bottom: 0; margin-bottom: 0; }
.tb-grp-h { background: var(--surface-2); border-radius: 6px; }
.tb-grp-b { padding-left: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 10px; }

/* ===== 任务派发：三个大方块 + 全屏选择窗口（2026-10-28 重排） ===== */
.dsp-bigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.dsp-big {
  position: relative; display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 18px 18px 15px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); cursor: pointer; transition: .15s; font: inherit;
}
.dsp-big:hover { border-color: var(--primary); box-shadow: 0 6px 20px rgba(0, 0, 0, .07); transform: translateY(-1px); }
.dsp-big.on { border-color: var(--primary); background: var(--primary-soft); }
.dsp-big-ico { font-size: 25px; line-height: 1; }
.dsp-big-t { font-size: 16px; font-weight: 700; color: var(--text); }
.dsp-big-n { font-size: 27px; font-weight: 800; color: var(--primary); line-height: 1.15; }
.dsp-big-n small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.dsp-big-n i { font-size: 13px; font-style: normal; font-weight: 500; color: var(--muted); }
.dsp-big-s { font-size: 12.5px; color: var(--text-2); }
.dsp-big-go { margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.dsp-big-badge {
  position: absolute; top: 12px; right: 12px; background: var(--primary); color: #fff;
  font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}

body.dsp-lock { overflow: hidden; }
.dsp-ov {
  position: fixed; inset: 0; z-index: 9000; background: rgba(18, 22, 32, .46);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.dsp-win {
  width: min(1240px, 100%); height: min(88vh, 880px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .3); overflow: hidden;
}
.dsp-win-h { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.dsp-win-ico { font-size: 22px; line-height: 1; }
.dsp-win-ttl h3 { margin: 0; font-size: 16px; color: var(--text); }
.dsp-win-ttl .hint { margin-top: 2px; }
.dsp-x {
  margin-left: 4px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  background: transparent; cursor: pointer; font-size: 14px; color: var(--muted);
}
.dsp-x:hover { background: var(--surface-2); color: var(--text); }
.dsp-win-b { flex: 1; min-height: 0; display: flex; }
.dsp-side {
  width: 258px; flex: 0 0 258px; overflow: auto; padding: 8px 8px 14px;
  border-right: 1px solid var(--line); background: var(--surface-2);
}
.dsp-side-i {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 7px 10px; border-radius: 8px;
  cursor: pointer; font-size: 13px; color: var(--text-2); font-family: inherit;
}
.dsp-side-i:hover { background: var(--primary-soft); }
.dsp-side-i.on { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.dsp-side-i.all { font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dsp-side-i.all.on { color: var(--primary-dark); }
.dsp-side-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsp-side-i i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.dsp-side-i b {
  font-size: 10.5px; font-weight: 700; background: var(--primary); color: #fff;
  border-radius: 999px; padding: 1px 6px;
}
.dsp-side-h {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--muted); padding: 12px 10px 5px;
}
.dsp-side-h span { font-weight: 500; font-size: 11.5px; }
/* 2026-10-29：左侧分类目录可折叠 —— 组标题可点，箭头指示开合 */
.dsp-side-cap {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted);
  padding: 4px 10px 6px; text-transform: uppercase;
  border-bottom: 1px dashed var(--line); margin-bottom: 6px;
}
.dsp-side-h[role="button"] { cursor: pointer; border-radius: 8px; user-select: none; }
.dsp-side-h[role="button"]:hover { background: var(--surface); }
.dsp-side-ar { font-style: normal; font-size: 10.5px; width: 14px; text-align: center; color: var(--muted); }
.dsp-side-g:not(.open) .dsp-side-cats { display: none; }
.dsp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dsp-tools {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 9px 14px; border-bottom: 1px dashed var(--line);
}
/* 2026-10-29：补 min-height:0 —— flex 子项默认 min-height:auto，
   内容一多会把窗口撑破、被外层 overflow:hidden 裁掉且不出滚动条（用户报障：模拟题看不全）。
   2026-10-29 二次加固（用户报第三次「右边只能看到前面几行」）：
   ① .dsp-win-b / .dsp-main 两个中间层也显式写 min-height:0 + overflow:hidden，
      链条上任何一层漏了都会让最里层的滚动失效；
   ② 滚动条画出来（默认被主题样式压成一条细线，老师根本看不出这里能滚）；
   ③ 底部留白，最后一行方块不会被贴边裁掉半行。 */
.dsp-win-b { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.dsp-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.dsp-main .dsp-grps {
  flex: 1; min-height: 0; max-height: 100%; overflow: auto; overflow-y: scroll;
  padding: 10px 14px 28px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #b9c0cc transparent;
}
.dsp-main .dsp-grps::-webkit-scrollbar { width: 11px; height: 11px; }
.dsp-main .dsp-grps::-webkit-scrollbar-track { background: rgba(15, 23, 42, .05); border-radius: 8px; }
.dsp-main .dsp-grps::-webkit-scrollbar-thumb {
  background: #b9c0cc; border: 3px solid transparent; border-radius: 8px; background-clip: content-box;
}
.dsp-main .dsp-grps::-webkit-scrollbar-thumb:hover { background: #98a2b3; background-clip: content-box; }
/* 左侧分类菜单：二级分类缩进一列 + 同样给出可见滚动条 */
.dsp-side { overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #b9c0cc transparent; }
.dsp-side::-webkit-scrollbar { width: 9px; }
.dsp-side::-webkit-scrollbar-thumb { background: #c8ced8; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.dsp-side-sub { padding-left: 18px !important; font-size: 12.5px; }
.dsp-side-sub::before {
  content: '└'; position: absolute; margin-left: -14px; color: var(--muted); font-size: 11px;
}
.dsp-side-i { position: relative; }
/* 右侧内容区顶部的「星级快筛」（阅读专训：主题 → 星级） */
.dsp-starbar:empty { display: none; }
.dsp-starbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 2px 14px 8px; border-bottom: 1px dashed var(--line); margin-bottom: 8px;
}
.dsp-starbar .hint { margin-right: 2px; }
/* 第三层分组（二级分类：单图 / 组合图 / 题材 / 星级） */
.dsp-sub2 { border-top: 1px dashed var(--line); padding: 5px 0 2px; }
.dsp-sub2:first-child { border-top: 0; }
.dsp-win-f { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); }
/* ===== 2026-10-30 第五轮：派发选择窗口 —— 左栏大类 + 右侧两排页签 + 折叠组 =====
   用户口径：「左边显示听、读、写的大菜单，可折叠；二级选项放到右边内容区的页签里；
   作文点小作文 / 大作文，右边再分单图 / 组合图、题型，下面按主题折叠；
   听力右边内容太多又不能滚就选不了；阅读的星级也放右边页签。
   内容过多要么全显示，要么能滚动，不能下面的盖住上面的。」
   版式用一个硬约束保证：中间那行是 flex 列，页签 / 工具条都是 auto 高度，
   只有 .dsp-grps 吃掉剩余高度并且自己滚 —— 不会再互相压。 */
.dsp-rail {
  width: 196px; flex: 0 0 196px; overflow-y: auto; padding: 8px 8px 14px;
  border-right: 1px solid var(--line); background: var(--surface-2);
  scrollbar-width: thin; scrollbar-color: #b9c0cc transparent;
}
.dsp-rail::-webkit-scrollbar { width: 9px; }
.dsp-rail::-webkit-scrollbar-thumb { background: #c8ced8; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.dsp-rail-cap {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted);
  padding: 2px 6px 8px; border-bottom: 1px dashed var(--line); margin-bottom: 7px;
}
.dsp-rail-cap button {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 6px;
}
.dsp-rail-cap button:hover { background: var(--surface); color: var(--text); }
.dsp-rail-i {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  border: 1px solid transparent; background: transparent; padding: 8px 9px;
  border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--text-2);
  font-family: inherit; margin-bottom: 2px;
}
.dsp-rail-i:hover { background: var(--surface); }
.dsp-rail-i.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); font-weight: 700; }
.dsp-rail-ico { font-size: 14px; line-height: 1; }
.dsp-rail-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsp-rail-i i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.dsp-rail-i b { font-size: 10.5px; font-weight: 700; background: var(--primary); color: #fff; border-radius: 999px; padding: 1px 6px; }
/* 听力习题的两个子菜单（沐晓专训练习 / 听力模拟练习）上面的小标题 */
.dsp-rail-cap2 {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted);
  padding: 7px 9px 4px;
}
.dsp-rail-cap2 + .dsp-rail-i { margin-left: 3px; }
/* 左栏折叠：只剩图标，内容区变宽（老师在大屏上一次看完更多方块） */
.dsp-win.rail-min .dsp-rail { width: 58px; flex: 0 0 58px; padding: 8px 5px; }
.dsp-win.rail-min .dsp-rail-n,
.dsp-win.rail-min .dsp-rail-i i,
.dsp-win.rail-min .dsp-rail-i b,
.dsp-win.rail-min .dsp-rail-cap span { display: none; }
.dsp-win.rail-min .dsp-rail-i { justify-content: center; padding: 9px 0; }

/* 右侧：页签排在工具条之上，都是 auto 高度 */
#dpTabs { flex: 0 0 auto; }
.dsp-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 14px 0; }
.dsp-tabs + .dsp-tabs { padding-top: 6px; }
.dsp-tabs-cap { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); margin-right: 2px; }
.dsp-tab {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-2); border-radius: 999px;
  padding: 5px 11px; font-size: 12.5px; cursor: pointer; font-family: inherit; line-height: 1.2;
}
.dsp-tab:hover { border-color: var(--primary); color: var(--primary-dark); }
.dsp-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.dsp-tab i { font-style: normal; font-size: 11px; opacity: .7; }
.dsp-tab b { font-size: 10.5px; font-weight: 700; background: var(--primary); color: #fff; border-radius: 999px; padding: 0 5px; }
.dsp-tab.on b { background: rgba(255, 255, 255, .32); }
.dsp-win2 .dsp-tools { flex: 0 0 auto; margin-top: 9px; }
/* 折叠组：标题行永远在，内容随开关走 */
.dsp-tog {
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  border-radius: 8px; padding: 3px 9px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.dsp-tog:hover { border-color: var(--primary); color: var(--primary-dark); }
.dsp-win2 .dsp-grp-h0 { border-bottom: 0; }
.dsp-win2 .dsp-grp-h { cursor: pointer; }
.dsp-win2 .dsp-grp-h:hover { background: var(--surface-2); }
.dsp-win2 .dsp-grp-h input, .dsp-win2 .dsp-grp-h button { cursor: pointer; }
.dsp-win2 .dsp-grp { margin-bottom: 0; }
.dsp-win2 .dsp-grp-b { padding: 8px 12px 10px; }
/* 页签多的时候（阅读 15 个主题）保证两排也能完整换行，不挤成一团 */
.dsp-tabs .dsp-tab { max-width: 210px; }
.dsp-tabs .dsp-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 2026-10-30 第六轮：已派清单日期菜单 + 学生详情（课程 / 习题 / 模拟） =====
   用户口径：「已派清单里添加日期菜单，看每一天派给了谁什么内容」；
   「学生子平台不仅能查看详情：课程=看了多久、是否全面；习题=做题时间、正确率、错题批改、
     作文逐句修改；模拟=各板块分数、错题分布（题型子菜单）、作文逐句批改」。
   这些样式在两端的 app.css 里，不依赖 writing.css（admin.html 不加载它）。 */
.dsp-datebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-2);
}
.dsp-datebar label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.dsp-datebar select { min-width: 210px; }
.dsp-datebar .hint { font-size: 12px; }
.dsp-datebar b { color: var(--text); }

/* 详情大窗里的统一 KPI 行 */
.dsp-kpis { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.dsp-kpi {
  flex: 1 1 120px; min-width: 120px; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; background: var(--surface);
}
.dsp-kpi .k { font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.dsp-kpi .v { font-size: 19px; font-weight: 700; margin-top: 2px; line-height: 1.2; }
.dsp-kpi .v small { font-size: 12px; font-weight: 400; color: var(--muted); }

/* 题型子菜单（模拟题错题分布）：一行小胶囊，点了只看该题型 */
.dsp-mktabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0 10px; }
.dsp-mktab {
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.dsp-mktab:hover { border-color: var(--primary); color: var(--primary-dark); }
.dsp-mktab.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.dsp-mktab i { font-style: normal; font-size: 11px; opacity: .75; margin-left: 3px; }
.dsp-mktab.on i { opacity: .95; }

/* 课时覆盖表：学过的一行高亮，没学过的灰 */
.dsp-less { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dsp-less th, .dsp-less td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.dsp-less th { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.dsp-less tr.touched td { background: var(--primary-soft); }
.dsp-less tr.cur td { box-shadow: inset 3px 0 0 var(--primary); font-weight: 600; }
.dsp-less .muted { color: var(--muted); }

/* 作文逐句批改（老师端阅读版；颜色口径与学生端一致：好=绿 / 一般=琥珀 / 差=红） */
.dsp-essay-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 6px; }
.dsp-essay-h b { font-size: 13.5px; }
.dsp-essay {
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: 11px 13px; font-size: 13.5px; line-height: 1.85; white-space: pre-wrap;
}
.dsp-wsent { display: flex; gap: 9px; padding: 9px 0; border-top: 1px dashed var(--line); }
.dsp-wsent:first-child { border-top: 0; }
.dsp-wsent-n {
  flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--surface-2);
  color: var(--muted); font-size: 11.5px; display: flex; align-items: center; justify-content: center;
}
.dsp-wsent.good .dsp-wsent-n { background: #d8f3e4; color: #1c7c4a; }
.dsp-wsent.mid .dsp-wsent-n { background: #fdf0d5; color: #96660f; }
.dsp-wsent.bad .dsp-wsent-n { background: #fbdde3; color: #b8324c; }
.dsp-wsent-b { flex: 1; min-width: 0; }
.dsp-wsent-s { font-size: 13.5px; line-height: 1.75; }
.dsp-wsent.good .dsp-wsent-s { color: #1c7c4a; }
.dsp-wsent.bad .dsp-wsent-s { color: #b8324c; }
.dsp-wsent-c { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.7; }
.dsp-wsent-f { font-size: 12.5px; color: #1c7c4a; margin-top: 3px; line-height: 1.7; }
.dsp-wsent-f b { color: var(--muted); font-weight: 600; margin-right: 5px; }
.dsp-werr { padding: 8px 0; border-top: 1px dashed var(--line); }
.dsp-werr:first-child { border-top: 0; }
.dsp-werr-q { font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dsp-werr-q s { color: #b8324c; }
.dsp-werr-sev { font-style: normal; font-size: 10.5px; border-radius: 999px; padding: 1px 7px; background: #fbdde3; color: #b8324c; }
.dsp-werr-sev.minor { background: var(--surface-2); color: var(--muted); }
.dsp-werr-f { font-size: 12.5px; color: #1c7c4a; margin-top: 2px; }
.dsp-werr-w { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.65; }

/* 2026-10-29：成绩单大窗（老师端逐题解析 + AI 解读） */
.ana-win .ana-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 24px; }
.ana-q { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.ana-q.w { border-color: color-mix(in srgb, var(--red, #d64545) 45%, var(--line)); background: color-mix(in srgb, var(--red, #d64545) 4%, transparent); }
.ana-q-h { font-weight: 650; margin-bottom: 4px; }
.ana-q-t { color: var(--text-2); font-size: 13.5px; margin-bottom: 6px; }
.ana-opt { font-size: 12.5px; color: var(--text-2); padding: 3px 8px; border-radius: 6px; }
.ana-opt.ok { background: color-mix(in srgb, #2e9e5b 12%, transparent); color: #1d7a43; font-weight: 600; }
.ana-opt.bad { background: color-mix(in srgb, var(--red, #d64545) 12%, transparent); color: var(--red, #c33); }
.ana-ai-txt { font-size: 13.5px; line-height: 1.75; color: var(--text); background: var(--surface-2); border-radius: 10px; padding: 12px 14px; }
@media (max-width: 760px) {
  .dsp-ov { padding: 0; }
  .dsp-win { width: 100%; height: 100%; border-radius: 0; }
  .dsp-win-b { flex-direction: column; }
  .dsp-side {
    width: auto; flex: 0 0 auto; max-height: 30vh; border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .dsp-rail {
    width: auto !important; flex: 0 0 auto !important; max-height: 26vh;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .dsp-win.rail-min .dsp-rail { width: auto !important; }
  .dsp-win.rail-min .dsp-rail-n { display: block; }
  .dsp-tools { padding: 8px 10px; }
  .dsp-tabs { padding: 8px 10px 0; }
}

/* ---------- 断点续答：「上次退出异常，是否继续答题」弹窗（2026-10-29） ----------
   来源真实故障：学生做题时电脑没电，换平板登录后只能从零重写。
   现在作答过程同步存云端，下次登录弹这一条，点「继续答题」直接回到上次那一页。 */
.draft-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.draft-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2, #f7f8fa);
}
.draft-row-m { flex: 1; min-width: 180px; }
.draft-row-m b { font-size: 14px; }
.draft-row-m .hint { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- 学生子工作台：各栏可折叠（2026-10-29）----------
   用户口径：「词汇本这一栏非常占空间，老师子平台打开的时候请折叠，只显示词汇量这个数字」。
   ⑤ 词汇本默认折叠，其余栏目默认展开；点标题栏或右侧「展开 / 收起」都能切换。 */
.ws-sec > .ws-sec-b { display: block; }
.ws-sec.folded > .ws-sec-b { display: none; }
.card-h.ws-sec-h { cursor: pointer; }
.ws-sec-h h2 { display: flex; align-items: center; gap: 6px; }
.ws-fold {
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  border-radius: 8px; padding: 3px 9px; font-size: 12px; line-height: 1.6;
  cursor: pointer; white-space: nowrap;
}
.ws-fold:hover { border-color: var(--primary); color: var(--primary); }
.ws-fold i { font-style: normal; display: inline-block; transition: transform .15s ease; }
.ws-sec:not(.folded) .ws-fold i { transform: rotate(180deg); }

/* ---------- 学习总览：「上次没做完的作业」常驻提醒（2026-10-29）----------
   登录时的续答弹窗万一被随手关掉，这一条就一直挂在总览页最上面 —— 只要没交卷就不消失。 */
.resume-card { border-color: var(--amber, #d97706); border-width: 2px; }
.resume-card > .card-h h2 { display: flex; align-items: center; gap: 7px; color: var(--amber-dark, #92400e); }
.resume-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--amber, #d97706);
  box-shadow: 0 0 0 4px rgba(217, 119, 6, .16); flex: none;
}
.resume-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.resume-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2, #f7f8fa);
}
.resume-row .grow { flex: 1; min-width: 160px; }
.resume-t { font-size: 13.5px; font-weight: 600; }

/* ===== 2026-10-30 管理员「老师指派」页：长内容折叠 + 按老师 / 按课程筛选 =====
   用户口径：② 学生指派（一个学生一组、特别长）、学生归属速览、已分配的教学安排
   三块都默认折叠；后两块在标题行上给菜单 —— 归属速览按老师看学生，教学安排按课程看老师。
   折叠只切 .fold-body 的 hidden，DOM 不重建 —— 行里的勾选与下拉状态都不会丢。 */
.card.fold { padding-top: 13px; }
.card.fold > .fold-h {
  display: flex; align-items: center; gap: 10px; margin: 0;
  cursor: pointer; user-select: none; border-radius: 8px;
}
.card.fold > .fold-h h2 { margin: 0; font-size: 16.5px; }
.card.fold > .fold-h:hover h2 { color: var(--primary); }
.card.fold > .fold-h:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.fold-caret {
  flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--surface-2); color: var(--muted);
  font-size: 11px; line-height: 1; transition: transform .16s ease, background .16s ease, color .16s ease;
}
.card.fold.on > .fold-h .fold-caret { transform: rotate(90deg); background: var(--primary-soft); color: var(--primary); }
.card.fold > .fold-h .tag { flex: 0 0 auto; }
.card.fold > .fold-body { margin-top: 14px; }
.card.fold > .fold-body[hidden] { display: none; }
.fold-pick {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.fold-pick select { min-width: 168px; max-width: 258px; }
.fold-body tr.is-off { display: none; }

@media (max-width: 780px) {
  .card.fold > .fold-h { flex-wrap: wrap; row-gap: 8px; }
  .card.fold > .fold-h h2 { font-size: 15.5px; }
  .fold-pick { width: 100%; }
  .fold-pick select { flex: 1 1 auto; max-width: none; }
}

/* ===== 2026-10-30 派发选题标记：按学生算，两条标记分开上色 =====
   用户口径：① 这个学生没派过就不标、派过才标；② 学生自己做过的标「自行完成」，
   **不能**和「老师派过」混成一件事。所以一个方块最多两条徽标，各用各的颜色。 */
.dsp-tile .dsp-tile-s.s-ok { color: #1f7a45; border-color: #bfe3ce; background: #eaf7ef; }
.dsp-tile .dsp-tile-s.s-wait { color: #2c5aa0; border-color: #c6d8f2; background: #eef4fd; }
.dsp-tile .dsp-tile-s.s-self { color: #8a5a12; border-color: #f0d9a8; background: #fdf5e3; }
/* 窗口里标明「这些标记是按谁的」—— 没勾学生时明确说清，别让人以为没派过 */
.dsp-markwho {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); padding: 0 2px 8px; line-height: 1.6;
}
.dsp-markwho b { color: var(--text); font-weight: 650; }
.dsp-markwho.off { color: #a16207; }

/* ================= 老师子平台 · 师资简介卡（2026-10-29 用户口径） =================
   用户原话：「点进去是各位师资的简介，一排三个长方形排版。从简介再点进去就是老师的工作情况。」
   ⇒ 一行**三个长方形**（宽屏 3 列 → 中屏 2 列 → 窄屏 1 列），整张卡可点，
     左边头像 + 姓名/头衔，中间事实行（教龄 / 学历 / 学生数），下面一排板块标签，
     右下角一行「看工作情况 →」提示点进去是第二层。 */
.staff-grid {
  display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) { .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .staff-grid { grid-template-columns: minmax(0, 1fr); } }

.staff-card {
  --pa: var(--primary);
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 17px 13px; min-height: 168px;
  color: var(--text); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.staff-card:hover { border-color: var(--pa); box-shadow: 0 6px 18px rgba(15, 23, 42, .10); transform: translateY(-1px); text-decoration: none; }
.staff-card.accent-teal   { --pa: #0d9488; }
.staff-card.accent-violet { --pa: #7c3aed; }
.staff-card.accent-amber  { --pa: #b45309; }
.staff-card.accent-rose   { --pa: #be123c; }
.staff-card.accent-green  { --pa: #15803d; }

.staff-card .staff-top { display: flex; align-items: center; gap: 12px; }
.staff-card .staff-ava {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  background: var(--pa); color: #fff; font-size: 19px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.staff-card .staff-id { min-width: 0; }
.staff-card .staff-name { font-size: 16px; font-weight: 700; line-height: 1.25; }
.staff-card .staff-head { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.staff-card .staff-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.staff-card .staff-facts b { color: var(--text); font-weight: 650; }
.staff-card .staff-boards { display: flex; flex-wrap: wrap; gap: 5px; }
.staff-card .staff-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.staff-card .staff-foot .sp { flex: 1 1 auto; }
.staff-card .staff-go { font-size: 12.5px; font-weight: 650; color: var(--pa); white-space: nowrap; }
.staff-card:hover .staff-go { text-decoration: underline; }

/* ===== 派发台 ① 学生复选清单（2026-10-30 第二十一轮：可搜索，不再用标签墙） ===== */
.dsp-stu-list { max-height: 240px; overflow: auto; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: var(--card, #fff); }
.dsp-stu-i { display: flex; gap: 8px; align-items: center; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--line, #f1f2f4); }
.dsp-stu-i:last-child { border-bottom: 0; }
.dsp-stu-i:hover { background: var(--soft, #f7f8fa); }
.dsp-stu-i input { margin: 0; flex: 0 0 auto; }
.dsp-stu-i b { font-size: 13.5px; }
.dsp-stu-i .hint { flex: 0 0 auto; }
.dsp-stu-i .sp { flex: 1 1 auto; }
.dsp-stu-i .tag { margin: 0 0 0 2px; }

/* ===== 老师端「学生子工作平台」大标题 + 学号 / 姓名联动菜单（2026-10-30 用户口径）=====
   原话：「学生子工作平台那一块请给一个大标题『学生子工作平台』。这一块的菜单，
          选择学号后，会对应出现姓名，选择姓名后，也会对应出现学号，
          如果重名，就跳出两个学号，让老师选择一个。」
   · .ws-plat-h = 大标题（比普通卡头大一号，左侧一条主色竖线当区块标记）；
   · .dup-pick  = 重名时摆出来的「几个学号」行 / 选好之后的「姓名 ↔ 学号」对应行。 */
.card-h.ws-plat-h { align-items: flex-end; margin-bottom: 14px; }
.card-h.ws-plat-h h2 {
  position: relative; padding-left: 12px;
  font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--text);
}
.card-h.ws-plat-h h2::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  border-radius: 3px; background: var(--primary);
}
@media (max-width: 520px) { .card-h.ws-plat-h h2 { font-size: 19px; } }
.pick-wrap { display: block; }
.dup-pick {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 10px; padding: 8px 11px; font-size: 13px;
  border: 1px dashed var(--line-strong, #cfd6e6); border-radius: 10px;
  background: var(--surface-2, #eef1f9);
}
.dup-pick.ok {
  border-style: solid; border-color: var(--primary-soft, #e9efff);
  background: var(--primary-soft, #e9efff);
}
.dup-pick b { color: var(--text); }
.dup-pick .sp { flex: 1 1 auto; }

/* ===== 派发台 ① 学生下拉多选菜单（2026-10-30 第二十三轮） =====
   收起 = 一行摘要（已选学生名 + 数量徽标 + ▾），展开 = 搜索 + 复选清单；
   勾选后面板不收起，点到菜单外面才收。 */
.dsp-dd { position: relative; }
.dsp-dd-btn { width: 100%; display: flex; gap: 8px; align-items: center; padding: 9px 12px;
  border: 1px solid var(--line, #d9dde3); border-radius: 10px; background: var(--card, #fff);
  font-size: 14px; cursor: pointer; text-align: left; color: var(--text, #1c2430); }
.dsp-dd-btn:hover { border-color: var(--pri, #3564d9); }
.dsp-dd-btn.dim { color: var(--hint, #98a1ad); }
.dsp-dd-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsp-dd-n { flex: 0 0 auto; }
.dsp-dd-caret { flex: 0 0 auto; color: var(--hint, #98a1ad); font-style: normal; font-size: 12px;
  transition: transform .15s ease; }
.dsp-dd.open .dsp-dd-caret { transform: rotate(180deg); }
.dsp-dd-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--card, #fff); border: 1px solid var(--line, #d9dde3); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .14); padding: 10px; }
.dsp-dd.open .dsp-dd-panel { display: block; }
.dsp-dd-panel input[type="search"] { width: 100%; margin-bottom: 8px; }
/* 2026-11-01 用户口径：「课程下拉 / 学生下拉被下面的内容挡住了」——
   .card 上的 backdrop-filter 让每张卡自成一个层叠上下文，面板的 z-index 再高也出不了这张卡。
   面板展开时把整张卡抬到兄弟卡之上（dispatch.js 的 liftCard 负责加 / 去这个类）。 */
.card.dd-open { position: relative; z-index: 30; }
@media (max-width: 720px) {
  /* 窄屏下拉面板限高 + 内部滚动，免得面板比屏幕还长 */
  .dsp-dd-panel { max-height: 60vh; overflow: auto; }
}

/* ===== 阅读专训「三套分开 + 60 题合计」（2026-10-30 用户口径）=====
   原话：「雅思阅读理解的专训，是 60 道题，不是 20 道。一篇文章配 3 套习题，每套 20 道。
          在提交作业到老师这里时，老师看到的也应该是这三套分开的统计与 60 题的总统计。」
   · .dsp-sets / .dsp-set-row = 派发学情里一篇阅读专训的分套清单（每套一行：套号 / 正确数 / 正确率 / 用时 / 解析入口）；
   · .hw-sum                  = 老师作业表里那篇末尾的「三套合计」行（整篇 60 题总统计）；
   · .ws-mini-sum             = 学生子平台 ⑥ 清单里的合计条。 */
.dsp-sets { margin-top: 8px; border: 1px solid var(--line, #d9dde3); border-radius: 10px; overflow: hidden; }
.dsp-set-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 10px; font-size: 12.5px; color: var(--text-2);
  border-top: 1px dashed var(--line, #d9dde3);
}
.dsp-set-row:first-child { border-top: 0; }
.dsp-set-row .sp { flex: 1 1 auto; }
.dsp-set-row b { color: var(--text); }
.hw-sum { background: var(--surface-2, #f4f6fb); }
.hw-sum td { font-weight: 600; }
.hw-sum .hint { font-weight: 400; }
.ws-mini-sum { background: var(--surface-2, #f4f6fb); border-radius: 8px; padding: 7px 8px; margin-top: 2px; }

/* ============================================================
   空灵登录页（2026-10-31）：全屏云海晨光 + 玻璃卡片
   大图 assets/img/hero-sky.jpg（1536×942，已裁去水印，201KB）
   ============================================================ */
body.wb-auth {
  /* 2026-10-31 晚（用户口径）：太阳很重要，不能被注册卡片挡住 ——
     图中太阳约在 62%/55%、人物约在 37%/66%。放大到 175% 并取景 48%/73%：
     太阳落到卡片右侧（约屏宽 72% 处）、人物留在卡片左侧（约 26% 处），
     中间整条竖带留给登录 / 注册卡片。 */
  background: url("img/hero-sky.jpg") 48% 73% / 175% auto no-repeat fixed, #f6ece2;
}
/* 顶部与页签融进画面：乳白玻璃 */
body.wb-auth .topbar {
  background: rgba(255, 252, 246, .72);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(190, 160, 120, .28);
}
body.wb-auth .tabbar {
  background: rgba(255, 252, 246, .62);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom-color: rgba(190, 160, 120, .22);
}
/* 登录卡片：浮在云海上的一块白石（玻璃拟态 + 金色细边 + 柔光） */
body.wb-auth .main { padding-top: 28px; }
body.wb-auth #view > div > .card,
body.wb-auth .card {
  background: rgba(255, 253, 250, .82);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(206, 175, 128, .38);
  box-shadow: 0 24px 60px -24px rgba(150, 106, 52, .35), 0 2px 6px rgba(150, 106, 52, .08);
}
body.wb-auth .note {
  background: rgba(255, 253, 250, .72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(206, 175, 128, .25);
}
/* 主按钮：晨光渐变，浮起一点 */
body.wb-auth .btn.primary {
  background: linear-gradient(135deg, #d9a25f, var(--primary));
  box-shadow: 0 6px 18px -6px rgba(168, 118, 62, .55);
  border: none;
}
body.wb-auth .btn.primary:hover { filter: brightness(1.05); }
/* 输入框换成暖色描边 */
body.wb-auth input, body.wb-auth select {
  border-color: rgba(206, 175, 128, .5);
}
body.wb-auth input:focus, body.wb-auth select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(217, 162, 95, .18);
  outline: none;
}
/* 窄屏：大图改随窗口滚动，避免 fixed 在 iOS 上抖动 */
@media (max-width: 720px) {
  body.wb-auth { background-attachment: scroll; }
}

/* ============================================================
   2026-10-31 开屏「墟境」全屏叠态动效（用户口径：点进主页、看到 dashboard 之前，
   整屏只有图 —— 五张巨构图叠态交叉轮转，透出企业文化：
   「通过语言 · 抵达万物」/ 拉丁语 Per Verba, Ad Omnia。
   轻触任意处 / Esc 进入；一轮 50s 后自动放行；prefers-reduced-motion 直接跳过。）
   ============================================================ */
#introVeil {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  background: #f2eae1; cursor: pointer;
}
#introVeil i {
  position: absolute; inset: -2.5%; opacity: 0;
  background-size: cover; background-position: center 62%; background-repeat: no-repeat;
  animation: ivFx 50s linear infinite;
}
#introVeil .iv1  { background-image: url("img/mega1.jpg");  animation-delay: 0s; }
#introVeil .iv2  { background-image: url("img/mega2.jpg");  animation-delay: 5s; }
#introVeil .iv3  { background-image: url("img/mega3.jpg");  animation-delay: 10s; }
#introVeil .iv4  { background-image: url("img/mega4.jpg");  animation-delay: 15s; }
#introVeil .iv5  { background-image: url("img/mega5.jpg");  animation-delay: 20s; }
#introVeil .iv6  { background-image: url("img/mega9.jpg");  animation-delay: 25s; }
#introVeil .iv7  { background-image: url("img/mega6.jpg");  animation-delay: 30s; }
#introVeil .iv8  { background-image: url("img/mega7.jpg");  animation-delay: 35s; }
#introVeil .iv9  { background-image: url("img/mega8.jpg");  animation-delay: 40s; }
#introVeil .iv10 { background-image: url("img/mega10.jpg"); animation-delay: 45s; }
@keyframes ivFx {
  /* 与 hero-fx 同节奏：每张 6s，快速淡入、缓慢放大、尾部淡出（叠态交叉） */
  0%   { opacity: 0; transform: scale(1.03); }
  8%   { opacity: 1; }
  76%  { opacity: .9; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.13); }
}
/* 图上垫一层极淡的暖雾，让文字始终可读（比 hero 的纱更轻） */
#introVeil::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(252, 247, 240, .34) 0%, rgba(252, 247, 240, .1) 46%, rgba(252, 247, 240, 0) 72%),
    linear-gradient(180deg, rgba(250, 244, 236, .18) 0%, rgba(250, 244, 236, 0) 30%, rgba(250, 244, 236, 0) 70%, rgba(250, 244, 236, .22) 100%);
}
/* —— 企业文化字（字体与大小自定：中文衬线大字疏排，拉丁小字宽字距） —— */
#introVeil .iv-txt {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  animation: ivTxt 2.4s ease .5s both;
}
/* 2026-10-31 晚（用户口径：这几个字字体不好看）——
   弃用「华文中宋 + 0.4em 巨字距」的单行排法，改为碑刻式两行：
   细宋体轻字重、字距收到 .2em、行距 1.62，行间金线菱形分隔，再落拉丁小字。
   字体优先用内嵌子集字体 WB Serif（Noto Serif SC，见文件末尾 @font-face），
   拿不到才退系统宋体，保证 iPhone / Windows / 安卓观感一致。 */
#introVeil .iv-cn {
  font-family: "WB Serif", "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  font-size: clamp(26px, 4.5vw, 52px);
  font-weight: 300; color: #3a3027;
  letter-spacing: .2em; text-indent: .2em;
  line-height: 1.62;
  text-align: center;
  text-shadow: 0 1px 30px rgba(255, 252, 246, .98), 0 0 90px rgba(255, 246, 234, .7);
}
#introVeil .iv-cn span { display: block; }
/* 分隔：细线 — 菱形 — 细线 */
#introVeil .iv-rule {
  width: min(240px, 34vw); height: 9px; margin: 20px 0 18px;
  position: relative; opacity: .9;
  background:
    linear-gradient(90deg, transparent, rgba(185, 151, 95, .85) 34%, rgba(185, 151, 95, 0) 47%) left center / 46% 1px no-repeat,
    linear-gradient(270deg, transparent, rgba(185, 151, 95, .85) 34%, rgba(185, 151, 95, 0) 47%) right center / 46% 1px no-repeat;
}
#introVeil .iv-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px; transform: rotate(45deg);
  background: #c3a373; box-shadow: 0 0 10px rgba(195, 163, 115, .65);
}
#introVeil .iv-la {
  font-family: "WB Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(10px, 1.15vw, 13px);
  font-weight: 400; color: #8a7960; letter-spacing: .44em; text-indent: .44em;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(255, 250, 240, 1), 0 1px 10px rgba(255, 250, 240, .9), 0 0 60px rgba(255, 246, 234, .8);
}
/* 底部：品牌名在「轻触进入」之上（用户口径 2026-10-31） */
#introVeil .iv-foot {
  position: absolute; left: 50%; bottom: 6.2vh; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  pointer-events: none;
}
#introVeil .iv-brand {
  font-family: "WB Serif", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: clamp(11px, 1.15vw, 13px); color: #6f6250;
  letter-spacing: .34em; text-indent: .34em;
  text-shadow: 0 1px 16px rgba(255, 252, 246, .95);
  opacity: .92;
}
/* 进入提示（呼吸） */
#introVeil .iv-enter {
  font-size: 11px; color: #97876c; letter-spacing: .42em; text-indent: .42em;
  animation: ivBreath 2.6s ease-in-out infinite;
}
@keyframes ivTxt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ivBreath { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
/* 退场：整层淡出后由 JS 移除 */
#introVeil.out { animation: ivOut .9s ease forwards; pointer-events: none; }
@keyframes ivOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* 动效敏感用户：不铺开屏（JS 层也会跳过），保底只留静态首图 */
  #introVeil { display: none; }
}

/* ============================================================
   2026-10-31 晚：开屏文案专用衬线体（内嵌子集，6KB）
   源：Noto Serif SC（SIL OFL 1.1，可商用），只保留开屏用到的字形：
   通过语言 / 抵达万物 / 源程道一 / 沐晓英语 + PERVERBAADOMNIA + 间隔号。
   目的：让 Windows / iPhone / 安卓 都显示同一款细宋体，不再落到华文中宋 / 黑体。
   新增文字记得重新跑 tools/_fontsub 的子集（text 里补字）。
   ============================================================ */
@font-face {
  font-family: "WB Serif";
  src: url("fonts/wb-serif.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2026-10-31 晚：雅思「听力」= 两个独立专栏（用户口径）
   · .ex-lp.n2 —— 两块方框并排（手机单列）
   · .ex-col-card —— 专栏方框：薄雾玻璃 + 顶部一线金 + 编号
   · .ex-colbar / .ex-colchip —— 专栏页顶部的返回与切换条
   ============================================================ */
.ex-lp.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .ex-lp.n2 { grid-template-columns: minmax(0, 1fr); } }

.ex-col-card {
  position: relative; padding: 22px 24px 18px; gap: 10px; border-radius: 16px;
  border: 1px solid rgba(190, 170, 140, .38);
  background: linear-gradient(180deg, rgba(255, 255, 253, .92) 0%, rgba(253, 249, 243, .78) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
  box-shadow: 0 2px 10px rgba(120, 96, 58, .06);
}
.ex-col-card::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(185, 151, 95, .8), rgba(185, 151, 95, 0));
}
.ex-col-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 30px rgba(120, 96, 58, .14);
  transform: translateY(-2px);
}
.ex-col-card .col-k {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10.5px; letter-spacing: .34em; color: #b08a52;
}
.ex-col-card .lp-n { font-size: 19px; letter-spacing: .01em; }
.ex-col-card .lp-d { font-size: 13px; line-height: 1.78; }
.ex-col-card .lp-go { font-size: 13px; }

.ex-colbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ex-colchip {
  font-size: 12.5px; line-height: 1; padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  text-decoration: none;
}
.ex-colchip:hover { border-color: var(--primary); color: var(--primary); }
.ex-colchip.on {
  border-color: rgba(168, 118, 62, .55); background: var(--surface-2);
  color: #8a6032; font-weight: 700;
}

/* ==================================================================
   后台 · 课件下载授权台（2026-11-01）
     左栏选人、右栏选板块与范围；下载记录按人 / 逐条两张表。
   ================================================================== */
.dl-split { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .dl-split { grid-template-columns: 1fr; } }
.dl-side { border-right: 1px solid var(--line); padding-right: 12px; }
@media (max-width: 900px) { .dl-side { border-right: 0; padding-right: 0; } }
.dl-users { display: flex; flex-direction: column; gap: 3px; max-height: 430px; overflow: auto; margin-top: 8px; }
.dl-user {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; cursor: pointer; font-size: 13px; color: inherit;
}
.dl-user:hover { background: var(--surface-2); }
.dl-user.on { background: var(--primary-soft); border-color: #b9c8ee; }
.dl-user .sp { flex: 1 1 auto; }
.dl-user-n { font-weight: 600; }
.dl-target { display: flex; align-items: center; gap: 8px; font-size: 15px; flex-wrap: wrap; }
.dl-courses {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
  max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px;
}
@media (max-width: 720px) { .dl-courses { grid-template-columns: 1fr; } }
.dl-course {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px;
  padding: 4px 6px; border-radius: 6px; cursor: pointer; min-width: 0;
}
.dl-course:hover { background: var(--surface-2); }
.dl-course.on { background: var(--primary-soft); }
.dl-course input { width: auto; }
.dl-course > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }