/* ==========================================================================
 * 知穹网 · 教育套装 · 页面级样式
 * 文件：static/edu/css/edu.css
 * 版本：v1.5（2026-10-24 · T-D06-PLAYER-MOBILE：375 档点播播放页小屏补齐，
 *                  播放头部 / 状态条 / 底栏按钮极限压缩；不改既有 §1-§9 与断点口径，
 *                  全文件仍零 #RRGGBB）
 *          v1.4（2026-10-23 · T-D04-VIDEO-PLAYER：新增 §9 点播线，资源网格 / 播放页舞台 /
 *                  取令牌状态条；不改既有 §1-§8 与断点口径，全文件仍零 #RRGGBB）
 *          v1.3（T-D03-EDU-EVENT-UI：activity 页内联 style 与 :root 全部
 *                  并入本文件（§8 活动线），断点对齐 site.css 的 980 / 640 / 375，
 *                  补 .zai-progress-fill 基础形态；全文件仍零 #RRGGBB）
 *          v1.2（T-D02-EDU-HEX：room / window 两页内联 CSS 与硬编码色值清零）
 *
 * 加载顺序（模板 <head>，四段固定）：
 *   <link rel="stylesheet" href="/static/zai/ui/tokens.css?v=ZAI_CSS_VER">
 *   <link rel="stylesheet" href="/static/zai/ui/components.css?v=ZAI_CSS_VER">
 *   <link rel="stylesheet" href="/static/zai/ui/site.css?v=ZAI_CSS_VER">
 *   <link rel="stylesheet" href="/static/edu/css/edu.css?v=ZAI_CSS_VER">
 *
 * 硬约束（与 tokens.css 头部约定一致）：
 *   · 只许 var(--zai-*) 取色/取间距，不许重定义 :root，不许写死 #RRGGBB；
 *   · 通用组件（按钮/卡片/表单/空态/徽章/进度条）一律复用 components.css，
 *     本文件只放「教育线独有、components.css 里没有」的页面级补充；
 *   · 教育线沿用全站主色（--zai-color-primary），不做局部覆盖。
 *
 * 分层：
 *   1. 壳层补充（.zai-wrap.is-edu）
 *   2. 通用页面件（标题 / 胶囊行 / 简介）
 *   3. 课程线（列表 .zai-course-item · 详情 .zai-chapter / .zai-lesson-row）
 *   4. 作业线（.zai-exam-*）
 *   5. 播放器（.zai-player-*）
 *   6. 学习小组线（.zai-room-* / 会话区 .zai-chat-*）
 *   7. 答疑窗口（window.php，复用会话区）
 *   8. 活动线（event.php：活动卡片 / 场次报名行）
 *   9. 点播线（video_list / video_player：资源网格 · 播放页 · 取令牌状态条）
 *  10. 响应式（980 / 640 / 375，与 site.css 同档）
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. 壳层补充
 *    宽度容器交给 .zai-container，页脚交给 site.css 的 .zai-footer*，
 *    这里只压掉 .zai-main 的顶距（容器自己带 padding）
 * ------------------------------------------------------------------------ */
.zai-wrap.is-edu .zai-main {
  flex: 1;            /* body 是 flex column，主区撑开才能把 footer 顶到底 */
  padding-top: 0;
}

.zai-wrap.is-edu .zai-page-intro {
  margin-bottom: var(--zai-space-6);
}

.zai-wrap.is-edu .zai-page-intro p {
  margin: var(--zai-space-2) 0 0;
  color: var(--zai-text-secondary);
  max-width: 720px;
}

/* 面包屑在内容区顶部留一点呼吸 */
.zai-wrap.is-edu .zai-breadcrumb {
  margin-bottom: var(--zai-space-4);
}

/* --------------------------------------------------------------------------
 * 2. 通用页面件
 * ------------------------------------------------------------------------ */

/* 页内标题（spec 区块树里的 zai-h1 / zai-h2） */
.zai-wrap.is-edu .zai-h1 {
  font-size: var(--zai-font-h2);
  line-height: 1.35;
  font-weight: 700;
  color: var(--zai-text-primary);
  margin: 0;
}

.zai-wrap.is-edu .zai-h2 {
  font-size: var(--zai-font-h3);
  line-height: 1.4;
  font-weight: 600;
  color: var(--zai-text-primary);
  margin: 0;
}

/* 标签 / 徽章横排（讲师、章数、时长、价格） */
.zai-wrap.is-edu .zai-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zai-space-2);
  margin-top: var(--zai-space-3);
}

