/* ============================================================================
   v2.9.0 · 文稿创作 / 微信公众号接入 —— 两个工作台的样式
   ---------------------------------------------------------------------------
   为什么独立成文件而不并进 style.css：
     ① style.css 已经 3300+ 行，两个工作台的样式再塞进去会彻底淹没既有规则；
     ② 与后端约定一致（v2.9.0 的接口也独立在 routes-v29.js）；
     ③ 上线后若要单独回滚这两个功能，删掉本文件与 index.html 里的一行即可。
   ★ 本文件【只使用】style.css 里已定义的设计令牌（--surface / --ink-* / --line /
     --accent / --r-* / --sh-* / --rs），不写任何硬编码颜色 —— 这样深浅主题
     与 8 套视觉风格会自动跟随，无需在这里再维护一套换肤规则。
   ========================================================================== */

/* ---------- 内容区放宽：工作台需要全宽满高，不能受 --maxw 约束 ---------- */
.wrap--full { max-width: none; margin: 0; }

/* 分栏的公共形态：左右两栏吸顶 + 各自滚动，中栏自然流动。
   这样正文写很长时，左边的文稿列表和右边的素材/版本面板始终在手边。 */
.dwk__side, .dwk__panel {
  position: sticky;
  top: calc(var(--top-h) + 14px);
  max-height: calc(100vh - var(--top-h) - 44px);
  overflow: auto;
  overscroll-behavior: contain;
}

/* ============================================================================
   一、文稿创作  .dwk
   ========================================================================== */
.dwk {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1360px) { .dwk { grid-template-columns: 240px minmax(0, 1fr) 292px; } }
@media (max-width: 1160px) {
  .dwk { grid-template-columns: minmax(0, 1fr); }
  .dwk__side, .dwk__panel { position: static; max-height: none; }
  /* ★ 单栏时解除左栏的内部滚动与 flex 高度约束：
     窄屏下整页自然滚动才对；若保留「列表自己滚」，
     会出现一个高度不定的小滚动区套在页面滚动里（双层滚动，很难用）。 */
  .dwk__side { display: block; }
  .dwk__list { flex: none; min-height: 0; overflow: visible; padding-right: 0; margin-right: 0; }
  .dwk__sideft { flex-shrink: 1; }
}

/* ---------------- 左栏：文稿列表 ---------------- */
/* ★★ 2026-09-20 改成「整栏 flex 列 + 列表自己滚」的纵向结构。
   起因：用户反馈「下拉太多」，实测（1600×900）整栏高 1600px、视口只有 900px ——
   头部(标题/搜索) + 分类 255px + 状态筛选 占掉 y=74→473 共 399px 的固定部分，
   列表从 y=483 一直排到 1508，**底部翻页条落在 y=1518，视口外**。
   即：加了分页也够不着翻页按钮，用户还是得先滚到底才能点下一页。
   做法：把「固定的头部/筛选」与「滚动的列表」拆开 ——
     .dwk__side 变成 flex 列且不滚动，只让 #dkList 滚动，
     #dkListFoot 用 flex-shrink:0 钉在栏底。
   这样无论列表多少条，翻页条永远在视野内。 */
.dwk__side {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 12px; box-shadow: var(--sh-1);
  /* ★ 只在宽屏（三栏并排）时启用内部滚动；窄屏改单栏后整页自然滚动更合理，
     那个覆盖在下面的 @media (max-width:1160px) 里已经 position:static + max-height:none，
     这里必须同步把 flex 也解除，否则「高度不设限 + 列表内部滚动」会互相打架。 */
  display: flex; flex-direction: column;
}
.dwk__side > .dwk__sidehd,
.dwk__side > .dwk__search,
.dwk__side > .dkcats,
.dwk__side > .dwk__filters { flex-shrink: 0; }
.dwk__sidehd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dwk__sidet { font-size: 14px; font-weight: 700; letter-spacing: -.2px; flex: 1; }
.dwk__search { margin-bottom: 8px; }
.dwk__search .inp { width: 100%; }
.dwk__filters { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }

.dkchip {
  padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3);
  cursor: pointer; transition: all .14s var(--ease); font-family: inherit;
}
.dkchip:hover { border-color: var(--line-strong); color: var(--ink-2); }
.dkchip.is-on { background: var(--brand); border-color: var(--brand); color: var(--surface); }

