/* =====================================================================
   页面级补充样式（学习首页 / 虚拟实训）
   说明：主样式表 style.css 提供通用组件；本文件只补齐这两个页面
   特有的布局类，全部使用 style.css 中已定义的设计变量，零依赖、离线可用。
   由外壳 index.html 在 style.css 之后引入。
   ===================================================================== */

/* ---------------------------------------------------------- 学习首页 */
.hero-card {
  background: linear-gradient(135deg, var(--c-primary-soft), var(--c-surface) 70%);
  border-left: 5px solid var(--c-primary);
}
.hero-title {
  margin: 0 0 6px;
  font-size: var(--fs-xl);
  color: var(--c-primary-dark);
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* ---------------------------------------------------------- 登录页 */
.login-wrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
}
.login-card {
  width: min(460px, 96vw);
  padding: 26px 26px 20px;
  box-shadow: var(--shadow-md);
}
.login-head { text-align: center; margin-bottom: 16px; }
.login-logo { font-size: 40px; line-height: 1; }
.login-title { font-size: var(--fs-xl); margin: 8px 0 4px; color: var(--c-primary-dark); }
.login-sub { font-size: var(--fs-sm); color: var(--c-text-3); }
.login-tabs { justify-content: center; }
.login-panel { padding: 6px 2px 2px; }
.login-label { display: block; font-size: var(--fs-sm); color: var(--c-text-2); margin-bottom: 4px; }
.login-input { width: 100%; font-size: var(--fs-md); padding: 9px 10px; }
.login-btn { width: 100%; }
.login-details { margin-top: 10px; font-size: var(--fs-sm); }
.login-details summary { cursor: pointer; color: var(--c-primary); }
.login-msg { min-height: 20px; margin-top: 10px; font-size: var(--fs-sm); }
.login-msg-ok { color: var(--c-ok); }
.login-msg-warn { color: var(--c-warn); }
.login-msg-danger { color: var(--c-danger); }
.login-foot { margin-top: 14px; text-align: center; line-height: 1.7; }
.login-foot code, .login-panel code {
  background: var(--c-surface-3);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.auth-badge { white-space: nowrap; }

/* 登录页：扫码登录二维码区 */
.login-qr-block { margin-top: 14px; text-align: center; }
.login-qr-box {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-2);
}
.login-qr-img {
  width: 210px;
  height: 210px;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 6px;
}
.login-qr-box p { margin: 8px 0 0; }
.login-qr-box a { word-break: break-all; color: var(--c-primary); }

/* 教师后台：数字资源上传面板 */
.seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--radius);
  background: var(--c-surface-2); border: 1px solid var(--c-border); margin-bottom: 12px; }
.seg-btn { border: 0; background: transparent; color: var(--c-text-muted); cursor: pointer;
  padding: 6px 14px; border-radius: var(--radius-sm); font: inherit; font-size: 0.9rem; }
.seg-btn:hover { color: var(--c-text); }
.seg-btn.active { background: var(--c-primary); color: #fff; }
.res-src { margin-bottom: 4px; }
#res-kps, #res-edit-kps { min-height: 84px; }
.imp-card .dropzone, #res-drop { margin-top: 6px; }
.card-ok { border-color: var(--c-ok); }

/* 资源清单操作列：三个按钮保持一行，避免把表格行撑得很高 */
#teacher-resources td:last-child { white-space: nowrap; }
#teacher-resources td:last-child .btn { margin-right: 4px; vertical-align: middle; }

/* 课程目录（章节 / 实验）两级选择器 */
.res-syllabus { margin: 10px 0 4px; border: 1px solid var(--c-border);
  border-radius: var(--radius); background: var(--c-surface-2); padding: 10px 12px; }
.res-syllabus-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.res-syllabus-head b { font-size: 0.95rem; }
.res-syllabus-tools { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.res-syllabus-tools .input { max-width: 360px; }
.res-syllabus-list { max-height: 260px; overflow: auto; border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); background: var(--c-surface); padding: 6px; }
.syl-group + .syl-group { margin-top: 8px; }
.syl-group-title { font-weight: 600; font-size: 0.85rem; color: var(--c-text-muted);
  padding: 4px 6px; position: sticky; top: 0; background: var(--c-surface); z-index: 1; }
.syl-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 0.88rem; line-height: 1.5; }
.syl-item:hover { background: var(--c-surface-2); }
.syl-item.is-on { background: color-mix(in srgb, var(--c-primary) 12%, transparent); }
.syl-num { min-width: 46px; font-family: var(--font-mono); color: var(--c-text-muted); }
.syl-title { flex: 1 1 auto; }
.syl-kp { color: var(--c-primary); font-size: 0.82rem; white-space: nowrap; }
.syl-badge { font-size: 0.78rem; padding: 1px 6px; border-radius: 999px;
  background: var(--c-ok); color: #fff; }
.syl-link { font-size: 0.8rem; color: var(--c-text-muted); text-decoration: underline; }
#res-syl-picked { margin-top: 6px; }

/* 教师端：从 Word/Excel 批量导入链接 */
.res-import-box { margin-top: 12px; padding: 12px; border: 1px dashed var(--c-primary);
  border-radius: var(--radius); background: var(--c-surface-2); }
.res-import-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 8px; }

/* 学生端：资源类型筛选 + 按章节分组 */
.resv-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.resv-filter { border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text); border-radius: 999px; padding: 3px 12px; font: inherit;
  font-size: 0.84rem; cursor: pointer; }
.resv-filter:hover { border-color: var(--c-primary); }
.resv-filter.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.resv-filter.is-on .text-muted { color: rgba(255, 255, 255, 0.8); }
.resv-group + .resv-group { margin-top: 12px; }
.resv-group-title { font-weight: 700; font-size: 0.9rem; color: var(--c-text-muted);
  padding: 4px 2px 6px; border-bottom: 1px dashed var(--c-border); margin-bottom: 8px; }

/* 学生端：外部视频链接的嵌入播放器 */
.resv-embed { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-sm);
  background: #000; display: block; }

/* 首页顶部菜单栏：把五大模块作为最上方的功能入口 */
.home-menu { padding: 14px 16px; }
.home-menu-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.home-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-2);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease),
              border-color 0.12s var(--ease), background 0.12s var(--ease);
}
.home-menu-item:hover,
.home-menu-item:focus-visible {
  transform: translateY(-2px);
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  box-shadow: var(--shadow-sm);
  outline: none;
}
.home-menu-item:active { transform: translateY(0); }
.home-menu-ico { font-size: 22px; line-height: 1.1; }
.home-menu-name { font-weight: 700; font-size: var(--fs-md); color: var(--c-text); }
.home-menu-desc { font-size: var(--fs-xs); color: var(--c-text-3); line-height: 1.5; }

@media (max-width: 640px) {
  .home-menu-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-menu-desc { display: none; }
}

.stat-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}

/* 知识点薄弱度行 */
.weak-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 46px auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--c-border);
}
.weak-row:last-child { border-bottom: 0; }
.weak-name { font-size: var(--fs-base); color: var(--c-text); }
.weak-name .badge { margin-left: 6px; }
.weak-value {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

/* 列表行（左文字 + 右按钮） */
.kv-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--c-border);
}
.kv-line:last-child { border-bottom: 0; }

/* 时间轴内的条目（与 style.css 的 .timeline > li 结构兼容） */
.timeline-item { display: block; }
.timeline-body { display: flex; flex-direction: column; gap: 4px; }
.timeline-title { font-weight: 600; font-size: var(--fs-base); }
.timeline-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.timeline > li { list-style: none; }

/* 小号输入框 */
.input-sm {
  padding: 4px 8px;
  font-size: var(--fs-sm);
  min-height: 30px;
}
select.input-sm { height: 32px; }

/* ---------------------------------------------------------- 虚拟实训 */
.grid-lab {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
  gap: 14px;
  margin: 12px 0;
}
.lab-scene-card { display: flex; flex-direction: column; }
.lab-scene {
  position: relative;
  width: 100%;
  height: 460px;
  min-height: 300px;
  margin-top: 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-3);
  overflow: hidden;
  touch-action: none;   /* 三维拖动旋转时禁止页面滚动 */
}
.lab-scene > canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.lab-scene > canvas[hidden] { display: none; }

