/* ══════════════════════════════════════════════════════════════════════
   邹老师教务 · 电脑端  设计系统  v2（2026-10-14 重做）
   ──────────────────────────────────────────────────────────────────────
   ★ 老师要求：「各个按钮的大小、它们的布局，都需要用心，而不是随意堆砌」
   ★ 依据（已查规范 ✓）：
     · **8pt 网格**（Google Material / Apple HIG 共同标准）
       ⇒ 间距只用 4 / 8 / 12 / 16 / 24 / 32 / 48 ✗ 绝不出现 5 7 9 10 15 23 ✓
     · **控件高度按 8 的倍数**：28 / 32 / 36 / 44 ✓（规范建议 24/32/40 ✓）
     · **字号阶梯**：12 / 13 / 14 / 16 / 18 / 20 ✓
     · **行高 ＝ 字号 + 8** ✓
     · **表格行高 48**（规范给 36/40/48/60 ⇒ 取 48 ⇒ 「不拥挤」✓ 老师明令）
     · **数字一律 `tabular-nums`** ✗ 等宽 ⇒ 财务/人数列**上下对齐** ✓✓
     · **语义色只用在「状态点 / 徽标文字」** ✗ 背景保持中性 ✓（久看不累 ✓）
     · **按钮只有 3 类**：主（填充）/ 次（描边）/ 文（纯文字）✓ 绝不堆砌 ✓
     · 侧栏 224px、顶栏 64px（均 8 的倍数 ✓ 规范建议 200+8n ✓）
   ★ 配色沿用小程序端（老师已熟悉）：主色 #0F6E56 ✓
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 主色（与小程序端一致 ✓ 老师一眼认得） ── */
  --brand:    #0F6E56;
  --brand-d:  #0A5342;   /* hover / active */
  --brand-l:  #E8F5EF;   /* 浅底 */
  --brand-l2: #F2FAF6;   /* 更浅（行 hover） */

  /* ── 中性（后台的主角 ✗ 不抢注意力 ✓） ── */
  --bg:    #F4F6F5;
  --card:  #FFFFFF;
  --line:  #E4EAE7;      /* 常规描边 */
  --line2: #E9EEEC;      /* 表格行线（★ 截图复验：原来 #EEF2F0 太淡 ⇒ 行看不清 ✓） */
  --ink:   #1F2B26;      /* 主文字 */
  --ink2:  #5B6B64;      /* 次要文字 */
  --ink3:  #8B968F;      /* 提示文字 */

  /* ── 语义（只用文字/点，不用大块背景 ✓） ── */
  --ok:     #0F6E56;  --ok-l:     #E8F5EF;
  --warn:   #9A6A00;  --warn-l:   #FCF3E2;
  --danger: #C0392B;  --danger-l: #FBEDEB;
  --info:   #2A5C8A;  --info-l:   #ECF2F8;

  /* ── 间距（8pt 网格 ★ 只用这几档） ── */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  /* ── 字号（12/13/14/16/18/20 ✓） ── */
  --f1: 12px; --f2: 13px; --f3: 14px; --f4: 16px; --f5: 18px; --f6: 20px;

  /* ── 圆角（4 小件 / 8 卡片 / 12 大容器 ✓） ── */
  --r1: 4px; --r2: 8px; --r3: 12px;

  /* ── 控件高度（8 的倍数 ✓） ── */
  --h-sm: 28px;    /* 表格内小按钮 */
  --h:    32px;    /* 常规按钮 / 输入框 ★ 规范推荐值 */
  --h-lg: 44px;    /* 主要操作 / 登录 */
  --h-row: 48px;   /* 表格行高 ★「不拥挤」 */

  /* ── 阴影（克制 ✗ 后台靠描边分层 ✓ 不用重阴影 ✓） ── */
  --shd-1: 0 1px 2px rgba(16, 40, 32, .04);
  --shd-2: 0 4px 16px rgba(16, 40, 32, .07);
  --shd-3: 0 12px 40px rgba(16, 40, 32, .13);

  --side-w: 224px;   /* 224 = 8×28 ✓ */
  --top-h:  64px;    /* 64 = 8×8 ✓ */
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--f3);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.hide { display: none !important; }
.grow { flex: 1 1 auto; min-width: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
/* ★ 数字等宽 ✗ 人数/金额/日期列**上下对齐**（规范明确要求 ✓） */
.num, td.n, .kpi-v, .money, .vt .n { font-variant-numeric: tabular-nums; }

/* ══════════════ 登录 ══════════════ */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #EDF5F1 0%, #F6F9F8 55%, #FFFDF4 100%);
  padding: var(--s5);
}
.login-card {
  width: 400px; background: var(--card); border-radius: var(--r3);
  padding: var(--s7) var(--s6) var(--s6);
  box-shadow: var(--shd-3); border: 1px solid var(--line); text-align: center;
}
.lg-logo {
  width: 64px; height: 64px; margin: 0 auto var(--s5); border-radius: var(--r3);
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-d) 100%);
  color: #fff; font-size: 30px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(15, 110, 86, .28);
}
.lg-title { font-size: var(--f6); font-weight: 700; letter-spacing: .5px; }
.lg-sub { font-size: var(--f2); color: var(--ink3); margin: var(--s2) 0 var(--s6); }
.lg-input {
  width: 100%; height: var(--h-lg); border: 1.5px solid var(--line); border-radius: var(--r2);
  padding: 0 var(--s4); font-size: var(--f4); outline: none; transition: .15s;
  background: #FBFCFB; color: var(--ink);
}
.lg-input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(15, 110, 86, .10); }
.lg-err { color: var(--danger); font-size: var(--f2); min-height: 20px; margin-top: var(--s2); }
.lg-btn {
  width: 100%; height: var(--h-lg); border-radius: var(--r2); margin-top: var(--s1);
  background: var(--brand); color: #fff; font-size: var(--f4); font-weight: 500;
  letter-spacing: 4px; transition: .15s;
}
.lg-btn:hover { background: var(--brand-d); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn[disabled] { background: #B9C6C1; cursor: not-allowed; letter-spacing: 1px; }
.lg-tip { font-size: var(--f1); color: var(--ink3); margin-top: var(--s5); line-height: 1.8; }

/* ══════════════ 主框架 ══════════════ */
.app { display: flex; min-height: 100vh; }

/* ── 侧栏：比内容区**略深** ⇒ 分层（对比度不拉高 ⇒ 久看不累 ✓） ── */
.side {
  width: var(--side-w); flex: 0 0 var(--side-w);
  background: #EFF3F1; border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.side-hd {
  height: var(--top-h); flex: 0 0 var(--top-h);
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s5); border-bottom: 1px solid var(--line);
}
.side-logo {
  width: 32px; height: 32px; border-radius: var(--r2); flex: 0 0 32px;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-d) 100%);
  color: #fff; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.side-t { font-size: var(--f4); font-weight: 500; letter-spacing: .3px; }
