/* ========== 基础变量与重置 ========== */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #dbeafe;
  --success: #16a34a;
  --success-light: #dcfce7;
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --warning: #d97706;
  --warning-light: #fef3c7;
  --text: #1f2937;
  --text-sub: #6b7280;
  --bg: #f4f6fb;
  --card: #ffffff;
  --border: #e5e7eb;
  /* 别名：首页 CSS 里写的是 var(--line)，但这里只定义过 --border，
     结果那几处 border 一直在吃无效值（边框根本没渲染）。
     补一个别名让两种写法都能用，不动已有选择器。 */
  --line: #e5e7eb;
  --bg-sub: #f3f4f6;
  --radius: 14px;
  --shadow: 0 2px 12px rgba(30, 41, 59, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* hidden 属性必须生效（内联 display 会覆盖 UA 默认样式，需强制） */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

button { font-family: inherit; cursor: pointer; }
select, textarea, input { font-family: inherit; font-size: 14px; }

/* ========== 顶部栏 ========== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff;
  box-shadow: 0 2px 10px rgba(30, 58, 138, 0.35);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800;
}
.brand-logo svg { width: 28px; height: 28px; }
.brand-text h1 { font-size: 19px; font-weight: 700; letter-spacing: 1px; }
.brand-sub { font-size: 12px; opacity: 0.85; letter-spacing: 2px; }
.topbar-right { display: flex; align-items: center; gap: 12px; position: relative; }

/* 移动端菜单按钮（桌面端隐藏） */
.mobile-menu-btn { display: none; }
.mobile-menu-dropdown { display: none; }

.badge {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.15);
}
.badge-on { background: var(--success-light); color: #14532d; }
.badge-off { background: rgba(255, 255, 255, 0.15); color: #fff; }

/* ========== 按钮 ========== */
.btn {
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.18s ease;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #15803d; transform: translateY(-1px); }
.btn-ghost { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.25); }
.btn-outline { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: var(--primary-light); }
.btn-block { width: 100%; }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ========== 布局 ========== */
.main { display: flex; min-height: calc(100vh - 68px); }

.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 14px;
  position: sticky;
  top: 68px;
  height: calc(100vh - 68px);
}

/* 首页整屏化：隐藏左侧栏，让四个板块卡片占满整宽。
   class 由 setHomeVisible() 加/摘（.sidebar-hidden）。

   ★ 为什么用 min-width 而不是 min-height 之类的写法
   只该在桌面端隐藏。移动端（≤820px）的 .sidebar 会变成固定在底部的
   Tab 栏，那是学生进「知识讲解/基础测评/错题记录…」的唯一入口，
   首页把它藏掉学生就没法导航了。所以这里锁死桌面宽度。

   ★ 为什么 admin 不隐藏
   见 setHomeVisible() 顶部注释：当年把整个侧边栏 hidden 掉，导致
   admin 落在首页后完全够不到「用户管理」——首页四个板块里没有管理
   入口，唯一入口就在侧栏的 .home-side-admin 块。所以 JS 只在
   「首页 + 学生」时加这个 class。 */
@media (min-width: 821px) {
  .sidebar.sidebar-hidden { display: none; }
}
.nav { display: flex; flex-direction: column; gap: 6px; }

/* 首页收起业务导航（知识讲解/基础测评/…），减少干扰。
   ★ 只在桌面端生效：移动端（≤820px）的 .nav 就是底部 Tab 栏的内容，
   首页把它藏掉，学生整条导航就没了 —— 实测底部栏会塌成一个 13px 的
   空壳、导航项 0 个可见。桌面端无此问题（那边整个侧栏都隐藏了）。 */
@media (min-width: 821px) {
  .nav.nav-home-collapsed { display: none; }
}
/* 「智慧学习」分组标题：把首页/知识讲解等入口和后面的业务导航分开 */
.nav-group-label {
  margin: 10px 0 2px;
  padding: 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  opacity: 0.7;
}
.nav-group-label[hidden] { display: none !important; }

/* 首页侧边栏里的「管理」块：admin 在首页时业务导航被收起，
   用户管理/课程管理只能从这里进（见 setHomeVisible 的注释）。 */
.home-side-admin { display: flex; flex-direction: column; gap: 6px; }
.home-side-admin[hidden] { display: none !important; }
.hsa-label {
  margin: 0 0 2px;
  padding: 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  opacity: 0.7;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-sub);
  text-align: left;
  transition: all 0.15s ease;
  position: relative;
}
.nav-item:hover { background: #f0f4ff; color: var(--primary); }
.nav-item.active { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); }
/* 系统设置分组里的「退出系统」（2026-09-27 从侧栏底部挪入）：
   原来红底按钮，进导航分组后改为红字变体 —— 保留警示色但不破坏
   分组内统一的透明底风格 */
.nav-item.nav-danger { color: var(--danger); }
.nav-item.nav-danger:hover { background: #fef2f2; color: var(--danger); }
.nav-item.nav-danger:not(.active) .nav-icon { background: var(--danger); opacity: 0.6; }
.nav-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.nav-item:not(.active) .nav-icon { background: var(--text-sub); opacity: 0.5; }
.nav-count {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
}
.nav-count[hidden] { display: none !important; }

.sidebar-foot { padding: 10px 6px; }

/* ========== 全站页脚（2026-09-27 产品：版权/备案信息）==========
   body 级末尾的普通流式块：内容不满一屏时贴在 .main
   （min-height: calc(100vh - 68px)）之后、首屏下方，滚动可见；
   不做 sticky 贴底 —— body/#login-page 的布局耦合深，不冒这个险。 */
.site-footer {
  padding: 18px 16px 26px;
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-sub);
}
.site-footer p { margin: 0; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--primary); }

/* ========== 侧栏矮屏适配（2026-09-27 第二十八章补丁） ==========
   侧栏改成两分组后桌面导航变多（返回首页 + 智慧学习 6 项 + 社会实践
   3 项 + 两个分组标签），1366x768 / 1280x720 这类矮屏上固定高度
   （calc(100vh - 68px)）的 .sidebar 装不下：底部「完善信息/课程选择/
   退出登录」被裁掉且无法滚动，更矮时「课后走读」也会被裁。
   双管齐下：
   ① 紧凑化（治本）：压缩项间距/字号，768 屏基本放得下、不出滚动条；
   ② .nav 独立滚动（兜底）：再矮也不丢入口，细滚动条平时几乎隐形。
   ★ 只收进 min-width: 821px：≤820px 的 .nav 是底部 Tab 栏（横向），
     间距/滚动那套是给桌面纵向侧栏的，不能溅射到移动端。 */
@media (min-width: 821px) {
  .sidebar { padding: 12px 14px; }
  .nav {
    flex: 1 1 auto;
    min-height: 0;            /* flex 子项允许收缩 —— 滚动生效的关键 */
    overflow-y: auto;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }
  .nav::-webkit-scrollbar { width: 4px; }
  .nav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
  .nav::-webkit-scrollbar-track { background: transparent; }
  .nav-item { padding: 9px 14px; font-size: 14px; }
  .nav-group-label { margin: 8px 0 2px; }
  .sidebar-foot { padding: 6px 6px 2px; }
}
.book-info { font-size: 12px; color: var(--text-sub); line-height: 1.6; }
.book-info strong { color: var(--primary); }

.content {
  flex: 1;
  padding: 26px 30px 60px;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

/* ========== 通用卡片与区块 ========== */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 18px;
  border: 1px solid rgba(229, 231, 235, 0.6);
}
.page-head { margin-bottom: 20px; }
.page-head h2 { font-size: 22px; font-weight: 800; }
.page-head p { color: var(--text-sub); font-size: 13.5px; margin-top: 4px; }