/* 步骤指引 */
.lab-steps { display: flex; flex-direction: column; gap: 8px; }
.lab-step {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-2);
  opacity: .72;
}
.lab-step.active {
  opacity: 1;
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  box-shadow: var(--shadow-sm);
}
.lab-step.done { opacity: 1; border-color: var(--c-ok); background: var(--c-ok-soft); }
.lab-step-no {
  flex: 0 0 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-surface-3);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.lab-step.done .lab-step-no { background: var(--c-ok); color: #fff; }
.lab-step.active .lab-step-no { background: var(--c-primary); color: #fff; }
.lab-step-title { font-weight: 600; font-size: var(--fs-base); }
.lab-step-hint { font-size: var(--fs-xs); color: var(--c-text-3); line-height: 1.6; }

.lab-action {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-border);
}
.lab-action .input,
.lab-action .textarea { width: 100%; }
.chip-check { cursor: pointer; user-select: none; }
.chip-check input { margin-right: 4px; }

/* 实验指南等宽排版（保留换行） */
#exp-guide pre.kv,
pre.kv {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--c-text-2);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 10px 12px;
}

/* ---------------------------------------------------------- 响应式 */
@media (max-width: 980px) {
  .grid-lab { grid-template-columns: minmax(0, 1fr); }
  .lab-scene { height: 340px; }
}
@media (max-width: 640px) {
  .stat-row { grid-template-columns: minmax(0, 1fr); }
  .weak-row { grid-template-columns: minmax(0, 1fr) 70px 40px; }
  .weak-row .btn { grid-column: 1 / -1; }
  .lab-scene { height: 260px; }
}

/* 学生端：自动连播开关 */
.resv-auto { display: inline-flex; align-items: center; gap: 4px; font-size: 0.84rem;
  color: var(--c-text-muted); margin-right: 6px; cursor: pointer; }
.resv-auto input { margin: 0; }

/* 登录提示消息：与 login_panel.js 使用的类名对齐 */
.login-msg.is-ok { color: var(--c-ok); }
.login-msg.is-danger { color: var(--c-danger); }
.login-msg.is-warn { color: var(--c-warn); }
.login-panel .seg-sm { padding: 2px; }
.login-panel .seg-sm .seg-btn { padding: 4px 12px; font-size: 0.85rem; }

/* 顶栏账号菜单与手机号绑定弹窗 */
/* 注意：显隐必须用 [hidden] 与 display 配合，否则 display:flex 会覆盖 hidden 属性，
   导致菜单在首页一进来就显示出来（已修复的 bug）。 */
.auth-menu { position: absolute; right: 18px; top: 52px; z-index: 300;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  min-width: 168px; padding: 6px; display: none; flex-direction: column; gap: 2px; }
.auth-menu.is-open { display: flex; }
.auth-menu[hidden] { display: none !important; }
.auth-menu-item { border: 0; background: transparent; text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: var(--radius-sm); font: inherit; font-size: 0.88rem;
  color: var(--c-text); }
.auth-menu-item:hover { background: var(--c-surface-2); }
.modal-mask { position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-card { background: var(--c-surface); border-radius: var(--radius); padding: 18px 20px;
  width: 100%; max-width: 520px; box-shadow: 0 18px 48px rgba(0,0,0,0.24); }
.modal-title { font-weight: 700; font-size: 1.02rem; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between; }
.modal-close { border: 0; background: transparent; cursor: pointer; font-size: 1rem;
  color: var(--c-text-muted); }

/* 学情诊断：知识点行内的关联数字资源 */
.kp-res { margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--c-surface-2); border: 1px solid var(--c-border); }
.kp-res-empty { background: transparent; border-style: dashed; }
.kp-res-title { font-size: 0.84rem; color: var(--c-text-muted); margin-bottom: 6px; }
.kp-res-list { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-res-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border);
  font-size: 0.84rem; color: var(--c-text); text-decoration: none; }
.kp-res-item:hover { border-color: var(--c-primary); color: var(--c-primary); }
.kp-res-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-res-more { background: transparent; border-style: dashed; color: var(--c-primary); }

/* ================= 虚拟实训：竖排实训列表（教师/学生共用） ================= */
.lab-list-card { margin-bottom: 14px; }
.lab-list-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.lab-tool-box { border: 1px dashed var(--c-border); border-radius: var(--radius-sm);
  padding: 10px 12px; margin: 8px 0 12px; background: var(--c-surface-2); }
.lab-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
/* 虚拟实训列表：默认显示 8 条，其余收进可滚动区（用样式类控制显隐，避免 hidden 被 display 覆盖） */
.lab-list-box { display: flex; flex-direction: column; gap: 8px; }
.lab-list-more { display: none; margin-top: 8px; max-height: 560px; overflow-y: auto;
  padding: 8px 6px 0 0; border-top: 1px dashed var(--c-border); }