.nav { flex: 1 1 auto; overflow-y: auto; padding: var(--s3) var(--s3); }
/* ★ 菜单项 40px 高（规范建议 40/44 ✓）＋ 命中区够大 ✗ 不拥挤 ✓ */
.nav-i {
  width: 100%; height: 40px; border-radius: var(--r2);
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s3); margin-bottom: var(--s1);
  font-size: var(--f3); color: var(--ink2); text-align: left;
  transition: background .12s, color .12s;
}
.nav-i:hover { background: #E4EBE8; color: var(--ink); }
.nav-i.on { background: #fff; color: var(--brand); font-weight: 500; box-shadow: var(--shd-1); }
.nav-i .ic { width: 20px; flex: 0 0 20px; text-align: center; font-size: 15px; }
/* ★ 2026-10-17：答疑体系入口是 <a> 跳转 ⇒ 去掉下划线、继承同一套配色 ✓ */
a.nav-i { text-decoration: none; box-sizing: border-box; }
.side-ft {
  padding: var(--s3) var(--s5) var(--s4); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
}
.who { font-size: var(--f1); color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-btn {
  height: var(--h-sm); padding: 0 var(--s3); border-radius: var(--r1);
  font-size: var(--f1); color: var(--ink2); border: 1px solid var(--line);
  background: #fff; transition: .15s; flex: 0 0 auto;
}
.out-btn:hover { color: var(--danger); border-color: #E9C9C4; background: var(--danger-l); }

/* ── 内容区 ── */
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--top-h); flex: 0 0 var(--top-h);
  padding: 0 var(--s6); background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: var(--s4);
  position: sticky; top: 0; z-index: 20;
}
.pt { font-size: var(--f5); font-weight: 500; }
.ps { font-size: var(--f2); color: var(--ink3); }
.view { padding: var(--s5) var(--s6) var(--s7); max-width: 1520px; width: 100%; }

/* ══════════════ 卡片 ══════════════ */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r3);
  padding: var(--s5); margin-bottom: var(--s5); box-shadow: var(--shd-1);
}
.card:last-child { margin-bottom: 0; }
.card-t { font-size: var(--f4); font-weight: 500; margin-bottom: var(--s2); display: flex; align-items: center; gap: var(--s2); }
.card-s { font-size: var(--f2); color: var(--ink2); line-height: 1.8; margin-bottom: var(--s4); }
.card-s:last-child { margin-bottom: 0; }
.card-s b { color: var(--ink); font-weight: 500; }
.card-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap;
}
.card-hd .card-t { margin-bottom: 0; }