/* 课程简介 / 段落摘要 */
.zai-wrap.is-edu .zai-summary {
  margin: var(--zai-space-4) 0 0;
  color: var(--zai-text-secondary);
  line-height: 1.8;
}

/* 页面内的弱化说明文字 */
.zai-wrap.is-edu .zai-meta {
  font-size: var(--zai-font-caption);
  color: var(--zai-text-muted);
}

/* --------------------------------------------------------------------------
 * 3. 课程线
 * ------------------------------------------------------------------------ */

/* ---- 3.1 列表卡片（.zai-card 之上只补封面与拉伸） ---- */
.zai-wrap.is-edu .zai-course-item {
  display: flex;
  flex-direction: column;
  gap: var(--zai-space-3);
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.zai-wrap.is-edu a.zai-course-item:hover {
  border-color: var(--zai-color-primary);
  transform: translateY(-2px);
  color: inherit;
}

/* 封面占位：无图时用品牌浅色渐变兜底，避免白块 */
.zai-wrap.is-edu .zai-course-cover {
  aspect-ratio: 16 / 9;
  border-radius: var(--zai-radius-md);
  background:
    linear-gradient(
      135deg,
      var(--zai-color-primary-soft) 0%,
      var(--zai-neutral-100) 100%
    );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  color: var(--zai-color-primary);
  font-size: var(--zai-font-caption);
  letter-spacing: .08em;
}

.zai-wrap.is-edu .zai-course-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 分类瓦片（前台课程列表）：封面 4:3，无封面图时居中显示「课程」占位 */
.zai-wrap.is-edu .zai-cat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zai-space-3);
  margin-bottom: var(--zai-space-5);
}

.zai-wrap.is-edu .zai-cat-tile {
  width: 132px;
  text-align: center;
  text-decoration: none;
  color: var(--zai-text-muted);
  transition: color var(--zai-duration-base) var(--zai-ease-out);
}

.zai-wrap.is-edu .zai-cat-tile.is-active {
  color: var(--zai-color-primary);
}

.zai-wrap.is-edu .zai-cat-tile.is-active .zai-cat-cover {
  outline: 2px solid var(--zai-color-primary);
  outline-offset: 2px;
}

.zai-wrap.is-edu .zai-cat-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--zai-radius-md);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      var(--zai-color-primary-soft) 0%,
      var(--zai-neutral-100) 100%
    );
  color: var(--zai-color-primary);
  font-size: var(--zai-font-body-lg);
  letter-spacing: .12em;
}

.zai-wrap.is-edu .zai-cat-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zai-wrap.is-edu .zai-cat-cover--all {
  background: var(--zai-neutral-100);
  color: var(--zai-text-muted);
}

.zai-wrap.is-edu .zai-cat-name {
  display: block;
  margin-top: var(--zai-space-2);
  font-size: var(--zai-font-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zai-wrap.is-edu .zai-course-item .zai-card-title {
  margin: 0;
  font-size: var(--zai-font-body-lg);
  line-height: 1.5;
  transition: color var(--zai-duration-base) var(--zai-ease-out);
}

.zai-wrap.is-edu .zai-course-item:hover .zai-card-title {
  color: var(--zai-color-primary);
}

/* 讲师 · 浏览数 · 价格 行 */
.zai-wrap.is-edu .zai-course-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zai-space-2);
  font-size: var(--zai-font-caption);
  color: var(--zai-text-muted);
}

/* 价格用强调色，与主色区分开 */
.zai-wrap.is-edu .zai-price {
  color: var(--zai-color-accent);
  font-weight: 600;
}

/* 网格里的卡片是并列项：抹掉 components.css 里 .zai-card + .zai-card 的纵向间距，
 * 否则网格第二列起会被往下顶 24px */
.zai-wrap.is-edu .zai-course-grid .zai-card + .zai-card {
  margin-top: 0;
}

/* ---- 3.2 详情页布局：正文 + 侧栏 ---- */
.zai-wrap.is-edu .zai-course-layout {
  align-items: start;
}

.zai-wrap.is-edu .zai-aside {
  display: flex;
  flex-direction: column;
  gap: var(--zai-space-4);
  position: sticky;
  top: calc(var(--zai-header-h) + var(--zai-space-4));
}

/* 侧栏统计列表 */
.zai-wrap.is-edu .zai-stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zai-wrap.is-edu .zai-stat-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zai-space-3);
  padding: var(--zai-space-2) 0;
  border-bottom: 1px solid var(--zai-border);
  font-size: var(--zai-font-caption);
  color: var(--zai-text-secondary);
}

.zai-wrap.is-edu .zai-stat-list li:last-child {
  border-bottom: 0;
}