.lab-list-more.is-open { display: flex; }
.lab-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lab-item:hover { border-color: var(--c-primary); box-shadow: 0 2px 10px rgba(29,78,216,0.10); }
.lab-item.is-weak { border-left: 4px solid var(--c-danger, #ef4444); background: #fff7f7; }
.lab-item-no { flex: 0 0 76px; font-weight: 700; font-size: 0.86rem; color: var(--c-text-muted); }
.lab-item-main { flex: 1 1 auto; min-width: 0; }
.lab-item-name { font-weight: 650; font-size: 0.97rem; display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; }
.lab-item-badge { margin-left: 2px; }
.lab-item-reason { font-size: 0.83rem; color: var(--c-danger, #d9480f); margin-top: 3px; }
.lab-item-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.lab-item-act { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
@media (max-width: 720px) {
  .lab-item { flex-wrap: wrap; }
  .lab-item-act { width: 100%; justify-content: flex-end; }
}

/* 实训列表：实验名称下方标注对应的薄弱点 */
.lab-item-weak { font-size: 0.86rem; font-weight: 600; color: #b42318; margin-top: 4px; }
.lab-item.is-weak .lab-item-weak::before { content: "◆ "; font-size: 0.7rem; }

.lab-item-weak-metric { color: #8a1c14; font-weight: 400; font-size: 0.8rem; }

/* 交互实验场景（实验自带交互动画页面） */
.scene-card { margin-top: 14px; }
.scene-frame-wrap { position: relative; width: 100%; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--c-border); background: #0a1018; }
.scene-frame { width: 100%; height: 620px; border: 0; display: block; }
.scene-frame-wrap:fullscreen { border-radius: 0; }
.scene-frame-wrap:fullscreen .scene-frame { height: 100vh; }
@media (max-width: 760px) { .scene-frame { height: 420px; } }

/* 实训场景区：交互场景替换三维实训台时的显隐控制
   （注意：父级是 display:grid，hidden 属性会被覆盖，必须显式设 display:none） */
#exp-scene[hidden], #lab-scene-card[hidden] { display: none !important; }
#exp-scene { min-width: 0; }
.scene-card { margin: 0; }

/* 交互实验场景模式：场景独占上半部分（整行宽度、自适应），右侧步骤指引隐藏。
   注意：scene-mode 类加在 #lab-workspace 上，故这里必须用**后代选择器** */
#lab-workspace.scene-mode .grid-lab { grid-template-columns: minmax(0, 1fr); }
#lab-workspace.scene-mode .grid-lab #exp-scene { grid-column: 1 / -1; }
#lab-workspace.scene-mode .scene-frame { height: min(74vh, 820px); min-height: 500px; }
#lab-workspace.scene-mode .scene-card { margin: 0; }
@media (max-width: 900px) { #lab-workspace.scene-mode .scene-frame { height: 460px; } }

/* 交互场景模式：测量数据 / 结果反馈卡片也隐藏（显式 display:none，防 grid/flex 覆盖 hidden） */
#lab-measure-card[hidden], #lab-result-card[hidden], #lab-steps-card[hidden] { display: none !important; }
.scene-frame-wrap { width: 100%; }

/* ================= 交互场景模式（#lab-workspace.scene-mode）=================
   实验配了自带交互实验场景时：
   · 隐藏 三维实训台 / 步骤指引 / 测量数据 / 结果反馈
   · 隐藏 难度·时长·知识点（#exp-meta）、薄弱点推荐、切换二维视图
   · 交互场景独占整行并自适应放大
   注意：这些容器在 grid/flex 内，hidden 属性会被 display 覆盖，故显式 display:none */
#lab-workspace.scene-mode #lab-scene-card,
#lab-workspace.scene-mode #lab-steps-card,
#lab-workspace.scene-mode #lab-measure-card,
#lab-workspace.scene-mode #lab-result-card,
#lab-workspace.scene-mode #exp-meta,
#lab-workspace.scene-mode #lab-recommend-wrap,
#lab-workspace.scene-mode #btn-toggle-2d,
#lab-workspace.scene-mode #btn-ask-help { display: none !important; }

/* 顶部重排：交互场景模式下只留"标题 + 实验项目选择 + 问智能学伴"，更清爽美观 */
#lab-workspace.scene-mode #lab-head { padding-bottom: 10px; }
#lab-workspace.scene-mode #lab-head .grid-2 {
  display: flex; flex-direction: column; gap: 0; }
#lab-workspace.scene-mode #lab-bench-title {
  font-size: 1.08rem; margin: 0; padding-right: 8px;
  flex: 1 1 auto; min-width: 0; }
#lab-workspace.scene-mode #lab-head > .grid-2 > div:first-child {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }
#lab-workspace.scene-mode #lab-head > .grid-2 > div:first-child .kv,
#lab-workspace.scene-mode #lab-head > .grid-2 > div:first-child .card-title {
  margin: 0; }
#lab-workspace.scene-mode #lab-head > .grid-2 > div:first-child .kv {
  flex: 1 1 320px; min-width: 240px; }
#lab-workspace.scene-mode #lab-head > .grid-2 > div:last-child { display: block; }
#lab-workspace.scene-mode #lab-head .btn-row {
  margin: 8px 0 0; padding: 0; border-top: 0; justify-content: flex-start; }
#lab-workspace.scene-mode #exp-select { width: 100%; max-width: none; }

/* 场景卡片本身：去掉左右留白，视觉上更饱满 */
#lab-workspace.scene-mode .scene-frame-wrap { width: 100%; }

/* 场景头部：标题 + 副标题 + 右侧操作按钮，一行排布 */
.scene-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }
.scene-head-ico { font-size: 1.05rem; }
.scene-head-title { font-weight: 700; font-size: 1.02rem; }
.scene-head-extra { font-size: 0.86rem; color: var(--c-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; }
.scene-note { margin: 0 0 8px; }
.scene-foot { margin: 8px 0 0; }
.scene-frame-wrap { width: 100%; }
#exp-scene { min-width: 0; }
.scene-card { margin: 0; }

/* ============ 测试题库：按题型归纳的"文件列表" ============ */
.qb-group { border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--c-surface); }
.qb-group + .qb-group { margin-top: 10px; }
.qb-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px dashed var(--c-border); }
.qb-group-count { font-weight: 700; font-size: 0.95rem; }
.qb-group-note { margin-left: auto; font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3); }
.qb-files { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

/* ---------- 默认 3 条、其余滚动（题库总览 / 题库明细共用） ---------- */
.qb-scroll { overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.qb-scroll::-webkit-scrollbar { width: 8px; }
.qb-scroll::-webkit-scrollbar-track { background: transparent; }
.qb-scroll::-webkit-scrollbar-thumb {
  background: var(--c-surface-3, #d8dfe9); border-radius: var(--radius-pill);
}
/* 总览的文件条：高度由脚本按实测设定为"正好 3 条"（见 fitVisibleBox），此处仅兜底上限 */
.qb-scroll-files { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 260px; }
/* 明细的题目卡：由 data-visible="3" 处的脚本按实测高度设 max-height */
.qb-scroll-detail { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.qb-scroll-hint {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--c-border);
  font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3);
}

.qb-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface-2); }
.qb-file:hover { border-color: var(--c-primary); }
.qb-file-ico { font-size: 1.05rem; flex: 0 0 auto; }
.qb-file-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qb-file-name { font-weight: 600; font-size: 0.92rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.qb-file-meta { font-size: 0.8rem; color: var(--c-text-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.qb-file-act { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.qb-preview-details summary { cursor: pointer; font-size: 0.86rem; color: var(--c-primary);
  padding: 4px 0; }
@media (max-width: 720px) {
  .qb-file { flex-wrap: wrap; }
  .qb-file-act { width: 100%; justify-content: flex-end; }
}

/* ================= 学生端「阶段测试」三按钮主页 ================= */
.qz-head .qz-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qz-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--c-border); }
.qz-paper { display: flex; flex-direction: column; gap: 14px; }
.qz-paper.is-locked { opacity: 0.72; }
.qz-q { border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--c-surface); }
.qz-q.is-answered { border-color: var(--c-primary); background: #f7faff; }
.qz-q-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.qz-q-no { font-weight: 700; }
.qz-stem { font-size: 0.97rem; line-height: 1.6; }
.qz-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.qz-opt { display: flex; align-items: flex-start; gap: 6px; font-size: 0.92rem;
  padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.qz-opt:hover { background: var(--c-surface-2); }
.qz-submit-bar { display: flex; align-items: center; gap: 8px; margin-top: 16px;
  padding-top: 12px; border-top: 2px solid var(--c-border); }
.qz-score-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qz-score { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--c-primary); }
.qz-score-unit { font-size: 1rem; font-weight: 600; margin-left: 2px; }
.qz-verdict { font-size: 1.05rem; font-weight: 700; }
.qz-pass { border-left: 5px solid var(--c-ok, #22c55e); }
.qz-fail { border-left: 5px solid var(--c-danger, #ef4444); }
.qz-list { margin: 6px 0 0 18px; font-size: 0.9rem; line-height: 1.7; }
tr.qz-wrong td { background: #fff5f5; }

/* 微证书 */
.qz-cert { background: linear-gradient(135deg, #fffdf5 0%, #fff8e6 100%); }
.qz-cert-inner { border: 3px double #d4a017; border-radius: var(--radius);
  padding: 18px 22px; text-align: center; }
.qz-cert-badge { font-size: 2.2rem; }
.qz-cert-title { font-size: 1.15rem; font-weight: 800; color: #8a6100; margin: 6px 0 10px;
  letter-spacing: 1px; }
.qz-cert-body { font-size: 0.95rem; line-height: 1.9; }
.qz-cert-score { font-size: 1.3rem; color: #b45309; }
.qz-cert-meta { font-size: 0.82rem; color: var(--c-text-muted); margin-top: 10px; }
.qz-cert-list { display: flex; flex-direction: column; gap: 6px; }
.qz-cert-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface-2); }
.qz-cert-item-score { font-weight: 700; color: var(--c-primary); flex: 0 0 64px; }
.qz-cert-item-name { flex: 1 1 200px; }
@media (max-width: 720px) { .qz-score { font-size: 2rem; } }
@media print {
  body * { visibility: hidden; }
  .qz-cert, .qz-cert * { visibility: visible; }
  .qz-cert { position: absolute; left: 0; top: 0; width: 100%; }
}

/* ============ 学生端阶段测试：出题表单 + 答题卡 + 计时 ============ */
.qz-picks { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 10px; }
.qz-pick { display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem;
  color: var(--c-text-muted); }
.qz-pick .input { width: 96px; }
.qz-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qz-times { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qz-time { border: 1px solid var(--c-border); background: var(--c-surface);
  border-radius: 999px; padding: 5px 12px; font-size: 0.84rem; cursor: pointer;
  color: var(--c-text); font-family: inherit; }
.qz-time:hover { border-color: var(--c-primary); }
.qz-time.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff;
  font-weight: 600; }
.qz-run { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-border); }

/* 试卷 + 答题卡两栏 */
.qz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 14px;
  margin-top: 14px; align-items: start; }
.qz-side { position: sticky; top: 86px; }
.qz-card-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.qz-card-btn { width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer;
  font-size: 0.84rem; color: var(--c-text); font-family: inherit; }
.qz-card-btn:hover { border-color: var(--c-primary); }
.qz-card-btn.is-done { background: #dcfce7; border-color: #22c55e; color: #15803d;
  font-weight: 700; }
.qz-card-btn.is-cur { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.qz-nav { display: flex; gap: 8px; margin-top: 10px; }
@media (max-width: 900px) {
  .qz-layout { grid-template-columns: minmax(0, 1fr); }
  .qz-side { position: static; }
}

/* ================= 学情诊断主页（学生画像）美化 ================= */
/* 区块大标题：比默认 card-title 更醒目 */
.diag-sec { margin-top: 16px; }
.sec-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 0 0 10px; margin-bottom: 12px; border-bottom: 2px solid var(--c-border); }
.sec-ico { font-size: 1.3rem; line-height: 1; }
.sec-name { font-size: 1.22rem; font-weight: 800; letter-spacing: 0.3px; }
.sec-extra { margin-left: auto; font-size: 0.85rem; color: var(--c-text-muted); font-weight: 500; }

/* —— 诊断结论：醒目主卡 —— */
.diag-hero { background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
  border-left: 5px solid var(--c-primary); }
.diag-hero-main { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.diag-hero-text { flex: 1 1 320px; min-width: 0; }
.diag-headline { font-size: 1.06rem; font-weight: 650; line-height: 1.7; margin: 0 0 6px; }
.diag-hero-side { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px;
  align-items: center; text-align: center; min-width: 168px; }
.diag-avg { border-radius: var(--radius); padding: 8px 18px; background: #fff;
  border: 1px solid var(--c-border); box-shadow: 0 2px 10px rgba(29,78,216,0.06); }
.diag-avg-num { font-size: 2.1rem; font-weight: 800; line-height: 1.1; }
.diag-avg-label { font-size: 0.82rem; color: var(--c-text-muted); }
.diag-avg.stat-ok .diag-avg-num { color: var(--c-ok); }
.diag-avg.stat-warn .diag-avg-num { color: var(--c-warn); }
.diag-avg.stat-danger .diag-avg-num { color: var(--c-danger); }
.diag-level { font-size: 0.85rem; padding: 4px 10px; border-radius: 999px;
  background: var(--c-surface-2); border: 1px solid var(--c-border); }
.diag-level.lv-ok { background: #dcfce7; border-color: #86efac; color: #15803d; }
.diag-level.lv-mid { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.diag-level.lv-warn { background: #fef3c7; border-color: #fcd34d; color: #b45309; }
.diag-level.lv-danger { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }

/* 数据卡：两行等宽自适应 */
.diag-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px; margin-top: 16px; }
.diag-stats .stat { border-radius: var(--radius); border: 1px solid var(--c-border);
  background: #fff; padding: 12px 10px; text-align: center; }
.diag-stats .stat-num { font-size: 1.6rem; }
@media (max-width: 1100px) { .diag-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .diag-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* —— 默认显示 3 条 + 其余展开滚动 —— */
.diag-list { display: flex; flex-direction: column; gap: 12px; }
/* 注意：折叠区用样式控制显隐，不能依赖 [hidden] 属性 —— 因为 display:flex 会覆盖
   hidden 的 display:none，导致"其余条目"全部显示出来（已修复的 bug）。 */
.diag-more { display: none; flex-direction: column; gap: 12px; margin-top: 12px;
  max-height: 480px; overflow-y: auto; padding-right: 6px;
  border-top: 1px dashed var(--c-border); padding-top: 12px; }
.diag-more.is-open { display: flex; }
.diag-more-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--c-border); }

/* —— 自适应学习路径卡片 —— */
.tl-item { border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary);
  border-radius: var(--radius-sm); padding: 10px 12px; background: var(--c-surface); }
.tl-item.ok { border-left-color: var(--c-ok); }
.tl-item.warn { border-left-color: var(--c-warn); }
.tl-title { font-weight: 700; font-size: 0.98rem; }
.tl-meta { font-size: 0.84rem; color: var(--c-text-muted); margin-top: 2px; }

/* —— 推荐卡片 —— */
.rec-card { padding: 12px 14px; }
.rec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-title { font-weight: 700; font-size: 0.98rem; flex: 1 1 auto; min-width: 0; }

/* 推荐两栏等宽自适应 */
.diag-sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.diag-sec-grid > .card { margin: 0; }
@media (max-width: 1000px) { .diag-sec-grid { grid-template-columns: minmax(0, 1fr); } }

/* ================= 学习首页 ================= */
/* 说明：轮播样式统一在后面「首页轮播图（5 张实图）」一节，这里不再重复定义。
   2026 版布局：全宽通栏（不再有右侧身份栏），欢迎条 + 卡片网格分区。 */

/* ---- 未登录引导（首页不再内嵌登录表单） ---- */
.home-needlogin {
  max-width: 560px;
  margin: clamp(28px, 8vh, 80px) auto;
  padding: 34px 30px 30px;
  text-align: center;
  border-radius: 18px;
  border: 1px solid rgba(29, 78, 216, .14);
  background: #fff;
  box-shadow: 0 18px 44px -22px rgba(15, 40, 110, .28);
}
.home-needlogin-logo { width: min(220px, 62%); height: auto; margin: 0 auto 10px; display: block; }
.home-needlogin-title {
  margin: 0 0 10px;
  font-size: 1.32rem;
  letter-spacing: .1em;
  color: var(--c-primary-dark);
}
.home-needlogin-sub {
  margin: 0 auto 20px;
  max-width: 32em;
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--c-text-3);
}

/* ---- 欢迎条：左侧问候 + 右侧关键指标 ---- */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(29, 78, 216, .12);
  background:
    radial-gradient(620px 260px at 0% 0%, rgba(29, 78, 216, .10), transparent 62%),
    radial-gradient(520px 240px at 100% 100%, rgba(14, 165, 233, .10), transparent 60%),
    #fff;
  box-shadow: 0 12px 34px -22px rgba(15, 40, 110, .30);
}
.home-hero-main { min-width: 0; }
.home-hero-title {
  margin: 0 0 8px;
  font-size: clamp(1.24rem, 2vw, 1.6rem);
  line-height: 1.3;
  color: var(--c-primary-dark);
}
.home-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.home-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-xs, .78rem);
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  border: 1px solid rgba(29, 78, 216, .14);
  white-space: nowrap;
}
.home-tag-id { font-family: var(--font-mono); letter-spacing: .02em; }
.home-hero-line {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--c-text-2);
  max-width: 46em;
}
.home-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.home-metric {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--c-border);
  min-width: 0;
}
.home-metric-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-primary);
}
.home-metric-sub { font-size: .82rem; font-weight: 600; color: var(--c-text-3); }
.home-metric-label {
  font-size: var(--fs-xs, .78rem);
  color: var(--c-text-3);
  line-height: 1.5;
  margin-top: 2px;
}

