/* =========================================================
 * app.css —— 汇报工坊·编辑台（只放 .ed-* 编辑界面样式）
 * 成品文档本身的样式（.doc-* / .ce 等）在 index.html 的
 * <style id="docStyle"> 中，单一来源，导出时一并内联。
 * ========================================================= */

[v-cloak]{display:none !important}

/* 中性编辑台配色 tokens：编辑 chrome 一律黑白灰，绝不与任何预置主题强调色（尤其墨绿 #33614b）撞色。
   产品侧颜色（.doc-*）在 index.html 的 #docStyle 里由 data-theme 主题变量提供，两套彻底分离。 */
:root{
  --ed-ink:#2c3440;       /* 主墨 / 选中实底 / 品牌 */
  --ed-ink-deep:#212930;  /* 更深一档（hover） */
  --ed-ink-soft:#eef1f4;  /* 选中淡底 */
  --ed-line:#d5dbe1;      /* 常规边框 */
  --ed-line-hi:#aeb9c4;   /* hover / 聚焦描边 */
  --ed-fill:#f3f6f8;      /* hover / 置灰淡底 */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,"Noto Sans SC",sans-serif;
  background:#e9edf1; color:#2c3440; font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 顶栏 ---------- */
.ed-top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:9px 18px; min-height:54px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid #dfe4ea;
}
.ed-brand{ display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.ed-brand b{ font-size:16px; letter-spacing:.01em; color:var(--ed-ink); }
.ed-br-sub{ font-size:11.5px; color:#8a95a1; }
.ed-acts{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
/* 固定宽度：状态文字在「保存中…」与「已保存 HH:MM:SS」间切换时不让整行布局闪动 */
.ed-save{
  flex:0 0 auto; width:118px; text-align:right;
  font-size:11.5px; color:#9aa5b0; white-space:nowrap;
}

.ed-btn{
  border:1px solid #d5dbe1; background:#fff; color:#3a4553; border-radius:8px;
  padding:6px 13px; font-size:13px; cursor:pointer; transition:all .12s; white-space:nowrap;
}
.ed-btn:hover{ border-color:var(--ed-line-hi); }
.ed-btn.primary{ background:var(--ed-ink); border-color:var(--ed-ink); color:#fff; font-weight:600; }
.ed-btn.primary:hover{ background:var(--ed-ink-deep); }
.ed-btn.ghost{ background:transparent; }

.ed-sel{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#6b7784; }
.ed-sel select{
  border:1px solid #d5dbe1; background:#fff; border-radius:8px; padding:5px 8px;
  font-size:13px; color:#2c3440; cursor:pointer; outline:none;
}
.ed-sel select:focus{ border-color:var(--ed-line-hi); }

/* ---------- 主区 ---------- */
.ed-main{ min-height:calc(100vh - 54px); }
.ed-stage{ padding:26px 22px 140px; }

/* 文档列宿主：铺上与成品一致的纯白底色（doc-head 去色块后透明，靠它呈现“网页底色”） */
.ed-stage .doc-wrap{ background:#fff; }

/* 文末「＋ 新增篇章」：文档流末尾的居中胶囊（随内容滚动，不再固定占角）。
   仅编辑态渲染、导出剥离 → 样式属编辑台；hover 中立色，不撞任何主题强调色。
   与末章间距明显大于章间距（章 34px）：让“加章入口”与上一章内容拉开、独立成动作位。 */
.doc-addrow{ margin-top:48px; padding-top:2px; text-align:center; }
.doc-add{
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--ed-line-hi); background:#fff; color:var(--ed-ink);
  border-radius:999px; padding:9px 24px; font-size:13.5px; cursor:pointer;
  transition:all .15s; line-height:1; user-select:none; -webkit-user-select:none;
}
.doc-add:hover{ border-color:var(--ed-ink); background:var(--ed-fill); }
.doc-add:focus-visible{ outline:2px solid var(--ed-ink); outline-offset:2px; }
@media (max-width:640px){ .doc-add{ font-size:13px; padding:8px 18px; } .doc-addrow{ margin-top:36px; } }

/* 空文档引导 */
.doc-empty{
  max-width:1080px; margin:60px auto 0; text-align:center; color:#8b96a2;
  background:#fff; border:1.5px dashed #ccd4dc; border-radius:14px; padding:54px 24px;
}
.doc-empty b{ display:block; font-size:17px; color:#5c6b7a; margin-bottom:8px; }
.doc-empty .row{ margin-top:18px; display:flex; gap:10px; justify-content:center; }

/* 右下「☰」更多操作：点开二级菜单（新建汇报 / 示例）；「＋ 新增篇章」在文末胶囊，不再占角 */
.ed-fab{
  position:fixed; right:26px; bottom:28px;
  z-index:35; width:60px; height:60px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--ed-ink); border:1px solid #ccd4dc; border-radius:50%;
  font-size:26px; font-weight:500; cursor:pointer; line-height:1; letter-spacing:0;
  box-shadow:0 6px 20px rgba(30,45,60,.2); transition:all .15s;
  user-select:none; -webkit-user-select:none;
}
.ed-fab:hover{ border-color:var(--ed-line-hi); color:var(--ed-ink-deep); box-shadow:0 8px 26px rgba(30,45,60,.28); transform:translateY(-1px); }
.ed-fab.on{ background:var(--ed-ink); border-color:var(--ed-ink); color:#fff; }
@media (max-width:700px){ .ed-fab{ right:18px; bottom:20px; width:54px; height:54px; font-size:24px; } }

/* ☰ 点开的二级菜单：仅「新建汇报 / 示例」两项，叠在右下角按钮上方（不动主题——主题在顶栏下拉） */
.ed-fab-pop{
  position:fixed; right:26px; bottom:96px; z-index:36;
  min-width:190px; padding:6px;
  background:#fff; border:1px solid var(--ed-line-hi); border-radius:14px;
  box-shadow:0 14px 38px rgba(12,22,32,.24);
  display:flex; flex-direction:column; gap:2px;
}
.ed-fab-pop .fab-i{
  border:none; background:transparent; color:var(--ed-ink); text-align:left;
  font-size:13.5px; padding:9px 12px; border-radius:9px; cursor:pointer;
  transition:background .1s, color .1s;
}
.ed-fab-pop .fab-i:hover{ background:var(--ed-fill); color:var(--ed-ink-deep); }
@media (max-width:700px){ .ed-fab-pop{ right:18px; bottom:82px; left:auto; min-width:170px; } }

/* ---------- 篇章操作条（钉在本章右上角、不占文档流 → 展开/收起不改篇章坐标） ----------
   归属：小圆钮 + 操作条“别”在**本篇章**顶边（上半露在上方篇章间距里、下半搭在本章
   顶部的内衬空白区），一眼即知管的是“这一章”，而不是上一章。
   方向：胶囊从圆钮向“左”水平单行铺开；绝对定位不占文档流，展开/收起不把后续篇章
   推下去，编辑 / 收起 / 导出时文档坐标始终一致（所见即所得）。 */
.ed-sect{ position:relative; }
.ed-ctl{
  position:absolute; z-index:9; right:12px; top:-13px;
  width:24px; height:24px; padding:0 0 1px;
  border:1px solid #c9d3dc; background:#fff; color:#5f6e7a;
  border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1;
  user-select:none; -webkit-user-select:none;
  box-shadow:0 1px 4px rgba(30,45,60,.16);
  transition:all .15s;
}
.ed-ctl:hover{ background:var(--ed-fill); color:#33414d; }
.ed-sect.on .ed-ctl{ background:var(--ed-ink); border-color:var(--ed-ink); color:#fff; }
.ed-ruler{
  position:absolute; z-index:8; right:44px; top:-16px;
  display:none; align-items:center; gap:8px; flex-wrap:nowrap;
  max-width:calc(100% - 64px);
  padding:4px 10px 4px 12px;
  font-size:13px; color:#7f8b97; white-space:nowrap;
  background:#fff; border:1px solid #d7dee5; border-radius:999px;
  box-shadow:0 3px 12px rgba(30,45,60,.16);
}
.ed-sect.on .ed-ruler{ display:flex; }
.ed-ruler .er-btn{
  background:var(--ed-fill); border:1px solid #d9dfe6; font-weight:700; color:#33414d;
  padding:5px 16px; margin-right:4px;
}
.ed-ruler button{
  border:none; background:transparent; color:#6b7784; border-radius:8px;
  font-size:13px; padding:5px 12px; cursor:pointer; transition:all .12s; line-height:1.35;
  user-select:none; -webkit-user-select:none;
}
.ed-ruler button:hover{ background:var(--ed-fill); color:var(--ed-ink-deep); }
.ed-ruler button.danger{ color:#a96c62; }
.ed-ruler button.danger:hover{ background:#fdf1ef; color:#a4483d; }
/* 移动端：篇章上衬垫只有 12px，胶囊间距收窄防溢出，放不下时允许内部横向滚动（仍不占文档流） */
@media (max-width:700px){
  .ed-ruler{ right:40px; top:-15px; gap:5px; padding:3px 6px 3px 10px; max-width:calc(100% - 54px); overflow-x:auto; }
  .ed-ruler .er-btn{ padding:4px 12px; margin-right:2px; }
  .ed-ruler button{ font-size:12.5px; padding:4px 9px; }
  .ed-ruler::-webkit-scrollbar{ display:none; }
}

/* ---------- 通用关闭钮（各右抽屉头部） ---------- */
.ed-x{ border:none; background:none; font-size:16px; color:#9aa5b0; cursor:pointer; padding:2px 6px; }
.ed-x:hover{ color:#5c6b7a; }

.f-label{ font-size:12.5px; font-weight:700; color:#6b7784; margin:14px 0 8px; letter-spacing:.02em; }
.f-label:first-child{ margin-top:2px; }
.ed-hint{ font-size:12px; color:#9aa5b0; margin:14px 2px 4px; }

.h-row, .num-row, .seg{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.h-row .px{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#8a95a1; margin-left:6px; }
.h-row .px input{
  width:72px; border:1px solid #d5dbe1; border-radius:7px; padding:5px 8px;
  font-size:13px; outline:none; color:#2c3440;
}
.h-row .px input:focus{ border-color:var(--ed-line-hi); }

.chip{
  border:1px solid #d9dfe6; background:#fff; color:#4a5562; border-radius:8px;
  padding:6px 11px; font-size:12.5px; cursor:pointer; transition:all .1s;
}
.chip:hover{ border-color:var(--ed-line-hi); }
.chip.on{ background:var(--ed-ink); border-color:var(--ed-ink); color:#fff; font-weight:600; }
.chip.n{ min-width:40px; text-align:center; }
.chip.n.on{ background:#2c3440; border-color:#2c3440; }
.chip:disabled{ opacity:.35; cursor:not-allowed; }

.seg{ display:grid; grid-template-columns:repeat(3,1fr); }
.seg-i{
  border:1px solid #d9dfe6; background:#fff; border-radius:9px; padding:9px 6px;
  cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  text-align:left; color:#3a4553; transition:all .1s;
}
.seg-i b{ font-size:13px; }
.seg-i.on{ border-color:var(--ed-ink); background:var(--ed-ink-soft); color:var(--ed-ink-deep); }
.seg-i:disabled{ opacity:.4; cursor:not-allowed; }

.arr-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; }
.arr-cell{
  border:1px solid #d9dfe6; border-radius:9px; padding:9px 6px 8px; cursor:pointer;
  background:#fff; color:#4a5562; transition:all .1s; text-align:center; font-size:12px;
}
.arr-cell:hover{ border-color:var(--ed-line-hi); }
.arr-cell.on{ border-color:var(--ed-ink); background:var(--ed-ink-soft); color:var(--ed-ink-deep); }
.arr-cell.dis{ opacity:.4; cursor:not-allowed; }
.arr-mini{ display:flex; gap:4px; justify-content:center; align-items:flex-end; height:34px; margin-bottom:5px; }
.arr-mini i{
  display:block; background:#ccd3da; border-radius:3px; width:18px; height:18px;
}
.arr-mini .w{ width:22px; }
.arr-mini .l{ background:var(--ed-ink); }
.arr-mini .row2{ display:flex; flex-wrap:wrap; gap:3px; width:34px; }
.arr-mini .row2 i{ width:15px; height:13px; }
/* 纵向堆叠：小图标竖排示意，顶格强调色 */
.arr-mini .vcol{ display:flex; flex-direction:column; gap:3px; }
.arr-mini .vcol i{ width:20px; height:6px; border-radius:2px; }
.arr-cell.dis .arr-mini i{ background:#ccd3d9; }

/* 子块字段开关 */
.tog-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.switch{
  display:inline-flex; align-items:center; gap:7px; border:1px solid #d9dfe6;
  background:#fff; border-radius:999px; padding:5px 12px; cursor:pointer;
  font-size:12.5px; color:#4a5562; user-select:none;
}
.switch .dot{ width:24px; height:14px; border-radius:999px; background:#cfd6dd; position:relative; transition:background .15s; }
.switch .dot::after{ content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.switch.on{ border-color:var(--ed-line-hi); color:var(--ed-ink-deep); }
.switch.on .dot{ background:var(--ed-ink); }
.switch.on .dot::after{ left:12px; }
.switch:disabled{ opacity:.45; cursor:not-allowed; }
/* 旧主题色板小方块（.swatch）已随「主题选择改下拉」移除 DOM，样式一并删除 */

/* ---------- 图标选择 ---------- */
.ico-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; padding-bottom:6px; }
.ico-cell{
  border:1px solid #e0e5ea; background:#fafbfc; border-radius:9px; height:52px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  cursor:pointer; color:#4a5562; font-size:10px; transition:all .1s;
}
.ico-cell svg{ width:22px; height:22px; }
.ico-cell:hover{ border-color:var(--ed-line-hi); background:var(--ed-fill); }
.ico-cell.on{ border-color:var(--ed-ink); background:var(--ed-ink-soft); color:var(--ed-ink-deep); }
.ico-none{ margin:4px 2px 14px; font-size:12.5px; color:#a4483d; cursor:pointer; display:inline-block; }
/* 图标分类 chips：70 枚按类筛选（「全部」+ 8 类），选中态中立墨色，不撞主题强调色 */
.ico-cats{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.ico-cat{
  border:1px solid var(--ed-line); background:#fff; color:#4a5562;
  border-radius:999px; padding:4px 11px; font-size:12px; cursor:pointer; transition:all .1s;
}
.ico-cat:hover{ border-color:var(--ed-line-hi); color:var(--ed-ink); }
.ico-cat.on{ background:var(--ed-ink); border-color:var(--ed-ink); color:#fff; font-weight:600; }

/* 图标悬停小字提示 via 全局 title 已足够 */

/* ---------- toast（吸在顶部导航栏正中间；.ed-top 为 sticky 定位父） ---------- */
.ed-toast{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:50;
  pointer-events:none; max-width:min(72vw,560px);
  background:rgba(30,40,50,.92); color:#fff; padding:7px 16px; border-radius:999px;
  font-size:13px; box-shadow:0 6px 18px rgba(0,0,0,.2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- 动画 ---------- */
.pop-enter-active,.pop-leave-active{ transition:opacity .18s ease; }
.pop-enter-from,.pop-leave-to{ opacity:0; }

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  .ed-br-sub{ display:none; }
  .ed-top{ gap:8px; padding:8px 12px; }
  .ed-save{ width:100%; order:6; text-align:right; }
}
@media (max-width:640px){
  .ed-save{ width:auto; }
}
@media (max-width:640px){
  .ed-stage{ padding:16px 8px 130px; }
  .ed-acts .ed-btn{ padding:5px 9px; font-size:12.5px; }
  .ed-sel span{ display:none; }
  .seg{ grid-template-columns:repeat(3,1fr); }
}

/* =========================================================
 * 篇章设置 · 右侧抽屉（文档保持可见 → 结构/高度改动即时预览）
 * ========================================================= */
.set-root{ position:fixed; inset:0; z-index:70; }
/* 抽屉（整屏浮层）打开时锁住文档滚动：文档滑轨消失，抽屉盖到窗口右缘。
   锁由 app.js lockDoc 在 ui.sel 变化时切换 .wr-lock。 */
html.wr-lock{ overflow:hidden; }
html.wr-lock body{ overflow:hidden; }
.set-veil{ position:absolute; inset:0; background:rgba(16,24,34,.16); }
.set-drawer{
  position:absolute; top:0; right:0; bottom:0; width:min(400px,94vw);
  display:flex; flex-direction:column; background:#fff;
  box-shadow:-16px 0 46px rgba(12,22,32,.22);
}
.set-head{ display:flex; align-items:flex-start; gap:10px; padding:15px 16px 13px; border-bottom:1px solid #eef1f4; }
.set-head .sh-tt{ flex:1; min-width:0; }
.set-head b{ display:block; font-size:15px; color:#2c3440; }
/* 抽屉正文 = 抽屉自身的纵向滚动区：预留滚轨、滚到顶/底不串到背后文档
   （overscroll-behavior:contain 掐断滚动链；详见下方 JS 里再兜一层吞滚）。 */
.set-body{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:2px 16px 20px; -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;                      /* 始终预留右侧滚轨位，内容增减不跳动 */
  scrollbar-width:thin; scrollbar-color:#c8d0d8 transparent;   /* Firefox 细轨 */
}
.set-body::-webkit-scrollbar{ width:10px; }
.set-body::-webkit-scrollbar-track{ background:transparent; }
.set-body::-webkit-scrollbar-thumb{
  background:#c8d0d8; border-radius:8px;
  border:3px solid transparent; background-clip:content-box;   /* 内缩细轨，不贴边 */
}
.set-body::-webkit-scrollbar-thumb:hover{ background:#aab4bd; background-clip:content-box; }
.set-foot{ flex:none; display:flex; justify-content:flex-end; padding:12px 16px 14px; border-top:1px solid #eef1f4; }

/* 抽屉出入场：整层淡入 + 抽屉右滑 */
.set-enter-active,.set-leave-active{ transition:opacity .16s ease; }
.set-enter-from,.set-leave-to{ opacity:0; }
.set-enter-active .set-drawer{ transition:transform .22s ease; }
.set-leave-active .set-drawer{ transition:transform .14s ease; }
.set-enter-from .set-drawer,.set-leave-to .set-drawer{ transform:translateX(28px); }

/* ---------- 设置分组（新建向导 / 设置抽屉共用） ---------- */
.fg{ margin-top:18px; }
.fg:first-child{ margin-top:2px; }
.fg .fg-tt{ display:flex; align-items:baseline; gap:7px; font-size:13.5px; font-weight:700; color:#33414d; }
.fg .fg-tt .at{ font-size:11px; color:#98a3ae; font-weight:400; margin-left:2px; }
.fg-hint{ font-size:12px; color:#98a3ae; margin:4px 2px 0; line-height:1.55; }
.fg .ctl-row{ margin-top:10px; }

/* ---------- 子块样式迷你样本（小样 = 子块的真实长相） ---------- */
.seg-i .smp{ display:flex; flex-direction:column; box-sizing:border-box; width:100%; height:58px;
  padding:8px 10px; margin-bottom:8px; border:1px solid var(--ed-line); border-radius:8px;
  background:#fff; overflow:hidden; }
.seg-i.on .smp{ border-color:var(--ed-line-hi); }
.seg-i .smp .bar{ display:block; height:5px; border-radius:3px; background:#d7dde1; }
.seg-i .smp .bar.t{ height:7px; background:#3c464f; }
/* 图文要点：左图标 + 右侧标题 / 说明两行 */
.seg-i .smp.smp-icon{ flex-direction:row; align-items:center; gap:8px; }
.smp-icon .si{ flex:none; width:18px; height:18px; border-radius:5px; background:var(--ed-ink); color:#fff;
  font-size:11px; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center; }
.smp-icon .txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.smp-icon .t1{ width:84%; }
.smp-icon .s1{ width:64%; }
/* 数字统计：顶部细色条 + 大数字 + 小字 */
.seg-i .smp.smp-stat{ position:relative; align-items:center; justify-content:center; gap:2px; padding-top:9px; }
.smp-stat .bar.top{ position:absolute; top:0; left:0; right:0; height:3px; border-radius:0; background:var(--ed-ink); }
.smp-stat .num{ font-size:17px; font-weight:800; color:var(--ed-ink); line-height:1.15; }
.smp-stat .s3{ width:44%; height:4px; }
/* 纯标题句：一句大字号小结，居中 */
.seg-i .smp.smp-plain{ align-items:center; justify-content:center; gap:6px; }
.smp-plain .t2{ width:76%; height:7px; }
.smp-plain .s2{ width:52%; height:5px; }

/* ---------- 编辑态：编号方块 = 强调色入口（可点、可键盘） ---------- */
.doc-wrap.editable .dc-num{ cursor:pointer; transition:filter .12s, box-shadow .12s; }
.doc-wrap.editable .dc-num:hover{ filter:saturate(1.05) brightness(1.07); box-shadow:0 3px 9px rgba(10,20,30,.25); }
.doc-wrap.editable .dc-num:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* ---------- 通用语义色小胶囊（强调色调色盘 / 格式抽屉的「主题色」共用） ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px; border:1.5px solid #d5dde4;
  background:#fff; color:#3d4852; border-radius:999px; padding:5px 13px 5px 7px;
  font-size:12.5px; cursor:pointer; transition:all .12s; line-height:1.4;
}
.pill:hover{ border-color:var(--ed-line-hi); background:var(--ed-fill); }
.pill.on{ border-color:#2c3440; box-shadow:0 0 0 1px #2c3440 inset; }
.pill .p-dot{ width:14px; height:14px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }

/* ---------- 编号强调色调色盘（点编号弹出）：主题色 + 自定义取色 ---------- */
.acc-pop{
  position:fixed; z-index:95; width:250px; padding:11px 12px; background:#fff;
  border:1px solid #d8dfe6; border-radius:12px;
  box-shadow:0 12px 34px rgba(12,22,32,.24);
  display:flex; flex-direction:column; gap:9px; user-select:none;
}
.acc-pop .ap-lb{ font-size:12px; font-weight:600; color:#4a5662; }
.acc-pop .pill{ align-self:flex-start; }
.acc-custom{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-top:1px solid #edf0f3; padding-top:8px; font-size:12px; color:#6b7784; cursor:pointer;
}
.acc-custom input[type=color]{
  width:32px; height:22px; padding:1px 2px; border:1px solid #d8dfe6; border-radius:6px;
  background:#fff; cursor:pointer;
}
.acc-custom input[type=color]::-webkit-color-swatch-wrapper{ padding:0; }
.acc-custom input[type=color]::-webkit-color-swatch{ border:none; border-radius:4px; }

@media (max-width:700px){
  .set-drawer{ width:100vw; box-shadow:-8px 0 30px rgba(12,22,32,.2); }
  .acc-pop{ width:238px; padding:10px; }
}

/* =========================================================
 * 文本行悬浮格式钮 + 文字格式抽屉（选区级 字号/字形/颜色/清除）
 * ========================================================= */
.ed-fmt-bub{
  position:fixed; z-index:30; width:26px; height:26px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%;
  background:#fff; color:#2c3440;
  box-shadow:0 3px 12px rgba(12,22,32,.28), 0 0 0 1px rgba(18,30,44,.1);
  cursor:pointer; font-family:Georgia,'Times New Roman',serif;
  opacity:.94; transition:transform .12s, box-shadow .12s, opacity .12s;
}
.ed-fmt-bub b{ font-size:14px; line-height:1; }
.ed-fmt-bub:hover{ transform:scale(1.12); opacity:1;
  box-shadow:0 5px 16px rgba(12,22,32,.32), 0 0 0 1px rgba(18,30,44,.14); }
.ed-fmt-bub:active{ transform:scale(.95); }

/* 格式抽屉复用篇章设置的抽屉外观；正文窄一档，手机铺满 */
.fmt-root .set-drawer{ width:min(360px,94vw); }
.fmt-root .sh-tt .fmt-scope{ display:block; font-size:11px; color:#98a3ae; font-weight:400; margin-top:2px; }
.fmt-root .num-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.fmt-root .num-chips .num-fmt{ min-width:0; }

/* 字号：A− / 当前值 / A+ */
.fmt-size{ display:flex; align-items:center; gap:8px; }
.fmt-size .fsz{
  width:46px; height:36px; border:1.5px solid #d5dde4; border-radius:9px;
  background:#fff; color:#33414d; font-size:14px; font-weight:700;
  cursor:pointer; transition:all .1s; flex:none;
}
.fmt-size .fsz:hover{ border-color:var(--ed-line-hi); }
.fmt-size .fsz-val{
  flex:1; min-width:0; height:36px; border:1.5px dashed #d5dde4; border-radius:9px;
  background:var(--ed-fill); color:#4a5662; font-size:12.5px; cursor:pointer; transition:all .1s;
}
.fmt-size .fsz-val:hover{ border-color:var(--ed-line-hi); background:var(--ed-ink-soft); }

/* 字形 B / I / U */
.fmt-shapes{ display:flex; gap:8px; }
.fmt-shapes .fshape{
  flex:1; height:40px; border:1.5px solid #d5dde4; border-radius:9px;
  background:#fff; color:#33414d; font-size:16px; cursor:pointer; transition:all .1s;
}
.fmt-shapes .fshape:hover{ border-color:var(--ed-line-hi); background:var(--ed-fill); }
.fmt-shapes .fshape.on{ border-color:var(--ed-ink); background:var(--ed-ink-soft); color:var(--ed-ink-deep);
  box-shadow:0 0 0 1px var(--ed-ink) inset; }

/* 文字颜色：主题色（跟随当前主题强调色）+ 自定义取色 */
.fmt-clrs{ align-items:center; }
.fmt-custom{ margin-top:10px; }
.fmt-clear{ width:100%; }

@media (max-width:700px){
  .ed-fmt-bub{ width:28px; height:28px; }
  .fmt-root .set-drawer{ width:100vw; }
}