.zai-wrap.is-edu .zai-stat-list b {
  color: var(--zai-text-primary);
  font-weight: 600;
}

/* ---- 3.3 章节 / 课时行 ---- */
.zai-wrap.is-edu .zai-chapter {
  margin-top: var(--zai-space-6);
}

.zai-wrap.is-edu .zai-chapter:first-of-type {
  margin-top: 0;
}

.zai-wrap.is-edu .zai-chapter-title {
  display: flex;
  align-items: center;
  gap: var(--zai-space-2);
  margin: 0 0 var(--zai-space-2);
  padding-left: var(--zai-space-3);
  border-left: 3px solid var(--zai-color-primary);
  font-size: var(--zai-font-body-lg);
  font-weight: 600;
  line-height: 1.4;
  color: var(--zai-text-primary);
}

.zai-wrap.is-edu .zai-lesson-list {
  list-style: none;
  margin: var(--zai-space-3) 0 0;
  padding: 0;
  border: 1px solid var(--zai-border);
  border-radius: var(--zai-radius-md);
  overflow: hidden;
  background: var(--zai-surface);
}

.zai-wrap.is-edu .zai-lesson-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zai-space-3);
  padding: var(--zai-space-3) var(--zai-space-4);
  border-bottom: 1px solid var(--zai-border);
  font-size: var(--zai-font-body);
  transition: background var(--zai-duration-fast) var(--zai-ease-out);
}

.zai-wrap.is-edu .zai-lesson-row:last-child {
  border-bottom: 0;
}

.zai-wrap.is-edu .zai-lesson-row:hover {
  background: var(--zai-neutral-50);
}

.zai-wrap.is-edu .zai-lesson-title {
  display: flex;
  align-items: center;
  gap: var(--zai-space-2);
  min-width: 0;
  color: var(--zai-text-primary);
}

.zai-wrap.is-edu .zai-lesson-row .zai-meta {
  flex-shrink: 0;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * 4. 作业 / 考试线（spec 2.3 区块树）
 * ------------------------------------------------------------------------ */

/* 卷首信息条 */
.zai-wrap.is-edu .zai-exam-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zai-space-3);
}

.zai-wrap.is-edu .zai-exam-head .zai-meta {
  margin: 0;
}

/* 单题卡片：题间留缝 */
.zai-wrap.is-edu .zai-exam-question + .zai-exam-question {
  margin-top: var(--zai-space-4);
}

.zai-wrap.is-edu .zai-exam-stem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--zai-space-2);
  margin: 0 0 var(--zai-space-4);
  font-size: var(--zai-font-body-lg);
  font-weight: 600;
  line-height: 1.6;
  color: var(--zai-text-primary);
}

.zai-wrap.is-edu .zai-exam-stem .zai-meta {
  font-weight: 400;
}

/* 选项列表：每项用 .zai-check 组件，这里只控制纵向排列与悬停 */
.zai-wrap.is-edu .zai-exam-options {
  display: flex;
  flex-direction: column;
  gap: var(--zai-space-2);
}

.zai-wrap.is-edu .zai-exam-options .zai-check {
  padding: var(--zai-space-2) var(--zai-space-3);
  border: 1px solid var(--zai-border);
  border-radius: var(--zai-radius-md);
  transition:
    border-color var(--zai-duration-fast) var(--zai-ease-out),
    background var(--zai-duration-fast) var(--zai-ease-out);
}

.zai-wrap.is-edu .zai-exam-options .zai-check:hover {
  border-color: var(--zai-color-primary);
  background: var(--zai-color-primary-soft);
}

/* 填空题 / 主观题 */
.zai-wrap.is-edu .zai-exam-blank {
  max-width: 420px;
}

.zai-wrap.is-edu .zai-exam-essay {
  min-height: 110px;
}

/* 底部提交栏：贴底但不遮挡内容 */
.zai-wrap.is-edu .zai-exam-footer {
  position: sticky;
  bottom: 0;
  z-index: var(--zai-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zai-space-3);
  margin-top: var(--zai-space-6);
  padding: var(--zai-space-3) var(--zai-space-4);
  background: var(--zai-surface);
  border: 1px solid var(--zai-border);
  border-radius: var(--zai-radius-lg);
  box-shadow: var(--zai-shadow-md);
}

.zai-wrap.is-edu .zai-exam-footer .zai-meta {
  margin: 0;
}

/* 底栏里的题号跳转：清掉分页组件的上边距，让锚点长得像按钮 */
.zai-wrap.is-edu .zai-exam-footer .zai-pagination {
  margin-top: 0;
  justify-content: flex-start;
}

