/* ===== 资源后台 · 学校端管理后台 · Realsee 风格 ===== */
:root {
  /* tokens — Realsee Galois cool-blue */
  --c-primary: #2563eb;
  --c-primary-hover: #1d4ed8;
  --c-primary-active: #1e40af;
  --c-primary-bg: #eaf2ff;
  --c-primary-border: #c7d8f7;

  --c-success: #16a34a;
  --c-success-bg: #e9f8ef;
  --c-success-border: #b6e7c5;
  --c-warning: #f59e0b;
  --c-warning-bg: #fff7e6;
  --c-warning-border: #ffe5b3;
  --c-error: #ef4444;
  --c-error-bg: #fef2f2;
  --c-error-border: #fecaca;
  --c-info: #2563eb;

  --c-text: #172033;
  --c-text-2: #475569;
  --c-text-3: #94a3b8;
  --c-text-4: #cbd5e1;
  --c-text-inv: #ffffff;

  --c-bg: #f6f8fb;
  --c-bg-card: #ffffff;
  --c-bg-hover: #f1f5fb;
  --c-bg-active: #eaf2ff;
  --c-bg-mask: rgba(15, 23, 42, 0.45);

  --c-border: #dbe4f0;
  --c-border-2: #c7d4e3;
  --c-border-3: #eaeff6;

  --c-dark: #0f172a;
  --c-dark-2: #111827;
  --c-dark-3: #172033;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --shadow-1: 0 6px 18px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 18px 44px rgba(15, 23, 42, 0.08);
  --shadow-3: 0 22px 54px rgba(15, 23, 42, 0.16);
  --shadow-blue: 0 16px 40px rgba(37, 99, 235, 0.22);
  --shadow-drawer: -16px 0 48px rgba(15, 23, 42, 0.14);

  --gap-2: 4px;
  --gap-3: 8px;
  --gap-4: 12px;
  --gap-5: 16px;
  --gap-6: 20px;
  --gap-7: 24px;
  --gap-8: 32px;
  --gap-9: 40px;

  --pad-y: 14px;
  --pad-x: 16px;
  --row-h: 56px;

  --font-base: 14px;
  --font-sm: 12px;
  --font-lg: 16px;
  --font-xl: 22px;
  --font-2xl: 28px;
  --font-3xl: 36px;

  --font-family: "Roboto", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --sidebar-w: 232px;
  --header-h: 60px;
}

/* ===== 暗色主题（全局 data-theme="dark"，通过覆盖 token 驱动）===== */
[data-theme="dark"] {
  --c-primary-bg: #1b2740;
  --c-primary-border: #2f4574;

  --c-success-bg: #122a1d;
  --c-success-border: #1f4d33;
  --c-warning-bg: #2c2310;
  --c-warning-border: #4d3d17;
  --c-error-bg: #2c1718;
  --c-error-border: #4d2629;

  --c-text: #e8edf5;
  --c-text-2: #aab6c8;
  --c-text-3: #7d8aa0;
  --c-text-4: #4a5568;
  --c-text-inv: #0b1120;

  --c-bg: #0b1120;
  --c-bg-card: #141b2d;
  --c-bg-hover: #1b2436;
  --c-bg-active: #1e293b;
  --c-bg-mask: rgba(0, 0, 0, 0.6);

  --c-border: #283449;
  --c-border-2: #354154;
  --c-border-3: #1e2638;

  --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 18px 44px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 22px 54px rgba(0, 0, 0, 0.6);
  --shadow-drawer: -16px 0 48px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}
/* 暗色下：把使用硬编码白色渐变的卡片改为暗色面，避免亮斑 */
[data-theme="dark"] .bd-summary-stat,
[data-theme="dark"] .tm-hero-card,
[data-theme="dark"] .edu-resource-card,
[data-theme="dark"] .edu-profile-card,
[data-theme="dark"] .teacher-notice-card,
[data-theme="dark"] .teacher-notice-card.assist,
[data-theme="dark"] .report-cloud {
  background: var(--c-bg-card) !important;
}

[data-density="compact"] {
  --pad-y: 9px;
  --pad-x: 12px;
  --row-h: 44px;
  --font-base: 13px;
}
[data-density="default"] {
  --pad-y: 12px;
  --pad-x: 14px;
  --row-h: 50px;
  --font-base: 14px;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; padding: 0; }
body {
  font-family: var(--font-family);
  font-size: var(--font-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum";
}

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

/* ===== App shell ===== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "logo header"
    "side main";
  height: 100vh;
  transition: grid-template-columns 180ms ease;
}
.app.side-collapsed {
  grid-template-columns: 72px 1fr;
}

.logo-cell {
  grid-area: logo;
  background: var(--c-bg-card);
  color: var(--c-text);
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 12px;
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  position: relative;
}
.logo-mark {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--c-primary), #60a5fa);
  display: grid; place-items: center;
  font-weight: 900; color: #fff;
  font-size: 16px;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
}
.logo-title { font-size: 15px; font-weight: 800; letter-spacing: 0.02em; }
.logo-sub { font-size: 11px; color: var(--c-text-3); letter-spacing: 0.06em; font-weight: 500; }
.sidebar-toggle {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-bg-card);
  color: var(--c-text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 180ms ease;
}
.sidebar-toggle:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
  background: var(--c-primary-bg);
}
.app.side-collapsed .logo-cell {
  justify-content: center;
  padding: 0;
}
.app.side-collapsed .logo-copy {
  display: none;
}
.app.side-collapsed .sidebar-toggle {
  position: absolute;
  right: -14px;
  z-index: 20;
  box-shadow: var(--shadow-1);
}

.header {
  grid-area: header;
  background: var(--c-bg-card);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 14px;
  z-index: 10;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.header .breadcrumb { color: var(--c-text-3); font-size: 13px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.header .breadcrumb .bc-link {
  color: var(--c-text-2); cursor: pointer; transition: color 180ms ease;
}
.header .breadcrumb .bc-link:hover { color: var(--c-primary); }

/* ===== Drill-down back bar ===== */
.drill-bar {
  /* 窄屏兜底：实在排不下时让右侧操作组整体折到第二行，而不是撑破卡片 */
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 10px;
  padding: 12px 18px;
  margin: -8px 0 18px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.drill-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
/* 书名旁插槽：紧贴面包屑当前页名（空时零宽不占位）；不参与压缩，要压先压书名 */
.drill-bar-name-actions { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.drill-bar .back-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--c-primary-bg);
  color: var(--c-primary);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
  flex-shrink: 0;
}
.drill-bar .back-link:hover {
  background: var(--c-primary);
  color: #fff;
}
.drill-bar .crumb-path {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: var(--c-text-3);
  /* 不换行 + 可收缩：右侧操作按钮多起来时（如书籍工作台的 审核/AI 流水线/页码对照/AI 目录识别/AI 章节拆分），
     原来的 flex-wrap:wrap 会让面包屑被挤成一列一个字的竖条（实测：整条 bar 从 94px 撑到 204px）。
     现在改成「当前页名省略号收尾」，宁可截书名也不把整行揉烂。 */
  flex-wrap: nowrap; min-width: 0; white-space: nowrap;
}
.drill-bar .crumb-path a {
  color: var(--c-text-2);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 180ms ease;
}
.drill-bar .crumb-path a:hover { color: var(--c-primary); background: var(--c-primary-bg); }
.drill-bar .crumb-path .cur {
  color: var(--c-text);
  font-weight: 700;
  padding: 2px 6px;
  /* 只有「当前页名」允许被压缩省略；上级面包屑短、保持完整（flex 默认按内容分配，父级已 min-width:0） */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 上级面包屑不参与压缩，先压当前页名 */
.drill-bar .crumb-path > a, .drill-bar .crumb-path .icn { flex: none; }
.header .breadcrumb .sep { color: var(--c-text-4); }
.header .breadcrumb .cur { color: var(--c-text); font-weight: 700; }

.header .h-spacer { flex: 1; }
.header .h-search {
  flex-shrink: 1;
  min-width: 0;
  width: 240px; max-width: 240px;
  height: 36px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  display: flex; align-items: center; padding: 0 14px; gap: 8px;
  color: var(--c-text-3); font-size: 13px;
}
@media (max-width: 1180px) {
  .header .h-search { display: none; }
}
.header .h-search:focus-within { background: var(--c-bg-card); border-color: var(--c-primary); }
.header .h-search input {
  border: none; outline: none; background: transparent;
  flex: 1; font: inherit; color: var(--c-text);
}
.header .h-icon {
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  cursor: pointer; color: var(--c-text-2);
  position: relative;
  transition: all 180ms ease;
  flex-shrink: 0;
}
.header .h-icon:hover { background: var(--c-bg); color: var(--c-primary); }
.header .h-icon .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-error); border: 2px solid #fff; }

.role-switch {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding: 3px;
  background: var(--c-bg);
  white-space: nowrap;
  flex-shrink: 0;
}
.role-switch button {
  border: none; background: transparent;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  color: var(--c-text-2);
  cursor: pointer;
  transition: all 180ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.role-switch button.active {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}

.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px 4px 4px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 180ms ease;
  flex-shrink: 0;
}
.user-chip:hover { background: var(--c-bg); }
.user-chip .av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #eaf2ff, #c7d8f7);
  color: var(--c-primary); font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}
.user-chip .nm { font-size: 13px; font-weight: 700; }
.user-chip .rl { font-size: 11px; color: var(--c-text-3); }

/* ===== Sidebar ===== */
.sidebar {
  grid-area: side;
  background: var(--c-bg-card);
  color: var(--c-text-2);
  overflow-y: auto;
  padding: 12px 12px;
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
}
.app.side-collapsed .sidebar {
  padding: 12px 8px;
  overflow-x: hidden;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

.menu-group {
  margin-bottom: 2px;
}
.menu-group-title {
  padding: 14px 12px 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-text-3);
  text-transform: uppercase;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  cursor: pointer;
  transition: all 180ms ease;
}
.menu-group-title:hover {
  background: var(--c-bg);
  color: var(--c-text-2);
}
.menu-group-title .group-arrow {
  width: 14px;
  height: 14px;
  opacity: 0.72;
  flex-shrink: 0;
}
.app.side-collapsed .menu-group-title {
  height: 1px;
  padding: 10px 8px 6px;
  overflow: hidden;
  color: transparent;
  pointer-events: none;
}
.app.side-collapsed .menu-group-title .group-arrow {
  display: none;
}
.menu-item {
  display: flex; align-items: center;
  padding: 0 14px;
  height: 42px;
  cursor: pointer;
  font-size: 14px;
  gap: 12px;
  position: relative;
  color: var(--c-text-2);
  border-radius: 12px;
  font-weight: 500;
  transition: all 180ms ease;
}
.app.side-collapsed .menu-item {
  justify-content: center;
  padding: 0;
  width: 44px;
  margin: 0 auto 4px;
}
.menu-item .ico { width: 18px; height: 18px; opacity: 0.85; flex-shrink: 0; }
.app.side-collapsed .menu-item span:not(.badge) {
  display: none;
}
.menu-item .badge {
  margin-left: auto;
  font-size: 11px;
  background: var(--c-error);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
  font-weight: 700;
}
.app.side-collapsed .menu-item .badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  padding: 0 5px;
}
.menu-item:hover { background: var(--c-bg); color: var(--c-text); }
.menu-item.active {
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}
.menu-item.active .ico { opacity: 1; }
.menu-item.active .badge {
  background: rgba(255,255,255,0.25);
}

/* ===== 三级子菜单（用户账号 → 后台 / 学生 / 教师账号） ===== */
.menu-item.has-sub .submenu-arrow {
  width: 14px; height: 14px; flex-shrink: 0;
  opacity: 0.65; transition: transform 180ms ease;
}
/* 折叠箭头的独立点击热区（靠右、加 padding 易点；点它只切换展开/收起，不导航） */
.menu-item.has-sub .submenu-arrow-btn {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center;
  padding: 6px; margin-right: -4px; border-radius: 6px; cursor: pointer;
}
.menu-item.has-sub .submenu-arrow-btn:hover { background: rgba(0,0,0,.06); }
.menu-item.active-parent { color: var(--c-primary); font-weight: 700; }
.menu-item.active-parent .ico { opacity: 1; }
.menu-subgroup {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 6px; padding-left: 8px;
}
.menu-subitem {
  display: flex; align-items: center;
  height: 38px; padding: 0 14px 0 38px;
  position: relative; cursor: pointer;
  font-size: 13.5px; font-weight: 500; gap: 8px;
  color: var(--c-text-2); border-radius: 10px;
  transition: all 160ms ease;
}
.menu-subitem::before {
  content: ""; position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-text-4, #cbd5e1);
}
.menu-subitem:hover { background: var(--c-bg); color: var(--c-text); }
.menu-subitem.active {
  background: var(--c-primary); color: #fff; font-weight: 700;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}
.menu-subitem.active::before { background: var(--c-bg-card); }
.app.side-collapsed .menu-item.has-sub .submenu-arrow,
.app.side-collapsed .menu-subgroup { display: none; }

.app.side-collapsed .sidebar-term {
  display: none;
}

/* 侧栏底部：主题切换 + 折叠 / 展开按钮 */
.sidebar-footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  background: var(--c-bg-card);
  padding: 10px 4px 4px;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
/* 收起时纵向堆叠两个图标按钮 */
.app.side-collapsed .sidebar-footer {
  flex-direction: column;
}
/* 亮 / 暗 分段切换 */
.theme-seg {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-bg);
}
.theme-seg-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--c-text-3);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
}
.theme-seg-btn:hover { color: var(--c-text-2); }
.theme-seg-btn.active {
  background: var(--c-bg-card);
  color: var(--c-text);
  box-shadow: var(--shadow-1);
}
/* 方形图标按钮（折叠/展开、收起态主题切换）*/
.sidebar-icon-btn {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-bg-card);
  color: var(--c-text-2);
  cursor: pointer;
  transition: all 180ms ease;
}
.sidebar-icon-btn:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
  background: var(--c-primary-bg);
}
.app.side-collapsed .sidebar-icon-btn {
  width: 100%;
}

/* ===== Main ===== */
.main {
  grid-area: main;
  overflow-y: auto;
  overflow-y: overlay;            /* 滚动条悬浮、不预留凹槽 → 内容满宽，与顶栏右缘对齐（不支持 overlay 的浏览器回退 auto）*/
  overflow-x: hidden;
  min-width: 0;
  padding: 28px;
}
.main::-webkit-scrollbar { width: 10px; height: 10px; }
.main::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 5px; }