/* ---- 卡片分区网格 ---- */
.home-grid { display: grid; gap: 16px; align-items: start; margin-top: 16px; }
.home-grid-2 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.home-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .home-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .home-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .home-hero { grid-template-columns: minmax(0, 1fr); }
}

.home-foot-note {
  margin: 16px 2px 4px;
  font-size: var(--fs-xs, .78rem);
  line-height: 1.8;
  color: var(--c-text-3);
}

/* 最近测试：分数更醒目 */
.home-score { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; }
.home-score-num { font-size: 2rem; font-weight: 800; color: var(--c-primary); line-height: 1; }
.home-score-meta { font-size: var(--fs-sm); color: var(--c-text-3); }

/* ==================================================================
 * 教师端 · 教学首页（通栏 + 分区卡片，与学生首页同一套视觉语言）
 * ================================================================== */
.th-head { margin-bottom: 14px; }
.th-menu { margin-bottom: 16px; }

/* ---- 欢迎条 ---- */
.th-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(29, 78, 216, .12);
  background:
    radial-gradient(620px 260px at 0% 0%, rgba(29, 78, 216, .10), transparent 62%),
    radial-gradient(520px 240px at 100% 100%, rgba(14, 165, 233, .10), transparent 60%),
    #fff;
  box-shadow: 0 12px 34px -22px rgba(15, 40, 110, .30);
}
.th-hero-main { min-width: 0; }
.th-hero-title {
  margin: 0 0 10px;
  font-size: clamp(1.22rem, 1.9vw, 1.54rem);
  line-height: 1.3;
  color: var(--c-primary-dark);
}
.th-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.th-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-xs, .78rem);
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  border: 1px solid rgba(29, 78, 216, .14);
  white-space: nowrap;
}
.th-tag-mono { font-family: var(--font-mono); }
.th-hero-line {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--c-text-2);
  max-width: 46em;
}
.th-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.th-hero-metric {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--c-border);
  min-width: 0;
}
.th-hero-metric-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-primary);
}
.th-hero-metric-unit { font-size: .78rem; font-weight: 700; color: var(--c-text-3); margin-left: 2px; }
.th-hero-metric-label {
  font-size: var(--fs-xs, .78rem);
  color: var(--c-text-3);
  margin-top: 2px;
  line-height: 1.5;
}