.zai-wrap.is-edu .zai-exam-footer .zai-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: var(--zai-font-caption);
}

/* 上下题导航 */
.zai-wrap.is-edu .zai-exam-nav {
  display: flex;
  align-items: center;
  gap: var(--zai-space-2);
  margin-top: var(--zai-space-4);
}

/* --------------------------------------------------------------------------
 * 5. 播放器（spec 2.4 区块树）
 * ------------------------------------------------------------------------ */

/* 播放舞台：黑底 + 16:9，第三方 video/iframe 铺满 */
.zai-wrap.is-edu .zai-player-frame,
.zai-wrap.is-edu .zai-player-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--zai-radius-lg);
  overflow: hidden;
  background: var(--zai-neutral-900);
}

.zai-wrap.is-edu .zai-player-stage video,
.zai-wrap.is-edu .zai-player-stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.zai-wrap.is-edu .zai-player-stage .zai-empty {
  border: 0;
  background: transparent;
  color: var(--zai-neutral-300);
}

/* 播放链路 / 水印模式等调试信息 */
.zai-wrap.is-edu .zai-chain {
  margin: var(--zai-space-2) 0 0;
  font-size: var(--zai-font-caption);
  color: var(--zai-text-muted);
  word-break: break-all;
}

.zai-wrap.is-edu .zai-chain code {
  display: inline-block;
  margin: 0 var(--zai-space-2) var(--zai-space-1) 0;
  padding: 0 var(--zai-space-2);
  border-radius: var(--zai-radius-sm);
  background: var(--zai-color-primary-soft);
  color: var(--zai-color-primary);
  font-family: var(--zai-font-mono);
}

/* 课时信息条 */
.zai-wrap.is-edu .zai-lesson-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zai-space-2);
  margin-top: var(--zai-space-3);
}

/* --------------------------------------------------------------------------
 * 6. 学习小组线（room.php：组队列表 + 群会话）
 *    气泡/会话区是全站唯一没有现成组件的形态，命名统一 .zai-chat-*，
 *    答疑窗口（window.php）复用同一套，不再各自写一份。
 * ------------------------------------------------------------------------ */

/* 操作结果提示与首屏留白 */
.zai-wrap.is-edu .zai-room-flash {
  margin-bottom: var(--zai-space-4);
}

/* ---- 6.1 建队 / 入队表单（字段横排，窄屏自动换行） ---- */
.zai-wrap.is-edu .zai-room-forms {
  margin-bottom: var(--zai-space-6);
}

/* 网格里的并列卡片：抵消 components.css 的 .zai-card + .zai-card 上边距 */
.zai-wrap.is-edu .zai-grid > .zai-card + .zai-card {
  margin-top: 0;
}

.zai-wrap.is-edu .zai-room-forms .zai-card {
  display: flex;
  flex-direction: column;
}

.zai-wrap.is-edu .zai-room-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--zai-space-3);
}

.zai-wrap.is-edu .zai-room-form .zai-field {
  margin-bottom: 0;
  min-width: 150px;
  flex: 1 1 150px;
}

.zai-wrap.is-edu .zai-room-form .zai-room-form-wide {
  flex: 1 1 100%;
  min-width: 100%;
}

.zai-wrap.is-edu .zai-room-form .zai-room-form-num {
  flex: 0 0 auto;
  min-width: 0;
}

.zai-wrap.is-edu .zai-room-form .zai-room-form-num .zai-input {
  width: 110px;
}

.zai-wrap.is-edu .zai-room-form-submit {
  flex: 0 0 auto;
}

.zai-wrap.is-edu .zai-room-hint {
  margin: var(--zai-space-3) 0 0;
  font-size: var(--zai-font-caption);
  line-height: 1.7;
}

/* ---- 6.2 我的组队卡片 ---- */
.zai-wrap.is-edu .zai-room-team {
  padding: var(--zai-space-4);
}

.zai-wrap.is-edu .zai-room-team-title {
  margin: 0 0 var(--zai-space-2);
  font-size: var(--zai-font-body-lg);
  font-weight: 600;
  line-height: 1.4;
}

.zai-wrap.is-edu .zai-room-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zai-space-2);
  font-size: var(--zai-font-caption);
  color: var(--zai-text-muted);
}

/* ---- 6.3 详情页头部 / 达标进度 ---- */
.zai-wrap.is-edu .zai-room-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zai-space-3);
}

.zai-wrap.is-edu .zai-room-progress {
  margin-top: var(--zai-space-4);
}

