/* ══════════════════════════════════════════════════════════════════ settings.css —— 设置站（顶栏第 8 站 · 由假壳转真） 设计口径：output/ningge-kb-plan/proto/P0-3-电脑端-AI模型设置.html（2 帧） 46 项三组 ← C2-AI模型与训练学习技术设计.md §3 数据口径：backend/app/routes/settings.py（2 端点） 结构范式：app/css/kb.css / app/css/train.css（站头通栏 + `.set-body` 三栏 + 窄窗两级） 纪律： 1. 本文件**不得出现字面色值**，一律 var() 令牌（引前已机械核过，命令见交付回报）。 2. 类名一律 `set-` 前缀 + 内容层 `#setbody`。引前已核： `.set-|.setmode|#setbody` 在本仓 **0 命中**（`st-` 前缀**已**被 shell.css 的 `.st-chip` 占用 ⇒ 弃用 `st-`，改 `set-`。R58 同族：命名撞车必须提前查，不能事后救）。 3. ★ **三档权限必须视觉可分等级**（稿上是设计意图，不是装饰）： A = 白底细边（最轻）｜B = 灰底 + 深灰左条（中等）｜C = 白底 + 粗红左条 + 红虚线外框 + 锁（最硬） 这四条**翻译成令牌级形态**（border 粗细 / 左条 / 底色 / 外框线型 / 锁字符）， 不写字面色值 —— 四主题共用结构，差异只在令牌值。 ══════════════════════════════════════════════════════════════════ */ .set{display:none;flex:1 1 auto;min-width:0;min-height:0;flex-direction:column; background:var(--e2)} .app.setmode > .list, .app.setmode > .chat, .app.setmode > .side, .app.setmode > .spl{display:none} .app.setmode > #setbody{display:flex} /* 行内码：md() 把后端正文里的反引号片段包成 （表名 / 字段名） */ .set code{font-family:var(--font-num);font-size:var(--fs-micro);padding:0 4px; border-radius:var(--r-xs);background:var(--e3);color:var(--t1)} /* ── 站头（44px）──────────────────────────────────────────────────── */ .set-hd{display:flex;align-items:center;gap:9px;flex:none;height:44px;padding:0 14px; border-bottom:1px solid var(--line);background:var(--e1)} .set-ttl{font-size:var(--fs-small);color:var(--t1);font-weight:500;white-space:nowrap} .set-cur{font-size:var(--fs-caption);color:var(--accent-text);white-space:nowrap} .set-sp{flex:1 1 auto;min-width:0} .set-read{font-size:var(--fs-micro);color:var(--t3);white-space:nowrap; font-family:var(--font-num)} .set-read b{color:var(--t2);font-weight:500} /* 「算不出来」的证词小字：与真数字**必须可辨**（三态不许合并）—— 所以它带色（琥珀）+ 加表名，而不是一个光秃秃的 `—`。 */ .set-read i{font-style:normal;color:var(--amber);margin-left:3px} /* 小标签：**「待拍板」不弱化** —— 弱化会被读成"次要"，而它的语义是不能当真。 */ .set-tag{display:inline-flex;align-items:center;flex:none;white-space:nowrap; font-size:var(--fs-micro);line-height:1.5;padding:1px 7px;border-radius:var(--r-xs); border:1px solid var(--line2);background:var(--e3);color:var(--t2)} .set-tag.set-warn{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)} /* ── 三栏容器 ─────────────────────────────────────────────────────── */ .set-body{flex:1 1 auto;min-height:0;display:flex} .set-mid{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;padding:12px 16px 22px} /* ── 左导航轨（240px）────────────────────────────────────────────── */ .set-rail{flex:none;width:240px;min-height:0;overflow:auto;padding:8px 0 14px; border-right:1px solid var(--line);background:var(--e1)} .set-rsec{font-size:var(--fs-micro);color:var(--t3);padding:9px 14px 4px;white-space:nowrap} .set-rsec h4{margin:0;font-size:var(--fs-micro);font-weight:400;color:var(--t3)} .set-ritem{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap; padding:6px 14px;cursor:pointer;user-select:none;transition:background var(--dur-1)} .set-ritem:hover{background:var(--veil)} .set-ritem.on{background:var(--accent-wash)} .set-ritem > span{font-size:var(--fs-small);color:var(--t2)} .set-ritem.on > span{color:var(--accent-text)} .set-ritem > i{font-style:normal;font-family:var(--font-num);font-size:var(--fs-micro); color:var(--t3);margin-left:auto} .set-ritem > em{flex:1 1 100%;font-style:normal;font-size:var(--fs-micro); color:var(--t3);line-height:1.45} .set-rfoot{margin:10px 14px 0;padding-top:9px;border-top:1px solid var(--line); font-size:var(--fs-micro);color:var(--t3);line-height:1.65; display:flex;flex-direction:column;gap:2px} .set-rfoot b{color:var(--t2);font-weight:400} .set-rfoot u{text-decoration:none;color:var(--t3)} /* ── 端点未取到：显式说出，不静默 ─────────────────────────────────── */ .set-err{display:flex;flex-wrap:wrap;gap:6px;padding:9px 12px;margin-bottom:10px; border:1px solid var(--danger-line);border-radius:var(--r-md);background:var(--danger-bg); font-size:var(--fs-caption);color:var(--danger-text);line-height:1.6} .set-err b{font-family:var(--font-num);color:var(--danger-text)} .set-empty{padding:16px 14px;border:1px dashed var(--line2);border-radius:var(--r-md); font-size:var(--fs-small);color:var(--t3);line-height:1.7} /* ── 卡片 ─────────────────────────────────────────────────────────── */ .set-card{background:var(--e1);border:1px solid var(--line);border-radius:var(--r-md); padding:12px 14px;margin-bottom:12px} .set-chd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px} .set-chd h3{margin:0;font-size:var(--fs-body);color:var(--t1);font-weight:500} .set-cnt{font-size:var(--fs-micro);color:var(--t3);font-family:var(--font-num)} /* 「算不出来 ≠ 等于 0」的唯一渲染落点（与 .tr-blocked 同构） */ .set-num{font-family:var(--font-num);font-size:var(--fs-body);color:var(--t1)} .set-blocked{display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap; padding:5px 10px;border:1px dashed var(--amber-line);border-radius:var(--r-sm); background:var(--amber-bg);font-size:var(--fs-micro);color:var(--t2)} .set-blocked b{font-family:var(--font-num);color:var(--amber);font-weight:500} .set-blocked i{font-style:normal;color:var(--t2)} .set-blocked u{text-decoration:none;color:var(--t3);font-family:var(--font-num)} /* ══ 组块：三档权限的**形态分级**（见文件头纪律 3）═════════════════ */ .set-grp{border:1px solid var(--line);border-left-width:3px; border-radius:var(--r-md);background:var(--e1);margin-bottom:14px;overflow:hidden} .set-ghd{display:flex;align-items:center;gap:9px;flex-wrap:wrap; padding:10px 13px;border-bottom:1px solid var(--line);background:var(--e2)} .set-gk{flex:none;min-width:22px;height:20px;padding:0 7px;display:inline-flex; align-items:center;justify-content:center;border-radius:var(--r-xs); font-family:var(--font-num);font-size:var(--fs-micro);font-weight:500} .set-gl{font-size:var(--fs-body);color:var(--t1);font-weight:500} .set-gn{font-family:var(--font-num);font-size:var(--fs-micro);color:var(--t3)} .set-gs{font-size:var(--fs-micro);color:var(--t3);margin-left:auto} .set-gmeta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px; padding:9px 13px;border-bottom:1px solid var(--line); font-size:var(--fs-micro);line-height:1.65} .set-mk{color:var(--t3);font-family:var(--font-num);white-space:nowrap} .set-mv{color:var(--t2)} /* A 组（最轻）：白底细边 + 中性左条 */ .set-grp .set-gk{background:var(--accent-wash);color:var(--accent-text)} /* B 组（中等）：灰底 ＋ 中性深灰左条。**不用强调色** —— 强调色是 A 的标记， 两档共用一种色会让"A 与 B 的界线"在视觉上消失。 */ .set-grp-b{background:var(--e2)} .set-grp-b .set-ghd{background:var(--e3)} .set-grp-b .set-gk{background:var(--e4);color:var(--t2)} /* C 组（最硬）：白底 ＋ 粗红左条 ＋ 红虚线外框 ＋ 锁。 ★ 这里 `--danger` 是**语义正确**的用法（本项目 red = 红线/合规风险）， 而 C 组的定义就是「一旦开放即成合规漏洞或红线突破口」⇒ 不是装饰性用红。 */ .set-grp-c{border-style:dashed;border-color:var(--danger-line); border-left:4px solid var(--danger);background:var(--e1)} .set-grp-c .set-ghd{background:var(--danger-bg)} .set-grp-c .set-gk{background:var(--danger-bg);color:var(--danger-text); border:1px solid var(--danger-line)} .set-grp-c .set-gl::before{content:'🔒 '} .set-grp-c .set-gv-col{color:var(--danger-text)} /* ── 46 项的表（**四列宽固定**：跟随内容换行会让 46 项读不成表）──────── ★ 列宽是 C2 §3 给定的（`/settings/items` 的 `layout.grid_ab`），非我自定。 容器的 `min-width` + `overflow-x:auto` 是**必须**的：不设的话窄窗下 200px 的约束列会把正文压成一条竖线 —— 那正是本项目最忌讳的**静默剪裁**。 宁可出一条横向滚动条（用户看得见"右边还有"），也不许内容无声消失。 */ .set-tblwrap{overflow-x:auto} .set-tbl{min-width:960px} .set-tbl-c{min-width:1080px} .set-th, .set-tr{display:grid;align-items:start;gap:0 10px;padding:7px 13px; grid-template-columns:46px minmax(0,1fr) 200px 96px 118px 34px} .set-th.set-7c, .set-tr.set-7c{grid-template-columns:46px minmax(0,1fr) 200px 128px 118px 34px 74px} .set-th{background:var(--e2);border-bottom:1px solid var(--line2); font-size:var(--fs-micro);color:var(--t3);white-space:nowrap} .set-tr{border-bottom:1px solid var(--line);font-size:var(--fs-small)} .set-tr:last-child{border-bottom:0} .set-tr:hover{background:var(--veil)} .set-tr.set-has{border-bottom:0} .set-no{font-family:var(--font-num);font-size:var(--fs-micro);color:var(--t3); padding-top:1px} .set-nm{color:var(--t1);line-height:1.6} .set-nm > i{display:inline-block;margin-left:6px;font-style:normal; font-family:var(--font-num);font-size:var(--fs-micro); padding:0 5px;border-radius:var(--r-xs);background:var(--e3);color:var(--t3)} .set-cs{font-size:var(--fs-micro);color:var(--t2);line-height:1.65} .set-cs > .set-dv{display:block;margin-bottom:3px;font-weight:500;color:var(--t1)} .set-who, .set-eff{font-size:var(--fs-micro);color:var(--t2);line-height:1.6} .set-eff{font-family:var(--font-num)} .set-aud{font-family:var(--font-num);font-size:var(--fs-micro); color:var(--accent-text);text-align:center} .set-xp{align-self:start;cursor:pointer;white-space:nowrap; font-size:var(--fs-micro);font-family:var(--font-ui); padding:2px 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm); background:var(--e1);color:var(--t2)} .set-xp:hover{background:var(--face-hover);color:var(--t1);border-color:var(--accent-line)} /* C 组展开行：「为什么不能开放」= 这一页最贵的内容（照抄上游原文，不摘要） */ .set-rz{display:block;padding:10px 13px 11px 59px; border-bottom:1px solid var(--line);background:var(--danger-bg)} .set-rz .set-rk{display:inline-block;margin-bottom:5px; font-size:var(--fs-micro);color:var(--danger-text);font-family:var(--font-num)} .set-rz .set-rv{font-size:var(--fs-small);color:var(--t1);line-height:1.8} .set-rz .set-rv b{color:var(--t1)} /* A/B 组的分组犹豫项（A-4 / A-5）：**单独一行、不并入约束列** —— 稿上就标着 ⚠️ 与裁定理由，抹掉它等于把一次真实的取舍伪装成共识。 */ .set-hes{display:block;padding:9px 13px 11px 59px; border-bottom:1px solid var(--line);background:var(--amber-bg)} .set-hes .set-hk{display:inline-block;margin-bottom:5px; font-size:var(--fs-micro);color:var(--amber);font-family:var(--font-num)} .set-hb{font-size:var(--fs-micro);color:var(--t2);line-height:1.75;margin-bottom:3px} .set-hb > b{display:inline-block;min-width:62px;color:var(--t2)} /* 列宽出处（页脚一行）：说明"这个排版不是我编的" */ .set-layout{display:flex;flex-wrap:wrap;gap:3px 11px;padding:9px 13px; border:1px solid var(--line);border-radius:var(--r-md);background:var(--e1); font-size:var(--fs-micro);color:var(--t3);line-height:1.7} .set-layout > b{color:var(--t2);font-weight:400;font-family:var(--font-num)} .set-layout > u{flex:1 1 100%;text-decoration:none;color:var(--t3)} /* ── 帧 2 之一：B 组变更流程 ─────────────────────────────────────── */ .set-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:8px;margin-bottom:11px} .set-step{display:flex;align-items:flex-start;gap:8px;padding:9px 11px; border:1px solid var(--line);border-radius:var(--r-sm);background:var(--e2); font-size:var(--fs-small);color:var(--t2);line-height:1.6} .set-si{flex:none;width:19px;height:19px;display:inline-flex;align-items:center; justify-content:center;border-radius:var(--r-full); background:var(--accent-wash);color:var(--accent-text); font-family:var(--font-num);font-size:var(--fs-micro);font-weight:500} .set-curstep{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:11px; font-size:var(--fs-caption);color:var(--t3)} /* 「不是把生效按钮变灰，而是把流程顺序前置」—— 所以这里用**虚线不可用态** （`set-nib`）而不是一句"尚未开放"：形态本身在说"顺序还没到"。 */ .set-nib{display:flex;flex-direction:column;gap:4px;padding:9px 12px; border:1px dashed var(--accent-line);border-radius:var(--r-sm);background:var(--accent-wash); font-size:var(--fs-small);color:var(--t1);line-height:1.72} .set-nib > b{font-weight:500} .set-nib > u{text-decoration:none;font-size:var(--fs-micro);color:var(--t2)} .set-blk{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)} .set-blk h5{margin:0 0 8px;font-size:var(--fs-caption);color:var(--t2);font-weight:500} .set-gate{display:flex;flex-direction:column;gap:3px;padding:9px 12px; border-left:2px solid var(--danger);background:var(--danger-bg);border-radius:var(--r-sm); font-size:var(--fs-small);color:var(--t1);line-height:1.7} .set-gate > i{font-style:normal;font-size:var(--fs-micro);color:var(--danger-text); font-family:var(--font-num)} .set-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:8px 11px;border-radius:var(--r-sm);background:var(--e2); font-size:var(--fs-small);color:var(--t2);line-height:1.7} .set-inline > i{font-style:normal;font-size:var(--fs-micro);color:var(--t3); font-family:var(--font-num);margin-left:auto} /* ── 帧 2 之二：版本链 / schema / C 组原因全量 ────────────────────── */ .set-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px} .set-tb{font-family:var(--font-num);font-size:var(--fs-micro);padding:2px 9px; border:1px solid var(--line2);border-radius:var(--r-xs);background:var(--e3); color:var(--t2);display:inline-flex;align-items:center;gap:6px} /* 表存在性的三值三形（「三态不许合并」的样式落点）。 ⚠ `未验` 刻意**不用**警示色：它不是坏消息，是"还不知道"——把它画成红等于 把"没查"说成"查出来没有"（本仓 R72 那类假读数的入口）。 */ .set-tb em{font-style:normal;font-family:inherit;font-size:var(--fs-micro); padding:0 5px;border-radius:var(--r-xs);border:1px solid var(--line2);color:var(--t3)} .set-tb-ok em{border-color:var(--violet);color:var(--violet)} .set-tb-no em{border-color:var(--amber-line);color:var(--amber)} .set-tb-unk em{border-style:dashed;color:var(--t3)} .set-lrs{display:flex;flex-direction:column;gap:9px} .set-lr{padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--danger); border-radius:var(--r-sm);background:var(--e2)} .set-lr > b{display:block;font-size:var(--fs-small);color:var(--t1);font-weight:500; margin-bottom:3px} .set-lr > u{display:block;text-decoration:none;font-size:var(--fs-micro); color:var(--accent-text);font-family:var(--font-num);margin-bottom:5px} .set-lr .set-lv2{font-size:var(--fs-micro);color:var(--t2);line-height:1.78} /* ── 右栏（336px）────────────────────────────────────────────────── */ .set-side{flex:none;width:336px;min-height:0;overflow:auto;padding:12px 16px 22px; border-left:1px solid var(--line);background:var(--e1)} .set-ssec{margin-bottom:15px} .set-ssec h4{margin:0 0 7px;font-size:var(--fs-micro);color:var(--t3);font-weight:400} /* 不变式：**常驻、不可折叠**（稿上它是页头下的固定件）—— 所以给它比其它小节更实的形态（实心左条 + 底），让"它不参与折叠"这件事看得出来。 */ .set-inv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .set-inv li{display:flex;flex-direction:column;gap:3px;padding:9px 11px; border-left:2px solid var(--accent);border-radius:var(--r-sm);background:var(--e2); font-size:var(--fs-small);line-height:1.7} .set-inv li > b{color:var(--t1);font-weight:500} .set-inv li > span{font-size:var(--fs-micro);color:var(--t3);font-family:var(--font-num)} .set-src{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px} .set-src li{display:flex;flex-direction:column;gap:1px;font-size:var(--fs-micro); line-height:1.6;padding-bottom:5px;border-bottom:1px solid var(--line)} .set-src li:last-child{border-bottom:0;padding-bottom:0} .set-src li > b{color:var(--t2);font-weight:500} .set-src li > span{color:var(--t3);font-family:var(--font-num)} .set-note{font-size:var(--fs-micro);color:var(--t3);line-height:1.75;margin:0} .set-note b{color:var(--t2)} .set-pend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .set-pend li{display:flex;flex-direction:column;gap:2px;padding:7px 10px; border:1px solid var(--amber-line);border-radius:var(--r-sm);background:var(--amber-bg); font-size:var(--fs-micro);line-height:1.6} .set-pend li > b{color:var(--t1);font-weight:500} .set-pend li > span{color:var(--t3)} .set-pend li.set-decided{border-color:var(--line);background:var(--e2)} .set-ok, .set-wait{align-self:flex-start;font-size:var(--fs-micro);padding:0 6px; border-radius:var(--r-xs);font-style:normal} .set-ok{background:var(--accent-wash);color:var(--accent-text)} .set-wait{background:var(--amber-bg);color:var(--amber)} /* ── 窄窗两级让位（与 kb.css / train.css 同范式）：只换排布，不减项 ── */ @media (max-width:1180px){ .set-side{width:286px} .set-rail{width:200px} } @media (max-width:980px){ .set-body{flex-direction:column} .set-rail{width:auto;flex:none;display:flex;flex-wrap:wrap;align-items:center; gap:2px 4px;padding:7px 10px;border-right:0; border-bottom:1px solid var(--line);max-height:150px;overflow-y:auto} .set-rsec{width:100%;padding:3px 4px 1px} .set-ritem{padding:5px 9px;border-radius:var(--r-sm)} .set-ritem > em{display:inline;flex:0 0 auto;margin-left:5px} .set-ritem > i{margin-left:4px} .set-rfoot{width:100%;margin:6px 4px 0;flex-direction:row;flex-wrap:wrap;gap:3px 12px} .set-side{width:auto;flex:none;max-height:46%;border-left:0; border-top:1px solid var(--line)} /* 窄窗不再压列宽：横滚条已能兜住 ⇒ 保持 C2 §3 的固定列宽，不自行重排 */ .set-gmeta{grid-template-columns:auto minmax(0,1fr)} .set-rz, .set-hes{padding-left:13px} } /* ══════════════════════════════════════════════════════════════════════ 固定内容维护（2026-10-05 · 设置站第三视图） ⚠ 令牌纪律：本段**不出现任何字面色值**（与本文件其余部分同）—— 四主题共用结构，差异只在 `tokens.css` 的令牌值。 ══════════════════════════════════════════════════════════════════════ */ /* 一行固定内容：三段（标题 / 内容 / 锚键）+ 右侧动作。 ⚠ 「图丢了」用 `danger` 左条 + 微红底 —— 那一格是本视图**最贵的信息** （路径≠内容，坏了就是坏了，不能渲染成普通行）。 */ .fx-tr{display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr) 110px auto; gap:8px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--line); font-size:var(--fs-small);line-height:1.55} .fx-tr:last-child{border-bottom:0} .fx-tr.off{opacity:.5} .fx-tr.lost{box-shadow:inset 3px 0 0 var(--danger);background:var(--danger-bg)} .fx-tt{font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fx-tx{color:var(--t2);word-break:break-word} .fx-pt{color:var(--t2);font-family:var(--font-num);font-size:var(--fs-micro)} .fx-pt.bad{color:var(--danger-text);font-weight:600} .fx-pt i{font-style:normal;color:var(--t3);margin-left:4px} .fx-bk{color:var(--t3);font-family:var(--font-num);font-size:var(--fs-micro); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fx-act{display:flex;gap:5px;justify-content:flex-end} /* 按钮：小、可点面积够（24px 高），primary 才用强调底 —— 一屏里primary 越少越好 */ .fx-b{height:24px;padding:0 9px;border:1px solid var(--line-strong);border-radius:var(--r-xs); background:var(--e2);color:var(--t2);font-family:var(--font-ui);font-size:var(--fs-micro); cursor:pointer;white-space:nowrap} .fx-b:hover{background:var(--face-hover);color:var(--t1)} .fx-b.primary{background:var(--accent);border-color:var(--accent-line);color:var(--on-accent)} /* ⚠★ 2026-10-18 实测修：主按钮原先用 `--accent-text` 当**底色上的文字**， 深色主题下 `--accent:#4E8F72` + `--accent-text:#6FB894` 对比约 1.4:1 ⇒ 按钮是一个**纯色块、字看不见**（截图实测；同款还在 `kb.css::.kb-btn.primary`， 不属本站、未越界改，已登记）。令牌表里本来就有 `--on-accent`（"强调底上的文字"）， 这才是它存在的理由。 */ .fx-b:focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* 表单：标签列定宽（读起来是一张表，不是一堆散落的框） */ .fx-fcard{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line); border-radius:var(--r-sm);background:var(--e1)} .fx-frow{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px; align-items:start;margin-bottom:7px;font-size:var(--fs-small)} .fx-frow > label:first-child{color:var(--t3);font-size:var(--fs-micro);padding-top:4px} .fx-frow > label:not(:first-child){display:inline-flex;align-items:center;gap:4px; color:var(--t2);font-size:var(--fs-small)} .fx-frow input[type=text],.fx-frow input[type=number],.fx-frow textarea,.fx-frow select{ width:100%;padding:4px 7px;border:1px solid var(--line-strong);border-radius:var(--r-xs); background:var(--e2);color:var(--t1);font-family:var(--font-ui);font-size:var(--fs-small); line-height:1.5} .fx-frow textarea{resize:vertical} .fx-frow input:focus,.fx-frow textarea:focus,.fx-frow select:focus{ outline:none;border-color:var(--accent)} /* 提示小字：说明"为什么这样"，不是装饰 */ .fx-hint{color:var(--t3);font-size:var(--fs-micro);grid-column:2;line-height:1.5} /* 「保存成功」不是错 ⇒ 借用 err 条的形但换成中性色（`.ok`） */ .set-err.ok{border-color:var(--line-strong);background:var(--e2);color:var(--t2)} /* ══════════════════════════════════════════════════════════════════════ 固定内容视图 · 第二轮（2026-10-05 · 出图后改） ★ 依据 = 真截图 `out/fixed-before.png` / `fixed-before-form.png`， 不是"读代码觉得该这样"。三个改动的共同目标： **运营只填「发到哪 / 类型 / 标题 / 内容」四件事，其余不落到他眼前**。 ══════════════════════════════════════════════════════════════════════ */ /* 分段按钮替代圆点单选（出图：圆点看不出选中没，且未选平台时「新增」照样绿着亮） ⚠ 选中态用**填色块**而不是描边 —— 描边在深色主题下和 hover 态难分。 */ .fx-seg{display:inline-flex;gap:0;border:1px solid var(--line-strong); border-radius:var(--r-xs);overflow:hidden} .fx-segb{height:26px;padding:0 14px;border:0;background:var(--e2);color:var(--t2); font-family:var(--font-ui);font-size:var(--fs-small);cursor:pointer} .fx-segb + .fx-segb{border-left:1px solid var(--line-strong)} .fx-segb:hover{background:var(--face-hover);color:var(--t1)} .fx-segb.on{background:var(--accent);color:var(--on-accent);font-weight:600} .fx-segb:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* 归类徽标：运营按归类想事情（发货/尺码/促销）⇒ 提到标题旁一眼可见。 没有就不占位（不画空框）—— 空框会被读成"归类丢了"。 */ .fx-cat{font-size:var(--fs-micro);color:var(--t3);white-space:nowrap} .fx-cat:empty{display:none} /* ★ disabled 态必须**看得出来**（本仓头号缺陷类是"假按钮"： 按钮亮着、能点、点了没反应）。置灰 + `not-allowed` 光标。 */ .fx-b[disabled]{opacity:.45;cursor:not-allowed} .fx-b[disabled]:hover{background:var(--e2);color:var(--t2)} /* 图下拉给足宽度（原来和文字输入框一样窄，文件名读不全） */ .fx-gal{max-width:420px} /* 表单「用哪张图」行：下拉 + 上传按钮并排（2026-10-05 加） */ .fx-galrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* 「还差：选平台 · 写标题」这类提示：跟在按钮右，比"点了才报错"早一步 */ .fx-hint.bad{color:var(--danger-text)} /* 高级区：锚键/排序收进去。⚠ 用 `
` 原生折叠 ⇒ 不需要事件委托。 */ .fx-adv{margin:2px 0 8px;padding:6px 10px;border:1px solid var(--line); border-radius:var(--r-xs);background:var(--e1)} .fx-adv > summary{cursor:pointer;font-size:var(--fs-micro);color:var(--t3); list-style:none} .fx-adv > summary::-webkit-details-marker{display:none} .fx-adv > summary::before{content:'▸ ';color:var(--t3)} .fx-adv[open] > summary::before{content:'▾ '} .fx-adv[open] > summary{margin-bottom:6px} .fx-adv .fx-frow{margin-bottom:5px} /* 已停用折叠区：默认收起；标题写清"对话里不会出现"（这是运营最需要知道的一句） */ .fx-off{margin-top:8px;padding:8px 12px;border:1px solid var(--line); border-radius:var(--r-sm);background:var(--e1)} .fx-off > summary{cursor:pointer;font-size:var(--fs-small);color:var(--t2)} .fx-off > summary::marker{color:var(--t3)} .fx-off .fx-tbl{margin-top:8px} .fx-off .fx-tr.off{opacity:.55} /* 图库区顶部「上传图片」行（2026-10-05 加）：按钮 + 说明，零字面色值 */ .fx-upbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin:8px 0 2px;padding:8px 10px;border:1px dashed var(--line2); border-radius:var(--r-sm);background:var(--e1)} .fx-upbar .fx-hint{grid-column:auto;color:var(--t3)} /* 停用行标题前的「已停用」小标：光靠半透明在深色主题下看不出为什么灰 */ .fx-tt em{font-style:normal;font-size:var(--fs-micro);color:var(--t3); margin-right:5px;padding:1px 5px;border:1px solid var(--line-strong); border-radius:var(--r-full)} /* 行内布局从四列收成三列（锚键列已删、归类并进内容格） ⚠ 标题列**给弹性下限**（`minmax(96px,150px)`）—— 短标题「尺码表」不该占满， 长标题「抖音-发货时效（含偏远地区）」也不该把内容格挤没。 */ .fx-tr{grid-template-columns:minmax(96px,150px) minmax(0,1fr) auto} /* 归类小字：跟在内容后面，用间隔点分隔（不是徽标框 —— 出图看下来框太重） */ .fx-cat{display:inline;margin-left:8px;font-size:var(--fs-micro);color:var(--t3)} .fx-cat:empty{display:none} /* ★ 触达标记（2026-10-06 · 客服触达域批）。 ⚠ 用**文字小标**而不是图标/色块：本仓明令「符号配图例 = 培训成本 = 不要」， 且截图里那个粉底绿底对比不足、在深色主题下更难读。 ⇒ 一律文字，且 `on` 只用**加粗 + 与主色同色**，不用背景块。 */ .fx-oc{display:inline;margin-left:8px;padding:0 5px;border:1px solid var(--line-strong); border-radius:4px;font-size:var(--fs-micro);color:var(--t3);white-space:nowrap} .fx-oc.on{color:var(--accent);border-color:var(--accent);font-weight:600} /* ★★★ grid 子项**默认 `min-width:auto`**（= 不收缩）⇒ 内容一长就把右侧按钮挤到下一行 （出图实测：按钮整体换行、整行变两倍高）。`.fx-tx` / `.fx-pt` 必须显式 `min-width:0` —— 这是 grid/flex 布局里最常被漏掉的一条。 */ .fx-tx,.fx-pt{min-width:0;overflow-wrap:anywhere} /* 行内三个格子的垂直对齐：内容多行时按钮仍**顶到中间**而不是被推到底 */ .fx-tr > .fx-act{align-self:center;flex-wrap:nowrap} /* 内容格 `display:block` + `min-width:0`。 ⚠⚠ 我第一版把这条注释的**真因写错了**（写成"inline 导致子元素参与 grid"）—— 真因是 `fxRowHtml` 里**三元的闭合标签放错了分支**（`` 在假分支里） ⇒ 图正常时 `1 KB` 成了兄弟节点 ⇒ 4 个子元素 vs 3 列 ⇒ 按钮换行。 ⚠ 留这条 CSS 仍有必要（block + min-width:0 是 grid 子项的**基本卫生**）， 但**别把它当那条 bug 的修法** —— 修法在 `settings.js::fxRowHtml`。 */ .fx-tx,.fx-pt{display:block;min-width:0;overflow-wrap:anywhere} /* ★★ 未覆盖话术（2026-10-08 · 设置站「未覆盖话术」视图）。 每条 = 客户问了啥 + 为什么没答上 + LLM 补话术建议 + 动作。用文字小标、零新字面色值。 */ .un-tbl{display:flex;flex-direction:column} .un-tr{display:flex;flex-direction:column;gap:6px;padding:10px 12px; border-top:1px solid var(--line)} .un-tr:first-child{border-top:0} .un-tr.off{opacity:.55} .un-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .un-plat{flex:none;font-size:var(--fs-micro);padding:0 6px;border:1px solid var(--line-strong); border-radius:4px;color:var(--t2)} .un-st{flex:none;font-size:var(--fs-micro);padding:0 6px;border:1px solid var(--line-strong); border-radius:4px;color:var(--t3)} .un-st.ok{color:var(--accent);border-color:var(--accent);font-weight:600} .un-q{font-weight:600;color:var(--t1);overflow-wrap:anywhere;min-width:0} .un-reason{font-size:var(--fs-micro);color:var(--t3)} .un-sug{background:var(--e1);border:1px dashed var(--line2);border-radius:var(--r-sm); padding:7px 10px;display:flex;flex-direction:column;gap:4px} .un-kw{font-size:var(--fs-micro);color:var(--t2)} .un-kw b{color:var(--accent);font-weight:600} .un-tx{color:var(--t1);overflow-wrap:anywhere;min-width:0;line-height:1.5} .un-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .un-time{font-size:var(--fs-micro);color:var(--t3);font-family:var(--font-num)} .un-act{display:flex;gap:6px;align-items:center} .un-act .fx-b{height:24px} /* ══════════════════════════════════════════════════════════════════════ 素材库维护（2026-10-18 · 设置站「素材库」视图） ★ 与「固定内容」共用外壳（`.set-card` / `.fx-seg` / `.fx-b` / `.fx-upbar`）， 只补三件它没有的：批量录入框、缩略图、一行素材的行盒。 ⚠ 令牌纪律：本段**不出现任何字面色值**（与本文件其余部分同）。 ⚠ 不做固定行高：一行素材的高度由**缩略图 44px** 决定，比 `.fx-tr` 的表格感 更松 —— 这一页每次只干一件事（加一句 / 传一张），不需要塞进一屏表格。 ══════════════════════════════════════════════════════════════════════ */ /* 批量录入：**一个框吃掉整批**（用户要的是"一口气录 20 句"）。 `box-sizing:border-box` 必须显式给 —— 全站没有通配 `*{box-sizing}`， 漏了它 `width:100%` + 左右 padding 会比卡片宽出 18px（横向滚动条就是这么来的）。 */ .mat-bulk{width:100%;box-sizing:border-box;min-height:88px;padding:7px 9px; border:1px solid var(--line-strong);border-radius:var(--r-xs); background:var(--e2);color:var(--t1);font-family:var(--font-ui); font-size:var(--fs-small);line-height:1.65;resize:vertical} .mat-bulk:focus{outline:none;border-color:var(--accent)} .mat-bulk::placeholder{color:var(--t3)} .mat-addrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px} /* `.fx-hint` 原本是表单里 `grid-column:2` 的附属品；这一行不是 grid，必须复位 */ .mat-addrow .fx-hint{grid-column:auto;color:var(--t3)} /* 素材行盒 */ .mat-tbl{border:1px solid var(--line);border-radius:var(--r-sm); background:var(--e1);overflow:hidden} .mat-r{display:flex;align-items:center;gap:10px;padding:7px 10px; border-bottom:1px solid var(--line);font-size:var(--fs-small);line-height:1.55} .mat-r:last-child{border-bottom:0} /* 文字行的"头像位"：没有图，用标题前两字占住同一格 —— 这样三类素材的行首**宽度一致**，切换页签时列表不会左右跳。 */ .mat-ix{flex:none;width:44px;height:44px;display:inline-flex;align-items:center; justify-content:center;border-radius:var(--r-xs);background:var(--e4); color:var(--t3);font-size:var(--fs-micro);line-height:1.1;text-align:center; overflow:hidden} .mat-th{flex:none;width:44px;height:44px;object-fit:cover; border-radius:var(--r-xs);background:var(--e2)} .mat-x{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;color:var(--t1)} /* ⚠★ `