/* ============================================================================
 * 第 2 批 · fanfic.css —— 大纲勾选 / 改编走向 / 二创 / 后台二创配置
 * 【P0】零硬编码色值（#fff/#000 除外）；无紫→粉渐变；圆角 ≤18px；无弹跳缓动。
 * 【落地约定】本文件被 index.html 与 admin.html 同时引用，12 条新 token 的
 *   「单一真源」就在这里的 :root —— 不复制一份到 admin.html（避免海报 token
 *   那种「改值必须两处同步」的债）。因此：
 *     - index.html：tokens.css 之后加载（沿用现有 <link> 顺序）
 *     - admin.html：batch2.css 之后加载
 *   页面级变量一律写 var(--新名, var(--旧名)) 兜底，与本文件 batch2.css 同款口径：
 *   admin.html 不加载 tokens.css，只有 --ink/--ink2/--ink3/--bg1/--card/--bd 这一套
 *   旧别名，所以本文件只用「两边都存在的名字」，不假定 --surface/--muted 存在。
 * ========================================================================== */
:root {
  --info-dim: rgba(107, 168, 255, .12);
  --danger-dim: rgba(224, 90, 79, .12);
  --success-dim: rgba(52, 211, 153, .12);
  --touch-min: 44px;
  --check-size: 18px;
  --list-max-h: 420px;
  --bar-h: 64px;
  --prog-h: 6px;
  --step-dot: 28px;
  /* 骨架屏底色：与 --surface-2 同值。这里写字面量而不是 var(--surface-2, var(--card))，
     因为 admin.html 的 --card 是半透明色，链式回退在后台会取到错的值。 */
  --skeleton: #18202F;
  --elev-selected: 0 0 0 2px var(--accent);
  --elev-bar: 0 -8px 24px rgba(0, 0, 0, .45);
}

/* ===== 4.0.1 步骤条 ===== */
.mo-steps{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;font-size:var(--text-sm,13px)}
.mo-step{display:inline-flex;align-items:center;gap:8px;color:var(--ink3,var(--meta))}
.mo-step .dot{width:var(--step-dot);height:var(--step-dot);border-radius:var(--radius-pill,9999px);display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-xs,12px);font-weight:700;box-shadow:var(--elev-ring,0 0 0 1px var(--bd));flex:none}
.mo-step.on{color:var(--ink)}
.mo-step.on .dot{background:var(--accent);color:var(--on-accent);box-shadow:none}
.mo-step.done{color:var(--ink2,var(--muted));cursor:pointer}
.mo-step.done .dot{background:var(--accent-strong);color:var(--on-accent);box-shadow:none}
.mo-step.todo{pointer-events:none}
.mo-step + .mo-step::before{content:"";width:18px;height:1px;background:var(--bd);margin-right:2px}
@media(max-width:640px){.mo-steps .mo-step:not(.on){display:none}.mo-steps .mo-step.on::after{content:"（第 " attr(data-i) "/4 步）";font-size:var(--text-xs,12px);color:var(--ink3,var(--meta))}}
/* 三步流程（二创）覆盖上面的「/4 步」——否则窄屏会把 3 步说成 4 步 */
@media(max-width:640px){.mo-steps.is3 .mo-step.on::after{content:"（第 " attr(data-i) "/3 步）"}}
/* 方向图标只有一个 arrow-right 时，左右各用一次（水平镜像），不引入新图标、不拿字符兜底 */
.ti.flip{transform:scaleX(-1)}

/* ===== 4.0.2 底部常驻预估条（D1）===== */
.mo-bar{position:sticky;bottom:0;z-index:var(--z-sticky,1100);display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--bg1,var(--surface));border:1px solid var(--bd);border-radius:var(--radius-lg,14px);
  padding:12px 16px;margin-top:16px;box-shadow:var(--elev-bar);font-size:var(--text-sm,13px);color:var(--ink2,var(--muted))}