/* 达标进度条：轨道复用 components.css 的 .zai-progress，填充宽度的唯一来源是
 * 行内 style（percent 数据驱动，无法静态化）。这里补基础形态兜底——percent 缺失
 * 时宽度为 0 而不是撑满，过渡曲线也与全站一致。 */
.zai-wrap.is-edu .zai-room-progress .zai-progress-fill {
  width: 0;
  min-width: 0;
  transition: width var(--zai-duration-base) var(--zai-ease-out);
}

.zai-wrap.is-edu .zai-room-goal {
  margin-top: var(--zai-space-2);
}

.zai-wrap.is-edu .zai-room-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zai-space-4);
  margin-top: var(--zai-space-4);
}

.zai-wrap.is-edu .zai-room-partners {
  margin-top: var(--zai-space-4);
}

.zai-wrap.is-edu .zai-room-partner:hover {
  border-color: var(--zai-color-primary);
  color: var(--zai-color-primary);
}

/* ---- 6.4 会话区（room / window 共用） ---- */
.zai-wrap.is-edu .zai-chat {
  display: flex;
  flex-direction: column;
  gap: var(--zai-space-3);
  max-height: 460px;
  overflow-y: auto;
  padding: var(--zai-space-3);
  border: 1px solid var(--zai-border);
  border-radius: var(--zai-radius-md);
  background: var(--zai-surface-sunken);
}

.zai-wrap.is-edu .zai-chat-msg {
  padding: var(--zai-space-2) var(--zai-space-3);
  border: 1px solid var(--zai-border);
  border-radius: var(--zai-radius-md);
  background: var(--zai-surface);
}

.zai-wrap.is-edu .zai-chat-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zai-space-1);
  margin-bottom: 3px;
  font-size: var(--zai-font-caption);
  color: var(--zai-text-muted);
}

.zai-wrap.is-edu .zai-chat-text {
  line-height: 1.7;
  color: var(--zai-text-primary);
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* AI 助教：主色描边 + 浅底，一眼能和成员发言分开 */
.zai-wrap.is-edu .zai-chat-msg.is-ai {
  border-color: var(--zai-color-primary);
  background: var(--zai-color-primary-soft);
}

.zai-wrap.is-edu .zai-chat-msg.is-ai .zai-chat-who {
  color: var(--zai-color-primary);
  font-weight: 600;
}

/* 系统提示：灰底虚线，不抢注意力 */
.zai-wrap.is-edu .zai-chat-msg.is-system {
  border-style: dashed;
  background: var(--zai-neutral-100);
}

/* 课程通知：绿色系，与成功态保持一致语义 */
.zai-wrap.is-edu .zai-chat-msg.is-course {
  border-color: var(--zai-color-success);
  background: var(--zai-color-success-soft);
}

.zai-wrap.is-edu .zai-chat-form {
  margin-top: var(--zai-space-3);
}

.zai-wrap.is-edu .zai-chat-form .zai-textarea {
  min-height: 76px;
  resize: vertical;
}

.zai-wrap.is-edu .zai-chat-send {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--zai-space-2);
}

/* --------------------------------------------------------------------------
 * 7. 答疑窗口（window.php）
 *    与群会话同规格，只把正文收窄（.zai-container--narrow）并让提问框更高
 * ------------------------------------------------------------------------ */
.zai-wrap.is-edu .zai-container--narrow .zai-chat {
  max-height: 480px;
}

.zai-wrap.is-edu .zai-container--narrow .zai-chat-form .zai-textarea {
  min-height: 80px;
}

/* --------------------------------------------------------------------------
 * 8. 活动线（event.php：活动列表 + 场次报名）
 *    .zai-card / .zai-badge / .zai-empty / .zai-btn 全部复用 components.css，
 *    这里只补「场次行」与「活动卡片」两种页面件。
 * ------------------------------------------------------------------------ */

/* ---- 8.1 活动卡片（列表项 / 我报名的活动，网格内并列） ---- */
.zai-wrap.is-edu .zai-event-item {
  display: flex;
  flex-direction: column;
  gap: var(--zai-space-2);
  height: 100%;
}

.zai-wrap.is-edu .zai-event-item .zai-card-title {
  margin: 0;
  font-size: var(--zai-font-body-lg);
  line-height: 1.5;
}

/* 标题即入口：hover 用主色提示可点 */
.zai-wrap.is-edu .zai-event-item .zai-card-title a {
  color: var(--zai-text-primary);
  transition: color var(--zai-duration-fast) var(--zai-ease-out);
}

.zai-wrap.is-edu .zai-event-item .zai-card-title a:hover {
  color: var(--zai-color-primary);
}