/* ===== Page header ===== */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; gap: 16px;
}
.page-title { font-size: var(--font-2xl); font-weight: 900; margin: 0 0 6px; letter-spacing: -0.02em; line-height: 1.15; }
.page-desc { color: var(--c-text-3); font-size: 14px; margin: 0; line-height: 1.5; }
.page-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ===== Card ===== */
.card {
  background: var(--c-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-1);
  margin-bottom: 20px;
  overflow: hidden;
}
.card-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--c-border-3);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.card-title { font-size: 16px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.card-extra { color: var(--c-text-3); font-size: 13px; display: flex; gap: 12px; align-items: center; }
.card-body { padding: 22px; }
.card-body.tight { padding: 0; }

/* ===== Button ===== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--c-border);
  background: var(--c-bg-card);
  color: var(--c-text);
  transition: all 180ms ease;
  white-space: nowrap;
}
.btn:hover { color: var(--c-primary); border-color: var(--c-primary); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12); }
.btn.primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24); }
.btn.primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: #fff; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--c-text-2); padding: 0 12px; box-shadow: none; }
.btn.ghost:hover { background: var(--c-bg); color: var(--c-primary); border-color: transparent; box-shadow: none; transform: none; }
.btn.danger { color: var(--c-error); border-color: var(--c-border); }
.btn.danger:hover { color: #fff; background: var(--c-error); border-color: var(--c-error); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.24); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 13px; }
.btn.link { border: none; background: transparent; color: var(--c-primary); padding: 0; height: auto; box-shadow: none; font-weight: 600; }
.btn.link:hover { color: var(--c-primary-hover); transform: none; box-shadow: none; }
.btn.link.danger { color: var(--c-error); }
.btn:disabled { color: var(--c-text-4); cursor: not-allowed; background: var(--c-bg); border-color: var(--c-border); transform: none; box-shadow: none; }

/* ===== Tag / Badge ===== */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  font-size: 12px;
  line-height: 20px;
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  font-weight: 600;
  white-space: nowrap;
}
.tag.blue { color: var(--c-primary); background: var(--c-primary-bg); border-color: var(--c-primary-border); }
.tag.green { color: var(--c-success); background: var(--c-success-bg); border-color: var(--c-success-border); }
.tag.orange { color: #d97706; background: #fff7e6; border-color: #ffe5b3; }
.tag.red { color: var(--c-error); background: var(--c-error-bg); border-color: var(--c-error-border); }
.tag.purple { color: #7c3aed; background: #f3e8ff; border-color: #d8b4fe; }
.tag.cyan { color: #0e7490; background: #ecfeff; border-color: #a5f3fc; }
.tag.gold { color: #b45309; background: #fff7e6; border-color: #ffe5b3; }
.tag.gray { color: var(--c-text-2); background: var(--c-bg); border-color: var(--c-border); }
.tag.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ===== Stat card ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.stat {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  position: relative;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: var(--shadow-1);
}
.stat:hover { border-color: var(--c-primary-border); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.stat .lbl { color: var(--c-text-3); font-size: 13px; margin-bottom: 12px; font-weight: 600; }
/* 🔴 数字行右侧必须让出图标的位置（图标 40px 宽、右 20px 绝对定位）。
   不留的话「1,286,400」这种长数字会钻到图标底下 —— 屏幕越窄越明显。 */
.stat .v { font-size: 32px; font-weight: 900; line-height: 1.1; font-feature-settings: "tnum"; letter-spacing: -0.03em; color: var(--c-text); padding-right: 48px; }
.stat .v .unit { font-size: 14px; font-weight: 600; color: var(--c-text-3); margin-left: 4px; }
.stat .foot { margin-top: 12px; color: var(--c-text-3); font-size: 12px; display: flex; gap: 10px; align-items: center; font-weight: 500; }
/* ⚠️ 下面这组只作用于**组织看板**那一屏（`.stat-grid.equal-foot`），不进 `.stat` 通用规则。
   理由：`.stat` 在全仓另有约 10 处用法（AI 日志、导入预览、学校详情…），
   它们的 foot 只有一行或干脆没有 foot —— 给通用规则加 min-height 会把那些页面
   的卡片统统撑高约 17px。那是一次**没人要求过的视觉变更**，而且不会报错、
   只会让别的页面悄悄变样，属于典型的「顺手改坏隔壁」。

   🔴 组织看板为什么需要它：12 张卡里有的有 hint、有的没有、还有的 hint 占两行。
      grid 的行高取本行最高那张，于是三行各是一个高度 —— 界面上一眼就是没对齐。
      把 foot 高度定死（12px × 1.45 × 2 ≈ 35px，正好两行）之后，
      12 张卡**全部同高 158px、数字行都落在卡内同一位置**（playwright 量过 1600/1280 两个宽度）。
   ⚠️ 配套的 `-webkit-line-clamp:2` 不能删：hint 写到第三行时 min-height 就变回"最小值"，
      刚留出的空又会被撑开，对齐再次失效。 */
.stat-grid.equal-foot .foot { align-items: flex-start; min-height: 35px; }
.stat-grid.equal-foot .foot .muted {
  line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.stat .delta.up { color: var(--c-success); font-weight: 700; }
.stat .delta.down { color: var(--c-error); font-weight: 700; }
.stat .icon-bg {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--c-primary-bg);
  color: var(--c-primary);
  display: grid; place-items: center;
}
.stat.warn .icon-bg { background: var(--c-warning-bg); color: #d97706; }
.stat.ok .icon-bg { background: var(--c-success-bg); color: var(--c-success); }
.stat.purple .icon-bg { background: #f3e8ff; color: #7c3aed; }

/* ===== Filter bar ===== */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;
  padding: 18px 20px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  margin-bottom: 20px;
}
.filter-bar .lbl { color: var(--c-text-2); font-size: 13px; font-weight: 600; }
/* 🔴 规范里输入框的真名是 `.input`（配套 `.input.search` 带放大镜）。
   ⚠️ 全仓另有 309 处 `className="inp"`（31 个文件）—— `.inp` 是**历史误写**，
      这份 CSS 里从来没有 `.inp` 这条规则（唯一相关的是 `.kc-ask-input .inp{flex:1}`，
      要有那个祖先才生效）。所以写 `.inp` 的输入框吃的是**浏览器默认样式**，
      而它长得「像个输入框」，所以没人发现 —— 图文管理的搜索框就是这么秃了一版。
      新代码一律写 `.input`；碰到 `.inp` 顺手改，但不为改名单独动别的页面（决议 Q1=A）。 */
.input, .select {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font: inherit; font-size: 13px;
  background: var(--c-bg-card);
  color: var(--c-text);
  min-width: 140px;
  transition: all 180ms ease;
}
.select { padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--c-text-3) 50%), linear-gradient(135deg, var(--c-text-3) 50%, transparent 50%); background-position: calc(100% - 16px) center, calc(100% - 11px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; -webkit-appearance: none; appearance: none; }
.input:focus, .select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.input.search { width: 240px; padding-left: 36px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'><path d='M11.4 10.3a5.5 5.5 0 1 0-1.1 1.1l3.5 3.5a.75.75 0 0 0 1.1-1l-3.5-3.6Zm-4.4.2a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z'/></svg>") no-repeat 12px center; background-size: 14px; }
/* 🔴 textarea 也用 `.input`，但**必须解掉 height:36px** —— CSS 的 height 压得住 rows 属性，
   `<textarea className="input" rows={9}>` 会被压成一行高，而内容照样能滚，
   所以**看起来只是「输入框有点小」**，不像 bug。全仓 45 个 textarea 共用这一条。
   min-height 取 76px ≈ rows{3}：对 rows{2} 略高、对 rows{9} 仍矮，但都能手动拉
   （resize:vertical）。⚠️ 某个弹窗被顶坏就在**那个弹窗的作用域内**覆盖 min-height，
   不要回改这一条全局（决议 Q2=A + §7.6）。 */
textarea.input {
  height: auto; min-height: 76px; padding: 8px 14px; line-height: 1.6; resize: vertical;
}
/* 学校详情 · 年级与班级（左年级 · 右班级） */
.gc-split { display: grid; grid-template-columns: 248px 1fr; gap: 16px; align-items: start; }
.gc-grades {
  border: 1px solid var(--c-border, #eef0f4); border-radius: 12px; background: var(--c-card, #fff);
  overflow: hidden;
}
.gc-grades-head {
  padding: 12px 14px; font-weight: 600; font-size: 14px; color: var(--c-text, #1f2937);
  border-bottom: 1px solid var(--c-border, #eef0f4);
}
.gc-grade-list { max-height: 560px; overflow-y: auto; padding: 6px; }
.gc-grade-item {
  padding: 10px 12px; border-radius: 9px; cursor: pointer; margin-bottom: 2px;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.gc-grade-item:hover { background: var(--c-bg, #f8fafc); }
.gc-grade-item.active { background: var(--c-primary-bg, #eff6ff); border-color: var(--c-primary, #2563eb); }
.gc-grade-name { font-size: 14px; font-weight: 600; color: var(--c-text, #1f2937); }
.gc-grade-item.active .gc-grade-name { color: var(--c-primary, #2563eb); }
.gc-grade-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.gc-classes { min-width: 0; }
@media (max-width: 980px) { .gc-split { grid-template-columns: 1fr; } .gc-grade-list { max-height: 220px; } }

/* 省/市/区县级联选择器 */
.cascader-trigger { cursor: pointer; }
.cascader-panel {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0;
  display: flex; background: var(--c-card, #fff);
  border: 1px solid var(--c-border-2, #e5e7eb); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12); overflow: hidden;
}
.cascader-col {
  width: 156px; max-height: 264px; overflow-y: auto; padding: 4px;
  border-right: 1px solid var(--c-border, #f1f5f9);
}
.cascader-col:last-child { border-right: 0; }
.cascader-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
  white-space: nowrap; color: var(--c-text, #1f2937);
}
.cascader-opt:hover { background: var(--c-bg, #f8fafc); }
.cascader-opt.active { background: var(--c-primary-bg, #eff6ff); color: var(--c-primary, #2563eb); font-weight: 600; }
.cascader-arr { color: var(--c-text-3, #9ca3af); margin-left: 10px; }

.multi-select { position: relative; flex-shrink: 0; }
.multi-select-trigger {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-card);
  color: var(--c-text);
  font: inherit;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.multi-select-trigger.open,
.multi-select-trigger:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.multi-select-trigger .chev { color: var(--c-text-3); font-size: 14px; line-height: 1; }
.multi-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 100%;
  padding: 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-card);
  box-shadow: var(--shadow-2);
}
.multi-select-option {
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.multi-select-option:hover { background: var(--c-bg); }
.multi-select-divider { height: 1px; background: var(--c-border-3); margin: 4px 0; }

/* ===== SearchSelect（可检索单选 · ui.jsx）=====
   候选列表**随文档流展开**、不是绝对定位浮层 —— `.modal { overflow: hidden }` 会把浮层裁掉，
   而它的第一批调用方正是「新增/编辑班级」弹窗里最后一个字段（班主任）。改回 absolute 会重现裁切。 */
.search-select { min-width: 0; }
.search-select-box { position: relative; }
.search-select-input { width: 100%; padding-right: 30px; }
.search-select-clear {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; line-height: 15px; text-align: center;
  border-radius: 50%; font-size: 13px; cursor: pointer; user-select: none;
  color: var(--c-text-3); background: var(--c-bg-hover);
}
.search-select-clear:hover { color: var(--c-text); }
.search-select-panel {
  margin-top: 6px; max-height: 200px; overflow-y: auto; padding: 4px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-2); border-radius: 10px;
  box-shadow: var(--shadow-2);
}
.search-select-opt {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 10px; border-radius: 6px; font-size: 13px;
  cursor: pointer; color: var(--c-text);
}
.search-select-opt:hover, .search-select-opt.hi { background: var(--c-bg-hover); }
.search-select-opt.active { background: var(--c-primary-bg); color: var(--c-primary); font-weight: 600; }
.search-select-opt.disabled { color: var(--c-text-3); cursor: not-allowed; }
.search-select-opt .ss-name { flex-shrink: 0; }
.search-select-opt .ss-hint {
  margin-left: auto; font-size: 12px; font-weight: 400; color: var(--c-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-select-tip { padding: 10px; font-size: 13px; color: var(--c-text-3); }
.search-select-tip.err { color: var(--c-error); }

/* ===== Table ===== */
.table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--c-bg-card);
  font-size: var(--font-base);
}
.table.school-table { table-layout: fixed; }
.table thead th {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border-3);
  padding: var(--pad-y) var(--pad-x);
  text-align: left;
  color: var(--c-text-2);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.table thead th:first-child { padding-left: 22px; }
.table thead th:last-child { padding-right: 22px; }
.table tbody td {
  padding: var(--pad-y) var(--pad-x);
  border-bottom: 1px solid var(--c-border-3);
  vertical-align: middle;
  height: 58px;
}
.table tbody td:first-child { padding-left: 22px; }
.table tbody td:last-child { padding-right: 22px; }
.table tbody tr { transition: background 150ms ease; }
.table tbody tr:hover td { background: var(--c-bg); }
.table tbody tr:last-child td { border-bottom: none; }
.table .ck { width: 32px; }
.table .actions { white-space: nowrap; }
.table .actions .action-list {
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.table .actions a { display: inline-flex; align-items: center; line-height: 22px; }
/* 操作列文字链接的语义色：破坏性动作（停用/删除）红、恢复性动作（启用）绿。
   颜色一律走 CSS 变量，不硬编码；特异性 0,3,1 稳压全局 `a { color: var(--c-primary) }`（0,0,1）。 */
.table .actions .action-list a.danger { color: var(--c-error); }
.table .actions .action-list a.success { color: var(--c-success); }
/* 操作列里直接并排的文字链接（未包 .action-list 时）也要有间距，避免「详情重置密码停用」挤成一团 */
.table .actions > a + a { margin-left: 14px; }
.table .id-cell { font-family: var(--font-mono); font-size: 12px; color: var(--c-text-3); }
.table .name-cell { font-weight: 600; color: var(--c-text); }
.table .name-cell .sub { display: block; font-weight: 400; font-size: 12px; color: var(--c-text-3); margin-top: 2px; }

/* ===== Basic data maintenance ===== */
.bd-home {
  min-height: calc(100vh - 116px);
}
.bd-home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 18px;
}
.bd-home-card {
  min-height: 156px;
  padding: 24px 22px 18px;
  border: 1px solid var(--c-border-3);
  border-radius: var(--radius-lg);
  background: var(--c-bg-card);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all 180ms ease;
  position: relative;
}
.bd-home-card:hover {
  border-color: var(--c-primary-border);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}
.bd-home-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--c-primary);
  margin-bottom: 16px;
}
.bd-home-icon .icn {
  width: 28px;
  height: 28px;
}
.bd-home-title {
  color: var(--c-text);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 12px;
}
.bd-home-desc {
  color: var(--c-text-3);
  font-size: 13px;
  line-height: 1.5;
}
.bd-home-foot {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-text-4);
  font-size: 12px;
  opacity: 0;
  transform: translateY(4px);
  transition: all 180ms ease;
}
.bd-home-card:hover .bd-home-foot {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 1280px) {
  .bd-home-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}
@media (max-width: 960px) {
  .bd-home-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
.bd-page { position: relative; }
.bd-toast {
  position: fixed;
  top: 78px;
  left: 50%;
  z-index: 90;
  transform: translateX(-50%);
  min-width: 260px;
  height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-card);
  color: var(--c-text);
  box-shadow: var(--shadow-2);
  font-size: 13px;
  font-weight: 700;
}
.bd-toast .icn { color: var(--c-success); }
.bd-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 132px);
  gap: 14px;
  margin-bottom: 20px;
}
.bd-summary-main,
.bd-summary-stat {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #fff, var(--c-bg));
  box-shadow: var(--shadow-1);
}
.bd-summary-main {
  min-height: 116px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.bd-summary-main::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0));
}
.bd-kicker {
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.bd-title {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.bd-meta {
  margin-top: 8px;
  color: var(--c-text-3);
  font-size: 13px;
}
.bd-summary-stat {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bd-summary-stat span {
  color: var(--c-text);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
}
.bd-summary-stat em {
  margin-top: 8px;
  color: var(--c-text-3);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}
.bd-summary-stat.ok span { color: var(--c-success); }
.bd-table-card { overflow: hidden; }
.bd-table-scroll {
  width: 100%;
  overflow-x: auto;
}
.bd-table {
  min-width: 980px;
}
.bd-table th,
.bd-table td {
  white-space: nowrap;
}
.bd-table td:nth-child(3) {
  min-width: 160px;
}
.bd-word-img {
  width: 116px;
  height: 74px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-border);
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bd-word-img.plant {
  background:
    radial-gradient(circle at 28% 35%, rgba(255,255,255,.9) 0 5px, transparent 6px),
    radial-gradient(circle at 58% 52%, rgba(255,255,255,.6) 0 8px, transparent 9px),
    linear-gradient(135deg, #14532d, #86efac);
}
.bd-word-img.arrow {
  background:
    linear-gradient(45deg, transparent 42%, rgba(255,255,255,.9) 42% 50%, transparent 50%),
    linear-gradient(135deg, #84cc16, #fefce8);
  color: #365314;
}
.bd-form-grid {
  margin-top: 18px;
}
.bd-impact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.bd-impact div {
  padding: 14px;
  border: 1px solid var(--c-border-3);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
}
.bd-impact b {
  display: block;
  color: var(--c-text-2);
  font-size: 12px;
  margin-bottom: 8px;
}
.bd-impact span {
  font-size: 18px;
  font-weight: 900;
}
@media (max-width: 1120px) {
  .bd-summary { grid-template-columns: 1fr; }
}

.tbl-card .card-body { padding: 0; }
.tbl-card .table thead th:first-child,
.tbl-card .table tbody td:first-child { padding-left: 22px; }
.tbl-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px;
  border-top: 1px solid var(--c-border-3);
  color: var(--c-text-3); font-size: 13px;
}
.pager { display: flex; gap: 6px; align-items: center; }
.pager .pg {
  min-width: 32px; height: 32px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0 8px;
  font-size: 13px;
  background: var(--c-bg-card);
  font-weight: 600;
  transition: all 180ms ease;
}
.pager .pg.active { border-color: var(--c-primary); color: #fff; background: var(--c-primary); }
.pager .pg:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pager .pg.active:hover { color: #fff; }

/* ===== Avatar ===== */
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 500;
  color: #fff;
  flex-shrink: 0;
}

/* ===== Tabs ===== */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 20px;
}
.tab {
  padding: 12px 18px;
  cursor: pointer;
  font-size: 14px;
  color: var(--c-text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 600;
  transition: all 180ms ease;
}
.tab:hover { color: var(--c-primary); }
.tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 800; }
.tab .ct { display: inline-block; margin-left: 6px; padding: 1px 8px; background: var(--c-bg); color: var(--c-text-3); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.tab.active .ct { background: var(--c-primary-bg); color: var(--c-primary); }

/* ===== Org tree ===== */
.tree { font-size: 13px; }
.tree .node {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 4px;
  cursor: pointer;
}
.tree .node:hover { background: var(--c-bg-hover); }
.tree .node.active { background: var(--c-primary-bg); color: var(--c-primary); }
.tree .node .twig { width: 16px; height: 16px; display: inline-grid; place-items: center; color: var(--c-text-3); }
.tree .node .ct { margin-left: auto; color: var(--c-text-3); font-size: 12px; }
.tree .level-1 { padding-left: 0; }
.tree .level-2 { padding-left: 20px; }
.tree .level-3 { padding-left: 40px; }

/* ===== Todo list ===== */
.todo-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
}
.todo-row:last-child { border-bottom: none; }
.todo-row .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-primary); flex-shrink: 0;
}
.todo-row .dot.warn { background: var(--c-warning); }
.todo-row .dot.err { background: var(--c-error); }
.todo-row .txt { flex: 1; }
.todo-row .ct { color: var(--c-text-3); font-size: 12px; }

/* ===== 组织看板 Dashboard ===== */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
.dash-col { display: flex; flex-direction: column; min-width: 0; }
.dash-col > .card { margin-bottom: 0; }
.dash-col > .card + .card,
.dash-col > .greet-card + .card { margin-top: 16px; }
.dash-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 0;
}
.dash-grid-2 > .card { margin-bottom: 16px; }
@media (max-width: 1180px) {
  .dash-grid, .dash-grid-2 { grid-template-columns: 1fr; }
}

/* 数据监控 · 三张渐变主卡 */
.hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hero-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 104px; padding: 18px 20px;
  border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--c-primary) 0%, #5b9bff 100%);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}
.hero-card::after {
  content: ""; position: absolute; right: -34px; bottom: -56px;
  width: 168px; height: 168px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.hero-meta { position: relative; z-index: 1; min-width: 0; }
.hero-v { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-feature-settings: "tnum"; }
.hero-lbl { font-size: 13px; margin-top: 6px; opacity: 0.92; }
.hero-ic {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 54px; height: 54px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.22); color: #fff;
}
.hero-ic .icn { width: 30px; height: 30px; }
.dash-subhead { font-weight: 700; color: var(--c-text); font-size: 15px; margin: 20px 0 2px; }
.echart-fallback {
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-3); font-size: 13px;
  background: var(--c-bg); border-radius: 12px;
}

/* 使用量排行榜 · 地图 + 榜单 */
.usage-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px; align-items: center;
}
.usage-grid.no-map { grid-template-columns: 1fr; }
.usage-map { min-width: 0; }
.usage-rank { display: flex; flex-direction: column; max-height: 300px; overflow: auto; }
.usage-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px; border-bottom: 1px solid var(--c-border);
}
.usage-row:last-child { border-bottom: none; }
.usage-rank-no {
  width: 22px; text-align: center; flex-shrink: 0;
  font-weight: 800; font-size: 14px; color: var(--c-text-3);
}
.usage-rank-no.top { color: var(--c-primary); }
.usage-name {
  flex: 1; min-width: 0; font-size: 14px; color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usage-admin { flex-shrink: 0; color: var(--c-text-3); font-size: 13px; }

/* 问候 + 日历 */
.greet-card {
  display: flex; align-items: stretch; justify-content: space-between; gap: 18px;
  padding: 22px 24px;
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-1);
}
.greet-main { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.greet-hi { font-size: 24px; font-weight: 800; color: var(--c-text); letter-spacing: -0.01em; }
.greet-quote { margin-top: 14px; font-size: 14px; line-height: 1.7; color: var(--c-text-2); }
.greet-cal {
  flex-shrink: 0; width: 128px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, var(--c-primary) 0%, #5b9bff 100%);
  color: #fff; text-align: center; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
  display: flex; flex-direction: column;
}
.greet-cal .cal-week { padding: 8px 0; font-size: 13px; background: rgba(255, 255, 255, 0.14); }
.greet-cal .cal-day { font-size: 52px; font-weight: 800; line-height: 1.2; padding: 6px 0 0; }
.greet-cal .cal-date { font-size: 12px; opacity: 0.92; padding: 0 0 12px; }

/* 本周统计 · 彩色环 */
.ring-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ring-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ring {
  width: 104px; height: 104px; border-radius: 50%;
  border: 10px solid var(--c-primary);
  display: flex; align-items: center; justify-content: center;
}
.ring-num { font-size: 28px; font-weight: 800; color: var(--c-text); font-feature-settings: "tnum"; }
.ring-lbl { font-size: 14px; color: var(--c-text-2); }

/* 关键指标 · 次级指标条 */
.mini-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.mini-stat {
  padding: 14px 16px; border-radius: 14px;
  background: var(--c-bg); border: 1px solid var(--c-border);
}
.mini-stat.warn { background: #fff8ed; border-color: #ffe5b3; }
.mini-v { font-size: 24px; font-weight: 800; color: var(--c-text); letter-spacing: -0.02em; font-feature-settings: "tnum"; }
.mini-u { font-size: 13px; font-weight: 600; color: var(--c-text-3); margin-left: 3px; }
.mini-lbl { margin-top: 6px; font-size: 13px; color: var(--c-text-2); }
.mini-delta { margin-top: 6px; font-size: 12px; font-weight: 700; }
.mini-delta.up { color: var(--c-success); }
.mini-delta.down { color: var(--c-error); }

/* 资源统计分析 · 彩色统计卡 */
.res-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.res-stat-card {
  position: relative; overflow: hidden;
  padding: 14px 16px; border-radius: 14px;
  background: var(--c-bg); border: 1px solid var(--c-border);
}
.res-stat-name { position: relative; z-index: 1; font-size: 13px; font-weight: 600; color: var(--c-text-2); }
.res-stat-total { position: relative; z-index: 1; margin-top: 4px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--c-text); font-feature-settings: "tnum"; }
.res-stat-add { position: relative; z-index: 1; margin-top: 4px; font-size: 12px; color: var(--c-text-3); }
.res-stat-add b { font-weight: 700; }
.res-stat-ic {
  position: absolute; right: 10px; bottom: 8px; z-index: 0;
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.res-stat-ic .icn { width: 22px; height: 22px; }
/* 色调 */
.res-stat-card.tone-blue   { background: linear-gradient(135deg, #eef4ff, #dce8ff); border-color: #dbe7ff; }
.res-stat-card.tone-blue   .res-stat-total, .res-stat-card.tone-blue   .res-stat-add b { color: #2563eb; }
.res-stat-card.tone-blue   .res-stat-ic { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.res-stat-card.tone-amber  { background: linear-gradient(135deg, #fff8ec, #ffeccc); border-color: #ffe7bf; }
.res-stat-card.tone-amber  .res-stat-total, .res-stat-card.tone-amber  .res-stat-add b { color: #d97706; }
.res-stat-card.tone-amber  .res-stat-ic { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.res-stat-card.tone-green  { background: linear-gradient(135deg, #ecfbf2, #d6f5e3); border-color: #cdeede; }
.res-stat-card.tone-green  .res-stat-total, .res-stat-card.tone-green  .res-stat-add b { color: #059669; }
.res-stat-card.tone-green  .res-stat-ic { background: rgba(5, 150, 105, 0.12); color: #059669; }
.res-stat-card.tone-purple { background: linear-gradient(135deg, #f4efff, #e6dbff); border-color: #e0d4ff; }
.res-stat-card.tone-purple .res-stat-total, .res-stat-card.tone-purple .res-stat-add b { color: #7c3aed; }
.res-stat-card.tone-purple .res-stat-ic { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
.res-stat-card.tone-cyan   { background: linear-gradient(135deg, #e9fbfb, #d2f2f2); border-color: #c8eded; }
.res-stat-card.tone-cyan   .res-stat-total, .res-stat-card.tone-cyan   .res-stat-add b { color: #0e7490; }
.res-stat-card.tone-cyan   .res-stat-ic { background: rgba(14, 116, 144, 0.12); color: #0e7490; }
.res-stat-card.tone-indigo { background: linear-gradient(135deg, #eef0ff, #dee2ff); border-color: #d7dcff; }
.res-stat-card.tone-indigo .res-stat-total, .res-stat-card.tone-indigo .res-stat-add b { color: #4f46e5; }
.res-stat-card.tone-indigo .res-stat-ic { background: rgba(79, 70, 229, 0.12); color: #4f46e5; }

/* ===== Two-column layout ===== */
.two-col {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: stretch;
}
.three-col {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(240px, 320px);
  gap: 16px;
  align-items: stretch;
}

/* ===== Form ===== */
.form-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 16px;
}
.form-row .lbl { text-align: left; color: var(--c-text-2); padding-top: 6px; font-size: 14px; }
.form-row .lbl.req::before { content: '*'; color: var(--c-error); margin-right: 4px; }
.form-row .ctl { display: flex; flex-direction: column; gap: 4px; }
.form-row .hint { color: var(--c-text-3); font-size: 12px; }
.form-row .val { padding: 6px 0; font-size: 14px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
}
/* 防止网格项内的输入框撑破容器（窄弹窗溢出修复） */
.form-grid > * { min-width: 0; }
.form-row { min-width: 0; }
.form-row .ctl { min-width: 0; }
.form-row .ctl input, .form-row .ctl select, .form-row .ctl textarea { max-width: 100%; box-sizing: border-box; }
/* Modal 内表单统一单列，避免窄弹窗里两列溢出 */
.modal-body .form-grid { grid-template-columns: 1fr; gap: 0; }

/* ===== Switch ===== */
.switch {
  width: 44px; height: 22px;
  border-radius: 11px;
  background: rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer;
  display: inline-block;
  transition: 0.15s;
}
.switch::after {
  content: '';
  position: absolute; left: 2px; top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-bg-card);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: 0.15s;
}
.switch.on { background: var(--c-primary); }
.switch.on::after { left: 24px; }

/* ===== Drawer ===== */
.drawer-mask {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 100;
  animation: fadeIn 0.2s;
}
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 720px;
  background: var(--c-bg-card);
  box-shadow: var(--shadow-drawer);
  z-index: 101;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.22s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-head {
  padding: 20px 28px;
  border-bottom: 1px solid var(--c-border-3);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-head h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.drawer-body {
  flex: 1; overflow-y: auto;
  padding: 28px;
}
.drawer-foot {
  padding: 14px 28px;
  border-top: 1px solid var(--c-border-3);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--c-bg);
}

/* ===== Modal ===== */
.modal-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  animation: fadeIn 0.2s;
}
.modal {
  background: var(--c-bg-card);
  border-radius: var(--radius-2xl);
  width: 520px;
  box-shadow: var(--shadow-3);
  animation: modalIn 0.22s;
  overflow: hidden;
}
@keyframes modalIn { from { transform: translateY(-12px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.modal-head { padding: 22px 28px 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.modal-body { padding: 16px 28px 22px; }
.modal-foot { padding: 14px 28px 22px; display: flex; justify-content: flex-end; gap: 10px; }

/* ===== Alert ===== */
.alert {
  display: flex; gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.alert.info { background: var(--c-primary-bg); border: 1px solid var(--c-primary-border); color: var(--c-text); }
.alert.warn { background: var(--c-warning-bg); border: 1px solid var(--c-warning-border); color: var(--c-text); }
.alert.error { background: var(--c-error-bg); border: 1px solid var(--c-error-border); color: var(--c-text); }
.alert.success { background: var(--c-success-bg); border: 1px solid var(--c-success-border); color: var(--c-text); }
.alert .ico { color: var(--c-primary); flex-shrink: 0; margin-top: 1px; }
.alert.warn .ico { color: #d97706; }
.alert.error .ico { color: var(--c-error); }
.alert.success .ico { color: var(--c-success); }

/* ===== Annotation pins ===== */
.annot-pin {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-error);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-mono);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--c-error), 0 4px 12px rgba(239, 68, 68, 0.36);
  cursor: pointer;
  vertical-align: middle;
  margin: 0 6px;
  position: relative;
  transition: transform 180ms ease;
  flex-shrink: 0;
  z-index: 2;
}
.annot-pin:hover { transform: scale(1.18); }
.annot-pin.float {
  position: absolute;
  z-index: 5;
}
.annot-pin.active {
  background: var(--c-bg-card);
  color: var(--c-error);
  box-shadow: 0 0 0 2px var(--c-error), 0 4px 14px rgba(239, 68, 68, 0.45);
}

/* ===== Annotation popover (replaces right panel) ===== */
.annot-pop-mask {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(2px);
  z-index: 300;
  animation: fadeIn 0.18s;
}
.annot-pop {
  position: fixed;
  z-index: 301;
  width: 460px;
  max-height: calc(100vh - 80px);
  background: var(--c-bg-card);
  border-radius: var(--radius-2xl);
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.24);
  border: 1px solid var(--c-border);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 1;
}
.annot-pop.entering {
  animation: popIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popIn {
  from { transform: translateY(8px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.annot-pop .pop-head {
  padding: 20px 24px 14px;
  background: linear-gradient(145deg, #172033 0%, #0f172a 60%, #111827 100%);
  color: #fff;
  position: relative;
}
.annot-pop .pop-head .lbl {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); font-weight: 800; margin-bottom: 6px;
}
.annot-pop .pop-head h3 {
  margin: 0; font-size: 18px; font-weight: 800;
  display: flex; align-items: center; gap: 10px;
}
.annot-pop .pop-head .num {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-error); color: #fff;
  font-family: var(--font-mono); font-size: 13px; font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
.annot-pop .pop-head .close-x {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: all 180ms ease;
}
.annot-pop .pop-head .close-x:hover { background: rgba(255,255,255,0.2); transform: rotate(90deg); }

.annot-pop .pop-page {
  padding: 12px 24px;
  border-bottom: 1px solid var(--c-border-3);
  background: var(--c-bg);
  font-size: 12px;
  color: var(--c-text-2);
  line-height: 1.6;
}
.annot-pop .pop-page .lbl-mini {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-text-3); font-weight: 800; margin-bottom: 4px;
}

.annot-pop .pop-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  flex: 1;
}
.annot-pop .pop-sec {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-primary); font-weight: 800;
  margin: 0 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.annot-pop .pop-sec::before {
  content: ''; width: 16px; height: 2px; background: var(--c-primary); border-radius: 1px;
}
.annot-pop .pop-sec.warn { color: #d97706; }
.annot-pop .pop-sec.warn::before { background: #d97706; }
.annot-pop .pop-text {
  font-size: 14px; line-height: 1.7;
  color: var(--c-text);
  margin-bottom: 18px;
}
.annot-pop .pop-text b { color: var(--c-primary); font-weight: 700; }

.annot-pop .pop-nav {
  border-top: 1px solid var(--c-border-3);
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--c-bg);
  font-size: 12px;
  color: var(--c-text-3);
}
.annot-pop .pop-nav .nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  color: var(--c-text-2);
  transition: all 180ms ease;
}
.annot-pop .pop-nav .nav-btn:hover { color: var(--c-primary); border-color: var(--c-primary); }
.annot-pop .pop-nav .nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.annot-pop .pop-nav .idx { font-weight: 700; color: var(--c-text-2); font-family: var(--font-mono); }

/* annotation toggle button in header */
.annot-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  color: var(--c-text-2);
  transition: all 180ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.annot-toggle .pin-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-error);
  box-shadow: 0 0 0 2px rgba(239,68,68,0.2);
}
.annot-toggle:hover { color: var(--c-error); border-color: var(--c-error); }
.annot-toggle.active { color: var(--c-error); border-color: var(--c-error); background: var(--c-error-bg); }

/* ===== Steps ===== */
.steps {
  display: flex; align-items: center; gap: 0;
  padding: 18px 22px;
}
.steps .step {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  color: var(--c-text-3);
  font-weight: 600;
}
.steps .step .n {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-bg-card);
  border: 1.5px solid var(--c-border-2);
  color: var(--c-text-3);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}
.steps .step.done .n { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.steps .step.done { color: var(--c-text); }
.steps .step.current .n { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 0 0 5px var(--c-primary-bg); }
.steps .step.current { color: var(--c-text); font-weight: 800; }
.steps .step .nm { font-size: 13px; }
.steps .bar {
  flex: 1; height: 2px; background: var(--c-border);
  margin: 0 14px;
  border-radius: 1px;
}
.steps .bar.done { background: var(--c-primary); }

/* ===== Donut chart bar (CSS only) ===== */
.bar-chart .row {
  display: grid; grid-template-columns: 80px 1fr 60px;
  align-items: center; gap: 12px;
  padding: 6px 0;
  font-size: 12px;
}
.bar-chart .row .nm { color: var(--c-text-2); }
.bar-chart .row .ct { color: var(--c-text-3); text-align: right; font-family: var(--font-mono); }
.bar-chart .row .bar { background: var(--c-bg-hover); height: 8px; border-radius: 4px; overflow: hidden; }
.bar-chart .row .bar > i {
  display: block; height: 100%;
  background: var(--c-primary);
  border-radius: 4px;
}

.kv {
  display: grid; grid-template-columns: 100px 1fr; gap: 4px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}
.kv .k { color: var(--c-text-3); padding: 4px 0; }
.kv .v { padding: 4px 0; color: var(--c-text); }

.muted { color: var(--c-text-3); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.fw500 { font-weight: 500; }
.fw600 { font-weight: 600; }
.hl-primary { color: var(--c-primary); }
.hl-err { color: var(--c-error); }
.hl-warn { color: var(--c-warning); }
.hl-success { color: var(--c-success); }

/* ===== 应用管理 · TOS 持续复制 ===== */
.tos-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.tos-stat { min-height:128px; padding:20px; border:1px solid var(--c-border); border-radius:var(--radius-xl); background:var(--c-bg-card); box-shadow:var(--shadow-1); display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.tos-stat > span:first-child { color:var(--c-text-3); font-size:13px; }
.tos-stat strong { font-size:26px; line-height:1.15; letter-spacing:-.02em; }
.tos-stat strong.tos-stat-time { font-size:17px; line-height:1.45; }
.tos-stat small { color:var(--c-text-3); line-height:1.5; }
.tos-two-col { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr); gap:20px; }
.tos-flow { display:grid; grid-template-columns:1fr 150px 1fr; align-items:center; gap:16px; }
.tos-bucket { border:1px solid var(--c-border); background:var(--c-bg); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.tos-bucket b { color:var(--c-text-3); font-size:12px; }
.tos-bucket strong { font-size:20px; font-family:var(--font-mono); overflow-wrap:anywhere; }
.tos-bucket span { color:var(--c-text-3); font-size:12px; }
.tos-arrow { color:var(--c-primary); text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; }
.tos-arrow .icn { width:30px; height:30px; }
.tos-decision-list { margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.tos-decision-list > div { display:flex; align-items:center; gap:8px; font-size:13px; }
.tos-perm-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tos-perm-grid > div { border:1px solid var(--c-border-3); border-radius:10px; padding:12px; display:flex; align-items:center; gap:9px; }
.tos-last-check { border-top:1px solid var(--c-border-3); margin-top:16px; padding-top:16px; display:flex; align-items:center; gap:10px; color:var(--c-text-3); font-size:12px; }
.tos-probe-mini { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:12px; font:11px var(--font-mono); color:var(--c-text-3); }
.tos-reconcile-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.tos-reconcile-grid > div { padding:14px 16px; background:var(--c-bg); border-radius:10px; display:flex; flex-direction:column; gap:6px; }
.tos-reconcile-grid span { color:var(--c-text-3); font-size:12px; }
.tos-reconcile-grid strong { font-size:22px; }
.tos-reconcile-grid small { color:var(--c-text-3); }
.tos-table-wrap { overflow:auto; }
.tos-table-wrap .table { min-width:920px; }
.tos-empty { padding:28px; text-align:center; color:var(--c-text-3); }
.tos-field { display:flex; flex-direction:column; gap:8px; margin-top:18px; font-size:13px; }
.tos-field .input { width:100%; box-sizing:border-box; resize:vertical; }
@media (max-width:1200px) { .tos-stat-grid { grid-template-columns:1fr 1fr; } .tos-two-col { grid-template-columns:1fr; } }
@media (max-width:760px) { .tos-stat-grid,.tos-reconcile-grid { grid-template-columns:1fr; } .tos-flow { grid-template-columns:1fr; } .tos-arrow { transform:rotate(90deg); } .tos-decision-list,.tos-perm-grid { grid-template-columns:1fr; } }

/* 跨页跳转的落点高亮（R3 2026-08-04）：学校列表点「未指派」→ 学校详情滚到校管理员区块，
   闪一下 1.5 秒告诉人「你要找的就是这里」。用 outline 而不是 border —— border 会撑动布局。
   prefers-reduced-motion 下只留静态高亮，不做动画。 */
.hl-flash {
  outline: 2px solid var(--c-primary);
  outline-offset: 6px;
  border-radius: 6px;
  animation: hl-flash-fade 1.5s ease-out forwards;
}
@keyframes hl-flash-fade {
  0%   { outline-color: var(--c-primary); background: var(--c-primary-bg, rgba(37, 99, 235, .08)); }
  70%  { outline-color: var(--c-primary); background: transparent; }
  100% { outline-color: transparent;      background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-flash { animation: none; }
}
.divider { height: 1px; background: var(--c-border); margin: 12px 0; }

/* compact icon */
.icn { width: 16px; height: 16px; vertical-align: -3px; }
.icn.sm { width: 14px; height: 14px; }

/* tree-checkbox + permission tree */
.perm-tree { font-size: 13px; }
.perm-tree .perm-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.perm-tree .perm-row.l2 { padding-left: 28px; }
.perm-tree .perm-row.l3 { padding-left: 56px; }
.perm-tree .perm-row .nm { flex: 1; }
.perm-tree .risk {
  font-size: 11px; padding: 0 6px;
  background: #fff2f0; color: var(--c-error);
  border-radius: 2px; border: 1px solid var(--c-error-border);
}

.checkbox {
  width: 16px; height: 16px; border-radius: 2px;
  border: 1px solid var(--c-border-2);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  background: var(--c-bg-card);
}
.checkbox.checked {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.checkbox.checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox.indeterminate {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.checkbox.indeterminate::after {
  content: '';
  position: absolute; left: 3px; top: 7px;
  width: 8px; height: 2px;
  background: var(--c-bg-card);
}

/* Audit risk lines */
.audit-row .risk-low { color: var(--c-text-3); }
.audit-row .risk-mid { color: var(--c-warning); }
.audit-row .risk-high { color: var(--c-error); font-weight: 500; }

.split-line {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0;
  font-size: 12px; color: var(--c-text-3);
}
.split-line::before, .split-line::after {
  content: ''; flex: 1; height: 1px; background: var(--c-border);
}

.role-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--c-bg-hover);
  color: var(--c-text-2);
}
/* 校管理员：这几个标签里**唯一一个真代表「多一份权限」**的，其余（班主任 / 学科教师）
   是教学身份。灰底一视同仁会让人扫不到它，所以给主色描边区分。
   ⚠️ 用 var(--primary) 而不是写死蓝色 —— 换肤时写死的颜色会断（见 ui-src/CLAUDE.md）。*/
.role-badge.is-admin {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
  font-weight: 600;
}

/* status dot inside list */
.s-dot {
  display: inline-flex; align-items: center; gap: 6px;
}
.s-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-success);
}
.s-dot.gray::before { background: var(--c-text-4); }
.s-dot.red::before { background: var(--c-error); }
.s-dot.orange::before { background: var(--c-warning); }
.s-dot.blue::before { background: var(--c-primary); }

/* empty state */
.empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--c-text-3);
  font-size: 13px;
}
.empty .ill {
  width: 80px; height: 60px; margin: 0 auto 12px;
  border: 1px dashed var(--c-border-2);
  border-radius: 4px;
  display: grid; place-items: center;
  color: var(--c-text-4);
  font-size: 24px;
}

/* dropdown menu (visual only) */
.dd {
  position: absolute;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  min-width: 140px;
  padding: 4px 0;
  z-index: 50;
  font-size: 13px;
}
.dd .dd-item {
  padding: 6px 14px;
  cursor: pointer;
}
.dd .dd-item:hover { background: var(--c-bg-hover); color: var(--c-primary); }
.dd .dd-item.danger:hover { background: var(--c-error-bg); color: var(--c-error); }
.dd .dd-sep { height: 1px; background: var(--c-border); margin: 4px 0; }

/* ===== Resource management prototype ===== */
.res-filter-card .card-body { padding: 18px 22px; }
.res-filter-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.res-filter-row:last-child { margin-bottom: 0; }
.res-filter-label {
  min-width: 46px;
  color: var(--c-text-2);
  font-size: 13px;
  font-weight: 700;
}
.res-chip {
  height: 28px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 160ms ease;
}
.res-chip:hover { color: var(--c-primary); background: var(--c-primary-bg); }
.res-chip.active {
  color: #fff;
  background: var(--c-primary);
  border-color: var(--c-primary);
  font-weight: 700;
}
.res-chip.sm { height: 26px; padding: 0 10px; font-size: 12px; }
/* R18 · chip 条数（决议 Q8）。裁完之后「小学+英语」还有 27 个版本，
   带条数能一眼挑出主力的那几个。条数由后端按当前所有筛选算，前端只显示。 */
.res-chip .res-chip-n {
  margin-left: 5px;
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  opacity: .55;
}
.res-chip.active .res-chip-n { opacity: .85; }
/* R18 · 分面取不到时占位的那颗 chip（bug #1）—— 必须和普通 chip 长得不一样，
   否则「接口挂了」会被读成「这一排就这么一个选项」。 */
.res-chip--err {
  color: var(--c-error);
  background: var(--c-error-bg);
  border-color: var(--c-error-border);
}
.res-chip--err:hover { color: var(--c-error); background: var(--c-error-bg); text-decoration: underline; }
/* R18 · 下游筛选被上游裁掉时的提示条（决议 Q7）。
   ⚠️ 不要做成 toast —— 用户切学段之后往往会先看筛选栏，toast 已经飘走了。 */
.res-filter-note {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 10px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--c-warning);
  background: var(--c-warning-bg);
  border: 1px solid var(--c-warning-border);
}

/* 学科配置 · 学段分段选择器（小学/初中/高中，连排 pill 段） */
.subj-stage-seg {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-bg-2, var(--c-bg-card));
}
.subj-stage-seg button {
  min-width: 84px;
  height: 32px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
}
.subj-stage-seg button:hover { color: var(--c-primary); }
.subj-stage-seg button.active {
  color: #fff;
  background: var(--c-primary);
  box-shadow: 0 1px 4px rgba(37, 99, 235, .25);
}
/* 学科配置 · 学科 chip 网格 */
.subj-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.subj-chip-grid .res-chip {
  height: 34px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
}
.subj-chip-grid .res-chip.active { border-color: var(--c-primary); }

.res-filter-tools {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding-top: 8px; border-top: 1px solid var(--c-border-3); margin-top: 8px;
}
/* 状态行 + 搜索框同行：状态靠左、检索工具靠右 */
.res-filter-statusrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-filter-statusrow > .res-filter-row { margin-bottom: 0; flex: 0 0 auto; }
.res-filter-tools--inline {
  border-top: none; padding-top: 0; margin-top: 0; margin-left: auto; flex: 1 1 auto; min-width: 280px;
}
/* 单词管理：Tab 栏 + 旁批注 Pin 同行 */
.word-tabbar { display: flex; align-items: center; gap: 4px; }
.word-tabbar .tabs { margin-bottom: 16px; }
/* 单词维护下钻视图子头部：返回 + 书名面包屑 + 右侧工具（计数/搜索/新增） */
.word-maint-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.word-maint-back { display: inline-flex; align-items: center; gap: 2px; color: var(--c-primary); cursor: pointer; font-size: 13px; white-space: nowrap; }
.word-maint-back:hover { opacity: .8; }
.word-maint-title { font-size: 15px; font-weight: 700; color: var(--c-text-1); }
.word-maint-title .sep { color: var(--c-text-3); margin: 0 4px; font-weight: 400; }
.word-maint-title .muted { font-weight: 400; }
.word-maint-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.word-maint-tools .input.search { width: 220px; }
.res-radio-grid { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.res-radio-grid label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-text-2);
  font-size: 13px;
  cursor: pointer;
}
.res-radio-grid label.active { color: var(--c-primary); font-weight: 700; }
.res-radio-grid.compact { gap: 8px 14px; }

/* 创建资源 · 类型选择卡片 */
.res-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.res-create-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; text-align: left; cursor: pointer;
  background: var(--c-bg-card); border: 1px solid var(--c-border-2);
  border-radius: var(--radius-lg); transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.res-create-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.res-create-card.featured { border-color: var(--c-primary); background: var(--c-primary-bg); grid-column: 1 / -1; }
.res-create-ic {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.res-create-ic.tone-blue { background: var(--c-primary); }
.res-create-ic.tone-cyan { background: #0891b2; }
.res-create-ic.tone-gold { background: #d4621a; }
.res-create-ic.tone-violet { background: #7c3aed; }
.res-create-ic.tone-green { background: #16a34a; }
.res-create-ic.tone-gray { background: var(--c-text-3); }
.res-create-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.res-create-title { font-size: 15px; font-weight: 700; color: var(--c-text); display: inline-flex; align-items: center; gap: 8px; }
.res-create-badge { font-style: normal; font-size: 11px; font-weight: 700; color: var(--c-primary); background: var(--c-bg-card); border: 1px solid var(--c-primary); border-radius: var(--radius-sm); padding: 0 6px; }
.res-create-desc { font-size: 12px; color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-create-arrow { color: var(--c-text-3); flex: none; }
.res-create-card:hover .res-create-arrow { color: var(--c-primary); }
.res-upload-box {
  width: 100%; min-height: 154px;
  border: 1px dashed var(--c-border-2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--c-bg-card), var(--c-bg));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--c-text-3); cursor: pointer;
  transition: all 180ms ease;
}
.res-upload-box:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-primary-bg);
}
.res-upload-title { color: var(--c-primary); font-weight: 700; font-size: 13px; }
.res-workbench {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch; /* 左树卡片高度与右内容区一致；右列超高时由 .res-tree-card 的 max-height+sticky 兜底为视口高 */
}
.res-tree-card .card-body,
.res-content-card .card-body { padding: 16px; }

/* 汉字管理 · 释义按「1. 2. 3.」逐条换行展示（每条一行，行间留白） */
.hl-mean-cell { white-space: normal; line-height: 1.5; }
.hl-mean-line + .hl-mean-line { margin-top: 4px; }

/* 汉字管理 · 「生字 / 词语」切换独立成行卡片，与下方表格分离 */
.res-main-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hl-kind-card .card-body { padding: 12px 16px; }
.hl-kind-tabs { display: flex; gap: 8px; }

/* 课文管理 · 内容预览面板（还原业务端：原文/译文、逐字拼音、配图、音频占位） */
.kw-preview { padding: 4px 8px 8px; }
.kw-pv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kw-pv-title { font-size: 24px; font-weight: 700; letter-spacing: 2px; text-align: center; color: var(--c-text-1); }
.kw-pv-meta { text-align: center; color: var(--c-text-3); margin: 6px 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.kw-pv-dyn { color: var(--c-text-3); }
.kw-pv-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.kw-pv-original { line-height: 2.6; text-align: center; }
.kw-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin-bottom: 10px; }
.kw-rb { display: inline-flex; flex-direction: column; align-items: center; min-width: 1em; }
.kw-py { font-size: 11px; color: var(--primary); line-height: 1.4; height: 16px; }
.kw-ch { font-size: 21px; color: var(--c-text-1); line-height: 1.5; }
.kw-pv-trans { line-height: 2; color: var(--c-text-2); padding: 0 6px; }
.kw-pv-trans p { margin: 0 0 10px; }
.kw-pv-illus { margin: 18px auto; max-width: 560px; }
.kw-pv-illus img { width: 100%; border-radius: 12px; display: block; box-shadow: var(--shadow-1, 0 2px 12px rgba(0,0,0,.08)); }
.kw-illus-ph { height: 200px; border: 1.5px dashed var(--c-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--c-fill-1, #f6f7f9); }
.kw-pv-audio { display: flex; flex-direction: column; gap: 10px; margin: 14px auto; max-width: 560px; }
.kw-audio-row { display: flex; align-items: center; gap: 10px; color: var(--c-text-2); }
.kw-audio-row audio { height: 32px; }
.kw-pv-explain { margin: 18px auto 0; max-width: 640px; background: var(--c-fill-1, #f6f7f9); border-radius: 10px; padding: 14px 16px; }
.kw-pv-explain-lbl { font-weight: 600; margin-bottom: 8px; color: var(--c-text-1); }
.kw-pv-explain p { margin: 0; line-height: 1.9; color: var(--c-text-2); }

/* 作文管理 · 作文题详情（写作要求 + AI 写作素材 5 类），对齐系统冷蓝/大圆角/软阴影规范 */
.zw-detail { max-width: 920px; margin: 0 auto; }
.zw-section { margin-top: 22px; }
.zw-sec-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--c-text-1); margin-bottom: 12px; }
.zw-sec-title::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--c-primary); }
.zw-req { background: var(--c-fill-1, #f6f7f9); border: 1px solid var(--c-border-3); border-radius: var(--radius); padding: 14px 16px; line-height: 1.95; color: var(--c-text-2); }
.zw-req p { margin: 0 0 8px; }
.zw-req p:last-child { margin-bottom: 0; }
.zw-req.zw-empty { color: var(--c-text-3); }
.zw-mats { display: flex; flex-direction: column; gap: 12px; }
.zw-mat-cat { border: 1px solid var(--c-border-3); border-radius: var(--radius); overflow: hidden; background: var(--c-bg-1, #fff); box-shadow: var(--shadow-1, 0 6px 18px rgba(15,23,42,.04)); }
.zw-mat-cat-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--c-primary-bg, #eaf2ff); border-bottom: 1px solid var(--c-border-3); }
.zw-mat-cat-name { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--c-text-1); }
.zw-mat-cat-name::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); }
.zw-mat-count { font-size: 12px; font-weight: 500; color: var(--c-primary); background: #fff; border: 1px solid var(--c-primary-border, #c7d8f7); border-radius: var(--radius-pill, 999px); padding: 0 8px; line-height: 18px; }
.zw-mat-add { font-size: 13px; color: var(--c-primary); cursor: pointer; white-space: nowrap; }
.zw-mat-add:hover { color: var(--c-primary-hover, #1d4ed8); }
.zw-mat-list { padding: 2px 14px; }
.zw-mat-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--c-border-3); }
.zw-mat-item:last-child { border-bottom: 0; }
.zw-mat-body { flex: 1; line-height: 1.85; color: var(--c-text-1); }
.zw-mat-note { color: var(--c-text-3); font-size: 13px; }
.zw-badge-ai { display: inline-block; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: var(--radius-sm, 6px); background: var(--c-primary-bg, #eaf2ff); color: var(--c-primary); margin-left: 8px; vertical-align: middle; }
.zw-mat-ops { flex: 0 0 auto; display: flex; gap: 12px; padding-top: 2px; }
.zw-mat-ops a { font-size: 13px; color: var(--c-primary); cursor: pointer; }
.zw-mat-ops a.zw-del { color: var(--c-danger, #e5484d); }
.zw-mat-empty { color: var(--c-text-3); font-size: 13px; padding: 12px 0; }
/* 左「知识点/章节」卡片：与右内容区等高。右列很短→随之等高；右列超高（试题列表上千像素）→封顶为视口高并粘性置顶，
   树列表内部滚动，避免左侧变成一截短桩或被拉成几千像素的空白长卡。 */
.res-tree-card {
  position: sticky;
  top: 16px;
  z-index: 30; /* sticky 会自成层叠上下文，会把内部「版本/教材」下拉面板(z-index:20)困在左卡片层级里→被右侧试卷卡片(DOM 在后)盖住；
                  给左卡片一个高于右列(auto)、低于顶栏(100)/弹窗(200+)的层级，让下拉面板能盖在右侧卡片之上 */
  max-height: calc(100vh - 96px); /* 96 ≈ 顶栏 60 + sticky 16 + 底部留白 20 */
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  overflow: visible; /* 覆盖 .card 的 overflow:hidden：让「版本/教材」下拉面板能溢出卡片完整展示（树列表自身仍内部滚动） */
}
.res-tree-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* 允许内部树列表收缩并出现自身滚动条 */
}
.res-tree-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}
.res-tree-tabs button {
  height: 32px;
  border: 0;
  background: var(--c-bg-card);
  color: var(--c-text-2);
  font: inherit;
  cursor: pointer;
}
.res-tree-tabs button.active { background: var(--c-primary); color: #fff; font-weight: 700; }
.res-tree-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 4px; } /* 充满左卡片剩余高度，内部滚动 */
.res-tree-node {
  display: flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 6px 8px;
  border-radius: 8px;
  color: var(--c-text-2);
  font-size: 13px;
  cursor: pointer;
}
.res-tree-node.level-2 { padding-left: 24px; }
.res-tree-node:hover,
.res-tree-node.active { background: var(--c-primary-bg); color: var(--c-primary); }
.res-tree-node em {
  margin-left: auto;
  color: var(--c-text-3);
  font-style: normal;
  font-size: 12px;
}
/* 多层级树：caret 折叠箭头 + 名称省略 */
.res-tree-caret {
  flex: none;
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-3);
}
.res-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* AI 通识课 · 可编辑目录树（基于 res-tree-node，hover 浮出 ＋/✎/🗑 + 行内重命名） */
.ac-tnode .ac-tactions { margin-left: auto; display: none; gap: 2px; flex: none; }
.ac-tnode:hover .ac-tactions { display: inline-flex; }
.ac-tactions button { border: 0; background: transparent; padding: 3px; cursor: pointer; color: var(--c-text-3); display: inline-flex; border-radius: 5px; }
.ac-tactions button:hover { background: var(--c-primary-bg); color: var(--c-primary); }
.ac-tedit { flex: 1; min-width: 0; height: 26px; border: 1px solid var(--c-primary); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13px; outline: none; background: var(--c-bg-card, #fff); color: var(--c-text-1); }
.ac-right-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ac-right-title { font-size: 16px; font-weight: 700; color: var(--c-text-1); }
.ac-note { font-size: 13px; color: var(--c-text-2); background: var(--c-primary-bg); border: 1px solid var(--c-border); border-radius: 8px; padding: 10px 14px; line-height: 1.7; }
/* AI 通识课 · 视频上传 / 进度 / 课件选择器 / 课件单元格 */
.ac-video-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-bg-card, #fff); }
.ac-video-name { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--c-text-1); }
.ac-video-chip a { font-size: 13px; }
.ac-video-x { margin-left: 4px; cursor: pointer; color: var(--c-text-3); font-size: 16px; line-height: 1; }
.ac-video-x:hover { color: var(--c-error, #cf1322); }
.ac-prog { width: 100%; height: 6px; margin-top: 10px; border-radius: 4px; background: var(--c-bg, #eef2f7); overflow: hidden; }
.ac-prog-bar { height: 100%; background: var(--c-primary); transition: width .2s ease; }
.ac-cwlist { max-height: 360px; overflow-y: auto; border: 1px solid var(--c-border); border-radius: 8px; }
.ac-cwrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--c-border-3, var(--c-border)); cursor: pointer; }
.ac-cwrow:last-child { border-bottom: 0; }
.ac-cwrow:hover { background: var(--c-primary-bg); }
.ac-cwrow-main { flex: 1; min-width: 0; }
.ac-cwrow-title { font-size: 14px; color: var(--c-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-cwrow-pick { flex: none; color: var(--c-primary); font-size: 13px; font-weight: 600; }
.ac-cwcell { display: inline-flex; align-items: center; gap: 8px; }
.ac-cwcell > a:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.ac-cwcell-edit { color: var(--c-text-3); }
/* 章节模式 · 版本/教材选择 */
.res-textbook { position: relative; margin-bottom: 10px; }
.res-textbook-summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-bg-card);
  color: var(--c-text-1);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;        /* 不换行 */
  overflow: hidden;
}
.res-textbook-summary:hover,
.res-textbook-summary.open { border-color: var(--c-primary); color: var(--c-primary); }
.res-textbook-summary .icn { flex: none; }
/* 版本/教材文字：单行展示，放不下的截断（… 省略），不换行 */
.res-textbook-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.res-textbook-label b { font-weight: 700; }
.res-textbook-label .sep { color: var(--c-text-3); margin: 0 4px; }
.res-textbook-caret { flex: none; transition: transform .15s ease; }
.res-textbook-caret.open { transform: rotate(180deg); }
.res-textbook-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 100%;              /* 至少与触发器同宽 */
  width: max-content;           /* 按内容自适应宽度 */
  max-width: min(610px, 94vw);  /* 封顶最大宽度；超过即在行内换行（flex-wrap） */
  max-height: 64vh;             /* 内容过高时面板内部纵向滚动，保证版本/教材全部可见 */
  overflow-y: auto;
  padding: 12px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
/* 版本一行、教材一行：标签固定不缩，右侧 chips 超过最大宽度自动换行成多行，全部展示 */
.res-textbook-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.res-textbook-row .res-filter-label { flex: none; line-height: 26px; }
.res-textbook-row + .res-textbook-row { margin-top: 10px; }
.res-list-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
  color: var(--c-text-2);
  font-size: 13px;
}
.res-resource-list { display: grid; gap: 12px; }

/* 互动资源网格 */
.res-interactive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.res-ir-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-lg);
  background: var(--c-bg-card);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.res-ir-card:hover {
  border-color: var(--c-primary-border);
  box-shadow: var(--shadow-1);
  transform: translateY(-2px);
}
.res-ir-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--c-primary-bg), #f4f7fc);
  display: flex; align-items: center; justify-content: center;
}
.res-ir-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-ir-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--c-primary);
  border-radius: 6px;
}
/* 互动资源「审核状态」徽标：卡片缩略图右上角回显（待审核 / 已通过 / 未通过） */
.res-ir-audit {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 700; color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  letter-spacing: .2px; white-space: nowrap;
}
.res-ir-audit--pending  { background: rgba(100, 116, 139, .92); }   /* slate 待审核 */
.res-ir-audit--approved { background: rgba(22, 163, 74, .95); }     /* green 已通过 */
.res-ir-audit--rejected { background: rgba(225, 29, 72, .95); }     /* rose  未通过 */

/* 审核弹窗：审核结果二选一分段控件（通过 / 不通过） */
.ir-audit-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ir-audit-seg__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 10px; border-radius: var(--radius-md, 10px);
  border: 1.5px solid var(--c-border-2); background: var(--c-bg-card);
  font-size: 15px; font-weight: 700; color: var(--c-text-2);
  cursor: pointer; transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.ir-audit-seg__btn:hover { border-color: var(--c-primary-border); }
.ir-audit-seg__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 12px; line-height: 1; background: var(--c-bg-2, #f1f5f9); color: var(--c-text-3);
}
.ir-audit-seg__btn.is-pass.active { border-color: #16a34a; background: rgba(22, 163, 74, .08); color: #15803d; box-shadow: 0 0 0 3px rgba(22, 163, 74, .12); }
.ir-audit-seg__btn.is-pass.active .ir-audit-seg__ic { background: #16a34a; color: #fff; }
.ir-audit-seg__btn.is-fail.active { border-color: #e11d48; background: rgba(225, 29, 72, .08); color: #be123c; box-shadow: 0 0 0 3px rgba(225, 29, 72, .12); }
.ir-audit-seg__btn.is-fail.active .ir-audit-seg__ic { background: #e11d48; color: #fff; }
.ir-audit-pass-hint {
  margin-bottom: 10px; padding: 10px 12px;
  font-size: 13px; color: #15803d; line-height: 1.6;
  background: rgba(22, 163, 74, .07); border: 1px solid rgba(22, 163, 74, .2); border-radius: 8px;
}
.ir-audit-pass-hint b { color: #15803d; }
.ir-audit-cur { font-weight: 700; }
.ir-audit-cur--approved { color: #16a34a; }
.ir-audit-cur--rejected { color: #e11d48; }
.ir-audit-cur--pending  { color: var(--c-text-3); }
.res-ir-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.res-ir-name {
  font-size: 14px; font-weight: 700; line-height: 1.4;
  color: var(--c-text-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-ir-meta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.res-ir-meta .tag { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-empty {
  padding: 48px 16px; text-align: center; font-size: 14px;
  border: 1px dashed var(--c-border-2); border-radius: var(--radius-lg);
}

/* 同步资源 · 知识卡片（整页图）列表 */
.res-kc-list { display: flex; flex-direction: column; gap: 14px; }
.res-kc-card {
  border: 1px solid var(--c-border-2); border-radius: var(--radius-lg);
  background: var(--c-bg-card); padding: 14px 16px;
}
.res-kc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.res-kc-title { font-size: 15px; font-weight: 800; color: var(--c-text-1); }
.res-kc-fmt {
  margin-left: auto; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--c-primary); padding: 1px 8px; border-radius: var(--radius-pill);
}
.res-kc-img { width: 100%; border-radius: var(--radius); display: block; cursor: zoom-in; }
.res-kc-img:hover { opacity: .94; }
.res-resource-item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px dashed var(--c-border-2);
  border-radius: var(--radius-lg);
  background: var(--c-bg-card);
}
.res-resource-item:hover { border-color: var(--c-primary-border); box-shadow: var(--shadow-1); }
.res-item-title { font-size: 15px; font-weight: 800; margin-bottom: 22px; }
/* 名称下方挂了「关联版本教材」行时收窄间距——那 22px 空档正好留给它，否则卡片会被撑高一截 */
.res-item-title.has-tb { margin-bottom: 6px; }
.res-item-title a { margin-left: 8px; font-size: 12px; font-weight: 600; }
/* 资源名下方的「关联版本教材」（如「统编版 / 七年级下册」）；没绑教材时该元素整个不渲染 */
.res-item-tb {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; margin-bottom: 8px;
  padding: 1px 9px 1px 7px; border-radius: 999px;
  background: var(--c-primary-bg); border: 1px solid var(--c-primary-border);
  color: var(--c-primary); font-size: 12px; line-height: 19px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.res-item-tb .icn { flex: none; opacity: .85; }
.res-item-side {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
  font-size: 13px;
}

/* ---- 通用下拉菜单（Dropdown 组件：资源卡「更多」收纳 编辑/审核/移动/删除）---- */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 132px; z-index: 60;
  background: var(--c-card, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: var(--shadow-2, 0 8px 24px rgba(15,23,42,.12));
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.dropdown-menu.left { right: auto; left: 0; }
.dropdown-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 7px 10px; border: 0; background: transparent;
  border-radius: 7px; cursor: pointer;
  font-size: 13px; color: var(--c-text, #1f2937);
  white-space: nowrap;
}
.dropdown-item:hover { background: var(--c-fill-2, #f1f5f9); }
.dropdown-item.danger { color: var(--c-error, #ef4444); }
.dropdown-item.danger:hover { background: rgba(239,68,68,.08); }
.dropdown-item.disabled { color: var(--c-text-3, #9ca3af); cursor: not-allowed; }
.dropdown-item.disabled:hover { background: transparent; }
/* 精准学绑定弹窗：已绑定项 chip */
.prb-bound-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; margin: 0 6px 6px 0;
  background: var(--c-fill-2, #f1f5f9);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 999px; font-size: 12px; color: var(--c-text-2, #475569);
}
.prb-bound-chip .x { cursor: pointer; color: var(--c-error, #ef4444); font-weight: 700; }
.prb-kp-grid { display: flex; flex-wrap: wrap; gap: 8px; max-height: 30vh; overflow: auto; }
.prb-kp-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 8px; cursor: pointer; font-size: 13px; user-select: none;
}
.prb-kp-opt.active { border-color: var(--c-primary, #2563eb); background: rgba(37,99,235,.06); color: var(--c-primary, #2563eb); }
.res-thumb {
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  background: #f8fbff;
  position: relative;
  overflow: hidden;
  padding: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
}
.res-thumb.blue { background: linear-gradient(135deg, #f8fbff, #dbeafe); }
.res-thumb.gold { background: linear-gradient(135deg, #fffbeb, #fde68a); }
.res-thumb.green { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); }
/* 真实封面缩略图（课件首页图/教案首图）：图片铺满，右下角仍叠格式角标 */
.res-thumb--img { padding: 0; background: #eef2f7; }
.res-thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-thumb--img .res-thumb-sub {
  background: rgba(15, 23, 42, 0.62); color: #fff;
  padding: 1px 6px; border-radius: 5px;
}
.res-thumb-lines { display: grid; gap: 4px; margin-bottom: 12px; }
.res-thumb-lines i {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.28);
}
.res-thumb-lines i:nth-child(2) { width: 74%; }
.res-thumb-lines i:nth-child(3) { width: 56%; }
.res-thumb-title { font-weight: 900; color: var(--c-text); }
.res-thumb-sub {
  position: absolute; right: 8px; bottom: 6px;
  color: var(--c-text-3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.res-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.res-mini-stat {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow-1);
}
.res-mini-stat .lbl {
  color: var(--c-text-3);
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 8px;
}
.res-mini-stat .v {
  color: var(--c-text);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.res-question-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.res-question-card {
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
}
.res-import-preview { margin: 18px 0; }
.res-parse-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: start;
}
.res-parse-lines { display: grid; gap: 8px; }
.res-parse-lines span {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-border-3);
  font-size: 13px;
}

/* ===== 精准学管理（精准模式知识点网络 + 同步模式 tab + 策展挑选） ===== */
/* 模式切换分段控件 */
.pl-mode-seg { display: inline-flex; border: 1px solid var(--c-border); border-radius: 999px; padding: 3px; background: var(--c-fill-1, #f1f5f9); }
.pl-mode-seg button { border: 0; background: transparent; color: var(--c-text-2); font: inherit; font-size: 13px; font-weight: 600; padding: 5px 16px; border-radius: 999px; cursor: pointer; transition: color 160ms ease, background 160ms ease; }
.pl-mode-seg button.active { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-1, 0 2px 8px rgba(37,99,235,.25)); }

/* 区块外壳 */
.pl-block { margin-top: 18px; }
.pl-kp-grid .pl-block, .pl-sync-body .pl-block:first-child { margin-top: 0; }
.pl-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pl-block-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--c-text-1); }
.pl-block-title::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--c-primary); }
.pl-block-sub { font-style: normal; font-size: 12px; font-weight: 500; color: var(--c-text-3); }

/* 精准模式：知识点网络画布 */
.pl-graph-card { border: 1px solid var(--c-border-2); border-radius: var(--radius-lg); background: linear-gradient(180deg, #f7f9fe, #eef2fb); overflow: hidden; }
.pl-graph-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 0; }
.pl-sec-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--c-text-1); }
/* 精准学·编辑本节知识点（精选层入口 + 弹窗勾选树） */
.pl-graph-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.pl-kp-src { font-size: 12px; color: var(--c-text-3); background: var(--c-fill-1); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.pl-kpedit-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--c-primary); background: var(--c-bg, #fff); border: 1px solid var(--c-primary); border-radius: 8px; padding: 4px 12px; cursor: pointer; transition: background 160ms ease; }
.pl-kpedit-btn:hover { background: var(--c-fill-1); }
.pl-kp-pick-list { max-height: 46vh; overflow: auto; border: 1px solid var(--c-border); border-radius: 10px; padding: 4px; }
.pl-kp-pick-row { display: flex; align-items: center; border-radius: 8px; }
.pl-kp-pick-row:hover { background: var(--c-fill-1); }
.pl-kp-pick-row.on { background: var(--c-fill-1); }
.pl-kp-pick-row .res-tree-caret { flex: 0 0 18px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; color: var(--c-text-3); }
.pl-kp-pick-label { display: flex; align-items: center; gap: 8px; flex: 1; padding: 7px 6px; cursor: pointer; min-width: 0; }
.pl-kp-pick-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-text-1); }
.pl-kp-pick-row.on .pl-kp-pick-name { color: var(--c-primary); font-weight: 600; }
/* 精准学·管理章节 / 显示配置 入口按钮 */
.pl-cfg-btn, .pl-chapmng-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--c-primary); background: var(--c-bg, #fff); border: 1px solid var(--c-primary); border-radius: 8px; padding: 5px 14px; cursor: pointer; transition: background 160ms ease; }
.pl-cfg-btn:hover, .pl-chapmng-btn:hover { background: var(--c-fill-1); }
.pl-chapmng-btn { padding: 3px 10px; }
/* 管理章节 · 可编辑章节树 */
.pl-chap-edit-list { max-height: 50vh; overflow: auto; border: 1px solid var(--c-border); border-radius: 10px; padding: 4px; }
.pl-chap-row { display: flex; align-items: center; gap: 4px; border-radius: 8px; padding: 2px 4px; }
.pl-chap-row:hover { background: var(--c-fill-1); }
.pl-chap-row .res-tree-caret { flex: 0 0 18px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; color: var(--c-text-3); }
.pl-chap-name { flex: 1; min-width: 0; padding: 5px 4px; cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-text-1); display: flex; align-items: center; gap: 6px; }
.pl-chap-rename { flex: 1; height: 28px; padding: 2px 8px; }
.pl-chap-ops { display: inline-flex; gap: 2px; opacity: 0; transition: opacity 120ms ease; }
.pl-chap-row:hover .pl-chap-ops { opacity: 1; }
.pl-chap-ops button { width: 26px; height: 26px; border: 1px solid var(--c-border); background: var(--c-bg, #fff); border-radius: 6px; cursor: pointer; color: var(--c-text-2); font-size: 13px; line-height: 1; }
.pl-chap-ops button:hover { background: var(--c-fill-1); color: var(--c-primary); border-color: var(--c-primary); }
.pl-chap-ops button.danger:hover { color: var(--c-danger, #dc2626); border-color: var(--c-danger, #dc2626); }
/* 显示配置 · 开关 */
.pl-cfg-sec { margin-bottom: 14px; }
.pl-cfg-sec-h { font-size: 12px; font-weight: 800; color: var(--c-text-3); margin: 4px 0 6px; }
.pl-cfg-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 6px; border-radius: 8px; }
.pl-cfg-row:hover { background: var(--c-fill-1); }
.pl-cfg-row-name { font-size: 13px; color: var(--c-text-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-switch { width: 38px; height: 22px; border-radius: 999px; background: var(--c-border); position: relative; cursor: pointer; flex: 0 0 auto; transition: background 160ms ease; }
.pl-switch.on { background: var(--c-primary); }
.pl-switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left 160ms ease; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.pl-switch.on .pl-switch-knob { left: 18px; }
/* 显示配置 · 版本分组（版本→册次 折叠）*/
.pl-cfg-vergroup { border-top: 1px solid var(--c-border); }
.pl-cfg-vergroup:first-child { border-top: 0; }
.pl-cfg-verhead { display: flex; align-items: center; gap: 6px; padding: 8px 4px; cursor: pointer; border-radius: 8px; }
.pl-cfg-verhead:hover { background: var(--c-fill-1); }
.pl-cfg-verhead .res-tree-caret, .pl-cfg-verhead .icn { color: var(--c-text-3); flex: 0 0 auto; }
.pl-cfg-vername { font-size: 13px; font-weight: 700; color: var(--c-text-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-cfg-vercount { font-size: 11px; color: var(--c-text-3); background: var(--c-fill-1); border-radius: 999px; padding: 1px 8px; margin-right: 4px; flex: 0 0 auto; }
.pl-cfg-volrow { padding-left: 26px; }
/* 显示配置 · 独立整页界面（学段 │ 学科 │ 版本教材 三栏级联） */
.pl-cfg-back { border: 1px solid var(--c-border); background: var(--c-bg, #fff); color: var(--c-text-2); border-radius: 8px; font-size: 13px; font-weight: 600; padding: 4px 12px; cursor: pointer; margin-right: 12px; vertical-align: middle; transition: color 160ms ease, border-color 160ms ease, background 160ms ease; }
.pl-cfg-back:hover { color: var(--c-primary); border-color: var(--c-primary); background: var(--c-fill-1); }
.pl-cfg-board { display: grid; grid-template-columns: 240px 240px 1fr; gap: 16px; align-items: start; }
.pl-cfg-pane { background: var(--c-bg, #fff); border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.pl-cfg-pane-h { font-size: 13px; font-weight: 800; color: var(--c-text-2); padding: 12px 14px; border-bottom: 1px solid var(--c-border); background: var(--c-fill-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-cfg-pane-body { padding: 8px; max-height: calc(100vh - 268px); overflow: auto; }
.pl-cfg-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; transition: background 140ms ease; }
.pl-cfg-item:hover { background: var(--c-fill-1); }
.pl-cfg-item.sel { background: var(--c-fill-1); box-shadow: inset 3px 0 0 var(--c-primary); }
.pl-cfg-item-name { font-size: 13px; color: var(--c-text-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-cfg-item.sel .pl-cfg-item-name { color: var(--c-primary); font-weight: 700; }
@media (max-width: 980px) { .pl-cfg-board { grid-template-columns: 1fr; } .pl-cfg-pane-body { max-height: 360px; } }
.pkg-canvas { position: relative; width: 100%; height: clamp(340px, 44vh, 460px); }
.pkg-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.pkg-edge { stroke: #c3cce0; stroke-width: 1.5; stroke-dasharray: 5 6; }
.pkg-edge.on { stroke: var(--c-primary); stroke-width: 2; stroke-dasharray: none; opacity: .85; }
.pkg-node { position: absolute; width: 54px; height: 54px; transform: translate(-50%, -50%); border: 0; background: transparent; padding: 0; cursor: pointer; z-index: 2; }
.pkg-orb { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 2px solid #dbe3f2; box-shadow: 0 4px 12px rgba(15,23,42,.08); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.pkg-gem { width: 30px; height: 30px; display: block; }
.pkg-gem svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 1px rgba(15,23,42,.18)); }
.pkg-gem .gem-base { fill: #b8c2d6; }
.pkg-gem .gem-top { fill: #d7deea; }
.pkg-node:hover .pkg-orb { transform: scale(1.08); box-shadow: 0 8px 18px rgba(15,23,42,.14); }
.pkg-node.hub .pkg-orb { width: 60px; height: 60px; }
.pkg-node.sel .pkg-orb { border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-bg, #eaf2ff), 0 8px 18px rgba(37,99,235,.28); }
.pkg-node.sel .pkg-gem .gem-base { fill: var(--c-primary); }
.pkg-node.sel .pkg-gem .gem-top { fill: #fff; opacity: .42; }
.pkg-label { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); width: 132px; text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--c-text-2); font-weight: 600; pointer-events: none; }
.pkg-node.sel .pkg-label { color: var(--c-primary); font-weight: 800; }

/* 当前知识点详情 */
.pl-kp-detail { margin-top: 16px; }
.pl-kp-detail-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--c-primary-bg, #eaf2ff); margin-bottom: 18px; }
.pl-kp-name { font-size: 16px; font-weight: 800; color: var(--c-text-1); }
.pl-kp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* 互动占位字形 */
.pl-ir-glyph { font-size: 26px; color: var(--c-primary); opacity: .55; }
.pl-ir-glyph.lg { font-size: 40px; }

/* 试题策展列表 */
.pl-q-list { display: flex; flex-direction: column; gap: 8px; }
.pl-q-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--c-border-2); border-radius: 10px; background: var(--c-bg-card); }
.pl-q-row:hover { border-color: var(--c-primary-border); }
.pl-q-idx { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pl-q-type { flex: none; font-size: 11px; font-weight: 700; color: var(--c-primary); background: var(--c-primary-bg, #eaf2ff); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.pl-q-stem { flex: 1; min-width: 0; font-size: 13px; color: var(--c-text-1); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-q-stem:hover { color: var(--c-primary); }
.pl-q-ops { flex: none; display: flex; gap: 12px; font-size: 13px; }
.pl-q-ops a { color: var(--c-primary); cursor: pointer; }
.pl-q-ops a.del { color: var(--c-error, #e5484d); }

/* 同步模式 tab */
.pl-tabs { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--c-border); margin-bottom: 18px; }
.pl-tab { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--c-text-2); padding: 8px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pl-tab:hover { color: var(--c-primary); }
.pl-tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 800; }

/* 策展选择弹窗 */
.pl-pick-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow: auto; }
.pl-pick-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--c-border-2); border-radius: 10px; cursor: pointer; }
.pl-pick-row:hover { border-color: var(--c-primary-border); background: var(--c-fill-1, #f6f8fc); }
.pl-pick-row.on { border-color: var(--c-primary); background: var(--c-primary-bg, #eaf2ff); }
.pl-pick-row.dis { opacity: .5; cursor: not-allowed; }
.pl-pick-row input { flex: none; width: 16px; height: 16px; }
.pl-pick-type { flex: none; font-size: 11px; font-weight: 700; color: var(--c-primary); background: #fff; border: 1px solid var(--c-primary-border, #c7d8f7); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.pl-pick-diff { flex: none; font-size: 12px; color: var(--c-text-3); }
.pl-pick-stem { flex: 1; min-width: 0; font-size: 13px; color: var(--c-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 查看弹窗 */
.pl-view-ir-stage { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--c-primary-bg, #eaf2ff), #f4f7fc); display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-border-2); }
.pl-view-ir-ph { text-align: center; }
.pl-view-cw { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.pl-view-card-ph { margin-top: 14px; height: 160px; border: 1.5px dashed var(--c-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--c-fill-1, #f6f7f9); }

/* tab 计数小徽标 */
.pl-tab-n { display: inline-block; margin-left: 5px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: var(--c-fill-2, #eef1f6); color: var(--c-text-3); font-size: 11px; font-weight: 700; text-align: center; vertical-align: middle; }
.pl-tab.active .pl-tab-n { background: var(--c-primary-bg, #eaf2ff); color: var(--c-primary); }
.pl-kp-tab-body { min-height: 90px; }

/* 例题/测验 策展工具条 + 试题卡列表 */
.pl-cur-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pl-cur-count { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--c-text-2); }
.pl-cur-count b { color: var(--c-primary); font-size: 15px; }
.pl-qcard-list { display: flex; flex-direction: column; gap: 14px; }

/* 互动素材生成式封面（渐变 + 播放标识 + 主题标题） */
.pl-ir-cover { position: relative; overflow: hidden; }
.pl-ir-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-ir-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; filter: drop-shadow(0 2px 6px rgba(15,23,42,.28)); transition: transform 160ms ease; }
.res-ir-card:hover .pl-ir-play { transform: translate(-50%, -50%) scale(1.09); }
.pl-ir-cover-title { position: absolute; left: 10px; right: 10px; bottom: 8px; color: #fff; font-size: 12.5px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1180px) {
  .pl-kp-grid { grid-template-columns: 1fr; }
  .pl-view-cw { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .res-workbench { grid-template-columns: 1fr; align-items: start; }
  /* 单列堆叠时取消粘性与视口封顶，树列表恢复固定高，避免树卡片悬浮遮挡下方列表 */
  .res-tree-card { position: static; max-height: none; }
  .res-tree-list { flex: none; max-height: 360px; }
  .res-resource-item { grid-template-columns: 120px 1fr; }
  .res-item-side { grid-column: 1 / -1; justify-content: flex-end; }
  .res-mini-stats,
  .res-question-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Teacher mobile prototype ===== */
.tm-page {
  min-height: calc(100vh - 116px);
}
.tm-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 420px minmax(240px, 320px);
  gap: 22px;
  align-items: start;
}
.tm-map,
.tm-spec {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-1);
  padding: 20px;
}
.tm-map-title,
.tm-spec-title {
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 14px;
}
.tm-map-list {
  display: grid;
  gap: 10px;
}
.tm-map-card {
  width: 100%;
  border: 1px solid var(--c-border-3);
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  padding: 13px;
  display: flex;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 180ms ease;
  color: var(--c-text);
  font: inherit;
}
.tm-map-card:hover,
.tm-map-card.active {
  border-color: var(--c-primary-border);
  background: var(--c-primary-bg);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
.tm-map-card b,
.tm-map-card em {
  display: block;
}
.tm-map-card b {
  font-size: 14px;
  margin-bottom: 4px;
}
.tm-map-card em {
  color: var(--c-text-3);
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
}
.tm-map-ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--c-bg-card);
  box-shadow: var(--shadow-1);
  flex-shrink: 0;
}
.tm-note-card {
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--c-dark-3), var(--c-dark));
  color: #fff;
  box-shadow: var(--shadow-2);
}
.tm-note-card b,
.tm-note-card span {
  display: block;
}
.tm-note-card span {
  margin-top: 8px;
  color: rgba(255,255,255,0.74);
  font-size: 12px;
  line-height: 1.7;
}
.tm-phone-wrap {
  display: flex;
  justify-content: center;
}
.tm-phone {
  width: 390px;
  min-height: 812px;
  padding: 12px;
  border-radius: 38px;
  background: #0f172a;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.28);
  position: sticky;
  top: 12px;
}
.tm-status {
  height: 34px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 700;
}
.tm-app {
  min-height: 742px;
  max-height: 742px;
  overflow-y: auto;
  border-radius: 30px;
  background: var(--c-bg);
  padding: 18px 16px 92px;
}
.tm-app::-webkit-scrollbar { width: 0; }
.tm-app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tm-hello {
  color: var(--c-text-3);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.tm-app-head h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.tm-avatar {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c-primary), #60a5fa);
  color: #fff;
  font-weight: 900;
  box-shadow: var(--shadow-blue);
}
.tm-module-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.tm-module-tabs button,
.tm-segment button,
.tm-type-grid button,
.tm-office-grid button {
  font: inherit;
  cursor: pointer;
}
.tm-module-tabs button {
  border: 1px solid var(--c-border);
  background: var(--c-bg-card);
  color: var(--c-text-2);
  height: 32px;
  padding: 0 13px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.tm-module-tabs button.active {
  color: #fff;
  border-color: var(--c-primary);
  background: var(--c-primary);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}
.tm-screen {
  display: grid;
  gap: 12px;
}
.tm-card,
.tm-form-card,
.tm-score-panel {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-3);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow-1);
}
.tm-hero-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: linear-gradient(135deg, #fff, var(--c-primary-bg));
}
.tm-kicker {
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 900;
}
.tm-hero-card h3 {
  margin: 6px 0 0;
  font-size: 18px;
  line-height: 1.35;
}
.tm-form-card {
  display: grid;
  gap: 10px;
}
.tm-form-card label {
  color: var(--c-text-3);
  font-size: 12px;
  font-weight: 800;
}
.tm-form-card select {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--c-border);
  border-radius: 13px;
  background: var(--c-bg-card);
  color: var(--c-text);
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
}
.tm-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tm-segment button,
.tm-type-grid button {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-bg-card);
  color: var(--c-text-2);
  height: 34px;
  font-size: 13px;
  font-weight: 800;
}
.tm-segment button.active,
.tm-type-grid button.active {
  color: var(--c-primary);
  border-color: var(--c-primary-border);
  background: var(--c-primary-bg);
}
.tm-knowledge,
.tm-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tm-primary-btn,
.tm-secondary-btn {
  width: 100%;
  border: none;
  border-radius: var(--radius-pill);
  min-height: 42px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.tm-primary-btn {
  color: #fff;
  background: var(--c-primary);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}
.tm-secondary-btn {
  margin-top: 10px;
  color: var(--c-primary);
  background: var(--c-primary-bg);
  border: 1px solid var(--c-primary-border);
}
.tm-row-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tm-material-row,
.tm-student-row,
.tm-question-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--c-border-3);
}
.tm-material-row:first-of-type,
.tm-student-row:first-of-type,
.tm-question-row:first-of-type {
  border-top: none;
}
.tm-material-row > span:first-child {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--c-primary);
  background: var(--c-primary-bg);
  font-weight: 900;
  flex-shrink: 0;
}
.tm-material-row div,
.tm-question-row div {
  flex: 1;
  min-width: 0;
}
.tm-material-row b,
.tm-material-row em,
.tm-question-row b,
.tm-question-row em,
.tm-student-row span,
.tm-student-row em {
  display: block;
}
.tm-material-row em,
.tm-question-row em,
.tm-student-row em,
.tm-muted {
  color: var(--c-text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}
.tm-material-row button,
.tm-student-row button {
  border: none;
  background: var(--c-primary-bg);
  color: var(--c-primary);
  border-radius: var(--radius-pill);
  height: 28px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.tm-chip-grid span {
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--c-bg);
  border: 1px solid var(--c-border-3);
  font-size: 12px;
  font-weight: 800;
}
.tm-form-grid {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 8px 10px;
  font-size: 13px;
}
.tm-form-grid span {
  color: var(--c-text-3);
}
.tm-type-grid,
.tm-metric-grid,
.tm-office-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.tm-assignment-card p {
  color: var(--c-text-3);
  font-size: 12px;
  margin: 8px 0 14px;
}
.tm-score-panel {
  background: linear-gradient(135deg, var(--c-dark-3), var(--c-dark));
  color: #fff;
}
.tm-score-panel span,
.tm-score-panel em {
  display: block;
  color: rgba(255,255,255,0.68);
  font-size: 12px;
  font-style: normal;
}
.tm-score-panel b {
  display: block;
  font-size: 44px;
  line-height: 1;
  margin: 8px 0;
}
.tm-comment-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--c-bg);
  border: 1px solid var(--c-border-3);
  font-size: 13px;
  line-height: 1.7;
}
.tm-metric {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-3);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-1);
}
.tm-metric span {
  display: block;
  color: var(--c-text-3);
  font-size: 12px;
  font-weight: 800;
}
.tm-metric b {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 900;
}
.tm-bar-row {
  display: grid;
  grid-template-columns: 88px 1fr 38px;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  font-size: 12px;
}
.tm-bar-row i {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  overflow: hidden;
}
.tm-bar-row i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-primary), #60a5fa);
}
.tm-switch-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
}
.tm-switch-card p {
  margin: 4px 0 0;
  color: var(--c-text-3);
  font-size: 12px;
}
.tm-question-row > span {
  width: 52px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--c-primary);
  background: var(--c-primary-bg);
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}
.tm-office-grid button {
  min-height: 112px;
  border: 1px solid var(--c-border-3);
  border-radius: 20px;
  background: var(--c-bg-card);
  color: var(--c-text);
  padding: 14px;
  text-align: left;
  box-shadow: var(--shadow-1);
}
.tm-office-grid span,
.tm-office-grid b,
.tm-office-grid em {
  display: block;
}
.tm-office-grid span {
  font-size: 22px;
  margin-bottom: 10px;
}
.tm-office-grid em {
  color: var(--c-text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
  margin-top: 4px;
}
.tm-office-preview {
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--c-bg);
  border: 1px solid var(--c-border-3);
  line-height: 1.8;
}
.tm-spec p {
  margin: 0 0 14px;
  color: var(--c-text-2);
  line-height: 1.7;
}
.tm-spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.tm-spec-list span {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--c-primary-bg);
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 800;
}
.tm-flow {
  display: grid;
  gap: 10px;
}
.tm-flow > b {
  margin-bottom: 2px;
}
.tm-flow-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.tm-flow-step i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-primary);
  color: #fff;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}
.tm-flow-step span {
  color: var(--c-text-2);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 1320px) {
  .tm-layout {
    grid-template-columns: minmax(240px, 1fr) 420px;
  }
  .tm-spec {
    grid-column: 1 / -1;
  }
}
@media (max-width: 980px) {
  .tm-layout {
    grid-template-columns: 1fr;
  }
  .tm-phone {
    position: static;
  }
}

/* ===== Standalone teacher mobile showcase ===== */
#teacher-mobile-root {
  min-height: 100vh;
}
.edu-showcase {
  min-height: 100vh;
  padding: 44px 34px 36px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 108%, rgba(21, 182, 255, 0.28), transparent 34%),
    radial-gradient(circle at 16% 18%, rgba(70, 118, 255, 0.26), transparent 30%),
    linear-gradient(180deg, #071a4d 0%, #071541 48%, #030814 100%);
  overflow-x: hidden;
}
.edu-stage {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}
.edu-stage::after {
  content: "TEACHER APP DESIGN";
  position: fixed;
  left: 30px;
  right: 30px;
  bottom: 10px;
  color: rgba(255,255,255,0.05);
  font-size: clamp(42px, 8vw, 112px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
}
.edu-cover-head {
  margin-bottom: 30px;
}
.edu-cover-head h1 {
  margin: 0;
  font-size: clamp(44px, 6vw, 74px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.05em;
  text-shadow: 0 12px 0 rgba(255,255,255,0.08), 0 22px 40px rgba(0,0,0,0.28);
}
.edu-inspire {
  display: inline-flex;
  align-items: center;
  height: 38px;
  margin-top: 18px;
  padding: 0 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.9);
  color: #2563eb;
  font-weight: 800;
  box-shadow: inset 0 -4px 10px rgba(37,99,235,0.08), 0 14px 34px rgba(0,0,0,0.18);
}
.edu-phone-grid {
  display: grid;
  grid-template-columns: repeat(2, 334px);
  gap: 34px;
  align-items: start;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.edu-phone-grid.single {
  grid-template-columns: 356px;
}
.edu-phone-grid.single .edu-phone {
  width: 356px;
  height: 768px;
}
.edu-phone {
  width: 334px;
  height: 724px;
  padding: 10px;
  border-radius: 28px;
  background: linear-gradient(145deg, #ffffff, #dfeaff 58%, #f7fbff);
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(255,255,255,0.72);
}
.edu-phone-screen {
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #f5f8ff;
  color: #14203b;
}
.edu-statusbar {
  height: 38px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  background: rgba(245,248,255,0.92);
  position: relative;
  z-index: 4;
}
.edu-app {
  height: calc(100% - 38px);
  overflow-y: auto;
  padding: 14px 16px 88px;
  background:
    radial-gradient(circle at 92% 6%, rgba(86, 196, 255, 0.32), transparent 22%),
    linear-gradient(180deg, #eef8ff 0%, #f7f9ff 34%, #f6f7fb 100%);
}
.edu-app::-webkit-scrollbar {
  width: 0;
}
.edu-app.detail {
  padding-top: 0;
  background: linear-gradient(180deg, #dff5ff 0%, #f5f7ff 32%, #f7f8fc 100%);
}
.edu-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.edu-topbar h2,
.edu-detail-hero h2 {
  margin: 0;
  color: #111827;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.edu-topbar button {
  margin-top: 6px;
  border: none;
  background: transparent;
  color: #4b5563;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.edu-round-action {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--c-bg-card);
  color: #2563eb;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(72, 112, 244, 0.14);
}
.edu-search {
  height: 40px;
  margin-bottom: 14px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.86);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #a0aec0;
  box-shadow: 0 10px 24px rgba(72, 112, 244, 0.08);
}
.edu-search span {
  font-size: 12px;
  font-weight: 700;
}
.edu-hero-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.edu-hero-card {
  min-height: 108px;
  border: none;
  border-radius: 17px;
  padding: 16px 14px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 28px rgba(37,99,235,0.2);
  transform: translateY(0);
  transition: all 180ms ease;
}
.edu-hero-card.active,
.edu-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 36px rgba(37,99,235,0.3);
}
.edu-hero-card.blue {
  background: linear-gradient(145deg, #35c8ff, #1d8bff);
}
.edu-hero-card.orange {
  background: linear-gradient(145deg, #ffcf5d, #ff6a62);
}
.edu-hero-card.purple {
  background: linear-gradient(145deg, #b996ff, #5a7cff);
}
.edu-hero-card.green {
  background: linear-gradient(145deg, #8bf0d2, #37c995);
}
.edu-hero-card strong,
.edu-hero-card span,
.edu-hero-card i {
  display: block;
  position: relative;
  z-index: 1;
}
.edu-hero-card strong {
  font-size: 19px;
  font-weight: 900;
}
.edu-hero-card span {
  margin-top: 5px;
  font-size: 11px;
  opacity: 0.86;
  font-weight: 700;
}
.edu-hero-card i {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,0.32);
  font-style: normal;
  font-weight: 900;
  font-size: 18px;
}
.edu-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  margin: 8px 0 14px;
}
.edu-icon-grid button {
  border: none;
  background: transparent;
  color: #1f2937;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.edu-icon-grid span {
  width: 34px;
  height: 34px;
  margin: 0 auto 5px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--c-bg-card);
  box-shadow: 0 9px 18px rgba(59, 130, 246, 0.12);
}
.edu-icon-grid button.active span {
  background: #eaf2ff;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.18), 0 9px 18px rgba(59, 130, 246, 0.18);
}
.edu-icon-grid b {
  display: block;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.edu-card {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 30px rgba(84, 115, 170, 0.12);
}
.edu-card.floating {
  margin-top: -28px;
  position: relative;
  z-index: 2;
}
.edu-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.edu-section-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
}
.edu-section-title a {
  color: #7b8aa5;
  font-size: 11px;
  font-weight: 800;
}
.edu-task {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(219,228,240,0.72);
}
.edu-task:first-child {
  border-top: none;
}
.edu-task i {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: #eaf2ff;
}
.edu-task.orange i { background: #fff1d9; }
.edu-task.green i { background: #dcfce7; }
.edu-task b,
.edu-task span {
  display: block;
}
.edu-task b {
  font-size: 12px;
  color: #111827;
}
.edu-task span {
  margin-top: 3px;
  color: #8a97ad;
  font-size: 10px;
  font-weight: 700;
}
.edu-task a {
  color: #3b82f6;
  font-size: 10px;
  font-weight: 900;
}
.edu-resource-tabs,
.edu-tag-row,
.edu-type-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.edu-resource-tabs span,
.edu-tag-row span,
.edu-type-cloud span,
.edu-type-cloud button {
  padding: 6px 9px;
  border: none;
  border-radius: 999px;
  background: #f1f5ff;
  color: #71809b;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.edu-resource-tabs .active,
.edu-tag-row span,
.edu-type-cloud button.active {
  color: #2563eb;
  background: #eaf2ff;
}
.edu-resource-card {
  margin-top: 10px;
  padding: 13px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff8dc, #e8f7ff);
}
.edu-resource-card b {
  font-size: 12px;
}
.edu-resource-card p {
  margin: 5px 0 0;
  color: #7b8aa5;
  font-size: 11px;
  font-weight: 700;
}
.edu-bottom-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
  height: 60px;
  padding: 7px 20px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 -10px 26px rgba(84, 115, 170, 0.08);
}
.edu-bottom-nav span {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #9aa7bc;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 14px;
  transition: all 160ms ease;
}
.edu-bottom-nav span:hover {
  background: #f1f6ff;
}
.edu-bottom-nav i {
  width: 22px;
  height: 22px;
  border-radius: 9px;
  background: #eef2f7;
}
.edu-bottom-nav .active {
  color: #2563eb;
}
.edu-bottom-nav .active i {
  background: #dbeafe;
}
.edu-home-indicator {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 116px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #111827;
  z-index: 6;
}
.edu-detail-hero {
  min-height: 164px;
  margin: 0 -16px 12px;
  padding: 16px 20px 54px;
  display: grid;
  grid-template-columns: 28px 1fr 78px;
  gap: 10px;
  align-items: start;
  background:
    radial-gradient(circle at 84% 34%, rgba(37,99,235,0.22), transparent 28%),
    linear-gradient(145deg, #e7f8ff, #d5ecff);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}
.edu-detail-hero p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 700;
}
.edu-back {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #111827;
  font-size: 26px;
  font-weight: 400;
}
.edu-hero-ill {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255,255,255,0.72);
  font-size: 34px;
  box-shadow: 0 14px 30px rgba(84, 115, 170, 0.16);
  transform: rotate(8deg);
}
.edu-pill-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: -34px 0 12px;
  padding: 0 2px;
  position: relative;
  z-index: 3;
}
.edu-pill-tabs button {
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  color: #6b7280;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.edu-pill-tabs button.active {
  color: #2563eb;
  background: var(--c-bg-card);
  box-shadow: 0 10px 22px rgba(84, 115, 170, 0.16);
}
.edu-select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: none;
  border-radius: 13px;
  background: #f3f7ff;
  color: #1f2937;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.edu-generate-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 17px;
  background: linear-gradient(135deg, #3878ff, #54c5ff);
  color: #fff;
}
.edu-generate-card h3 {
  margin: 0;
  font-size: 16px;
}
.edu-generate-card p {
  margin: 5px 0 0;
  color: rgba(255,255,255,0.78);
  font-size: 11px;
  line-height: 1.5;
}
.edu-generate-card button,
.edu-main-btn {
  border: none;
  border-radius: 999px;
  background: var(--c-bg-card);
  color: #2563eb;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  padding: 10px 13px;
}
.edu-main-btn {
  width: 100%;
  margin-top: 12px;
  color: #fff;
  background: #377cf6;
  box-shadow: 0 12px 24px rgba(55, 124, 246, 0.24);
}
.edu-two-col,
.edu-metrics,
.edu-office-tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.edu-mini-card,
.edu-metrics div,
.edu-office-tools button {
  min-height: 86px;
  border: none;
  border-radius: 18px;
  background: var(--c-bg-card);
  padding: 14px;
  box-shadow: 0 14px 30px rgba(84, 115, 170, 0.12);
}
.edu-mini-card b,
.edu-mini-card span {
  display: block;
}
.edu-mini-card b {
  color: #111827;
  font-size: 14px;
}
.edu-mini-card span {
  margin-top: 7px;
  color: #8190a8;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 700;
}
.edu-progress span,
.edu-progress strong {
  display: block;
}
.edu-progress span {
  color: #8190a8;
  font-size: 11px;
  font-weight: 900;
}
.edu-progress strong {
  margin: 6px 0;
  font-size: 38px;
  line-height: 1;
  color: #111827;
  font-weight: 900;
}
.edu-progress i,
.edu-bar i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #e8eef8;
  overflow: hidden;
}
.edu-progress i em,
.edu-bar i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #377cf6, #56c4ff);
}
.edu-comment {
  margin-top: 10px;
  padding: 12px;
  border-radius: 15px;
  background: #f1f6ff;
  color: #64748b;
  font-size: 11px;
  line-height: 1.6;
  font-weight: 800;
}
.edu-metrics div span,
.edu-metrics div b {
  display: block;
}
.edu-metrics div span {
  color: #8190a8;
  font-size: 11px;
  font-weight: 900;
}
.edu-metrics div b {
  margin-top: 7px;
  color: #111827;
  font-size: 24px;
  font-weight: 900;
}
.edu-bar {
  display: grid;
  grid-template-columns: 92px 1fr 36px;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}
.edu-switch-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.edu-switch-line h3,
.edu-switch-line p {
  margin: 0;
}
.edu-switch-line h3 {
  font-size: 16px;
}
.edu-switch-line p {
  margin-top: 5px;
  color: #8190a8;
  font-size: 11px;
  font-weight: 800;
}
.edu-switch-line > span {
  padding: 8px 14px;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 12px;
  font-weight: 900;
}
.edu-switch-line > button {
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fee2e2;
  color: #ef4444;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.edu-switch-line > button.on {
  background: #dcfce7;
  color: #16a34a;
}
.edu-office-tools button {
  color: #111827;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.edu-office-tools span,
.edu-office-tools b,
.edu-office-tools em {
  display: block;
}
.edu-office-tools span {
  font-size: 24px;
  margin-bottom: 8px;
}
.edu-office-tools b {
  font-size: 13px;
  font-weight: 900;
}
.edu-office-tools em {
  margin-top: 5px;
  color: #8190a8;
  font-size: 10px;
  line-height: 1.5;
  font-style: normal;
  font-weight: 800;
}
.edu-active-summary > div:first-child {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
}
.edu-active-summary > div:first-child > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #eaf2ff;
  font-size: 23px;
}
.edu-active-summary b,
.edu-active-summary p {
  display: block;
  margin: 0;
}
.edu-active-summary b {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}
.edu-active-summary p {
  margin-top: 4px;
  color: #8190a8;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 800;
}
.edu-flow-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.edu-flow-mini i {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1f6ff;
  color: #5b6b85;
  font-size: 10px;
  line-height: 1.2;
  font-style: normal;
  font-weight: 800;
}
.edu-form-summary {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 7px 10px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 15px;
  background: #f6f8ff;
}
.edu-form-summary span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
}
.edu-form-summary b {
  color: #1f2937;
  font-size: 12px;
  font-weight: 900;
}
.edu-stage-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.edu-stage-toggle.three {
  grid-template-columns: repeat(3, 1fr);
}
.edu-stage-toggle button {
  height: 32px;
  border: none;
  border-radius: 999px;
  background: #f1f5ff;
  color: #71809b;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.edu-stage-toggle button.active {
  color: #2563eb;
  background: #eaf2ff;
}
.edu-home-shortcut {
  min-height: 82px;
  border: none;
  border-radius: 18px;
  background: var(--c-bg-card);
  padding: 14px;
  color: #111827;
  text-align: left;
  box-shadow: 0 14px 30px rgba(84, 115, 170, 0.12);
  font: inherit;
  cursor: pointer;
}
.edu-home-shortcut span,
.edu-home-shortcut b {
  display: block;
}
.edu-home-shortcut span {
  font-size: 24px;
  margin-bottom: 8px;
}
.edu-home-shortcut b {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
}
.edu-class-head,
.edu-profile-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.edu-class-head h3,
.edu-class-head p,
.edu-profile-card h3,
.edu-profile-card p {
  margin: 0;
}
.edu-class-head h3,
.edu-profile-card h3 {
  color: #111827;
  font-size: 18px;
  font-weight: 900;
}
.edu-class-head p,
.edu-profile-card p {
  margin-top: 5px;
  color: #8190a8;
  font-size: 11px;
  font-weight: 800;
}
.edu-class-head > span {
  padding: 8px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.edu-profile-card {
  justify-content: flex-start;
  background: linear-gradient(135deg, #ffffff, #eaf2ff);
}
.edu-profile-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(145deg, #377cf6, #56c4ff);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(55, 124, 246, 0.24);
}
.teacher-app {
  padding-bottom: 92px;
}
.teacher-topbar {
  align-items: center;
}
.teacher-hero {
  min-height: 118px;
  margin-bottom: 12px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 58px;
  gap: 12px;
  align-items: center;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 16%, rgba(255,255,255,0.34), transparent 30%),
    linear-gradient(145deg, #377cf6 0%, #56c4ff 100%);
  box-shadow: 0 18px 34px rgba(55, 124, 246, 0.24);
}
.teacher-hero span,
.teacher-hero h3,
.teacher-hero b {
  display: block;
}
.teacher-hero span {
  font-size: 12px;
  font-weight: 900;
  opacity: 0.82;
}
.teacher-hero h3 {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.36;
  font-weight: 900;
}
.teacher-hero b {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255,255,255,0.24);
  font-size: 26px;
}
.teacher-scene-tabs {
  display: flex;
  gap: 8px;
  margin: 0 -16px 14px;
  padding: 0 16px 2px;
  overflow-x: auto;
}
.teacher-scene-tabs::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.teacher-scene-tabs button {
  min-width: 66px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  color: #72809a;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(84,115,170,0.08);
}
.teacher-scene-tabs button.active {
  color: #2563eb;
  background: var(--c-bg-card);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.14), 0 12px 24px rgba(55,124,246,0.16);
}
.teacher-scene-tabs i {
  margin-right: 4px;
  font-style: normal;
}
.teacher-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.teacher-home-banner {
  margin-bottom: 12px;
  padding: 16px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,0.36), transparent 28%),
    linear-gradient(135deg, #7c3aed 0%, #377cf6 52%, #38bdf8 100%);
  box-shadow: 0 18px 34px rgba(55, 124, 246, 0.22);
}
.teacher-home-banner span,
.teacher-home-banner h3 {
  display: block;
}
.teacher-home-banner span {
  font-size: 11px;
  font-weight: 900;
  opacity: 0.82;
}
.teacher-home-banner h3 {
  margin: 7px 0 14px;
  font-size: 17px;
  line-height: 1.38;
  font-weight: 900;
}
.teacher-home-banner button {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  color: #2563eb;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.teacher-quick.four {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.teacher-quick button,
.teacher-live-card button,
.teacher-notice-card button,
.teacher-action-grid button,
.teacher-switch-row button,
.teacher-schedule {
  border: none;
  font: inherit;
  cursor: pointer;
}
.teacher-quick button {
  min-height: 96px;
  padding: 15px;
  border-radius: 18px;
  color: #fff;
  text-align: left;
  box-shadow: 0 16px 28px rgba(37,99,235,0.18);
}
.teacher-quick.four button {
  min-height: 74px;
  padding: 11px 8px;
  text-align: center;
}
.teacher-quick button.blue {
  background: linear-gradient(145deg, #35c8ff, #1d8bff);
}
.teacher-quick button.orange {
  background: linear-gradient(145deg, #ffcf5d, #ff6a62);
}
.teacher-quick button.green {
  background: linear-gradient(145deg, #87efac, #22c55e);
}
.teacher-quick button.purple {
  background: linear-gradient(145deg, #c084fc, #7c3aed);
}
.teacher-quick b,
.teacher-quick span {
  display: block;
}
.teacher-quick b {
  font-size: 17px;
  font-weight: 900;
}
.teacher-quick.four b {
  font-size: 14px;
}
.teacher-quick span {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 800;
  opacity: 0.82;
}
.teacher-quick.four span {
  font-size: 9px;
}
.teacher-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.teacher-metrics div {
  min-height: 74px;
  padding: 12px;
  border-radius: 17px;
  background: var(--c-bg-card);
  box-shadow: 0 12px 24px rgba(84,115,170,0.10);
}
.teacher-metrics span,
.teacher-metrics b {
  display: block;
}
.teacher-metrics span {
  color: #8190a8;
  font-size: 11px;
  font-weight: 900;
}
.teacher-metrics b {
  margin-top: 7px;
  color: #111827;
  font-size: 23px;
  line-height: 1;
  font-weight: 900;
}
.edu-task.red i {
  background: #fee2e2;
}
.teacher-schedule {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid rgba(219,228,240,0.72);
  background: transparent;
  color: #111827;
  text-align: left;
}
.teacher-schedule:first-of-type {
  border-top: none;
}
.teacher-schedule b {
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
}
.teacher-schedule span {
  font-size: 12px;
  font-weight: 900;
}
.teacher-schedule small {
  display: block;
  margin-top: 3px;
  color: #8a97ad;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
}
.teacher-schedule em {
  padding: 6px 8px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #2563eb;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.teacher-live-card,
.teacher-notice-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  background: linear-gradient(135deg, #ffffff, #eaf7ff);
}
.teacher-live-card h3,
.teacher-live-card p,
.teacher-live-card span,
.teacher-notice-card h3,
.teacher-notice-card p {
  margin: 0;
}
.teacher-live-card span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
}
.teacher-live-card h3,
.teacher-notice-card h3 {
  margin-top: 5px;
  font-size: 16px;
  font-weight: 900;
}
.teacher-live-card p,
.teacher-notice-card p {
  margin-top: 5px;
  color: #8190a8;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 800;
}
.teacher-live-card button,
.teacher-notice-card button {
  padding: 10px 12px;
  border-radius: 999px;
  color: #fff;
  background: #377cf6;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(55,124,246,0.22);
}
.teacher-action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.teacher-action-grid.compact {
  margin-bottom: 0;
}
.teacher-action-grid button {
  min-height: 58px;
  padding: 8px 6px;
  border-radius: 16px;
  background: var(--c-bg-card);
  color: #1f2937;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(84,115,170,0.10);
}
.teacher-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid rgba(219,228,240,0.72);
}
.teacher-switch-row:first-of-type {
  border-top: none;
}
.teacher-switch-row span {
  color: #1f2937;
  font-size: 12px;
  font-weight: 900;
}
.teacher-switch-row button {
  padding: 7px 12px;
  border-radius: 999px;
  background: #f1f5ff;
  color: #71809b;
  font-size: 11px;
  font-weight: 900;
}
.teacher-switch-row button.active {
  color: #16a34a;
  background: #dcfce7;
}
.teacher-status-pills,
.teacher-score-bands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.teacher-status-pills span,
.teacher-score-bands span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f1f6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
}
.teacher-contact-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.teacher-contact-row span {
  padding: 12px 8px;
  border-radius: 15px;
  background: #f1f6ff;
  color: #2563eb;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}
.teacher-trend {
  height: 112px;
  display: flex;
  align-items: end;
  gap: 9px;
  padding: 12px;
  border-radius: 16px;
  background: #f1f6ff;
}
.teacher-trend i {
  flex: 1;
  min-height: 22px;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #56c4ff, #377cf6);
}
.teacher-score-bands {
  margin-top: 10px;
}
.report-cloud {
  margin-bottom: 12px;
}
.teacher-notice-card.assist {
  background: linear-gradient(135deg, #fff7ed, #eaf7ff);
}
.teacher-bottom-nav {
  grid-template-columns: repeat(5, 1fr);
  padding-left: 12px;
  padding-right: 12px;
}
@media (max-width: 820px) {
  .edu-showcase {
    padding: 28px 16px;
  }
  .edu-phone-grid {
    grid-template-columns: 334px;
  }
  .edu-phone-grid.single {
    grid-template-columns: minmax(320px, 356px);
  }
  .edu-phone-grid.single .edu-phone {
    width: min(356px, calc(100vw - 32px));
  }
}

/* ============================================================
   教辅试题录入工作台 (MaterialEntryWorkbench) · 前缀 mw-
   ============================================================ */
.mw-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 16px 20px;
  margin-bottom: 16px;
}
/* 顶部操作条 · 批量生产入口 */
.mw-actionbar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 16px; }

/* 批量生产 · 选资源类型弹窗 */
.mw-batchtypes { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.mw-batchtype {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; text-align: left; cursor: pointer;
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); transition: all .15s;
}
.mw-batchtype:hover:not(.disabled) { border-color: var(--c-primary); box-shadow: var(--shadow-1); }
.mw-batchtype .ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--c-primary-soft, rgba(37,99,235,.1)); color: var(--c-primary); }
.mw-batchtype .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mw-batchtype .nm { font-size: 15px; font-weight: 600; color: var(--c-text); display: flex; align-items: center; gap: 8px; }
.mw-batchtype .nm .soon { font-size: 11px; font-weight: 500; font-style: normal; color: var(--c-text-3); background: var(--c-bg-hover); padding: 2px 7px; border-radius: 999px; }
.mw-batchtype .ds { font-size: 12px; color: var(--c-text-3); }
.mw-batchtype.disabled { cursor: not-allowed; opacity: .6; }
.mw-batchtype.disabled .ic { background: var(--c-bg-hover); color: var(--c-text-3); }

.mw-topbar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 6px; }
.mw-topbar-stats { display: flex; gap: 22px; }
.mw-stat { text-align: right; }
.mw-stat b { font-size: 20px; color: var(--c-text); font-weight: 700; }
.mw-stat span { display: block; font-size: 12px; color: var(--c-text-3); margin-top: 2px; }

/* 两栏布局（左右等高） */
.mw-workbench {
  display: grid;
  grid-template-columns: var(--mw-tree-w, 312px) 1fr;
  gap: 16px;
  align-items: stretch;
  position: relative;
}
.mw-workbench.mw-resizing { user-select: none; }

/* 章节目录 ⇄ 右栏 之间的拖拽分隔条（落在 16px 的 gap 里） */
.mw-resizer {
  position: absolute; top: 0; bottom: 0;
  left: var(--mw-tree-w, 312px); width: 16px;
  cursor: col-resize; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
.mw-resizer-bar {
  width: 4px; height: 56px; border-radius: 3px;
  background: var(--c-border); transition: background .15s, height .15s;
}
.mw-resizer:hover .mw-resizer-bar,
.mw-resizer.dragging .mw-resizer-bar {
  background: var(--c-primary, #2563eb); height: 80px;
}

/* 左栏 · 目录树（高度跟随右栏） */
.mw-tree-pane {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mw-tree-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--c-border-3); flex: none;
}
.mw-tree-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--c-text); }
.mw-tree-body { padding: 8px; flex: 1; overflow: auto; }

.mw-node {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 8px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--c-text-2); font-size: 13px;
  position: relative; user-select: none;
}
.mw-node:hover { background: var(--c-bg-hover); }
.mw-node.active { background: var(--c-primary-bg); color: var(--c-primary); font-weight: 600; }
/* 拖拽排序 / 改层级 视觉反馈 */
.mw-node.dragging { opacity: .45; }
.mw-node.drop-before { box-shadow: inset 0 2px 0 0 var(--c-primary); }
.mw-node.drop-after { box-shadow: inset 0 -2px 0 0 var(--c-primary); }
.mw-node.drop-inside { background: var(--c-primary-bg); outline: 1px dashed var(--c-primary); outline-offset: -1px; }
.mw-node-caret {
  width: 18px; height: 18px; display: grid; place-items: center;
  flex: none; color: var(--c-text-3); transition: transform .15s;
}
.mw-node-caret.open { transform: rotate(90deg); }
.mw-node-caret.leaf { visibility: hidden; }
.mw-node-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-node-count {
  flex: none; font-size: 11px; padding: 0 7px; height: 18px; line-height: 18px;
  border-radius: var(--radius-pill); background: var(--c-bg-active); color: var(--c-text-3);
}
.mw-node.active .mw-node-count { background: var(--c-bg-card); color: var(--c-primary); }
.mw-node-actions { display: none; align-items: center; gap: 2px; flex: none; }
.mw-node:hover .mw-node-actions { display: flex; }
.mw-node-actions .mw-iconbtn {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: var(--radius-sm); color: var(--c-text-3); cursor: pointer;
}
.mw-node-actions .mw-iconbtn:hover { background: rgba(15,23,42,.08); color: var(--c-text); }
.mw-node-actions .mw-iconbtn.danger:hover { background: var(--c-error-bg); color: var(--c-error); }
.mw-node-edit {
  flex: 1; min-width: 0; font-size: 13px; padding: 3px 6px;
  border: 1px solid var(--c-primary-border); border-radius: var(--radius-sm); outline: none;
}

/* ===== 书籍文件 · AI 章节拆分（章节页码归类） ===== */
/* 章节树上的「N页」徽标 */
.be-pagebadge {
  flex: none; margin-left: 6px; padding: 0 6px; height: 17px; line-height: 17px;
  font-size: 11px; font-weight: 600; border-radius: 9px;
  background: var(--c-primary-bg, #eff4ff); color: var(--c-primary, #2563eb);
}
/* AI 章节拆分弹窗 · 选源 */
.be-flabel { font-size: 13px; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }
.be-srcbox {
  display: flex; align-items: center; gap: 4px; padding: 12px 14px;
  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg-soft, #f8fafc);
  font-size: 14px; color: var(--c-text);
}
/* 进度条 */
.be-progbar { height: 8px; border-radius: 5px; background: var(--c-border-3, #eef1f5); overflow: hidden; }
.be-progfill { height: 100%; border-radius: 5px; background: var(--c-primary, #2563eb); transition: width .3s ease; }
/* 评审网格（逐页 + 章节下拉） */
.be-review-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
  max-height: 52vh; overflow: auto; padding: 4px 2px;
}
.be-pcard { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 8px; background: var(--c-bg-card); }
.be-pcard.unset { border-color: var(--c-warning-border, #f0c36d); background: var(--c-warning-bg, #fffbe6); }
.be-pthumb { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: #f1f5f9; }
.be-pthumb.zoomable { cursor: zoom-in; }
.be-pthumb.zoomable img { transition: transform .18s ease; }
.be-pthumb.zoomable:hover img { transform: scale(1.05); }
.be-pthumb.zoomable:hover .be-tocpick-zoom { background: rgba(15, 23, 42, .82); }
.be-pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.be-pthumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--c-text-4); }
.be-pno {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 8px;
  font-size: 11px; background: rgba(15,23,42,.62); color: #fff;
}
.be-pprinted {
  position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 8px;
  font-size: 11px; background: rgba(37,99,235,.82); color: #fff;
}
.be-psel {
  width: 100%; margin-top: 8px; font-size: 12px; padding: 5px 6px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); outline: none;
  background: var(--c-bg-card); color: var(--c-text); cursor: pointer;
}
/* 「手选」角标：该页是用户在「选择书籍图片」里手动挑的（node.pages[].m=1），非 AI 章节拆分产出 */
.be-pmanual {
  position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 8px;
  font-size: 11px; background: rgba(22,163,74,.86); color: #fff;
}
/* 「切块」角标：AI 章节拆分把一张跨两章的物理页按切分线切成上/下两块分归两节（node.pages[].part） */
.be-pfrag {
  position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 8px;
  font-size: 11px; background: rgba(124,58,237,.86); color: #fff;
}
/* ============================================================
   页面标记（book_page_marks，迁移 0166）：右栏「本节页面」的识别结果纠错登记
   ------------------------------------------------------------
   ① .be-pmarked 红角标：这一页被标记有问题且未处理（贴在页缩略图左下，与「手选」绿角标错位不打架）
   ② .bf-marks / .bf-mark-row：页图下方的标记清单（状态 / 覆盖页 / 说明 / 截图 / 处理按钮）
   ③ .bf-audit-why / .bf-marks-cnt：列表页「状态」列下的打回原因摘要与未处理标记数
   ============================================================ */
.be-pmarked {
  position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 8px;
  font-size: 11px; font-weight: 700; background: rgba(225,29,72,.9); color: #fff;
  box-shadow: 0 1px 4px rgba(225,29,72,.35);
}
.bf-marks { margin-top: 14px; }
.bf-mark-row {
  border: 1px solid var(--c-border); border-left: 3px solid var(--c-border);
  border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 8px; background: var(--c-bg-card);
}
.bf-mark-row.open { border-left-color: #e11d48; background: rgba(225,29,72,.035); }
.bf-mark-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bf-mark-desc { margin-top: 6px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.bf-mark-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bf-mark-imgs img {
  width: 84px; height: 64px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--c-border); cursor: zoom-in; transition: box-shadow .15s;
}
.bf-mark-imgs img:hover { box-shadow: var(--shadow-2); }
.bf-audit-why {
  margin-top: 3px; max-width: 150px; font-size: 11px; line-height: 1.5; color: #be123c;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help;
}
.bf-marks-cnt { margin-top: 3px; font-size: 11px; font-weight: 700; color: #e11d48; cursor: help; }
/* 归章为后台长任务、无逐页进度 → 进度条走「不确定态」流光动画 */
.be-progbar-indet { position: relative; }
.be-progbar-indet .be-progfill {
  border-radius: 5px;
  background: linear-gradient(90deg, transparent, var(--c-primary, #2563eb), transparent);
  animation: be-indet 1.4s ease-in-out infinite;
}
@keyframes be-indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
/* AI 目录识别 / AI 章节拆分 running 阶段的「运行日志 · 实时监控」面板（增量 tail /log）——可折叠、自动滚到底 */
.be-joblog-wrap { margin-top: 14px; border: 1px solid var(--c-border-2, #e5e9f0); border-radius: 8px; overflow: hidden; background: var(--c-bg-2, #f7f9fc); }
.be-joblog-head { display: flex; align-items: center; gap: 4px; padding: 7px 12px; cursor: pointer; user-select: none; font-size: 13px; border-bottom: 1px solid var(--c-border-3, #eef1f5); background: var(--c-card-bg, #fff); }
.be-joblog-head:hover { background: var(--c-hover, #f2f5fa); }
.be-joblog {
  margin: 0; max-height: 200px; overflow: auto; padding: 10px 12px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
  color: #cfe3ff; background: #0f172a; -webkit-overflow-scrolling: touch;
}
/* 「选择书籍图片」骨架占位：还没加载出来的页 —— 先按真实总页数铺满，保证滚动条长度正确、
   滚到哪才去取哪一批（IntersectionObserver）。呼吸动画表明「在等它，不是坏了」。 */
.be-pskel {
  width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center;
  gap: 8px; padding: 0 16px; background: var(--c-bg-subtle, #f1f5f9);
  animation: be-pskel-breathe 1.6s ease-in-out infinite;
}
.be-pskel-bar { height: 7px; border-radius: 4px; background: rgba(100,116,139,.18); }
.be-pskel-bar.s { width: 62%; }
@keyframes be-pskel-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .be-pskel { animation: none; } }
/* AI 创建目录 · 从 PDF 选目录页：可勾选的页卡片（点整卡切换选中） */
.be-tocpick-card {
  position: relative; cursor: pointer; padding: 6px;
  border: 2px solid transparent; border-radius: var(--radius); background: var(--c-bg-card);
  transition: border-color .15s, box-shadow .15s;
}
.be-tocpick-card:hover { border-color: var(--c-primary, #2563eb); }
.be-tocpick-card.sel { border-color: var(--c-primary, #2563eb); box-shadow: 0 0 0 3px var(--c-primary-soft, rgba(37, 99, 235, .14)); }
.be-tocpick-check {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, .92); color: var(--c-text-4); border: 1px solid var(--c-border); z-index: 2;
}
.be-tocpick-card.sel .be-tocpick-check { background: var(--c-primary, #2563eb); color: #fff; border-color: var(--c-primary, #2563eb); }
.be-tocpick-zoom {
  position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 6px; padding: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
  background: rgba(15, 23, 42, .55); color: #fff; border: none; cursor: zoom-in; z-index: 2;
}
.be-tocpick-zoom:hover { background: rgba(15, 23, 42, .78); }

/* ============================================================
   「选择书籍图片」近全屏弹窗（BookSelectPagesPanel）：把内联选页面板搬进大弹窗，
   缩略图更大更清晰；放大层 BookPageLightbox（z-index:9999）永远盖在本弹窗之上。
   ============================================================ */
.be-pickmodal-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fadeIn .18s ease;
}
.be-pickmodal-box {
  width: 94vw; height: 92vh; max-width: 1600px;
  background: var(--c-bg-card); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-3, 0 18px 56px rgba(0, 0, 0, .4));
  animation: modalIn .22s ease;
}
.be-pickmodal-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--c-border-3, rgba(0, 0, 0, .08));
}
.be-pickmodal-body {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: 12px 18px; overflow: hidden;
}
.be-pickmodal-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px; border-top: 1px solid var(--c-border-3, rgba(0, 0, 0, .08));
}
/* 弹窗内网格：填满正文区、独占滚动（IntersectionObserver 的 root），缩略图列更宽 */
.be-pickmodal-grid {
  flex: 1 1 auto; min-height: 0; max-height: none;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
/* 本面板专属放大按钮：常驻、醒目、明确的放大镜。用附加类，不改共享的 .be-tocpick-zoom
   （否则会波及 AI 章节拆分 / 从 PDF 选目录页 两处网格）。 */
.be-pick-zoom {
  width: 30px; height: 30px; font-size: 15px; border-radius: 8px;
  background: rgba(15, 23, 42, .72); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  border: 1.5px solid rgba(255, 255, 255, .85); cursor: zoom-in;
}
.be-pick-zoom:hover { background: var(--c-primary, #2563eb); }

/* 书籍章节树拖拽（重排/改层级）+ 章节页面拖到章节移动；仅作用于书籍录入树 .be-dnd，不影响教辅工作台 */
.be-dnd[draggable="true"] { cursor: grab; }
.be-dnd[draggable="true"]:active { cursor: grabbing; }
.be-dnd.be-drop-inside, .be-dnd.be-drop-page { background: var(--c-primary-soft, rgba(37, 99, 235, .12)); box-shadow: inset 0 0 0 2px var(--c-primary, #2563eb); border-radius: 6px; }
.be-dnd.be-drop-before { box-shadow: inset 0 2px 0 0 var(--c-primary, #2563eb); }
.be-dnd.be-drop-after { box-shadow: inset 0 -2px 0 0 var(--c-primary, #2563eb); }
/* 章节页面缩略图上的「移动 / 删除」按钮（悬浮工具条） */
.be-npcard { position: relative; }
.be-npactions { position: absolute; top: 6px; right: 6px; z-index: 3; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.be-npcard:hover .be-npactions { opacity: 1; }
.be-npbtn {
  padding: 2px 8px; border: none; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.6;
  cursor: pointer; background: rgba(15, 23, 42, .58); color: #fff; transition: background .15s;
}
.be-npbtn:hover { background: var(--c-primary, #2563eb); }
.be-npbtn.danger:hover { background: var(--c-danger, #dc2626); }
/* 「移动到…」弹窗的章节列表 */
.be-movepick-list { max-height: 52vh; overflow: auto; border: 1px solid var(--c-border); border-radius: 10px; padding: 4px; }
.be-movepick-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .14s; }
.be-movepick-row:hover { background: var(--c-primary-soft, rgba(37, 99, 235, .1)); }
.be-movepick-row.cur { cursor: not-allowed; opacity: .5; }
.be-movepick-row.cur:hover { background: transparent; }
.be-movepick-name { font-size: 13px; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.be-movepick-cnt { font-size: 11px; color: var(--c-text-3); background: var(--c-fill-1, #f1f5f9); border-radius: 999px; padding: 1px 7px; flex: 0 0 auto; }
.be-movepick-curtag { font-size: 11px; color: var(--c-text-3); flex: 0 0 auto; }
/* 右栏：某节点的页面缩略图（固定尺寸·完整展示不裁剪·点击放大；全部限制在白卡内） */
.be-node-pages { display: flex; flex-wrap: wrap; gap: 12px; }
.be-npcard {
  position: relative; display: block; border: 1px solid var(--c-border); border-radius: var(--radius);
  overflow: hidden; width: 210px; height: 272px; background: #f8fafc; cursor: zoom-in;
  transition: box-shadow .15s, border-color .15s; flex: 0 0 auto;
}
.be-npcard:hover { border-color: var(--c-primary, #2563eb); box-shadow: var(--shadow-2); }
.be-npcard img { width: 100%; height: 100%; object-fit: contain; display: block; background: #f8fafc; }
.be-npcard .be-pthumb-ph { width: 100%; height: 100%; }

/* 书籍章节页面：可缩放/翻页的大图弹窗 */
.bf-lb-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8, 12, 24, .82); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 28px;
  animation: mw-lb-fade .15s ease;
}
.bf-lb-box {
  width: min(94vw, 1180px); height: min(92vh, 940px);
  background: var(--c-bg-card); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 18px 56px rgba(0, 0, 0, .45);
}
.bf-lb-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--c-border-3);
  font-size: 13px; font-weight: 600; color: var(--c-text);
}
.bf-lb-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.bf-lb-title .bf-lb-tt { flex: none; }
.bf-lb-title .bf-lb-cap {
  min-width: 0; font-weight: 500; color: var(--c-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-lb-tools { display: flex; align-items: center; gap: 6px; }
.bf-lb-tools button {
  border: 1px solid var(--c-border); background: var(--c-bg-card); border-radius: 6px;
  min-width: 30px; height: 28px; padding: 0 8px; cursor: pointer; font-size: 15px;
  line-height: 1; color: var(--c-text-2);
}
.bf-lb-tools button:hover { background: var(--c-bg-hover); color: var(--c-text); }
.bf-lb-tools .bf-lb-pct { font-size: 12px; color: var(--c-text-3); min-width: 46px; text-align: center; }
.bf-lb-body {
  position: relative; flex: 1; overflow: hidden; background: #0b1020;
  display: flex; align-items: center; justify-content: center;
}
.bf-lb-body img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none; transition: transform .04s linear;
}
.bf-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, .86); color: #0f172a; font-size: 28px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); z-index: 2;
}
.bf-lb-nav:hover { background: #fff; }
.bf-lb-nav.prev { left: 14px; } .bf-lb-nav.next { right: 14px; }
.bf-lb-hint { padding: 8px 14px; text-align: center; font-size: 12px; color: var(--c-text-4); border-top: 1px solid var(--c-border-3); }

/* 右栏 */
.mw-right {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  min-height: 480px;
}
.mw-right-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--c-border-3);
}
.mw-right-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--c-text); }
.mw-right-body { padding: 18px 20px; }

/* 试题卡片 */
.mw-qcard {
  border: 1px solid var(--c-border); border-radius: var(--radius); padding: 14px 16px;
  margin-bottom: 12px; transition: box-shadow .15s, border-color .15s;
}
.mw-qcard:hover { border-color: var(--c-border-2); box-shadow: var(--shadow-1); }
.mw-qcard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mw-qcard-no { font-weight: 700; color: var(--c-text-3); font-size: 13px; }
.mw-qcard-stem { color: var(--c-text); font-size: 14px; line-height: 1.7; }
.mw-qcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.mw-qcard-actions { display: flex; gap: 14px; }
.mw-qcard-actions a { font-size: 13px; cursor: pointer; }

/* 题目 ID 标识 */
.qb-id {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px; color: var(--c-text-4);
  background: var(--c-bg-active); border: 1px solid var(--c-border-3);
  padding: 1px 6px; border-radius: 4px; letter-spacing: .02em;
  flex-shrink: 0; user-select: all;
}

/* 题型徽标 */
.mw-type {
  font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: var(--radius-pill);
  background: var(--c-primary-bg); color: var(--c-primary);
}
.mw-type.t-多选 { background: #f0eaff; color: #7c4dff; }
.mw-type.t-判断 { background: var(--c-success-bg); color: var(--c-success); }
.mw-type.t-填空 { background: var(--c-warning-bg); color: var(--c-warning); }
.mw-type.t-解答 { background: #e6f4ff; color: #0a84d6; }

/* 难度星 */
.mw-diff { color: var(--c-warning); font-size: 13px; letter-spacing: 1px; }
.mw-diff .off { color: var(--c-text-4); }

/* 编辑器 · 分段题型切换 */
.mw-seg { display: inline-flex; background: var(--c-bg); border-radius: var(--radius); padding: 3px; gap: 2px; }
.mw-seg button {
  border: none; background: transparent; cursor: pointer; font-size: 13px;
  padding: 6px 16px; border-radius: var(--radius-sm); color: var(--c-text-2); font-weight: 500;
}
.mw-seg button.active { background: var(--c-bg-card); color: var(--c-primary); font-weight: 600; box-shadow: var(--shadow-1); }

/* 选项行 */
.mw-opt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mw-opt-key {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--c-bg-active); color: var(--c-text-2);
  font-weight: 700; font-size: 13px;
}
.mw-opt-correct {
  display: flex; align-items: center; gap: 6px; flex: none; font-size: 13px;
  color: var(--c-text-3); cursor: pointer; white-space: nowrap;
}
.mw-opt-correct.on { color: var(--c-success); font-weight: 600; }

/* 预览 */
.mw-preview { border: 1px dashed var(--c-border-2); border-radius: var(--radius); padding: 18px 20px; background: var(--c-bg); }
.mw-preview-stem { font-size: 15px; color: var(--c-text); line-height: 1.8; margin-bottom: 14px; }
.mw-preview-opt { display: flex; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--c-text-2); }
.mw-preview-opt .k { font-weight: 700; color: var(--c-text); }
.mw-answer-box {
  margin-top: 16px; border-radius: var(--radius); background: var(--c-success-bg);
  border: 1px solid var(--c-success-border); padding: 12px 16px; font-size: 14px; line-height: 1.7;
}
.mw-answer-box .lbl { font-weight: 700; color: var(--c-success); margin-right: 6px; }

@media (max-width: 1024px) {
  .mw-workbench { grid-template-columns: 1fr; }
  .mw-resizer { display: none; }
}

/* ============================================================
   试题编辑器 v2 · 大题 + 小题 + Markdown
   ============================================================ */
/* 题型标签行（大题 / 小题通用） */
.mw-typetabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mw-typetabs button {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-size: 13px; padding: 5px 14px; border-radius: var(--radius-sm);
  color: var(--c-text-2); font-weight: 500;
}
.mw-typetabs button:hover { background: var(--c-bg-hover); }
.mw-typetabs button.active { background: var(--c-primary); color: #fff; font-weight: 600; }

/* 行式字段标签（左侧色条） */
.mw-flabel {
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700;
  color: var(--c-text); margin: 18px 0 8px; padding-left: 10px; position: relative;
}
.mw-flabel::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px;
  border-radius: 2px; background: var(--c-primary);
}
.mw-flabel.g::before { background: var(--c-success); }
.mw-flabel.o::before { background: var(--c-warning); }
.mw-flabel .mw-flabel-extra { margin-left: auto; display: flex; gap: 8px; align-items: center; font-weight: 500; }
.mw-flabel .lnk { color: var(--c-primary); cursor: pointer; font-size: 13px; }

/* 头部：题型 + 能力 + 保存条 */
.mw-ed-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.mw-ed-line { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.mw-ed-line .lab { font-size: 13px; color: var(--c-text-2); white-space: nowrap; }
.mw-abilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 4px; }
.mw-savebar { display: flex; gap: 10px; }
.mw-btn-green { background: var(--c-success) !important; border-color: var(--c-success) !important; color: #fff !important; }
.mw-btn-red { background: var(--c-error) !important; border-color: var(--c-error) !important; color: #fff !important; }

/* AI / 视频 入口 */
.mw-toolbtn { display: inline-flex; align-items: center; gap: 6px; }
.mw-video-tip { font-size: 12px; color: var(--c-text-3); }

/* 小题块 */
.mw-sub { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px; margin-top: 10px; background: var(--c-bg-card); }
.mw-sub-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mw-sub-tab {
  border: 1px solid var(--c-border); background: var(--c-bg-card); cursor: pointer;
  font-size: 13px; padding: 5px 14px; border-radius: var(--radius-sm); color: var(--c-text-2);
}
.mw-sub-tab.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }
.mw-sub-add {
  width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-sm); background: var(--c-success); color: #fff; border: none;
}
.mw-sub-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.mw-stepper { display: inline-flex; align-items: center; border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.mw-stepper button { border: none; background: var(--c-bg); width: 30px; height: 30px; cursor: pointer; color: var(--c-text-2); font-size: 16px; }
.mw-stepper button:hover { background: var(--c-bg-hover); }
.mw-stepper input { border: none; width: 56px; text-align: center; outline: none; font-size: 13px; }

/* 选项行（含勾选 + Markdown） */
.mw-optline { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.mw-optcheck {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px;
  cursor: pointer; user-select: none;
}
.mw-optcheck .box {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--c-border-2);
  display: grid; place-items: center; color: #fff; background: var(--c-bg-card);
}
.mw-optcheck.on .box { background: var(--c-success); border-color: var(--c-success); }
.mw-optcheck .kk { font-weight: 700; font-size: 13px; color: var(--c-text-2); }
.mw-optcheck.on .kk { color: var(--c-success); }
.mw-optline .grow { flex: 1; min-width: 0; }
.mw-optline .del { flex: none; padding-top: 6px; }

/* ---- Markdown 编辑器 ---- */
.mw-md { border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-bg-card); }
.mw-md-toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 5px 8px; background: var(--c-bg); border-bottom: 1px solid var(--c-border-3);
}
.mw-md-btn {
  min-width: 28px; height: 28px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer;
  color: var(--c-text-2); font-size: 14px;
}
.mw-md-btn:hover { background: rgba(15,23,42,.08); color: var(--c-text); }
.mw-md-sep { width: 1px; height: 18px; background: var(--c-border); margin: 0 4px; }
.mw-md-tabs { margin-left: auto; display: inline-flex; background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.mw-md-tabs button { border: none; background: transparent; cursor: pointer; font-size: 12px; padding: 4px 12px; color: var(--c-text-2); }
.mw-md-tabs button.active { background: var(--c-primary); color: #fff; font-weight: 600; }
.mw-md-area {
  width: 100%; border: none; outline: none; resize: vertical; padding: 12px 14px;
  font-size: 14px; line-height: 1.7; color: var(--c-text); font-family: inherit; display: block;
}
.mw-md-preview { padding: 12px 14px; font-size: 14px; line-height: 1.8; color: var(--c-text); overflow: auto; }
.mw-md-preview img { max-width: 100%; border-radius: 6px; }
.mw-md-preview p { margin: 0 0 8px; }
.mw-md-preview table { border-collapse: collapse; }
.mw-md-preview th, .mw-md-preview td { border: 1px solid var(--c-border); padding: 4px 10px; }
.mw-md-preview:empty::before { content: "（暂无内容）"; color: var(--c-text-3); }
.mw-md-foot { padding: 4px 12px; font-size: 11px; color: var(--c-text-3); border-top: 1px solid var(--c-border-3); background: var(--c-bg); }
.mw-md.compact .mw-md-area { padding: 8px 10px; }
.mw-md.compact .mw-md-foot { display: none; }

/* 预览态 / 展示视图 · 小题 */
.mw-pv-sub { border-top: 1px dashed var(--c-border-2); padding-top: 14px; margin-top: 14px; }
.mw-pv-subhead { font-weight: 700; color: var(--c-text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }

/* 试题展示视图（列表卡片内） */
.mw-view-stem { font-size: 14px; color: var(--c-text); line-height: 1.8; margin-bottom: 8px; }
/* 学科网 qml 富文本：公式是内联 <img class="xkw-math-img">，按行内对齐；段落/选项不留大空隙 */
.mw-view-stem img, .mw-view-ans img { max-width: 100%; vertical-align: middle; }
.mw-view-stem p, .mw-view-ans p { margin: 0 0 4px; }
.mw-view-stem .qml-sq, .mw-view-stem .qml-options { margin-top: 4px; }
.mw-view-stem .ques-no { color: var(--c-text-3); margin-right: 2px; }
/* 客观题选项：每个选项独占一行。学科网 <table class="qml-og"> 原把 A/B/C/D 横排成一行的单元格，
   这里把它们竖排（单元格转块级）；<p class="qopt"> 段落本就独占行，仅补点行距。裸内联选项由
   mwWrapOptions() 在选项前补 <br> 换行。 */
.mw-view-stem .qml-og, .mw-view-stem .qml-og tbody, .mw-view-stem .qml-og tr { display: block; width: 100%; }
.mw-view-stem .qml-og td { display: block; width: 100% !important; border: 0; padding: 1px 0; }
.mw-view-stem p.qopt { margin: 2px 0; }
/* 结构化选项（标准化后题干 content 不含选项，由 q.options 字段渲染，每项独占一行） */
.mw-view-opts { font-size: 14px; color: var(--c-text); line-height: 1.8; margin: 6px 0 8px; }
.mw-opt-row { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0; }
.mw-opt-key { flex: none; font-weight: 600; color: var(--c-text-2); }
.mw-opt-txt { flex: 1; min-width: 0; }
.mw-opt-txt img { max-width: 100%; vertical-align: middle; }
.mw-opt-txt p { margin: 0; display: inline; }
.mw-view-desc { font-size: 14px; color: var(--c-text); line-height: 1.8; margin-bottom: 4px; }
/* 答案 + 解析包成带背景的块，和题干区分 */
.mw-ansbox {
  margin-top: 10px; padding: 12px 16px;
  background: var(--c-success-bg);
  border: 1px solid var(--c-success-border);
  border-left: 3px solid var(--c-success);
  border-radius: var(--radius);
}
.mw-view-ans { font-size: 13px; color: var(--c-text-2); line-height: 1.7; }
.mw-view-ans b { color: var(--c-success); }
.mw-view-ana { font-size: 13px; color: var(--c-text-2); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--c-success-border); line-height: 1.7; }
.mw-view-ana b { color: var(--c-success); }
.mw-opt-ok { color: var(--c-success); font-weight: 700; margin-left: 6px; }
.mw-view-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-border-3); }
.mw-kp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mw-kp .lab { font-size: 13px; color: var(--c-text-2); }
.mw-kp-add { color: var(--c-primary); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 2px; }
.mw-kp-add:hover { opacity: .8; }
.mw-kp-empty { color: var(--c-text-3); font-size: 12px; background: var(--c-bg); padding: 2px 8px; border-radius: var(--radius-sm); }
.mw-kp-input { font-size: 13px; padding: 2px 8px; border: 1px solid var(--c-primary-border); border-radius: var(--radius-sm); outline: none; width: 130px; }
.mw-ans-toggle { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--c-success-border); background: var(--c-success-bg); color: var(--c-success); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.mw-ans-toggle:hover { background: var(--c-success); color: #fff; }

/* ---- 同步资源 · 试题卡扩展样式 ---- */
.sync-qcard .mw-qcard-head { flex-wrap: wrap; gap: 6px 8px; }
.sync-qcard-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sync-q-status { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-pill); }
.sync-q-status.s-pub { background: var(--c-success-bg); color: var(--c-success); }
.sync-q-status.s-unpub { background: var(--c-bg-active); color: var(--c-text-3); }
.sync-q-act { font-size: 13px; cursor: pointer; color: var(--c-primary); }
.sync-q-act:hover { opacity: .8; }



/* 右列：分类导航条 + 内容（与左侧目录列等高） */
.mw-right-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mw-right-col .mw-right { flex: 1; }

/* 资源分类导航条 */
.mw-catbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  padding: 8px 12px; flex: none;
}
.mw-cattab {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-size: 14px; padding: 8px 16px; border-radius: var(--radius); color: var(--c-text-2); font-weight: 500;
}
.mw-cattab:hover { background: var(--c-bg-hover); color: var(--c-text); }
.mw-cattab.active { background: var(--c-primary); color: #fff; font-weight: 600; box-shadow: var(--shadow-blue); }
.mw-cattab .icn { width: 15px; height: 15px; }
.mw-cat-cnt {
  font-size: 11px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--c-bg-active); color: var(--c-text-3);
}
.mw-cattab.active .mw-cat-cnt { background: rgba(255,255,255,.25); color: #fff; }

/* 知识卡片类型筛选 */
.mw-card-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mw-card-filter .lab { font-size: 13px; color: var(--c-text-2); }
.mw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--c-border); background: var(--c-bg-card); cursor: pointer;
  font-size: 13px; padding: 4px 12px; border-radius: var(--radius-pill); color: var(--c-text-2);
}
.mw-chip:hover { border-color: var(--c-border-2); color: var(--c-text); }
.mw-chip.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.mw-chip em { font-style: normal; font-size: 11px; opacity: .7; }

/* 知识卡片列表（单列竖排，不并列） */
.mw-card-grid { display: flex; flex-direction: column; gap: 14px; }
.mw-card { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 14px 16px; background: var(--c-bg-card); }
.mw-card:hover { box-shadow: var(--shadow-1); }
.mw-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mw-card-title { font-weight: 700; color: var(--c-text); font-size: 15px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-card-type { flex: none; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--c-primary-bg); color: var(--c-primary); }
.mw-card-type.t-html { background: #f0eaff; color: #7c4dff; }
.mw-card-type.t-image { background: var(--c-warning-bg); color: var(--c-warning); }
.mw-card-actions { display: flex; gap: 12px; align-items: center; flex: none; margin-left: auto; }
.mw-card-actions a { font-size: 13px; cursor: pointer; }

/* 知识卡片「制作动画」：金字塔只读卡头部条 + 标记/生成中/播放 控件 */
.mw-kc-card .mw-kc-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mw-kc-card .mw-kc-bar h3 { font-size: 16px; font-weight: 800; color: var(--c-text); min-width: 0; }
.mw-anim-ctl { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.mw-anim-done { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--c-success); }
.mw-anim-ing { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; font-weight: 700; color: var(--c-primary); padding: 3px 10px; border-radius: var(--radius-pill); background: var(--c-primary-bg); border: 1px solid var(--c-primary); }
.mw-anim-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid color-mix(in srgb, var(--c-primary) 25%, transparent); border-top-color: var(--c-primary); border-radius: 50%; animation: mw-spin-kf .7s linear infinite; }
/* 动画播放弹窗 */
.mw-anim-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.mw-anim-tab { font-size: 13px; font-weight: 600; padding: 5px 16px; border-radius: var(--radius-pill); border: 1px solid var(--c-border); background: var(--c-bg-card); color: var(--c-text-2); cursor: pointer; }
.mw-anim-tab.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.mw-anim-stage { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.mw-anim-frame, .mw-anim-video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.mw-card-body { font-size: 14px; color: var(--c-text-2); line-height: 1.7; max-height: 240px; overflow: auto; }
/* 图片类知识卡片：整页长图完整展示，不裁剪 */
.mw-card-body.is-image { max-height: none; overflow: visible; }
.mw-card-img { width: 100%; border-radius: var(--radius-sm); display: block; }
.mw-card-img:hover { opacity: .92; }

/* ---- 图片卡片 · 原图/审核通过 切换 ---- */
.mw-img-toggle {
  display: inline-flex; gap: 2px;
  background: var(--c-bg-active); border-radius: 8px; padding: 3px;
  margin-bottom: 10px;
}
.mw-img-toggle-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--c-text-3);
  cursor: pointer; transition: all .15s; border: none; background: transparent;
}
.mw-img-toggle-btn:hover:not(.is-active) { color: var(--c-text-2); }
.mw-img-toggle-btn.is-active {
  background: var(--c-bg-card); color: var(--c-text);
  font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.mw-img-toggle-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-success); flex-shrink: 0;
}

/* ---- 图片卡片 wrap + 悬停放大提示 ---- */
.mw-img-card-wrap {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  cursor: zoom-in;
}
.mw-img-card-zoom-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: rgba(0, 0, 0, .32); color: #fff;
  font-size: 12px; font-weight: 500;
  opacity: 0; transition: opacity .18s;
  pointer-events: none;
}
.mw-img-card-wrap:hover .mw-img-card-zoom-hint { opacity: 1; }
.mw-img-card-wrap .mw-card-img { cursor: zoom-in; }

/* ---- 图片状态标签 ---- */
.mw-img-status-row { margin-top: 7px; display: flex; align-items: center; gap: 6px; }
.mw-img-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.mw-img-status--orig {
  background: var(--c-bg-active); color: var(--c-text-3);
}
.mw-img-status--gen {
  background: var(--c-success-bg); color: var(--c-success);
}
.mw-card-caption { font-size: 12px; color: var(--c-text-3); margin-top: 6px; }
.mw-card-addr { display: flex; align-items: center; gap: 5px; margin-top: 8px; padding: 5px 10px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; color: var(--c-text-2); background: var(--c-bg); border: 1px solid var(--c-border-3); border-radius: var(--radius-sm); word-break: break-all; }
.mw-card-addr .icn { color: var(--c-text-3); flex: none; }
.mw-tos-addr { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; color: var(--c-success); font-weight: 600; }
.mw-card-iframe { width: 100%; height: 200px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg-card); }
.mw-card-link { font-size: 14px; color: var(--c-primary); cursor: pointer; word-break: break-all; }

/* 图片 AI 批量生成 / 审核 */
.mw-gen-nodes { border: 1px solid var(--c-border); border-radius: var(--radius); max-height: 220px; overflow: auto; margin-bottom: 4px; }
.mw-gen-node { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--c-text-2); cursor: pointer; border-bottom: 1px solid var(--c-border-3); }
.mw-gen-node:last-child { border-bottom: none; }
.mw-gen-node:hover { background: var(--c-bg-hover); }
.mw-gen-node.disabled { color: var(--c-text-4); cursor: not-allowed; }
.mw-gen-node .nm { flex: 1; min-width: 0; }
.mw-gen-node .cnt { font-size: 12px; color: var(--c-text-3); flex: none; }

.mw-progress-bar { height: 8px; border-radius: 999px; background: var(--c-bg-active); overflow: hidden; }
.mw-progress-bar .fill { height: 100%; background: var(--c-primary); border-radius: 999px; transition: width .4s ease; }

.mw-gen-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-border-3); }
.mw-gen-row .grow { flex: 1; min-width: 0; }
.mw-gen-thumb { width: 64px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--c-border); flex: none; }
.mw-gen-status { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: var(--radius-pill); flex: none; }
.mw-gen-status.s-queue { background: var(--c-bg-active); color: var(--c-text-3); }
.mw-gen-status.s-gen { background: var(--c-warning-bg); color: var(--c-warning); }
.mw-gen-status.s-done { background: var(--c-success-bg); color: var(--c-success); }
.mw-gen-status.s-fail { background: var(--c-error-bg); color: var(--c-error); }

.mw-review-row { display: flex; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-border-3); }
.mw-review-pair { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.mw-review-img { flex: 1; min-width: 0; text-align: center; }
.mw-review-img img { width: 100%; max-height: 150px; object-fit: contain; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg-card); }
.mw-review-img .lbl { display: block; font-size: 12px; color: var(--c-text-3); margin-bottom: 6px; }
.mw-review-img .lbl.gen { color: var(--c-primary); font-weight: 600; }
.mw-review-meta { width: 170px; flex: none; }

/* 图片可点击放大 */
.mw-review-img-zoom {
  width: 100%; max-height: 150px; object-fit: contain;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg-card);
  cursor: zoom-in; transition: opacity .15s, box-shadow .15s;
  display: block;
}
.mw-review-img-zoom:hover {
  opacity: .88;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* Lightbox 遮罩 */
.mw-lightbox-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, .72);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  backdrop-filter: blur(4px);
  animation: mw-lb-fade .15s ease;
}
@keyframes mw-lb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mw-lightbox-box {
  background: var(--c-bg-elev);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  max-width: min(90vw, 900px);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: mw-lb-up .18s ease;
}
@keyframes mw-lb-up {
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.mw-lightbox-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--c-border-3);
  flex-shrink: 0;
}
.mw-lightbox-label {
  font-size: 14px; font-weight: 600; color: var(--c-text-1);
}
.mw-lightbox-close {
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-3); cursor: pointer; transition: background .12s;
  border: none; background: transparent;
}
.mw-lightbox-close:hover { background: var(--c-bg-hover); color: var(--c-text-1); }
.mw-lightbox-body {
  flex: 1; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--c-bg);
}
.mw-lightbox-img {
  max-width: 100%; max-height: calc(90vh - 120px);
  object-fit: contain; border-radius: 4px;
  display: block;
}
.mw-lightbox-hint {
  padding: 8px 18px; text-align: center;
  font-size: 12px; color: var(--c-text-4);
  border-top: 1px solid var(--c-border-3);
  flex-shrink: 0;
}

/* 查看任务 · 角标 */
.mw-task-badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--c-error); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px;
  border-radius: 999px; text-align: center; pointer-events: none;
}
/* 查看任务 · 历史列表 */
.mw-tasklist { display: flex; flex-direction: column; gap: 0; }
.mw-taskrow {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 2px; border-bottom: 1px solid var(--c-border-3);
}
.mw-taskrow:last-child { border-bottom: none; }
.mw-taskrow-icon {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary-soft, rgba(37,99,235,.1)); color: var(--c-primary);
}
.mw-taskrow-icon--q   { background: rgba(22,163,74,.1);  color: #16a34a; }
.mw-taskrow-icon--ocr { background: rgba(234,88,12,.1);  color: #ea580c; }
.mw-taskrow-info { flex: 1; min-width: 0; }
.mw-taskrow-status { flex: none; }
.mw-taskrow-action { flex: none; }

/* 试题批量审核 */
.mw-qreview-section { border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.mw-qreview-sec-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; background: var(--c-bg-card); }
.mw-qreview-sec-head:hover { background: var(--c-bg-hover); }
.mw-qreview-sec-body { padding: 0 14px 14px; background: var(--c-bg); border-top: 1px solid var(--c-border-3); }
.mw-qreview-qrow { padding: 12px 0; border-bottom: 1px solid var(--c-border-3); }
.mw-qreview-qrow:last-child { border-bottom: none; }
.mw-qreview-qhead { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 6px; font-size: 13px; }
.mw-qreview-opts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 6px 0; }
.mw-qreview-opt { font-size: 13px; color: var(--c-text-2); }
.mw-qreview-opt.correct { color: var(--c-success); font-weight: 600; }
.mw-qreview-ans { font-size: 12px; color: var(--c-text-3); margin-top: 4px; }

/* 审核 · AI 重跑 loading 旋转 */
.mw-spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--c-border-2); border-top-color: var(--c-primary); border-radius: 50%; animation: mw-spin-kf .7s linear infinite; }
@keyframes mw-spin-kf { to { transform: rotate(360deg); } }

/* 审核 · 选项编辑器 */
.mw-opt-edit-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mw-opt-edit-row { display: flex; align-items: center; gap: 8px; }
.mw-opt-correct { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--c-border-2); background: var(--c-bg-card); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.mw-opt-correct.on { background: var(--c-success); border-color: var(--c-success); }
.mw-opt-correct:hover { border-color: var(--c-success); }
.mw-opt-del { flex: none; width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent; color: var(--c-text-3); font-size: 18px; line-height: 1; cursor: pointer; }
.mw-opt-del:hover { background: var(--c-error-bg); color: var(--c-error); }
.mw-opt-add { align-self: flex-start; border: 1px dashed var(--c-border-2); background: transparent; color: var(--c-primary); font-size: 13px; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.mw-opt-add:hover { background: var(--c-primary-soft, rgba(37,99,235,.08)); border-color: var(--c-primary); }

/* 文件资源网格 */
.mw-file-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mw-file-card { border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: var(--c-bg-card); }
.mw-file-card:hover { box-shadow: var(--shadow-1); border-color: var(--c-border-2); }
.mw-file-thumb {
  position: relative; height: 120px; display: grid; place-items: center;
  background: var(--c-bg); border-bottom: 1px solid var(--c-border-3); overflow: hidden;
}
.mw-file-thumb img, .mw-file-thumb video { width: 100%; height: 100%; object-fit: cover; }
/* 互动资源(HTML)实时缩略：iframe 放大渲染后缩放，作整页预览图，禁用交互 */
.mw-file-htmlthumb {
  position: absolute; top: 0; left: 0;
  width: 400%; height: 400%;
  border: 0; pointer-events: none; background: var(--c-bg-card);
  transform: scale(.25); transform-origin: top left;
}
.mw-file-play {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(15,23,42,.55); color: #fff; display: grid; place-items: center; font-size: 14px;
}
.mw-file-fmt {
  position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: var(--radius-pill); background: rgba(15,23,42,.6); color: #fff;
}
.mw-file-info { padding: 10px 12px; }
.mw-file-name { font-weight: 600; color: var(--c-text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-file-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.mw-file-actions { display: flex; gap: 12px; }
.mw-file-actions a { font-size: 13px; cursor: pointer; }

/* 上传弹窗 */
.mw-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1.5px dashed var(--c-border-2); border-radius: var(--radius); padding: 28px 16px;
  text-align: center; cursor: pointer; color: var(--c-text-3); margin: 14px 0;
}
.mw-dropzone:hover { border-color: var(--c-primary); background: var(--c-primary-bg); color: var(--c-primary); }
.mw-up-preview { max-width: 100%; max-height: 200px; border-radius: var(--radius); margin-top: 4px; display: block; }

@media (max-width: 1280px) {
  .mw-file-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .mw-card-grid, .mw-file-grid { grid-template-columns: 1fr; }
}

/* 编辑弹窗内编辑器适配 */
.drawer .mw-flabel:first-child { margin-top: 4px; }

/* ===== 应用版本管理 ===== */
.av-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 32px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--c-border-2); border-radius: var(--radius-lg);
  background: var(--c-bg); color: var(--c-text-2);
  transition: border-color 160ms ease, background 160ms ease;
}
.av-dropzone:hover { border-color: var(--c-primary-border); background: var(--c-primary-bg); }
.av-dropzone.over { border-color: var(--c-primary); background: var(--c-primary-bg); }
.av-dropzone .icn { width: 30px; height: 30px; color: var(--c-primary); }
.av-dropzone-title { font-size: 14px; font-weight: 700; color: var(--c-text); }
.av-parsed {
  margin-top: 16px; padding: 16px; border: 1px solid var(--c-border-2);
  border-radius: var(--radius-lg); background: var(--c-bg-card);
}
.av-parsed-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c-text); margin-bottom: 12px; }
.av-parsed-clear { margin-left: auto; font-size: 13px; cursor: pointer; }
.av-parsed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; margin-bottom: 14px; }
.av-parsed-grid > div { display: flex; flex-direction: column; gap: 2px; }
.av-parsed-grid .lbl { font-size: 12px; color: var(--c-text-3); }
.av-parsed-grid .v { font-size: 14px; font-weight: 600; color: var(--c-text); word-break: break-all; }
.av-parsed-grid .v.mono { font-family: ui-monospace, Menlo, monospace; }
.av-checks { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.av-checks label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 12px; border: 1px solid var(--c-border-2); border-radius: var(--radius);
  font-size: 13px; color: var(--c-text-2); user-select: none;
}
.av-checks label.active { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-bg); }
.av-row-latest { background: linear-gradient(90deg, var(--c-primary-bg), transparent 55%); }
.av-row-latest td:first-child { box-shadow: inset 3px 0 0 var(--c-primary); }

/* —— 多应用：左右分栏 —— */
.av-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; margin-top: 16px; align-items: stretch; }
.av-applist-card { display: flex; flex-direction: column; }
.av-app-list { display: flex; flex-direction: column; }
.av-app-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
  border-left: 3px solid transparent; border-bottom: 1px solid var(--c-border);
  transition: background 140ms ease, border-color 140ms ease;
}
.av-app-item:last-child { border-bottom: none; }
.av-app-item:hover { background: var(--c-bg); }
.av-app-item.active { background: var(--c-primary-bg); border-left-color: var(--c-primary); }
.av-app-meta { min-width: 0; flex: 1; }
.av-app-name { font-size: 14px; font-weight: 700; color: var(--c-text); }
.av-app-pkg { font-size: 12px; color: var(--c-text-3); word-break: break-all; margin: 2px 0 6px; }
.av-app-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.av-detail { min-width: 0; }
.av-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.av-detail-name { font-size: 16px; font-weight: 700; color: var(--c-text); }

@media (max-width: 980px) {
  .av-layout { grid-template-columns: 1fr; }
  .av-applist-card { position: static; }
}

/* ===== 试卷管理 · 试卷库浏览 ===== */
.pl-tabs {
  display: flex; gap: 28px; align-items: center;
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: 4px 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-1);
}
.pl-tab {
  position: relative; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--c-text-2);
  padding: 14px 2px; transition: color 160ms ease;
}
.pl-tab:hover { color: var(--c-primary); }
.pl-tab.active { color: var(--c-primary); font-weight: 800; }
.pl-tab.active::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 6px; width: 26px; height: 3px; border-radius: 2px; background: var(--c-primary);
}
.pl-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.pl-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pl-right > .card { margin-bottom: 0; }
/* 左侧目录卡与右侧整体等高（设计规范：左右两栏对齐） */
.pl-tree-card { margin-bottom: 0; display: flex; flex-direction: column; }
.pl-tree-card .card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* 左侧目录 */
.pl-textbook {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; margin-bottom: 10px;
  background: var(--c-primary-bg); border-radius: var(--radius);
  color: var(--c-primary); font-weight: 700; font-size: 13px;
}
.pl-textbook .pl-version { flex: 1; }
.pl-tree-list { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; }
.pl-tree-node {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  color: var(--c-text-2); font-size: 13px; line-height: 1.5;
}
.pl-tree-node:hover { background: var(--c-bg); }
.pl-tree-node.active { background: var(--c-primary-bg); color: var(--c-primary); font-weight: 700; }
.pl-tree-node.parent { font-weight: 600; color: var(--c-text); }
.pl-tree-node.child { padding-left: 26px; }
.pl-tree-node .pl-tree-dot { width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--c-primary); flex: none; }
.pl-tree-name { overflow: hidden; text-overflow: ellipsis; }

/* 列表工具栏 */
.pl-list-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.pl-sort {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 15px;
  font-weight: 600; color: var(--c-text-3); padding: 2px 0;
}
.pl-sort.active { color: var(--c-primary); font-weight: 800; }
.pl-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--c-text-2); }
.pl-toggle-wrap { display: inline-flex; align-items: center; gap: 6px; }
.pl-toggle { width: 36px; height: 20px; border-radius: 10px; border: 0; background: var(--c-border-2); position: relative; cursor: pointer; transition: background 160ms ease; }
.pl-toggle.on { background: var(--c-primary); }
.pl-toggle-dot { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-bg-card); transition: left 160ms ease; }
.pl-toggle.on .pl-toggle-dot { left: 18px; }
.pl-check { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* 列表项 */
.pl-list { display: flex; flex-direction: column; }
.pl-item { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 16px 4px; border-bottom: 1px dashed var(--c-border-3); }
.pl-item:last-child { border-bottom: 0; }
.pl-thumb { position: relative; width: 84px; height: 64px; border-radius: var(--radius-sm); border: 1px solid var(--c-border-2); background: var(--c-primary-bg); overflow: hidden; }
.pl-thumb.tone-orange { background: #fff3ec; border-color: #ffd8be; }
.pl-thumb-badge { position: absolute; top: 6px; left: 6px; font-size: 11px; font-weight: 700; color: var(--c-primary); }
.pl-thumb.tone-orange .pl-thumb-badge { color: #d4621a; }
.pl-thumb-lines { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.pl-thumb-lines i { height: 3px; border-radius: 2px; background: rgba(37,99,235,.25); }
.pl-thumb.tone-orange .pl-thumb-lines i { background: rgba(212,98,26,.25); }
.pl-thumb-lines i:nth-child(2) { width: 80%; }
.pl-thumb-lines i:nth-child(3) { width: 60%; }
.pl-item-title { font-size: 15px; font-weight: 600; color: var(--c-text); line-height: 1.5; margin-bottom: 8px; }
.pl-item:hover .pl-item-title { color: var(--c-primary); }
.pl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-tag { font-size: 12px; color: var(--c-text-3); background: var(--c-bg); border: 1px solid var(--c-border-3); border-radius: var(--radius-sm); padding: 1px 8px; }
.pl-tag b { color: var(--c-error); font-weight: 700; }
.pl-tag-type { color: var(--c-primary); background: var(--c-primary-bg); border-color: var(--c-primary); }
.pl-tag-type b { color: var(--c-primary); }
.pl-actions { position: relative; display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.pl-actions a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--c-primary); cursor: pointer; }
.pl-actions .pl-fav { color: var(--c-text-2); }
.pl-actions .pl-fav.on { color: #f59e0b; }
.pl-actions a.pl-act-danger { color: var(--c-error); }
.pl-actions a.pl-act-danger:hover { color: var(--c-error); opacity: .82; }
@media (max-width: 1100px) { .pl-body { grid-template-columns: 1fr; } }

/* 试卷查看（整页试题完整内容） */
.pl-view-head { text-align: center; }
.pl-paper-title { font-size: 22px; font-weight: 800; color: var(--c-text); margin: 4px 0 14px; letter-spacing: -0.01em; line-height: 1.4; }
.pl-paper-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--c-text-2); font-size: 14px; }
.pl-paper-meta b { color: var(--c-text); font-weight: 700; }
.pl-paper-meta b:only-child, .pl-paper-meta span b { color: var(--c-primary); }
.pl-paper-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.pl-typebar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--c-border-3); }
.pl-typebar-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-bg); border: 1px solid var(--c-border-3);
  border-radius: var(--radius); padding: 6px 12px; font-size: 13px; color: var(--c-text-2);
}
.pl-typebar-item b { color: var(--c-error); font-weight: 700; font-size: 15px; }

/* ============================================================
   快速录入试题 · Quick Entry Drawer
   ============================================================ */

/* Tab 切换栏 */
.qe-tabbar {
  display: flex; align-items: center; gap: 4px;
  border-bottom: 2px solid var(--c-border-3);
  margin-bottom: 16px; padding-bottom: 0;
}
.qe-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 18px; font-size: 13px; font-weight: 500;
  color: var(--c-text-3); border: none; background: transparent;
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all .15s;
}
.qe-tab:hover { color: var(--c-text-2); }
.qe-tab.is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }
.qe-tabbar-stat {
  margin-left: auto; font-size: 12px; color: var(--c-text-3); padding-right: 4px;
}

/* 行列表容器 */
.qe-list { display: flex; flex-direction: column; gap: 10px; }

/* ── 图片视图 · 每一行 ── */
.qe-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1.5px solid var(--c-border); background: var(--c-bg-card);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  min-height: 72px;
}
.qe-row:hover { border-color: var(--c-border-2); }
.qe-row.is-focused {
  border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-bg);
}
.qe-row-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-bg-active); color: var(--c-text-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-top: 2px;
}
.qe-row.is-focused .qe-row-num {
  background: var(--c-primary); color: #fff;
}
.qe-row-body {
  flex: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.qe-row-del {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-4); background: transparent; border: none;
  cursor: pointer; transition: all .15s; opacity: 0;
}
.qe-row:hover .qe-row-del { opacity: 1; }
.qe-row-del:hover { background: var(--c-error-bg); color: var(--c-error); }

/* 缩略图 */
.qe-thumb {
  position: relative; width: 80px; height: 64px;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--c-border); flex-shrink: 0;
}
.qe-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.qe-thumb-del {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.qe-thumb:hover .qe-thumb-del { opacity: 1; }
.qe-thumb--lg { width: 140px; height: 110px; }

/* 添加区（空态占位 / 已有图片时的+按钮） */
.qe-add-zone {
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--c-border-strong);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all .15s; background: var(--c-bg);
  flex-shrink: 0;
}
.qe-add-zone:hover { border-color: var(--c-primary); background: var(--c-primary-bg); }
.qe-row.is-focused .qe-add-zone { border-color: var(--c-primary); background: var(--c-primary-bg); }

/* 空态（无图片时占满整行） */
.qe-add-hint {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 12px; color: var(--c-text-3); padding: 10px 20px;
}
.qe-row.is-focused .qe-add-hint { color: var(--c-primary); }
/* 有图片时变小 + 按钮 */
.qe-add-more {
  width: 40px; height: 64px; display: flex; align-items: center; justify-content: center;
  color: var(--c-text-3);
}
.qe-add-zone:has(.qe-add-hint) { width: 100%; }
.qe-add-zone:has(.qe-add-more) { width: 40px; }

/* + 新增一题 */
.qe-add-row {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--radius);
  border: 1.5px dashed var(--c-border); color: var(--c-text-3);
  font-size: 13px; cursor: pointer; background: transparent;
  transition: all .15s; width: 100%; justify-content: center;
}
.qe-add-row:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-bg); }

/* ── 试题视图 · 每一张卡片 ── */
.qe-qcard {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-bg-card); overflow: hidden;
}
.qe-qcard.is-empty { opacity: .6; }
.qe-qcard-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--c-border-3);
  background: var(--c-bg);
}
.qe-qcard-fields {
  display: flex; align-items: center; gap: 6px; margin-left: auto;
}
.qe-qcard-imgs {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px;
  min-height: 48px;
}
.qe-qcard-empty {
  display: flex; align-items: center; padding: 4px 0;
}
.qe-points-input {
  display: flex; align-items: center; gap: 5px;
}

/* ============================================================
   批量识别 · 选题 + 批量操作工具栏
   ============================================================ */

/* 试题卡选中态 */
.mw-qcard.is-selected-q {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px var(--c-primary-bg);
  background: var(--c-primary-bg);
}

/* 选择框（通用） */
.ocr-q-chk, .ocr-batch-chk {
  display: inline-flex; align-items: center; cursor: pointer;
  flex-shrink: 0;
}
.ocr-q-chk input, .ocr-batch-chk input { display: none; }
.ocr-q-chk-box, .ocr-batch-chk-box {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-bg-input); display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.ocr-q-chk input:checked ~ .ocr-q-chk-box,
.ocr-batch-chk input:checked ~ .ocr-batch-chk-box {
  background: var(--c-primary); border-color: var(--c-primary);
}
.ocr-q-chk input:checked ~ .ocr-q-chk-box::after,
.ocr-batch-chk input:checked ~ .ocr-batch-chk-box::after {
  content: ""; width: 9px; height: 6px;
  border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

/* 批量操作工具栏 */
/* .tbl-batch-bar 是本视觉的通用版（列表页表格上方的批量操作栏）；.ocr-batch-bar 为切题页历史用法，同源同款 */
.tbl-batch-bar,
.ocr-batch-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--c-primary-bg);
  border: 1px solid var(--c-primary-border, var(--c-primary));
  border-radius: var(--radius); margin-bottom: 10px;
  animation: mw-lb-fade .2s ease;
}
.tbl-batch-count,
.ocr-batch-count { font-size: 13px; font-weight: 600; color: var(--c-text-2); }
.tbl-batch-count b,
.ocr-batch-count b { color: var(--c-primary); }
.ocr-batch-hint { font-size: 11px; }
/* 批量栏内的「选中全部 N 条 / 仅选中本页」切换链接 */
.tbl-batch-bar a { font-size: 12px; color: var(--c-primary); cursor: pointer; text-decoration: underline; }
/* 批量确认弹窗内的筛选条件回显 */
.tbl-batch-cond {
  margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
  background: var(--c-bg); border: 1px dashed var(--c-border);
  color: var(--c-text-2); font-size: 12px; line-height: 1.7; word-break: break-all;
}

/* 表格「翻页 / 改筛选」加载：保留旧行 + 半透明遮罩 + 转圈（转圈复用 .cwg-spin，不新增第四个 spinner） */
.tbl-loadwrap { position: relative; }
.tbl-loadwrap.is-loading .table { opacity: .55; }
.tbl-load-mask {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg-card); opacity: .55;
  color: var(--c-primary);
}
.tbl-load-mask .cwg-spin { width: 22px; height: 22px; border-width: 3px; }
/* 取数失败：整块可点重试 */
.tbl-load-error {
  padding: 40px 0; text-align: center; cursor: pointer;
  color: var(--c-error); font-size: 13px; font-weight: 600;
}
.tbl-load-error:hover { text-decoration: underline; }
/* 加载中禁用筛选 chip（分页器由 Pagination 的 onChange 置空来禁用） */
.res-filter-card.is-busy .res-chip { pointer-events: none; opacity: .55; }

/* 任务类型筛选栏 */
.mw-task-typebar {
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--c-border-3);
  margin-bottom: 14px; padding-bottom: 0;
}
.mw-task-typeitem {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px; font-size: 13px; color: var(--c-text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; background: transparent; border-top: none; border-left: none; border-right: none;
  transition: all .14s; position: relative;
}
.mw-task-typeitem:hover { color: var(--c-text-2); }
.mw-task-typeitem.is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }
.mw-task-typeitem-cnt {
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 0 5px; border-radius: 20px;
  background: var(--c-bg-active); color: var(--c-text-3);
}
.mw-task-typeitem.is-active .mw-task-typeitem-cnt { background: var(--c-primary-bg); color: var(--c-primary); }
.mw-task-dot-red {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-error); flex-shrink: 0;
}

/* 任务类型 badge */
.mw-task-type-badge {
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-pill);
}
.mw-task-type-badge.img { background: var(--c-warning-bg); color: var(--c-warning); }
.mw-task-type-badge.ocr { background: var(--c-primary-bg); color: var(--c-primary); }

/* 任务图标颜色 */
.mw-taskrow-icon--ocr { background: var(--c-primary-bg); color: var(--c-primary); }

/* ============================================================
   OCR 图片识别审核抽屉
   ============================================================ */

.ocr-review-row {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-bg-card); margin-bottom: 14px; overflow: hidden;
}

/* 行头 */
.ocr-review-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--c-border-3);
  background: var(--c-bg);
}

/* 主体（左右分栏） */
.ocr-review-body {
  display: grid; grid-template-columns: 320px 1fr; min-height: 200px;
}

.ocr-review-left {
  padding: 14px; border-right: 1px solid var(--c-border-3);
  background: var(--c-bg);
}
.ocr-review-right { padding: 14px; }

.ocr-review-panel-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-text-3); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}

/* 图片画廊 */
.ocr-img-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.ocr-thumb {
  position: relative; width: 130px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--c-border); cursor: zoom-in;
}
.ocr-thumb img { width: 100%; display: block; }
.ocr-thumb-zoom {
  position: absolute; inset: 0; background: rgba(0,0,0,.28);
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; transition: opacity .15s;
}
.ocr-thumb:hover .ocr-thumb-zoom { opacity: 1; }

/* 图片占位（无真实图片时） */
.ocr-img-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; height: 120px; border: 1.5px dashed var(--c-border-strong);
  border-radius: var(--radius-sm); background: var(--c-bg-hover);
  color: var(--c-text-3); font-size: 12px; text-align: center;
}

/* OCR 原始文本折叠 */
.ocr-raw-detail { margin-top: 10px; }
.ocr-raw-detail summary {
  font-size: 11px; color: var(--c-text-3); cursor: pointer; user-select: none;
}
.ocr-raw-text {
  font-size: 11px; font-family: ui-monospace, monospace;
  white-space: pre-wrap; word-break: break-all;
  background: var(--c-bg-hover); padding: 8px; border-radius: 4px;
  color: var(--c-text-2); margin-top: 6px; max-height: 120px; overflow: auto;
}

/* AI 结果区 */
.ocr-ai-result { display: flex; flex-direction: column; gap: 10px; }
.ocr-ai-meta { display: flex; align-items: center; gap: 8px; }
.ocr-ai-stem {
  font-size: 14px; color: var(--c-text); line-height: 1.8; font-weight: 500;
}
.ocr-ai-options { display: flex; flex-direction: column; gap: 4px; margin-left: 4px; }
.ocr-ai-option {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 13px; color: var(--c-text-2); padding: 3px 8px; border-radius: 4px;
}
.ocr-ai-option.is-correct {
  background: var(--c-success-bg); color: var(--c-success); font-weight: 600;
}
.ocr-ai-opt-key { flex-shrink: 0; font-weight: 700; min-width: 20px; }
.ocr-ai-opt-tick { flex-shrink: 0; margin-left: auto; font-size: 12px; }
.ocr-ai-answer { font-size: 13px; color: var(--c-text-2); }
.ocr-ai-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ocr-ai-empty {
  display: flex; align-items: center; justify-content: center;
  height: 80px; border: 1px dashed var(--c-border); border-radius: var(--radius-sm);
}
.ocr-ai-analysis-detail { margin-top: 4px; }
.ocr-ai-analysis-detail summary { font-size: 11px; color: var(--c-text-3); cursor: pointer; }
.ocr-ai-analysis {
  font-size: 12px; color: var(--c-text-3); line-height: 1.7;
  background: var(--c-bg-hover); padding: 8px; border-radius: 4px; margin-top: 6px;
}

/* ============================================================
   登录页（LoginPage） + 个人中心（ProfilePage）
   ============================================================ */

/* ---- 登录页 ---- */
.login-screen {
  position: fixed; inset: 0;
  z-index: 50;
  background: var(--c-bg);
  overflow: hidden;
}
/* 全屏：左右两栏铺满整个视口 */
.login-card {
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--c-bg-card);
  overflow: hidden;
}

/* 左：K12 品牌区（清新蓝 → 青 渐变 + 漂浮教育元素） */
.login-brand {
  position: relative;
  padding: 7vh 6vw;
  display: flex; flex-direction: column;
  justify-content: center;
  color: #fff;
  background: linear-gradient(140deg, #1d4ed8 0%, #2f7bf6 42%, #22b8d6 100%);
  overflow: hidden;
}
/* 装饰层 */
.login-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.login-blob { position: absolute; border-radius: 50%; filter: blur(2px); }
.login-blob.b1 { width: 420px; height: 420px; right: -140px; top: -120px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), rgba(255,255,255,0)); }
.login-blob.b2 { width: 320px; height: 320px; left: -120px; bottom: -120px; background: radial-gradient(circle at 50% 50%, rgba(120,220,255,0.30), rgba(120,220,255,0)); }
.login-blob.b3 { width: 180px; height: 180px; right: 18%; bottom: 12%; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.14), rgba(255,255,255,0)); }
/* 漂浮教育图标卡片 */
.login-chip {
  position: absolute;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: 0 10px 30px rgba(13, 42, 92, 0.25);
  animation: loginFloat 6s ease-in-out infinite;
}
.login-chip .icn { width: 26px; height: 26px; }
.login-chip.ch1 { top: 16%; right: 14%; animation-delay: 0s; }
.login-chip.ch2 { top: 38%; right: 30%; width: 46px; height: 46px; animation-delay: 1.2s; }
.login-chip.ch3 { bottom: 22%; right: 20%; animation-delay: 2.1s; }
.login-chip.ch4 { bottom: 30%; right: 40%; width: 44px; height: 44px; animation-delay: 3s; }
@keyframes loginFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.login-brand-top { position: relative; display: flex; align-items: center; gap: 12px; }
.login-logo-mark {
  width: 50px; height: 50px; border-radius: 16px;
  display: grid; place-items: center; overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 26px; font-weight: 900;
}
.login-logo-mark svg, .logo-mark svg { width: 100%; height: 100%; display: block; }
.login-logo-copy .t { font-size: 20px; font-weight: 900; letter-spacing: 0.04em; }
.login-logo-copy .s { font-size: 12.5px; opacity: 0.85; margin-top: 2px; }
.login-brand-headline {
  position: relative;
  margin-top: 7vh;
  font-size: clamp(30px, 3.2vw, 46px); font-weight: 900; line-height: 1.25;
  letter-spacing: 0.01em;
}
.login-brand-desc {
  position: relative;
  margin-top: 16px; font-size: 15px; opacity: 0.88; max-width: 30ch;
}
.login-brand-points {
  position: relative;
  list-style: none; margin: 36px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.login-brand-points li {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; opacity: 0.96; font-weight: 500;
}
.login-brand-points .ico {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.26);
}
.login-brand-foot { position: relative; margin-top: 7vh; font-size: 12.5px; opacity: 0.72; }

/* 右：表单区（垂直居中，留白充足） */
.login-form {
  padding: 7vh 7vw;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 520px; width: 100%; margin: 0 auto;
}
.login-title { font-size: 30px; font-weight: 900; color: var(--c-text); }
.login-sub { font-size: 13.5px; color: var(--c-text-3); margin-top: 8px; margin-bottom: 32px; }
.login-field { display: block; margin-bottom: 18px; }
.login-field-lbl { display: block; font-size: 13px; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }
.login-input-wrap { position: relative; display: block; }
.login-input-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--c-text-3); pointer-events: none; }
.login-input {
  width: 100%; height: 48px;
  padding: 0 44px 0 40px;
  border-radius: var(--radius-pill);
  font-size: 14px;
}
.login-eye {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--c-text-3); cursor: pointer; display: grid; place-items: center;
}
.login-eye:hover { color: var(--c-primary); }
.login-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 24px;
}
.login-remember {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--c-text-2); cursor: pointer; user-select: none;
}
.login-forgot { font-size: 13px; color: var(--c-primary); cursor: pointer; }
.login-forgot:hover { text-decoration: underline; }
.login-submit {
  width: 100%; height: 48px;
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 700;
  justify-content: center;
}
.login-tip {
  margin-top: 16px; text-align: center;
  font-size: 12px; color: var(--c-text-3);
}

/* 中屏：品牌区收窄 */
@media (max-width: 1080px) {
  .login-card { grid-template-columns: 0.9fr 1fr; }
  .login-chip.ch2, .login-chip.ch4 { display: none; }
}
/* 窄屏：单列，仅保留表单（品牌区收为顶部条） */
@media (max-width: 760px) {
  .login-screen { overflow: auto; }
  .login-card { grid-template-columns: 1fr; height: auto; min-height: 100%; }
  .login-brand { padding: 36px 28px; min-height: 240px; justify-content: flex-start; }
  .login-brand-headline { margin-top: 24px; font-size: 26px; }
  .login-brand-desc { display: none; }
  .login-brand-points { display: none; }
  .login-brand-foot { display: none; }
  .login-chip { display: none; }
  .login-form { padding: 36px 28px; max-width: none; }
}

/* ---- 个人中心 ---- */
.profile-page { display: flex; flex-direction: column; gap: 16px; }
.profile-hero {
  display: flex; align-items: center; gap: 20px;
  padding: 24px 26px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}
.profile-hero-name {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 22px; font-weight: 800; color: var(--c-text);
}
.profile-hero-roles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.profile-hero-meta { font-size: 12px; color: var(--c-text-3); margin-top: 10px; }
.profile-hero-meta code { background: var(--c-bg-hover); padding: 1px 6px; border-radius: 4px; font-family: var(--font-mono); }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.profile-roleline { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.profile-security { display: flex; flex-direction: column; gap: 12px; }
.profile-security-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--c-border-3);
  border-radius: var(--radius);
  background: var(--c-bg);
}
.profile-security-item .ic {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--c-primary-bg); color: var(--c-primary);
}
.profile-security-item .tx { flex: 1; min-width: 0; }
.profile-security-item .tx .t { font-size: 14px; font-weight: 700; color: var(--c-text); }
.profile-security-item .tx .d { font-size: 12px; color: var(--c-text-3); margin-top: 2px; }
@media (max-width: 980px) { .profile-grid { grid-template-columns: 1fr; } }

/* ===== 日志管理 · 详情抽屉里的代码/报文块 ===== */
.log-pre {
  margin: 0;
  background: var(--c-dark);
  color: #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  overflow-x: auto;
  white-space: pre;
}

/* ===== Skeleton 加载骨架（数据未到位时代替假数据闪现）===== */
.skeleton {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--c-border-3) 25%, var(--c-bg-card) 37%, var(--c-border-3) 63%);
  background-size: 400% 100%;
  animation: mw-shimmer 1.4s ease infinite;
}
@keyframes mw-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/* 通用列表页骨架 */
.page-skeleton .skel-filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.page-skeleton .skel-table tbody td {
  height: 58px;
  vertical-align: middle;
}
.page-skeleton .skel-table tbody tr:hover td { background: transparent; }

/* ===== 单词发音按钮（音标后的喇叭图标，点击走 TTS）===== */
.word-audio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--c-text-3);
  cursor: pointer;
  transition: color .15s, background .15s, opacity .15s;
}
.word-audio:hover { color: var(--c-primary); background: var(--c-bg-hover); }
.word-audio .icn { width: 15px; height: 15px; }
/* 合成中（TTS 首次生成约 1-2s）：脉动提示 */
.word-audio.loading { color: var(--c-primary); cursor: progress; animation: word-audio-pulse 1s ease-in-out infinite; }
/* 播放中：高亮 */
.word-audio.playing { color: var(--c-primary); background: var(--c-bg-active); }
@keyframes word-audio-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* —— 单词编辑抽屉：词典级富内容「分板块」编辑器（迁移 0112，对齐业务端「疯狂背单词」精讲/词典） —— */
#wordEditForm { position: relative; }
#wordEditForm .tabs { margin-bottom: 14px; flex-wrap: wrap; }
.word-rich-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.word-rich-row .input { min-width: 0; }
.word-rich-row select.input { flex: none; }
.word-rich-del { color: var(--danger, #e5484d); cursor: pointer; white-space: nowrap; font-size: 13px; flex: none; }
.word-rich-del:hover { text-decoration: underline; }
.word-board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.word-infl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.word-infl-grid .form-row { margin-bottom: 8px; }
/* 单词列表「完整度」列：迷你进度条 + 计数 */
.word-rich-meter { display: inline-flex; align-items: center; gap: 6px; }
.word-rich-bar { width: 44px; height: 6px; border-radius: 4px; background: var(--c-bg-hover, #eef1f6); overflow: hidden; flex: none; }
.word-rich-bar > span { display: block; height: 100%; border-radius: 4px; transition: width .2s; }
.word-rich-num { font-size: 12px; color: var(--c-text-3, #8a90a8); white-space: nowrap; }

/* 资源录入 · 试卷切题实时预览：题框叠在页图上、一个一个淡入出现 */
.re-split-box { position: absolute; border: 2px solid var(--c-primary, #2563eb); border-radius: 3px; box-sizing: border-box; pointer-events: none; background: rgba(37, 99, 235, .06); animation: reBoxIn .32s ease; }
.re-split-tag { position: absolute; top: 0; left: 0; transform: translateY(-100%); background: var(--c-primary, #2563eb); color: #fff; font-size: 11px; line-height: 1.5; padding: 0 5px; border-radius: 3px 3px 0 0; white-space: nowrap; }
@keyframes reBoxIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }

/* ============================================================
   courseware-gen · 课件生成页（pages-courseware-gen.jsx）
   三态：表单 → 生成中（双栏实时流：时间线 + 缩略图墙）→ 完成
   ============================================================ */
/* —— 态1 · 表单 —— */
.cwg-form-wrap { max-width: 860px; }
.cwg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.cwg-form-grid .form-row { grid-template-columns: 88px 1fr; }
.cwg-span2 { grid-column: 1 / -1; }
.cwg-form-err { color: var(--c-error); font-size: 12px; }
.cwg-opts { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 5px; }
.cwg-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-text-2); cursor: default; }
.cwg-form-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.cwg-form-tip { color: var(--c-text-3); font-size: 12px; }

/* —— 态2 · 顶部任务信息条 —— */
.cwg-head-card { margin-bottom: 14px; }
.cwg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 2px; }
.cwg-head-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cwg-head-topic { font-size: 16px; font-weight: 800; color: var(--c-text); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cwg-head-right { display: flex; align-items: center; gap: 12px; }
.cwg-head-count { color: var(--c-text-3); font-size: 13px; }
.cwg-head-count b { color: var(--c-primary); font-size: 15px; }

/* —— 态2 · 双栏布局 —— */
.cwg-layout { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; gap: 14px; align-items: start; }
@media (max-width: 1080px) { .cwg-layout { grid-template-columns: 1fr; } }

/* —— 左栏 · 生成过程时间线（竖线连接） —— */
.cwg-timeline { position: relative; padding: 2px 0 2px 2px; max-height: calc(100vh - 320px); overflow-y: auto; }
.cwg-item { position: relative; display: flex; gap: 10px; padding: 0 0 14px 0; }
.cwg-item::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: -2px; width: 2px; background: var(--c-border); }
.cwg-item:last-child::before { display: none; }
.cwg-node { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--c-success-bg); color: var(--c-success); border: 1px solid var(--c-success-border); z-index: 1; }
.cwg-node .icn { width: 12px; height: 12px; }
.cwg-node.dim { background: var(--c-bg); color: var(--c-text-3); border-color: var(--c-border); }
.cwg-node.err { background: var(--c-error-bg); color: var(--c-error); border-color: var(--c-error-border); }
.cwg-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
.cwg-item-body { flex: 1; min-width: 0; padding-top: 2px; }
.cwg-time { color: var(--c-text-3); font-size: 11px; font-feature-settings: "tnum"; white-space: nowrap; }

/* 阶段卡：当前阶段高亮、历史阶段打勾 */
.cwg-stage .cwg-item-body { border: 1px solid var(--c-border); border-radius: 10px; padding: 8px 12px; background: var(--c-bg-card); }
.cwg-stage.active .cwg-item-body { border-color: var(--c-primary-border); background: var(--c-primary-bg); box-shadow: 0 0 0 3px rgba(37, 99, 235, .07); }
.cwg-stage.active .cwg-node { background: var(--c-primary-bg); color: var(--c-primary); border-color: var(--c-primary-border); }
.cwg-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cwg-stage-name { font-weight: 700; font-size: 13px; color: var(--c-text); }
.cwg-stage.active .cwg-stage-name { color: var(--c-primary); }
.cwg-stage-detail { color: var(--c-text-3); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.cwg-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); animation: cwgPulse 1.1s ease-in-out infinite; }
@keyframes cwgPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .45; } }

/* 思考流：可折叠灰色块，默认折叠 */
.cwg-think-head { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--c-text-3); cursor: pointer; user-select: none; padding: 3px 8px; border-radius: 8px; }
.cwg-think-head:hover { background: var(--c-bg-hover); color: var(--c-text-2); }
.cwg-think-head .icn { width: 11px; height: 11px; }
.cwg-think-len { opacity: .7; }
.cwg-think-body { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--c-bg); border: 1px dashed var(--c-border); color: var(--c-text-3); font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; font-family: inherit; }

/* 工具气泡：running 转圈 / done 绿勾 / error 红叉 */
.cwg-tool-bubble { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 12px; border: 1px solid var(--c-border); background: var(--c-bg-card); color: var(--c-text-2); }
.cwg-tool-bubble.running { border-color: var(--c-primary-border); background: var(--c-primary-bg); color: var(--c-primary); }
.cwg-tool-bubble.done { border-color: var(--c-success-border); background: var(--c-success-bg); color: var(--c-success); }
.cwg-tool-bubble.error { border-color: var(--c-error-border); background: var(--c-error-bg); color: var(--c-error); }
.cwg-tool-bubble .icn { width: 12px; height: 12px; }
.cwg-tool-name { font-weight: 600; }
.cwg-tool-st { opacity: .75; }
.cwg-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: cwgSpin .7s linear infinite; flex: none; display: inline-block; }
@keyframes cwgSpin { to { transform: rotate(360deg); } }
.cwg-waiting { display: flex; align-items: center; gap: 8px; color: var(--c-text-3); font-size: 13px; padding: 8px 2px; }

/* 错误条 + 重试 */
.cwg-error-bar { display: flex; align-items: center; gap: 8px; border: 1px solid var(--c-error-border); background: var(--c-error-bg); color: var(--c-error); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.cwg-error-msg { flex: 1; min-width: 0; line-height: 1.5; }

/* —— 右栏 · 课件预览缩略图墙（3 列 grid + 浮现动画） —— */
.cwg-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1380px) { .cwg-wall { grid-template-columns: repeat(2, 1fr); } }
.cwg-wall-count { color: var(--c-text-3); font-size: 12px; }
.cwg-page { border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; background: var(--c-bg-card); animation: cwgPageIn .45s cubic-bezier(.22, .8, .36, 1) both; transition: box-shadow .15s, transform .15s, border-color .15s; }
.cwg-page:hover { border-color: var(--c-primary-border); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.cwg-page.still { animation: none; }
@keyframes cwgPageIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.cwg-page-thumb { aspect-ratio: 16 / 9; background: var(--c-bg); }
.cwg-page-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cwg-page-ph { width: 100%; height: 100%; background: linear-gradient(135deg, var(--c-bg), var(--c-bg-hover)); }
.cwg-page-t { display: flex; align-items: center; gap: 7px; padding: 8px 10px; font-size: 12px; color: var(--c-text-2); }
.cwg-page-t .no { flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--c-primary-bg); color: var(--c-primary); font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.cwg-page-t .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cwg-wall-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 260px; color: var(--c-text-3); font-size: 13px; border: 1px dashed var(--c-border); border-radius: 12px; background: var(--c-bg); }
.cwg-wall-empty .icn { width: 30px; height: 30px; opacity: .5; }

/* —— 态3 · 完成 —— */
.cwg-done-hero { margin-bottom: 14px; }
.cwg-done-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 0 10px; }
.cwg-done-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--c-success-bg); color: var(--c-success); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-success-border); margin-bottom: 12px; animation: cwgPageIn .45s ease both; }
.cwg-done-ico .icn { width: 28px; height: 28px; }
.cwg-done-title { font-size: 22px; font-weight: 900; margin: 0 0 6px; letter-spacing: -0.02em; }
.cwg-done-sub { color: var(--c-text-3); font-size: 14px; margin: 0 0 16px; }
.cwg-done-actions { display: flex; gap: 12px; }
.cwg-done-hint { margin-top: 12px; color: var(--c-text-3); font-size: 12px; line-height: 1.6; border-top: 1px dashed var(--c-border); padding-top: 10px; }

.be-oe-btn{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:6px;padding:2px 6px;font-size:12px;cursor:pointer;color:var(--c-text-2,#475569)}
.be-oe-btn:hover{background:var(--c-primary,#2563eb);color:#fff;border-color:var(--c-primary,#2563eb)}
.be-oe-btn.danger:hover{background:#dc2626;border-color:#dc2626}

/* ============================================================
   素材管理 · 小学科学（左分类树 + 右课程卡 + 详情图/课时）
   复用 .res-workbench 网格 + .res-tree-card 粘性左卡；配色一律走主题变量（暗色/换主色不断裂）
   ============================================================ */
/* 左：一级标签分类（两行节点：名称+副标题/门数；hover 浮出 增/改/序 操作） */
.sci-cat-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; color: var(--c-text-2); }
.sci-cat-row + .sci-cat-row { margin-top: 2px; }
.sci-cat-row:hover { background: var(--c-primary-bg); }
.sci-cat-row.active { background: var(--c-primary-bg); }
.sci-cat-row.active .sci-cat-name { color: var(--c-primary); font-weight: 600; }
.sci-cat-ico { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-primary); }
.sci-cat-row.active .sci-cat-ico { color: var(--c-primary); }
.sci-cat-ico-star { color: #f6b73c; }
.sci-cat-ico .sci-svg-ico { display: block; }
.sci-icon-img { border-radius: 5px; object-fit: cover; display: block; }
.sci-icon-emoji { display: inline-flex; align-items: center; justify-content: center; }
.sci-cat-main { flex: 1; min-width: 0; }
.sci-cat-name { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.35; color: var(--c-text-1); }
.sci-cat-name > .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sci-cat-sub { margin-top: 1px; font-size: 12px; color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sci-cat-ops { flex: none; display: none; gap: 2px; }
.sci-cat-row:hover .sci-cat-ops { display: flex; }
.sci-cat-ops button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--c-text-3); font-size: 12px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sci-cat-ops button:hover:not(:disabled) { background: var(--c-bg-card); color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-border); }
.sci-cat-ops button:disabled { opacity: .35; cursor: not-allowed; }

/* 右：课程卡网格（封面统一 16:9） */
.sci-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sci-course-card { border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; background: var(--c-bg-card); transition: border-color .15s, box-shadow .15s; }
.sci-course-card:hover { border-color: var(--c-primary-border); box-shadow: var(--shadow-1, 0 6px 18px rgba(15,23,42,.06)); }
.sci-course-cover { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--c-border-3); }
.sci-course-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sci-course-cover .cover-tag { position: absolute; top: 8px; left: 8px; }
.sci-course-cover .cover-rec { position: absolute; top: 8px; right: 8px; padding: 1px 6px; border-radius: 6px; font-size: 12px; background: rgba(0,0,0,.55); color: #ffd24a; }
.sci-course-body { padding: 10px 12px; }
.sci-course-title { font-weight: 600; color: var(--c-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sci-course-sub { margin-top: 2px; font-size: 12px; color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sci-course-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--c-text-3); }
.sci-course-ops { margin-top: 10px; display: flex; align-items: center; gap: 4px; }

/* 详情图缩略图（拖拽调序 + 点击预览 + 删除） */
.sci-thumb-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.sci-thumb { position: relative; width: 108px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; border: 1px solid var(--c-border); cursor: move; background: var(--c-border-3); }
.sci-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.sci-thumb-idx { position: absolute; left: 4px; top: 4px; padding: 0 5px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; }
.sci-thumb-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; cursor: pointer; }

/* 封面预览框 / AI 候选图 / 参考图 */
.sci-cover-box { flex: none; width: 220px; height: 124px; border-radius: 10px; overflow: hidden; border: 1px solid var(--c-border); background: var(--c-border-3); }
.sci-cover-box img { width: 100%; height: 100%; object-fit: cover; }
.sci-cand-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.sci-cand { width: 180px; border-radius: 8px; overflow: hidden; border: 1px solid var(--c-border); }
.sci-cand-img { width: 180px; height: 101px; }
.sci-cand-img img { width: 100%; height: 100%; object-fit: cover; }
.sci-cand-pick { padding: 6px; text-align: center; }
.sci-ref { position: relative; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; border: 1px solid var(--c-border); }
.sci-ref img { width: 100%; height: 100%; object-fit: cover; }
.sci-ref-x { position: absolute; top: 0; right: 0; width: 16px; height: 16px; line-height: 14px; text-align: center; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; cursor: pointer; }

/* 9:16 详情图生成：豆包候选只进本地表单，保存课程后才落 detail_images。 */
.sci-detail-image-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sci-detail-gen-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sci-detail-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.sci-detail-gen-loading { margin-top: 12px; padding: 18px; border-radius: 9px; background: var(--c-primary-bg); color: var(--c-primary); text-align: center; font-size: 13px; }
.sci-detail-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.sci-detail-cand { overflow: hidden; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg-card); }
.sci-detail-cand > img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--c-border-3); }

/* 课时目录行 */
/* ── 0201 · 从有声绘本书导入的课程（🎧 绘本书卡 / 选择弹窗 / 放映器弹窗）──────────────
   一律用 var(--c-*)：换主色时角标与播放钮跟着变，硬编码颜色换肤会断。 */
.sci-course-card.is-comic { border-color: var(--c-primary-border); }
.sci-course-cover.is-clickable, .sci-course-title.is-clickable { cursor: pointer; }
.sci-course-title.is-clickable:hover { color: var(--c-primary); }
.sci-comic-badge { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; line-height: 18px; background: var(--c-primary); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.sci-comic-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sci-comic-play svg { border-radius: 50%; background: rgba(15,23,42,.42); padding: 9px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.sci-src-bad { color: var(--c-error) !important; }
/* 选择弹窗 */
.sci-bookpick-list { max-height: 420px; overflow: auto; }
.sci-bookpick-cover { width: 96px; height: 54px; border-radius: 6px; overflow: hidden; background: var(--c-border-3);
  display: flex; align-items: center; justify-content: center; }
.sci-bookpick-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sci-bookpick tr.is-imported { opacity: .55; }
.sci-pick-done { color: var(--c-success, #16a34a); font-size: 13px; white-space: nowrap; }
/* ===== R19（2026-08-07）· 课程放映页 =====
   ⚠️ 左右分栏与左树**直接复用有声绘本书籍工作台那一套**（`.acp-bookwb` / `.acp-tree*`），
      这里只写「它没有的那部分」。抄一份改改的下场是两处各改各的，
      而「同一棵树在两个页面长得不一样」几乎没人会当成 bug 报上来。 */
.sci-play-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sci-play-title { font-size: 17px; font-weight: 700; color: var(--c-text); }
.sci-play-grid { align-items: start; }
.sci-play-right .card-body { padding: 0; }
.sci-play-body { padding: 12px 14px; }
/* 未生成的节：灰掉但**仍然可点**（决议 Q1）—— 点进去是空态 + 「去生成这一节 ↗」，
   而不是干脆点不动。点不动的话用户不知道「这一节是没做，还是页面坏了」。 */
.acp-treerow.sci-play-empty .acp-treename { color: var(--c-text-3); }
.sci-play-stage { width: 100%; aspect-ratio: 16 / 9; background: #0b1020; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.sci-play-stage > iframe, .sci-play-stage > video { width: 100%; height: 100%; border: 0; display: block; }
.sci-play-video { background: #000; object-fit: contain; }
.sci-play-miss { color: #cbd5e1; font-size: 13px; padding: 20px; text-align: center; }
.sci-play-miss a { color: #93c5fd; cursor: pointer; text-decoration: underline; }
.sci-play-blank { padding: 28px 12px; }
.sci-play-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.sci-play-multi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sci-play-multi-i { cursor: pointer; font-size: 12.5px; color: var(--c-text-2);
  border: 1px solid var(--c-border); border-radius: 7px; padding: 2px 9px; }
.sci-play-multi-i:hover { color: var(--c-primary); border-color: var(--c-primary); }
.sci-play-multi-i.active { color: #fff; background: var(--c-primary); border-color: var(--c-primary); }
/* 窄屏：左右栏堆叠（`.acp-bookwb` 是 340px + 1fr 的 grid，窄屏下左栏会把右栏挤没） */
@media (max-width: 900px) {
  .sci-play-grid { grid-template-columns: 1fr; }
  .sci-play-grid .acp-treepane { max-height: 320px; }
  .sci-play-grid .acp-tree { max-height: 260px; }
}
.sci-lesson-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--c-border-3); }
.sci-lesson-row:last-child { border-bottom: 0; }
.sci-lesson-no { width: 22px; text-align: center; color: var(--c-text-3); }
.sci-lesson-main { flex: 1; min-width: 0; }
.sci-lesson-sub { margin-top: 2px; font-size: 12px; color: var(--c-text-3); }

/* 关联课件选择行 */
.sci-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--c-border-3); }
.sci-pick-row:last-child { border-bottom: 0; }

/* 右列加载态占位 */
.sci-loading { display: flex; align-items: center; justify-content: center; min-height: 240px; color: var(--c-text-3); font-size: 13px; }

/* 工作台对齐：左右两卡各自贴合内容顶部（空态不再被拉伸出留白），标题行像素对齐 */
.res-workbench.sci-wb { align-items: start; }

/* ── 决议 R1 / Q12（2026-08-07）──────────────────────────────────────────
   卡片操作区原来是 4 个按钮一行不换行；加了「☆推荐」变 5 个，实测装不下：
   卡片最窄 240px（.sci-course-grid 的 minmax），减去 .sci-course-body 的 12px×2
   与 1px×2 边框只剩 214px，而 5 颗 sm 按钮 ≈266px。
   所以**显式拆两行**（不靠 flex-wrap 自然折 —— 那会把「删除」孤零零甩到第二行左端）：
     第一行 = ↑ ↓ …… 删除（次要/工具）
     第二行 = ☆推荐 | 发布/下架 | 编辑（三颗主操作，等宽） */
.sci-course-ops { flex-wrap: wrap; row-gap: 6px; }
.sci-course-ops2 { margin-top: 8px; display: flex; gap: 8px; }
.sci-course-ops2 > .btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; }
.sci-rec-btn.is-on { --c-primary-hover: var(--c-primary); }
/* 非「已发布」的课：卡上直说后果，别只给一个中性的「草稿」徽标 */
.sci-course-hidden { margin-top: 6px; font-size: 12px; color: var(--c-text-3); background: var(--c-border-3); border-radius: 6px; padding: 2px 7px; display: inline-block; }
/* 栏目计数：配了几门 / 学生端真看得到几门 */
.sci-visible-count { margin: -4px 0 12px; font-size: 12px; color: var(--c-text-3); }
.sci-visible-count b { color: var(--c-text-1); }
.sci-visible-count.is-warn { color: #b45309; }
.sci-visible-count.is-warn b { color: #b45309; }

/* ── 决议 Q4=B · 课程详情全屏工作台（左目录 / 右内容）───────────────── */
.res-workbench.sci-detail-wb { align-items: start; }
.sci-detail-tree .res-tree-list { max-height: calc(100vh - 260px); }
.sci-d-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; color: var(--c-text-2); }
.sci-d-row + .sci-d-row { margin-top: 2px; }
.sci-d-row:hover { background: var(--c-primary-bg); }
.sci-d-row.active { background: var(--c-primary-bg); }
.sci-d-row.active .sci-d-tt { color: var(--c-primary); font-weight: 600; }
.sci-d-ico, .sci-d-no { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--c-border-3); font-size: 12px; color: var(--c-text-3); }
.sci-d-row.active .sci-d-ico, .sci-d-row.active .sci-d-no { background: var(--c-primary); color: #fff; }
.sci-d-main { flex: 1; min-width: 0; }
.sci-d-tt { font-size: 13px; color: var(--c-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sci-d-sub { margin-top: 1px; font-size: 12px; color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sci-d-ops { display: none; gap: 2px; }
.sci-d-row:hover .sci-d-ops { display: flex; }
.sci-d-ops button { border: 1px solid var(--c-border); background: var(--c-bg-card); border-radius: 6px; width: 22px; height: 22px; line-height: 1; cursor: pointer; color: var(--c-text-3); font-size: 12px; padding: 0; }
.sci-d-ops button:hover:not(:disabled) { color: var(--c-primary); border-color: var(--c-primary-border); }
.sci-d-ops button:disabled { opacity: .4; cursor: not-allowed; }
/* Q5=A：课程信息与课时之间的分隔线 */
.sci-d-divider { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 12px; color: var(--c-text-3); }
.sci-d-divider::before, .sci-d-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border-3); }
/* .form-row 是 `grid-template-columns:120px 1fr` 的两列网格 —— 直接往里塞第 3 个子元素
   会掉到第 2 行第 1 列（跑到标签底下、还被压成 120px 宽）。这是全站既有行为，
   不去动共用样式；本页把「控件 + 提示」包进 .sci-d-cell，让它们共占同一个格子。 */
.sci-d-cell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.sci-detail-panel .card-body { padding: 18px 22px 0; }
.sci-detail-body { min-height: 320px; }
/* Q6=A：右栏底部保存条 —— 粘在面板底部，切到哪一节都在同一个位置 */
.sci-detail-foot { display: flex; align-items: center; gap: 10px; margin: 0 -22px; padding: 12px 22px; border-top: 1px solid var(--c-border-3); background: var(--c-bg-card); border-radius: 0 0 12px 12px; position: sticky; bottom: 0; }
/* 课程卡面板：body 水平内边距与 .card-head(18px 22px) 一致 → 「发布状态」筛选行左缘与「…·课程」标题左缘对齐 */
.sci-course-panel .card-body { padding: 18px 22px 22px; }

/* 右侧课程卡标题带分类图标 */
.sci-right-title { display: inline-flex; align-items: center; gap: 7px; color: var(--c-text-1); }
.sci-right-title > .sci-svg-ico, .sci-right-title > .sci-icon-img { color: var(--c-primary); }

/* 分类图标选择器：预览 + 上传/AI + 内置矢量图标库 */
.sci-iconfield { display: flex; gap: 14px; align-items: flex-start; }
.sci-icon-preview { flex: none; width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--c-border); background: var(--c-primary-bg); display: flex; align-items: center; justify-content: center; color: var(--c-primary); }
.sci-iconfield-main { flex: 1; min-width: 0; }
.sci-icon-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sci-icon-lib { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 8px; max-height: 168px; overflow: auto; padding: 8px; border: 1px solid var(--c-border-3); border-radius: 8px; }
.sci-icon-cell { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-bg-card); color: var(--c-text-2); cursor: pointer; transition: color .12s, background .12s, border-color .12s; }
.sci-icon-cell:hover { color: var(--c-primary); border-color: var(--c-primary-border); }
.sci-icon-cell.active { color: #fff; background: var(--c-primary); border-color: var(--c-primary); }

/* AI 候选正方形（图标模式） */
.sci-cand-sq { width: 120px; }
.sci-cand-sq .sci-cand-img { width: 120px; height: 120px; }

/* ============================================================
   素材管理 · 有声绘本（列表 / 新建向导 / 生成中分镜墙 / 完成）
   生成中的时间线复用 .cwg-* 类；下列 .acp-* 为本页新增（风格卡 / 分镜卡 6 子态 / 指标条 / 步骤条）
   配色一律走主题变量（暗色 / 换主色不断裂）；扩展 hue（紫/青/金）用固定但柔和值。
   ============================================================ */
/* 列表封面缩略图（3:4 迷你） */
.acp-list-cover { width: 40px; height: 54px; border-radius: 6px; overflow: hidden; border: 1px solid var(--c-border); background: var(--c-bg); }
.acp-list-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 顶部指标条 */
.acp-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 900px) { .acp-metrics { grid-template-columns: repeat(2, 1fr); } }
.acp-metric { border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-bg-card); padding: 12px 14px; }
.acp-metric-v { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: var(--c-primary); font-feature-settings: "tnum"; }
.acp-metric-l { margin-top: 3px; font-size: 12px; color: var(--c-text-3); }

/* 时间线补充：工具回炉原因 / 阶段进度 */
.acp-tool-reason { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-warning, #d97706); background: var(--c-warning-bg, rgba(217,119,6,.08)); border: 1px solid var(--c-warning-border, rgba(217,119,6,.25)); border-radius: 8px; padding: 4px 9px; line-height: 1.5; }
.acp-tool-reason .icn { width: 12px; height: 12px; flex: none; }
.acp-stage-prog { color: var(--c-text-3); font-weight: 600; font-size: 12px; font-feature-settings: "tnum"; }

/* 分镜墙 */
.acp-panelwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.acp-panel { border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; background: var(--c-bg-card); animation: cwgPageIn .45s cubic-bezier(.22,.8,.36,1) both; transition: box-shadow .15s, transform .15s, border-color .15s; }
.acp-panel:hover { border-color: var(--c-primary-border); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.acp-panel.is-done { border-color: var(--c-success-border); }
.acp-panel-thumb { position: relative; aspect-ratio: 3 / 4; background: var(--c-bg); }
.acp-panel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acp-panel-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--c-text-3); background: linear-gradient(135deg, var(--c-bg), var(--c-bg-hover)); }
.acp-panel-idx { position: absolute; top: 7px; left: 7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: rgba(0,0,0,.58); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.acp-panel-badge { position: absolute; bottom: 7px; left: 7px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(15,23,42,.72); color: #fff; backdrop-filter: blur(2px); }
.acp-panel-badge .cwg-spin { width: 9px; height: 9px; border-width: 2px; }
.acp-panel-regen { position: absolute; top: 7px; right: 7px; padding: 2px 7px; border-radius: 999px; background: rgba(217,119,6,.92); color: #fff; font-size: 11px; font-weight: 600; }
.acp-panel-prog { height: 4px; background: var(--c-bg); }
.acp-panel-prog-bar { height: 100%; background: var(--c-primary); transition: width .35s ease, background .2s; }
.acp-panel-body { padding: 9px 11px 11px; }
.acp-panel-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--c-text); }
.acp-panel-title .no { flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--c-primary-bg); color: var(--c-primary); font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.acp-panel-title .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acp-panel-sub { margin-top: 5px; font-size: 12px; color: var(--c-text-3); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acp-panel-reason { margin-top: 6px; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--c-warning, #d97706); line-height: 1.4; }
.acp-panel-reason .icn { width: 11px; height: 11px; flex: none; }
.acp-panel-audio { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--c-primary-border); background: var(--c-primary-bg); color: var(--c-primary); font-size: 12px; font-weight: 600; cursor: pointer; }
.acp-panel-audio:hover { background: var(--c-primary); color: #fff; }
.acp-panel-audio .icn { width: 11px; height: 11px; }
/* 徽标 / 进度条 分子态配色 */
.acp-panel-badge.tone-gray { background: rgba(71,85,105,.78); }
.acp-panel-badge.tone-blue { background: rgba(37,99,235,.82); }
.acp-panel-badge.tone-gold { background: rgba(217,119,6,.85); }
.acp-panel-badge.tone-purple { background: rgba(124,58,237,.82); }
.acp-panel-badge.tone-cyan { background: rgba(8,145,178,.85); }
.acp-panel-badge.tone-green { background: rgba(22,163,74,.85); }
.acp-panel-prog-bar.tone-gray { background: #64748b; }
.acp-panel-prog-bar.tone-blue { background: #2563eb; }
.acp-panel-prog-bar.tone-gold { background: #d97706; }
.acp-panel-prog-bar.tone-purple { background: #7c3aed; }
.acp-panel-prog-bar.tone-cyan { background: #0891b2; }
.acp-panel-prog-bar.tone-green { background: #16a34a; }

/* 向导：顶部步骤条 */
.acp-wizbar { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.acp-steps { display: flex; align-items: center; gap: 6px; }
.acp-step { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-bg-card); color: var(--c-text-3); font-size: 13px; }
.acp-step + .acp-step { position: relative; }
.acp-step.active { border-color: var(--c-primary-border); background: var(--c-primary-bg); color: var(--c-primary); font-weight: 700; }
.acp-step.done { color: var(--c-success); border-color: var(--c-success-border); cursor: pointer; }
.acp-step-no { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--c-bg); border: 1px solid currentColor; }
.acp-step.active .acp-step-no { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.acp-step.done .acp-step-no { background: var(--c-success); color: #fff; border-color: var(--c-success); }

/* 向导：风格卡网格 */
.acp-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.acp-style-card { display: flex; gap: 12px; border: 1.5px solid var(--c-border); border-radius: 14px; padding: 12px; background: var(--c-bg-card); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.acp-style-card:hover { border-color: var(--c-primary-border); box-shadow: var(--shadow-1, 0 6px 18px rgba(15,23,42,.06)); transform: translateY(-2px); }
.acp-style-card.active { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.acp-style-thumb { flex: none; width: 66px; height: 88px; border-radius: 10px; overflow: hidden; border: 1px solid var(--c-border); background: var(--c-bg); }
.acp-style-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acp-style-info { flex: 1; min-width: 0; }
.acp-style-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--c-text); }
.acp-style-card.active .acp-style-name { color: var(--c-primary); }
.acp-style-name .icn { width: 14px; height: 14px; color: var(--c-primary); }
.acp-style-desc { margin-top: 5px; font-size: 12px; color: var(--c-text-3); line-height: 1.6; }
.acp-style-grid--sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 8px; }
.acp-style-grid--sm .acp-style-thumb { width: 48px; height: 64px; }

/* 列表：书籍 / 主题 段控 */
.acp-listtabs { display: flex; align-items: center; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 12px; background: var(--c-bg); border: 1px solid var(--c-border); width: fit-content; }
.acp-listtab { padding: 8px 22px; border: 0; border-radius: 9px; background: transparent; color: var(--c-text-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
.acp-listtab.active { background: var(--c-primary); color: #fff; }

/* 书籍工作台：头部 + 左右两栏 */
.acp-bookhead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acp-bookttl { font-size: 16px; font-weight: 700; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.acp-bookwb { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.acp-treepane .card-body, .acp-bookright .card-body { padding: 0; }
.acp-treepane { max-height: calc(100vh - 210px); }

/* 章节目录树 */
.acp-tree { padding: 8px; overflow: auto; max-height: calc(100vh - 260px); }
.acp-treerow { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--c-text-2); transition: background .12s; }
.acp-treerow:hover { background: var(--c-bg); }
.acp-treerow.active { background: var(--c-primary-bg); color: var(--c-primary); font-weight: 600; }
.acp-treerow.leaf { color: var(--c-text); }
.acp-treecar { width: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-3); }
.acp-treecar .icn { width: 12px; height: 12px; }
.acp-treename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acp-treepg { flex: none; font-size: 11px; color: var(--c-text-3); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 6px; padding: 0 6px; line-height: 18px; }
.acp-treerow.active .acp-treename { color: var(--c-primary); }
.acp-treekids { }

/* 选中节 · 书页图 + 生成 */
.acp-bookright .card-body { padding: 16px; }
.acp-chap { }
.acp-chapmeta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.acp-pagegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.acp-pagecard { position: relative; border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; background: var(--c-bg); box-shadow: var(--shadow-1, 0 4px 14px rgba(15,23,42,.05)); }
.acp-pagecard img { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover; }
.acp-pageno { position: absolute; left: 8px; bottom: 8px; font-size: 12px; color: #fff; background: rgba(15,23,42,.7); border-radius: 6px; padding: 2px 8px; }
.acp-chapfoot { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-border); flex-wrap: wrap; }

/* 向导：素材来源分段 + 底部按钮 */
.acp-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--c-bg); border: 1px solid var(--c-border); margin: 6px 0 4px; }
.acp-seg-btn { padding: 6px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--c-text-2); font-size: 13px; cursor: pointer; transition: background .12s, color .12s; }
.acp-seg-btn.active { background: var(--c-primary); color: #fff; font-weight: 600; }
.acp-wiz-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-border); flex-wrap: wrap; }

/* 向导：第三步确认卡 */
.acp-confirm { display: flex; gap: 18px; align-items: flex-start; }
.acp-confirm-cover { flex: none; width: 120px; height: 160px; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-border); background: var(--c-bg); }
.acp-confirm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acp-confirm-kv { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.acp-confirm-kv > div { display: flex; gap: 12px; font-size: 14px; }
.acp-confirm-kv .k { flex: none; width: 44px; color: var(--c-text-3); }
.acp-confirm-kv .v { color: var(--c-text); }

/* ============ 知识卡片生成（智能体） · pages-knowledge-card.jsx ============ */
.kc-page .page-sub { color: var(--text-muted, #64748b); font-size: 13px; margin-top: 4px; }
.kc-params { display: grid; gap: 10px; margin: 8px 0 4px; }
/* 风格选择器：预览缩略图画廊（看图选类型） */
.kc-style-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.kc-style-opt { display: flex; flex-direction: column; gap: 5px; padding: 0; background: none; border: none; cursor: pointer; text-align: center; }
.kc-style-thumb { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; border: 2px solid var(--line, #e2e8f0); background: var(--chip-bg, #f1f5f9); transition: border-color .15s, box-shadow .15s; }
.kc-style-opt:hover .kc-style-thumb { border-color: var(--primary, #2563eb); }
.kc-style-opt.on .kc-style-thumb { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2563eb) 22%, transparent); }
.kc-style-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.kc-style-autoic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--primary, #2563eb); line-height: 1.15; letter-spacing: 1px; }
.kc-style-ratio { position: absolute; left: 5px; bottom: 5px; background: rgba(15,23,42,.72); color: #fff; font-size: 10px; padding: 0 6px; border-radius: 99px; }
.kc-style-check { position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary, #2563eb); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.kc-style-nm { font-size: 12px; color: var(--text, #334155); line-height: 1.25; }
.kc-style-opt.on .kc-style-nm { color: var(--primary, #2563eb); font-weight: 600; }
.kc-mats { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border: 1.5px dashed var(--line, #e2e8f0); border-radius: 10px; min-height: 46px; }
.kc-mat { background: var(--chip-bg, #f1f5f9); border-radius: 8px; padding: 3px 8px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.kc-mat b { cursor: pointer; color: #94a3b8; font-weight: 700; margin-left: 2px; }
.kc-mat b:hover { color: var(--danger, #dc2626); }
.kc-mat-add { cursor: pointer; color: var(--primary, #2563eb); font-size: 12.5px; padding: 3px 10px; border: 1px solid var(--primary, #2563eb); border-radius: 8px; }
.kc-hint { color: #94a3b8; font-size: 11.5px; }
.kc-actions { margin-top: 14px; display: flex; gap: 10px; }
.kc-err { color: var(--danger, #dc2626); background: #fef2f2; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 8px 0; }
/* 运行区 */
.kc-run-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.kc-stages { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-stage { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: #f1f5f9; color: #64748b; }
.kc-stage.on { background: var(--primary, #2563eb); color: #fff; }
.kc-stage.ok { background: #dcfce7; color: #166534; }
.kc-run-body { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(300px, 1.1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .kc-run-body { grid-template-columns: 1fr; } }
.kc-chat { display: flex; flex-direction: column; gap: 10px; }
.kc-style-card { background: #eef6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.kc-style-card .kc-reason { color: #475569; }
.kc-think { background: #f8fafc; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.kc-think summary { cursor: pointer; color: #64748b; }
.kc-think pre { white-space: pre-wrap; color: #475569; margin: 6px 0 0; font-size: 12px; }
.kc-tool { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 7px 12px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kc-tool .kc-tool-dot { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.kc-tool.run .kc-tool-dot { background: var(--primary, #2563eb); animation: kcPulse 1s infinite; }
.kc-tool.done .kc-tool-dot { background: #16a34a; } .kc-tool.error .kc-tool-dot { background: #dc2626; }
.kc-tool-detail { color: #94a3b8; }
@keyframes kcPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.kc-text { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: #334155; }
.kc-ask { background: #fffbeb; border: 1.5px solid #fcd34d; border-radius: 12px; padding: 12px 14px; }
.kc-ask-title { font-weight: 600; color: #92400e; margin-bottom: 8px; }
.kc-q { margin-bottom: 10px; } .kc-q-text { font-size: 13px; margin-bottom: 5px; }
.kc-chip { display: inline-block; background: #fff; border: 1px solid #fcd34d; border-radius: 99px; padding: 3px 12px; font-size: 12.5px; margin: 0 6px 6px 0; cursor: pointer; }
.kc-chip:hover { background: #fef3c7; }
.kc-ask-input { display: flex; gap: 8px; align-items: center; }
.kc-ask-input .inp { flex: 1; }
/* 卡片墙 */
.kc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-content: start; }
.kc-card-cell { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.kc-card-cell img { width: 100%; display: block; background: #f2f5f8; }
.kc-card-ph { height: 130px; display: flex; align-items: center; justify-content: center; color: #94a3b8; background: #f8fafc; font-size: 13px; }
.kc-card-cell.drawing .kc-card-ph { color: var(--primary, #2563eb); }
.kc-card-meta { padding: 8px 10px; font-size: 12px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.kc-saved { grid-column: 1 / -1; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; border-radius: 10px; padding: 10px 14px; font-size: 13px; }

/* ===== 作文管理 · 目录树上的 AI 生成进度（供 SyncTreeNode 的 statusOf） =====
   为什么要标在树上：勾了 8 个章节批量生成时，只给一个全局「生成中…」，
   用户看不出跑到第几个 —— 与「点了没反应」是同一类观感问题。 */
.zw-spin{
  display:inline-block; width:12px; height:12px; margin-left:6px; flex:none;
  border:2px solid var(--c-border, #e5e7eb); border-top-color: var(--primary, #2563eb);
  border-radius:50%; animation: zwspin .7s linear infinite;
}
@keyframes zwspin{ to{ transform: rotate(360deg) } }
/* 尊重「减少动态效果」的系统偏好：不转，改成呼吸，信息不丢 */
@media (prefers-reduced-motion: reduce){
  .zw-spin{ animation: zwpulse 1.2s ease-in-out infinite; border-top-color: var(--primary, #2563eb); }
  @keyframes zwpulse{ 0%,100%{opacity:.35} 50%{opacity:1} }
}
.zw-queued{ margin-left:6px; font-size:12px; color: var(--c-text-3, #9ca3af); letter-spacing:1px; flex:none; }
.zw-ok{ margin-left:6px; font-size:12px; color: var(--c-success, #16a34a); font-weight:700; flex:none; }
.zw-bad{ margin-left:6px; font-size:12px; color: var(--danger, #e5484d); font-weight:700; flex:none; }

/* ============================================================
   有声绘本 · 2026-08-05 一批（R1 书籍选择弹窗 / R2 内嵌放映器 / R4 16:9 封面 /
   R6·R10 批量 / R14 旁白编辑 / R15 题材与画风两段式）
   ⚠️ 一律用 CSS 变量，不硬编码色号（否则换肤会断）。
   ============================================================ */

/* —— R4：封面从 3:4 竖版换成 16:9 横版（40×54 → 96×54）—— */
.acp-list-cover--wide { width: 96px; height: 54px; display: flex; align-items: center; justify-content: center; }
.acp-cover-empty { font-size: 11px; color: var(--c-text-3); letter-spacing: 1px; }
.acp-list-cover--wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 确认页封面同样改横版 */
.acp-confirm-cover--wide { position: relative; width: 208px; height: 117px; }
.acp-confirm-covertag { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(15,23,42,.72); color: #fff; font-size: 11.5px; letter-spacing: .3px; }

/* —— R16 成片时长（Q6 四档 + 自定义 · Q7 与目标页数双向联动）——
   ⚠️ 档位钮沿用 `.acp-seg-btn` 的观感但**不复用那个类**：那是分段控件（互斥一条），
      这里的「自定义」按下去要额外展开一个输入框，塞进 .acp-seg 会把分段的等宽布局撑坏。 */
.acp-durbox { margin: 8px 0 4px; }
.acp-durchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acp-chip { position: relative; font: inherit; font-size: 13px; padding: 7px 14px; border-radius: var(--radius-pill, 999px);
  cursor: pointer; border: 1px solid var(--c-border); background: var(--c-bg-card); color: var(--c-text-2);
  transition: border-color .12s, background .12s, color .12s; }
.acp-chip:hover { border-color: var(--c-primary); background: var(--c-bg-active); }
.acp-chip.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }
.acp-chip-df { margin-left: 6px; font-style: normal; font-size: 11px; opacity: .8; }
.acp-custwrap { display: inline-flex; align-items: center; gap: 6px; }
.acp-durrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.acp-durrow .lbl { font-size: 13px; color: var(--c-text-2); }
.acp-durnote { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--c-text-3); }
.acp-durnote b { color: var(--c-text-2); }

/* —— R15 ①「讲什么 · 题材」：**没有缩略图**，靠读 —— */
.acp-picker-hint { margin-left: 10px; font-weight: 400; font-size: 12.5px; color: var(--c-text-3); }
.acp-subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.acp-subject-card { padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 10px; cursor: pointer;
  background: var(--c-bg-card); transition: border-color .12s, box-shadow .12s, background .12s; }
.acp-subject-card:hover { border-color: var(--c-primary); }
.acp-subject-card.active { border-color: var(--c-primary); background: var(--c-bg-active); box-shadow: 0 0 0 2px var(--c-primary-weak, rgba(37,99,235,.16)); }
.acp-subject-name { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--c-text-1); }
.acp-subject-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--c-text-3); }

/* —— R15 ②「画成什么样 · 画风」：16:9 真样张，靠看 ——
   🔴 不能复用 .acp-style-thumb（66×88 竖版）：16:9 塞进去会被裁成一条竖缝。 */
.acp-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.acp-art-card { border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--c-bg-card); transition: border-color .12s, box-shadow .12s, transform .12s; }
.acp-art-card:hover { border-color: var(--c-primary); transform: translateY(-1px); }
.acp-art-card.active { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-weak, rgba(37,99,235,.16)); }
.acp-art-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--c-bg); overflow: hidden; }
.acp-art-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acp-art-badge { position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(15,23,42,.72); color: #fff; font-size: 11px; }
.acp-art-check { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; }
.acp-art-name { padding: 8px 10px 0; font-weight: 600; font-size: 13.5px; color: var(--c-text-1); }
.acp-art-desc { padding: 2px 10px 10px; font-size: 12px; line-height: 1.55; color: var(--c-text-3); }

/* —— 旁白音色（2026-08-11 决议 Q13）：常用几张直接摆，其余进「看全部」弹窗 ——
   🔴 形态刻意**不同于画风卡**：画风靠看（16:9 样张），音色靠听 ——
      给音色卡配缩略图是假信息（一张脸代表不了一把嗓子），所以只有名字 + 一句描述 + ▶。
   `.all` 是「看全部」弹窗里的密排版：列窄一点，18 张一屏能扫完。 */
.acp-voicegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; margin: 10px 0 2px; }
.acp-voicegrid.all { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); max-height: min(52vh, 460px); overflow: auto; padding-right: 4px; }
.acp-voicecard { position: relative; text-align: left; font: inherit; cursor: pointer;
  padding: 10px 34px 10px 12px; border: 1px solid var(--c-border); border-radius: 10px;
  background: var(--c-bg-card); transition: border-color .12s, box-shadow .12s, background .12s; }
.acp-voicecard:hover { border-color: var(--c-primary); }
.acp-voicecard.on { border-color: var(--c-primary); background: var(--c-bg-active);
  box-shadow: 0 0 0 2px var(--c-primary-weak, rgba(37,99,235,.16)); }
.acp-voicenm { display: block; font-weight: 600; font-size: 14px; color: var(--c-text-1); }
.acp-voicedesc { display: block; margin-top: 3px; font-size: 12px; line-height: 1.55; color: var(--c-text-3); }
/* ▶ 是卡片里的**第二个可点区**（选中 vs 试听是两件事）—— 做大一点、离文字远一点，
   否则「想试听结果选中了」会天天发生。 */
.acp-voiceplay { position: absolute; right: 6px; top: 8px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-text-2); }
.acp-voiceplay:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* —— R1：从书籍文件导入建书 · 列表样式弹窗 —— */
.acp-bookpick { max-width: 100%; }
.acp-bookpick .modal-body { max-height: min(66vh, 620px); overflow: auto; }

/* —— 批量生成/删除弹窗 与 单节生成弹窗：内容区可上下滚动 ——
   题材 6 张 + 画风 10 张卡片、章节清单动辄几十行，整窗会顶穿视口 ——
   而 Modal 的「取消 / 开始生成」在 footer 里，一顶穿就被裁到屏幕外，弹窗变成**点不掉也提交不了**。
   只给内容区限高滚动，头/脚固定（照上面 .acp-bookpick 的现成写法，同一个 Modal 结构）。
   ⚠️ 这里刻意只覆盖这两个弹窗，不改全站 .modal-body —— 全站兜底会连带影响几十个已验收的弹窗，
      属另一件事，单独排期。 */
.acp-batchmodal .modal-body,
.acp-genmodal .modal-body { max-height: min(66vh, 620px); overflow: auto; }
/* R18 · 决议 Q9：**每一类各占一行**，与「书籍文件」列表页一致。
   改前是 `flex-wrap: wrap` 横向流排：类型 / 学段 / 学科 / 学制 / 版本 / 年级 / 可导入 七排
   混着挤在一起换行 —— 学科 22 个、版本裁完仍可能 27 个，根本没法扫。
   ⚠️ 改成 `display: block` 之后，原来靠 `margin-left:auto` 顶到最右的搜索框会失效
      （那是 flex 才有的行为），所以搜索框单独包一层 `.acp-bookpick-search` 右对齐。 */
.acp-bookpick-filter { display: block; margin: 6px 0 10px;
  padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg); }
.acp-bookpick-filter .res-filter-row { margin-bottom: 8px; }
.acp-bookpick-filter .res-filter-row:last-child { margin-bottom: 0; }
.acp-bookpick-search { display: flex; justify-content: flex-end; margin-top: 8px; }
.acp-bookpick-filter .input.search { max-width: 260px; }
.acp-bookpick-list { border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; }
.acp-bookpick-list .table { margin: 0; }

/* —— R2：详情页「有声绘本」页签里内嵌的放映器 ——
   🔴 必须给容器一个确定高度：player.css 里 .apl-root 是 height:100%，
      容器没高度的话放映器会塌成 0 像素（看起来像「什么都没渲染」）。 */
.acp-embedstage { width: 100%; height: clamp(280px, 44vh, 520px); border-radius: 12px; overflow: hidden;
  background: #0b1220; margin-bottom: 12px; }
.acp-embed-miss { height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--c-text-3); font-size: 13px; padding: 20px; text-align: center; }
.acp-seg--sm .acp-seg-btn { padding: 4px 12px; font-size: 12.5px; }

/* —— R8：一节多绘本，逐部一行 —— */
.acp-comiclist { display: flex; flex-direction: column; gap: 6px; }
.acp-comicrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--c-border); background: var(--c-bg-card); font-size: 13px; flex-wrap: wrap; }
.acp-comicrow.active { border-color: var(--c-primary); background: var(--c-bg-active); }
.acp-comicrow .no { flex: none; width: 20px; color: var(--c-text-3); }
.acp-comicrow .tt { font-weight: 600; color: var(--c-primary); cursor: pointer; }
.acp-comicrow a { cursor: pointer; color: var(--c-primary); }

/* —— R6 · R10：批量弹窗的目录多选 —— */
.acp-batchtree { max-height: 300px; overflow: auto; border: 1px solid var(--c-border); border-radius: 10px; padding: 6px 0; background: var(--c-bg); }
.acp-batchgroup { padding: 6px 10px; font-size: 12.5px; font-weight: 600; color: var(--c-text-3); }
.acp-batchnode { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.acp-batchnode:hover { background: var(--c-bg-active); }
.acp-batchnode.disabled { opacity: .45; cursor: not-allowed; }
.acp-batchnode .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acp-batchnode .cnt { flex: none; font-size: 12px; color: var(--c-text-3); }
.acp-inc { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12.5px; color: var(--c-text-2); cursor: pointer; }

/* —— R14：旁白编辑抽屉 —— */
.acp-narr-page { border: 1px solid var(--c-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--c-bg-card); }
.acp-narr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.acp-narr-head .no { flex: none; font-weight: 700; font-size: 13px; color: var(--c-text-1); }
.acp-narr-seg { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.acp-narr-seg .t { flex: none; width: 46px; padding-top: 8px; font-size: 11.5px; color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.acp-narr-seg textarea { flex: 1; min-width: 0; }

/* 窄屏（1024 视口）：弹窗不顶边、样张网格收一档 */
@media (max-width: 1080px) {
  .acp-bookpick, .acp-batchmodal, .acp-genmodal { width: calc(100vw - 48px) !important; }
  .acp-art-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .acp-subject-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* ── DatePicker（自绘日历，2026-08-05 新增，替代原生 <input type="date">）──
   面板是**相对定位**在字段容器里的，不是 fixed 挂 body —— 挂出去会被 Modal 遮罩点掉。
   颜色一律走 CSS 变量，别硬编码色号（换肤会断）。 */
.dp { position: relative; width: 100%; }
.dp-field { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg-card);
  cursor: text; transition: border-color .15s, box-shadow .15s; }
.dp-field:hover { border-color: var(--c-primary-border, var(--c-primary)); }
.dp-field:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-bg); }
.dp-field.is-disabled { background: var(--c-bg); cursor: not-allowed; opacity: .7; }
.dp-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--c-text); font-variant-numeric: tabular-nums; }
.dp-ico { flex: none; font-size: 14px; color: var(--c-text-3); pointer-events: none; }

.dp-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 268px;
  background: var(--c-bg-card); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow-2, 0 12px 32px rgba(15,23,42,.14)); padding: 10px; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-nav { width: 26px; height: 26px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-bg-card); color: var(--c-text-2); cursor: pointer; line-height: 1; }
.dp-nav:hover { border-color: var(--c-primary); color: var(--c-primary); }
.dp-ym { display: inline-flex; gap: 6px; }
.dp-ym select { height: 26px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-bg-card); color: var(--c-text); font-size: 12.5px; padding: 0 4px; cursor: pointer; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-week { margin-bottom: 4px; }
.dp-week span { text-align: center; font-size: 11.5px; color: var(--c-text-3); line-height: 22px; }
.dp-d { height: 30px; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--c-text); font-size: 12.5px; cursor: pointer; font-variant-numeric: tabular-nums; }
.dp-d:hover:not(:disabled) { background: var(--c-primary-bg); color: var(--c-primary); }
.dp-d.out { color: var(--c-text-3); opacity: .45; cursor: default; }
.dp-d.today { box-shadow: inset 0 0 0 1px var(--c-primary); }
.dp-d.on { background: var(--c-primary); color: #fff; }
.dp-d.on:hover { background: var(--c-primary-hover); color: #fff; }
.dp-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-border-3, var(--c-border)); }
.dp-link { border: 0; background: none; cursor: pointer; font-size: 12.5px; color: var(--c-text-2); padding: 0; }
.dp-link:hover { color: var(--c-primary); }
.dp-link.primary { color: var(--c-primary); font-weight: 600; }
/* 面板打开期间临时放开弹窗裁剪 —— .modal 默认 overflow:hidden 会把日历裁掉半截。
   只在打开时加，关掉就撤，不影响其余 40 个弹窗。 */
.modal.has-dp-open { overflow: visible; }
/* R3（2026-08-07）：同一条机制复用给 MultiCheckSelect 的下拉浮层。
   ⚠️ 裁剪源**不止 .modal 一处** —— `.modal-body{overflow:auto}` 与 `.drawer-body{overflow-y:auto}`
   同样会裁掉绝对定位的面板，只放开 .modal 会「弹窗高的时候好了、矮的时候还是被裁」，
   而这种「有时好有时坏」最难查。三处一起放开。 */
.modal-body.has-dp-open { overflow: visible; }
.drawer-body.has-dp-open { overflow-y: visible; }
/* 下方放不下时往上开 */
.dp-pop.up { top: auto; bottom: calc(100% + 6px); }

/* ── 汉字管理 · 重名就地提示 + 落点行高亮（2026-08-07）───────────────────────
   为什么不复用上面的 .hl-flash：它是 `outline + offset:6px`，套在 <tr> 上会**外扩压到相邻行**
   （表格行之间没有那 6px 余量）。表格行改用 td 背景动画，不撑布局、不越界。
   时长 3s 而不是 1.5s：跳过去要先换关键词再重排列表，1.5s 常常在视线到位之前就灭了。 */
.hl-dup-flash > td {
  animation: hl-dup-fade 3s ease-out forwards;
}
@keyframes hl-dup-fade {
  0%   { background: var(--c-warn-bg, #fff4e5); }
  70%  { background: var(--c-warn-bg, #fff4e5); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-dup-flash > td { animation: none; background: var(--c-warn-bg, #fff4e5); }
}

/* 抽屉里的就地提示条。承载面必须是它而不是 toast：两份 __toast 实现都只写 textContent，
   渲染不出「在列表里找到它 →」这种可点元素，而且 2.6 秒就消失。 */
.hl-dup-note {
  border: 1px solid var(--c-warn-line, #f0c36d);
  background: var(--c-warn-bg, #fff8ec);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.hl-dup-note .hl-dup-msg { font-weight: 600; color: var(--c-text-1); line-height: 1.6; }
.hl-dup-note .hl-dup-sub { color: var(--c-text-2, #6b7280); font-size: 13px; margin-top: 4px; line-height: 1.6; }
.hl-dup-note .hl-dup-acts { display: flex; gap: 8px; margin-top: 10px; }

/* ============================================================
   家长学院（素材管理 · pages-parent-academy.jsx）
   决议：html/家长学院-方案与待确认.html（14 题已拍板）

   ⚠️ 左树复用既有的 .res-workbench / .res-tree-card / .res-tree-list / .res-tree-node
      （见本文件 2137 起「资源工作台」那一段）—— 本节只加**本页独有**的部分，
      作用域一律 .pa-*，不改任何既有 class。
   ============================================================ */

/* ── 左侧栏目树（在 .res-tree-node 之上补条数、hover 操作、拖拽把手）── */
.pa-tnode { gap: 6px; }
.pa-tnode .pa-tn {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  color: var(--c-text-3);
  flex: 0 0 auto;
}
.pa-tnode.active .pa-tn { color: var(--c-primary); }
.pa-tfeat { color: var(--c-warning); font-weight: 700; }
.pa-tfeat:hover { background: var(--c-warning-bg); }
.pa-tdis { opacity: 0.5; }
.pa-tsep { height: 1px; background: var(--c-border-3); margin: 5px 8px; }
.pa-tdrag { cursor: grab; user-select: none; letter-spacing: -1px; }
/* hover 才浮出操作 —— 与 AI 通识课那棵树同款交互（.ac-tactions） */
.pa-tactions { display: none; gap: 2px; flex: 0 0 auto; margin-left: 4px; }
.pa-tnode:hover .pa-tactions { display: flex; }
.pa-tactions button {
  width: 20px; height: 20px; padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-bg-card);
  color: var(--c-text-2);
  font-size: 11px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pa-tactions button:hover {
  border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-bg);
}
.pa-tedit {
  flex: 1; min-width: 0; height: 24px;
  padding: 0 7px; font-size: 12.5px;
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-sm);
  background: var(--c-bg-card); color: var(--c-text);
}
.pa-tadd {
  width: 100%; padding: 9px 0;
  border: none; border-top: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-primary);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.pa-tadd:hover { background: var(--c-primary-bg); }

/* ── 列表 ── */
.pa-list-act { display: flex; gap: 8px; align-items: center; }
.pa-new-wrap { position: relative; }
.pa-new-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  width: 226px; padding: 5px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.pa-new-menu button {
  display: block; width: 100%; padding: 8px 10px;
  border: none; background: transparent; text-align: left; cursor: pointer;
  border-radius: var(--radius-sm); color: var(--c-text);
}
.pa-new-menu button:hover { background: var(--c-primary-bg); color: var(--c-primary); }
.pa-new-menu button b { display: block; font-size: 13px; }
.pa-new-menu button span { display: block; font-size: 11.5px; color: var(--c-text-3); margin-top: 2px; }
/* 封面统一 16:9（R1/R2 起都是豆包出的 1920×1080），所以缩略图也按 16:9 —— 52×34 是 1.53，会把图裁掉一点 */
.pa-thumb { width: 52px; height: 30px; border-radius: 5px; object-fit: cover; display: block; }
.pa-thumb.ph { background: var(--c-bg); border: 1px dashed var(--c-border); }
/* 缩略图占位按形态给底色 —— 与家长端一致：音频紫、视频深灰 */
.pa-thumb.ph[data-k="audio"] { background: linear-gradient(135deg, #9c8bff, #6a55e0); border: none; }
.pa-thumb.ph[data-k="video"] { background: #2b3038; border: none; }
.pa-title { cursor: pointer; }
.pa-title:hover { color: var(--c-primary); text-decoration: underline; }
/* ⚠️ 已弃用（2026-08-09）：列表页的摘要改走全仓规范的 `.table .name-cell .sub`
   （本文件 :932-933）。保留这条只为兼容可能残留的引用，新代码不要再用。 */
.pa-sum { margin-top: 3px; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-loading { padding: 30px 0; text-align: center; color: var(--c-text-3); font-size: 13px; }
.pa-danger { color: var(--c-error); font-weight: 700; }

/* 提示条 */
.pa-notice {
  margin: 0 0 14px; padding: 10px 13px;
  border-left: 3px solid var(--c-primary-border);
  background: var(--c-primary-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px; line-height: 1.7; color: var(--c-text);
}
.pa-notice.warn { border-left-color: var(--c-warning-border); background: var(--c-warning-bg); }

/* ── 编辑页 ── */
.pa-edit-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.pa-edit-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.pa-edit-act { margin-left: auto; display: flex; gap: 8px; }
.pa-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1180px) { .pa-edit-grid { grid-template-columns: minmax(0, 1fr); } }
.pa-edit-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pa-edit-side { position: sticky; top: 12px; }
.pa-side-title { font-size: 13px; font-weight: 700; color: var(--c-text-2); margin: 0 0 8px; }

.pa-cover { display: flex; gap: 10px; align-items: flex-start; }
.pa-cover img { width: 160px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--c-border); }
.pa-cover .ph {
  width: 160px; height: 90px; border-radius: var(--radius-sm);
  border: 1px dashed var(--c-border); background: var(--c-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-3); font-size: 12px;
}
.pa-cover-act { display: flex; flex-direction: column; gap: 6px; }
.pa-switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; }
.pa-miss { margin: 0; padding-left: 20px; line-height: 1.9; }

/* ── 富文本编辑器外框（wangEditor 自带样式在 vendor/wangeditor-*.css）── */
.pa-ed { border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.pa-ed-bar { border-bottom: 1px solid var(--c-border); background: var(--c-bg); }
.pa-ed-body { min-height: 320px; }
/* wangEditor 的 z-index 默认较高，压住我们的弹窗；限制在编辑区内 */
.pa-ed .w-e-text-container { z-index: 1; }
.pa-ed .w-e-bar { z-index: 2; }
.pa-ed-missing {
  padding: 16px; border: 1px dashed var(--c-error-border);
  background: var(--c-error-bg); border-radius: var(--radius);
  font-size: 13px; line-height: 1.8; color: var(--c-text);
}

/* ── 样式模板 ── */
.pa-tpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin: 0 0 14px; }
.pa-tpl {
  padding: 10px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-bg-card); color: var(--c-text);
}
.pa-tpl:hover { border-color: var(--c-primary); background: var(--c-primary-bg); }
.pa-tpl b { display: block; font-size: 13px; }
.pa-tpl span { display: block; font-size: 11.5px; color: var(--c-text-3); margin-top: 2px; }

/* ── 上传区 ── */
.pa-up-row {
  display: flex; gap: 11px; align-items: center;
  padding: 10px 12px; margin: 10px 0 0;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-bg-card);
}
.pa-up-row .ic {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px;
  background: var(--c-primary-bg); color: var(--c-primary);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.pa-up-row .mid { flex: 1; min-width: 0; }
.pa-up-row .nm { font-size: 13px; font-weight: 600; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.pa-up-row .meta { font-size: 11.5px; color: var(--c-text-3); line-height: 1.6; margin-top: 3px; }
.pa-url { word-break: break-all; opacity: 0.7; }
.pa-warn { color: var(--c-warning); }
.pa-up-bar { height: 5px; border-radius: 3px; background: var(--c-border-3); overflow: hidden; margin: 8px 0 0; }
.pa-up-bar i { display: block; height: 100%; background: var(--c-primary); transition: width 0.2s; }
/* 🔴 失败要响亮 —— 不能长得像「还没传」 */
.pa-up-err {
  margin: 10px 0 0; padding: 11px 13px;
  border: 1px solid var(--c-error-border); background: var(--c-error-bg);
  border-radius: var(--radius); font-size: 13px; line-height: 1.7;
}
.pa-up-err-act { margin-top: 8px; }
.pa-imp-as { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; font-size: 13px; }

/* ── 390px 手机预览（注入家长端真实正文样式；令牌抄 jiazhangduan tokens.css）── */
.pa-phone {
  --jz-primary: #0e7bff; --jz-primary-soft: #eaf3ff;
  --jz-ink1: #1b1f24; --jz-ink2: #3a3f45; --jz-ink4: #6e747c; --jz-ink5: #9aa0a8;
  --jz-line: #edeff2; --jz-surface: #fff; --jz-surface3: #f0f2f5;
  --jz-audio: #7c5cff; --jz-audio-soft: #f0ecff;
  --jz-video: #f5a623; --jz-video-soft: #fff3e0;
  width: 100%; max-width: 380px; height: 620px;
  display: flex; flex-direction: column;
  border: 8px solid #1b1f24; border-radius: 30px; overflow: hidden;
  background: #f4f5f7;
}
.pa-phone-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: var(--jz-surface);
  border-bottom: 1px solid var(--jz-line);
  font-size: 16px; color: var(--jz-ink1);
}
.pa-phone-top .bk { font-size: 19px; }
.pa-phone-body { flex: 1; overflow-y: auto; padding: 13px 15px 16px; background: var(--jz-surface); }
.pa-phone-bottom {
  flex: 0 0 auto; display: flex; gap: 10px; padding: 10px 14px;
  border-top: 1px solid var(--jz-line); background: var(--jz-surface);
}
.pa-phone-bottom button {
  flex: 1; padding: 11px 0; border: none; border-radius: 13px;
  background: #f4f6f8; color: var(--jz-ink2); font-size: 14px; font-weight: 700;
}
.pa-pv-audio {
  display: flex; gap: 11px; align-items: center;
  padding: 14px; border-radius: 16px; margin: 0 0 13px;
  background: linear-gradient(135deg, #9c8bff, #6a55e0); color: #fff;
}
.pa-pv-audio .ic {
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.22);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.pa-pv-audio .t { font-size: 14px; font-weight: 800; line-height: 1.4; }
.pa-pv-audio .s { font-size: 11.5px; opacity: 0.85; margin-top: 4px; }
.pa-pv-video {
  position: relative; height: 190px; border-radius: 14px; margin: 0 0 13px;
  background: #2b3038; display: flex; align-items: center; justify-content: center;
}
.pa-pv-video .play {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.28); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.pa-pv-video .dur {
  position: absolute; right: 9px; bottom: 9px;
  padding: 1px 7px; border-radius: 5px;
  background: rgba(27, 31, 36, 0.6); color: #fff; font-size: 11px; font-weight: 700;
}
.pa-pv-kind {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 700;
  background: var(--jz-primary-soft); color: var(--jz-primary);
}
.pa-pv-kind[data-k="audio"] { background: var(--jz-audio-soft); color: var(--jz-audio); }
.pa-pv-kind[data-k="video"] { background: var(--jz-video-soft); color: var(--jz-video); }
.pa-pv-title { margin: 11px 0 7px; font-size: 17px; font-weight: 800; line-height: 1.45; color: var(--jz-ink1); }
.pa-pv-meta { font-size: 11.5px; color: var(--jz-ink4); }
.pa-pv-hr { height: 1px; background: var(--jz-line); margin: 13px 0; }
/* 正文：与家长端 ds/ClassroomDetail.css 的 .ds-cr-body 同口径 */
.pa-pv-body { font-size: 14.5px; line-height: 1.85; color: var(--jz-ink2); word-break: break-word; }
.pa-pv-body p { margin: 0 0 14px; }
/* 🔴 后台排的版在手机上不许横向滚 —— 图片与表格都要收进容器 */
.pa-pv-body img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.pa-pv-body table { max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.pa-pv-body h1, .pa-pv-body h2, .pa-pv-body h3 { line-height: 1.45; }
.pa-pv-body blockquote { margin: 0 0 14px; }
.pa-pv-body ul, .pa-pv-body ol { padding-left: 22px; margin: 0 0 14px; }

/* ── 家长学院正文的「样式模板」外观 ────────────────────────────────────────
   🔴 **这一段与家长端的 ds/ClassroomDetail.css `.ds-cr-body` 必须同步。**
      改一处不改另一处 → 后台预览与家长端长得不一样，而运营是照着后台预览排版的。

   🔴 **为什么样式在这里、不在片段的内联 style 里**（2026-08-08 实测，别改回去）：
      wangEditor 内部是 slate 模型，dangerouslyInsertHtml 会按 schema 归一化，
      **块级元素的内联 style 全部丢弃** —— <h2 style="border-left…"> 出来就是 <h2>。
      只有 color（span 的 text mark）与 text-align（段落属性）活得下来。
      所以片段只产出语义标签，外观靠这里的 CSS。
      详见 pages-parent-academy.jsx 的 PA_SNIPPETS 注释与 tests/e2e/parent-academy.e2e.py。 */
.pa-pv-body h2 {
  margin: 22px 0 12px;
  padding-left: 10px;
  border-left: 4px solid var(--jz-primary);
  font-size: 18px;
  font-weight: 700;
  color: var(--jz-ink1);
}
.pa-pv-body h3 {
  margin: 20px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--jz-ink1);
}
.pa-pv-body blockquote {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #f4f6f8;
  border-radius: 8px;
  border-left: 3px solid #dfe3e8;
  color: var(--jz-ink2);
  font-size: 15px;
  line-height: 1.8;
}
/* 首字带 <strong> 的引用块 = 「重点框」，给琥珀色边框区分开 */
.pa-pv-body blockquote > strong:first-child,
.pa-pv-body blockquote:has(> strong:first-child) {
  color: #9a6300;
}
.pa-pv-body blockquote:has(> strong:first-child) {
  background: var(--jz-video-soft);
  border-left-color: var(--jz-video);
}
.pa-pv-body hr {
  margin: 24px 0;
  border: none;
  border-top: 1px solid var(--jz-line);
}
.pa-pv-body ul,
.pa-pv-body ol {
  padding-left: 22px;
  margin: 0 0 16px;
  line-height: 1.9;
}
.pa-pv-body li { margin: 0 0 6px; }
.pa-pv-body strong { font-weight: 700; color: var(--jz-ink1); }
.pa-pv-body a { color: var(--jz-primary); text-decoration: none; }

/* ===== 家长学院 · 2026-08-09 新增（导入弹窗重做 + 试听）=====
   方案与 12 条决议：code-area/html/家长学院6条改动-方案与待确认.html
   线上 https://aihtml.qimingdaren.com/ai1v1-tech/plans/academy-cover-list-api-20260809.html */

/* 导入弹窗的列表区：**自己限高滚动**。
   🔴 根因：`.modal` 有 overflow:hidden 却没有 max-height（本文件 :1525），
      11 行内容就把弹窗顶出视口、底部按钮被切在屏幕外。
      同仓已有解法是给列表容器套滚动（`.sci-bookpick-list` :6615），这里照抄，
      **不动 .modal 全局** —— 那会影响所有弹窗，要单独排期 + 全量回归。 */
.pa-imp-list { max-height: 420px; overflow: auto; }
.pa-imp-cover { width: 72px; height: 40px; border-radius: 5px; object-fit: cover; display: block; }
.pa-imp-cover.ph {
  background: var(--c-bg); border: 1px dashed var(--c-border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--c-text-3);
}
/* 已导入过的行整行灰掉（与「导入有声绘本书」同口径，:6619 那条 tr.is-imported） */
.pa-imp-list tr.is-imported { opacity: .55; }
.pa-imp-done { color: var(--c-success); font-size: 13px; white-space: nowrap; }
.pa-imp-tip { margin: 10px 0 0; line-height: 1.7; }

/* 试听按钮 + 行内展开的播放器（决议 Q9） */
.pa-play {
  width: 28px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-bg-card); color: var(--c-text-2); font-size: 11px; line-height: 1;
}
.pa-play:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pa-play.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
/* 播放器占满一整行（<td colSpan>），背景与表格错开一点，让人看出它属于上面那一行 */
.pa-play-row > td { background: var(--c-bg); height: auto !important; padding: 9px 22px !important; }
.pa-play-wrap { display: flex; align-items: center; gap: 10px; }
.pa-play-wrap audio { height: 32px; }
.pa-play-open { font-size: 12px; color: var(--c-primary); white-space: nowrap; }
/* ⛔ 播不出来不许静默 —— 出可见的错误条 + 可复制地址。
   「点了没反应」会被当成按钮坏了，而真相往往是那条 TOS 文件没了。 */
.pa-play-err {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--c-error);
}
.pa-play-url {
  font-family: var(--font-mono); font-size: 11px; color: var(--c-text-3);
  word-break: break-all; flex: 1; min-width: 0;
}

/* 操作列里「禁用态」的文字链：灰、不可点、hover 出原因。
   ⚠️ 特异性要压过全局 `a { color: var(--c-primary) }`，所以带 .table 前缀 —— 与
   本文件 :927-928 那两条 .danger/.success 同一套路。 */
.table .actions .action-list a.dis,
.actions .action-list a.dis { color: var(--c-text-4); cursor: not-allowed; }
.table .actions .action-list a.dis:hover { color: var(--c-text-4); }

/* AI 生成封面 · 候选网格（R2 / 决议 Q4）。
   卡片按 16:9 摆 —— 候选图本来就是 1920×1080，用别的比例展示会让人误判构图。 */
.pa-cand-wrap { margin-top: 14px; }
.pa-cand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pa-cand { display: flex; flex-direction: column; gap: 6px; }
.pa-cand img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--c-border); display: block;
}

/* 播客管理 · 封面列（R1 · 2026-08-09）。
   🔴 之前只在 JSX 里写了 className="pc-cover" 却**没定义这个类** ——
      于是 <img> 按天然尺寸 1920×1080 渲染，把整张表撑烂（生产终检量到的就是它）。
      这正是本次要修的 `.tbl` 无定义那个坑**原样重演一次**：
      用了一个不存在的 class，浏览器不报错、只是什么样式都不给。 */
.pc-cover { width: 64px; height: 36px; border-radius: 6px; object-fit: cover; display: block; }
.pc-cover.old { opacity: .85; }                 /* 还没回填 AI 封面，显示的是 images[0] */
.pc-cover.ph, .pc-cover.fail {
  width: 64px; height: 36px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; line-height: 1.2; text-align: center;
}
.pc-cover.ph { background: var(--c-bg); border: 1px dashed var(--c-border); color: var(--c-text-3); }
.pc-cover.fail { background: var(--c-error-bg); border: 1px dashed var(--c-error-border); color: var(--c-error); }

/* ============================================================
   图文管理（素材管理 › 图文管理）· .paa-* 一族
   方案：https://aihtml.qimingdaren.com/ai1v1-tech/plans/parent-academy-articles-20260809.html

   🔴 三处与家长学院共用口径，改这里要一起想：
     ① .paa-pv-body 是**后台预览**里正文的样式；家长端那一份在
        jiazhangduan/apps/h5/src/design/ds/ClassroomDetail.css 的 .ds-cr-body。
        ⚠️ 但**图文这一种形态的视觉主要靠内联 style**（由后端 pa_article_render.py 渲染，
        决议 Q7 换主题只改一个字段就靠它）—— 所以这里只补「容器与排版兜底」，
        不重复定义主题色，否则两边会打架。
     ② 封面比例三处一致 16:9（卡片 / 表格 56px / 编辑页 120px）——
        同一张图在不同视图里被裁得不一样，运营会以为图变了。
     ③ 缺图一律回落 📄 占位块，**不留白** —— 留白与「还在加载」长得一样。
   ============================================================ */

/* —— 页头 ——
   ⚠️ 这里原有 .paa-hd / .paa-h2 / .paa-sub / .paa-hd-act 四条自造规则，**已删**：
      页头改用全站规范 .page-head / .page-title / .page-desc / .page-actions
      （styles.css:612-619）。自造那套是 18px/700，比规范的 28px/900 矮一档，
      同一个后台里出现两种页头。删掉而不是留着 —— 留着下次又会有人照抄。
   ✅ 只留 .paa-viewsw：全站只此一处的视图切换器（决议 Q4=A，CSS 一字不动、只挪了位置）。 */
.paa-viewsw { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.paa-viewsw button {
  padding: 5px 12px; font-size: 12.5px; background: var(--c-bg-card); border: 0;
  color: var(--c-text-2); cursor: pointer;
}
.paa-viewsw button.active { background: var(--c-primary); color: #fff; font-weight: 600; }

/* —— 筛选 ——
   ⚠️ 这里原有 .paa-filters / .paa-chips / .paa-chips .muted / .paa-chips .res-chip em /
      .paa-kw 五条自造规则，**已删**。原实现把两组 chip 加搜索框全塞进一个 flex 行
      （flex-wrap + gap:16px），宽屏挤成一排、窄屏折成两行，且两组标签宽度随内容对不齐。
      现改用规范：.res-filter-card > .res-filter-row（一组一行）+ .res-filter-statusrow
      （审核状态与检索同行）+ .res-chip-n（chip 角标），全部已存在，本次未新增任何筛选 CSS。 */

/* —— 卡片视图（决议 Q3 默认）—— */
.paa-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px;
}
@media (max-width: 1280px) { .paa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paa-card {
  display: flex; flex-direction: column; background: var(--c-bg-card);
  border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.paa-card.paa-rejected .paa-cover img { filter: grayscale(.55); }
.paa-cover {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--c-bg);
  border-bottom: 1px solid var(--c-border); overflow: hidden; flex: 0 0 auto;
}
.paa-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paa-cover .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--c-primary); background: var(--c-primary-bg);
}
.paa-cover.fail .ph { color: var(--c-error); background: var(--c-error-bg); }
.paa-card-body { padding: 10px 12px; flex: 1 1 auto; min-height: 0; }
.paa-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.paa-card-title {
  font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--c-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.paa-card-sum, .paa-card-note, .paa-card-err {
  margin-top: 5px; font-size: 12px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.paa-card-sum { color: var(--c-text-2); }
.paa-card-note { color: var(--c-error); }
.paa-card-err { color: var(--c-error); font-family: var(--font-mono, monospace); font-size: 11px; }
.paa-card-meta { margin-top: 8px; font-size: 11.5px; color: var(--c-text-2); }
.paa-running { color: var(--c-primary); font-weight: 600; }
.paa-card-by { margin-top: 3px; font-size: 11px; color: var(--c-text-3); }
/* 🔴 常驻，不做 hover 才出现 —— hover 按钮在触屏上等于不存在，截图沟通也拍不到 */
.paa-card-act {
  display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--c-border);
  background: var(--c-bg); flex-wrap: wrap;
}

/* —— 表格视图（备选）—— */
.paa-tbl .paa-cover { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); border: 1px solid var(--c-border); }
.paa-tbl-title { font-weight: 600; }
.paa-tbl-act { display: flex; gap: 4px; flex-wrap: wrap; }
.paa-pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; justify-content: flex-end; }

/* —— 加载骨架：卡片形态（三个 16:9 灰块），不是表格的三行灰条 —— */
.paa-skels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.paa-skel { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0 0 12px; overflow: hidden; }
.paa-skel-cover { width: 100%; aspect-ratio: 16 / 9; background: var(--c-bg); }
.paa-skel-l { height: 12px; margin: 10px 12px 0; border-radius: 6px; background: var(--c-bg); }
.paa-skel-l.short { width: 55%; }

/* —— 错误态：必须与空态长得不一样 —— */
.paa-err-box { padding: 22px; text-align: center; }
.paa-err-box b { display: block; margin-bottom: 6px; color: var(--c-error); font-size: 14px; }
.paa-err-box > div {
  margin: 0 auto 12px; max-width: 640px; font-size: 12px; color: var(--c-text-2);
  font-family: var(--font-mono, monospace); word-break: break-all;
}

/* —— 新建弹窗 —— */
.paa-drop {
  padding: 18px; text-align: center; border: 1px dashed var(--c-border);
  border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-text-2);
  font-size: 12.5px; cursor: pointer;
}
.paa-drop:hover { border-color: var(--c-primary); color: var(--c-primary); }
.paa-mats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.paa-mat {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 12px;
  background: var(--c-primary-bg); border: 1px solid var(--c-primary-border);
  border-radius: 999px; color: var(--c-text);
}
.paa-mat button { border: 0; background: none; cursor: pointer; color: var(--c-text-3); }

/* —— 运行区 —— */
.paa-stages { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.paa-stage {
  padding: 4px 10px; font-size: 12px; border-radius: 999px;
  background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-text-3);
}
.paa-stage.done { background: var(--c-success-bg, #ecfdf5); border-color: var(--c-success-border, #a7f3d0); color: var(--c-success, #059669); }
.paa-stage.cur { background: var(--c-primary-bg); border-color: var(--c-primary-border); color: var(--c-primary); font-weight: 600; }
.paa-run-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; }
.paa-events, .paa-outputs {
  border: 1px solid var(--c-border); border-radius: var(--radius); padding: 10px 12px;
  background: var(--c-bg-card); max-height: 460px; overflow: auto;
}
.paa-events-hd { font-size: 12.5px; font-weight: 700; color: var(--c-text-2); margin-bottom: 8px; }
.paa-ev { padding: 6px 0; border-bottom: 1px dashed var(--c-border); font-size: 12.5px; line-height: 1.7; }
.paa-ev:last-child { border-bottom: 0; }
.paa-ev b { display: block; color: var(--c-text); }
.paa-ev span { display: block; color: var(--c-text-2); font-size: 12px; }
/* 🔴 失败原文用等宽字体整段显示 —— 状态码与 model 名是排障第一手信息，不许截断成一句话 */
.paa-ev-err {
  color: var(--c-error) !important; font-family: var(--font-mono, monospace); font-size: 11.5px;
  word-break: break-all; white-space: pre-wrap;
}
.paa-out-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.paa-out { position: relative; aspect-ratio: 16 / 9; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.paa-out.fail { border-color: var(--c-error-border); background: var(--c-error-bg); }
.paa-out img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paa-out .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--c-text-3); }
.paa-out em {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font-style: normal;
  font-size: 10.5px; background: rgba(0,0,0,.5); color: #fff; text-align: center;
}
.paa-out-theme { margin-top: 8px; font-size: 12px; color: var(--c-text-2); }

/* 追问停驻态 —— 不是失败，要说清「AI 在等你」 */
.paa-ask {
  margin-bottom: 12px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--c-warning-bg); border: 1px solid var(--c-warning-border);
}
.paa-ask-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--c-text); margin-bottom: 8px;
}
.paa-ask-n { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--c-text-2); }
.paa-ask-tip { font-size: 12px; line-height: 1.7; color: var(--c-text-2); margin-bottom: 10px; }
.paa-ask-q { margin-bottom: 10px; }
.paa-ask-t {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--c-text); margin-bottom: 5px;
}
.paa-ask-act { margin-top: 8px; text-align: right; }
/* 🔴 追问区 chip 的三态 —— **作用域限定在 .paa-ask 内**，不动全站 .res-chip。
   病因：规范 .res-chip 未选态是「透明底 + 透明边」，那是为了放在**白色**筛选卡上；
   而追问区是黄底（--c-warning-bg #fff7e6），透明底透明边在黄底上**只剩一行灰字**，
   看起来根本不像可以点的东西 —— 而这一屏正是要人点一下做判断的地方。
   所以未选态给它白底 + 实边；选中态沿用主色实底（与全站一致，不另造）。 */
.paa-ask .res-chip {
  background: var(--c-bg-card);
  border-color: var(--c-border-2, #e5e7eb);
  color: var(--c-text);
}
.paa-ask .res-chip:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-bg); }
.paa-ask .res-chip.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
/* 还没答的那一组：左侧一道主色竖条提示「这里等着你」。
   ⚠️ 不用红色 —— 没答**不是错误**，只是还没做；红色会让人以为自己填错了。 */
.paa-ask-opts.onwarn { border-left: 2px solid var(--c-primary); padding-left: 8px; }
/* 长选项（>14 字）竖排：横排时会被挤成两行、chip 高度参差，
   而这些选项往往正是要读清楚的整句话 */
.paa-ask-opts--col { flex-direction: column; align-items: stretch; }
.paa-ask-opts--col .res-chip { height: auto; min-height: 28px; padding: 6px 11px; text-align: left; line-height: 1.5; }
/* 🔴 .paa-up-err 原先在 JSX 里用了两处（新建弹窗 + 编辑页），**CSS 里却从来没有这条规则**
   —— 与本次 R1 的 .inp 是同一种病：类名查无此类，于是上传失败那行只是一段普通小字。
   现在追问区贴图失败也用它，必须让它响亮。 */
.paa-up-err {
  margin-top: 8px; padding: 8px 11px; border-radius: var(--radius-sm);
  background: var(--c-error-bg); border: 1px solid var(--c-error-border);
  color: var(--c-error); font-size: 12px; line-height: 1.6; word-break: break-all;
}
.paa-run-done, .paa-run-fail {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius);
}
.paa-run-done { background: var(--c-success-bg, #ecfdf5); border: 1px solid var(--c-success-border, #a7f3d0); }
.paa-run-fail { background: var(--c-error-bg); border: 1px solid var(--c-error-border); }
.paa-run-done b, .paa-run-fail b { display: block; margin-bottom: 4px; }
.paa-run-done span, .paa-run-fail span { display: block; font-size: 12.5px; color: var(--c-text-2); }
.paa-run-act { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }

/* —— 块编辑器 —— */
.paa-ed-hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.paa-ed-title { flex: 1 1 320px; font-size: 15px; font-weight: 700; }
.paa-ed-theme { display: flex; align-items: center; gap: 6px; }
.paa-ed-sum { margin-top: 8px; }
.paa-ed-wb { grid-template-columns: minmax(0, 1fr) 430px; align-items: start; }
.paa-blocks { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow: auto; padding-right: 4px; }
.paa-block {
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 8px 10px;
  background: var(--c-bg-card); cursor: pointer;
}
.paa-block.sel { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-bg); }
.paa-block-hd { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-text-2); }
.paa-block-hd b { color: var(--c-text); font-size: 12.5px; }
.paa-block-hd em { font-style: normal; font-size: 11px; color: var(--c-text-3); }
.paa-drag { cursor: grab; color: var(--c-text-3); letter-spacing: -2px; }
.paa-block-act { margin-left: auto; display: flex; gap: 2px; }
.paa-block-act button {
  width: 22px; height: 22px; border: 1px solid var(--c-border); background: var(--c-bg-card);
  border-radius: 4px; cursor: pointer; font-size: 11px; color: var(--c-text-2); line-height: 1;
}
.paa-block-act button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.paa-block textarea, .paa-block input { margin-top: 6px; }
.paa-block-cover { display: flex; gap: 10px; margin-top: 6px; align-items: flex-start; }
.paa-block-cover .paa-cover { flex: 0 0 auto; border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.paa-block-cover-i { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.paa-inp-bad { border-color: var(--c-error) !important; background: var(--c-error-bg); }
/* 单行 textarea（块编辑器的小节标题）—— 作用域内收窄全局 textarea.input 的 min-height。
   ⚠️ 正确做法是像这样**就地覆盖**，不是回去把那条全局 CSS 改小（决议 Q2=A / §7.6）。
   🔴 选择器**必须带上 `textarea`**：全局那条是 `textarea.input`，特异度 (0,1,1)；
      只写 `.paa-ta-1line` 是 (0,1,0)，**输给全局那条**，于是这行是死 CSS ——
      而死 CSS 的症状就是「什么也没发生」，和本次要修的 `.inp` 是同一种病。
      第一版就是这么写的，被 tests/e2e/textarea-input-contract.e2e.py 量出来的。 */
textarea.paa-ta-1line { min-height: 38px; }
.paa-list-edit { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.paa-li { display: flex; align-items: center; gap: 6px; }
.paa-li > span {
  flex: 0 0 20px; height: 20px; border-radius: 10px; background: var(--c-primary); color: #fff;
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center;
}
.paa-li button, .paa-li-add {
  border: 1px solid var(--c-border); background: var(--c-bg-card); border-radius: 4px;
  cursor: pointer; font-size: 11px; color: var(--c-text-2); padding: 2px 8px;
}
.paa-li-add { align-self: flex-start; }
.paa-marks { margin-top: 5px; font-size: 11px; color: var(--c-text-3); display: flex; gap: 8px; align-items: center; }
.paa-marks button { border: 0; background: none; color: var(--c-primary); cursor: pointer; font-size: 11px; }
.paa-hr-ph { margin-top: 6px; text-align: center; color: var(--c-text-3); font-size: 12px; }
.paa-insert {
  display: block; width: 100%; margin-top: 8px; padding: 4px; border: 1px dashed var(--c-border);
  background: none; border-radius: 4px; color: var(--c-text-3); font-size: 11.5px; cursor: pointer;
}
.paa-insert:hover { border-color: var(--c-primary); color: var(--c-primary); }
.paa-insert-end { margin-top: 4px; padding: 8px; }
.paa-undo {
  margin-bottom: 8px; padding: 6px 10px; font-size: 12px; border-radius: var(--radius-sm);
  background: var(--c-warning-bg); border: 1px solid var(--c-warning-border);
}
.paa-undo button { margin-left: 8px; border: 0; background: none; color: var(--c-primary); cursor: pointer; }
.paa-snips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.paa-snip {
  padding: 10px 8px; text-align: left; border: 1px solid var(--c-border); background: var(--c-bg-card);
  border-radius: var(--radius-sm); cursor: pointer;
}
.paa-snip:hover { border-color: var(--c-primary); background: var(--c-primary-bg); }
.paa-snip b { display: block; font-size: 12.5px; }
.paa-snip span { display: block; margin-top: 3px; font-size: 11px; color: var(--c-text-3); }

/* lint 提示条 */
.paa-lint { margin-bottom: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12px; }
.paa-lint.bad { background: var(--c-error-bg); border: 1px solid var(--c-error-border); color: var(--c-error); }
.paa-lint.warn { background: var(--c-warning-bg); border: 1px solid var(--c-warning-border); color: var(--c-text-2); }
.paa-lint b { display: block; margin-bottom: 4px; }
.paa-lint ul { margin: 0; padding-left: 18px; line-height: 1.7; }

/* 390px 手机预览 */
.paa-phone {
  width: 390px; max-width: 100%; margin: 0 auto; border: 1px solid var(--c-border);
  border-radius: 14px; overflow: hidden; background: #fff;
}
.paa-pv-cover .paa-cover { border-bottom: 1px solid var(--c-border); }
.paa-pv-title { padding: 12px 16px 0; font-size: 19px; font-weight: 700; line-height: 1.4; color: #1f2937; }
.paa-pv-empty { padding: 40px 16px; text-align: center; color: var(--c-text-3); font-size: 12.5px; }
/* 🔴 正文容器兜底。视觉主要靠**内联 style**（后端渲染，决议 Q7 换主题只改一个字段就靠它）——
   这里只给容器与图片兜底，不重复定义主题色，否则与内联样式打架。
   家长端那一份在 jiazhangduan/apps/h5/src/design/ds/ClassroomDetail.css 的 .ds-cr-body。 */
.paa-pv-body { padding: 4px 16px 20px; font-size: 16px; line-height: 1.85; color: #2b2118; }
.paa-pv-body img { max-width: 100%; height: auto; }
.paa-pv-body h2 { font-size: 19px; }
.paa-pv-body ul { padding-left: 0; }
.paa-pv-body figure { margin: 20px 0; }

/* 审核 / 失败原因弹窗 */
.paa-rv-hd { margin-bottom: 10px; font-size: 14px; font-weight: 700; line-height: 1.6; }
.paa-why {
  margin: 0 0 10px; padding: 10px; max-height: 220px; overflow: auto;
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  font-family: var(--font-mono, monospace); font-size: 11.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-all; color: var(--c-error);
}
.paa-cands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.paa-cand { position: relative; padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: none; cursor: pointer; overflow: hidden; }
.paa-cand:hover { border-color: var(--c-primary); }
.paa-cand img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.paa-cand em {
  display: block; padding: 4px; font-style: normal; font-size: 11.5px; text-align: center;
  background: var(--c-bg); color: var(--c-primary);
}

/* ============================================================
   BUG 管理（日志管理 › BUG管理）· pages-bugs.jsx
   方案：https://aihtml.qimingdaren.com/ai1v1-tech/plans/admin-bug-manage-20260809.html
   ⚠️ 颜色一律走 CSS 变量，不硬编码 —— 否则换肤/换密度会断裂（ui-src/CLAUDE.md）。
   ============================================================ */

/* 轮次列表 */
.bug-round-row { cursor: pointer; }
.bug-sub { font-size: 11.5px; color: var(--c-text-3); margin-top: 2px; }
.bug-bar { height: 6px; border-radius: 3px; background: var(--c-bg-active); overflow: hidden; }
.bug-bar i { display: block; height: 100%; background: var(--c-success); border-radius: 3px; }
/* 逾期：一个不会变红的日期字段等于摆设（方案 §0.5 第 2 条） */
.bug-overdue { color: var(--c-error); font-weight: 500; }
.bug-od-tip { font-size: 11px; color: var(--c-error); }
.bug-back {
  display: inline-block; font-size: 12.5px; color: var(--c-text-3);
  cursor: pointer; margin-bottom: 4px;
}
.bug-back:hover { color: var(--c-primary); }

/* 「✓ 已保存」（失焦即保存后闪 1.5s） */
.bug-saved {
  align-self: center; font-size: 12.5px; color: var(--c-success);
  background: var(--c-success-bg); border: 1px solid var(--c-success-border);
  border-radius: 6px; padding: 4px 10px;
}

/* 只读条 / 全部通过条 */
.bug-ro-bar, .bug-alldone-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  padding: 10px 14px; border-radius: 8px; font-size: 13px;
}
.bug-ro-bar {
  background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-text-2);
}
.bug-alldone-bar {
  background: var(--c-success-bg); border: 1px solid var(--c-success-border); color: var(--c-text);
}

/* 就地编辑格 */
.bug-table td { vertical-align: top; }
.bug-cell { position: relative; min-height: 26px; }
.bug-cell-val {
  display: block; padding: 3px 6px; border-radius: 5px; cursor: pointer;
  border: 1px solid transparent; white-space: pre-wrap; word-break: break-word;
  transition: border-color .12s, background .12s;
}
.bug-cell:not(.ro) .bug-cell-val:hover { border-color: var(--c-border-2); background: var(--c-bg-hover); }
/* 只读态**不给** hover 淡边、不给 ▾ —— 不留「看起来能点其实点不动」的假入口 */
.bug-cell.ro .bug-cell-val { cursor: default; }
.bug-cell.bad .bug-cell-val { border-color: var(--c-error); background: var(--c-error-bg); }
.bug-ph { color: var(--c-text-4); font-style: normal; }
.bug-caret { margin-left: 4px; font-size: 9px; color: var(--c-text-3); font-weight: 400; }
.bug-ta {
  width: 100%; border: 1px solid var(--c-primary); border-radius: 5px; padding: 4px 6px;
  font: inherit; font-size: 12.5px; line-height: 1.5; resize: vertical;
  box-shadow: 0 0 0 3px var(--c-primary-bg);
}
.bug-ta-hint { font-size: 10.5px; color: var(--c-text-3); margin-top: 3px; }
.bug-opts {
  position: absolute; z-index: 30; top: 100%; left: 0; min-width: 118px; margin-top: 2px;
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(15, 23, 42, .14); padding: 4px;
}
.bug-opt { padding: 6px 10px; border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.bug-opt:hover { background: var(--c-bg-hover); }
.bug-opt.on { background: var(--c-primary-bg); color: var(--c-primary); }
/* R1：图片并进这一格之后要容纳一行缩略图，min-width 从 260 提到 300 */
.bug-desc-col { min-width: 300px; outline: none; }
/* 选中描述格（供 Ctrl/⌘+V 贴图）—— 焦点态从原来的附件格挪到这里 */
.bug-desc-col.focus { box-shadow: inset 0 0 0 2px var(--c-primary); border-radius: 6px; }
/* 条目的端不在本轮关联范围内 → 淡黄底 + hover 提示。**提示，不拦**（决议 Q3 第 3 条） */
.bug-out-of-scope { background: var(--c-warning-bg); }
/* R2/Q4：「谁改的」改**常显**并挪进「最近更新」列。
   原先是末列 hover 才显示的小字（opacity:0 + .bug-item-row:hover），
   而 R2 把同一个时间做成了常显的一列 —— 两处显示同一个信息，所以那两条规则一起删掉。 */
.bug-who { font-size: 10.5px; color: var(--c-text-3); margin-top: 2px; }
.bug-upd-col { white-space: nowrap; }
.bug-upd-t { font-size: 12px; color: var(--c-text-2); }

/* 附件格 · 缩略图（Q8：原样存，表格里用 CSS 缩到 42×42，点开看原图） */
.bug-img-cell { cursor: pointer; outline: none; }
.bug-img-cell.focus { box-shadow: inset 0 0 0 2px var(--c-primary); border-radius: 6px; }
.bug-img-wrap { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* R1：缩略图行在文字下面另起一行 */
.bug-desc-col .bug-img-wrap { margin-top: 5px; }
/* ⚠️ 类名是 noimg 不是 empty —— 全局 `.empty` 有 padding:60px 20px（:1963 空态插画用的），
   叫 empty 会让「没有图的行」比「有图的行」还高 90px（实测 214px vs 124px）。 */
.bug-desc-col .bug-img-wrap.noimg { margin-top: 2px; }
.bug-paste-hint { font-size: 10.5px; color: var(--c-text-4); }
.bug-mini {
  width: 42px; height: 42px; object-fit: cover; border-radius: 5px;
  border: 1px solid var(--c-border); cursor: zoom-in; background: var(--c-bg);
}
/* R1 新增：hover 缩略图才淡入红 ×（0.15s）。不 hover 时看不到 —— 表格里常显六个红角标太吵。
   ⚠️ 这是**表格里**那套；新建抽屉的 .bug-thumb .del 是 62×62 常显，交互不同，别混。 */
.bug-shot { position: relative; display: inline-flex; line-height: 0; }
.bug-shot .del {
  position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; line-height: 16px;
  text-align: center; border-radius: 50%; background: var(--c-error); color: #fff;
  font-size: 12px; font-weight: 400; cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.bug-shot:hover .del, .bug-shot .del:focus { opacity: 1; }
/* 删图二次确认（Q3）：正文里带缩略图，好让人确认删的是哪一张 */
.bug-del-ask { display: flex; gap: 12px; align-items: flex-start; }
.bug-del-ask img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 6px; flex: 0 0 auto;
  border: 1px solid var(--c-border); background: var(--c-bg);
}
.bug-more {
  min-width: 26px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; border-radius: 5px; background: var(--c-bg-active);
  color: var(--c-text-2); font-size: 11.5px; cursor: pointer;
}
.bug-noimg { color: var(--c-text-4); font-size: 13px; }

/* 粘贴 / 拖拽 / 点选区（新建抽屉 + 表格附件格共用同一份） */
.bug-drop {
  border: 1.5px dashed var(--c-border-2); border-radius: 8px; padding: 14px;
  text-align: center; cursor: pointer; background: var(--c-bg);
  transition: border-color .15s, background .15s;
}
.bug-drop:hover, .bug-drop:focus { border-color: var(--c-primary); outline: none; }
.bug-drop.over { border-color: var(--c-primary); background: var(--c-primary-bg); }
.bug-drop.file { padding: 22px; }
/* R1′：粘贴区挪到「问题描述」输入框正下方 —— 收紧内边距并留 6px，别和上面那个框贴在一起。
   🔴 只作用于这一处，**不动 .bug-drop 本体** —— 导入弹窗那个「把 .xlsx 拖进来」
      共用同一个类，改本体会连带把它也改瘦。 */
.bug-drop.under-desc { padding: 10px; margin-top: 6px; }
.bug-drop-hint .t { font-size: 13px; color: var(--c-text-2); }
.bug-drop-hint .s { font-size: 11.5px; color: var(--c-text-3); margin-top: 4px; }
.bug-drop-busy { font-size: 11.5px; color: var(--c-text-3); margin-top: 6px; }
.bug-thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.bug-thumb { position: relative; width: 62px; height: 62px; }
.bug-thumb img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--c-border); cursor: zoom-in;
}
.bug-thumb .del {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 16px;
  text-align: center; border-radius: 50%; background: var(--c-error); color: #fff;
  font-size: 12px; cursor: pointer; font-weight: 400;
}
.bug-thumb.loading, .bug-thumb.add {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed var(--c-border-2); border-radius: 6px;
  color: var(--c-text-3); font-size: 18px;
}

/* 灯箱 */
.bug-lightbox {
  position: fixed; inset: 0; z-index: 300; background: var(--c-bg-mask);
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
.bug-lb-body { max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; gap: 10px; }
.bug-lb-body img {
  max-width: 92vw; max-height: 78vh; object-fit: contain;
  background: var(--c-bg-card); border-radius: 8px;
}
.bug-lb-dead {
  padding: 60px 80px; background: var(--c-bg-card); border-radius: 8px; text-align: center;
  color: var(--c-text-2);
}
.bug-lb-dead .sub { font-size: 11px; color: var(--c-text-4); margin-top: 8px; word-break: break-all; }
.bug-lb-bar {
  display: flex; align-items: center; gap: 10px; background: var(--c-bg-card);
  border-radius: 8px; padding: 8px 12px;
}
.bug-lb-cnt { font-size: 12.5px; color: var(--c-text-2); }

/* 表单错误 / 提示 */
.bug-field-err { font-size: 11.5px; color: var(--c-error); margin-top: 4px; }
.bug-input-err { border-color: var(--c-error) !important; }
.bug-hint { font-size: 11px; color: var(--c-text-3); margin-top: 5px; }
.bug-optional-note {
  font-size: 11.5px; color: var(--c-text-3); margin: 12px 0 4px;
  padding-top: 10px; border-top: 1px dashed var(--c-border);
}
.bug-end-picks { display: flex; gap: 6px; flex-wrap: wrap; }
.bug-pick {
  padding: 4px 10px; border-radius: 14px; border: 1px solid var(--c-border-2);
  font-size: 12px; cursor: pointer; color: var(--c-text-2); user-select: none;
}
.bug-pick.on {
  background: var(--c-primary-bg); border-color: var(--c-primary-border); color: var(--c-primary);
}

/* 接口挂了的态：🔴 不降级成「暂无数据」——空表和挂掉长得一样（根 CLAUDE.md 铁律） */
.bug-err { text-align: center; padding: 26px 10px; }
.bug-err .t { font-size: 14px; color: var(--c-error); font-weight: 500; }
.bug-err .s { font-size: 12px; color: var(--c-text-2); margin: 6px 0; }

/* 导入预检 */
.bug-pre { margin-top: 12px; font-size: 12.5px; color: var(--c-text-2); }
.bug-pre .r { margin-bottom: 4px; }
/* Q6：轮次名可改。撞名的 409 就地标红在这个框下面（.bug-field-err），
   不走顶部错误条也不走 toast —— 用户这时要做的事就是改这个框。 */
.bug-pre-name { margin: 10px 0 8px; }
.bug-pre-name > label { display: block; font-size: 12px; color: var(--c-text-2); margin-bottom: 4px; }
.bug-pre-name .input { width: 100%; }
.bug-pre-name .muted { font-size: 11px; margin-top: 4px; }
.bug-pre-bad {
  margin: 8px 0; padding: 8px 10px; border-radius: 6px;
  background: var(--c-error-bg); border: 1px solid var(--c-error-border); color: var(--c-error);
}
/* 响亮告知（不拦导入）：只有截图没文字的行 / 挂不上任何条目的图。
   刻意用 warning 色而不是 error —— 它不是错误，但绝不能是静默的。 */
.bug-pre-warn {
  margin: 8px 0; padding: 8px 10px; border-radius: 6px; line-height: 1.6;
  background: var(--c-warning-bg); border: 1px solid var(--c-warning-border);
  color: var(--c-text-1);
}

/* 改动历史（Q10） */
.bug-hist-title {
  margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--c-border);
  font-size: 13px; font-weight: 500;
}
.bug-hist-row { display: flex; gap: 12px; padding: 7px 0; font-size: 12.5px; }
.bug-hist-row + .bug-hist-row { border-top: 1px dashed var(--c-border); }
.bug-hist-row .t { flex: none; width: 82px; color: var(--c-text-3); }
.bug-hist-row .c { color: var(--c-text-2); }
.bug-hist-row .v {
  padding: 1px 5px; border-radius: 4px; background: var(--c-bg-active); color: var(--c-text);
}
.bug-hist-row .v.on { background: var(--c-primary-bg); color: var(--c-primary); }

/* 8099 源码态的轻量 toast（生产态用 overrides/api-client.js 里的 __toast） */
.bug-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 400;
  background: var(--c-dark); color: #fff; padding: 9px 18px; border-radius: 8px;
  font-size: 13px; box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
}
.bug-toast.bad { background: var(--c-error); }