.mo-bar-sum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.mo-bar-sum b{color:var(--ink);font-variant-numeric:tabular-nums}
.mo-bar-cost b{color:var(--gold)}
.mo-bar-bal b{color:var(--gold)}
.mo-bar-act{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.mo-bar-note{flex:1 0 100%;font-size:var(--text-xs,12px);color:var(--ink3,var(--meta));line-height:1.7}
.mo-bar.is-low{background:var(--danger-dim);border-color:var(--danger)}
.mo-bar.is-low .mo-bar-cost b,.mo-bar.is-low .mo-bar-bal b{color:var(--danger)}
.mo-bar-low{color:var(--danger);font-weight:700}
@media(max-width:640px){.mo-bar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}.mo-bar-act{margin-left:0;width:100%}.mo-bar-act .btn{flex:1}}

/* ===== 4.2 大纲：概览条 / 工具条 / 章节清单 ===== */
.ol-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--accent-dim);border:1px solid var(--bd);
  border-radius:var(--radius-md,10px);padding:10px 14px;font-size:var(--text-sm,13px);color:var(--ink2,var(--muted))}
.ol-summary b{color:var(--ink)}
.ol-state{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs,12px);color:var(--ink3,var(--meta))}
.ol-prog{height:var(--prog-h);background:var(--bd);border-radius:var(--radius-pill,9999px);overflow:hidden;margin:8px 0 12px}
.ol-prog i{display:block;height:100%;background:var(--accent);transition:width var(--motion-slow,300ms) var(--ease-standard,linear)}

.ch-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 10px}
.ch-search{display:inline-flex;align-items:center;gap:7px;background:var(--bg1,var(--surface));border:1px solid var(--bd);
  border-radius:var(--radius-md,10px);padding:0 12px;min-height:36px;color:var(--ink3,var(--meta))}
.ch-search input{background:transparent;border:none;outline:none;color:var(--ink);font-size:var(--text-sm,13px);width:190px;font-family:inherit}
.mo-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:var(--radius-sm,6px);
  border:1px solid var(--bd);background:var(--bg1,var(--surface));color:var(--ink2,var(--muted));
  font-size:var(--text-xs,12px);cursor:pointer;font-family:inherit;
  transition:background-color var(--motion-fast,150ms) var(--ease-standard,linear),color var(--motion-fast,150ms) var(--ease-standard,linear)}
.mo-chip:hover{background:var(--card);color:var(--ink)}
.mo-chip.xs{min-height:28px;padding:0 9px;font-size:11.5px}
.ch-scope{flex:1 0 100%;font-size:var(--text-xs,12px);color:var(--ink3,var(--meta));
  border-left:2px solid var(--bd);padding-left:10px;line-height:1.7}
.ch-scope b{color:var(--ink2,var(--muted))}
.ch-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg1,var(--surface));
  border:1px solid var(--bd);border-radius:var(--radius-md,10px);padding:10px 12px;margin-bottom:10px;font-size:var(--text-sm,13px);color:var(--ink2,var(--muted))}
.ch-range input{width:96px;background:var(--bg0,var(--bg));border:1px solid var(--bd);border-radius:var(--radius-sm,6px);
  padding:7px 10px;color:var(--ink);font-size:var(--text-sm,13px);outline:none;font-family:inherit}

.ch-list{max-height:var(--list-max-h);overflow-y:auto;border:1px solid var(--bd);border-radius:var(--radius-md,10px);background:var(--bg1,var(--surface))}
.ch-ghead{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;background:var(--card);
  padding:8px 12px;font-size:var(--text-sm,13px);cursor:pointer;min-height:var(--touch-min);border-bottom:1px solid var(--bd)}
.ch-ghead b{color:var(--ink)}
.ch-caret{transition:transform var(--motion-fast,150ms) var(--ease-standard,linear);color:var(--ink3,var(--meta))}
.ch-ghead.is-open .ch-caret{transform:rotate(180deg)}
.ch-gmeta{font-size:var(--text-xs,12px);color:var(--ink3,var(--meta));font-variant-numeric:tabular-nums}
.ch-gact{margin-left:auto;display:flex;gap:6px}
.ch-row{display:flex;align-items:center;gap:12px;min-height:var(--touch-min);padding:0 12px;border-bottom:1px solid var(--border-soft,rgba(148,163,184,.08));
  cursor:pointer;font-size:var(--text-sm,13px);color:var(--ink2,var(--muted));
  transition:background-color var(--motion-fast,150ms) var(--ease-standard,linear)}