/* ---- 8.2 场次行：左信息 / 右操作 ---- */
.zai-wrap.is-edu .zai-event-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zai-space-4);
  padding: var(--zai-space-3) var(--zai-space-4);
  border: 1px solid var(--zai-border);
  border-radius: var(--zai-radius-md);
  background: var(--zai-surface);
}

.zai-wrap.is-edu .zai-event-slot + .zai-event-slot {
  margin-top: var(--zai-space-3);
}

.zai-wrap.is-edu .zai-event-slot-main {
  display: flex;
  flex-direction: column;
  gap: var(--zai-space-1);
  min-width: 0;
}

.zai-wrap.is-edu .zai-event-slot-title {
  font-size: var(--zai-font-body);
  font-weight: 600;
  line-height: 1.5;
  color: var(--zai-text-primary);
}

/* 时间 / 名额 / 状态徽章横排，窄屏自动换行 */
.zai-wrap.is-edu .zai-event-slot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zai-space-2);
  font-size: var(--zai-font-caption);
  color: var(--zai-text-muted);
}

.zai-wrap.is-edu .zai-event-slot-action {
  flex: 0 0 auto;
}

.zai-wrap.is-edu .zai-event-slot-action form {
  margin: 0;
}

/* --------------------------------------------------------------------------
 * 9. 点播线（video_list.php / video_player.php，T-D04-VIDEO-PLAYER）
 *     复用 §5 的 .zai-player-stage 做 16:9 黑底舞台，DPlayer 由 JS 挂进去；
 *     类名统一 .zai-video-*，取色/间距全部走 tokens，零 #RRGGBB。
 * ------------------------------------------------------------------------ */

/* 9.1 列表工具条：左计数、右返回 */
.zai-wrap.is-edu .zai-video-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zai-space-3);
  flex-wrap: wrap;
}

/* 9.2 资源网格：auto-fill 自适应，卡片等高 */
.zai-wrap.is-edu .zai-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--zai-space-4);
  margin-bottom: var(--zai-space-6);
}

.zai-wrap.is-edu .zai-video-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* 封面 16:9，无封面时用浅底 + 「点播」占位 */
.zai-wrap.is-edu .zai-video-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--zai-surface-sunken);
  color: var(--zai-text-muted);
  text-decoration: none;
}

.zai-wrap.is-edu .zai-video-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zai-wrap.is-edu .zai-video-cover-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--zai-font-body-lg);
  letter-spacing: 0.15em;
  color: var(--zai-text-muted);
}

/* 时长角标压在封面右下 */
.zai-wrap.is-edu .zai-video-duration {
  position: absolute;
  right: var(--zai-space-2);
  bottom: var(--zai-space-2);
  padding: 2px var(--zai-space-2);
  border-radius: var(--zai-radius-full);
  background: var(--zai-neutral-900);
  color: var(--zai-neutral-50);
  font-size: var(--zai-font-caption);
  font-variant-numeric: tabular-nums;
}

.zai-wrap.is-edu .zai-video-body {
  display: flex;
  flex-direction: column;
  gap: var(--zai-space-1);
  padding: var(--zai-space-3) var(--zai-space-4) var(--zai-space-4);
}

.zai-wrap.is-edu .zai-video-title {
  margin: 0;
  font-size: var(--zai-font-body-lg);
  line-height: 1.5;
  font-weight: 600;
}

.zai-wrap.is-edu .zai-video-title a {
  color: var(--zai-text-primary);
  text-decoration: none;
}

.zai-wrap.is-edu .zai-video-title a:hover {
  color: var(--zai-color-primary);
}

/* 标题两行截断，卡片高度不被长标题拉歪 */
.zai-wrap.is-edu .zai-video-sub {
  margin: 0;
  font-size: var(--zai-font-caption);
  color: var(--zai-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zai-wrap.is-edu .zai-video-meta {
  display: flex;
  align-items: center;
  gap: var(--zai-space-2);
  flex-wrap: wrap;
  margin-top: var(--zai-space-1);
}

/* 9.3 播放页：舞台内的占位说明 / DPlayer 铺满 / 原生 video 兜底 */
.zai-wrap.is-edu .zai-video-stage {
  position: relative;
}

.zai-wrap.is-edu .zai-video-stage .dplayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.zai-wrap.is-edu .zai-video-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zai-wrap.is-edu .zai-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--zai-space-2);
  padding: var(--zai-space-4);
  text-align: center;
  color: var(--zai-neutral-200);
}

.zai-wrap.is-edu .zai-video-placeholder h4 {
  margin: 0;
  font-size: var(--zai-font-body-lg);
  color: var(--zai-neutral-50);
}