.dwk__list {
  display: flex; flex-direction: column; gap: 6px;
  /* ★ 只有这一段滚动（配合 .dwk__side 的 flex 列），
     让分类/筛选/翻页条始终留在视野里。
     min-height:0 是必需的：flex 项默认 min-height:auto，
     会被内容撑高从而让 overflow 失效（经典陷阱）。 */
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain;
  /* 右侧留出滚动条宽度，避免滚动条盖住卡片右边框 */
  padding-right: 2px;
  margin-right: -2px;
}
.dkitem {
  display: block; padding: 10px; border-radius: var(--r);
  border: 1px solid transparent; background: var(--surface-2);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: all .14s var(--ease);
}
.dkitem:hover { background: var(--surface-3); border-color: var(--line); }
.dkitem.is-on {
  background: var(--surface); border-color: var(--accent-line);
  box-shadow: inset 3px 0 0 var(--accent), var(--sh-1);
}
.dkitem__t {
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dkitem__x {
  font-size: 12px; color: var(--ink-4); margin-top: 3px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dkitem__m { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.dkitem__w, .dkitem__d { font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.dkitem__d { margin-left: auto; }
.dwk__sideft {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--ink-4); text-align: center;
  /* ★ 钉在栏底，不参与列表滚动 */
  flex-shrink: 0;
}

/* ---------------- 左栏底部：统计 + 每页条数 + 翻页 ----------------
   起因（2026-09-20 用户反馈「下拉太多」）：实测 21 条 × 135px = 3057px 内容
   塞在 794px 的栏里，一屏只能看到约 2 条。加了前端分页后，底部要放
   「共 N 篇 · 第 x/y 页」+ 每页条数 + 翻页按钮。
   沿用 style.css 的 .listfoot / .pager 令牌，不另造一套视觉。

   ★ 布局取舍：栏宽只有 268px（≤1360 时 240px），
     「共 21 篇，第 1/3 页」+ 下拉 + 翻页按钮**一行放不下**
     （实测一行需要 388px，可用 266px —— 溢出 122px，末页按钮会被切掉）。
     所以改成**两行**：上行统计文字、下行「下拉 + 翻页」。
     这比硬塞一行然后 overflow:hidden 切掉按钮要好 —— 用户能看到完整控件。 */
.dwk__ft { display: flex; flex-direction: column; gap: 6px; }
.dwk__ftl { font-size: 11.5px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.dwk__ftl b { color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.dwk__ftr { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
/* 小号下拉：默认 inp--sm 的 7px/13px 在这个栏里偏胖 */
.dwk__ftsel {
  padding: 3px 4px; font-size: 11px; width: auto; max-width: 76px;
  border-radius: var(--r-xs); cursor: pointer; flex-shrink: 0;
}
/* 底部翻页按钮整体缩一号（.pager--sm 是给整页宽度用的，这里只有 ~150px） */
.dwk__ft .pager--sm { gap: 3px; margin: 0; flex-wrap: nowrap; }
.dwk__ft .pager--sm .pager__b {
  min-width: 23px; height: 23px; padding: 0 5px; font-size: 11px;
  border-radius: var(--r-xs); flex-shrink: 0;
}
.dwk__ft .pager--sm .pager__gap { width: 14px; }

/* ---------------- 中栏：编辑区 ---------------- */
.dwk__main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.dkhead {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; box-shadow: var(--sh-1);
}
.dkhead__title {
  width: 100%; border: 0; background: transparent; outline: none;
  font-size: 21px; font-weight: 800; letter-spacing: -.5px; color: var(--ink);
  font-family: inherit; padding: 0 0 10px; border-bottom: 1px solid var(--line-2);
}
.dkhead__title::placeholder { color: var(--ink-5); }
.dkhead__meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dkhead__meta .inp { width: auto; min-width: 108px; }
.dkhead__w { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dkhead__sv { font-size: 11.5px; color: var(--ink-4); margin-left: auto; }
.dkhead__sv.is-dirty { color: var(--amber); font-weight: 600; }
.dkhead__ref {
  margin-top: 9px; font-size: 11.5px; color: var(--ink-3);
  background: var(--surface-3); border-radius: var(--r-sm); padding: 6px 9px;
}

/* 工具条 */
.dktools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 9px 12px; box-shadow: var(--sh-1);
}
.dktools__g { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dktools__g--r { margin-left: auto; }
.dktools__g + .dktools__g { padding-left: 9px; border-left: 1px solid var(--line-2); }
@media (max-width: 900px) {
  .dktools__g--r { margin-left: 0; }
  .dktools__g + .dktools__g { padding-left: 0; border-left: 0; }
}
.dkexp { position: relative; }
.dkexp__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 172px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-3); padding: 5px; display: flex; flex-direction: column;
}
.dkexp__menu a {
  padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink-2);
  cursor: pointer; text-decoration: none;
}
.dkexp__menu a:hover { background: var(--surface-3); color: var(--ink); }

.dkaihint {
  font-size: 12px; color: var(--amber); background: var(--amber-soft);
  border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; line-height: 1.6;
}
.dkstate {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  border-radius: var(--r); padding: 9px 12px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2);
}
.dkstate--pending { background: var(--amber-soft); color: var(--amber); }
.dkstate--approved { background: var(--green-soft); color: var(--green); }
.dkstate--rejected { background: var(--accent-soft); color: var(--accent); }

/* 多版本初稿对比 */
.dkdrafts {
  background: var(--surface); border: 1px solid var(--accent-line);
  border-radius: var(--r-lg); padding: 14px; box-shadow: var(--sh-2);
}
.dkdrafts__h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; font-size: 14px; }
.dkdrafts__hint { font-size: 11.5px; color: var(--ink-4); }
.dkdrafts__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 11px; }
.dkdraft {
  border: 1px solid var(--line); border-radius: var(--r); padding: 11px;
  background: var(--surface-2); display: flex; flex-direction: column;
}
.dkdraft__h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.dkdraft__n { font-size: 11.5px; font-weight: 700; color: var(--accent); }
.dkdraft__w { font-size: 11px; color: var(--ink-4); margin-left: auto; font-variant-numeric: tabular-nums; }
.dkdraft__t { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; line-height: 1.45; }
.dkdraft__b {
  font-size: 12px; color: var(--ink-3); line-height: 1.75; white-space: pre-wrap;
  flex: 1; max-height: 190px; overflow: hidden; position: relative;
}
.dkdraft__f { margin-top: 10px; }

/* 正文编辑区 */
.dkedit {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column;
}
.dkedit__ta {
  width: 100%; min-height: 460px; border: 0; outline: none; resize: vertical;
  padding: 18px 20px; font-size: 14.5px; line-height: 1.95; color: var(--ink);
  background: transparent; font-family: var(--font-serif, inherit);
  letter-spacing: .01em;
}
.dkedit__ta::placeholder { color: var(--ink-5); }
.dkedit__ft {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; border-top: 1px solid var(--line-2); background: var(--surface-2);
  font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums;
}

/* ---------------- 右栏：素材 / 版本 / 对话 ---------------- */
.dwk__panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden;
  display: flex; flex-direction: column;
}
.dktabs { display: flex; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.dktab {
  flex: 1; padding: 10px 6px; border: 0; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border-bottom: 2px solid transparent; transition: all .14s var(--ease);
}
.dktab:hover { color: var(--ink-2); background: var(--surface-3); }
.dktab.is-on { color: var(--accent); border-bottom-color: var(--accent); background: var(--surface); }
.dktab__n {
  font-size: 10px; background: var(--surface-3); color: var(--ink-4);
  border-radius: 999px; padding: 1px 5px; font-variant-numeric: tabular-nums;
}
.dktab.is-on .dktab__n { background: var(--accent-soft); color: var(--accent); }
.dkpanel__b { padding: 12px; flex: 1; }

.dkempty { font-size: 12.5px; color: var(--ink-4); line-height: 1.75; padding: 8px 2px; }

/* 素材 */
.dkasset__up {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r); padding: 16px 12px;
  text-align: center; cursor: pointer; transition: all .14s var(--ease); background: var(--surface-2);
}
.dkasset__up:hover, .dkasset__up.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dkasset__upic { font-size: 20px; color: var(--ink-4); }
.dkasset__uptx { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-top: 5px; }
.dkasset__uphint { font-size: 11px; color: var(--ink-4); margin-top: 4px; line-height: 1.6; }
.dkasset__list { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.dkasset { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; background: var(--surface-2); }
.dkasset__h { display: flex; align-items: center; gap: 6px; }
.dkasset__ic { font-size: 14px; }
.dkasset__n {
  font-size: 12.5px; font-weight: 600; color: var(--ink); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dkasset__sz { font-size: 10.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.dkasset__x {
  border: 0; background: transparent; color: var(--ink-4); cursor: pointer;
  font-size: 12px; padding: 2px 4px; border-radius: var(--r-xs); font-family: inherit;
}
.dkasset__x:hover { background: var(--accent-soft); color: var(--accent); }
.dkasset__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }
.dkasset__pts { margin: 7px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }
.dkasset__img {
  width: 100%; margin-top: 8px; border-radius: var(--r-sm);
  border: 1px solid var(--line); display: block;
}
.dkasset__f { margin-top: 8px; }

/* 版本 */
.dkvers { display: flex; flex-direction: column; gap: 8px; }
.dkver { border: 1px solid var(--line); border-radius: var(--r); padding: 9px 10px; background: var(--surface-2); }
.dkver__h { display: flex; align-items: center; gap: 6px; }
.dkver__t {
  font-size: 12.5px; font-weight: 600; color: var(--ink); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dkver__m { font-size: 11px; color: var(--ink-4); margin-top: 4px; line-height: 1.6; }
.dkver__f { margin-top: 7px; }

/* AI 对话 */
.dkchat {
  max-height: 380px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 10px; padding-bottom: 8px;
}
.dkmsg { display: flex; flex-direction: column; }
.dkmsg--u { align-items: flex-end; }
.dkmsg__b {
  max-width: 92%; padding: 8px 11px; border-radius: var(--r); font-size: 12.5px;
  line-height: 1.7; white-space: pre-wrap; word-break: break-word;
}
.dkmsg--u .dkmsg__b { background: var(--brand); color: var(--surface); border-bottom-right-radius: var(--r-xs); }
.dkmsg--a .dkmsg__b { background: var(--surface-3); color: var(--ink-2); border-bottom-left-radius: var(--r-xs); }
.dkmsg__t { font-size: 10.5px; color: var(--ink-4); margin-top: 3px; }
.dkchat__in { display: flex; gap: 7px; align-items: flex-end; margin-top: 10px; }
.dkchat__in .ta { flex: 1; min-height: 60px; font-size: 12.5px; }
.dkchat__quick { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }

/* 参考来源弹窗 */
.dkref { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .dkref { grid-template-columns: 1fr; } }
.dkref__col { min-width: 0; }
.dkref__t { font-size: 13px; font-weight: 700; color: var(--ink); }
.dkref__d { font-size: 11.5px; color: var(--ink-4); margin: 4px 0 9px; line-height: 1.6; }
.dkref__out { margin-top: 11px; min-height: 40px; }
.dkref__load { font-size: 12px; color: var(--ink-4); }
.dkref__err { font-size: 12px; color: var(--accent); }
.dkref__out2 { font-size: 12px; color: var(--ink-3); line-height: 1.7; }
.dkref__card {
  border: 1px solid var(--line); border-radius: var(--r); padding: 11px; background: var(--surface-2);
}
.dkref__name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.dkref__sum { font-size: 12px; color: var(--ink-3); line-height: 1.75; margin-top: 6px; }
.dkref__kv { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--ink-4); }
.dkref__kv b { color: var(--ink-2); }
.dkref__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.dkref__hint { font-size: 11px; color: var(--ink-4); margin-top: 8px; line-height: 1.6; }

/* 智能排版结果 */
.dklayout {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px; box-shadow: var(--sh-1);
}
.dklayout__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 14px; }
.dklayout__hint { font-size: 11.5px; color: var(--ink-4); }
.dklayout__g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dklayout__p { min-width: 0; }
.dklayout__lbl { font-size: 11px; color: var(--ink-4); margin-bottom: 5px; font-weight: 600; }

/* 模板选择 */
.dktpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; }
.dktpl {
  border: 1px solid var(--line); border-radius: var(--r); padding: 11px;
  background: var(--surface-2); cursor: pointer; transition: all .14s var(--ease);
}
.dktpl:hover { border-color: var(--accent); background: var(--accent-soft); }
.dktpl__n { font-size: 13px; font-weight: 600; color: var(--ink); }
.dktpl__c { font-size: 11px; color: var(--ink-4); margin-top: 4px; }