/* ══════════════ 按钮（只有 3 类 ✗ 绝不堆砌 ✓） ══════════════ */
.btn {
  height: var(--h); padding: 0 var(--s4); border-radius: var(--r2);
  font-size: var(--f3); font-weight: 400; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  border: 1px solid var(--line); background: #fff; color: var(--ink2);
  transition: background .13s, border-color .13s, color .13s, transform .1s;
}
.btn:hover { border-color: #CFD9D5; color: var(--ink); background: #FCFDFC; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }
.btn.primary:hover { background: var(--brand-d); border-color: var(--brand-d); }
.btn.danger { color: var(--danger); border-color: #E9C9C4; }
.btn.danger:hover { background: var(--danger-l); }
.btn.sm { height: var(--h-sm); padding: 0 var(--s3); font-size: var(--f1); border-radius: var(--r1); }
.btn.lg { height: var(--h-lg); padding: 0 var(--s5); }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* ★ 纯文字按钮（表格「操作」列用 ✗ 不抢视线 ✓） */
.btn.text { border-color: transparent; background: none; padding: 0 var(--s2); color: var(--brand); height: var(--h-sm); }
.btn.text:hover { background: var(--brand-l); }
.btn.text.danger { color: var(--danger); }
.btn.text.danger:hover { background: var(--danger-l); }
/* ★ 按钮之间最小间距 8px（规范要求 ≥10 视觉间距 ✓）＋ 允许换行 ✓ */
.btn-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

/* ══════════════ 表单 ══════════════ */
label.fl, .fl { font-size: var(--f2); color: var(--ink2); margin-right: var(--s1); white-space: nowrap; }
.inp, .sel {
  height: var(--h); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 0 var(--s3); font-size: var(--f3); color: var(--ink);
  background: #FBFCFB; outline: none; transition: .15s; min-width: 0;
}
.inp:focus, .sel:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(15, 110, 86, .10); }
.inp::placeholder { color: var(--ink3); }
.sel { cursor: pointer; }
.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.row-b { margin-bottom: var(--s4); }
.muted { color: var(--ink3); }

/* ══════════════ 表格（行高 48 ★「不拥挤」✓） ══════════════ */
.tbl, .vt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--f3); }
.tbl th, .vt th {
  background: #FAFBFB; color: var(--ink2); font-weight: 500; font-size: var(--f2);
  text-align: left; padding: 0 var(--s3); height: 44px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.tbl th:first-child, .vt th:first-child { border-top-left-radius: var(--r2); }
.tbl th:last-child, .vt th:last-child { border-top-right-radius: var(--r2); }
.tbl td, .vt td {
  padding: 0 var(--s3); height: var(--h-row); border-bottom: 1px solid var(--line2);
  color: var(--ink); vertical-align: middle;
}
.tbl tbody tr, .vt tr { transition: background .12s; }
.tbl tbody tr:hover, .vt tbody tr:hover, .vt tr:hover { background: var(--brand-l2); }
.tbl tbody tr:last-child td, .vt tbody tr:last-child td { border-bottom: none; }
.tbl .nm, .vt .nm { font-weight: 500; }
/* ★ 数字列：**表头也要右对齐** ✗✗
   （截图复验发现：表头左对齐、数据右对齐 ⇒ 视觉上"错位" ✓）
   ★ tabular-nums ⇒ 上下位数对齐 ✓（规范明确要求 ✓） */
.tbl .n, .vt .n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl th.n, .vt th.n { text-align: right; }
/* ★ 不折行列（班级名很长：「进阶（2nd）高二上学期」✗ 折行会把行高撑成两倍 ✓） */
.tbl .nowrap, .vt .nowrap { white-space: nowrap; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r3); }
.tbl-wrap > .tbl th { padding-top: 0; }