.zai-wrap.is-edu .zai-video-placeholder p {
  margin: 0;
  max-width: 560px;
  font-size: var(--zai-font-caption);
  line-height: 1.7;
  color: var(--zai-neutral-300);
}

/* 取令牌状态条：借用 .zai-alert 配色，只补布局与 hidden 生效 */
.zai-wrap.is-edu .zai-video-status {
  display: flex;
  align-items: center;
  gap: var(--zai-space-3);
  flex-wrap: wrap;
  margin-top: var(--zai-space-3);
}

.zai-wrap.is-edu .zai-video-status[hidden] {
  display: none;
}

.zai-wrap.is-edu .zai-video-login {
  margin-left: auto;
}

/* 9.4 播放页头部与「接着看」列表 */
.zai-wrap.is-edu .zai-video-head .zai-h1 {
  margin-bottom: var(--zai-space-2);
}

.zai-wrap.is-edu .zai-video-related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--zai-space-2);
}

.zai-wrap.is-edu .zai-video-related li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zai-space-2);
  padding: var(--zai-space-2) var(--zai-space-3);
  border: 1px solid var(--zai-border);
  border-radius: var(--zai-radius-md);
}

.zai-wrap.is-edu .zai-video-related a {
  color: var(--zai-text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zai-wrap.is-edu .zai-video-related a:hover {
  color: var(--zai-color-primary);
}

/* --------------------------------------------------------------------------
 * 10. 响应式
 *    断点与 site.css / components.css 同档：980（两栏塌一栏）/ 640（单列）/
 *    375（极限压缩），不再自造 960 / 720。
 * ------------------------------------------------------------------------ */

/* 980px 以下：详情页两栏塌成一栏，侧栏不再吸顶 */
@media (max-width: 980px) {
  .zai-wrap.is-edu .zai-course-layout {
    grid-template-columns: 1fr;
  }

  .zai-wrap.is-edu .zai-aside {
    position: static;
    top: auto;
  }
}

/* 640px 以下：卡片单列，标题降级，底栏与场次行竖排 */
@media (max-width: 640px) {
  .zai-wrap.is-edu .zai-course-grid {
    grid-template-columns: 1fr;
  }

  .zai-wrap.is-edu .zai-h1 {
    font-size: var(--zai-font-h3);
  }

  .zai-wrap.is-edu .zai-exam-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .zai-wrap.is-edu .zai-exam-footer .zai-btn {
    width: 100%;
  }

  .zai-wrap.is-edu .zai-lesson-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--zai-space-1);
  }

  /* 建队 / 入队表单：窄屏一律单列，数字框不再定宽 */
  .zai-wrap.is-edu .zai-room-form .zai-field,
  .zai-wrap.is-edu .zai-room-form .zai-room-form-num {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .zai-wrap.is-edu .zai-room-form .zai-room-form-num .zai-input {
    width: 100%;
  }

  .zai-wrap.is-edu .zai-room-form-submit,
  .zai-wrap.is-edu .zai-room-form-submit .zai-btn {
    width: 100%;
  }

  /* 组队详情头部与操作条竖排 */
  .zai-wrap.is-edu .zai-room-head,
  .zai-wrap.is-edu .zai-room-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--zai-space-2);
  }

  /* 活动场次行：信息在上、按钮在下，按钮占满一行更好点 */
  .zai-wrap.is-edu .zai-event-slot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--zai-space-2);
  }

  .zai-wrap.is-edu .zai-event-slot-action .zai-btn {
    width: 100%;
  }

  /* 点播：资源网格与「接着看」一律单列，状态条改竖排（按钮不再靠右） */
  .zai-wrap.is-edu .zai-video-grid,
  .zai-wrap.is-edu .zai-video-related {
    grid-template-columns: 1fr;
  }

  .zai-wrap.is-edu .zai-video-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .zai-wrap.is-edu .zai-video-login {
    margin-left: 0;
  }

  .zai-wrap.is-edu .zai-video-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 375px 以下：极限压缩（与 site.css 同档），只收间距/字号，不藏功能 */