.section-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.section-title::before { content: ''; width: 4px; height: 18px; background: var(--primary); border-radius: 2px; }

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.chip-blue { background: var(--primary-light); color: var(--primary-dark); }
.chip-green { background: var(--success-light); color: #14532d; }
.chip-red { background: var(--danger-light); color: var(--danger); }
.chip-orange { background: var(--warning-light); color: var(--warning); }
.chip-gray { background: #f3f4f6; color: var(--text-sub); }

/* ========== 知识讲解 ========== */
.knowledge-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.tree-panel { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; position: sticky; top: 92px; max-height: calc(100vh - 120px); overflow-y: auto; }
.tree-chapter { margin-bottom: 6px; }
.tree-chapter-btn {
  width: 100%; text-align: left;
  padding: 10px 12px;
  border: none; border-radius: 10px;
  background: #f0f4ff; color: var(--primary-dark);
  font-weight: 700; font-size: 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.tree-chapter-btn .arrow { transition: transform 0.2s; font-size: 12px; }
.tree-chapter.open .tree-chapter-btn .arrow { transform: rotate(90deg); }
.tree-chapter-body { display: none; padding: 8px 4px 8px 10px; }
.tree-chapter.open .tree-chapter-body { display: block; }
.tree-section { margin-bottom: 8px; }
.tree-section-title { font-size: 13px; font-weight: 700; color: var(--text-sub); margin: 6px 0 4px; }
.tree-kp {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: none; border-radius: 8px;
  background: transparent; font-size: 13.5px; color: var(--text);
  transition: all 0.12s;
}
.tree-kp:hover { background: #f0f4ff; color: var(--primary); }
.tree-kp.active { background: var(--primary); color: #fff; }

/* 「一节一知识点且同名」时，节标题本身就是可点项（不再重复一行）。
   视觉上等同原来的 .tree-section-title，只是整行可点。 */
.tree-section-solo { margin-bottom: 8px; }
.tree-kp-solo {
  display: flex; align-items: baseline; gap: 6px;
  padding: 6px 10px; font-size: 13px; font-weight: 700;
  color: var(--text-sub);
}
.tree-kp-solo .tree-kp-no { flex: none; }
.tree-kp-solo .tree-kp-title { min-width: 0; flex: 1 1 auto; }
.tree-kp-solo:hover { background: #f0f4ff; color: var(--primary); }
.tree-kp-solo.active { background: var(--primary); color: #fff; }

.kp-card .kp-title { font-size: 19px; font-weight: 800; margin-bottom: 14px; }
.kp-block { margin-bottom: 16px; }
.kp-block h4 {
  font-size: 14px; font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  display: inline-block;
}
.kp-concept h4 { background: var(--primary-light); color: var(--primary-dark); }
.kp-points h4 { background: #f0f4ff; color: #3730a3; }
.kp-example h4 { background: var(--success-light); color: #14532d; }
.kp-pitfall h4 { background: var(--danger-light); color: var(--danger); }
.kp-memory h4 { background: var(--warning-light); color: var(--warning); }
.kp-block p { font-size: 14.5px; }
.kp-block ul { padding-left: 20px; }
.kp-block li { margin-bottom: 4px; font-size: 14.5px; }
.example-box {
  background: #f8fafc;
  border-left: 3px solid var(--success);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
}
.example-box .q { font-weight: 700; margin-bottom: 6px; }
.memory-box {
  background: var(--warning-light);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: #78350f;
}
.kp-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ========== 表单 ========== */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; }
.form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 6px; }
.form-field select, .form-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.form-field select:focus, .form-field input:focus { border-color: var(--primary); }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; color: var(--text-sub); margin-bottom: 6px; }
.form-row select, .form-row textarea, .form-row input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  outline: none;
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-row select:focus, .form-row textarea:focus, .form-row input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ========== 题目 ========== */
.question-card { border: 1.5px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; background: #fff; }
.question-card.wrong { border-color: var(--danger); background: #fffbfb; }
.question-card.right { border-color: var(--success); background: #fafffa; }
.q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.q-no {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.q-stem { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.q-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.q-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.12s;
  font-size: 14.5px;
}
.q-option:hover { border-color: var(--primary); background: #f5f8ff; }
.q-option.selected { border-color: var(--primary); background: var(--primary-light); font-weight: 600; }
.q-option input { display: none; }
.q-option .opt-key {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.q-option.selected .opt-key { background: var(--primary); color: #fff; border-color: var(--primary); }
.q-answer-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14.5px;
  outline: none;
}
.q-answer-input:focus { border-color: var(--primary); }
.q-feedback { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.q-feedback .fb-title { font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.q-feedback .my-answer { margin-bottom: 6px; }
.q-feedback .analysis { margin-top: 6px; }

/* ========== 成绩单 ========== */
.scoreboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.score-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
  text-align: center;
}
.score-item .num { font-size: 26px; font-weight: 800; color: var(--primary); }
.score-item .num.green { color: var(--success); }
.score-item .num.red { color: var(--danger); }
.score-item .label { font-size: 12.5px; color: var(--text-sub); margin-top: 2px; }

/* ========== 培优 ========== */
.star { color: var(--warning); letter-spacing: 2px; }
.difficulty-tag { display: inline-flex; align-items: center; gap: 4px; }
.deep-block { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.deep-hint { background: #fefce8; border-left: 3px solid var(--warning); }
.deep-solution { background: #f0fdf4; border-left: 3px solid var(--success); }
.deep-method { background: #eff6ff; border-left: 3px solid var(--primary); }
.deep-extension { background: #faf5ff; border-left: 3px solid #9333ea; }
.deep-block h5 { margin-bottom: 5px; font-size: 13.5px; }

/* ========== 错题本 ========== */
.wrong-item { border-left: 4px solid var(--danger); }
.wrong-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.wrong-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.wrong-answers .box { border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.wrong-answers .mine { background: var(--danger-light); }
.wrong-answers .correct { background: var(--success-light); }
.wrong-answers .box b { display: block; font-size: 12px; margin-bottom: 3px; }

/* ========== 统计 ========== */
.stat-bars { display: flex; flex-direction: column; gap: 12px; }
.stat-bar-row { display: grid; grid-template-columns: 120px 1fr 70px; align-items: center; gap: 12px; font-size: 13.5px; }
.stat-bar-track { height: 14px; background: #eef1f6; border-radius: 999px; overflow: hidden; }
.stat-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
  transition: width 0.8s ease;
  min-width: 2px;
}
.stat-bar-row .pct { text-align: right; font-weight: 700; color: var(--primary); }
.empty-tip { text-align: center; color: var(--text-sub); padding: 40px 0; font-size: 14px; }
.empty-tip .big { font-size: 40px; margin-bottom: 8px; }

/* ========== 答疑浮层 ========== */
.qa-mask[hidden], .qa-drawer[hidden] { display: none !important; }
.qa-mask {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 90;
}
.qa-drawer {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: 400px;
  max-width: 92vw;
  background: #fff;
  z-index: 100;
  box-shadow: -8px 0 30px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  animation: slideIn 0.25s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.qa-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff;
}
.qa-head h3 { font-size: 16px; }
.qa-body { padding: 18px; overflow-y: auto; flex: 1; }
.qa-answer { margin-top: 14px; }
.qa-answer .answer-box {
  background: #f8fafc;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
}
.qa-answer .answer-src { font-size: 12px; color: var(--text-sub); margin-bottom: 6px; }
.qa-loading { color: var(--text-sub); font-size: 13px; margin-top: 10px; }

/* ========== 答疑对话线程 ========== */
.qa-thread {
  max-height: 300px;
  overflow-y: auto;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qa-empty { text-align: center; color: var(--text-sub); font-size: 13px; padding: 18px 0; }
.msg { display: flex; flex-direction: column; }
.msg.user { align-items: flex-end; }
.msg.ai { align-items: flex-start; }
.msg-tag { font-size: 11px; color: var(--text-sub); margin-bottom: 3px; padding: 0 4px; }
.msg-bubble {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.7;
  word-break: break-word;
}
.msg.user .msg-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg.ai .msg-bubble {
  background: #fff;
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

/* ========== 提示条 ========== */
.notice {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  margin-bottom: 14px;
}
.notice-info { background: var(--primary-light); color: var(--primary-dark); }
.notice-warn { background: var(--warning-light); color: #78350f; }

/* ========== 学生信息引导 ========== */
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.92), rgba(37, 99, 235, 0.92));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.profile-modal[hidden] { display: none !important; }
.editinfo-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.editinfo-modal[hidden] { display: none !important; }
.lg-error {
  margin: 4px 0 10px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  border-radius: 10px;
  font-size: 13px;
}
.profile-card {
  width: 420px;
  max-width: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 36px 34px 30px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  animation: popIn 0.3s ease;
}
@keyframes popIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.profile-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff;
  border-radius: 16px;
  font-size: 28px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-card h2 { text-align: center; font-size: 20px; font-weight: 800; }
.profile-sub { text-align: center; color: var(--text-sub); font-size: 13px; margin: 6px 0 22px; }
/* ========== 独立登录界面（全屏左右分栏） ========== */
#login-page { display: none; }
body.logged-out .app { display: none !important; }
body.logged-out #login-page { display: flex; min-height: 100vh; width: 100%; }
body.logged-out #login-page .login-intro {
  flex: 0 0 46%;
  background: linear-gradient(160deg, #1e3a8a 0%, #2563eb 70%, #3b82f6 100%);
  color: #fff;
  padding: 56px 44px 40px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.logged-out #login-page .login-form {
  flex: 1;
  padding: 40px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}
.lp-form { width: 100%; max-width: 380px; }
.lp-form h2 { font-size: 26px; margin-bottom: 4px; }
.lp-form .profile-sub { margin-bottom: 26px; }
.li-logo {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.li-title { font-size: 32px; font-weight: 900; letter-spacing: 2px; margin: 0 0 10px; }
.li-slogan { font-size: 15px; line-height: 1.8; opacity: 0.92; margin: 0 0 26px; }
.li-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.li-features li { display: flex; gap: 12px; align-items: flex-start; }
.li-ic { font-size: 22px; line-height: 1.3; }
.li-features b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.li-features small { display: block; font-size: 12px; opacity: 0.82; line-height: 1.5; }
.li-foot { margin-top: auto; padding-top: 24px; font-size: 12px; opacity: 0.75; line-height: 1.6; }
.li-note { text-align: center; font-size: 12px; color: var(--text-sub); margin-top: 16px; }
@media (max-width: 760px) {
  body.logged-out #login-page { flex-direction: column; overflow-y: auto; }
  body.logged-out #login-page .login-intro { flex: none; min-height: auto; padding: 30px 24px 20px; }
  body.logged-out #login-page .login-form { padding: 26px 20px 30px; align-items: flex-start; }
  .li-features, .li-foot { display: none; }
  .li-title { font-size: 24px; margin-bottom: 4px; }
  .li-logo { margin-bottom: 10px; }
}
.req { color: var(--danger); }
.form-hint { font-size: 12px; color: var(--text-sub); margin-top: 4px; }
/* 平台管理表格 */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.admin-table thead th {
  background: var(--bg-soft, #f8fafc);
  font-weight: 600;
  color: var(--text-sub, #64748b);
  position: sticky;
  top: 0;
}
.admin-table tbody tr:hover { background: var(--bg-soft, #f8fafc); }
.admin-ops { display: flex; gap: 6px; align-items: center; }
.admin-ops .btn { padding: 3px 10px; font-size: 12px; }
/* 管理表格操作按钮：表格底色为白色，不能用深色栏专用的 btn-ghost 白字样式，改为浅色描边按钮 */
.admin-ops .btn-ghost {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
}
.admin-ops .btn-ghost:hover {
  background: #eff6ff;
  border-color: #2563eb;
  color: #2563eb;
}
.admin-ops .btn-danger {
  background: #fff;
  color: #dc2626;
  border: 1px solid #fca5a5;
}
.admin-ops .btn-danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
  color: #b91c1c;
}
.rule-tip {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 1.6;
}
.btn-lg { padding: 13px 20px; font-size: 16px; }

/* 登录弹窗输入框美化 */
.profile-card .form-row input {
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  background: #f8fafc;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.profile-card .form-row input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
  outline: none;
}
.profile-card .form-row input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}
.profile-card .form-row label {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 7px;
}
#lg-submit {
  margin-top: 6px;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
#lg-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
#lg-submit:active { transform: translateY(0); }

/* ========== 顶部学生信息 ========== */
.student-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  /* 右侧留 8px：里面装了两个按钮（修改资料 / 退出系统），
     原来是 6px 只容得下一个，会贴边。 */
  padding: 4px 8px 4px 14px;
  color: #fff;
  font-size: 13.5px;
}
.student-chip[hidden] { display: none; }
.student-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3);
  flex-shrink: 0;
}
/* 「修改资料 | 退出系统」之间的竖分隔线。
   深蓝底上的半透明白线，比实色更弱化，不抢两个按钮的视觉。 */
.chip-sep {
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, 0.35);
  flex: none;
}

/* ========== 实时讲解播放器 ========== */
.lecture-player {
  border: 1.5px solid var(--primary);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
  animation: slideDown 0.25s ease;
}
.lecture-player[hidden] { display: none; }
@keyframes slideDown { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.lecture-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff;
}
.lecture-title-line { display: flex; align-items: center; gap: 8px; }
.lecture-title { font-weight: 800; font-size: 15px; }
.lecture-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f87171;
  animation: blink 1.2s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.lecture-progress { font-size: 13px; font-weight: 600; opacity: 0.95; }
.lecture-screen {
  min-height: 110px;
  padding: 20px 22px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.lecture-screen.loading { opacity: 0.6; }
.lecture-text {
  font-size: 17px;
  line-height: 1.9;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}
.lecture-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  flex-wrap: wrap;
  background: #fff;
}
.lecture-controls .btn { margin: 0; }
.speed-select {
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  outline: none;
}
.speed-select:focus { border-color: var(--primary); }
.lp-close-btn { margin-left: auto; }

@media (max-width: 560px) {
  .lecture-controls { justify-content: center; }
  .lp-close-btn { margin-left: 0; }
}

/* ========== 添加教材弹窗 ========== */
.addtb-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.addtb-modal[hidden] { display: none !important; }
.addtb-card {
  width: 460px;
  max-width: 100%;
  max-height: 90vh;
  background: #fff;
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  animation: popIn 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
#addtb-modal .addtb-card {
  padding: 22px 30px;
  max-height: 80vh;
}
.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--text-sub);
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.15s;
}
.modal-close-btn:hover {
  background: #f1f5f9;
  color: var(--text);
}
.addtb-card h3 { font-size: 18px; font-weight: 800; text-align: center; margin: 0 0 2px; flex-shrink: 0; }
.addtb-card .profile-sub { flex-shrink: 0; margin: 4px 0 10px; }
.addtb-card > *:not(.addtb-scroll):not(h3):not(.profile-sub):not(.preview-head):not([style*="display:flex"]) {
  flex-shrink: 0;
}
/* 预览区整体：内容决定高度，可收缩；内部树形区滚动，按钮栏固定底部 */
#addtb-preview {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
#addtb-preview .addtb-scroll {
  flex: 0 1 auto;
  overflow-y: auto;
  max-height: calc(80vh - 220px);
  min-height: 120px;
  margin: 4px -30px;
  padding: 4px 30px;
}
#addtb-preview > div:last-child {
  flex-shrink: 0;
  margin-top: 8px;
}
.addtb-scroll::-webkit-scrollbar { width: 6px; }
.addtb-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border: 3.5px solid var(--primary-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== 实时讲解画中画 ========== */
.pip-window {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 336px;
  max-width: calc(100vw - 32px);
  z-index: 150;
  background: #fff;
  border: 1.5px solid var(--primary);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  animation: pipIn 0.25s ease;
}
.pip-window[hidden] { display: none !important; }
@keyframes pipIn {
  from { transform: translateY(18px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.pip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 8px 14px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff;
  cursor: move;
  user-select: none;
}
.pip-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.pip-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f87171;
  animation: blink 1.2s infinite;
}
.pip-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.pip-close:hover { color: #fff; }
.pip-body {
  padding: 12px 14px;
  min-height: 56px;
  background: #f8fafc;
}
.pip-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}
.pip-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid var(--border);
}
.pip-btn {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.pip-btn:hover { border-color: var(--primary); color: var(--primary); }
.pip-play { background: var(--primary); border-color: var(--primary); color: #fff; font-size: 12px; }
.pip-play:hover { background: var(--primary-dark); color: #fff; }
.pip-progress { margin-left: auto; font-size: 12px; color: var(--text-sub); font-weight: 600; }

/* ========== 教材目录预览确认 ========== */
.preview-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.pv-tree { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.pv-chapter { margin-bottom: 10px; }
.pv-chapter:last-child { margin-bottom: 0; }
.pv-ch-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pv-no { font-size: 12.5px; font-weight: 800; color: var(--primary-dark); background: var(--primary-light); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.pv-input { flex: 1; padding: 5px 9px; border: 1.5px solid var(--border); border-radius: 7px; font-size: 13.5px; outline: none; min-width: 0; }
.pv-input:focus { border-color: var(--primary); }
.pv-del { border: 1px solid var(--danger); color: var(--danger); background: #fff; border-radius: 7px; font-size: 12px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.pv-del:hover { background: var(--danger-light); }
.pv-sec { margin: 4px 0 4px 12px; padding: 5px 8px; background: #f8fafc; border-radius: 8px; }
.pv-sec-head { display: flex; align-items: center; gap: 7px; }
.pv-sec-no { font-size: 12px; font-weight: 700; color: var(--text-sub); white-space: nowrap; }
.pv-del-sm { border: none; background: none; color: var(--text-sub); font-size: 15px; cursor: pointer; padding: 0 2px; }
.pv-del-sm:hover { color: var(--danger); }
.pv-kps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; padding-left: 4px; }
.pv-kp { font-size: 11.5px; background: #fff; border: 1px solid var(--border); color: var(--text-sub); padding: 1px 7px; border-radius: 999px; }

/* ========== 响应式（移动端） ========== */
@media (max-width: 820px) {
  /* 顶部栏精简 */
  .topbar { padding: 10px 12px; }
  .brand-logo { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
  .brand-text h1 { font-size: 15px; letter-spacing: 0.5px; }
  .brand-sub { display: none; }
  .topbar-right { gap: 8px; }
  /* 窄屏：chip 只需装下「名字 + 退出系统」两样。
     原来 132px 是配「名字 + 修改资料」的宽度，现在按钮文案长了一点
     （退出系统 = 4 个字），放宽到 168px 才不至于把名字压成一个字。 */
  .student-chip { font-size: 12px; padding: 4px 5px 4px 10px; gap: 6px; max-width: 168px; }
  .student-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 窄屏头部只留「退出系统」。
     132px 的 chip 塞不下三个按钮，而且这里本来就有右上角的 ⋯ 菜单
     （完善信息 / 课程选择 / 退出登录 全在里面），功能一个不少。
     #btn-topbar-course 2026-09-27 已按产品指令整体移除，选择器不再列它。 */
  .student-chip #btn-profile,
  .student-chip .chip-sep { display: none; }
  /* 剩下的「退出系统」不能被压到换行 —— 实测 132px 下它会折成
     「退出系 / 统」两行、把 chip 撑到 50px 高，顶栏跟着变胖。
     按钮文字短，本来就该一行放下。 */
  .student-chip #btn-topbar-logout { white-space: nowrap; flex: none; }
  #ai-badge { display: none; }  /* 手机端隐藏长徽标，避免顶部换行拥挤 */
  .btn-sm { padding: 5px 9px; }
  /* 移动端个人信息菜单 */
  .mobile-menu-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; font-size: 16px; border-radius: 8px; }
  .mobile-menu-dropdown {
    position: absolute; top: calc(100% + 6px); right: 12px; z-index: 250;
    background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(15,23,42,0.18);
    min-width: 130px; overflow: hidden; animation: popIn 0.15s ease;
    display: none;
  }
  .mobile-menu-dropdown.show { display: block; }
  .mobile-menu-item {
    display: block; width: 100%; padding: 12px 16px; border: none; background: #fff;
    font-size: 14px; text-align: left; cursor: pointer; color: var(--text);
  }
  .mobile-menu-item:hover { background: var(--bg); }
  .mobile-menu-item:last-child { color: var(--danger); }

  /* 主布局：底部留出 Tab 导航空间 */
  .main { flex-direction: column; }
  .content { padding: 14px 12px calc(76px + env(safe-area-inset-bottom)); }

  /* 侧边导航 -> 底部 Tab（移动端最佳实践） */
  .sidebar {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%;
    height: auto;
    z-index: 120;
    flex-direction: row;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right: none;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.08);
  }
  .nav { flex-direction: row; width: 100%; gap: 2px; }
  /* 系统设置分组（完善信息/退出系统）不进移动端 Tab 栏 —— 它们在
     .nav 里会跟着 Tab 栏显示，而移动端本就走右上角 ⋯ 菜单
     （mm-edit-info / mm-logout），这里藏起来避免 Tab 栏再多两行 */
  #nav-group-sys, #btn-edit-info, #btn-logout { display: none; }
  /* 页脚：移动端底部 Tab 栏是 position:fixed 的，且 12 个导航项在窄屏
     折成 3 行、栏高约 100px+，会盖住页脚底部 —— 下内边距必须给足
     （130px ≈ 3 行栏高 + 呼吸），否则版权行被压（实测 84px 不够）。 */
  .site-footer { padding-bottom: calc(130px + env(safe-area-inset-bottom)); font-size: 11.5px; }
  .nav-item {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    padding: 7px 2px;
    font-size: 10.5px;
    justify-content: center;
    text-align: center;
    border-radius: 10px;
    white-space: normal;
    min-height: 48px;
    position: relative;
  }
  .nav-icon { width: 7px; height: 7px; }
  .nav-count { position: absolute; top: 3px; right: calc(50% - 26px); min-width: 16px; height: 16px; font-size: 9px; padding: 0 4px; }
  .sidebar-foot { display: none; }

  /* 知识讲解 */
  .knowledge-layout { grid-template-columns: 1fr; }
  .tree-panel { position: static; max-height: 300px; }
  .kp-title { font-size: 17px; }

  /* 实时讲解播放器：触控目标加大 */
  .lecture-screen { min-height: 96px; padding: 16px; }
  .lecture-text { font-size: 15.5px; }
  .lecture-controls { gap: 6px; padding: 10px; }
  .lecture-controls .btn { min-height: 42px; padding: 8px 14px; font-size: 13px; }
  .speed-select { min-height: 42px; }

  /* 画中画：避让底部导航 */
  .pip-window { right: 10px; bottom: calc(80px + env(safe-area-inset-bottom)); width: min(280px, 84vw); }

  /* 答疑浮层全屏 */
  .qa-drawer { width: 100vw; max-width: 100vw; }

  /* 表单与弹窗 */
  .profile-card { padding: 26px 20px 24px; }
  .addtb-card { padding: 22px 18px; }
  .form-grid { grid-template-columns: 1fr; }

  /* 测评：触控目标加大 */
  .q-option { padding: 12px; min-height: 46px; }
  .q-answer-input { min-height: 46px; padding: 11px 12px; font-size: 15px; }
  .q-stem { font-size: 15px; }

  /* 统计 */
  .stat-bar-row { grid-template-columns: 84px 1fr 54px; font-size: 12.5px; }

  /* 成绩单两列 */
  .scoreboard { grid-template-columns: repeat(2, 1fr); }

  /* 其他 */
  .wrong-answers { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .page-head h2 { font-size: 19px; }
  .notice { font-size: 13px; }
}

/* ========== 推荐教材库 ========== */
.cs-library {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding: 2px;
}
.cs-lib-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.cs-lib-item:hover { border-color: var(--primary); background: #f8faff; }
.cs-lib-item.imported { opacity: 0.55; cursor: default; background: #f9fafb; }
.cs-lib-item.imported:hover { border-color: var(--border); }
.cs-lib-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.4; }
.cs-lib-meta { font-size: 11.5px; color: var(--text-sub); }
.cs-lib-tag {
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
}
.cs-lib-item.imported .cs-lib-tag { background: #f3f4f6; color: var(--text-sub); }

/* ========== 拍照识别与网络资源 ========== */
.photo-divider {
  text-align: center;
  color: var(--text-sub);
  font-size: 12.5px;
  margin: 10px 0 8px;
  position: relative;
}
.photo-divider::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--border);
}
.photo-divider span { background: #fff; padding: 0 10px; position: relative; }
.kp-resources h4 { background: #f0f9ff; color: #0369a1; }
.resource-list { list-style: none; padding: 0; }
.resource-list li { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.resource-list li:last-child { border-bottom: none; }
.resource-list a { color: var(--primary); font-weight: 600; text-decoration: none; }
.resource-list a:hover { text-decoration: underline; }
.resource-snip { display: block; font-size: 12px; color: var(--text-sub); margin-top: 2px; }

/* ========== OCR 识别原文对照 ========== */
.ocr-original {
  margin: 4px 0 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-sub);
}
.ocr-original summary { cursor: pointer; font-weight: 600; color: var(--text-sub); }
.ocr-text {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 160px;
  overflow-y: auto;
}

/* ========== 学习进度 ========== */
.resume-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13.5px;
  flex-wrap: wrap;
}
.resume-bar .resume-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
  flex-shrink: 0;
}
.resume-bar em { font-style: normal; opacity: 0.8; }
.resume-bar .btn { margin-left: auto; }
.progress-overview { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.progress-ring {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) var(--p, 0%), #eef1f6 0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  position: relative;
  flex-shrink: 0;
}
.progress-ring::before {
  content: '';
  position: absolute;
  inset: 6px;
  background: #fff;
  border-radius: 50%;
}
.progress-ring span { position: relative; }
.progress-text p { margin: 2px 0; font-size: 14px; }
.progress-text b { color: var(--primary); font-size: 16px; }
.student-hint { font-size: 12px; color: var(--text-sub); text-align: center; margin-top: 10px; }

/* ========== 语音朗读 ========== */
.voice-btn.voice-on {
  background: var(--success-light);
  color: #14532d;
  border-color: var(--success);
  font-weight: 700;
}
.voice-btn.voice-on::after {
  content: '●';
  font-size: 8px;
  margin-left: 4px;
  vertical-align: middle;
}
.pip-voice-btn.voice-on {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
.pip-voice-btn.voice-on::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  right: 3px;
}
.pip-voice-btn { position: relative; }

/* ===================== 官方教材库（国家中小学智慧教育平台） ===================== */
.ot-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #166534;
  background: #dcfce7;
  border-radius: 999px;
  vertical-align: middle;
}
.ot-toolbar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
@media (min-width: 640px) {
  .ot-toolbar { grid-template-columns: repeat(4, 1fr) auto; }
}
.ot-filter {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--input-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
}
.ot-filter:focus { border-color: var(--primary); }
.ot-search-row { margin-bottom: 10px; }
.ot-search-row input {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  background: var(--input-bg, #fff);
  color: var(--text);
}
.ot-search-row input:focus { border-color: var(--primary); }

.ot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}
.ot-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.ot-item:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.ot-item-main { min-width: 0; flex: 1; }
.ot-item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ot-item-meta {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-sub);
}
.ot-item-tag {
  flex: none;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.ot-tag-none { color: #1e40af; background: #dbeafe; }
.ot-tag-ready { color: #166534; background: #dcfce7; }
.ot-tag-fetching { color: #92400e; background: #fef3c7; }
.ot-tag-failed { color: #991b1b; background: #fee2e2; }

.ot-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-sub);
}
.ot-pager button {
  padding: 4px 12px;
  font-size: 12.5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg, #fff);
  color: var(--text);
  cursor: pointer;
}
.ot-pager button:disabled { opacity: .45; cursor: not-allowed; }
.ot-pager button:not(:disabled):hover { border-color: var(--primary); color: var(--primary); }

.ot-detail { display: flex; gap: 14px; align-items: flex-start; }
.ot-cover-wrap { flex: none; width: 110px; }
.ot-cover {
  width: 110px;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}
.ot-cover-ph {
  width: 110px;
  height: 152px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-sub);
  background: var(--hover-bg, #f3f4f6);
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.ot-meta-box { flex: 1; min-width: 0; }
.ot-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--border);
}
.ot-meta-row:last-child { border-bottom: none; }
.ot-meta-row span { color: var(--text-sub); flex: none; }
.ot-meta-row b { color: var(--text); text-align: right; word-break: break-all; }

.ot-progress { margin-top: 14px; }
.ot-progress-bar {
  height: 8px;
  background: var(--hover-bg, #e5e7eb);
  border-radius: 999px;
  overflow: hidden;
}
.ot-progress-bar > div {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #34d399, #10b981);
  border-radius: 999px;
  transition: width .3s;
}
#ot-progress-text { margin-top: 6px; }

.ot-toc {
  max-height: 220px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--hover-bg, #f9fafb);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
}
.ot-toc-row {
  padding: 3px 0;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.ot-toc-row .ot-toc-page { color: var(--text-sub); flex: none; font-size: 11.5px; }

/* 官方教材 → 我的教材 导入提示 */
.ot-import-hint {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 12.5px;
  line-height: 1.6;
  word-break: break-word;
}

/* ========== 图文生成（思维导图 / 知识卡片） ========== */
.visual-box { margin: 14px 0 6px; }

/* 加载态 */
.visual-loading {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 42px 20px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.visual-loading-text { font-size: 15px; font-weight: 600; color: var(--text); }
.visual-loading-tip { font-size: 13px; color: var(--text-sub); }

/* 结果卡片 */
.visual-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.visual-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fbfcfe, #ffffff);
}
.visual-label { font-size: 15px; font-weight: 700; color: var(--text); }

/* 图片舞台：浅底 + 内边距，让导图/卡片有呼吸感 */
.visual-stage {
  padding: 16px; background: #f8fafc;
  display: flex; justify-content: center; align-items: flex-start;
  overflow: auto; max-height: 72vh;
}
.visual-img {
  max-width: 100%; height: auto; display: block;
  border-radius: 10px; box-shadow: 0 4px 18px rgba(15, 23, 42, .10);
  opacity: 0; transform: translateY(6px);
  transition: opacity .32s ease, transform .32s ease;
}
.visual-img.loaded { opacity: 1; transform: none; }

.visual-tools {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--border);
  background: #fbfcfe;
}

/* 窄屏适配：手机上按钮换行、图片可横向滚动 */
@media (max-width: 640px) {
  .visual-tools { padding: 10px 12px; }
  .visual-stage { padding: 10px; }
  .kp-actions { flex-wrap: wrap; }
}

/* ========== 图片灯箱（放大查看导图 / 卡片） ========== */
.visual-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: none; flex-direction: column;
  background: rgba(15, 23, 42, .88);
  backdrop-filter: blur(3px);
}
.visual-lightbox.show { display: flex; }

.vlb-bar {
  flex-shrink: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  padding: 12px 18px; background: rgba(15, 23, 42, .6);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.vlb-title {
  font-size: 15px; font-weight: 600; color: #f1f5f9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vlb-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.vlb-btn {
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  color: #f1f5f9; text-decoration: none; cursor: pointer;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px; transition: background .18s;
}
.vlb-btn:hover { background: rgba(255, 255, 255, .26); }
.vlb-btn:disabled { opacity: .4; cursor: default; }
.vlb-btn:disabled:hover { background: rgba(255, 255, 255, .14); }
.vlb-zoom-label {
  min-width: 52px; text-align: center; font-size: 13px;
  font-weight: 600; color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}

/* 图片舞台：是唯一的滚动容器 */
.vlb-stage {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; padding: 20px;
  /* 内容比容器小的时候居中，大的时候靠左上、可滚动 */
  align-items: center; justify-content: center;
}
.vlb-stage.is-pannable { align-items: flex-start; justify-content: flex-start; }
.vlb-canvas {
  margin: auto;               /* 配合 flex 实现「小于容器时居中」 */
  line-height: 0;             /* 消除 img 下方基线空隙 */
  flex-shrink: 0;
}
.vlb-canvas img {
  /* 尺寸完全由 JS 计算后写入 width/height，这里不再用 max-width 干预 */
  display: block; max-width: none; max-height: none;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  background: #fff;
}

@media (max-width: 640px) {
  .vlb-bar { padding: 10px 12px; flex-wrap: wrap; }
  .vlb-title { font-size: 13px; width: 100%; }
  .vlb-stage { padding: 10px; }
}


/* ==========================================================
   成长激励模块（任务 / 积分 / 心愿兑换）
   ========================================================== */

/* ---------- 视角切换 Tab ---------- */
.growth-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
}
.growth-tab {
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sub);
  transition: background .15s, color .15s;
}
.growth-tab:hover { color: var(--text); }
.growth-tab.active {
  background: var(--card);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(30, 41, 59, .1);
}
.growth-tab .lock { font-size: 12px; opacity: .7; margin-left: 2px; }

/* ---------- 余额卡 ---------- */
.growth-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px rgba(37, 99, 235, .25);
}
.growth-hero .balance-num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
}
.growth-hero .balance-label {
  font-size: 13px;
  opacity: .85;
  margin-bottom: 2px;
}
.growth-hero .hero-side {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.growth-hero .hero-stat { text-align: center; }
.growth-hero .hero-stat b { display: block; font-size: 22px; font-weight: 700; }
.growth-hero .hero-stat span { font-size: 12px; opacity: .85; }

/* ---------- 距离心愿进度环（conic-gradient） ---------- */
.growth-ring-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.growth-ring {
  --pct: 0;
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(var(--primary) calc(var(--pct) * 1%), var(--border) 0);
  display: grid;
  place-items: center;
}
.growth-ring::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--card);
}
.growth-ring i {
  position: relative;
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
}
.growth-ring-text p { font-size: 14px; font-weight: 600; }
.growth-ring-text small { color: var(--text-sub); font-size: 13px; }

/* ---------- 任务 / 心愿卡网格 ---------- */
.growth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.growth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.growth-card:hover {
  box-shadow: var(--shadow);
  border-color: #c7d2fe;
  transform: translateY(-1px);
}
.growth-card.done { opacity: .62; }
.growth-card .gc-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.growth-card .gc-icon { font-size: 24px; line-height: 1; }
.growth-card .gc-title {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  word-break: break-word;
}
.growth-card .gc-desc { font-size: 13px; color: var(--text-sub); }
.growth-card .gc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.growth-card .gc-actions { display: flex; gap: 6px; }

/* 积分徽标 */
.pt-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 700;
  color: var(--warning);
  background: var(--warning-light);
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pt-badge.plus { color: var(--success); background: var(--success-light); }
.pt-badge.minus { color: var(--danger); background: var(--danger-light); }

/* 状态标签 */
.growth-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-sub);
  white-space: nowrap;
}
.growth-tag.pending { background: var(--warning-light); color: var(--warning); }
.growth-tag.approved, .growth-tag.fulfilled { background: var(--success-light); color: var(--success); }
.growth-tag.rejected { background: var(--danger-light); color: var(--danger); }

/* ---------- 流水列表 ---------- */
.growth-ledger { display: flex; flex-direction: column; }
.growth-ledger .gl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
}
.growth-ledger .gl-row:last-child { border-bottom: none; }
.growth-ledger .gl-main { flex: 1; min-width: 0; }
.growth-ledger .gl-main b { font-weight: 600; font-size: 14px; }
.growth-ledger .gl-main small {
  display: block;
  color: var(--text-sub);
  font-size: 12px;
}
.growth-ledger .gl-amt { font-weight: 700; font-size: 15px; white-space: nowrap; }
.growth-ledger .gl-amt.plus { color: var(--success); }
.growth-ledger .gl-amt.minus { color: var(--danger); }

/* ---------- 分区标题 ---------- */
.growth-section { margin-top: 24px; }
.growth-section > h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.growth-section > h3 .count-pill {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--danger);
  border-radius: 999px;
  padding: 1px 8px;
}

/* ---------- 家长工具条 ---------- */
.growth-parent-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--warning-light);
  border: 1px solid #fcd34d;
  color: #92400e;
  border-radius: var(--radius);
  padding: 12px 18px;
  margin-bottom: 16px;
  font-size: 14px;
}
.growth-parent-bar .gp-actions { display: flex; gap: 8px; }

/* ---------- 表单行（内联新增） ---------- */
.growth-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 12px;
}
.growth-form input[type="text"],
.growth-form input[type="number"] {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
}
.growth-form input:focus { border-color: var(--primary); }
.growth-form input.gf-title { flex: 1; min-width: 150px; }
.growth-form input.gf-num { width: 88px; }
.growth-form input.gf-icon { width: 56px; text-align: center; }
.growth-form label.gf-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-sub);
  cursor: pointer;
}

/* ---------- 待审核列表 ---------- */
.review-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.review-item:last-child { border-bottom: none; }
.review-item .ri-check { width: 18px; height: 18px; accent-color: var(--primary); flex-shrink: 0; }
.review-item .ri-main { flex: 1; min-width: 0; }
.review-item .ri-main b { font-size: 14px; font-weight: 600; }
.review-item .ri-main small { display: block; color: var(--text-sub); font-size: 12px; }
.review-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 12px;
}

/* ---------- PIN 弹窗 ---------- */
.pin-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .55);
  padding: 20px;
}
.pin-card {
  background: var(--card);
  border-radius: 18px;
  padding: 26px 24px 22px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  text-align: center;
}
.pin-card h3 { font-size: 18px; margin-bottom: 6px; }
.pin-card p { font-size: 13px; color: var(--text-sub); margin-bottom: 18px; }
.pin-card input {
  width: 100%;
  text-align: center;
  font-size: 26px;
  letter-spacing: 12px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 12px;
  outline: none;
  text-indent: 12px;
}
.pin-card input:focus { border-color: var(--primary); }
.pin-card .pin-err {
  color: var(--danger);
  font-size: 13px;
  min-height: 20px;
  margin-top: 8px;
  text-align: left;
}
.pin-card .pin-btns {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.pin-card .pin-btns .btn { flex: 1; }

/* ---------- 空状态 ---------- */
.growth-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-sub);
  font-size: 14px;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.growth-empty .ge-icon { font-size: 34px; display: block; margin-bottom: 8px; opacity: .55; }

@media (max-width: 640px) {
  .growth-hero { padding: 16px 18px; }
  .growth-hero .balance-num { font-size: 32px; }
  .growth-grid { grid-template-columns: 1fr; }
  .growth-form { flex-direction: column; align-items: stretch; }
  .growth-form input.gf-num,
  .growth-form input.gf-icon { width: 100%; }
  .growth-ring-wrap { padding: 14px; }
  .review-item { align-items: flex-start; }
  .review-actions { flex-direction: column; align-items: stretch; }
}

/* 图标兜底：无自定义图标时用「首字」色块，避免 emoji 在无 emoji 字体的
   环境（Linux 服务器 / 精简系统）渲染成空白方块 */
.gc-icon.gc-icon-task,
.gc-icon.gc-icon-wish {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.gc-icon.gc-icon-task { background: var(--primary-light); color: var(--primary); }
.gc-icon.gc-icon-wish { background: var(--warning-light); color: var(--warning); }
/* 有真实图标时用它自己的字号，别被上面的块尺寸限制 */
.growth-card .gc-icon {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  min-height: 30px;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

/* ===================================================================
 * 学科选择页（课程选择第一屏）
 *
 * ★ 满屏但顶栏可见（2026-09-27 改版）
 * 它仍是 fixed 全屏层（DOM 里排在 .main 之后，不能改成 static ——
 * 那样会掉到文档流最底部），但 **z-index 从 60 降到 40**：
 * 顶部 .topbar 是 z-index:50 的不透明深蓝渐变条，从此浮在这一页之上，
 * 品牌 / 课程选择 / 退出系统 全程可见可点 —— 这就是「上面的部分和
 * 首页一致」的含义：整站共用同一条顶栏，本页不再自带第二个蓝色头部。
 * （原 .subj-head 的渐变色与顶栏完全相同，两条同色横条摞在一起
 *   像一条被压扁、断裂的标题栏，已随 DOM 一起删除。）
 *
 * ★ 内容区约束（1160px + 34px 28px）刻意与 .home-inner 取同一组值，
 * 这样从首页点「智慧学习」进来时左右边界不会跳。
 * =================================================================== */
.subjpage {
  position: fixed;
  inset: 0;
  z-index: 40;              /* 必须 < .topbar 的 50；别再改回 60，会把顶栏盖住 */
  background: var(--bg);
  padding: 68px 0 0;        /* 给顶栏让位。68px 是全站统一常量（.main/.sidebar 同款
                               calc(100vh - 68px)）；顶栏实测 77px(桌面)/61px(移动)，
                               内容区自身还有 34px 顶距，不会钻到顶栏底下。 */
  overflow-y: auto;
}
.subj-card {
  /* 原来是一张 780px 的居中卡片，现在只是一层无样式的包裹，取满宽 */
  width: 100%;
  max-width: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  /* 原来是 hidden（为了裁掉渐变头的圆角）；头部没了，改回 visible
     以免裁掉九宫格 hover 时的上浮阴影和「当前」角标 */
  overflow: visible;
}

/* 当前教材胶囊。原来是「深蓝底上的白色胶囊」，现在底色是浅色页面背景，
   所以整条重做配色 —— 白字白底会完全看不见。 */
.subj-current {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  background: #eef4ff;
  border: 1px solid #d6e4ff;
  font-size: 12.5px;
  color: var(--primary);
  max-width: 100%;
}
.subj-current .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}
.subj-current b {
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subj-current span { color: var(--text-sub); flex-shrink: 0; }

/* ---------- 学科网格 ---------- */
/* 满屏页面的内容区：1160px + 34px 28px 与 .home-inner 完全一致，
   从首页点进来看不出左右边界和顶部距离有跳变。 */
.subj-body {
  max-width: 1160px;
  margin: 0 auto;
  padding: 34px 28px 0;
}
.subj-body-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 14px;
}
.subj-body-label::before {
  content: '';
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--primary);
}
.subj-grid {
  display: grid;
  /* 满宽 1160px 下 5 列刚好把 14 个学科排成 5+5+4 三行（4 列会出 4 行且
     最后一行只挂 2 个，右边空一截；实测截图对比后定的 5 列） */
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.subj-item {
  position: relative;
  min-height: 84px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  overflow: hidden;
}
/* 顶部主色细条：hover／选中时展开，给卡片一点「品牌感」 */
.subj-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.subj-item:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.16);
}
.subj-item:hover::before { transform: scaleX(1); }
.subj-item:active { transform: translateY(-1px); }
/* 学科首字徽标：用色块兜底，不依赖 emoji 字体（服务器无 emoji 字体会渲染成方块） */
.subj-glyph {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  background: var(--primary-light);
  color: var(--primary-dark);
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.subj-item:hover .subj-glyph {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
}
.subj-name {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
/* 当前学科：主色描边 + 浅蓝底 */
.subj-item.is-current {
  border-color: var(--primary);
  background: #f5f9ff;
}
.subj-item.is-current::before { transform: scaleX(1); }
.subj-item.is-current .subj-glyph {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
}
.subj-item.is-current .subj-name { color: var(--primary-dark); }
.subj-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 1.5px 6px;
  letter-spacing: 0.5px;
  /* 和卡片圆角留出呼吸感：贴太近会被圆角视觉切掉一角 */
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

/* ---------- 底部兜底入口 ---------- */
/* 满屏后底部跟着九宫格自然排布（不吸底）—— 内容比一屏高就够了，
   吸底会让「选择学科」到「浏览课程」之间出现一大片空白。 */
.subj-foot {
  margin-top: 28px;
  border-top: 1px solid var(--border);
  background: #f8fafc;
  padding: 18px 28px;
  text-align: center;
  font-size: 16px;
  color: var(--text-sub);
}
.subj-foot button {
  border: none;
  background: none;
  color: var(--primary);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.16s ease;
}
.subj-foot button:hover { color: var(--primary-dark); text-decoration: underline; }

/* ---------- 课程选择视图（2026-09-27 改造：左学科菜单 + 右教材列表） ----------
   取代旧的全屏 .subjpage（九宫格）+ .subjbook-modal（书目弹窗）两步流程。
   常规视图布局：侧栏保留，内容区内左菜单右列表。 */
.csx-layout {
  display: grid;
  grid-template-columns: 216px 1fr;
  gap: 18px;
  align-items: start;
}
.csx-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  position: sticky;
  top: 88px;                       /* 顶栏 68 + 呼吸距 */
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  flex-shrink: 0;
}
.csx-subj {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease;
  flex-shrink: 0;
}
.csx-subj:hover { background: #f1f5f9; }
.csx-subj.is-active { background: #eef4ff; color: var(--primary); font-weight: 700; }
.csx-subj-glyph {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1d4ed8;
  font-size: 13.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.csx-subj.is-active .csx-subj-glyph {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
}
.csx-subj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csx-subj-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
}
.csx-panel {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  min-height: 430px;
  display: flex;
  flex-direction: column;
}
.csx-books { flex: 1; }
.csx-books .subjbook-item:first-child { padding-top: 4px; }
.csx-foot {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
/* 移动端：两栏改上下堆叠，学科菜单变成横向滑动条 */
@media (max-width: 820px) {
  .csx-layout { grid-template-columns: 1fr; }
  .csx-menu {
    flex-direction: row;
    position: static;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .csx-subj { padding: 8px 11px; }
  .csx-subj-badge { display: none; }
  .csx-panel { min-height: 0; }
}

/* ---------- 学科下的教材选择弹窗 ---------- */
.subjbook-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.subjbook-glyph {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  flex-shrink: 0;
}
.subjbook-head h3 { font-size: 18px; font-weight: 800; }
.subjbook-head p { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.subjbook-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
  margin-top: 14px;
  padding-right: 3px;
}
.subjbook-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.16s ease;
  position: relative;
}
.subjbook-item:hover {
  border-color: var(--primary);
  background: #f5f9ff;
  transform: translateX(2px);
}
.subjbook-item.is-current {
  border-color: var(--primary);
  background: #f0f7ff;
}
.subjbook-main { flex: 1; min-width: 0; }
.subjbook-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}
.subjbook-meta {
  display: block;
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 3px;
}
.subjbook-tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  border-radius: 7px;
  padding: 3px 8px;
  background: var(--primary-light);
  color: var(--primary-dark);
  letter-spacing: 0.3px;
}
.subjbook-tag.tag-current { background: var(--success-light); color: var(--success); }
.subjbook-tag.tag-imported { background: #f1f5f9; color: var(--text-sub); }
/* 加载骨架条 */
.subjbook-skel {
  height: 58px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: subjShimmer 1.3s ease infinite;
}
@keyframes subjShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.subjbook-foot {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ---------- 窄屏 ---------- */
/* 桌面端已经是满屏了，这里只需保留「列数 / 间距 / 字号」的窄屏调整。
   .subj-head / .subj-title / .subj-logo 的规则随 DOM 一起删掉了（顶部栏已有品牌区）。 */
@media (max-width: 760px) {
  .subj-body { padding: 20px 18px 0; }
  .subj-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .subj-item { min-height: 76px; border-radius: 12px; }
  .subj-glyph { width: 30px; height: 30px; font-size: 14px; border-radius: 9px; }
  .subj-name { font-size: 13.5px; }
  .subj-foot { margin-top: 20px; padding: 16px 18px; font-size: 15px; }
  .subjbook-list { max-height: 46vh; }
}
@media (max-width: 420px) {
  .subj-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================
 * 首页（登录后的主页面）
 * 四个板块：智慧学习 / 智慧教学 / 素质社团 / 社会实践
 *
 * 布局：首页占据整个内容区（.main 里侧边栏已收起），
 *       内部再居中约束到 1160px，避免超宽屏上卡片被拉得过散。
 * ===================================================== */
.home-wrap {
  /* 覆盖 .content 的默认内边距与宽度上限：首页要铺满整屏，
     内部再用 .home-inner 自己约束到 1160px，超宽屏上卡片才不会被拉散 */
  padding: 0;
  max-width: none;
}

.home-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 34px 28px 46px;
}

/* ---- 头部 ---- */
.home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.home-hi {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}
/* 首页头部只剩问候语。
   .home-title / .home-desc / .home-book（当前教材胶囊）已按产品要求
   从 renderHome() 里移除（2026-09-27），对应规则一并删除 ——
   留着死样式只会让下一个人以为它们还在用。 */

/* ---- 四大板块卡片 ---- */
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.hm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  text-align: left;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 3px 16px rgba(31, 41, 55, 0.06);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  font: inherit;
  color: inherit;
  min-height: 200px;
}
.hm-card:hover {
  transform: translateY(-3px);
  border-color: #c7d7f7;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.14);
}
.hm-card:active { transform: translateY(-1px); }
.hm-card-soon { background: #fbfcfe; }
.hm-card-soon:hover {
  border-color: #dfe5ee;
  box-shadow: 0 8px 22px rgba(31, 41, 55, 0.08);
}

.hm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
/* 首页卡片图标：2026-09-27 产品指令「直接用下面的名称，下面就不要再用名字了」。
   原来是 46px 方块里上下排「智慧/学习」两个字（每字约 13px，接近单字效果），
   现在色块里**直接写完整板块名**（智慧学习 / 社会实践），下方不再重复标题。
   所以方块改成自适应宽度的胶囊，字号按名称长度分档，两种名字都撑得下。 */
.hm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  height: 40px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .8px;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
  flex: none;
}
.hm-icon i { font-style: normal; }
.hm-card-soon .hm-icon {
  background: linear-gradient(135deg, #9aa8bd, #6b7a90);
  box-shadow: 0 6px 16px rgba(107, 122, 144, 0.24);
}
.hm-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef1f6;
  color: var(--text-sub);
  flex: none;
}
.hm-tag-ready { background: #e7f0ff; color: var(--primary); }

/* .hm-title / .hm-sub 已于 2026-09-27 按产品指令从 renderHome() 移除
   （色块里直接写板块名，下方不再重复标题）。规则同步删除，
   避免留下死样式让下一个人以为它们还在用。 */
.hm-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-sub);
  margin-bottom: 12px;
}
.hm-bullets {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hm-bullets li {
  position: relative;
  padding-left: 15px;
  font-size: 12.5px;
  color: var(--text-sub);
  line-height: 1.5;
}
.hm-bullets li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b9c6dd;
}
.hm-card:not(.hm-card-soon) .hm-bullets li::before { background: #7fa8f5; }

.hm-go {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}
.hm-card-soon .hm-go { color: #9aa5b6; font-weight: 600; }

.home-foot {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* ---- 响应式 ---- */
@media (max-width: 860px) {
  .home-inner { padding: 24px 18px 36px; }
  .home-grid { grid-template-columns: 1fr; gap: 14px; }
  .hm-card { min-height: 0; padding: 18px 18px 16px; }
}
@media (max-width: 480px) {
  .home-inner { padding: 20px 14px 30px; }
  .home-head { margin-bottom: 20px; }
}

/* =====================================================
 * 社会实践（乡村游学活动）
 * 学生端活动卡片 + 详情弹窗（行程时间线 + 签到）+ 管理端表格
 * ===================================================== */

/* ---- 活动列表 ---- */
.walk-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

.walk-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px 16px;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.walk-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.12);
}
.walk-card.is-done { background: #fbfcfe; }

.walk-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.walk-card-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.4;
  min-width: 0;
}
.walk-card-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-sub);
  margin-bottom: 12px;
}
.walk-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.walk-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-sub);
}
.walk-meta-row .wm-k {
  flex: none;
  width: 46px;
  font-weight: 700;
  color: #9aa5b6;
}
.walk-meta-row .wm-v {
  min-width: 0;
  color: var(--text);
  font-weight: 600;
}
.walk-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.walk-card-foot .btn { flex: none; }
.walk-foot-hint {
  font-size: 12px;
  color: var(--text-sub);
  margin-left: auto;
  text-align: right;
  line-height: 1.4;
}

/* 名额进度条 */
.walk-cap-bar {
  height: 5px;
  border-radius: 3px;
  background: #eef1f6;
  overflow: hidden;
  margin-top: 4px;
}
.walk-cap-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  transition: width 0.3s ease;
}
.walk-cap-fill.is-full { background: var(--danger); }

/* ---- 详情弹窗 ---- */
.walk-modal-card { max-width: 580px; max-height: 88vh; overflow-y: auto; }
.walk-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.walk-modal-head h3 { margin: 0; }
.walk-modal-foot {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.walk-modal-foot .btn { flex: 1; }
.walk-modal-foot .btn[hidden] { display: none !important; }

.walk-detail-sec { margin-top: 16px; }
.walk-detail-sec .wds-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-sub);
  margin-bottom: 10px;
}

/* 行程时间线 */
.walk-timeline {
  position: relative;
  padding-left: 18px;
}
.walk-timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: #e3e9f2;
  border-radius: 1px;
}
.walk-tl-item {
  position: relative;
  padding-bottom: 12px;
}
.walk-tl-item:last-child { padding-bottom: 0; }
.walk-tl-item::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
}
.walk-tl-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2px;
}
.walk-tl-content {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}