/* ============================================================================
   二、微信公众号接入  .mpw
   ========================================================================== */
.mpw { display: flex; flex-direction: column; gap: 14px; max-width: 1360px; }

.mphead { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mphead__t { font-size: 25px; font-weight: 800; letter-spacing: -.6px; }
.mphead__d { font-size: 13.5px; color: var(--ink-3); margin-top: 5px; }
.mpempty { font-size: 13px; color: var(--ink-4); padding: 22px 0; text-align: center; }
.mpnote {
  font-size: 12px; color: var(--ink-3); line-height: 1.8; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
}
.mpnote b { color: var(--ink-2); }

/* 未绑定引导 */
.mpbind {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 36px 26px; text-align: center; box-shadow: var(--sh-1);
}
.mpbind__ic { font-size: 40px; }
.mpbind__t { font-size: 17px; font-weight: 700; margin-top: 10px; }
.mpbind__d { font-size: 13px; color: var(--ink-3); line-height: 1.85; margin: 10px auto 18px; max-width: 620px; }

/* 账号卡 */
.mpacct {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; box-shadow: var(--sh-1);
}
.mpacct__ava {
  width: 54px; height: 54px; border-radius: var(--r-md); flex-shrink: 0;
  border: 1px solid var(--line); object-fit: cover;
}
.mpacct__i { flex: 1; min-width: 200px; }
.mpacct__n { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mpacct__m { font-size: 12px; color: var(--ink-4); margin-top: 5px; font-variant-numeric: tabular-nums; }
.mpacct__intro { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.mpacct__ops { display: flex; gap: 7px; flex-wrap: wrap; }

/* 主标签 */
.mptabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.mptab {
  padding: 10px 15px; border: 0; background: transparent; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--ink-3); font-family: inherit;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all .14s var(--ease);
}
.mptab:hover { color: var(--ink); }
.mptab.is-on { color: var(--accent); border-bottom-color: var(--accent); }
.mptab__n {
  font-size: 10.5px; background: var(--surface-3); color: var(--ink-4);
  border-radius: 999px; padding: 1px 6px; font-variant-numeric: tabular-nums;
}
.mptab.is-on .mptab__n { background: var(--accent-soft); color: var(--accent); }

.mpbody { display: flex; flex-direction: column; gap: 14px; }

/* 指标卡 */
.mpkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.mpkpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 15px 16px; box-shadow: var(--sh-1);
}
.mpkpi__l { font-size: 12px; color: var(--ink-4); font-weight: 600; }
.mpkpi__v {
  font-size: 27px; font-weight: 800; letter-spacing: -1px; margin-top: 6px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mpkpi__g { font-size: 11.5px; margin-top: 7px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.mpkpi__g--up { color: var(--accent); }      /* ★ 国内习惯：涨用红 */
.mpkpi__g--down { color: var(--green); }     /* 跌用绿 */
.mpkpi__g--flat { color: var(--ink-4); }
.mpkpi__s { color: var(--ink-4); font-weight: 400; }

/* 通用卡片 */
.mpcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 15px 17px; box-shadow: var(--sh-1);
}
.mpcard__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14.5px; margin-bottom: 12px; }
.mpcard__s { font-size: 11.5px; color: var(--ink-4); font-weight: 400; }
.mpcard__r { margin-left: auto; display: flex; gap: 5px; }
.mpgrid2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 980px) { .mpgrid2 { grid-template-columns: minmax(0, 1fr); } }