@media (max-width: 375px) {
  .zai-wrap.is-edu .zai-event-slot {
    padding: var(--zai-space-2) var(--zai-space-3);
  }

  .zai-wrap.is-edu .zai-event-slot-title {
    font-size: var(--zai-font-caption);
  }

  /* 会话区在小屏上让位给正文，避免一屏只剩气泡 */
  .zai-wrap.is-edu .zai-chat {
    max-height: 320px;
    padding: var(--zai-space-2);
  }

  .zai-wrap.is-edu .zai-h1 {
    font-size: var(--zai-font-body-lg);
  }

  /* 点播播放页小屏（T-D06-PLAYER-MOBILE）：头部收间距、状态条降字号，
     「去登录 / 重新获取凭证」与底栏按钮占满一行，不再与文案挤在一行 */
  .zai-wrap.is-edu .zai-video-head {
    padding: var(--zai-space-3);
  }

  .zai-wrap.is-edu .zai-video-status {
    font-size: var(--zai-font-caption);
  }

  .zai-wrap.is-edu .zai-video-status .zai-btn {
    width: 100%;
  }

  .zai-wrap.is-edu .zai-card-footer {
    align-items: stretch;
    flex-direction: column;
    gap: var(--zai-space-2);
  }

  .zai-wrap.is-edu .zai-card-footer .zai-btn {
    width: 100%;
  }
}

/* 五档对齐补档：reduced-motion + print */
@media (prefers-reduced-motion: reduce) {
  .zai-wrap.is-edu *, .zai-wrap.is-edu *::before, .zai-wrap.is-edu *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
@media print {
  .zai-wrap.is-edu .zai-header,
  .zai-wrap.is-edu .zai-footer,
  .zai-wrap.is-edu .zai-actions {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   T-D08 我的学习 / 作业批改：状态标签语义色（已批=成功底，退回=警示底）
   取色只走 var(--zai-*)，保持全文件零 #RRGGBB。
   -------------------------------------------------------------------------- */
.zai-wrap.is-edu .zai-tag-ok {
  background: var(--zai-color-success-soft);
  color: var(--zai-color-success);
  border-color: transparent;
}
.zai-wrap.is-edu .zai-tag-warn {
  background: var(--zai-color-warning-soft);
  color: var(--zai-color-warning);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   P7 播放页嵌入讨论区：左视频右讨论（桌面 ≥1024px 两栏；窄屏上下堆叠）
   取色只走 var(--zai-*)，保持全文件零 #RRGGBB。
   -------------------------------------------------------------------------- */
.zai-wrap.is-edu .zai-course-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--zai-space-4);
  align-items: start;
  margin-bottom: var(--zai-space-4);
}
.zai-wrap.is-edu .zai-course-left {
  min-width: 0;
}
.zai-wrap.is-edu .zai-course-side {
  min-width: 0;
}
.zai-wrap.is-edu .zai-forum-card {
  display: flex;
  flex-direction: column;
  background: var(--zai-surface);
  border: 1px solid var(--zai-border);
  border-radius: var(--zai-radius-lg);
  overflow: hidden;
  height: 560px;
}
.zai-wrap.is-edu .zai-forum-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zai-space-2);
  padding: var(--zai-space-2) var(--zai-space-3);
  border-bottom: 1px solid var(--zai-border);
}
.zai-wrap.is-edu .zai-forum-hd h2 {
  margin: 0;
  font-size: var(--zai-font-body);
  font-weight: 600;
}
.zai-wrap.is-edu .zai-forum-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: var(--zai-surface);
}
.zai-wrap.is-edu .zai-forum-empty {
  margin: 0;
  padding: var(--zai-space-6);
}

@media (max-width: 1023px) {
  .zai-wrap.is-edu .zai-course-layout {
    grid-template-columns: 1fr;
  }
  .zai-wrap.is-edu .zai-forum-card {
    height: 480px;
  }
}

/* P7.1 课时资料弹窗：播放页内嵌查看，不离开播放页、不中断视频播放 */
.zai-wrap.is-edu .zai-article-modal .zai-modal-dialog {
  width: 860px;
  max-width: 96vw;
  height: 82vh;
}
.zai-wrap.is-edu .zai-article-modal .zai-modal-body {
  padding: 0;
  overflow: hidden;
}
.zai-wrap.is-edu .zai-article-frame {
  width: 100%;
  height: 100%;
  border: 0;
}

/* 课时资料弹窗：放大/还原（⤢ 按钮，is-max 时铺满视口） */
.zai-wrap.is-edu .zai-article-modal .zai-modal-max {
  margin-left: auto;
  margin-right: 6px;
  border: 0;
  background: transparent;
  color: var(--zai-text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.zai-wrap.is-edu .zai-article-modal .zai-modal-max:hover {
  color: var(--zai-color-primary);
  background: var(--zai-surface-sunken);
}
.zai-wrap.is-edu .zai-article-modal.is-max .zai-modal-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
}
.zai-wrap.is-edu .zai-article-modal.is-max .zai-modal-header {
  padding-top: max(10px, env(safe-area-inset-top, 0px));
}