/* ---- 小标题 ---- */
.th-sec-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 2px 10px;
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: .02em;
}

/* ---- 网格 ---- */
.th-grid { display: grid; gap: 14px; align-items: start; }
.th-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.th-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.th-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 0; }
@media (max-width: 1080px) {
  .th-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .th-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .th-grid-4, .th-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 统计卡 ---- */
.th-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--c-border);
  box-shadow: 0 6px 18px -14px rgba(15, 40, 110, .34);
  min-width: 0;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.th-metric:hover {
  border-color: rgba(29, 78, 216, .3);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -16px rgba(15, 40, 110, .38);
}
.th-metric-ico {
  flex: none;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 1.28rem;
  background: var(--c-primary-soft);
}
.th-metric-ico[data-ico="book"] { background: #eef7ff; }
.th-metric-ico[data-ico="lab"] { background: #eefaf3; }
.th-metric-ico[data-ico="quiz"] { background: #fff6e8; }
.th-metric-ico[data-ico="play"] { background: #f2f0ff; }
.th-metric-ico[data-ico="check"] { background: var(--c-ok-soft, #e7f9ee); }
.th-metric-ico[data-ico="chart"] { background: #eef4ff; }
.th-metric-body { min-width: 0; display: flex; flex-direction: column; }
.th-metric-num {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-primary);
}
.th-metric-unit { font-size: .76rem; font-weight: 700; color: var(--c-text-3); margin-left: 3px; }
.th-metric-label {
  font-size: var(--fs-xs, .78rem);
  color: var(--c-text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 用 emoji 充当图标（离线可用，无外部依赖） */
.th-metric-ico[data-ico="peers"]::before { content: "👥"; }
.th-metric-ico[data-ico="book"]::before { content: "📚"; }
.th-metric-ico[data-ico="lab"]::before { content: "🔧"; }
.th-metric-ico[data-ico="quiz"]::before { content: "🗂️"; }
.th-metric-ico[data-ico="play"]::before { content: "▶️"; }
.th-metric-ico[data-ico="check"]::before { content: "✅"; }
.th-metric-ico[data-ico="chart"]::before { content: "📈"; }

/* ---- 班级最薄弱知识点：进度条 ---- */
.th-weak-row { padding: 10px 0; border-bottom: 1px dashed var(--c-border); }
.th-weak-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.th-weak-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.th-weak-name { font-weight: 700; font-size: var(--fs-base); min-width: 0; }
.th-weak-val { font-family: var(--font-mono); font-weight: 800; font-size: .95rem; flex: none; }
.th-weak-bar {
  height: 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--c-surface-3);
  overflow: hidden;
}
.th-weak-bar > i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: inherit;
  /* 不支持 color-mix() 的浏览器用纯色降级 */
  background: var(--bar, var(--c-primary));
  background: linear-gradient(90deg, var(--bar, var(--c-primary)),
    color-mix(in srgb, var(--bar, var(--c-primary)) 68%, #fff));
  transition: width .5s ease;
}
.th-weak-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 5px;
  font-size: var(--fs-xs, .78rem);
  color: var(--c-text-3);
}
.th-weak-meta .mono { font-family: var(--font-mono); }
.th-weak-meta .btn { margin-left: auto; }

/* ---- 学生高频提问：排名榜 ---- */
.th-rank { list-style: none; margin: 0; padding: 0; }
.th-rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--c-border);
}
.th-rank-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.th-rank-no {
  flex: none;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 800;
  color: var(--c-text-3);
  background: var(--c-surface-3);
}
.th-rank-no.is-top { background: var(--c-primary); color: #fff; }
.th-rank-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.th-rank-q {
  font-size: var(--fs-sm);
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.th-rank-bar { height: 6px; border-radius: var(--radius-pill, 999px); background: var(--c-surface-3); overflow: hidden; }
.th-rank-bar > i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}
.th-rank-count {
  flex: none;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--c-primary);
  font-size: 1rem;
}
.th-rank-unit { font-size: .72rem; font-weight: 700; color: var(--c-text-3); margin-left: 2px; }

/* ---- 学生速览 ---- */
.th-table { width: 100%; }
.th-stu-name { font-weight: 700; }
.th-score {
  display: inline-block;
  min-width: 38px;
  padding: 2px 7px;
  border-radius: var(--radius-pill, 999px);
  font-weight: 700;
  font-size: .82rem;
  font-family: var(--font-mono);
}
.th-score.is-good { background: var(--c-ok-soft, #e7f9ee); color: #15803d; }
.th-score.is-mid { background: var(--c-warn-soft, #fff5e2); color: #b45309; }
.th-score.is-low { background: var(--c-danger-soft, #fdecec); color: #b91c1c; }
.th-score.is-none { background: var(--c-surface-3); color: var(--c-text-3); }
.th-table-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--fs-xs, .78rem);
  color: var(--c-text-3);
}

/* 兼容旧版教师首页的类名（保留以免其它页面受影响） */
.home-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: 16px; align-items: start; }
.home-split .home-main { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.home-split .home-side { position: sticky; top: 84px; }
.home-split .home-side .login-panel { margin-bottom: 0; }
@media (max-width: 1080px) {
  .home-split { grid-template-columns: minmax(0, 1fr); }
  .home-split .home-side { position: static; }
}
.home-list { margin: 6px 0 0 18px; line-height: 1.9; }

/* 登录方式速览 */
.home-quick { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.home-quick-item { display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--c-surface-2); }
.home-quick-ico { font-size: 1.5rem; line-height: 1.1; }
.home-quick-name { font-weight: 700; }

/* 已登录：右侧身份卡 */
.home-persona-row { display: flex; gap: 12px; align-items: center; margin: 6px 0 10px; }
.home-persona-ico { font-size: 1.9rem; line-height: 1; }
.home-persona-name { font-weight: 700; font-size: 1.02rem; }
.home-persona-stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; text-align: center; border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); padding: 10px; background: var(--c-surface-2); }
.home-persona-num { font-size: 1.5rem; font-weight: 800; color: var(--c-primary); }

/* 首页右侧登录卡片：标题与说明分两行，避免在窄栏里被挤断 */
.home-side .login-panel > .card-title { display: block; }
.home-side .login-panel > .card-title .card-title-extra {
  display: block; margin-left: 0; margin-top: 4px; line-height: 1.6; font-weight: 400; }

/* ============ 学习首页：路径默认 3 条 / 薄弱点默认 5 条，其余滚动 ============ */
.home-scroll { overflow-y: auto; padding-right: 6px; overscroll-behavior: contain; }
/* 路径：每条约 92px（含间距）→ 288px 恰好显示 3 条，第 4 条起需滚动 */
.home-scroll-path { max-height: 288px; }
/* 薄弱知识点：5 条实测约 409px → 420px 正好显示 5 条（如更多则滚动） */
.home-scroll-kp { max-height: 420px; }
.home-scroll::-webkit-scrollbar { width: 8px; }
.home-scroll::-webkit-scrollbar-thumb { background: var(--c-surface-3); border-radius: var(--radius-pill); }
.home-scroll-hint { font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3);
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--c-border); }

/* ============ 首页轮播图（5 张实图，自适应 + 文案浮层） ============ */
.home-carousel { position: relative; border-radius: var(--radius); overflow: hidden;
  margin-bottom: 14px; background: #0b1220; border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm); }
.home-carousel .hc-viewport { position: relative; width: 100%;
  /* 高度：约占首页 1/4（视口 25%），并限制在 150~260px 之间；
     不再用 aspect-ratio，避免高度过低时图片按 contain 缩放出现上下留白 */
  height: 25vh; min-height: 150px; max-height: 260px; }
@media (max-width: 900px) { .home-carousel .hc-viewport { height: 22vh; min-height: 140px; } }
@media (max-width: 620px) { .home-carousel .hc-viewport { height: 20vh; min-height: 130px; } }
.home-carousel .hc-slide { position: absolute; inset: 0; margin: 0; opacity: 0;
  transition: opacity .6s var(--ease); pointer-events: none; }
.home-carousel .hc-slide.is-on { opacity: 1; pointer-events: auto; }
/* object-fit: cover 会把图片裁到容器比例：取中间横条，正好去掉原图上下黑边 */
.home-carousel .hc-img { width: 100%; height: 100%; object-fit: cover;
  object-position: center center; display: block; }
/* 图片下沿加一层很轻的渐变，既保证文案可读，又尽量不遮挡图片自身内容 */
.home-carousel .hc-slide::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,10,22,0) 42%, rgba(4,10,22,0.34) 68%,
    rgba(4,10,22,0.70) 100%); }
.home-carousel .hc-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 14px 24px 16px; color: #fff; max-width: 900px; }
.home-carousel .hc-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.4px;
  color: #7dd3fc; margin-bottom: 2px; }
.home-carousel .hc-title { font-size: 1.18rem; font-weight: 800; margin: 0 0 2px;
  line-height: 1.3; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.home-carousel .hc-desc { margin: 0; font-size: 0.84rem; line-height: 1.5;
  color: #e2e8f0; text-shadow: 0 1px 8px rgba(0,0,0,0.55);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* 左右箭头 */
.home-carousel .hc-arrow { position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.35); background: rgba(6,14,28,0.45);
  color: #fff; font-size: 19px; line-height: 1; display: flex; align-items: center;
  justify-content: center; backdrop-filter: blur(2px); transition: background .15s; }
.home-carousel .hc-arrow:hover { background: rgba(37,99,235,0.85); }
.home-carousel .hc-prev { left: 12px; }
.home-carousel .hc-next { right: 12px; }
/* 圆点（放在右下角，避免与左下角文案挤在一起） */
.home-carousel .hc-dots { position: absolute; right: 18px; bottom: 12px; z-index: 3;
  display: flex; gap: 6px; justify-content: flex-end; }
.home-carousel .hc-dot { width: 8px; height: 8px; border-radius: 999px; padding: 0;
  border: none; cursor: pointer; background: rgba(255,255,255,0.5); transition: all .2s; }
.home-carousel .hc-dot.is-on { background: #fff; width: 20px; }
.home-carousel .hc-copy { padding-right: 96px; }   /* 给右下角圆点留出位置 */
/* 占位版（无图片）保留浅色观感 */
.home-carousel.is-placeholder { background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 55%, #eafaf3 100%); }
.home-carousel.is-placeholder .hc-slide { position: static; opacity: 1; pointer-events: auto;
  padding: 26px 28px; display: flex; align-items: center; gap: 24px; min-height: 188px; }
.home-carousel.is-placeholder .hc-slide::after { display: none; }
.home-carousel.is-placeholder .hc-copy { position: static; color: var(--c-text); padding: 0; }
.home-carousel.is-placeholder .hc-title { color: var(--c-text); text-shadow: none; font-size: 1.5rem; }
.home-carousel.is-placeholder .hc-kicker { color: var(--c-primary-dark); }
.home-carousel.is-placeholder .hc-desc { color: var(--c-text-2); text-shadow: none; }
.home-carousel .hc-note { padding: 0 28px 14px; font-size: 0.78rem; color: var(--c-text-3); }
@media (max-width: 760px) {
  .home-carousel .hc-copy { padding: 16px 18px 24px; }
  .home-carousel .hc-title { font-size: 1.15rem; }
  .home-carousel .hc-desc { font-size: 0.84rem; }
  .home-carousel .hc-arrow { width: 30px; height: 30px; font-size: 18px; }
}

/* ==================================================================
 * 教师端 · 学生画像（#/t-class）
 * 布局：画像摘要 → 指标分组（课程内容 / 学习行为）→ 三块列表
 * 列表：默认显示 5 条（首屏恰好露出 5 条），其余在同一卡片内滚动查看
 * ================================================================== */

/* ---------- 顶部画像摘要 ---------- */
.tp-hero {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding: 20px 22px; margin-bottom: 14px;
  border-radius: var(--radius-lg); border: 1px solid var(--c-border);
  background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-surface-2, #f7f9fc) 100%);
  box-shadow: var(--shadow-sm);
}
.tp-hero-main { flex: 1 1 320px; min-width: 260px; }
.tp-hero-kicker {
  font-size: var(--fs-xs, 0.78rem); font-weight: 700; letter-spacing: 0.04em;
  color: var(--c-primary); text-transform: none; margin-bottom: 6px;
}
.tp-hero-title {
  font-size: 1.32rem; font-weight: 800; line-height: 1.3; color: var(--c-text);
  margin-bottom: 6px;
}
.tp-hero-desc { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.6; }
.tp-hero-nums {
  display: grid; grid-template-columns: repeat(4, minmax(84px, 1fr));
  gap: 10px; flex: 1 1 360px;
}
.tp-hero-num {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 12px 8px; border-radius: var(--radius);
  background: var(--c-surface); border: 1px solid var(--c-border);
}
.tp-hero-num b {
  font-size: 1.42rem; font-weight: 800; color: var(--c-primary);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.tp-hero-num span { font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3); }

/* ---------- 指标分组 ---------- */
.tp-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tp-metric-group { min-width: 0; }
.tp-group-title {
  font-size: var(--fs-xs, 0.78rem); font-weight: 700; color: var(--c-text-3);
  letter-spacing: 0.04em; margin: 0 0 8px 2px;
}
.tp-metric-group .grid-4 { gap: 12px; }
.tp-metric-group .stat { padding: 12px 14px; }
.tp-metric-group .stat-num { font-size: 24px; }

/* ---------- 三块列表卡片 ---------- */
.tp-card { margin-top: 14px; }
.tp-card-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--c-border);
}
.tp-card-title { font-size: 1.02rem; font-weight: 700; color: var(--c-text); }
.tp-tag {
  font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3);
  padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--c-surface-2, #f2f5fa); border: 1px solid var(--c-border);
}

/* 滚动容器：默认视觉上正好 5 条，第 6 条起需滚动 */
.tp-scroll {
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: 8px; border-radius: var(--radius);
}
.tp-scroll::-webkit-scrollbar { width: 8px; }
.tp-scroll::-webkit-scrollbar-track { background: transparent; }
.tp-scroll::-webkit-scrollbar-thumb {
  background: var(--c-surface-3, #d8dfe9); border-radius: var(--radius-pill);
}
/* 知识点条：每条约 88px → 440px 恰好 5 条（实测偏差时用脚本校准） */
.tp-scroll-kp { max-height: 567px; }   /* 实测 5 条 */
/* 表格：表头约 40px + 每行约 45px → 265px ≈ 5 行 */
.tp-scroll-students { max-height: 353px; }   /* 实测 5 行 */
.tp-scroll-students .table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--c-surface); box-shadow: inset 0 -1px 0 var(--c-border);
}
.tp-scroll-lb { max-height: 265px; }
.tp-scroll-lb .table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--c-surface); box-shadow: inset 0 -1px 0 var(--c-border);
}
.tp-scroll-hint {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--c-border);
  font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3);
}