/* 签到状态块 */
.walk-signin-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-sub);
  font-size: 13px;
  line-height: 1.5;
}
.walk-signin-box .wsb-icon {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: #9aa5b6;
}
.walk-signin-box.is-open { background: var(--success-light); }
.walk-signin-box.is-open .wsb-icon { background: var(--success); }
.walk-signin-box.is-done { background: var(--primary-light); }
.walk-signin-box.is-done .wsb-icon { background: var(--primary); }
.walk-signin-box.is-closed { background: var(--warning-light); }
.walk-signin-box.is-closed .wsb-icon { background: var(--warning); }
.walk-signin-box .wsb-text { min-width: 0; color: var(--text); }

/* ---- 管理端表格 ---- */
.walk-table-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.walk-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-sub);
}
.walk-stat-pill b { color: var(--text); }

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 14px;
}

.walk-enroll-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.walk-enroll-row:last-child { border-bottom: none; }
.walk-enroll-row .wer-name { font-weight: 600; color: var(--text); }
.walk-enroll-row .wer-sub { font-size: 12px; color: var(--text-sub); margin-top: 2px; }

@media (max-width: 820px) {
  .walk-list { grid-template-columns: 1fr; }
  .walk-card { padding: 16px 16px 14px; }
  .walk-foot-hint { display: none; }
}
@media (max-width: 560px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .walk-modal-foot { flex-direction: column; }
}