.ch-row:hover{background:var(--card)}
.ch-row.on{background:var(--accent-dim)}
.ch-row.on .ch-tt,.ch-row.on .ch-idx{color:var(--ink)}
.ch-row input[type=checkbox]{width:var(--check-size);height:var(--check-size);flex:none;accent-color:var(--accent);cursor:pointer}
.ch-idx{font-family:var(--font-mono,monospace);color:var(--ink3,var(--meta));flex:none;font-variant-numeric:tabular-nums;min-width:3ch}
.ch-tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-ct,.ch-sum{color:var(--ink3,var(--meta));flex:none;font-size:var(--text-xs,12px);font-variant-numeric:tabular-nums}
.ch-sum{max-width:38ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-row.skip .ch-tt{color:var(--ink3,var(--meta))}
.ch-tag{flex:none;font-size:11px;color:var(--ink3,var(--meta));background:var(--card);border:1px solid var(--bd);
  border-radius:var(--radius-sm,6px);padding:2px 7px}
@media(max-width:640px){.ch-row{flex-wrap:wrap;padding:8px 12px;row-gap:4px}.ch-tt{flex:1 0 60%}.ch-sum{flex:1 0 100%;max-width:none;white-space:normal}}

/* ===== 4.2.5 主线 / 人物 ===== */
.ol-sec{margin-top:18px}
.ol-sec-t{display:flex;align-items:center;gap:8px;font-size:var(--text-base,14px);font-weight:700;color:var(--ink);margin-bottom:10px}
.ol-main{margin:0;padding-left:22px;color:var(--ink2,var(--muted));font-size:var(--text-sm,13px);line-height:1.9}
.ol-chars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:1023px){.ol-chars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ol-chars{grid-template-columns:1fr}}
.ol-char{border:1px solid var(--bd);border-radius:var(--radius-md,10px);padding:10px 12px;background:var(--bg1,var(--surface))}
.ol-char b{display:block;color:var(--ink);font-size:var(--text-sm,13px)}
.ol-char span{font-size:var(--text-xs,12px);color:var(--ink3,var(--meta))}

/* ===== 4.3 走向方案卡（同维度对比，D2）===== */
.dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
@media(max-width:1023px){.dir-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.dir-grid{grid-template-columns:1fr}}
.dir-card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--bg1,var(--surface));
  border:1px solid var(--bd);border-radius:var(--radius-lg,14px);padding:16px;cursor:pointer;
  transition:background-color var(--motion-fast,150ms) var(--ease-standard,linear),box-shadow var(--motion-fast,150ms) var(--ease-standard,linear)}
.dir-card:hover{background:var(--card)}
.dir-card.on{background:var(--accent-dim);box-shadow:var(--elev-selected)}
.dir-card input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.dir-hd{display:flex;align-items:center;gap:9px;font-size:var(--text-base,14px);font-weight:700;color:var(--ink2,var(--muted))}
.dir-card.on .dir-hd{color:var(--ink)}
.dir-hd .ti{color:var(--ink3,var(--meta))}
.dir-card.on .dir-hd .ti{color:var(--accent)}
.dir-sum{margin:0;font-size:var(--text-sm,13px);color:var(--ink2,var(--muted));line-height:1.8}
.dir-lb{display:flex;align-items:center;gap:6px;font-size:var(--text-xs,12px);font-weight:700;color:var(--ink2,var(--muted));margin-bottom:5px}
.dir-chg ul,.dir-keep ul{margin:0;padding-left:20px;font-size:var(--text-xs,12px);color:var(--ink2,var(--muted));line-height:1.85}
.dir-chg,.dir-keep{border-top:1px solid var(--bd);padding-top:9px}
.dir-scope{margin-top:auto;font-size:var(--text-xs,12px);color:var(--ink3,var(--meta))}
.dir-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.dir-rehint{font-size:var(--text-xs,12px);color:var(--ink3,var(--meta))}
.dir-hint{font-size:var(--text-xs,12px);color:var(--ink3,var(--meta));margin-top:6px;line-height:1.7}