/* ---------- 最薄弱知识点：名次 + 进度条 ---------- */
.tp-kp { padding: 10px 0; border-bottom: 1px dashed var(--c-border); }
.tp-kp:last-child { border-bottom: 0; }
.tp-kp-head { display: flex; align-items: center; gap: 10px; }
.tp-kp-rank {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; color: #fff;
}
.tp-kp-name { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.tp-kp-score { flex: 0 0 auto; font-size: 1.05rem; font-weight: 800; }
.tp-kp-meta { margin-top: 4px; }
.tp-kp-names {
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 积分榜：名次徽章 + 前三名高亮 ---------- */
.tp-lb-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-surface-2, #eef2f8); color: var(--c-text-2);
  font-size: 0.74rem; font-weight: 800;
}
tr.tp-lb-top1 .tp-lb-rank { background: #f5b301; color: #fff; }
tr.tp-lb-top2 .tp-lb-rank { background: #9aa7b8; color: #fff; }
tr.tp-lb-top3 .tp-lb-rank { background: #c98a4b; color: #fff; }
tr.tp-lb-top1 td, tr.tp-lb-top2 td, tr.tp-lb-top3 td { background: rgba(245, 179, 1, 0.06); }

@media (max-width: 1100px) {
  .tp-metrics { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .tp-hero { padding: 16px; }
  .tp-hero-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-hero-title { font-size: 1.12rem; }
  .tp-metric-group .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================================================================
 * 教师端 · 可折叠卡片（资源与实训：数字资源清单 / 虚拟实训项目）
 * 默认收起；点标题整行展开，再点收起。显隐用 class 控制，避免
 * display:flex/table 覆盖 [hidden]（本项目踩过的坑）。
 * ================================================================== */
.tp-fold {
  margin-top: 14px; border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); background: var(--c-surface);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.tp-fold-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 18px; border: 0; background: transparent;
  font: inherit; color: var(--c-text); text-align: left; cursor: pointer;
  transition: background 0.15s ease;
}
.tp-fold-head:hover { background: var(--c-surface-2, #f4f7fb); }
.tp-fold-head:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.tp-fold-caret {
  flex: 0 0 auto; width: 18px; text-align: center; font-size: 0.9rem;
  color: var(--c-text-3); transition: transform 0.18s ease;
}
.tp-fold.is-open .tp-fold-caret { transform: rotate(90deg); color: var(--c-primary); }
.tp-fold-ico { flex: 0 0 auto; font-size: 1.02rem; }
.tp-fold-title { flex: 0 1 auto; font-size: 1.02rem; font-weight: 700; }
.tp-fold-count {
  flex: 0 0 auto; font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3);
  padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--c-surface-2, #f2f5fa); border: 1px solid var(--c-border);
}
.tp-fold-action {
  flex: 0 0 auto; margin-left: auto;
  font-size: var(--fs-xs, 0.78rem); font-weight: 600; color: var(--c-primary);
}
.tp-fold-body { display: none; padding: 0 18px 16px; }
.tp-fold.is-open .tp-fold-body {
  display: block; padding-top: 14px; border-top: 1px solid var(--c-border);
}

/* 关联知识点：名称 + 可点链接胶囊 */
.tp-kp-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; }
.tp-kp-chip {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs, 0.78rem); text-decoration: none;
  color: var(--c-primary); background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.22); white-space: nowrap;
}
.tp-kp-chip:hover { background: rgba(59, 130, 246, 0.16); border-color: var(--c-primary); }
/* 资源链接 */
.tp-url { color: var(--c-primary); text-decoration: none; word-break: break-all; }
.tp-url:hover { text-decoration: underline; }

/* ==================================================================
 * 教师端 · 学情数据「导入数据接口」：横向三段式布局（说明 / 选择文件 / 操作）
 * 目的：单张卡占满整行，左侧说明、中间选文件、右侧操作，右侧不留空白。
 * ================================================================== */
.imp-cards { display: flex; flex-direction: column; gap: 12px; }
.imp-card-wide { padding: 16px 18px; }
.imp-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(220px, 1fr) minmax(150px, auto);
  gap: 18px; align-items: start;
}
.imp-intro { min-width: 0; }
.imp-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.02rem; font-weight: 700; color: var(--c-text); margin-bottom: 6px;
}
.imp-ico { font-size: 1.12rem; }
.imp-fields {
  margin-top: 8px; padding: 8px 12px; border-radius: var(--radius);
  background: var(--c-surface-2, #f6f8fc); border: 1px solid var(--c-border);
  font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3); line-height: 1.6;
}
.imp-fields b { color: var(--c-text-2); }

.imp-pick-col {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 12px; border-radius: var(--radius);
  background: var(--c-surface-2, #f6f8fc); border: 1px dashed var(--c-border);
}
.imp-pick-col .imp-pick { width: 100%; justify-content: center; }
.imp-pick-hint { font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3); line-height: 1.6; }
.imp-pick-col .file-list { width: 100%; margin: 0; }

.imp-do-col { display: flex; flex-direction: column; gap: 8px; }
.imp-do-col .imp-run { font-weight: 700; }
.imp-do-col .btn { width: 100%; justify-content: center; }

/* 折叠标题上的补充说明 */
.tp-fold-note { font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3); }