/* ══════════════ 标签 / 胶囊 / 指标 ══════════════ */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 var(--s2); border-radius: var(--r1);
  font-size: var(--f1); line-height: 1; white-space: nowrap;
  background: #F0F3F2; color: var(--ink2);
}
.tag.ok, .tag.g   { background: var(--ok-l);     color: var(--ok); }
.tag.warn, .tag.o { background: var(--warn-l);   color: var(--warn); }
.tag.off, .tag.r  { background: var(--danger-l); color: var(--danger); }
.tag.info         { background: var(--info-l);   color: var(--info); }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; background: var(--ink3); display: inline-block; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.off { background: var(--danger); }

.chip {
  height: var(--h-sm); padding: 0 var(--s3); border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink2);
  font-size: var(--f2); display: inline-flex; align-items: center; gap: var(--s1);
  transition: .13s; white-space: nowrap;
}
.chip:hover { border-color: #CFD9D5; color: var(--ink); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); margin-bottom: var(--s5); }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r3);
  padding: var(--s4) var(--s5); box-shadow: var(--shd-1);
}
.kpi-l { font-size: var(--f2); color: var(--ink3); margin-bottom: var(--s1); }
.kpi-v { font-size: 28px; font-weight: 500; line-height: 1.3; letter-spacing: -.5px; }
.kpi-v small { font-size: var(--f3); font-weight: 400; color: var(--ink3); margin-left: 4px; }
.kpi-s { font-size: var(--f1); color: var(--ink3); margin-top: var(--s1); }
.kpi.ok .kpi-v { color: var(--brand); }
.kpi.warn .kpi-v { color: var(--warn); }
.kpi.off .kpi-v { color: var(--danger); }

/* ══════════════ 空态 / 加载 ══════════════ */
.empty { padding: var(--s7) var(--s5); text-align: center; color: var(--ink3); font-size: var(--f3); }
.empty .e-ic { font-size: 34px; margin-bottom: var(--s3); opacity: .5; }
.empty b { display: block; font-size: var(--f4); color: var(--ink2); font-weight: 500; margin-bottom: var(--s2); }
.empty .empty-sub { font-size: var(--f2); color: var(--ink3); margin-top: var(--s1); }

/* ══════════════ 上传面板（右下悬浮 ✓ 不打断当前操作 ✓） ══════════════ */
.up-panel {
  position: fixed; right: var(--s5); bottom: var(--s5); width: 400px; max-height: 62vh;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r3);
  box-shadow: var(--shd-3); display: flex; flex-direction: column; overflow: hidden; z-index: 60;
}
.up-hd {
  height: 48px; flex: 0 0 48px; padding: 0 var(--s4);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); background: #FAFBFB;
}
.up-t { font-size: var(--f3); font-weight: 500; }
.up-x { width: 28px; height: 28px; border-radius: var(--r1); font-size: var(--f3); color: var(--ink3); }
.up-x:hover { background: #EEF2F0; color: var(--ink); }
.up-list { overflow-y: auto; padding: var(--s2) 0; }
.up-i { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line2); }
.up-i:last-child { border-bottom: none; }
.up-m { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); font-size: var(--f2); }
.up-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.up-n .st { flex: 0 0 auto; font-weight: 500; }
.st.wait { color: var(--ink3); } .st.run { color: var(--brand); }
.st.ok { color: var(--ok); } .st.err { color: var(--danger); }
.up-bar { height: 6px; border-radius: 999px; background: #EDF1EF; overflow: hidden; }
.up-bar > i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 999px; transition: width .25s; }
.up-bar.err > i { background: var(--danger); }
.up-m2 { font-size: var(--f1); color: var(--ink3); margin-top: var(--s1); }