/* =====================================================
 * 研学商城（自 old.xueyue.org.cn 全量迁移，风格保持不变）
 *
 * 作用域隔离（重要）：老站自己有一套 :root 变量（--bg / --radius /
 * --card / --shadow …），名字与新系统顶层几乎一一撞车。直接搬进来
 * 会把全站底色从 #f4f6fb 改成 #f7f3ec、圆角从 14px 改成 18px，
 * 于是新系统所有既有界面一起变样。
 *
 * 所以老站样式一律：
 *   1) 挂在 .tour-scope 下（研学商城自己的容器，见 renderRoam 等）
 *   2) 变量全部改名为 --t- 前缀，在 .tour-scope 内重新声明
 * 这样老站的暖米色 + 森林绿只在这块区域内生效，
 * 外面的 :root 一个字节都不动。
 * ===================================================== */

/* 变量作用域：页面内容（.tour-scope）+ 四个置顶遮罩 + 购物车浮钮。
   遮罩/浮钮刻意放在 #content 外（遮罩要盖整个视口，浮钮要常驻浮动），
   但它们的样式同样用 --t- 变量；不在这里补声明的话 var() 取不到值，
   背景会整块透明（2026-09-27 用户反馈购物车/社会实践弹窗透明，根因在此）。 */
.tour-scope,
#tour-detail-mask, #tour-cart-mask, #tour-checkout-mask, #tour-plan-form-mask,
#tour-cart-fab {
  --t-bg: #f7f3ec;
  --t-card: #fffdf9;
  --t-line: #e8e0d3;
  --t-text: #33302a;
  --t-sub: #7d766a;
  --t-brand: #3f6f4f;
  --t-brand-soft: #eaf1ea;
  --t-amber: #c98a2d;
  --t-amber-soft: #fdf3e2;
  --t-radius: 18px;
  --t-shadow: 0 6px 22px rgba(88, 70, 40, .09);
  --t-shadow-lg: 0 14px 40px rgba(88, 70, 40, .16);
}