/* ==================================================================
 * 独立登录页（#/login）—— 整页沉浸式，留白充足（参考统一身份认证平台版式）
 * 结构：左上品牌 + 居中登录卡 + 底部版本说明
 * ================================================================== */

/* 沉浸式外壳：隐藏侧栏 / 顶栏 / 页脚，主区占满整屏 */
body.immersive .app {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "view";
}
body.immersive .topbar,
body.immersive .sidebar,
body.immersive .appfooter { display: none !important; }
body.immersive .view { padding: 0; }
/* 登录页不需要学伴悬浮球，避免遮挡与误操作 */
body.immersive .companion-fab { display: none !important; }

.lg-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2.2vh, 26px) clamp(20px, 4vw, 56px);
  overflow: hidden;
  background:
    radial-gradient(1200px 620px at 12% -10%, #dbe8ff 0%, transparent 60%),
    radial-gradient(900px 520px at 100% 110%, #d6ecff 0%, transparent 62%),
    linear-gradient(160deg, #f2f7ff 0%, #eaf2ff 48%, #eef8ff 100%);
}
.lg-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lg-glow { position: absolute; border-radius: 50%; filter: blur(80px); }
.lg-glow-a {
  width: 520px; height: 520px; left: -150px; top: -180px;
  background: radial-gradient(circle, rgba(29, 78, 216, .30), transparent 70%);
}
.lg-glow-b {
  width: 560px; height: 560px; right: -180px; bottom: -220px;
  background: radial-gradient(circle, rgba(14, 165, 233, .26), transparent 70%);
}
.lg-glow-c {
  width: 320px; height: 320px; left: 46%; top: 40%;
  background: radial-gradient(circle, rgba(56, 189, 248, .16), transparent 70%);
}

/* ---------------- 左上品牌标识 ---------------- */
.lg-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lg-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.lg-brand-icon { width: 46px; height: 46px; object-fit: contain; flex: none; }
.lg-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.lg-brand-text b {
  font-size: 1.24rem;
  letter-spacing: .04em;
  color: var(--c-primary-dark);
}
.lg-brand-text i {
  font-style: normal;
  font-size: var(--fs-xs, .78rem);
  color: var(--c-text-3);
  letter-spacing: .02em;
}
.lg-header-right {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  letter-spacing: .02em;
}

/* ---------------- 居中登录卡 ---------------- */
.lg-main {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vh, 26px) 0;
  min-height: 0;
  overflow-y: auto;
}
.lg-card {
  width: min(460px, 100%);
  flex: 0 0 auto;
  align-self: center;
  margin: auto;
  padding: clamp(20px, 2.8vh, 30px) clamp(24px, 3.2vw, 40px) clamp(18px, 2.4vh, 26px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 30px 70px -24px rgba(15, 40, 110, .34),
    0 8px 22px -12px rgba(15, 40, 110, .18);
}
.lg-card-head { text-align: center; margin-bottom: clamp(14px, 2.2vh, 22px); }
.lg-card-logo {
  display: block;
  width: min(168px, 52%);
  height: auto;
  margin: 0 auto 10px;
}
.lg-card-title {
  margin: 0 0 6px;
  font-size: 1.3rem;
  letter-spacing: .18em;
  text-indent: .18em;
  color: var(--c-primary-dark);
}
.lg-card-sub {
  margin: 0 auto;
  max-width: 34em;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-3);
}

/* 卡内表单：整体放宽间距，避免拥挤 */
.lg-card-body .login-panel,
.lg-card-body #lp-card {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  width: 100%;
}
/* 关键（踩坑）：login_panel.js 里 label 带**内联** style="flex:1 1 320px"，
   在内联优先级下会把卡片里的 label 撑到 320px 高，登录卡整体虚高到 ~891px
   （1366x768 上登录按钮被挤出视口）。内联只能用 !important 覆盖。 */