/* ══════════════ 章节确认（左预览 + 右清单 ✓ 并排 ⇒ 不用来回滚 ✓） ══════════════ */
.chap-grid { display: flex; gap: var(--s5); align-items: flex-start; }
.chap-left { flex: 0 0 520px; }
.chap-right { flex: 1; min-width: 0; }
.chap-video { width: 100%; border-radius: var(--r2); background: #000; display: block; }
.ch-hd { font-size: var(--f2); color: var(--ink2); margin: var(--s4) 0 var(--s2); display: flex; align-items: center; justify-content: space-between; }
.ch-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s3); height: 44px; border-radius: var(--r2);
  border: 1px solid var(--line); margin-bottom: var(--s2); background: #fff;
  transition: .13s; cursor: pointer;
}
.ch-row:hover { border-color: #CFD9D5; background: #FCFDFC; }
/* ★ 推测条（淡橙 ✓ 与小程序端一致） —— 必须写在 .on **之前** ✗ */
.ch-row.infer { border-style: dashed; border-color: #E4C98A; background: #FFFCF4; }
/* ★★★★★ 「正在核对这一条」的定位高亮 ✗✗（与小程序端**同一套判据** ✓）
   ⚠️ 同优先级时**后出现的赢** ⇒ 必须写在 .infer 之后 ⇒ 盖住淡橙 ✓
   ⚠️ **绝不用 outline** ✗✗（项目铁律） */
.ch-row.on { background: var(--brand-l); border-color: var(--brand); box-shadow: inset 6px 0 0 var(--brand); }
.ch-q { font-size: var(--f3); font-weight: 500; flex: 0 0 auto; min-width: 56px; }
.ch-arrow { color: #C3CCC7; flex: 0 0 auto; font-size: var(--f1); }
.ch-sec {
  width: 88px; height: var(--h-sm); border: 1px solid var(--line); border-radius: var(--r1);
  padding: 0 var(--s2); font-size: var(--f2); text-align: right; flex: 0 0 88px;
  background: #F7FAF9; color: var(--brand); outline: none;
}
.ch-sec:focus { border-color: var(--brand); background: #fff; }
.ch-unit { font-size: var(--f2); color: var(--ink3); flex: 0 0 auto; }
.ch-tl { font-size: var(--f2); color: var(--ink3); flex: 0 0 auto; margin-left: auto; }
.ch-del { font-size: var(--f2); color: var(--ink3); padding: 0 var(--s2); height: var(--h-sm); border-radius: var(--r1); flex: 0 0 auto; }
.ch-del:hover { background: var(--danger-l); color: var(--danger); }

/* ══════════════ 弹层（modal）★ 所有「新增/编辑」都走它 ✗ 页面不散落表单 ✓ ══════════════ */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-mask { position: absolute; inset: 0; background: rgba(20, 32, 28, .38); }
.modal-box {
  position: relative; background: var(--card); border-radius: var(--r3);
  box-shadow: var(--shd-3); width: 520px; max-width: calc(100vw - 48px);
  max-height: 84vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-box.wide { width: 860px; }
.modal-hd {
  height: 56px; flex: 0 0 56px; padding: 0 var(--s5);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); font-size: var(--f4); font-weight: 500;
}
.modal-x { width: 28px; height: 28px; border-radius: var(--r1); color: var(--ink3); font-size: var(--f3); }
.modal-x:hover { background: #EEF2F0; color: var(--ink); }
.modal-bd { padding: var(--s5); overflow-y: auto; flex: 1 1 auto; }
.modal-ft {
  padding: var(--s4) var(--s5); border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: var(--s2); background: #FCFDFC;
}
/* 表单行：label 固定宽 ⇒ 上下对齐 ✓ */
.frow { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.frow > label { flex: 0 0 84px; font-size: var(--f3); color: var(--ink2); text-align: right; }
.frow > .inp, .frow > .sel { flex: 1 1 auto; }
.frow > .hint { font-size: var(--f2); color: var(--ink3); }
.frow.top { align-items: flex-start; }
.frow.top > label { padding-top: 6px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3); }
.ck { display: flex; align-items: center; gap: var(--s2); font-size: var(--f2); cursor: pointer;
  padding: 6px var(--s2); border-radius: var(--r1); }
.ck:hover { background: var(--brand-l2); }
.ck input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.ck.on { background: var(--brand-l); color: var(--brand); font-weight: 500; }

/* ══════════════ Toast ══════════════ */
.toast {
  position: fixed; left: 50%; top: var(--s5); transform: translateX(-50%);
  background: rgba(28, 42, 36, .95); color: #fff;
  padding: var(--s3) var(--s5); border-radius: var(--r2); font-size: var(--f3);
  box-shadow: var(--shd-3); z-index: 2000; max-width: 70vw;
}
@keyframes tIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
                 to   { opacity: 1; transform: translateX(-50%) translateY(0); } }
.toast { animation: tIn .2s ease; }

/* ══════════════ 窄屏（1366 笔记本 ✓） ══════════════ */
@media (max-width: 1420px) {
  :root { --side-w: 200px; }
  .view { padding: var(--s5) var(--s5) var(--s7); }
  .topbar { padding: 0 var(--s5); }
}
@media (max-width: 1180px) {
  .chap-grid { flex-direction: column; }
  .chap-left { flex: 1 1 auto; width: 100%; }
  .up-panel { width: calc(100vw - var(--s7)); }
}

/* VIDEO_PAGE_1015  PC 端「视频管理」页（老师 10-15 要求 ✓）
   五个文件夹卡片 + 视频清单 + 上传 + 名称核对。
   本注释内不写任何样式片段。 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.vf-card{position:relative;padding:16px 14px;text-align:center;cursor:pointer;
  border:1px solid rgba(15,110,86,.16);border-radius:14px;background:#fff;
  transition:box-shadow .18s,transform .18s,border-color .18s}
.vf-card:hover{box-shadow:0 6px 18px rgba(15,110,86,.12);transform:translateY(-2px)}
.vf-card.on{border-color:#0F6E56;box-shadow:0 0 0 3px rgba(15,110,86,.12)}
.vf-card .vf-ic{font-size:26px;line-height:1.2}
.vf-card .vf-n{font-weight:700;color:#1F2B26;margin-top:4px}
.vf-card .vf-c{font-size:13px;color:#0F6E56;margin-top:2px}
.vf-card .vf-t{font-size:12px;color:#8a9a94;margin-top:4px}
.vf-card.old{border-style:dashed;opacity:.85}
.vf-card.skip{opacity:.55;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin:10px 0}
.row label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#5b6b66}
.row input,.row select{padding:8px 10px;border:1px solid rgba(15,110,86,.22);
  border-radius:9px;font-size:14px;min-width:130px;background:#fff}
.btn.xs{padding:4px 10px;font-size:12px}
.btn.danger{background:#FDECEA;color:#A32D2D;border:1px solid rgba(200,60,50,.3)}
.ok-box{background:#EAF7F1;border:1px solid rgba(15,110,86,.25);color:#0B5A46;
  padding:12px 14px;border-radius:11px;font-size:14px;margin-top:8px}
.warn-box{background:#FFF7E6;border:1px solid rgba(214,158,46,.3);color:#8a6d1f;
  padding:12px 14px;border-radius:11px;font-size:14px;margin-top:8px}
.empty{padding:18px;text-align:center;color:#8a9a94;font-size:13px;
  border:1px dashed rgba(15,110,86,.2);border-radius:11px;margin:8px 0}
.hint{font-size:12px;color:#8a9a94;margin-top:8px;line-height:1.6}
.muted{color:#8a9a94;font-size:12px}

/* DUP_MODAL_1015  PC 端上传「重名提醒」弹层（老师 10-15 晚间需求 ✓）
   上传前查全库归一名 ⇒ 有撞名弹层列出库中已有视频 ⇒ 确认才传 ✓ */
.dup-file{padding:10px 12px;border:1px solid rgba(214,158,46,.35);
  border-radius:11px;background:#FFFBF2;margin-bottom:10px;font-size:14px}
.dup-file .dup-n{font-size:12px;color:#8a6d1f;margin-left:8px}
.dup-hit{font-size:13px;color:#5b6b66;margin:4px 0 0 14px;line-height:1.5}
.dup-hit .muted{margin-left:2px}