.tour-scope {
  background: var(--t-bg);
  background-image:
    radial-gradient(circle at 12% 0%, rgba(201, 138, 45, .09), transparent 42%),
    radial-gradient(circle at 88% 6%, rgba(63, 111, 79, .10), transparent 46%),
    radial-gradient(circle at 50% 100%, rgba(201, 138, 45, .06), transparent 52%);
  color: var(--t-text);
  border-radius: var(--t-radius);
  padding: 18px 18px 26px;
  margin: -4px 0 0;
}

.tour-scope * { box-sizing: border-box; }

/* ---------- 图标：具名色块（服务器无 emoji 字体，见 tourIcon 注释） ----------
   老站用 emoji 当图标，但生产服务器没装 emoji 字体，直接用会全变空白方块。
   这里退化成「名称色块」—— 底下的渐变仍然是老站那套，视觉血缘保留，
   且不依赖任何特殊字体。

   2026-09-27 产品指令：「带色彩部分上半部分都是 1 个字的显示，不太好，
   直接用下面的名称，下面就不要再用名字了」。所以色块里放**完整名称**
   （项目名 / 板块名），不再是 `name.charAt(0)` 的单字。
   .ti-name 负责把长名称收进色块：字号按名称长度分档，
   4 字以内 22px、5-6 字 17px、更长 14px，色块高度固定，超长省略。 */