/* ===== 4.5 / 4.6 二创：素材卡 / 形态卡 ===== */
.ff-paths,.ff-forms{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.ff-forms{grid-template-columns:repeat(2,1fr)}
@media(max-width:1023px){.ff-paths{grid-template-columns:repeat(2,1fr)}.ff-forms{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ff-paths,.ff-forms{grid-template-columns:1fr}}
.ff-path,.ff-form{position:relative;display:flex;flex-direction:column;gap:9px;background:var(--bg1,var(--surface));
  border:1px solid var(--bd);border-radius:var(--radius-lg,14px);padding:16px;cursor:pointer;
  transition:background-color var(--motion-fast,150ms) var(--ease-standard,linear),box-shadow var(--motion-fast,150ms) var(--ease-standard,linear)}
.ff-path:hover,.ff-form:hover{background:var(--card)}
.ff-path.on,.ff-form.on{background:var(--accent-dim);box-shadow:var(--elev-selected)}
.ff-path input[type=radio],.ff-form input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.ff-p-hd,.ff-f-hd{display:flex;align-items:center;gap:10px;font-size:var(--text-base,14px);font-weight:700;color:var(--ink2,var(--muted))}
.ff-path.on .ff-p-hd,.ff-form.on .ff-f-hd{color:var(--ink)}
.ff-p-row{display:flex;gap:10px;font-size:var(--text-xs,12px);line-height:1.8}
.ff-p-k{flex:none;width:5.5em;color:var(--ink3,var(--meta))}
.ff-p-v{flex:1;min-width:0;color:var(--ink2,var(--muted))}
.ff-sample{background:var(--card);border:1px solid var(--bd);border-radius:var(--radius-md,10px);
  padding:9px 11px;font-size:var(--text-sm,13px);color:var(--ink2,var(--muted));white-space:pre-wrap;line-height:1.75}
.ff-p-badge{align-self:flex-start;font-size:var(--text-xs,12px);border-radius:var(--radius-sm,6px);padding:3px 9px;margin-top:auto}
.ff-p-badge.ok{background:var(--success-dim);color:var(--success)}
.ff-p-badge.warn{background:var(--warn-dim);color:var(--warn)}
/* 原生 radio 被视觉隐藏后，键盘焦点必须有可见焦点环（DESIGN §6.1） */
.ff-path:focus-within,.ff-form:focus-within,.dir-card:focus-within,.ff-pd:focus-within{
  box-shadow:var(--elev-selected),var(--focus-ring,0 0 0 3px var(--accent-dim))}
/* 不可用路径（G1 未开放）：灰掉但**不是按钮** —— 规则同 .btn:disabled，且带原因说明 */
.ff-path.off{cursor:not-allowed;opacity:.62;background:var(--bg0,var(--bg));border-style:dashed}
.ff-path.off:hover{background:var(--bg0,var(--bg))}
.ff-off-note{display:flex;align-items:flex-start;gap:7px;font-size:var(--text-xs,12px);color:var(--warn);background:var(--warn-dim);
  border-radius:var(--radius-sm,6px);padding:7px 9px;line-height:1.75}

/* 书库选择区 */
.ff-pd-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 10px}
.ff-pd-bar input{flex:1;min-width:180px;background:var(--bg1,var(--surface));border:1px solid var(--bd);border-radius:var(--radius-md,10px);
  padding:9px 12px;color:var(--ink);font-size:var(--text-sm,13px);outline:none;font-family:inherit}
.ff-pd-total{font-size:var(--text-xs,12px);color:var(--ink3,var(--meta))}
.ff-pd-list{max-height:var(--list-max-h);overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.ff-pd{position:relative;display:block;border:1px solid var(--bd);border-radius:var(--radius-md,10px);padding:12px 14px;
  background:var(--bg1,var(--surface));cursor:pointer;transition:background-color var(--motion-fast,150ms) var(--ease-standard,linear)}
.ff-pd:hover{background:var(--card)}
.ff-pd.on{background:var(--accent-dim);box-shadow:var(--elev-selected)}
.ff-pd input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.ff-pd b{font-size:var(--text-base,14px);color:var(--ink)}
.ff-pd-meta{font-size:var(--text-xs,12px);color:var(--ink3,var(--meta));margin-left:8px}
.ff-pd-brief{margin:6px 0 0;font-size:var(--text-xs,12px);color:var(--ink2,var(--muted))}
.ff-pd-note{display:flex;align-items:flex-start;gap:7px;margin:8px 0 0;font-size:var(--text-xs,12px);color:var(--ink3,var(--meta));line-height:1.8}
.ff-pd.miss{opacity:.62;border-style:dashed}
.ff-pd.miss .ff-pd-lock{color:var(--danger);font-size:var(--text-xs,12px);display:flex;align-items:center;gap:6px;margin-top:7px}

/* 素材页的梗概输入区 / 书库选择区（挂在卡片组下方） */
.ff-synbox{margin-top:14px}

/* 参数区 */
.ff-params{display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px;margin-top:16px}
@media(max-width:720px){.ff-params{grid-template-columns:1fr}}
.ff-params .full{grid-column:1 / -1}

/* ===== 4.7 二创进度 / 被拦 / 留痕 ===== */
.ff-blocked{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ff-blocked-row{display:flex;align-items:flex-start;gap:8px;font-size:var(--text-xs,12px);line-height:1.8;
  background:var(--warn-dim);border-radius:var(--radius-sm,6px);padding:9px 11px;color:var(--warn)}
.ff-run .batch-prog{margin:14px 0}
.trace-line{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;font-size:var(--text-xs,12px);color:var(--ink3,var(--meta));
  border:1px solid var(--bd);border-radius:var(--radius-md,10px);padding:9px 12px;margin-bottom:12px;line-height:1.8}
.trace-line b{color:var(--ink2,var(--muted))}
.trace-card{border:1px solid var(--bd);border-radius:var(--radius-md,10px);padding:12px 14px;margin-top:12px;background:var(--bg1,var(--surface))}
.trace-card .tr-t{display:flex;align-items:center;gap:8px;font-size:var(--text-sm,13px);font-weight:700;color:var(--ink);margin-bottom:9px}
.trace-row{display:flex;gap:10px;font-size:var(--text-xs,12px);line-height:1.9}
.trace-row span:first-child{flex:none;width:5em;color:var(--ink3,var(--meta))}
.trace-row span:last-child{flex:1;min-width:0;color:var(--ink2,var(--muted));word-break:break-all}

/* ===== 通用：空态 / 骨架 / 提示条 ===== */
.mo-empty{display:flex;flex-direction:column;align-items:center;gap:9px;padding:26px 16px;text-align:center;
  color:var(--ink3,var(--meta));font-size:var(--text-sm,13px)}
.mo-note{display:flex;align-items:flex-start;gap:8px;font-size:var(--text-xs,12px);line-height:1.8;
  background:var(--info-dim);border-radius:var(--radius-sm,6px);padding:9px 11px;color:var(--info)}
.mo-note.warn{background:var(--warn-dim);color:var(--warn)}
.mo-note.bad{background:var(--danger-dim);color:var(--danger)}
.mo-skel{background:var(--skeleton);border-radius:var(--radius-sm,6px);height:14px}
.mo-skel.t{height:18px;width:42%}
.mo-skel.r{height:var(--touch-min);margin-bottom:8px}
.ff-list{display:flex;flex-direction:column;gap:10px}
.ff-task{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--bd);border-radius:var(--radius-md,10px);
  padding:11px 13px;background:var(--bg1,var(--surface))}
.ff-task .t{font-size:var(--text-sm,13px);color:var(--ink);font-weight:700}
.ff-task .m{font-size:var(--text-xs,12px);color:var(--ink3,var(--meta));margin-top:3px}

/* ===== 后台：二创配置 ===== */
.ff-pd-form{margin-top:12px}
tr.miss td{background:var(--danger-dim)}
.ff-miss{display:inline-flex;align-items:center;gap:5px;color:var(--danger);font-size:var(--text-xs,12px)}
.ff-ok{display:inline-flex;align-items:center;gap:5px;color:var(--success);font-size:var(--text-xs,12px)}