/* 折线图 */
.mpchart { width: 100%; }
.mpchart svg { width: 100%; height: 210px; display: block; }
.mpchart__grid { stroke: var(--line-2); stroke-width: 1; }
.mpchart__ylab { font-size: 10px; fill: var(--ink-4); text-anchor: end; }
.mpchart__xlab { font-size: 10px; fill: var(--ink-4); text-anchor: middle; }
.mpchart__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mpchart__dot { fill: var(--accent); }
.mpchart__hit { fill: transparent; cursor: crosshair; }
.mpchart__hit:hover + .mpchart__dot { r: 4; }
.mpchart__legend { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.mpchart__lg { display: flex; align-items: center; gap: 5px; }
.mpchart__sw { width: 12px; height: 2px; border-radius: 2px; background: var(--accent); display: inline-block; }
.mpchart__hint { margin-left: auto; color: var(--ink-4); font-size: 11px; }

/* 热门文章 */
.mptop { display: flex; flex-direction: column; gap: 3px; }
.mptop__i {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px;
  border-radius: var(--r-sm); transition: background .14s var(--ease);
}
.mptop__i:hover { background: var(--surface-2); }
.mptop__n {
  width: 20px; height: 20px; border-radius: var(--r-xs); flex-shrink: 0;
  background: var(--surface-3); color: var(--ink-3); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.mptop__i:nth-child(1) .mptop__n { background: var(--accent-soft); color: var(--accent); }
.mptop__m { flex: 1; min-width: 0; }
.mptop__t {
  font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mptop__x { font-size: 11px; color: var(--ink-4); margin-top: 2px; }
.mptop__v { font-size: 11.5px; color: var(--ink-3); flex-shrink: 0; }
.mptop__v b { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 运营建议 */
.mpadvice { display: flex; flex-direction: column; gap: 8px; }
.mpadv {
  display: flex; gap: 8px; font-size: 12.5px; line-height: 1.75; color: var(--ink-2);
  background: var(--surface-2); border-radius: var(--r); padding: 9px 11px;
}
.mpadv__i { flex-shrink: 0; font-weight: 700; width: 14px; text-align: center; }
.mpadv--ok { background: var(--green-soft); }
.mpadv--ok .mpadv__i { color: var(--green); }
.mpadv--warn { background: var(--amber-soft); }
.mpadv--warn .mpadv__i { color: var(--amber); }
.mpadv--n .mpadv__i { color: var(--ink-4); }

.mpstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mpstat {
  background: var(--surface-2); border-radius: var(--r); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.mpstat b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.mpstat span { font-size: 11px; color: var(--ink-4); }

/* 操作条 */
.mpbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mpbar__hint { font-size: 11.5px; color: var(--ink-4); }

/* 文章列表 */
.mparts { display: flex; flex-direction: column; gap: 8px; }
.mpart {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
  transition: all .14s var(--ease);
}
.mpart:hover { border-color: var(--line-strong); background: var(--surface-3); }
.mpart__m { flex: 1; min-width: 0; }
.mpart__t {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.mpart__x {
  font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mpart__d { font-size: 11px; color: var(--ink-4); margin-top: 5px; font-variant-numeric: tabular-nums; }
.mpart__ops { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

/* 表单 */
.mpform { display: flex; flex-direction: column; }
.mpform__f { display: flex; gap: 9px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }

/* 发布回执 */
.mpreceipt { display: flex; flex-direction: column; gap: 9px; }
.mpreceipt__row {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3);
  padding-bottom: 8px; border-bottom: 1px solid var(--line-2);
}
.mpreceipt__row b { color: var(--ink); font-weight: 600; }
.mpreceipt__msg {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.8;
  background: var(--surface-2); border-radius: var(--r); padding: 10px 12px;
}

/* 粉丝互动 */
.mpfans { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 980px) { .mpfans { grid-template-columns: minmax(0, 1fr); } }
.mpfans__l {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden;
}
.mpfans__hd { display: flex; gap: 7px; padding: 11px; border-bottom: 1px solid var(--line); }
.mpfans__hd .inp { flex: 1; min-width: 0; }
.mpfans__list { max-height: 520px; overflow-y: auto; }
.mpfan {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  cursor: pointer; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line-2); transition: background .14s var(--ease);
}
.mpfan:hover { background: var(--surface-2); }
.mpfan.is-on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.mpfan__ava {
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  background: var(--surface-3); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.mpfan__m { flex: 1; min-width: 0; }
.mpfan__n {
  font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mpfan__x {
  font-size: 11px; color: var(--ink-4); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mpfan__c {
  font-size: 10.5px; background: var(--accent); color: #fff;
  border-radius: 999px; min-width: 17px; height: 17px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.mpfans__r {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); display: flex; flex-direction: column; min-height: 460px;
}
.mpconv__h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 15px; border-bottom: 1px solid var(--line);
}
.mpconv__s { font-size: 11.5px; color: var(--ink-4); }
.mpconv__b {
  flex: 1; overflow-y: auto; max-height: 420px; padding: 15px;
  display: flex; flex-direction: column; gap: 11px;
}
.mpmsg { display: flex; flex-direction: column; }
.mpmsg--in { align-items: flex-start; }
.mpmsg--out { align-items: flex-end; }
.mpmsg__b {
  max-width: 76%; padding: 9px 12px; border-radius: var(--r); font-size: 13px;
  line-height: 1.7; word-break: break-word;
}
.mpmsg--in .mpmsg__b { background: var(--surface-3); color: var(--ink-2); border-bottom-left-radius: var(--r-xs); }
.mpmsg--out .mpmsg__b { background: var(--brand); color: var(--surface); border-bottom-right-radius: var(--r-xs); }
.mpmsg__t { font-size: 10.5px; color: var(--ink-4); margin-top: 4px; }
.mpconv__f { display: flex; gap: 8px; padding: 11px 13px; border-top: 1px solid var(--line); }
.mpconv__f .inp { flex: 1; }

/* 关键词规则 */
.mprules { display: flex; flex-direction: column; gap: 9px; }
.mprule {
  display: grid; grid-template-columns: minmax(140px, 190px) minmax(0, 1fr) auto;
  gap: 12px; align-items: center; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
}
@media (max-width: 820px) { .mprule { grid-template-columns: minmax(0, 1fr); } }
.mprule__k { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.mprule__r { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.mprule__m { font-size: 11px; color: var(--ink-4); margin-top: 4px; font-variant-numeric: tabular-nums; }
.mprule__ops { display: flex; gap: 6px; }
.mptest { display: flex; gap: 8px; }
.mptest .inp { flex: 1; }
.mptestout {
  margin-top: 11px; font-size: 12.5px; line-height: 1.8; border-radius: var(--r); padding: 10px 12px;
}
.mptestout--yes { background: var(--green-soft); color: var(--green); }
.mptestout--no { background: var(--surface-2); color: var(--ink-3); }
.mptestout__r { display: block; margin-top: 6px; color: var(--ink-2); }

/* 授权弹窗 */
.mpauth { text-align: center; }
.mpauth__qr {
  width: 200px; height: 200px; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; padding: 6px;
}
.mpauth__tip { font-size: 12px; color: var(--ink-3); line-height: 1.75; margin-top: 11px; text-align: left; }
.mpauth__mode { font-size: 12px; color: var(--ink-4); margin-top: 9px; }
.mpauth__mode b { color: var(--ink-2); }

/* ============================================================================
   三、v2.9.1 增补：创作类型 Tab / 新建大类选择 / 风格库
   ---------------------------------------------------------------------------
   全部复用 style.css 的设计令牌（--surface* / --ink-* / --line* / --accent* /
   --r-* / --sh-* / --ease），不写硬编码颜色 —— 深浅主题与 8 套风格自动跟随。
   ========================================================================== */

/* ---------------- 左栏：创作类型 Tab ----------------
   纵向排列，每行「图标 + 名称 + 角标」，比一行横排的胶囊更耐读：
   五个大类的中文名（报刊/公文/总结/课件/公众号）横排会挤成两行且长短不齐。 */
.dkcats {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
}
.dkcat {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent;
  cursor: pointer; font-family: inherit; text-align: left;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  transition: all .14s var(--ease);
}
.dkcat:hover { background: var(--surface-2); color: var(--ink-2); }
.dkcat.is-on {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent-line); font-weight: 700;
}
.dkcat__ic { font-size: 13px; width: 15px; text-align: center; flex-shrink: 0; }
.dkcat__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dkcat__n {
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  background: var(--surface-3); color: var(--ink-4);
  border-radius: 999px; padding: 1px 6px; flex-shrink: 0;
}
.dkcat.is-on .dkcat__n { background: var(--surface); color: var(--accent); }

/* ---------------- 新建：大类选择卡片 ---------------- */
.dkpick { display: flex; flex-direction: column; gap: 8px; }
.dkpick__i {
  display: grid; grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto; gap: 2px 10px;
  align-items: center; text-align: left;
  padding: 11px 13px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface-2);
  cursor: pointer; font-family: inherit; transition: all .14s var(--ease);
}
.dkpick__i:hover { border-color: var(--accent); background: var(--accent-soft); }
.dkpick__i.is-on { border-color: var(--accent-line); background: var(--accent-soft); }
.dkpick__ic { grid-row: 1 / 3; font-size: 21px; text-align: center; }
.dkpick__t { font-size: 14px; font-weight: 700; color: var(--ink); }
.dkpick__d { font-size: 11.5px; color: var(--ink-4); line-height: 1.55; }

/* ---------------- 列表卡片上的大类标记 ---------------- */
.dkitem__cat {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: var(--r-xs);
  background: var(--surface-3); color: var(--ink-3); flex-shrink: 0;
}

/* ---------------- 编辑器模式切换条 ---------------- */
.dkmodes {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
}
.dkmodes__g { display: flex; gap: 3px; background: var(--surface-3); padding: 2px; border-radius: var(--r-sm); }
.dkmode {
  padding: 5px 11px; border: 0; border-radius: var(--r-xs); background: transparent;
  cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink-3);
  transition: all .14s var(--ease); white-space: nowrap;
}
.dkmode:hover { color: var(--ink); }
.dkmode.is-on { background: var(--surface); color: var(--accent); box-shadow: var(--sh-1); }
.dkmodes__hint { font-size: 11.5px; color: var(--ink-4); flex: 1; min-width: 0; }

.dkview[hidden] { display: none; }

/* ---------------- 视图一：块编辑器 ---------------- */
.dkblk { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.dkblk__i {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 9px; align-items: flex-start;
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 5px 6px; transition: all .14s var(--ease);
}
.dkblk__i:hover { border-color: var(--line); background: var(--surface-2); }
.dkblk__i--img { background: var(--surface-2); border-color: var(--line-2); }
.dkblk__lb {
  font-size: 10.5px; font-weight: 700; color: var(--ink-4);
  padding-top: 8px; text-align: right; letter-spacing: .02em;
}
.dkblk__lb--h1, .dkblk__lb--h2 { color: var(--accent); }
.dkblk__lb--quote { color: var(--ink-3); }
/* ★ v2.9.2：编号列表与分割线的块标签，给一点颜色区分，方便扫读 */
.dkblk__lb--oli { color: var(--ink-3); }
.dkblk__lb--hr { color: var(--ink-4); }
.dkblk__c { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dkblk__ta {
  width: 100%; border: 0; outline: none; resize: vertical; background: transparent;
  padding: 6px 2px; font-size: 14.5px; line-height: 1.85; color: var(--ink);
  font-family: var(--serif); letter-spacing: .01em;
}
.dkblk__ta--h1 { font-size: 21px; font-weight: 700; line-height: 1.45; }
.dkblk__ta--h2 { font-size: 17px; font-weight: 700; line-height: 1.5; }
.dkblk__ta--h3, .dkblk__ta--h4 { font-size: 15.5px; font-weight: 700; line-height: 1.5; }
.dkblk__ta--quote { color: var(--ink-3); border-left: 3px solid var(--line-strong); padding-left: 11px; }
.dkblk__ta--li { font-size: 14px; }
/* ★ v2.9.2：编号列表项给左侧一点缩进感，与圆点列表在视觉上区分开
   （否则用户在块编辑器里看不出「这条是有序的还是无序的」）。 */
.dkblk__ta--oli { font-size: 14px; padding-left: 4px; }
.dkblk__ta::placeholder { color: var(--ink-5); }
.dkblk__ops { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; opacity: 0; transition: opacity .14s var(--ease); }
.dkblk__i:hover .dkblk__ops, .dkblk__i:focus-within .dkblk__ops { opacity: 1; }
.dkblk__b {
  width: 21px; height: 21px; border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--surface); color: var(--ink-3); cursor: pointer; font-family: inherit;
  font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: all .12s var(--ease);
}
.dkblk__b:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dkblk__b:disabled { opacity: .3; cursor: default; }
.dkblk__b:disabled:hover { border-color: var(--line); color: var(--ink-3); background: var(--surface); }
.dkblk__b--x:hover { border-color: var(--accent); color: var(--accent); }
.dkblk__img {
  width: 100%; max-height: 320px; object-fit: contain; display: block;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-3);
}
.dkblk__noimg {
  padding: 22px; text-align: center; font-size: 12px; color: var(--ink-4);
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
}
/* ★ v2.9.2：分割线块的预览条。
   给一个「看起来就是一条分割线」的可见元素，用户才知道这一块是什么；
   只给空框的话会被当成坏块。 */
.dkblk__i--hr { background: var(--surface-2); border-color: var(--line-2); }
.dkblk__hrline {
  height: 0; border-top: 1px solid var(--line-strong);
  margin: 12px 0;
}
.dkblk__cap, .dkblk__src { font-size: 11.5px; }
.dkblk__add {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px 14px; border-top: 1px dashed var(--line);
}

/* ---------------- 视图二：富文本 ---------------- */
.dkrt { display: flex; flex-direction: column; }
.dkrt__tb {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  padding: 7px 12px; border-bottom: 1px solid var(--line-2); background: var(--surface-2);
  position: sticky; top: 0; z-index: 2;
}
.dkrt__b {
  min-width: 27px; height: 27px; padding: 0 6px;
  border: 1px solid transparent; border-radius: var(--r-xs); background: transparent;
  color: var(--ink-3); cursor: pointer; font-family: inherit; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s var(--ease);
}
.dkrt__b:hover { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.dkrt__sep { width: 1px; height: 16px; background: var(--line-strong); margin: 0 4px; }

/* ★ v2.9.2 工具栏扩容：带文字标签的按钮
   —— 面向不会写代码的普通用户，「小标题」比一个 H 好懂得多。
   为控制整条工具条的宽度：带文字的按钮给一点 padding，
   图标按钮（撤销/加粗等）保持紧凑的方块尺寸。 */
.dkrt__tb { row-gap: 5px; }
.dkrt__b:has(.dkrt__tx) { padding: 0 9px; gap: 5px; }
.dkrt__b:has(.dkrt__ic):has(.dkrt__tx) { padding: 0 9px 0 7px; }
.dkrt__b:has(.dkrt__ic):not(:has(.dkrt__tx)) { padding: 0; }
.dkrt__ic { font-size: 12.5px; line-height: 1; opacity: .85; }
.dkrt__tx { font-size: 12.5px; line-height: 1; white-space: nowrap; }
/* 当前光标处的格式：按钮保持"按下"观感，用户一眼看出这段是什么样式 */
.dkrt__b.is-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.dkrt__b.is-on .dkrt__ic { opacity: 1; }

.dkrt__ed {
  min-height: 460px; padding: 18px 20px; outline: none;
  font-size: 14.5px; line-height: 1.95; color: var(--ink);
  font-family: var(--serif); letter-spacing: .01em;
}
.dkrt__ed:empty::before {
  content: "在这里写正文，支持图文混排。从别处粘贴会自动清洗格式。";
  color: var(--ink-5);
}
/* 富文本编辑区内部的元素：用低特异度写，只负责「在编辑器里好看」，
   真正的成品样式由 mdToHtml 的内联样式决定（进公众号用那套）。 */
.dkrt__ed h1 { font-size: 21px; font-weight: 700; margin: 0 0 14px; line-height: 1.5; }
.dkrt__ed h2 { font-size: 17px; font-weight: 700; margin: 20px 0 10px; line-height: 1.5; }
.dkrt__ed h3 { font-size: 15.5px; font-weight: 700; margin: 16px 0 8px; line-height: 1.5; }
.dkrt__ed p { margin: 0 0 12px; }
.dkrt__ed blockquote {
  margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink-3);
}
.dkrt__ed ul, .dkrt__ed ol { margin: 0 0 12px; padding-left: 22px; }
.dkrt__ed li { margin: 0 0 5px; }
.dkrt__ed img { max-width: 100%; border-radius: var(--r-sm); display: block; margin: 8px 0; }
.dkrt__ed figure { margin: 0 0 16px; }
.dkrt__ed figcaption { font-size: 12px; color: var(--ink-4); text-align: center; margin-top: 6px; }
.dkrt__ed a { color: var(--accent); }
.dkrt__ed code {
  background: var(--surface-3); border-radius: var(--r-xs); padding: 1px 5px;
  font-family: Consolas, Monaco, monospace; font-size: .92em;
}
/* ★ v2.9.2 新增：分割线要在这里给出可见样式。
   不给的话 <hr> 用的是浏览器默认样式（可能是一条很粗的凹槽线），
   与成品的细线观感差太远，用户会以为"插错了"。 */
.dkrt__ed hr {
  border: 0; border-top: 1px solid var(--line-strong);
  margin: 20px 0; height: 0;
}
/* ★ v2.9.2 新增：表格在编辑区内的可见样式。
   注意这些只是「编辑期」样式，不写进 Markdown（表格的成品样式由
   模板/导出环节决定）；因此这里用低特异度，方便被别的规则覆盖。 */
.dkrt__ed table { border-collapse: collapse; width: 100%; margin: 8px 0 14px; font-size: 13.5px; }
.dkrt__ed th, .dkrt__ed td {
  border: 1px solid var(--line-strong); padding: 6px 9px;
  text-align: left; vertical-align: top;
}
.dkrt__ed th { background: var(--surface-2); font-weight: 700; }

/* ---------------- 参考弹窗：按钮区 ---------------- */
.dkref__ops { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ---------------- 风格库面板 ---------------- */
.dkstyle { display: flex; flex-direction: column; gap: 10px; max-height: 62vh; overflow: auto; }
.dkstyle__i {
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px;
  background: var(--surface-2); transition: all .14s var(--ease);
}
.dkstyle__i:hover { border-color: var(--line-strong); }
.dkstyle__h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dkstyle__n { font-size: 13.5px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; }
.dkstyle__s { font-size: 12px; color: var(--ink-3); line-height: 1.75; margin-top: 6px; }
.dkstyle__kv { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--ink-4); }
.dkstyle__kv b { color: var(--ink-2); }
.dkstyle__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.dkstyle__src {
  font-size: 11px; color: var(--ink-4); margin-top: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dkstyle__ops { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ---------------- 新建弹窗里的风格下拉提示 ---------------- */
.dkpick__i + .field { margin-top: 4px; }


/* ======================================================================
 *  v2.9.1：长耗时任务进度卡（.dkprog）
 *  ---------------------------------------------------------------------
 *  真实大模型串行生成 3 个版本实测可达 3~4 分钟。原实现只有一个静态 toast，
 *  界面几十分钟不动 → 用户会判定卡死并反复点击（重复烧钱）。
 *  这里给一张「会自己走秒」的进度卡，明确告诉他任务还在跑。
 * ==================================================================== */
.dkprog {
  position: fixed;
  right: 20px;
  bottom: 76px;               /* 让开 toast 区域（toast 在更下方） */
  z-index: 320;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 268px;
  max-width: 380px;
  padding: 12px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--line-2, #e6e8ec);
  border-radius: var(--r-lg, 12px);
  box-shadow: 0 10px 34px rgba(15, 23, 42, .16);
  animation: dkprog-in .22s var(--ease, ease-out);
  transition: opacity .4s ease, transform .4s ease;
}
@keyframes dkprog-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 转圈：conic-gradient 做出「有进度感」的弧，再用 mask 抠成环 */
.dkprog__spin {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--accent, #2563eb) 0deg,
    var(--accent, #2563eb) 80deg,
    transparent 80deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 60%, #000 62%);
          mask: radial-gradient(farthest-side, transparent 60%, #000 62%);
  animation: dkprog-rot .9s linear infinite;
}
@keyframes dkprog-rot { to { transform: rotate(360deg); } }

.dkprog__tx { flex: 1 1 auto; min-width: 0; }
.dkprog__m {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1, #0f172a);
  line-height: 1.4;
}
.dkprog__s {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-5, #64748b);
  line-height: 1.4;
}
.dkprog__t {
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;   /* ★ 逐秒变化时宽度不抖 */
  color: var(--ink-5, #64748b);
  min-width: 34px;
  text-align: right;
}

/* 收尾：勾/叹号圆标 */
.dkprog__mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--ok, #16a34a);
}
.dkprog--ok  { border-color: color-mix(in srgb, var(--ok, #16a34a) 40%, var(--line-2, #e6e8ec)); }
.dkprog--err .dkprog__mark { background: var(--danger, #dc2626); }
.dkprog--err { border-color: color-mix(in srgb, var(--danger, #dc2626) 40%, var(--line-2, #e6e8ec)); }
.dkprog--out { opacity: 0; transform: translateY(6px); }

/* 窄屏：占满底部一行，避免贴边溢出 */
@media (max-width: 640px) {
  .dkprog {
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-width: 0;
    max-width: none;
  }
}


/* ======================================================================
 *  v2.9.1：多图成文面板（.dkimg__*）
 *  ---------------------------------------------------------------------
 *  选图区做成可点的落区 + 拖放；缩略图网格每张带序号与左移/右移/删除。
 *  缩略图用 object-fit: cover 统一裁成正方形 —— 手机照片比例各异，
 *  不统一裁切会让网格高低不齐、排序错位。
 * ==================================================================== */
.dkimg__drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 16px;
  border: 1.5px dashed var(--line-2, #d8dbe2);
  border-radius: var(--r-md, 10px);
  background: var(--bg-soft, #fafbfc);
  cursor: pointer;
  transition: border-color .18s var(--ease, ease), background .18s var(--ease, ease);
}
.dkimg__drop:hover,
.dkimg__drop.is-over { border-color: var(--accent, #2563eb); background: var(--accent-soft, #eef4ff); }
.dkimg__drop.is-full { opacity: .55; cursor: not-allowed; }
.dkimg__hint { font-size: 13px; color: var(--ink-5, #64748b); }

.dkimg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.dkimg__i {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm, 8px);
  overflow: hidden;
  border: 1px solid var(--line-2, #e6e8ec);
  background: var(--bg-soft, #fafbfc);
}
.dkimg__i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dkimg__no {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(15, 23, 42, .72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.dkimg__ops {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  gap: 1px;
  background: rgba(15, 23, 42, .68);
  opacity: 0;
  transition: opacity .16s var(--ease, ease);
}
/* 触屏没有 hover，始终显示操作条 */
.dkimg__i:hover .dkimg__ops,
.dkimg__i:focus-within .dkimg__ops { opacity: 1; }
.dkimg__ops button {
  flex: 1 1 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}
.dkimg__ops button:hover { background: rgba(255, 255, 255, .18); }
.dkimg__ops button[data-rm]:hover { background: rgba(220, 38, 38, .85); }

.dkimg__vb { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dkimg__vstat { font-size: 12px; color: var(--accent, #2563eb); }
.dkimg__vb .btn.is-on {
  color: #fff;
  background: var(--danger, #dc2626);
  border-color: var(--danger, #dc2626);
}

/* 触屏设备始终显示操作条（无 hover 可揭示） */
@media (hover: none) {
  .dkimg__ops { opacity: 1; }
}