.tour-scope .ti-char {
  font-weight: 800;
  color: rgba(255, 255, 255, .97);
  text-shadow: 0 3px 12px rgba(0, 0, 0, .22);
  letter-spacing: 0;
}
/* 卡片封面色块：名称较大，独占一行居中显示在半透明白药丸里。
   注意这里的 min-height/padding 只给**卡片封面**用 —— 购物车/订单缩略图
   是另一套尺寸（小而紧凑的胶囊），靠 :not(.ci-emoji/order-emoji) 排除，
   否则本规则特异性 0,3,0 会盖掉缩略图自己 0,1,0 的尺寸。 */
.tour-scope .ti-name:not(.ci-emoji):not(.order-emoji) {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 98%;
  min-height: 44px;
  padding: 6px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: .5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
/* 名称长度分档（.cover 的 46px 基准字号与这些分档冲突，故在此覆盖）。
   只作用于卡片封面；缩略图有自己更小的一档（见下方 .ci-emoji/.order-emoji）。 */
.tour-scope .ti-name:not(.ci-emoji):not(.order-emoji).len-5 { font-size: 21px; }
.tour-scope .ti-name:not(.ci-emoji):not(.order-emoji).len-6 { font-size: 18px; }
.tour-scope .ti-name:not(.ci-emoji):not(.order-emoji).len-7 { font-size: 16px; }
.tour-scope .ti-name:not(.ci-emoji):not(.order-emoji).len-long {
  font-size: 13px; white-space: normal;
}
/* 购物车 / 订单缩略图：底色浅，字要深色才看得见 */
.tour-scope .ci-emoji.ti-char {
  background: var(--t-brand-soft);
  color: var(--t-brand);
  text-shadow: none;
  font-size: 20px;
}
.tour-scope .order-emoji.ti-char {
  background: var(--t-brand-soft);
  color: var(--t-brand);
  text-shadow: none;
  font-size: 22px;
}
/* 购物车 / 订单缩略图：底色是浅绿（--t-brand-soft），字要深色才看得见。
   尺寸/自适应宽度已写进 .ci-emoji / .order-emoji 本体（见各自定义处），
   这里只补文字颜色与字号分档。 */
.tour-scope .ci-emoji.ti-name,
.tour-scope .order-emoji.ti-name {
  font-size: 14px;
  letter-spacing: 0;
}
.tour-scope .order-emoji.ti-name { font-size: 14.5px; }
/* 缩略图空间小，长名称再收一档 */
.tour-scope .ci-emoji.ti-name.len-5,
.tour-scope .order-emoji.ti-name.len-5 { font-size: 13px; }
.tour-scope .ci-emoji.ti-name.len-6,
.tour-scope .order-emoji.ti-name.len-6 { font-size: 12px; }
.tour-scope .ci-emoji.ti-name.len-7,
.tour-scope .order-emoji.ti-name.len-7 { font-size: 11px; }
.tour-scope .ci-emoji.ti-name.len-long,
.tour-scope .order-emoji.ti-name.len-long { font-size: 10px; }

/* ---------- 顶部标题 ---------- */
.tour-head { text-align: center; padding: 12px 0 6px; }
.tour-head h1 {
  margin: 0 0 8px;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--t-brand);
  font-weight: 700;
}
.tour-head p { margin: 0; color: var(--t-sub); font-size: 13.5px; }