.lg-card-body label,
.lg-card-body .form-row > label,
.lg-card-body .form-row > label[style] {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
.lg-card-body .form-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.lg-card-body .form-row + .form-row { margin-top: 10px; }
.lg-card-body .seg { display: flex; width: 100%; margin-bottom: 16px; }
.lg-card-body .seg-btn { flex: 1 1 auto; padding: 8px 14px; font-size: .93rem; }
.lg-card-body .seg-sm { margin-bottom: 14px; }
.lg-card-body .seg-sm .seg-btn { padding: 6px 10px; }
.lg-card-body .form-row { gap: 10px; margin-bottom: 2px; }
.lg-card-body label { font-size: var(--fs-sm); color: var(--c-text-2); }
.lg-card-body .input { padding: 10px 12px; font-size: var(--fs-md); }
.lg-card-body .btn { padding: 9px 16px; }
.lg-card-body .btn-primary { width: 100%; }
.lg-card-body .btn-row { margin-top: 12px; }
.lg-card-body .login-qr-block { margin-top: 14px; }
.lg-card-body .login-msg { margin-top: 10px; line-height: 1.7; }
.lg-card-body .text-sm.text-muted { line-height: 1.7; }
/* 首个方式面板内的主按钮撑满，视觉更稳 */
.lg-card-body [data-lp-method="sid"] .form-row { flex-direction: column; align-items: stretch; }
.lg-card-body [data-lp-method="sid"] .btn-primary { margin-top: 4px; }

/* ---------------- 底部说明 ---------------- */
.lg-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lg-footer-line {
  margin: 0;
  font-size: var(--fs-xs, .78rem);
  line-height: 1.75;
  color: var(--c-text-3);
}
.lg-footer-dim { color: var(--c-text-3); opacity: .82; }
.lg-footer code {
  background: rgba(29, 78, 216, .09);
  color: var(--c-primary-dark);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: .94em;
}

@media (max-width: 700px) {
  .lg-page { padding: 16px 16px 22px; }
  .lg-header-right { display: none; }
  .lg-brand-text b { font-size: 1.1rem; }
  .lg-brand-icon { width: 38px; height: 38px; }
  .lg-card { padding: 24px 20px 22px; border-radius: 16px; }
  .lg-card-logo { width: min(190px, 68%); }
  .lg-card-title { font-size: 1.24rem; }
  .lg-footer-dim { display: none; }
}

/* 偏矮的笔记本屏幕（如 1366x768）：进一步压缩竖向留白，保证登录按钮在首屏内 */
@media (max-height: 800px) {
  .lg-page { padding: 12px clamp(18px, 3vw, 40px); }
  .lg-brand-icon { width: 38px; height: 38px; }
  .lg-card { padding: 18px 24px 16px; }
  .lg-card-head { margin-bottom: 12px; }
  .lg-card-logo { width: min(132px, 42%); margin-bottom: 6px; }
  .lg-card-title { font-size: 1.16rem; margin-bottom: 4px; }
  .lg-card-sub { font-size: var(--fs-xs, .78rem); line-height: 1.6; }
  .lg-card-body .seg { margin-bottom: 12px; }
  .lg-card-body .seg-sm { margin-bottom: 10px; }
  .lg-main { padding: 8px 0; }
  .lg-footer-line { font-size: .72rem; line-height: 1.6; }
}

.kb-hot-list { display: flex; flex-direction: column; gap: 8px; }
.kb-hot {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); cursor: pointer; transition: border-color .15s, background .15s;
}
.kb-hot:hover { border-color: var(--c-primary); background: var(--c-surface-2, #f6f8fc); }
.kb-hot-rank {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: #fff; font-size: .74rem; font-weight: 800;
}
.kb-hot-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kb-hot-q { font-weight: 700; font-size: .95rem; line-height: 1.5; }
.kb-hot-meta { font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3); }
.kb-hot-act { flex: 0 0 auto; }
.kb-hot-hint {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--c-border);
  font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3);
}

.kb-group { border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--c-surface); }
.kb-group + .kb-group { margin-top: 10px; }
.kb-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px dashed var(--c-border); }
.kb-group-title { font-weight: 700; }
.kb-group-kw { font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3); }
.kb-q-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.kb-q-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface-2, #f7f9fc); cursor: pointer;
}
.kb-q-row:hover { border-color: var(--c-primary); }
.kb-q-row.is-gap { background: rgba(217, 119, 6, 0.07); border-color: rgba(217, 119, 6, 0.35); }
.kb-q-text { flex: 1 1 auto; min-width: 0; font-size: .9rem; }
.kb-q-hits { flex: 0 0 auto; font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3); }
.kb-gap-hint {
  margin-top: 10px; padding: 8px 12px; border-radius: var(--radius);
  background: rgba(217, 119, 6, 0.08); border: 1px solid rgba(217, 119, 6, 0.3);
  color: #92400e;
}

/* ---------- 知识库上传 ---------- */
.kb-up-form { display: flex; flex-direction: column; gap: 10px; }
.kb-up-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kb-up-tip {
  padding: 8px 12px; border-radius: var(--radius);
  background: var(--c-surface-2, #f6f8fc); border: 1px dashed var(--c-border);
  color: var(--c-text-3);
}
.kb-doc-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border);
  font-weight: 700;
}
.kb-doc-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.kb-doc-list::-webkit-scrollbar { width: 8px; }
.kb-doc-list::-webkit-scrollbar-thumb { background: var(--c-surface-3, #d8dfe9);
  border-radius: var(--radius-pill); }
.kb-doc {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface);
}
.kb-doc:hover { border-color: var(--c-primary); }
.kb-doc-ico { flex: 0 0 auto; font-size: 1.1rem; }
.kb-doc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kb-doc-name { font-weight: 700; font-size: .94rem; }
.kb-doc-meta { font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3); }
.kb-doc-note { font-size: var(--fs-xs, 0.78rem); color: var(--c-text-2); }
.kb-doc-preview {
  font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.kb-doc-act { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

@media (max-width: 1180px) {
  .imp-row { grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); }
  .imp-do-col { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .imp-do-col .btn { width: auto; }
}
@media (max-width: 760px) {
  .imp-row { grid-template-columns: minmax(0, 1fr); }
}

/* 拖拽到"选择文件"按钮上时的高亮（拖拽只是兜底，页面不画拖拽区） */
.imp-pick.is-over { outline: 2px dashed var(--c-primary); outline-offset: 2px; }

/* 教务数据导出：可导出数据表清单 */
.exp-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.exp-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; border-radius: var(--radius);
  background: var(--c-surface-2, #f6f8fc); border: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.exp-chip b { color: var(--c-text); font-weight: 700; }
.exp-chip-num { font-size: var(--fs-xs, 0.78rem); color: var(--c-text-3); }