/* ---------- 子 tab（社会实践 / 研学商城 / 我的订单） ---------- */
.tour-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  border-bottom: 1.5px solid var(--t-line);
  padding-bottom: 0;
}
.tour-tab {
  padding: 9px 18px;
  border: none;
  background: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--t-sub);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  border-radius: 8px 8px 0 0;
  transition: color .15s, background .15s;
}
.tour-tab:hover { background: rgba(63, 111, 79, .06); }
.tour-tab.is-active {
  color: var(--t-brand);
  border-bottom-color: var(--t-brand);
}
.tour-tab .tt-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--t-amber);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  vertical-align: 1px;
}
.tour-tab .tt-count[hidden] { display: none !important; }

/* ---------- 板块分组标题 ---------- */
/* 2026-09-27 产品指令「下面就不要再用名字了」：板块名已经写在每张卡片的
   色块里、页签上也写着，这里原来还顶一行同名大标题（第三次重复），
   已从 tourSectionHtml 移除 —— 本块只留副题一行。 */
.board-block { margin: 0 0 26px; }
.board-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  padding-left: 11px;
  border-left: 4px solid var(--t-amber);
}
.board-head span { font-size: 13px; color: var(--t-sub); font-weight: 600; letter-spacing: .3px; }

/* ---------- 项目卡片 ---------- */
.tcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 18px;
}

/* ★ 一行 3 个的产品网格（产品 2026-09-27：「每行都排列3个产品」）。
   注意特异性：.tcard-grid.is-3col (0,2,0) 高于下方媒体查询里的 .tcard-grid (0,1,0)，
   所以窄屏覆盖也必须带 .is-3col 才能压住。 */
.tcard-grid.is-3col {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) {
  .tcard-grid.is-3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tcard-grid.is-3col { grid-template-columns: 1fr; }
}
.tcard {
  border-radius: var(--t-radius);
  background: var(--t-card);
  border: 1.5px solid var(--t-line);
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  display: flex;
  flex-direction: column;
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--t-shadow-lg); }
.cover {
  position: relative;
  height: 132px;
  display: grid;
  place-items: center;
  /* 尺寸按「具名色块」定（服务器无 emoji 字体，实际显示的是汉字）。
     2026-09-27：色块里改为显示完整项目名，字号由 .ti-name 按名称长度分档，
     这里的 46px 只是 emoji 兜底值与无 .ti-name 时的基准。 */
  font-size: 46px;
  line-height: 1;
  text-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.cover-tag {
  position: absolute;
  left: 10px; top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--t-brand);
  font-size: 11.5px;
  font-weight: 700;
}
.cover-price {
  position: absolute;
  right: 10px; bottom: 10px;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(51, 48, 42, .82);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.tcard-body { padding: 14px 15px 16px; display: flex; flex-direction: column; flex: 1; }
.tcard-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.tcard-desc {
  margin: 0 0 10px;
  font-size: 12.8px;
  color: var(--t-sub);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tcard-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--t-sub);
}
.tcard-meta .cm-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--t-line);
}
.badge-rate {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--t-amber-soft);
  color: var(--t-amber);
  font-size: 11.5px;
  font-weight: 700;
}

/* ---------- 活动（社会实践）面板 ---------- */
.act-panel {
  border-radius: var(--t-radius);
  background: var(--t-card);
  border: 1.5px solid var(--t-line);
  padding: 18px;
  margin: 0 0 18px;
}
.act-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 16px;
}
.act {
  border: 1.5px solid var(--t-line);
  border-radius: 15px;
  padding: 15px;
  background: #fff;
  transition: transform .16s, box-shadow .16s;
}
.act:hover { transform: translateY(-3px); box-shadow: var(--t-shadow); }
.act-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.act-emoji {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 21px;
  background: var(--t-amber-soft);
}
.act-title { font-size: 15px; font-weight: 700; line-height: 1.35; }
.act-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--t-brand-soft);
  color: var(--t-brand);
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 8px;
}
.act-rows { font-size: 12.8px; color: var(--t-sub); line-height: 1.9; }
.act-rows b { color: var(--t-text); font-weight: 600; }
.act-price {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--t-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.act-price .ap-now { font-size: 18px; font-weight: 800; color: var(--t-amber); }
.act-price .ap-free { font-size: 15px; font-weight: 800; color: var(--t-brand); }
.act-price .ap-unit { font-size: 12px; color: var(--t-sub); }

/* ---------- 研学商城项目详情弹窗 ---------- */
.tour-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(35, 30, 22, .55);
  backdrop-filter: blur(2px);
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 34px 16px;
  overflow-y: auto;
}
.tour-modal-mask[hidden] { display: none !important; }
.modal {
  width: 860px;
  max-width: 100%;
  background: var(--t-card);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-lg);
  overflow: hidden;
  animation: tourPop .18s ease-out;
  color: var(--t-text);
}
@keyframes tourPop {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.modal-cover {
  position: relative;
  height: 230px;
  display: grid;
  place-items: center;
  /* 同上：实际渲染的是汉字首字，不是 emoji */
  font-size: 74px;
  line-height: 1;
  text-shadow: 0 6px 22px rgba(0, 0, 0, .15);
}
.modal-cover .mc-close {
  position: absolute;
  right: 14px; top: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .92);
  color: #33302a;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.modal-cover .mc-close:hover { background: #fff; }
.modal-cover .mc-region {
  position: absolute;
  left: 16px; top: 16px;
  padding: 4px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--t-brand);
  font-size: 12.5px;
  font-weight: 700;
}
.modal-cover .mc-name {
  position: absolute;
  left: 16px; bottom: 14px;
  right: 16px;
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: .5px;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}
.modal-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  border-bottom: 1.5px solid var(--t-line);
  background: #fff;
}
.modal-tab {
  padding: 13px 16px;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--t-sub);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
}
.modal-tab.is-active { color: var(--t-brand); border-bottom-color: var(--t-brand); }
.modal-body { padding: 20px 22px; max-height: 46vh; overflow-y: auto; }
.modal-body .mb-sec { margin-bottom: 20px; }
.modal-body .mb-sec:last-child { margin-bottom: 0; }
.modal-body h4 {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--t-brand);
  display: flex;
  align-items: center;
  gap: 7px;
}
.modal-body h4::before {
  content: '';
  width: 4px; height: 15px;
  border-radius: 2px;
  background: var(--t-amber);
}
.modal-body p { margin: 0; font-size: 13.5px; line-height: 1.85; color: #4d483f; }

/* 看点条目 */
.item {
  display: flex;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid var(--t-line);
  margin-bottom: 9px;
}
.item:last-child { margin-bottom: 0; }
.item .it-idx {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--t-brand);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}
.item .it-text { font-size: 13.3px; line-height: 1.7; color: #4d483f; }

/* 导游解说 */
.guide {
  border-radius: 13px;
  padding: 14px 16px;
  background: var(--t-brand-soft);
  border-left: 4px solid var(--t-brand);
  font-size: 13.4px;
  line-height: 1.9;
  color: #3d4a40;
}
.guide .gd-label {
  display: block;
  font-weight: 700;
  color: var(--t-brand);
  margin-bottom: 6px;
  font-size: 13px;
}

/* 方案列表 */
.plan {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 13px;
  border: 1.5px solid var(--t-line);
  background: #fff;
  margin-bottom: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.plan:last-child { margin-bottom: 0; }
.plan:hover { border-color: var(--t-brand); box-shadow: var(--t-shadow); }
.plan.is-hot {
  background: linear-gradient(100deg, var(--t-amber-soft), #fff 62%);
  border-color: rgba(201, 138, 45, .5);
}
.plan-main { flex: 1; min-width: 0; }
.plan-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.plan-name .pl-hot {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--t-amber);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}
.plan-inc { font-size: 12.4px; color: var(--t-sub); line-height: 1.7; }
.plan-price { text-align: right; flex: none; }
.plan-price .pp-now { font-size: 20px; font-weight: 800; color: var(--t-amber); }
.plan-price .pp-now.is-free { color: var(--t-brand); font-size: 16px; }
.plan-price .pp-old {
  display: block;
  font-size: 12px;
  color: var(--t-sub);
  text-decoration: line-through;
  margin-top: 1px;
}
.plan-price .pp-unit { display: block; font-size: 11.5px; color: var(--t-sub); margin-top: 2px; }
.plan .btn { flex: none; }

/* 评价 */
.review {
  padding: 12px 0;
  border-bottom: 1px dashed var(--t-line);
}
.review:last-child { border-bottom: none; }
.review-top { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.review-stars { color: var(--t-amber); font-size: 13px; letter-spacing: 1px; }
.review-who { font-size: 12.5px; color: var(--t-sub); }
.review-text { font-size: 13.3px; line-height: 1.8; color: #4d483f; }

/* 弹窗底部操作条 */
.modal-foot {
  display: flex;
  gap: 11px;
  padding: 15px 22px;
  border-top: 1.5px solid var(--t-line);
  background: #fffdfa;
}
.modal-foot .btn { flex: 1; }

/* ---------- 购物车抽屉（右滑 420px） ---------- */
.drawer-mask {
  position: fixed;
  inset: 0;
  background: rgba(35, 30, 22, .48);
  z-index: 1300;
  display: flex;
  justify-content: flex-end;
}
.drawer-mask[hidden] { display: none !important; }
.drawer {
  width: 420px;
  max-width: 100%;
  height: 100%;
  background: var(--t-card);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(88, 70, 40, .22);
  animation: tourSlide .2s ease-out;
  color: var(--t-text);
}
@keyframes tourSlide {
  from { transform: translateX(100%); }
  to { transform: none; }
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 20px;
  border-bottom: 1.5px solid var(--t-line);
}
.drawer-head h3 { margin: 0; font-size: 17px; }
.drawer-head .dh-close {
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--t-brand-soft);
  color: var(--t-brand);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.drawer-foot {
  padding: 16px 20px;
  border-top: 1.5px solid var(--t-line);
  background: #fffdfa;
}
.drawer-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 13px;
}
.drawer-total .dt-label { font-size: 13.5px; color: var(--t-sub); }
.drawer-total .dt-value { font-size: 25px; font-weight: 800; color: var(--t-amber); }

.cart-item {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--t-line);
}
.cart-item:last-child { border-bottom: none; }
/* 缩略图：2026-09-27 前是 48px 正方块里放「项目名首字」。
   现在放的是**完整项目名**（见 app.js ciNameLabel），所以改成自适应宽度的
   胶囊：flex:0 0 auto 让它随文字撑开，nowrap 防止汉字被压成一列。
   （不要用 min-width：名称比它宽时 flex 项仍会被压窄，汉字会逐字换行。）
   align-self:center 必须写：.cart-item 是 flex 行且默认 align-items:stretch，
   原先 height:48px 挡住了拉伸，去掉固定高之后缩略图会被拉到整行高（实测 115px）。 */
.ci-emoji {
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  height: auto;
  min-height: 40px;
  padding: 4px 11px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 23px;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--t-brand-soft);
}
.ci-main { flex: 1; min-width: 0; }
.ci-name { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.ci-sub { font-size: 12.2px; color: var(--t-sub); margin-bottom: 8px; }
.ci-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ci-price { font-size: 14.5px; font-weight: 800; color: var(--t-amber); }
.ci-price.is-free { color: var(--t-brand); }
.qty { display: flex; align-items: center; gap: 0; }
.qty button {
  width: 27px; height: 27px;
  border: 1.5px solid var(--t-line);
  background: #fff;
  color: var(--t-text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.qty button:first-child { border-radius: 8px 0 0 8px; }
.qty button:last-child { border-radius: 0 8px 8px 0; }
.qty button:hover { background: var(--t-brand-soft); border-color: var(--t-brand); }
.qty span {
  min-width: 34px;
  height: 27px;
  display: grid;
  place-items: center;
  border-top: 1.5px solid var(--t-line);
  border-bottom: 1.5px solid var(--t-line);
  font-size: 13.5px;
  font-weight: 700;
  background: #fff;
}
.ci-del {
  border: none;
  background: none;
  color: var(--t-sub);
  font-size: 12.2px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.ci-del:hover { color: #c0392b; }

/* 购物车浮动按钮 */
.cart-fab {
  position: fixed;
  right: 26px;
  bottom: 30px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border: none;
  border-radius: 999px;
  background: var(--t-brand);
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(63, 111, 79, .38);
  transition: transform .16s, box-shadow .16s;
}
.cart-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(63, 111, 79, .46); }
.cart-fab[hidden] { display: none !important; }
.cart-fab .cf-count {
  min-width: 21px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--t-amber);
  font-size: 12px;
  font-weight: 800;
}

/* ---------- 结算弹窗 ---------- */
.checkout-modal {
  width: 560px;
  max-width: 100%;
  background: var(--t-card);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-lg);
  overflow: hidden;
  animation: tourPop .18s ease-out;
  color: var(--t-text);
}
.checkout-modal .cm-head {
  padding: 19px 24px 15px;
  border-bottom: 1.5px solid var(--t-line);
}
.checkout-modal .cm-head h3 { margin: 0; font-size: 18px; }
.co-lines { margin: 0 0 16px; }
.co-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 13.4px;
  border-bottom: 1px dashed var(--t-line);
}
.co-line .col-name { color: var(--t-sub); min-width: 0; }
.co-line .col-val { font-weight: 600; text-align: right; }
.co-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--t-amber-soft);
}
.co-sum .cs-label { font-size: 13.5px; color: #8a6a2e; }
.co-sum .cs-value { font-size: 25px; font-weight: 800; color: var(--t-amber); }

.checkout-modal .field { margin-bottom: 14px; }
.checkout-modal .field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.checkout-modal .field .f-req { color: #c0392b; }
.checkout-modal .field input,
.checkout-modal .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--t-line);
  border-radius: 11px;
  background: #fff;
  font: inherit;
  font-size: 13.5px;
  color: var(--t-text);
}
.checkout-modal .field input:focus,
.checkout-modal .field textarea:focus {
  outline: none;
  border-color: var(--t-brand);
  box-shadow: 0 0 0 3px var(--t-brand-soft);
}
.tour-err {
  margin: 0 0 13px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fdecea;
  color: #b53226;
  font-size: 13px;
  font-weight: 600;
}
.tour-err[hidden] { display: none !important; }

/* 下单成功 */
.success { text-align: center; padding: 30px 24px 26px; }
.success .su-icon {
  width: 66px; height: 66px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--t-brand-soft);
  color: var(--t-brand);
  font-size: 33px;
}
.success h3 { margin: 0 0 9px; font-size: 20px; color: var(--t-brand); }
.success p { margin: 0 0 16px; font-size: 13.4px; color: var(--t-sub); line-height: 1.8; }
.batch-pill {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--t-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .6px;
  margin-bottom: 18px;
}

/* ---------- 我的订单 ---------- */
.order-list { display: flex; flex-direction: column; gap: 13px; }
.order {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 15px 17px;
  border-radius: var(--t-radius);
  border: 1.5px solid var(--t-line);
  background: var(--t-card);
  transition: box-shadow .16s;
}
.order:hover { box-shadow: var(--t-shadow); }
/* 同上：缩略图放完整项目名，改成自适应宽度胶囊（不再是 54px 正方块）。
   align-self:center 见 .ci-emoji 的注释（.order 也是 flex 行）。 */
.order-emoji {
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  height: auto;
  min-height: 42px;
  padding: 4px 12px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--t-brand-soft);
}
.order-main { flex: 1; min-width: 0; }
.order-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.order-sub { font-size: 12.4px; color: var(--t-sub); line-height: 1.75; }
.order-sub .os-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.order-right { text-align: right; flex: none; }
.order-amount { font-size: 18px; font-weight: 800; color: var(--t-amber); }
.order-amount.is-free { color: var(--t-brand); font-size: 15px; }
.order-status {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--t-brand-soft);
  color: var(--t-brand);
  font-size: 11.5px;
  font-weight: 700;
}
.order-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 17px;
  border-radius: var(--t-radius);
  background: var(--t-brand-soft);
  margin-bottom: 15px;
}
.order-sum .os-item { font-size: 13px; color: #3d4a40; }
.order-sum .os-item b { font-size: 17px; color: var(--t-brand); }

/* ---------- 后台管理 ---------- */
.astats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 13px;
  margin-bottom: 22px;
}
.astat {
  padding: 15px 16px;
  border-radius: 15px;
  background: var(--t-card);
  border: 1.5px solid var(--t-line);
}
.astat .as-label { font-size: 12.3px; color: var(--t-sub); margin-bottom: 7px; }
.astat .as-value { font-size: 23px; font-weight: 800; color: var(--t-brand); line-height: 1.15; }
.astat .as-value.is-amber { color: var(--t-amber); }
.astat .as-unit { font-size: 12.5px; font-weight: 600; color: var(--t-sub); margin-left: 2px; }

.atabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  border-bottom: 1.5px solid var(--t-line);
}
.atab {
  padding: 9px 16px;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--t-sub);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
}
.atab:hover { background: rgba(63, 111, 79, .06); }
.atab.is-active { color: var(--t-brand); border-bottom-color: var(--t-brand); }

.apanel {
  border-radius: var(--t-radius);
  border: 1.5px solid var(--t-line);
  background: var(--t-card);
  padding: 17px;
  overflow-x: auto;
}
.atool {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.atool .at-grow { flex: 1; }

.mini-btn {
  padding: 5px 12px;
  border-radius: 9px;
  border: 1.5px solid var(--t-line);
  background: #fff;
  color: var(--t-text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.mini-btn:hover { border-color: var(--t-brand); color: var(--t-brand); background: var(--t-brand-soft); }
.mini-btn.is-danger:hover { border-color: #c0392b; color: #c0392b; background: #fdecea; }
.mini-btn:disabled { opacity: .5; cursor: not-allowed; }

table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.2px;
}
table.tbl th {
  text-align: left;
  padding: 10px 11px;
  font-size: 12.3px;
  font-weight: 700;
  color: var(--t-sub);
  border-bottom: 1.5px solid var(--t-line);
  white-space: nowrap;
  background: #fffdfa;
}
table.tbl td {
  padding: 11px;
  border-bottom: 1px dashed var(--t-line);
  vertical-align: middle;
}
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tr:hover td { background: rgba(63, 111, 79, .035); }
table.tbl .td-ops { display: flex; gap: 6px; flex-wrap: wrap; }
table.tbl .td-money { font-weight: 700; color: var(--t-amber); white-space: nowrap; }
table.tbl .td-muted { color: var(--t-sub); }
table.tbl .td-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.2px;
  color: var(--t-sub);
}

/* 迷你进度条（机构分账占比） */
.rate-bar {
  width: 62px;
  height: 6px;
  border-radius: 3px;
  background: var(--t-line);
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: 7px;
}
.rate-bar i { display: block; height: 100%; background: var(--t-brand); }

/* 空状态 */
.tour-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--t-sub);
}
.tour-empty .te-icon { font-size: 48px; margin-bottom: 12px; opacity: .55; }
.tour-empty .te-text { font-size: 14px; margin-bottom: 6px; }
.tour-empty .te-hint { font-size: 12.6px; opacity: .8; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .tour-scope { padding: 14px 12px 22px; border-radius: 14px; }
  .tour-head h1 { font-size: 23px; }
  .tcard-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
  .cover { height: 116px; font-size: 40px; }
  .modal-cover { height: 176px; font-size: 60px; }
  .modal-cover .mc-name { font-size: 20px; }
  .drawer { width: 100%; }
  .astats { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 10px; }
  .astat { padding: 12px 13px; }
  .astat .as-value { font-size: 19px; }
}
@media (max-width: 560px) {
  .tour-tabs { gap: 2px; }
  .tour-tab { padding: 8px 11px; font-size: 13.5px; }
  .modal { border-radius: 14px; }
  .modal-body { padding: 16px; max-height: 42vh; }
  .modal-foot { padding: 13px 16px; flex-direction: column; }
  .plan { flex-wrap: wrap; gap: 10px; }
  .plan-price { text-align: left; }
  .plan .btn { width: 100%; }
  .tcard-grid { grid-template-columns: 1fr; }
  .act-grid { grid-template-columns: 1fr; }
  .order { flex-wrap: wrap; }
  .order-right { text-align: left; width: 100%; }
  .cart-fab { right: 14px; bottom: 16px; padding: 11px 16px; font-size: 13.5px; }
  .checkout-modal .cm-head { padding: 16px 17px 13px; }
  .tour-modal-mask { padding: 14px 9px; }
}

/* ==================================================================
 * 随堂小测（inline-quiz）
 * ------------------------------------------------------------------
 * 复用「基础测评」的 .question-card / .q-option / .q-answer-input 样式，
 * 这里只负责把「题」和「正文」在视觉上区分开：
 *   - .inline-quiz 是插入正文段落里的小测容器，左侧一道强调色竖线，
 *     让它一眼看出来「这里开始不是讲解了，是要作答」；
 *   - 顶部胶带式「随堂小测」标签，与正文的 h4 段落标签区分；
 *   - 批改后 .iq-explain 展开正确答案与解析。
 * ================================================================== */

.inline-quiz {
  margin: 14px 0 6px;
  padding: 12px 14px 4px;
  background: #fbfdff;
  border-left: 4px solid var(--primary, #2563eb);
  border-radius: 8px;
}
.inline-quiz .iq-head { margin-bottom: 8px; }
.inline-quiz .iq-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--primary, #2563eb);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: .5px;
}
/* 小测里的题卡去掉外层阴影，避免在正文里「浮」起来显得杂乱 */
.inline-quiz .question-card {
  box-shadow: none;
  border: 1px solid #e2e8f0;
  margin-bottom: 12px;
  background: #fff;
}
.inline-quiz .question-card.right { border-color: var(--success, #16a34a); }
.inline-quiz .question-card.wrong { border-color: var(--danger, #dc2626); }

.iq-progress {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  margin-left: 4px;
  align-self: center;
}
.iq-progress.done { color: var(--success, #16a34a); font-weight: 600; }

.iq-explain {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 13.5px;
}
.iq-explain-line { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.iq-ok { color: var(--success, #16a34a); font-weight: 700; }
.iq-no { color: var(--danger, #dc2626); font-weight: 700; }
.iq-ans { color: var(--text, #1e293b); }
.iq-score { color: var(--text-muted, #64748b); }
.iq-analysis { margin-top: 6px; color: var(--text-muted, #64748b); line-height: 1.6; }

.iq-scoreboard { margin-top: 18px; }

.kp-end h4 { background: #eef2ff; color: #3730a3; }

@media (max-width: 560px) {
  .inline-quiz { padding: 10px 10px 2px; }
  .iq-explain-line { gap: 8px; font-size: 13px; }
}