/* ============================================================
   wxshop 设计系统 v2 —— 「去工业化」
   ------------------------------------------------------------
   设计取向（相对 v1 的改动）：
     v1：13px 密排 / 到处 1px 边框 / 10px 小圆角 / 死板侧边栏 / 纯工具感
     v2：更安静的画布 + 悬浮式卡片（用阴影和层次代替边框）、更大的呼吸感、
         克制的单一强调色、状态用柔和色块而非描边、162ms 缓动、
         分组导航 + 命令面板（⌘K 直达任意页签）、明暗双主题。
   ★ 硬约束：**所有 v1 类名一个不少**（18 个页签的 DOM 都是既有类名拼的），
     只重新定义外观，不改语义 —— 这样重构不会漏掉任何一个旧页签。
   ============================================================ */
:root{
  /* 画布与表面 */
  --bg:#f5f6f8;
  --bg-tint:radial-gradient(1200px 600px at 12% -10%,#eef1ff 0%,transparent 60%),
            radial-gradient(900px 500px at 100% 0%,#eafaf4 0%,transparent 55%);
  --surface:#ffffff;
  --surface-2:#f7f8fa;
  --surface-3:#eef0f4;
  /* 文本 */
  --text:#0f1420;
  --text-2:#4a5361;
  --text-3:#8b93a1;
  /* 线与影 */
  --line:rgba(15,20,32,.07);
  --line-2:rgba(15,20,32,.12);
  /* 滚动条 thumb（2026-10-17）：见下面 `*::-webkit-scrollbar-thumb` 那条注释。
     常态 38% ≈ 2.6:1、hover 58% ≈ 4.3:1（原来是 12% = 1.19:1，等于看不见）。 */
  --sb-thumb:rgba(15,20,32,.38);--sb-thumb-h:rgba(15,20,32,.58);
  --shadow-1:0 1px 2px rgba(15,20,32,.04),0 1px 1px rgba(15,20,32,.03);
  --shadow-2:0 1px 2px rgba(15,20,32,.04),0 10px 28px -14px rgba(15,20,32,.16);
  --shadow-3:0 24px 60px -20px rgba(15,20,32,.28);
  /* 强调与语义 */
  --accent:#4f56e0;
  --accent-h:#3f46cf;
  --accent-soft:rgba(79,86,224,.10);
  --accent-line:rgba(79,86,224,.24);
  /* 历史遗留的别名：早先几处样式写的是 --accent-l（没定义 ⇒ 那些 hover 底色一直是空的）。
     补上别名而不是逐个改回去 —— 两边都不会再断。 */
  --accent-l:var(--accent-soft);
  --muted:var(--text-3);
  --green:#0b9e6a;--green-l:rgba(11,158,106,.10);--green-line:rgba(11,158,106,.22);
  --orange:#c97a14;--orange-l:rgba(201,122,20,.10);--orange-line:rgba(201,122,20,.22);
  --red:#d92d20;--red-l:rgba(217,45,32,.09);--red-line:rgba(217,45,32,.2);
  /* 平台标识色（侧栏项上的专属小圆点用；与顶栏平台徽标同一套语义） */
  --pf-wxshop:#0b9e6a;--pf-douyin:#20242b;--pf-pdd:#d92d20;--pf-ks:#c97a14;--pf-xhs:#ff2442;
  /* 形状与节奏 */
  --r-xs:6px;--r-sm:9px;--r:12px;--r-lg:16px;--r-xl:22px;--r-pill:999px;
  --top-h:56px;--side-w:224px;--side-w-min:68px;
  --t:162ms cubic-bezier(.2,.8,.2,1);
  --mono:ui-monospace,"SF Mono",Consolas,"Cascadia Mono",monospace;
}
/* 暗色：跟随系统，但允许手动覆盖（右上角切换，存 localStorage） */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a0c11;--bg-tint:radial-gradient(1100px 560px at 10% -10%,#191d3a 0%,transparent 62%),
               radial-gradient(900px 500px at 100% 0%,#0d2620 0%,transparent 55%);
    --surface:#12141b;--surface-2:#171a22;--surface-3:#1e222c;
    --text:#e9ebf0;--text-2:#a8afbd;--text-3:#727a8a;
    --line:rgba(255,255,255,.075);--line-2:rgba(255,255,255,.14);
    --sb-thumb:rgba(255,255,255,.26);--sb-thumb-h:rgba(255,255,255,.46);
    --shadow-1:0 1px 2px rgba(0,0,0,.3);--shadow-2:0 12px 32px -16px rgba(0,0,0,.7);
    --shadow-3:0 30px 70px -24px rgba(0,0,0,.8);
    --accent:#8189ff;--accent-h:#9aa1ff;--accent-soft:rgba(129,137,255,.14);--accent-line:rgba(129,137,255,.3);
    --green:#3ddc9a;--green-l:rgba(61,220,154,.13);--green-line:rgba(61,220,154,.26);
    --orange:#f0b23f;--orange-l:rgba(240,178,63,.13);--orange-line:rgba(240,178,63,.26);
    --red:#ff6b60;--red-l:rgba(255,107,96,.13);--red-line:rgba(255,107,96,.26);
    /* 暗色下抖店是深色圆点会看不见 ⇒ 提亮成浅灰 */
    --pf-douyin:#c9ced8;--pf-ks:#f0b23f;--pf-xhs:#ff6b83;--pf-pdd:#ff6b60;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0c11;--bg-tint:radial-gradient(1100px 560px at 10% -10%,#191d3a 0%,transparent 62%),
             radial-gradient(900px 500px at 100% 0%,#0d2620 0%,transparent 55%);
  --surface:#12141b;--surface-2:#171a22;--surface-3:#1e222c;
  --text:#e9ebf0;--text-2:#a8afbd;--text-3:#727a8a;
  --line:rgba(255,255,255,.075);--line-2:rgba(255,255,255,.14);
  --sb-thumb:rgba(255,255,255,.26);--sb-thumb-h:rgba(255,255,255,.46);
  --shadow-1:0 1px 2px rgba(0,0,0,.3);--shadow-2:0 12px 32px -16px rgba(0,0,0,.7);
  --shadow-3:0 30px 70px -24px rgba(0,0,0,.8);
  --accent:#8189ff;--accent-h:#9aa1ff;--accent-soft:rgba(129,137,255,.14);--accent-line:rgba(129,137,255,.3);
  --green:#3ddc9a;--green-l:rgba(61,220,154,.13);--green-line:rgba(61,220,154,.26);
  --orange:#f0b23f;--orange-l:rgba(240,178,63,.13);--orange-line:rgba(240,178,63,.26);
  --red:#ff6b60;--red-l:rgba(255,107,96,.13);--red-line:rgba(255,107,96,.26);
  --pf-douyin:#c9ced8;--pf-ks:#f0b23f;--pf-xhs:#ff6b83;--pf-pdd:#ff6b60;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);background:var(--bg);background-image:var(--bg-tint);background-attachment:fixed;
  height:100vh;overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
.hide{display:none!important}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:-.2px}
.mini{color:var(--text-3);font-size:12px}
.ok{color:var(--green)}.warn{color:var(--orange)}.bad{color:var(--red)}
b.ok{color:var(--green)}
::selection{background:var(--accent-soft)}
/* 滚动条：细、随主题。
   ★ 2026-10-17 改（老板报「商品管理页滚动条无法使用」）：
     原来 thumb 是 `border:3px solid transparent` + `background-clip:content-box`，
     槽 10px 但**真正画出来的只有 4px**，颜色还是 12% 透明黑 —— 实测对比度 1.19:1
     （白底合成色 rgb(226,227,229)），在 2560 宽的屏上就是一根几乎看不见的发丝，
     抓不住 ⇒ 观感上等于"滚动条不能用"。
     现在：槽宽**不变还是 10px**（不改布局），thumb 边距 3px→2px ⇒ 可见 **6px**；
     常态色提到 38%（约 2.6:1），hover 到 58%（约 4.3:1）并再收一圈边到 1px（可见 8px）。
     A/B 证据：tmp/_diag-pm-scrollbar-real.png 与 tmp/_diag-pm-sb-after.png；
     完整实测与理由见 docs/fix-商品管理-滚轮与滚动条-20261017.md。 */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:var(--r-pill);border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h);border-width:1px;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}

/* ================= 登录 ================= */
.login-wrap{height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{
  width:392px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:36px 32px 30px;box-shadow:var(--shadow-3);position:relative;overflow:hidden;
}
.login-card::before{content:"";position:absolute;inset:-40% 40% 60% -40%;background:var(--accent-soft);filter:blur(50px);pointer-events:none}
.login-card .brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:20px;letter-spacing:-.4px;color:var(--text);margin-bottom:6px;position:relative}
/* 品牌图标：内联 SVG（sprite 引用），fill 用 currentColor ⇒ 由这里定色
   亮色用图标的原品牌色 #1811f1；暗色下这个蓝几乎融进底色，换同色系亮版保证可见 */
.brand .logo{width:22px;height:22px;flex:0 0 22px;color:#1811f1;display:block}
.login-card .brand .logo{width:28px;height:28px;flex-basis:28px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .logo{color:#9b96ff}}
:root[data-theme="dark"] .brand .logo{color:#9b96ff}
.login-card .sub{color:var(--text-3);font-size:12.5px;margin-bottom:24px;position:relative}
.login-card input{
  width:100%;border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;
  font-size:14px;outline:none;background:var(--surface-2);color:var(--text);transition:var(--t);position:relative;
}
.login-card input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
.login-card button{
  width:100%;background:var(--accent);color:#fff;border:0;border-radius:var(--r);padding:12px;font-size:14.5px;
  font-weight:600;cursor:pointer;margin-top:6px;transition:var(--t);box-shadow:0 8px 20px -10px var(--accent);position:relative;
}
.login-card button:hover{background:var(--accent-h)}
.login-card .hint{color:var(--text-3);font-size:11.5px;margin-top:18px;line-height:1.8;position:relative}
.msg{font-size:12.5px;margin-top:10px;min-height:16px}
.msg.bad{color:var(--red)}.msg.ok{color:var(--green)}

/* ================= 顶栏 ================= */
.top{
  height:var(--top-h);display:flex;align-items:center;gap:12px;padding:0 18px;
  background:var(--surface);  /* ★ 原 82% 透明 + blur(14px)：不叠滚动内容，毛玻璃白付采样成本 ⇒ 改不透明 */
  border-bottom:1px solid var(--line);position:relative;z-index:5;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;color:var(--text);font-size:14.5px;letter-spacing:-.2px}
.brand i{width:22px;height:22px;border-radius:8px;background:linear-gradient(140deg,var(--accent),#8b93ff);box-shadow:0 5px 14px -6px var(--accent)}
.brand svg.logo{filter:drop-shadow(0 3px 8px rgba(24,17,241,.22))}
.top-sep{width:1px;height:22px;background:var(--line-2)}
.shop-picker{display:flex;align-items:center;gap:8px;color:var(--text-2);font-size:12.5px}
.shop-picker select{
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:6px 10px;background:var(--surface);
  font-size:13px;color:var(--text);cursor:pointer;transition:var(--t);outline:none;
}
.shop-picker select:hover{border-color:var(--accent-line)}
.pill{
  font-size:11.5px;border-radius:var(--r-pill);padding:3px 10px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--text-2);white-space:nowrap;
}
.pill.green{background:var(--green-l);border-color:var(--green-line);color:var(--green)}
.pill.orange{background:var(--orange-l);border-color:var(--orange-line);color:var(--orange)}
.pill.red{background:var(--red-l);border-color:var(--red-line);color:var(--red)}
.pill.gray{background:var(--surface-3);color:var(--text-3)}
.spacer{flex:1}
.who{color:var(--text-3);font-size:12.5px}
.ghost{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);padding:7px 13px;
  cursor:pointer;color:var(--text-2);font-size:13px;transition:var(--t);
}
.ghost:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
/* ============================================================
   统一按钮层（2026-10-24）
   ------------------------------------------------------------
   为什么加这一层：项目里很多按钮是 `<button class="primary">`，但 CSS 只写了
   `.bar button.primary` ⇒ 不在 .bar 里的主按钮退回浏览器原生灰框（截图那种）。
   这里用 `:where()` 把特异性压到 0，既补齐全局外观，又让 `.bar button`、
   `.seg button`、`.pc-step button` 等局部规则继续覆盖，不动现有布局。
   规则：
     · 主操作 = .primary（实心）
     · 次操作 = .ghost（描边）
     · 危险   = .danger（红）
     · 裸 <button> = 次操作外观，不再出现系统灰框
   ============================================================ */
button{font-family:inherit}
button:where(:not([class])){display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);border-radius:var(--r-sm);
  padding:7px 13px;font-size:13px;font-weight:500;line-height:1.2;cursor:pointer;transition:var(--t);
  white-space:nowrap;-webkit-appearance:none;appearance:none}
button:where(:not([class])):hover:not(:disabled){border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
button:where(.primary){display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:var(--r-sm);
  padding:7px 14px;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;transition:var(--t);
  white-space:nowrap;box-shadow:0 8px 18px -10px var(--accent);-webkit-appearance:none;appearance:none}
button:where(.primary):hover:not(:disabled){background:var(--accent-h);border-color:var(--accent-h);color:#fff}
button:where(.danger){background:var(--red);border-color:var(--red);color:#fff}
button:where(.danger):hover:not(:disabled){filter:brightness(.94);color:#fff}
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
button:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
/* 旧代码里还有用 span 当按钮的 chip：ghost + primary = 选中态 */
.ghost.primary{background:var(--accent);border-color:var(--accent);color:#fff}
/* ============================================================
   统一输入框层（2026-10-24）
   ------------------------------------------------------------
   截图里的「条数 [3]」是裸 `<input type="number">`：没有 class，走浏览器原生边框。
   这里只补**无 class 的文本/数字/搜索/日期输入框 + select/textarea**，
   用 :where() 压到 0 特异性；`.bar input`、`.pc-step input`、`.pc-quota-ctl input`
   等局部规则继续覆盖，不动现有紧凑布局。
   ============================================================ */
input:where(:not([class]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset])),
select:where(:not([class])),
textarea:where(:not([class])){
  box-sizing:border-box;border:1px solid var(--line-2);background:var(--surface);color:var(--text);
  border-radius:var(--r-sm);padding:7px 10px;font-family:inherit;font-size:13px;line-height:1.3;
  outline:none;transition:var(--t);
}
input:where(:not([class]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset])):hover,
select:where(:not([class])):hover,textarea:where(:not([class])):hover{border-color:var(--accent-line)}
input:where(:not([class]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset])):focus,
select:where(:not([class])):focus,textarea:where(:not([class])):focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);cursor:pointer}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed;background:var(--surface-2)}
/* 紧凑组件里的裸 input 不套大 padding，否则会撑破 22/40px 的宽度 */
.pc-step input,.pc-quota-ctl input{padding:0}
/* ⌘K 搜索入口 + 主题切换（新增） */
.cmdk{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--surface-2);
  border-radius:var(--r-pill);padding:6px 12px 6px 12px;color:var(--text-3);font-size:12.5px;cursor:pointer;transition:var(--t);
}
.cmdk:hover{border-color:var(--accent-line);color:var(--text-2);background:var(--surface)}
.cmdk kbd{
  font-family:var(--mono);font-size:10.5px;border:1px solid var(--line-2);border-radius:5px;
  padding:1px 5px;background:var(--surface);color:var(--text-3);
}
.icon-btn{
  width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--r-sm);cursor:pointer;color:var(--text-2);font-size:14px;transition:var(--t);
}
.icon-btn:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}

/* ================= 布局 ================= */
.wrap{display:flex;height:calc(100vh - var(--top-h))}
.side{
  width:var(--side-w);flex:0 0 var(--side-w);background:var(--surface);
  /* ★ 原 70% 透明 + blur(10px)：底下只有页面底色、没有滚动内容，毛玻璃纯付成本（全高 844px）
     ⇒ 改不透明（2026-10-15，滚动卡顿修复的一部分）。 */
  border-right:1px solid var(--line);display:flex;flex-direction:column;transition:width var(--t),flex-basis var(--t);
}
.side.collapsed{width:var(--side-w-min);flex-basis:var(--side-w-min)}
/* ★ padding-top 必须是 0：吸顶组头的"钉住位置"是滚动容器的 padding box 上沿，
   只要留了 padding-top，它上方就会露出一条 12px 的缝 —— 滚过去的条目文字正好从缝里透出来
   （截图上是组名上方糊着半个「定向参数」+ 一个绿点）。间距交给组头自己的 padding。 */
.nav{flex:1;overflow:auto;padding:0 10px 20px}
.ni{
  display:flex;align-items:center;gap:10px;padding:8px 10px;color:var(--text-2);cursor:pointer;
  border-radius:var(--r-sm);border:1px solid transparent;transition:var(--t);margin-bottom:2px;
  font-size:13.5px;user-select:none;
}
.ni i{
  width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;border-radius:7px;
  background:var(--surface-3);color:var(--text-3);font-size:11px;font-style:normal;font-weight:600;transition:var(--t);
}
.ni:hover{background:var(--surface-2);color:var(--text)}
.ni:hover i{background:var(--accent-soft);color:var(--accent)}
.ni.on{background:var(--accent-soft);color:var(--accent);font-weight:600;border-color:var(--accent-line)}
.ni.on i{background:var(--accent);color:#fff}
/* ★ 菜单常驻化（2026-10-12）：当前店用不了的页签**仍然列出**，但置灰。
   为什么不再"藏起来"：菜单位置恒定（肌肉记忆）+ 能力一眼看全，比"没用的就藏"更重要。
   ★ 置灰项**不是死按钮**：点了会弹一句"要先把顶栏切到 X"（见 renderNav 的 onclick）。
   ★ 两条 hover 规则必须写在 .ni:hover / .ni:hover i **之后** ——
     同特异度（0,2,0）时**后写胜出**，写在前面会被普通项的 hover 盖掉。 */
.ni-off{opacity:.42;cursor:not-allowed}
.ni-off:hover{background:transparent;color:var(--text-3)}
.ni-off:hover i{background:var(--surface-3);color:var(--text-3)}
.ni-off.on{opacity:1}

/* ================= 侧栏 v3（功能分组 + 可折叠 + 线性图标 + 统一 4 字） =================
   用户反馈（2026-10）：「名字长的长短的短，不整齐」「不同类目分类不显眼，都混一起」。
   三条对因下药：
     ① 命名 —— 34 项全部统一 4 字。原来 2~11 字混排（订单 27px ↔ 商品准入·公开佣金 118px），
        一列扫下来参差不齐；旧名里的限定词（公开佣金 / 批量调佣 / 物流…）搬进 title，信息不丢。
     ② 分组 —— 组头从"10.5px 灰色小字"升级为**可点的一行**（图标 + 组名 + 项数 + 折叠箭头）
        并加分隔线；同时把旧的「专属 · 平台名」大杂烩拆成功能组（平台归属改由项上的小圆点表达）。
     ③ 图标 —— 首字方块（舱/单/售…）换成 24×24 线性 SVG，描边走 currentColor，
        亮暗主题 / hover / 选中共用一套状态色；也和文字不再重复表达同一件事。
   ★ 作用域硬约束：v3 规则**一律收在 #nav 与 .side 之内**。
     `.ni` 这个类还被「达人库 / 机构库」页内页签（`.tabs2 #libTabs`）复用，
     基础 `.ni` 规则必须原样保留，只在 #nav 作用域里加强，才不会改坏页内页签。 */
#nav .nav-group+.nav-group{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
/* 组头吸顶：滚到长列表下半段时，"现在在哪一类"始终看得见。
   ★ 背景必须**不透明**：先用 color-mix(surface 70%, transparent) + backdrop-filter 试过，
     但 `.side` 自己也带 backdrop-filter ⇒ 嵌套后内层采样不生效，滚上去的条目文字会从组头里透出来
     （截图上就是"组名上方糊着半个字"）。改成与侧栏玻璃层等价的**实色**
     （surface 70% + bg 30% = 侧栏压在页面底色上的最终颜色），既遮住内容又和侧栏无缝。 */
#nav .nav-label{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;gap:7px;
  margin:0 1px 4px;padding:9px 8px 8px;
  font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--text-3);
  border-radius:var(--r-xs);cursor:pointer;user-select:none;transition:var(--t);
  background:color-mix(in srgb,var(--surface) 70%,var(--bg));
}
#nav .nav-label:hover{color:var(--text-2);background:var(--surface-2)}
#nav .nav-label:hover .nav-gico{color:var(--accent)}
#nav .nav-label:focus-visible{outline:2px solid var(--accent-line);outline-offset:-2px}
#nav .nav-gico{width:13px;height:13px;flex:0 0 13px;color:var(--text-3);transition:var(--t)}
#nav .nav-gname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nav .nav-gcount{
  font-size:10px;font-weight:600;line-height:1;color:var(--text-3);background:var(--surface-3);
  border-radius:var(--r-pill);padding:3px 6px;min-width:17px;text-align:center;letter-spacing:0;
}
#nav .nav-chev{
  width:12px;height:12px;flex:0 0 12px;color:var(--text-3);opacity:.55;
  transform:rotate(90deg);transition:transform var(--t),opacity var(--t);
}
#nav .nav-label:hover .nav-chev{opacity:.9}
#nav .nav-group.folded .nav-chev{transform:rotate(0)}
#nav .nav-group.folded .nav-items{display:none}
#nav .nav-items{display:flex;flex-direction:column}

/* 导航项：4 字等宽 + 24px 图标位 + 左侧选中条 */
#nav .ni{padding:7px 9px;margin:0;border-radius:var(--r-sm);font-size:13px;font-weight:500;position:relative}
#nav .ni i{
  position:relative;width:24px;height:24px;flex:0 0 24px;border-radius:7px;
  background:transparent;color:var(--text-3);
}
#nav .ni .ni-ico{width:16px;height:16px}
#nav .ni:hover i{background:transparent;color:var(--accent)}
#nav .ni.on{background:var(--accent-soft);color:var(--accent);font-weight:600;border-color:var(--accent-line)}
#nav .ni.on i{background:transparent;color:var(--accent)}
/* 选中态左侧竖条：比"整行变色"更容易在长列表里一眼定位 */
#nav .ni.on::before{
  content:"";position:absolute;left:-9px;top:50%;width:3px;height:17px;border-radius:0 3px 3px 0;
  background:var(--accent);transform:translateY(-50%);
}
/* 平台专属小圆点：回答"为什么切到别的店这一项就没了"（A 类通用域 / C 类自有都不点） */
#nav .ni-dot{
  position:absolute;right:-1px;bottom:-1px;width:7px;height:7px;border-radius:50%;
  border:1.5px solid var(--surface);background:var(--text-3);
}
#nav .ni-dot[data-pf="wxshop"]{background:var(--pf-wxshop)}
#nav .ni-dot[data-pf="douyin"]{background:var(--pf-douyin)}
#nav .ni-dot[data-pf="pdd"]{background:var(--pf-pdd)}
#nav .ni-dot[data-pf="kuaishou"]{background:var(--pf-ks)}
#nav .ni-dot[data-pf="xhs"]{background:var(--pf-xhs)}
/* ---------- 归属徽标（2026-10-15）：外观即状态 ----------
   有平台色胶囊 = 单平台（切到别的平台的店它就没了）；灰色「共用」= 双平台共用。
   与 .ni-dot 并存：收起态只剩图标，那里靠圆点；展开态靠胶囊。 */
.pf-tag{
  flex:0 0 auto;margin-left:auto;font-size:10px;line-height:1.7;font-weight:600;
  padding:0 7px;border-radius:var(--r-pill);white-space:nowrap;letter-spacing:.2px;
  border:1px solid transparent;
}
/* 单平台：实心平台色 ⇒ 一列扫过去，"哪些会跟着顶栏切换消失"可以直接数出来 */
.pf-tag.pf{color:#fff}
.pf-tag.pf[data-pf="wxshop"]{background:var(--pf-wxshop)}
.pf-tag.pf[data-pf="douyin"]{background:var(--pf-douyin)}
.pf-tag.pf[data-pf="pdd"]{background:var(--pf-pdd)}
.pf-tag.pf[data-pf="kuaishou"]{background:var(--pf-ks)}
.pf-tag.pf[data-pf="xhs"]{background:var(--pf-xhs)}
/* 双平台共用：中性描边、刻意弱化 —— 它是"默认状态"，不该跟"单平台"抢注意力 */
.pf-tag.own{background:transparent;border-color:var(--line-2);color:var(--text-3);font-weight:500}
/* ★ 菜单常驻化（2026-10-12）「未接入」：当前店的平台没声明这个域 ⇒ 与置灰态配套。
   不能沿用「共用」——那会出现"胶囊写着共用、页签却是灰的"这种自相矛盾的画面。 */
.pf-tag.off{background:transparent;border-color:var(--line-2);color:var(--text-3);font-weight:500}
#nav .ni.on .pf-tag.own{color:var(--accent);border-color:var(--accent-line)}
/* 暗色下微信绿/小红红要提亮才看得清（--pf-* 在 :root 暗色块里已改过，这里只兜底对比） */
@media (prefers-color-scheme:dark){
  .pf-tag.pf[data-pf="xhs"],.pf-tag.pf[data-pf="pdd"]{color:#1a1207}
}
:root[data-theme="dark"] .pf-tag.pf[data-pf="xhs"],
:root[data-theme="dark"] .pf-tag.pf[data-pf="pdd"]{color:#1a1207}
.ni-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side.collapsed #nav .pf-tag{display:none}
/* 收起态（68px）：只剩图标 ⇒ 组头保留组图标当分隔线索，并在图标上点平台圆点
   ★ `> span` 只吃标签：平台小圆点是 `<i>` 里的 span，必须留着（它是收起态唯一的平台线索） */
.side.collapsed #nav .ni>span,
.side.collapsed #nav .nav-gname,
.side.collapsed #nav .nav-gcount,
.side.collapsed #nav .nav-chev{display:none}
.side.collapsed #nav .nav-label{position:static;justify-content:center;padding:8px 0 5px;background:transparent}
.side.collapsed #nav .nav-group+.nav-group{margin-top:6px;padding-top:6px}
.side.collapsed #nav .nav-group.folded .nav-items{display:flex}   /* 收起态本来就只剩图标，折叠无意义 ⇒ 一律展开 */
.side.collapsed #nav .ni{justify-content:center;padding:8px 0}
.side.collapsed #nav .ni.on::before{left:-6px}
.side.collapsed .side-foot{display:none}
.side-foot{padding:12px 14px;border-top:1px solid var(--line)}
.main{flex:1;overflow:auto;padding:26px 30px 64px;scroll-behavior:smooth}
/* ★★ 2026-10-17 滚动卡顿修复：fill-mode 从 `both` 改成 `backwards`。
   【症状】老板报「爆品页滚到中间滚不动」→ 修好滚动后又说「滚动时有卡顿感」。
   【实测】2560×1440 + 真实滚轮 + 3 次取中位（`tmp/_diag-fillmode.mjs`）：
             基准 掉帧 18/15/14（中位 15）→ 改成 backwards 后 8/4/1（中位 4）；
             而且**别的长页面同样中招**：商品管理 7/9 → 2/1，订单管理 13/16 → 3/2。
           ⇒ 这是**全站通病**，不是爆品页自己的问题。
   【根因】`both` = backwards + forwards，动画播完后**保留 `to` 关键帧的样式**；
          而 `to{transform:none}` 里带 transform ⇒ 这一整段内容被**留在自己的合成层里**
          （`display:none` 的兄弟页签不占，但当前页签那一整段会占）。
          爆品页一个 `section` 就有 **2424px 高**、含 5 张表 300+ 单元格，
          滚动时新露出的部分要整层重栅格化 ⇒ 掉帧。
   【为什么改成 backwards 是安全的】**外观一字不变**：
          这个动画没有 delay，`backwards` 在开始前不产生任何效果；
          而 `to` 关键帧（`opacity:1;transform:none`）与元素的**自然样式完全相同**
           ⇒ 播完回落到自然样式，看不出任何差别，只是**合成层被释放**。
   【反面候选（都测过，没采用）】删掉动画（外观有变）、关 `scroll-behavior:smooth`（两次 5/4，
           第二次与基准的 4 持平 ⇒ 噪声，不构成证据）、卡片加 `content-visibility`（无改善）。 */
.main>section{animation:rise var(--t) backwards}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h1{font-size:22px;font-weight:650;letter-spacing:-.5px;margin-bottom:4px}
.main .sub{color:var(--text-3);font-size:12.5px;margin-bottom:22px;max-width:108ch;line-height:1.75}
.main .sub b{color:var(--text-2);font-weight:600}
.main .sub code{font-size:11.5px}

/* ================= 卡片与网格 ================= */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g2{grid-template-columns:1fr 1fr;margin-top:16px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;
  box-shadow:var(--shadow-1);transition:var(--t);margin-bottom:16px;
}
.card:hover{box-shadow:var(--shadow-2)}
.card-h{
  font-weight:620;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:14px;letter-spacing:-.1px;
}
.card-h .mini{font-weight:400}
.stat{padding:18px 20px}
.stat .mini{font-size:11.5px;letter-spacing:.2px}
.stat .v{font-size:28px;font-weight:680;margin:8px 0 4px;letter-spacing:-1px;line-height:1.1}
.stat .v.ok{color:var(--green)}.stat .v.warn{color:var(--orange)}.stat .v.bad{color:var(--red)}

/* 列表行：去边框化，用留白与 hover 表达 */
.list .row{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r);flex-wrap:wrap;
  border-bottom:1px solid var(--line);transition:var(--t);
}
.list .row:last-child{border-bottom:0}
.list .row:hover{background:var(--surface-2);border-bottom-color:transparent}
.list .row.clickable{cursor:pointer}
.list .row.sel{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.empty{
  color:var(--text-3);padding:40px 0;text-align:center;font-size:13px;
  background:repeating-linear-gradient(45deg,transparent,transparent 10px,var(--line) 10px,var(--line) 11px);
  border-radius:var(--r);
}
.tag{font-size:11px;border-radius:var(--r-xs);background:var(--surface-3);color:var(--text-2);padding:2px 8px;white-space:nowrap}
.tag.green{background:var(--green-l);color:var(--green)}
.tag.red{background:var(--red-l);color:var(--red)}
.tag.gray{background:var(--surface-3);color:var(--text-2)}

/* ================= 工具条 ================= */
.bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 18px;
  padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);
}
.bar label{display:flex;align-items:center;gap:6px;color:var(--text-2);font-size:12.5px}
.bar button{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);padding:8px 14px;
  cursor:pointer;color:var(--text);font-size:13px;transition:var(--t);font-weight:500;
}
.bar button:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}
.bar button:active{transform:none}
.bar button.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 18px -10px var(--accent)}
.bar button.primary:hover{background:var(--accent-h);color:#fff}
.bar select,.bar input[type=date],.bar input[type=text],.bar input[type=number]{
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:7px 10px;background:var(--surface);
  color:var(--text);font-size:13px;outline:none;transition:var(--t);
}
.bar select:hover,.bar input:hover{border-color:var(--accent-line)}
.bar select:focus,.bar input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
textarea{
  width:100%;min-height:110px;border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;
  font:13.5px/1.75 inherit;outline:none;resize:vertical;background:var(--surface-2);color:var(--text);transition:var(--t);
}
textarea:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}

/* ================= 表单控件基类 .inp（2026-10-07 补） =================
   ★ 这个类此前**从未定义**，而全站引用了 82 处 ⇒ 凡是不在 .bar 里的输入框
     全部退回浏览器原生样式：方角、原生日期选择器、蓝色默认焦点环。
     用户截图说"这个没样式"就是这个原因（不是一个面板的问题，是全站共用类的缺失）。
   ★ 这里只补视觉，**不设 width**（避免影响既有布局）；.bar 内的选择器更具体，仍会覆盖。 */
.inp{
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 10px;background:var(--surface);
  color:var(--text);font-size:13px;line-height:1.5;outline:none;transition:var(--t);box-sizing:border-box;
}
.inp:hover{border-color:var(--accent-line)}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.inp::placeholder{color:var(--text-3)}
textarea.inp{min-height:120px;padding:11px 13px;font-size:13.5px;line-height:1.75;background:var(--surface-2);resize:vertical}
textarea.inp:focus{background:var(--surface)}
input.inp[type=date]{cursor:pointer;font-variant-numeric:tabular-nums}
code{
  background:var(--surface-3);border-radius:var(--r-xs);padding:1px 6px;font-size:12px;font-family:var(--mono);color:var(--text-2);
}

/* ================= 抽屉 / 弹层 ================= */
.link{color:var(--accent);cursor:pointer;font-weight:500}
.link:hover{text-decoration:underline}
.mask{position:fixed;inset:0;background:rgba(10,14,22,.32);backdrop-filter:blur(2px);display:none;z-index:20}
.mask.on{display:block}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(760px,88vw);background:var(--surface);z-index:21;
  transform:translateX(102%);transition:transform 220ms cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;
  box-shadow:var(--shadow-3);border-left:1px solid var(--line);
}
.drawer.on{transform:none}
.d-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-weight:620}
.d-b{padding:18px 22px;overflow:auto;flex:1}
.jobcard{border-left:3px solid var(--line);border-radius:var(--r);padding-left:14px}
.jobcard:has(.pill.green){border-left-color:var(--green)}
pre{margin:0;font-family:var(--mono);font-size:12px;line-height:1.7;white-space:pre-wrap;word-break:break-all}

/* 语义色（v1 保留，值随主题走） */
.bad-row{background:var(--red-l)}
.orange{color:var(--orange)}
.ok{color:var(--green)}
.warn{color:var(--orange)}
.bad{color:var(--red)}

/* ---- 达人库 · 机构库 ---- */
.tabs2{display:flex;gap:4px;margin:18px 0 14px;border-bottom:1px solid var(--line)}
.tabs2 .ni{border:0;border-radius:var(--r-sm) var(--r-sm) 0 0;padding:9px 16px;margin:0;position:relative;background:transparent}
.tabs2 .ni i{display:none}
.tabs2 .ni.on{background:var(--surface);color:var(--accent);font-weight:600;box-shadow:var(--shadow-1)}
.tabs2 .ni.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
.filters{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;padding:6px 0 10px}
.filters label{display:flex;align-items:center;gap:6px;color:var(--text-2);font-size:12.5px}
.filters input[type=text],.filters input:not([type]),.filters input[type=number]{
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:6px 10px;font-size:12.5px;outline:none;
  background:var(--surface-2);color:var(--text);transition:var(--t);
}
.filters select{
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:6px 10px;background:var(--surface);
  color:var(--text);font-size:12.5px;max-width:200px;outline:none;transition:var(--t);
}
.filters input:focus,.filters select:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.filters input[type=checkbox]{accent-color:var(--accent)}
.bar input[type=checkbox]{accent-color:var(--accent)}
.mini-bar{display:inline-block;height:6px;border-radius:var(--r-pill);background:var(--accent);vertical-align:middle}
.mask-note{
  background:var(--orange-l);border:1px solid var(--orange-line);color:var(--orange);border-radius:var(--r);
  padding:10px 14px;font-size:12.5px;line-height:1.7;margin-bottom:8px;
}
.pane-box{max-height:none}
.dl{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;font-size:12.5px}
.dl dt{color:var(--text-3)}
.dl dd{margin:0;color:var(--text);word-break:break-all}

/* ================= 新增：命令面板（⌘K） ================= */
/* ================= 统一弹窗（2026-10-24） =================
   原生 confirm/alert/prompt 不可样式化；这里用同一套 dialog 组件，
   异步返回 Promise，调用方必须 await。 */
body.ui-dlg-lock{overflow:hidden}
.ui-dlg-mask{
  /* ★ 2026-11-03：z-index 从 80 提到 10001。
     原来 80 低于商品提分抽屉遮罩（.ropt-mask 9998）和售后抽屉（9999）
     ⇒ 在抽屉里调 uiConfirm 时，确认框被抽屉盖在下面 → 用户只看到一片黑。 */
  position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(10,14,22,.34);backdrop-filter:blur(6px);animation:uiDlgFade .16s ease both;
}
.ui-dlg{
  width:min(480px,100%);max-height:min(82vh,720px);overflow:auto;background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:18px;padding:20px 20px 16px;
  box-shadow:0 30px 80px -30px rgba(10,14,22,.5),0 2px 8px rgba(10,14,22,.06);
  animation:uiDlgIn .18s cubic-bezier(.2,.8,.2,1) both;
}
.ui-dlg-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ui-dlg-eyebrow{font-size:11.5px;font-weight:650;letter-spacing:.04em;color:var(--accent);background:var(--accent-soft);
  border:1px solid var(--accent-line);border-radius:999px;padding:3px 9px}
.ui-dlg-eyebrow.danger{color:var(--red);background:var(--red-l);border-color:var(--red-line)}
.ui-dlg-x{border:0;background:transparent;color:var(--text-3);font-size:22px;line-height:1;width:30px;height:30px;
  padding:0;border-radius:8px;cursor:pointer}
.ui-dlg-x:hover{background:var(--surface-2);color:var(--text)}
.ui-dlg-title{font-size:19px;font-weight:680;line-height:1.45;margin:14px 0 6px}
.ui-dlg-body{font-size:13.5px;line-height:1.8;color:var(--text-2)}
.ui-dlg-body p{margin:0 0 8px;white-space:pre-wrap;word-break:break-word}
.ui-dlg-body p:last-child{margin-bottom:0}
.ui-dlg-input{display:block;width:100%;box-sizing:border-box;margin-top:12px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--text);border-radius:9px;padding:9px 11px;font:13.5px/1.4 inherit;outline:none}
.ui-dlg-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.ui-dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.ui-dlg-actions button{min-width:88px}
@keyframes uiDlgFade{from{opacity:0}to{opacity:1}}
@keyframes uiDlgIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:520px){
  .ui-dlg-mask{padding:12px;align-items:flex-end}
  .ui-dlg{border-radius:16px 16px 12px 12px;padding:18px 16px 12px;max-height:88vh}
  .ui-dlg-title{font-size:17.5px}
  .ui-dlg-actions button{flex:1;min-width:0}
}
.palette{
  position:fixed;inset:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;
  background:rgba(10,14,22,.34);backdrop-filter:blur(3px);animation:fade var(--t) both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.palette-card{
  width:min(560px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);overflow:hidden;animation:pop 200ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.palette-card input{
  width:100%;border:0;border-bottom:1px solid var(--line);padding:18px 22px;font-size:16px;outline:none;
  background:transparent;color:var(--text);
}
.palette-list{max-height:46vh;overflow:auto;padding:8px}
.palette-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r);cursor:pointer;transition:var(--t)}
.palette-item.on{background:var(--accent-soft);color:var(--accent)}
.palette-item i{
  position:relative;width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border-radius:8px;
  background:var(--surface-3);font-style:normal;color:var(--text-3);
}
.palette-item .pi-ico{width:16px;height:16px}
.palette-item.on i{background:var(--accent);color:#fff}
.palette-item .pi-label{font-weight:500}
.palette-item .pi-group{margin-left:auto;flex:0 0 auto}
.palette-foot{padding:10px 18px;border-top:1px solid var(--line);color:var(--text-3);font-size:11.5px;display:flex;gap:14px}

/* ================= 新增：轻提示（替代 alert） =================
   ★ 2026-11-03 修：z-index 从 50 提到 10000。
     原来的 50 低于商品提分抽屉遮罩（.ropt-mask 9998）⇒ 抽屉一打开，
     抽屉里所有 toast 都被压在遮罩底下 → 用户点完按钮"其他都没提示"
     （提示其实弹了，只是被盖住看不见）。
     10000 高于全站最高的 9998/9999，且低于 .ui-dlg-mask 的层级语义
     （页内确认框 z-index 80 会被抽屉盖住 —— 见 000-uiDialog 的说明）。
   ★ 抽屉打开时把 toast 往左挪开抽屉（640px），别压在抽屉内容上。 */
.toasts{position:fixed;right:22px;bottom:22px;z-index:10000;display:flex;flex-direction:column;gap:10px;align-items:flex-end;transition:right .2s ease}
body.ropt-open .toasts{right:calc(min(640px, 95vw) + 22px)}
.toast{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);
  padding:13px 18px;box-shadow:var(--shadow-2);font-size:13px;max-width:420px;animation:slidein var(--t) both;
}
.toast.ok{border-left-color:var(--green)}
.toast.bad{border-left-color:var(--red)}
.toast.warn{border-left-color:var(--orange)}
@keyframes slidein{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ================= 对账单表格（供应商结算明细） =================
   为什么要真表格：原来是 flex 行，字段一多就自动换行错位，像日志不像对账单。
   对账单的三条硬要求：① 列对齐 ② 金额右对齐且等宽数字 ③ 表头吸顶 + 合计行吸底。 */
.tbl-wrap{
  overflow:auto;max-height:62vh;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--shadow-1);
}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tbl thead th{
  position:sticky;top:0;z-index:2;background:var(--surface-2);color:var(--text-3);
  font-weight:600;font-size:11.5px;letter-spacing:.4px;text-align:left;
  padding:10px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap;
  backdrop-filter:blur(6px);
}
.tbl tbody td{
  padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle;
  white-space:nowrap;transition:background var(--t);
}
.tbl tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.tbl tbody tr:hover td{background:var(--accent-soft)}
.tbl tbody tr.flag td{box-shadow:inset 3px 0 0 var(--orange)}
/* 命中不发货地区的行：给一层暖底 + 左侧标记，扫一眼就能挑出来 */
.tbl tbody tr.noship td{background:color-mix(in srgb,var(--orange-l) 65%,transparent)}
.tbl tbody tr.noship:hover td{background:color-mix(in srgb,var(--orange-l) 100%,transparent)}
.st-flag{color:var(--orange);font-size:11px;margin-right:2px}
/* 撕单行：整行压暗 + 金额划线，扫一眼就知道这行不付钱 */
.tbl tbody tr.torn td{background:color-mix(in srgb,var(--red-l) 70%,transparent)}
.tbl tbody tr.torn:hover td{background:color-mix(in srgb,var(--red-l) 100%,transparent)}
.tbl tbody tr.torn .strong{text-decoration:line-through;text-decoration-color:var(--red)}
.st-state{white-space:normal}
.st-state .tag{margin:1px 3px 1px 0}
.st-verdict{display:inline-flex;gap:8px;margin-left:6px;font-size:11.5px;white-space:nowrap}
/* 新增调整表单（挂在"查单结果"卡片里） */
.st-adjlink{margin-left:8px;font-size:11.5px;white-space:nowrap;opacity:.65}
.st-adjlink:hover{opacity:1}
.adj-form{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2)}
.adj-form .card-h{margin-bottom:10px}
.adj-form .filters{gap:10px 14px}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .strong{font-weight:650}
.tbl .tiny{font-size:11.5px;color:var(--text-2)}
.tbl .dim{color:var(--text-3)}
.tbl tfoot td{
  position:sticky;bottom:0;z-index:2;background:var(--surface-2);font-weight:620;
  padding:11px 12px;border-top:1px solid var(--line-2);white-space:nowrap;
}
.st-no{width:34px;color:var(--text-3);font-size:11.5px;text-align:right!important}
.st-goods{max-width:340px;overflow:hidden;text-overflow:ellipsis}
.st-sku{
  display:inline-block;font-family:var(--mono);font-size:11.5px;background:var(--accent-soft);
  color:var(--accent);border:1px solid var(--accent-line);border-radius:var(--r-xs);padding:1px 6px;
}
.st-qty{font-size:11.5px;color:var(--text-3);margin:0 8px 0 3px}
.st-spec{color:var(--text-2);font-size:12px}
.st-place{color:var(--text-2)}
.st-copy{cursor:pointer;border-bottom:1px dashed var(--line-2)}
.st-copy:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* SKU 汇总条：供应商是按 SKU 核账的，不按订单核 */
.st-rollup{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:2px 0 12px}
.st-chip{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--surface-2);border-radius:var(--r-pill);padding:3px 11px;font-size:12px;
}
.st-chip b{font-family:var(--mono);font-weight:600;color:var(--text-2)}
.st-chip i{font-style:normal;color:var(--accent);font-weight:650}
.st-filter{
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:6px 12px;font-size:12.5px;
  outline:none;background:var(--surface-2);color:var(--text);min-width:250px;transition:var(--t);
}
.st-filter:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
/* 分段控件（口径开关 / 页签切换）：选中的那档必须是"一眼看出现在按哪个"。
   ★★ 2026-10-06 修 bug：原来只写 `.bar .seg` ⇒ 只在 `.bar` 容器里生效。
     财务中心五页签 (#finTabs) 挂的是 `.card-h > .seg`，结算中心的口径开关同理，
     两处整套样式全部落空：编号被当正文渲染、没有选中蓝底、外框药丸全丢 ——
     五个标签长得一模一样 ⇒ **"我现在在看哪本账"这个信息彻底丢了**（用户原话"缺了点意思"）。
     改为通用 `.seg`，任何容器里都成立；`button.on` 的优先级靠 `.seg button.on` 而非 `.bar` 限定。 */
.seg{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line-2);background:var(--surface-2);border-radius:var(--r-pill);padding:3px}
.seg button{border:0;background:transparent;color:var(--text-2);font-size:12.5px;font-weight:500;padding:5px 13px;border-radius:var(--r-pill);cursor:pointer;transition:var(--t)}
.seg button:hover{color:var(--text);background:transparent;transform:none}
.seg button.on{background:var(--accent);color:#fff;box-shadow:0 6px 14px -8px var(--accent)}
.seg button.on:hover{background:var(--accent-h);color:#fff}
/* 财务五页签：每个标签带一个圈号徽章（①~⑤）。编号本身是"这是第几本账"的索引，
   ★ 单独用 `<i>` + 等宽数字，让它跟标签文字拉开层次，而不是混成一句正文。 */
.seg button i{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.72;margin-right:5px}
.seg button.on i{opacity:1}
/* 五个标签并排时宽度差异大（"③徐总垫付" vs "④每日订单利润"），
   ★ 用 white-space:nowrap 保证不被折成两行；卡片头允许换行承接。 */
.seg button{white-space:nowrap}
/* 升档行的「实发档位」标记 */
.st-packed{font-size:11px;color:var(--green);background:var(--green-l);border:1px solid var(--green-line);border-radius:var(--r-xs);padding:1px 6px;margin-left:8px}

/* ================= 通道状态（hack 掉线标识）+ 重新扫码登录 =================
   为什么要一个专门的弹层：hack 登录态是**账号级**的，掉了整条链（差评/违规/店铺分/客服回复）
   全读不了，而"重新扫码"是只有人能做、且只有 owner/lead 能做的动作 —— 它必须有一个
   明确的、随时找得到的入口，而不是藏在终端命令里。 */
.chan-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 12px;padding:10px 14px;border-radius:var(--r);
  background:var(--red-l);border:1px solid var(--red-line);color:var(--text);font-size:12.5px;
}
.chan-banner b{color:var(--red)}
.chan-banner .grow{flex:1}
.chan-card{width:660px;max-width:94vw;max-height:86vh;overflow:auto}
.chan-h{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);font-weight:650;font-size:14px}
.chan-h .link{margin-left:auto}
.chan-body{padding:16px 20px 22px;display:flex;flex-direction:column;gap:14px}
.chan-sec{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;background:var(--surface-2)}
.chan-sec-head{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:620}
.chan-sec-head .pill{margin-left:auto}
.chan-note{margin-top:8px;font-size:12px;color:var(--text-3);line-height:1.7}
.chan-note code{font-family:var(--mono);font-size:11.5px;background:var(--surface-3);padding:1px 5px;border-radius:var(--r-xs)}
.chan-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.chan-acts button{font:inherit;font-size:12.5px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--r-sm);padding:6px 13px;cursor:pointer;color:var(--text-2);transition:var(--t)}
.chan-acts button:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.chan-acts button.primary{border-color:var(--accent);background:var(--accent);color:#fff}
.chan-acts button.primary:hover:not(:disabled){background:var(--accent-h);color:#fff}
.chan-acts button:disabled{opacity:.5;cursor:not-allowed}
/* 二维码按"能扫"来定尺寸：源图是 240px 二维码 + 44px 留白（328×328），
   显示成 280px 时二维码本体约 205px —— 手机对着屏幕能直接扫，不用凑到眼前。 */
.chan-qr{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:12px}
.chan-qr img{width:280px;height:auto;background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:6px;display:block}
.chan-qr .qr-slot{display:grid;place-items:center;width:294px;height:294px;border:1px dashed var(--line-2);border-radius:10px;color:var(--text-3);font-size:12px;text-align:center;padding:10px}
.chan-qr-info{flex:1;min-width:230px;font-size:12.5px;color:var(--text-2);line-height:1.9}
.chan-qr-info b{color:var(--text)}
.chan-busy{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--accent-line);
  border-top-color:var(--accent);animation:spin .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================= 窄屏 ================= */
@media (max-width:1180px){
  .main{padding:20px 18px 56px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .side{width:var(--side-w-min);flex-basis:var(--side-w-min)}
  /* ★ v3：窄屏只剩图标 —— 组头也要只留图标（原来是整块 display:none，
     结果所有类目在窄屏上彻底消失，正是"分类不显眼"的极端版） */
  .side .nav-gname,.side .nav-gcount,.side .nav-chev,.side .ni>span,.side .side-foot{display:none}
  .side .nav-label{position:static;justify-content:center;padding:8px 0 5px;background:transparent}
  .side .nav-group.folded .nav-items{display:flex}
  .side .ni{justify-content:center;padding:9px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .top{gap:8px;padding:0 12px}
  .who,.top-sep{display:none}
}
/* ================= 记录式列表 v3（去工业化） =================
   问题：各页签的列表都是"一串 span 自动换行"——没有主次、没有对齐、没有分组，
        字段一多就糊成一团，扫一眼抓不到重点。
   语法（页面只描述内容，不拼样式）：
     .list        一行一记录的容器
     .rec         记录行 = 三段网格（内容区两行 + 尾区右对齐）
     .rec-head    主行：标识 + 标题 + 状态 chips
     .rec-sub     次行：元信息（点分隔）
     .rec-tail    尾区：数值 / 操作
     .r-id .r-title .r-num .r-num-sub .r-group .skeleton
   兼容：老的 .row / .tag / .mini / .mono 全部继续可用（只提速节奏），
        没迁移完的页签不会因为这次改版而变坏。 */
.list{display:flex;flex-direction:column}
.list .row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r);border-bottom:1px solid var(--line);flex-wrap:wrap;transition:background var(--t)}
.list .row:last-child{border-bottom:0}
.list .row:hover{background:var(--surface-2);border-bottom-color:transparent}
.list .row.clickable{cursor:pointer}
.list .row.sel{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}

.rec{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  padding:13px 16px;border-radius:var(--r);border-bottom:1px solid var(--line);
  position:relative;transition:background var(--t),box-shadow var(--t);
}
.rec:last-child{border-bottom:0}
.rec:hover{background:var(--surface-2);border-bottom-color:transparent}
.rec.clickable{cursor:pointer}
.rec.sel{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.rec::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:3px;border-radius:0 3px 3px 0;background:transparent;transition:background var(--t)}
.rec:hover::before,.rec.sel::before{background:var(--accent)}
.rec.tone-warn::before{background:var(--orange)}
.rec.tone-bad::before{background:var(--red)}
.rec-head{grid-column:1;grid-row:1;display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.rec-sub{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;margin-top:5px;color:var(--text-3);font-size:12px;min-width:0}
.rec-sub>span{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%}
.rec-sub>span+span::before{content:"·";margin-right:9px;opacity:.55}
.rec-tail{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;white-space:nowrap;padding-left:14px}
.r-id{font-family:var(--mono);font-size:11.5px;color:var(--text-3);letter-spacing:-.2px}
.r-title{font-size:14.5px;font-weight:620;letter-spacing:-.2px;color:var(--text);min-width:0}
.r-num{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.r-num-sub{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.r-group{position:sticky;top:0;z-index:1;background:var(--surface);padding:9px 16px;margin:0;font-size:11.5px;font-weight:600;letter-spacing:.5px;color:var(--text-3);border-bottom:1px solid var(--line)}
.rec .tag,.rec .pill{flex:0 0 auto}
.skeleton{height:13px;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}
/* 键值行：标签左、数值右（资金/额度/账号这类"一次看几个数"的列表） */
.kv{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--line);border-radius:var(--r);transition:background var(--t)}
.kv:last-child{border-bottom:0}
.kv:hover{background:var(--surface-2)}
.kv>span:first-child{color:var(--text-2);font-size:12.5px;margin-right:auto}
.kv>b{font-size:14.5px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--text)}
.kv>span:not(:first-child){color:var(--text-3);font-size:12px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.skel-rows{padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.skel-rows>div{display:flex;gap:14px;align-items:center}

/* ---------- 页签状态条（切换页签时的"我在忙 / 数据多旧"统一信号） ----------
   刻意不搞全屏遮罩：那会把"加载"变成一件很重的事。这里只在顶部给一条细进度条 + 一行小字。 */
/* ★ 性能（2026-10-15）：这里原来是 color-mix 88% 透明 + backdrop-filter:blur(6px)。
   它 sticky 粘顶，内容每滚一帧浏览器都要把 1316px 宽的条重新模糊一遍 ⇒ 页面滚动明显掉帧
   （实测 DOM 3290 节点 / 无长任务 / 卡顿只跟滚动相关 ⇒ 元凶就是它）。
   改不透明背景：视觉几乎无差（底下就是页面底色），滚动零重采样。 */
.pane-bar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:5;
  margin:-4px 0 14px;padding:6px 2px 8px;background:var(--bg);
  border-bottom:1px solid var(--line)}
.pb-name{font-weight:650;font-size:13.5px;color:var(--text)}
.pb-grow{flex:1}
.pb-btn{font:inherit;font-size:12.5px;color:var(--accent);background:transparent;border:1px solid var(--line-2);
  border-radius:8px;padding:3px 10px;cursor:pointer}
.pb-btn:hover{background:var(--accent-l);border-color:var(--accent)}
.pb-btn:disabled{cursor:default;color:var(--muted);border-color:var(--line)}
/* 细进度条：时长不确定 ⇒ 来回跑的不定态，不编造百分比 */
.pb-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;opacity:0;transition:opacity .15s}
.pane-bar.busy .pb-progress{opacity:1}
.pane-bar.busy .pb-progress::after{content:'';position:absolute;inset:0;width:36%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:pbRun 1.1s linear infinite}
@keyframes pbRun{from{transform:translateX(-100%)}to{transform:translateX(320%)}}
/* ★ 确定进度（知道总数时）：不来回滑，按 --pg 铺满 —— 长任务靠它显示"到哪了" */
.pb-progress.determinate{opacity:1}
.pb-progress.determinate::after{content:'';position:absolute;inset:0;width:var(--pg,0%);border-radius:2px;
  background:var(--accent);animation:none;transition:width .25s}
@media (prefers-reduced-motion:reduce){.pane-bar.busy .pb-progress::after{animation-duration:2.4s}}

/* ---------- 分页条（所有列表统一） ---------- */
.pager{display:flex;align-items:center;gap:6px;margin:12px 2px 2px;padding-top:10px;border-top:1px solid var(--line)}
.pg-grow{flex:1}
.pg{font:inherit;font-size:12.5px;color:var(--text);background:var(--surface);border:1px solid var(--line-2);
  border-radius:7px;padding:3px 9px;cursor:pointer;min-width:30px}
.pg:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pg.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.pg:disabled{opacity:.45;cursor:default}
.pg-gap{color:var(--muted);padding:0 2px}

/* ============================================================
   ★ 2026-10-02 加：**通用**禁用/不可用态。
   ------------------------------------------------------------
   原来只有 .chan-acts / .pb-btn / .pg 三个局部作用域写了 disabled 样式，
   而「任务 · 进程」卡片的按钮落在 .bar 里 ⇒ 被禁用的按钮和可点的一模一样，
   用户反馈"点启动没变化"（真相：按钮是禁用的，点击被浏览器吞掉了，连 tooltip 都不弹）。
   ★ `.off` 表示"不可用、但仍要能点"（点了要给出拒绝理由），所以**绝不能**加 pointer-events:none，
     否则又会回到"点了没反应"。 */
button:disabled{cursor:not-allowed;opacity:.45}
button.off{cursor:not-allowed;opacity:.55;border-style:dashed}
button.off:hover{border-color:var(--line-2);color:var(--muted);background:transparent}

/* 任务日志框（2026-10-02 从 hack/control.html 那套控制台搬来的观感）：
   深色 + 等宽 + 固定 150px 可滚 —— 一屏能看十几行，比原来只显示最后一行有用得多。 */
.job-log{background:#0c1017;border-radius:6px;padding:8px;margin-top:6px;
  font:11px/1.5 Consolas,"Courier New",monospace;color:#9fb3c8;
  height:150px;overflow:auto;white-space:pre-wrap;word-break:break-all}

/* 推广漏斗（佣金页：推送 → 上橱窗 → 合作） */
.cm-funnel{display:flex;align-items:baseline;gap:5px;font-size:12.5px;white-space:nowrap}
.cm-funnel b{font-variant-numeric:tabular-nums;font-size:15px}
.cm-arrow{color:var(--muted);font-size:12px;margin:0 2px}
#cmSummary{line-height:1.7}
#cmSummary b{font-variant-numeric:tabular-nums}

/* ---------- 佣金总表：表头 + 对齐网格行 + 就地展开 ---------- */
.cm-head,.cm-row{display:grid;grid-template-columns:minmax(190px,1.5fr) 82px 94px 90px 82px 68px 68px minmax(86px,1fr) 124px;
  gap:8px;align-items:center}
.cm-head{padding:6px 10px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);font-weight:600}
.cm-head-2,.cm-row-2{grid-template-columns:minmax(140px,1fr) 80px 70px 100px 60px 80px}
.cm-row{padding:9px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.cm-row:hover{background:var(--accent-l)}
.cm-row.on{background:var(--accent-l);box-shadow:inset 3px 0 0 var(--accent)}
.cm-row.bad{box-shadow:inset 3px 0 0 var(--red)}
.cm-row-2{cursor:default;background:var(--surface-2,transparent)}
.cm-row .num,.cm-head .num{text-align:right;font-variant-numeric:tabular-nums}
.cm-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.cm-title b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-row .num .mini{display:block;font-size:10.5px;color:var(--muted)}
.cm-expand{padding:12px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent-l) 55%,transparent)}

/* ---------- 商品准入表（2026-10-04 新增 · 自有 7 列模板） ----------
   ★ 为什么不能复用 .cm-row：那张表是 **9 列**固定网格，直接用会把列压到前 6 列上、
     后 3 列挤成一团（实测列宽全错位）。这里单列一套，列宽按内容重要性分配：
     商品名最宽（要能读全）→ 佣金可编辑给足宽度 → 计划 ID 是长数字但只是参考，窄一点 →
     状态标签固定宽度 → 说明列自适应。
   ★ 「公开佣金」列做成**行内可编辑**（用户 2026-10-04 要求）：
     改完只改这一行，不影响别的行的待改值，发布时才一起提交。 */
.gt-head,.gt-row{display:grid;
  grid-template-columns:28px minmax(220px,2.2fr) 132px 128px 108px minmax(150px,1.1fr);
  gap:10px;align-items:center}
.gt-head{padding:7px 10px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);font-weight:600}
.gt-row{padding:9px 10px;border-bottom:1px solid var(--line)}
.gt-row:hover{background:var(--accent-l)}
.gt-row.dirty{background:var(--orange-l);box-shadow:inset 2px 0 0 var(--orange)}
.gt-row.blocked{opacity:.62}
/* 行内佣金编辑框：数字右对齐、等宽数字，改动一眼可见 */
.gt-ratio{display:flex;align-items:center;gap:3px;justify-content:flex-end}
.gt-ratio input{width:66px;text-align:right;font-variant-numeric:tabular-nums;
  padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text)}
.gt-ratio input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.gt-ratio input.edited{border-color:var(--accent);font-weight:600;background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* 低于建议下限 5%：用描边提示，不另加文字标签 ——
   说明列里已经写了"公开佣金 1% 低于建议下限 5%"，再挂一个标签就是重复信息。 */
.gt-ratio input.low{border-color:var(--orange);background:var(--orange-l)}
/* ================= 商品前置 · 行内定向参数面板（2026-10-16） =================
   老板原话：「取消定向参数 tab 页，并入商品前置页」「点击商品列展开直接在下方添加
   定向参数配置」「1 个商品可以挂载多条定向参数…+就是可以添加新的」。
   ★ `.gt-wrap{display:contents}`：把"商品行 + 参数面板"包成一组，但对 6 列网格来说
     这两个孩子**还在原位** ⇒ 列对齐与原来逐字一致；面板再 `grid-column:1/-1` 跨满整行。
   ★ 面板里的文字必须**允许换行**：`.gt-row>div` 那条规则是 nowrap+ellipsis（表格行要的），
     不覆盖的话面板标签会被省略号截掉，看着像"没配"。 */
.gt-wrap{display:contents}
.gt-x{display:flex;align-items:center;gap:5px}
.gte{border:0;background:transparent;color:var(--text-2);cursor:pointer;font-size:12px;line-height:1;padding:2px 3px;border-radius:5px}
.gte:hover{background:var(--surface-3);color:var(--accent)}
.gt-params{
  grid-column:1/-1;white-space:normal;overflow:visible;
  margin:2px 0 6px;padding:10px 12px;background:var(--surface-2);
  border:1px solid var(--line-2);border-left:3px solid var(--accent);border-radius:var(--r-sm);
}
.gt-params .gtr-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.gt-params .gtr-line{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 9px;margin-bottom:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xs);
}
/* 默认条：左侧加一条粗蓝边（"发送时用哪条"要一眼看得出来，像是常用地址） */
.gt-params .gtr-line.def{border-left:4px solid var(--accent)}
.gt-params .gtr-name{flex:0 0 190px}
.gt-params .gtr-nm{
  width:100%;padding:5px 8px;border:1px solid var(--line-2);border-radius:var(--r-xs);
  background:var(--surface-2);color:var(--text);font-size:12.5px;
}
.gt-params .gtr-tags{display:flex;gap:6px;flex-wrap:wrap}
.gt-params .gtr-tags select{
  padding:5px 7px;border:1px solid var(--line-2);border-radius:var(--r-xs);
  background:var(--surface-2);color:var(--text);font-size:12.5px;
}
/* ★★ 2026-10-16（第三轮）：每条参数现在有三个下拉（对象 / 模式 / 时长）+ 若干数值格，
   一行放不下（机构·机构分配下会有 3 个下拉 + 1~3 个数值格）。
   ⇒ 数值格**换行到下一排**，而不是被压成省略号。这一条不写的话，
      `.gtr-fields` 会跟着标签一起被 nowrap 截断，看着像"这个模式下没有字段"。 */
.gt-params .gtr-fields{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 260px;min-width:0}
/* 模式下拉给宽一点：档位名最长的是「普通佣金率 + 投流佣金率」「双佣金（日常 + 投放期）」 */
.gt-params .gtr-mode{max-width:210px}
.gt-params .gtr-term{max-width:150px}
.gt-params .gtr-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-pill);overflow:hidden}
.gt-params .gtr-seg button{border:0;background:transparent;color:var(--text-2);padding:4px 10px;cursor:pointer;font-size:12px}
.gt-params .gtr-seg button.on{background:var(--accent);color:#fff}
.gt-params .gtr-fields{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gt-params .gtr-f{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-3)}
.gt-params .gtr-f input{
  width:74px;padding:5px 7px;text-align:right;font-variant-numeric:tabular-nums;
  border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--surface-2);color:var(--text);
}
.gt-params .gtr-f input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.gt-params .gtr-f input:disabled{opacity:.55;cursor:not-allowed}
.gt-params .gtr-def{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-2);white-space:nowrap}
.gt-params .gtr-acts{margin-left:auto;display:flex;gap:6px}
.gt-params .gtr-btn{
  border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);
  border-radius:var(--r-xs);padding:4px 9px;cursor:pointer;font-size:12px;
}
.gt-params .gtr-btn:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.gt-params .gtr-btn.gtr-del:hover{border-color:var(--red-line);color:var(--red);background:var(--red-l)}
/* ★ `primary` / `ghost` 这两个类是**给 `.bar` 里的按钮**定义的（`.bar button.primary`），
   面板不在 `.bar` 里 ⇒ 不加这两条的话「保存参数」会是个白底普通按钮，
   "主操作"这个层级就丢了（而它正是这一块唯一会写文件的那个）。 */
.gt-params .gtr-save{
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  border-radius:var(--r-xs);padding:5px 12px;cursor:pointer;font-size:12.5px;font-weight:500;
}
.gt-params .gtr-save:hover:not(:disabled){background:var(--accent-h);border-color:var(--accent-h)}
.gt-params .gtr-save:disabled{opacity:.5;cursor:not-allowed}
.gt-params .gtr-add{
  border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);
  border-radius:var(--r-xs);padding:5px 11px;cursor:pointer;font-size:12.5px;
}
.gt-params .gtr-add:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.gt-ratio span{color:var(--muted);font-size:12px}
.gt-ratio input:disabled{background:var(--surface-2,transparent);color:var(--muted);cursor:not-allowed}
/* 平台徽标：这一行数据来自哪个平台（用户 2026-10-04 要求明确标识，防串店） */
.gt-pf{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:1px 6px;border-radius:999px;
  background:var(--accent-l);color:var(--muted);white-space:nowrap}
.gt-pf[data-pf="douyin"]{background:color-mix(in srgb,#e35d6a 12%,transparent);color:#a1343f}
.gt-pf[data-pf="wxshop"]{background:color-mix(in srgb,#1aad19 12%,transparent);color:#0a7a0a}
.gt-row>div,.gt-head>div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gt-row .num,.gt-head .num{text-align:right;font-variant-numeric:tabular-nums}
/* 行内说明（可换行，因为它是最需要看清的一列） */
.gt-note{white-space:normal!important;font-size:11.5px;line-height:1.45;color:var(--muted)}
.gt-name b{font-size:13.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 分页条（商品多了要能翻） */
.gt-pager{display:flex;align-items:center;gap:6px;padding:9px 10px;justify-content:flex-end;font-size:12px;color:var(--muted)}

/* ---------- 定向参数表（2026-10-05 P1 新增） ----------
   ★ 列数随「对象类型」变（达人 4 个参数 / 机构 5 个）⇒ grid 模板**由 JS 按规格生成**
     写进 style 属性，不在这里写死 —— 写死就必然有一边错位。
   ★ 两个平台区块各自一张表（不联动），.pl-block 只管间距。 */
.pl-block{margin-bottom:14px}
.pl-head,.pl-row{display:grid;gap:10px;align-items:center}
.pl-head{padding:7px 10px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);font-weight:600}
.pl-row{padding:9px 10px;border-bottom:1px solid var(--line)}
.pl-row:hover{background:var(--accent-l)}
.pl-row.dirty{background:var(--orange-l);box-shadow:inset 2px 0 0 var(--orange)}
.pl-row.off{opacity:.62}
.pl-row>div,.pl-head>div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-row .num,.pl-head .num{text-align:right;font-variant-numeric:tabular-nums}
/* ★ 商品名必须限一行 + 省略号（实测踩到）：商品名动辄 30~40 字，
   不限行会把这一格撑成三行高，整行拉高、参数输入框看着像"掉到下一行"，
   根本对不上表头列（人眼先崩，不是数据错）。hover 时用 title 看全名。 */
.pl-name{overflow:hidden}
.pl-name b{font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 参数输入框：与 gt-ratio 同一套观感（改过的描边加粗，一眼看出哪行动过） */
/* ★ 高度必须写死一个统一值：`.bar select,.bar input` 给了上下 7px 内边距，
   而我们自己要 4px ⇒ 不加这一条时，切到「机构」会多出一列、同一行里
   日期框（13px 字号）与数字框视觉高度不一致，整行看着"塌一块"（实测截图可见）。 */
.pl-in{width:100%;height:30px;max-width:96px;text-align:right;font-variant-numeric:tabular-nums;
  padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);
  box-sizing:border-box}
.pl-in[type="date"]{text-align:left;max-width:132px;font-size:12px;height:30px}
.pl-in:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.pl-in.edited{border-color:var(--accent);font-weight:600;background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* 分配方式下拉：与数字框同一视觉高度，但内容左对齐（"机构指定"是文字不是数字） */
.pl-sel{text-align:left;max-width:120px;cursor:pointer;font-size:12.5px}
/* 被锁定的字段（机构指定 ⇒ 达人佣金恒 0）：灰掉 + 禁用光标。
   ★ 必须配 title 说明原因（在 plRowHTML 里给），否则用户只看到灰框，以为功能坏了。 */
.pl-locked{background:var(--surface-2);color:var(--text-3);cursor:not-allowed;opacity:.75}
/* 抖店「固定档」下投放期两栏不使用 ⇒ 不显示输入框，只留灰色「—」占位（保留列结构不塌）。
   ★ 为什么不是"可填的 0"：切固定档会把原值写成 0，被当作"已改"标蓝，用户误读出错（实测反馈）。 */
.pl-off{display:inline-block;width:100%;max-width:96px;text-align:right;color:var(--text-3);
  opacity:.55;font-size:13px;padding:4px 6px;box-sizing:border-box;cursor:default;user-select:none}
/* ---------- 抖店定向参数：可展开卡片（替代「档位」下拉，两套佣金同屏设置） ----------
   设计意图：不用下拉二选一（那是"工业"做法，且把另一套藏起来）。点表头展开，
   「日常佣金」与「投放期（双佣档）」两组同屏可见、都能填；投放期用开关启用/停用。 */
.pl-card{border:1px solid var(--line);border-radius:10px;margin-bottom:9px;background:var(--surface)}
.pl-card.dirty{background:var(--orange-l);box-shadow:inset 2px 0 0 var(--orange)}
.pl-card.off{opacity:.62}
.pl-card-h{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer}
.pl-card-h:hover{background:var(--accent-l)}
.pl-card-h>.pl-name{flex:0 1 30%;min-width:150px}
.pl-card-sum{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-chev{flex:0 0 auto;color:var(--muted);font-size:12px;transition:transform .15s}
.pl-card.open .pl-chev{transform:rotate(90deg)}
.pl-card-b{display:none;border-top:1px solid var(--line);padding:4px 12px 12px}
.pl-card.open .pl-card-b{display:block}
.pl-sec{padding:9px 0 2px;border-bottom:1px dashed var(--line)}
.pl-sec:last-child{border-bottom:0}
.pl-sec-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;
  font-weight:600;color:var(--text-2);margin-bottom:8px}
.pl-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px 10px}
/* 抖店卡片没有列头 ⇒ 每个输入框自带名字（"25 / 5 / 0"没人知道谁是谁） */
.pl-cell-l{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px;line-height:1.2}
.pl-switch{display:inline-flex;align-items:center;gap:5px;font-weight:400;font-size:12px;
  color:var(--text-2);cursor:pointer;user-select:none}
.pl-switch input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;margin:0}
/* 「全部给团长」勾上后：整张卡片描一圈橙 + 「佣金模式」那节淡橙底
   —— 折叠状态下从表头摘要的橙色「全部给团长」标签也能看出来，两处都不显眼就等于没提示 */
.pl-card.allcap{outline:2px solid var(--orange);outline-offset:1px}
.pl-card.allcap .pl-sec.cap{background:var(--orange-l);border-radius:8px;padding:9px 10px 7px;
  border-bottom:0;margin-bottom:2px}
/* 「佣金怎么分」：总额 / 团长份额 可填，达人那份只读 —— 三栏并排，谁派生的看得出来 */
.pl-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 12px;align-items:start}
.pl-split-in{display:flex;flex-direction:column;gap:0}
.pl-split-in.ro .pl-split-out{background:var(--accent-l);border-color:var(--accent)}
.pl-split-out{display:block;padding:7px 9px;border:1px solid var(--line);border-radius:7px;
  background:var(--surface-2);font-size:13px;font-weight:600;color:var(--text-2);line-height:1.2}
.pl-mini-btn{align-self:flex-start;margin-top:5px;padding:2px 9px;font-size:11.5px;border-radius:999px;
  border:1px solid var(--orange);background:var(--surface);color:var(--orange);cursor:pointer}
.pl-mini-btn:hover{background:var(--orange-l)}
.pl-unit{color:var(--muted);font-size:12px;margin-left:2px}
/* 对象类型切换按钮（达人 / 机构）：选中态要明显，否则不知道自己在配哪一套 */
.pl-obj{padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--text-2);font-size:12.5px;cursor:pointer}
.pl-obj.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.pl-pager{display:flex;align-items:center;gap:6px;padding:9px 10px;justify-content:flex-end;font-size:12px;color:var(--muted)}
/* ---------- 货架（三步流程第 ② 步：选哪些商品要定向） ----------
   与「推送配置」页的货架同一套观感：卡片网格 + 每张卡一个「＋ 加入定向」。 */
.pl-shelf{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,transparent)}
.pl-shelf-h{display:flex;align-items:center;gap:8px;padding:8px 10px;flex-wrap:wrap;
  border-bottom:1px dashed var(--line);font-size:12.5px}
.pl-shelf-h b{font-size:12.5px}
/* 货架默认收起成一条矮栏（商品几十个时不该霸占整屏），点标题展开 */
.pl-shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;
  padding:9px 10px;max-height:190px;overflow:auto}
.pl-sitem{display:flex;flex-direction:column;gap:3px;padding:8px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface)}
.pl-sitem:hover{border-color:var(--accent)}
.pl-sitem b{font-size:12.5px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-sitem .pl-sid{font-size:11px;color:var(--muted)}
/* 移出按钮：放在行尾"备注"格里，够小不抢戏，但必须能一键把商品退出定向 */
.pl-rm{padding:2px 7px;border:1px solid var(--line);border-radius:6px;background:var(--surface);
  color:var(--text-2);font-size:11.5px;cursor:pointer;white-space:nowrap}
.pl-rm:hover{border-color:var(--red);color:var(--red)}
.pl-add{padding:3px 9px;border:1px solid var(--accent);border-radius:6px;background:var(--accent-l);
  color:var(--accent);font-size:12px;cursor:pointer;white-space:nowrap;align-self:flex-start}
.pl-add:hover{background:var(--accent);color:#fff}

/* ---------- 网格列表（列式数据统一表头；表头与行共用 grid-template ⇒ 列永远对齐） ---------- */
.gl-head{display:grid;gap:10px;align-items:center;padding:7px 10px;font-size:11.5px;font-weight:600;
  color:var(--muted);border-bottom:1px solid var(--line);background:var(--surface)}
.gl-head .num,.gl-row .num{text-align:right;font-variant-numeric:tabular-nums}
.gl-row{display:grid;gap:10px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.gl-row:not(.clickable){cursor:default}
/* ★ 单元格一律允许省略号：长商品标题不该把整行撑破（表头与行共模板 ⇒ 列宽固定，截断是必然的，
   所以真值放在 title 里，鼠标悬停可看全）。原来只有 .clickable 才显手型，订单行没点击动作 ⇒ 显默认光标。 */
.gl-row>div,.gl-head>div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-row:hover{background:var(--accent-l)}
.gl-row.sel{background:var(--accent-l);box-shadow:inset 3px 0 0 var(--accent)}
.gl-row b{font-size:13.5px}
.gl-row .mini{display:block;font-size:10.5px;color:var(--muted)}

/* 佣金总表：上橱窗二维码（显示成图，不可点击） */
.cm-qr{display:flex;flex-direction:column;align-items:center;gap:2px}
.cm-qr .qr-slot img{display:block;width:76px;height:76px;image-rendering:pixelated;background:#fff;border-radius:4px}
.cm-qr .tag{font-size:10px}

/* 可点的状态灯（dry-run 开关）：做成按钮样子 + hover 反馈 —— 否则它太像纯状态标签，人会找不到开关 */
.pill-btn{border:1px solid currentColor;cursor:pointer;user-select:none}
.pill-btn:hover{filter:brightness(.95);box-shadow:0 0 0 2px color-mix(in srgb,currentColor 18%,transparent)}
.pill-btn:active{transform:translateY(1px)}

/* 达人头像+昵称（订单行的"达人"列）；跳页输入框 */
.who{display:flex;align-items:center;gap:6px;min-width:0}
.who-t{font-size:12.5px}
.ava{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:0 0 26px;background:var(--surface-2,#eee)}
.ava-fb{display:inline-flex;align-items:center;justify-content:center;background:var(--accent-l);color:var(--accent);font-weight:600}
.pg-jump{width:56px;font:inherit;font-size:12.5px;padding:3px 6px;border:1px solid var(--line-2);border-radius:7px;text-align:center}
.pg-jump:hover,.pg-jump:focus{border-color:var(--accent);outline:none}

/* 订单筛选条：控件多，允许换行（窄屏不挤成一团） */
.orders-filters{flex-wrap:wrap;row-gap:8px;align-items:flex-end}
.orders-filters .grow{margin-right:auto}
/* 订单载入时的骨架行（细进度条 + 这里一起给"正在加载"的反馈） */
.sk-row{height:38px;margin:6px 10px;border-radius:7px;
  background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sk-row{animation:none}}

/* ---------- 订单行：展开箭头 + 骨架条 + 展开后的详情面板（老板 2026-10-11） ----------
   ★ 只写 longhand（border-*/padding-*），不用 border 这类 shorthand —— 本仓库踩过
     "shorthand 吃 longhand"的坑（同规则里先写 border 再写 border-left，左边的值被吞）。 */
.ord-caret{color:var(--muted);font-size:11px;text-align:center;user-select:none}
.ord-caret.open{color:var(--accent)}
/* 「商品」格 = 商品名 + 订单备注（买家留言 / 商家备注）各一行（2026-10-14 加）。
   ★ 为什么挂在商品格里而不是新加一列：这张表 12 列时已经贴着容器宽度，加列会把「实付」挤出可视区；
     商品格本来就最宽 ⇒ 挂这儿零宽度成本（买卖双方都写了备注的行会高一些，58→71px，有意如此）。
   ★ 必须显式 white-space:normal —— .gl-row>div 是 nowrap，不覆盖的话三行会挤成一条被截断的长串。
   ★ 每行自己 nowrap + 省略号，真值在 title 里（与其他列同一套读法，悬停看全）。 */
.ord-prod{display:flex;flex-direction:column;gap:1px;white-space:normal;min-width:0}
.ord-prod-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-note-b,.ord-note-s{display:block;font-size:10.5px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-note-b{color:var(--muted)}                                   /* 买家留言：别人的话，弱一档 */
.ord-note-s{color:var(--text);font-weight:500}                    /* 商家备注：自己写的，要显眼 */
.sk-bar{display:block;height:11px;border-radius:6px;
  background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite}
@media (prefers-reduced-motion:reduce){.sk-bar{animation:none}}
/* 展开的详情：缩进对齐"订单号"列，读起来像这一行的脚注 */
.gl-detail{display:flex;flex-direction:column;gap:7px;
  padding:12px 16px 14px 46px;background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--text-2)}
.gl-detail .od-row{display:flex;gap:10px;align-items:flex-start}
.gl-detail .od-k{flex:0 0 46px;color:var(--muted);font-size:11.5px;font-weight:600;line-height:1.7}
.gl-detail .od-v{flex:1 1 auto;min-width:0;color:var(--text);line-height:1.7;word-break:break-all}
.gl-detail .od-v .mini{display:inline;font-size:11px;color:var(--muted)}

/* ============================================================
   右抽屉 · AI 时代工作台（v2）
   ------------------------------------------------------------
   为什么重做：旧抽屉是"把网页表单塞进侧栏"——13px 密排、一排排边框输入框、
   原生多选列表框、一大坨裸 JSON。那是工业化的表单观感，和人现在对工具的预期不符。
   这一版的取向（只作用于 #drawer.dr-ai，日志抽屉不受影响）：
     · 一次只讲一件事 —— 抽屉按「卡片分区」组织，每区一句人话摘要 + 可折叠
     · 该点的不该打字 —— 地区/口径/发货时效用 chip 与分段控件，不再有原生多选框
     · 判断先于输入 —— 顶部风险标（演练/真实/无权限）、规则行实时成本对照、
       提交前把请求体算成结构化 diff（原来是一坨 JSON 让人自己读）
     · 动作永远在手边 —— 底部吸底动作条，主按钮随场景变色（真实写入 = 红）
   ★ 所有元素 id 一个没改（frtEd*），frtEdCollect/frtEdValidate 那套取数与校验逻辑
     因此原样复用 —— 这次只换皮与编排，不碰提交链路。
   ============================================================ */
.drawer.dr-ai{
  width:min(720px,94vw);background:var(--surface);
  border-left:1px solid var(--line-2);
  box-shadow:-30px 0 80px -40px rgba(10,14,22,.45);
}
:root[data-theme="dark"] .drawer.dr-ai{box-shadow:-30px 0 80px -40px rgba(0,0,0,.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .drawer.dr-ai{box-shadow:-30px 0 80px -40px rgba(0,0,0,.9)}}
.dr-h{
  padding:16px 22px 14px;display:flex;gap:14px;align-items:flex-start;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--accent-soft),transparent 92%);
}
.dr-h .dr-ht{flex:1;min-width:0}
.dr-h .dr-eyebrow{
  font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3);
  font-weight:650;margin-bottom:3px;
}
.dr-h .dr-title{font-size:17px;font-weight:660;letter-spacing:-.35px;color:var(--text);line-height:1.35}
.dr-h .dr-sub{margin-top:3px;font-size:12px;color:var(--text-3);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dr-h .dr-x{
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--surface);color:var(--text-3);cursor:pointer;font-size:15px;line-height:1;
  display:grid;place-items:center;transition:var(--t);
}
.dr-h .dr-x:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.dr-body{padding:16px 22px 8px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.dr-body>.mini{margin:0}
.dr-foot{
  position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 22px;border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);
}
.dr-foot .dr-foot-msg{flex:1 1 100%;font-size:12px;color:var(--text-3);min-height:16px;line-height:1.65}
.dr-foot .dr-foot-msg.bad{color:var(--red)}
.dr-foot .dr-foot-msg.ok{color:var(--green)}
.dr-foot button{margin:0}
/* 按钮：抽屉里的主/次/危险三档（原来只有 .primary 与 .ghost，且未作用于抽屉的独立按钮） */
.dr-btn{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);
  padding:8px 15px;cursor:pointer;color:var(--text-2);font-size:13px;font-weight:500;transition:var(--t);
}
.dr-btn:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.dr-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 10px 22px -12px var(--accent)}
.dr-btn.primary:hover:not(:disabled){background:var(--accent-h);color:#fff}
/* ★ 真实写入 = 红。这一颗按钮会改买家要付的运费，颜色必须和"演练"分开 */
.dr-btn.danger{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 10px 22px -12px var(--red)}
.dr-btn.danger:hover:not(:disabled){filter:brightness(.94);color:#fff}
.dr-btn:disabled{cursor:not-allowed;opacity:.45}

/* --- 卡片分区 --- */
.dr-card{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-1);overflow:hidden;
}
.dr-card-h{
  display:flex;align-items:flex-start;gap:10px;padding:13px 16px;cursor:pointer;user-select:none;
  transition:background var(--t);
}
.dr-card-h:hover{background:var(--surface-2)}
.dr-card-h .dr-ic{
  flex:0 0 26px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:650;
}
.dr-card-h .dr-ct{flex:1;min-width:0}
.dr-card-h .dr-ct b{display:block;font-size:13.5px;font-weight:640;letter-spacing:-.15px;color:var(--text)}
.dr-card-h .dr-ct span{display:block;font-size:11.5px;color:var(--text-3);margin-top:2px;line-height:1.55}
.dr-card-h .dr-chev{flex:0 0 auto;color:var(--text-3);font-size:11px;transition:transform var(--t);margin-top:5px}
.dr-card.collapsed .dr-chev{transform:rotate(-90deg)}
.dr-card-b{padding:2px 16px 16px;display:flex;flex-direction:column;gap:12px}
.dr-card.collapsed .dr-card-b{display:none}

/* --- 字段 --- */
.dr-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dr-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.dr-f.full{grid-column:1 / -1}
.dr-f>span:first-child{font-size:11px;color:var(--text-3);letter-spacing:.25px}
.dr-f input,.dr-f select,.dr-in{
  width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 11px;
  background:var(--surface-2);color:var(--text);font:13px/1.5 inherit;outline:none;transition:var(--t);
}
.dr-f input:hover,.dr-f select:hover{border-color:var(--accent-line)}
.dr-f input:focus,.dr-f select:focus,.dr-in:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
.dr-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

/* --- 分段控件（口径、发货时效）：选中态一目了然 --- */
.dr-seg{display:inline-flex;gap:3px;border:1px solid var(--line-2);background:var(--surface-2);border-radius:var(--r-pill);padding:3px}
.dr-seg button{
  border:0;background:transparent;color:var(--text-2);font-size:12.5px;font-weight:500;
  padding:6px 13px;border-radius:var(--r-pill);cursor:pointer;transition:var(--t);white-space:nowrap;
}
.dr-seg button:hover:not(.on){color:var(--text);background:var(--surface)}
.dr-seg button.on{background:var(--accent);color:#fff;box-shadow:0 6px 14px -8px var(--accent)}

/* --- 地区 chip 选择器（替代原生 multiple 列表框） --- */
.dr-pick{display:flex;flex-direction:column;gap:10px}
.dr-pick-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dr-pick-bar .dr-in{padding:6px 11px;font-size:12.5px}
.dr-pick-bar .dr-grow{flex:1;min-width:130px}
.dr-mini-btn{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-pill);
  padding:5px 12px;font-size:12px;color:var(--text-2);cursor:pointer;transition:var(--t);white-space:nowrap;
}
.dr-mini-btn:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.dr-pick-grid{max-height:262px;overflow:auto;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.dr-pick-g+.dr-pick-g{margin-top:10px}
.dr-pick-gh{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.dr-pick-gh b{font-size:11.5px;font-weight:650;color:var(--text-2);letter-spacing:.3px}
.dr-pick-gh .dr-mini-btn{padding:1px 9px;font-size:11px}
.dr-chips{display:flex;flex-wrap:wrap;gap:6px}
.dr-chip{
  display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--r-pill);padding:4px 11px;font-size:12px;color:var(--text-2);cursor:pointer;
  transition:var(--t);user-select:none;
}
.dr-chip:hover{border-color:var(--accent-line);color:var(--accent)}
.dr-chip input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.dr-chip .dr-tick{width:11px;font-size:10px;color:transparent;transition:var(--t)}
.dr-chip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600}
.dr-chip.on .dr-tick{color:var(--accent)}
/* 不发货区里"命中成本表禁发"的地区：红边提示（真实业务关系，不是装饰） */
.dr-chip.forbid{border-color:var(--red-line);color:var(--red)}
.dr-chip.forbid.on{background:var(--red-l);border-color:var(--red);color:var(--red)}
.dr-chip.forbid .dr-tick{color:currentColor}

/* --- 规则行 --- */
.dr-rules{display:flex;flex-direction:column;gap:10px}
.dr-rule{border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;background:var(--surface);transition:var(--t)}
.dr-rule:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.dr-rule-h{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.dr-rule-h .dr-rule-t{font-size:12.5px;font-weight:640;color:var(--text)}
.dr-rule-h .dr-rule-x{
  margin-left:auto;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);
  padding:4px 10px;font-size:12px;color:var(--text-3);cursor:pointer;transition:var(--t);
}
.dr-rule-h .dr-rule-x:hover{border-color:var(--red-line);color:var(--red);background:var(--red-l)}
.dr-price{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.dr-price .dr-f{flex:0 0 88px}
.dr-price-lbl{font-size:11px;color:var(--text-3);margin-bottom:1px}
.dr-cost{font-size:11.5px;color:var(--text-3);line-height:1.7}
.dr-cost b{color:var(--text-2);font-variant-numeric:tabular-nums}
.dr-note{font-size:11.5px;color:var(--text-3);line-height:1.7}

/* --- 提交前的裁决与改动 diff（原来是一坨裸 JSON） --- */
.dr-verdict{border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px}
.dr-verdict .dr-vh{font-size:12.5px;font-weight:640;display:flex;align-items:center;gap:8px;color:var(--text)}
.dr-vchips{display:flex;flex-wrap:wrap;gap:6px}
.dr-vchip{display:inline-flex;gap:6px;align-items:baseline;font-size:12px;border-radius:var(--r-sm);padding:4px 9px;line-height:1.5}
.dr-vchip.bad{background:var(--red-l);border:1px solid var(--red-line);color:var(--red)}
.dr-vchip.warn{background:var(--orange-l);border:1px solid var(--orange-line);color:var(--orange)}
.dr-vchip.ok{background:var(--green-l);border:1px solid var(--green-line);color:var(--green)}
.dr-vchip.mute{background:var(--surface-3);color:var(--text-3)}
.dr-diff{display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.dr-diff .dr-dh{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line);align-items:baseline}
.dr-diff .dr-dh:last-child{border-bottom:0}
.dr-diff .dr-dk{color:var(--text-3);font-size:11.5px}
.dr-diff .dr-dv{display:flex;flex-direction:column;gap:2px;min-width:0}
.dr-diff .dr-old{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--line-2);font-size:11.5px;word-break:break-word}
.dr-diff .dr-new{color:var(--text);word-break:break-word}
.dr-diff .dr-new b{color:var(--accent)}
/* 请求体：默认收起。要看的人再展开 —— 它不该是主界面 */
.dr-fold{border-top:1px dashed var(--line-2);padding-top:10px}
.dr-fold>summary{
  cursor:pointer;font-size:12px;color:var(--text-3);list-style:none;display:flex;align-items:center;gap:7px;
  padding:3px 0;transition:var(--t);
}
.dr-fold>summary::-webkit-details-marker{display:none}
.dr-fold>summary::before{content:"▸";font-size:10px;color:var(--text-3);transition:transform var(--t)}
.dr-fold[open]>summary::before{transform:rotate(90deg)}
.dr-fold>summary:hover{color:var(--accent)}
.dr-fold pre{
  margin-top:8px;max-height:300px;overflow:auto;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 13px;font-size:11.5px;
}

@media (max-width:760px){
  .dr-fields{grid-template-columns:1fr}
  .dr-tri{grid-template-columns:1fr}
  .drawer.dr-ai{width:100vw}
}

/* ============================================================
   运费模板 · 主从两栏（左选模板 / 右看它的数据）
   ------------------------------------------------------------
   原来右边固定放"圆通成本对照"，跟左边选谁没关系 —— 选了半天不知道选中的那个
   加收价够不够成本。现在：左栏点一行 ⇒ 右栏整个换成那个模板的口径 + 成本对照。
   成本对照没被删，它折进右栏底部（口径依据还得查得到），默认收起、标题上可展开。
   ★ 两栏各自滚动（高度 = 视口 - 顶栏/状态条/工具条），选模板时右栏不会把左栏顶出屏幕。 */
.frt-split{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:16px;margin:16px 0;align-items:start;
}
.frt-split .card{margin-bottom:0}
.frt-col-list,.frt-col-detail{min-width:0}
.frt-list,.frt-detail{
  max-height:calc(100vh - 300px);min-height:210px;overflow:auto;padding:4px 6px 4px 0;
}
/* 列表行：左边一条会亮的指示条 + 选中底色。选中态要一眼可见，所以底色/字重/指示条三处同时变 */
.frt-row{
  display:flex;flex-direction:column;gap:3px;padding:11px 12px 11px 14px;border-radius:var(--r-sm);
  cursor:pointer;position:relative;border-bottom:1px solid var(--line);transition:background var(--t),box-shadow var(--t);
}
.frt-row:last-child{border-bottom:0}
.frt-row::before{
  content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;
  background:transparent;transition:background var(--t);
}
.frt-row:hover{background:var(--surface-2)}
.frt-row.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.frt-row.on::before{background:var(--accent)}
.frt-row.on .frt-name{color:var(--accent)}
.frt-row-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.frt-name{font-size:13.5px;font-weight:620;letter-spacing:-.15px}
.frt-row-a{display:flex;gap:6px;margin-top:2px;padding-left:1px}
.frt-mini{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-pill);
  padding:3px 11px;font-size:12px;color:var(--text-2);cursor:pointer;transition:var(--t);
}
.frt-mini:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}

/* 详情的口径网格：标签在上、值在下，扫起来是"一格格读数"而不是一行行读句子 */
.frt-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px 14px}
.frt-kv>div{min-width:0}
.frt-k{font-size:11px;color:var(--text-3);margin-bottom:3px}
.frt-v{font-size:13px;color:var(--text);font-weight:600;line-height:1.5;word-break:break-word}
.frt-v.dim{font-weight:400;color:var(--text-2)}
.frt-dsec{margin-top:12px}
/* 成本参数条：三列 = 三个规格，列宽固定 ⇒ 和下面成本表的列**自然对齐** */
.frt-tiers{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:9px 2px 10px;border-top:1px dashed var(--line-2);margin-top:4px}
.frt-tier{flex:0 0 auto;width:104px;text-align:right}
.frt-tier span{display:block;font-size:11px;color:var(--text-3)}
.frt-tier b{font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--text)}
.frt-tier em{font-style:normal;font-size:11px;color:var(--text-3)}
.frt-tier.cmp{width:auto;text-align:left;flex:1;min-width:0}

/* 圆通成本对照（详情底部，默认收起）：表头与数据行共用同一套列宽，列永远对齐 */
.frt-costbox{overflow:hidden;max-height:900px;transition:max-height var(--t),opacity var(--t),margin var(--t)}
.frt-costbox.collapse{max-height:0;opacity:0;margin-top:0!important;pointer-events:none}
.frt-cost-head{display:flex;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line);
  font-size:11.5px;color:var(--text-3);font-weight:600}
.frt-cost-row{display:flex;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);align-items:baseline}
.frt-cost-row:last-child{border-bottom:0}
.frt-c-name{flex:1;min-width:0}
.frt-c-name b{font-weight:600}
.frt-c-num{flex:0 0 64px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;font-weight:640}
.frt-c-note{flex:0 0 118px;font-size:11.5px;color:var(--text-3);line-height:1.5}
@media (max-width:1180px){
  .frt-split{grid-template-columns:1fr}
  .frt-list,.frt-detail{max-height:none}
}

@media print{
  .side,.top,.bar,.toasts{display:none!important}
  .main{overflow:visible;padding:0}
  body{background:#fff;height:auto;overflow:visible}
  .card{box-shadow:none;break-inside:avoid}
}

/* ---------- 达人漏斗（发出去 → 上橱窗 → 出单） ----------
   一个商品一段三阶流程：数字大、箭头淡、单位小 —— 一眼看出"哪一段在漏"。
   （`.tag.orange` 原来只有 green/red/gray，漏斗里的"没发过"要用醒目但不是错误的颜色） */
.tag.orange{background:var(--orange-l);color:var(--orange)}
.fn-funnel{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.fn-step{flex:1 1 92px;min-width:92px;border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;background:var(--surface-2)}
.fn-step b{display:block;font-size:19px;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--text)}
.fn-step span{display:block;font-size:11px;color:var(--text-3);margin-top:2px}
.fn-step i{font-style:normal;color:var(--green)}
.fn-arrow{color:var(--muted);font-size:15px;flex:0 0 auto}

/* ============================================================
   店铺管理 v2（去工业化）：平台分区 + 紧凑卡片 + 动作收抽屉
   ------------------------------------------------------------
   设计口径：卡片只留"是谁 · 什么状态 · 要不要管"三件事，
   appid/别名/登录态细节全部进右抽屉 —— 列表不再是一行行仪表盘。
   ============================================================ */
.sa-chip{font:inherit;font-size:12.5px;color:var(--text-3);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:3px 11px;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px}
.sa-chip:hover{border-color:var(--accent);color:var(--accent)}
.sa-chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.sa-chip .n{font-variant-numeric:tabular-nums;opacity:.75}
/* 平台识别色（左色条 + 状态点）：wx 绿 / dy 红 / pdd 深红 / ks 橙 / xhs 玫红 */
.pf-wxshop{--pf:#07c160}.pf-douyin{--pf:#fe2c55}.pf-pdd{--pf:#d4111f}
.pf-kuaishou{--pf:#ff4906}.pf-xhs{--pf:#ff2442}
.sa-sec-h{display:flex;align-items:center;gap:7px;margin:14px 2px 8px;font-size:13px;font-weight:650;color:var(--text)}
.sa-sec-h .mini{font-weight:400}
/* ★★ 2026-11-05（老板第三次报同一件事：卡片"左边标红 + 绿色登录态正常"两个信号互相打脸）：
   10-27 把品牌色从圆点挪到**竖色条**，本意是"色条只做平台识别、不承载状态"，
   但**红 = 故障**这个读法太强：抖店的品牌红只要画在卡片上，人就会当成告警灯。
   ⇒ 这里彻底把这一页的"颜色"只留给**状态**：
     · 平台识别交给文字（分组标题里的「抖店」+ 卡片上的「抖店」标签）
     · 色条/卡片左边框改成中性浅灰（不再是 --pf 品牌色）
   这样一屏只有一种颜色语言：绿=平台认、橙=待确认、红=失效、灰=停用/未接入。 */
.sa-sec-h{position:relative;padding-left:9px}
.sa-sec-h::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:14px;border-radius:2px;background:#dfe3ea}
.sa-sec-dot{width:9px;height:9px;border-radius:50%;background:#b9bfc9;flex:0 0 auto}
.sa-sec-dot[data-tone="ok"]{background:#0b9e6a}
.sa-sec-dot[data-tone="warn"]{background:#e08c22}
.sa-sec-dot[data-tone="bad"]{background:#d92d20}
.sa-sec-h .mini[data-tone="bad"]{color:#d92d20}
.sa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px}
.shop-card{position:relative;text-align:left;cursor:pointer;font:inherit;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid #e3e7ee;
  border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.shop-card:hover{border-color:var(--accent);border-left-color:#e3e7ee}
.shop-card.off{opacity:.55}
.shop-card .sc-name{font-weight:600;font-size:13px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-card .sc-state{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-3);
  white-space:nowrap;overflow:hidden}
.shop-card .sc-state .tag{flex:0 0 auto}
.sc-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
.sc-dot.ok{background:var(--green)}.sc-dot.bad{background:var(--red)}.sc-dot.idle{background:var(--muted)}

/* ---------- 顶栏店铺切换（用户定：下拉太工业化 → 按钮 + 弹窗 + 平台 tab） ---------- */
.shop-btn{font:inherit;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;
  background:var(--surface);border:1px solid var(--line-2);border-radius:9px;
  padding:5px 11px;display:inline-flex;align-items:center;gap:6px;max-width:230px}
.shop-btn:hover{border-color:var(--accent);color:var(--accent)}
.shop-btn #shopBtnName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-btn .caret{color:var(--muted);font-size:11px;flex:0 0 auto}
/* 弹窗里的店铺行：一行一店，当前店高亮；状态点复用 sc-dot */
.sp-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);cursor:pointer;margin-bottom:6px}
.sp-row:hover{border-color:var(--accent)}
.sp-row.on{border-color:var(--accent);background:var(--accent-l);font-weight:600}
.sp-row .sp-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 达人广场（抖店精选联盟）：一行一达人，头像 + 昵称 + 类目 + 推荐理由 ---------- */
.dy-ta{display:flex;align-items:flex-start;gap:11px;padding:10px 11px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);margin-bottom:7px}
.dy-ta:hover{border-color:var(--accent)}
.dy-av{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--surface-2)}
.dy-av-ph{border:1px dashed var(--line-2)}
.dy-tb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dy-nm{font-weight:600;font-size:13px;color:var(--text)}

/* ---------- 团长广场（抖店精选联盟）：复用 .dy-* 的一行一团长，这里只加团长特有的汇总行 ---------- */
/* 列表顶部的分档汇总：它是"这一页数据的分布"，不是列表项 ⇒ 与 .dy-ta 用留白+虚线分隔 */
.da-sum{padding:9px 11px;margin-bottom:9px;border-bottom:1px dashed var(--line-2);line-height:1.7}

/* ---------- 推送配置 · AI 交互版（命令条 / 渠道卡 / 商品货架） ---------- */
.pc-hero .pc-title{font-size:16px;font-weight:700}

/* ---- 人群范围（2026-10-05）----
   ★ 变量名照抄本文件既有体系（--surface/--line/--text-2/--red/--orange/--green…）。
     我第一版凭印象写成 --c-bg-soft / --c-text 这类，**项目里根本没有这些变量**
     （`grep -o --c-` 只匹配到我刚加的这几行）⇒ 全部落回 fallback，颜色看着"差不多"但不对。 */
.au-notice{margin:0 12px 10px;padding:9px 11px;border-radius:var(--r);background:var(--surface-2);line-height:1.65;color:var(--text-2)}
.au-notice b{color:var(--text)}
/* ★ 2026-10-05：人群范围区那条"与上面达人定向卡的区别" —— 用左侧强调条和普通说明区分开，
   免得两段说明糊在一起看不出重点。 */
.au-vs{border-left:2px solid var(--accent)}
.au-quota{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px 8px}
.au-quota-row{width:100%;color:var(--text-3)}
.au-quota-item{flex:1 1 190px;min-width:170px;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:var(--surface)}
.au-quota-item .au-quota-t{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.au-quota-bar{height:6px;border-radius:3px;background:var(--line);margin:6px 0 4px;overflow:hidden}
.au-quota-bar i{display:block;height:100%;border-radius:3px;background:var(--green)}
.au-quota-item.low .au-quota-bar i{background:var(--orange)}
.au-quota-item.full{border-color:var(--red);background:var(--red-l)}
.au-quota-item.full .au-quota-bar i{background:var(--red)}
.au-quota-item.unknown .au-quota-bar i{background:var(--line-2)}
.au-quota-item.low{border-color:var(--orange)}
/* ★ 2026-10-06：发送进度条 —— 「人群范围 → 锁定名单并发」要一眼看得出在跑。
   原来整段发送期间界面只有一句「开始发送…」，发 500 人要 1~2 分钟，看不出是在跑还是卡死。
   做成整块描边高亮卡：大号百分比 + 粗进度条 + 已发/总数 + 实时成功/幂等/失败 + 已用时/预计剩余。 */
.au-prog{margin:0 12px 10px;padding:12px 14px;border:2px solid var(--accent);border-radius:var(--r);background:var(--surface)}
.au-prog.done{border-color:var(--green)}
.au-prog.error{border-color:var(--red);background:var(--red-l)}
.au-prog-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.au-prog-num{font-size:26px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--text)}
.au-prog-msg{color:var(--text-2)}
.au-prog-bar{height:12px;border-radius:6px;background:var(--line);margin:8px 0 6px;overflow:hidden}
.au-prog-bar i{display:block;height:100%;border-radius:6px;background:var(--accent);transition:width .3s ease}
.au-prog.done .au-prog-bar i{background:var(--green)}
.au-prog.error .au-prog-bar i{background:var(--red)}
.au-prog-nums{display:flex;gap:14px;flex-wrap:wrap;color:var(--text-2);font-variant-numeric:tabular-nums}
.au-prog-nums b{color:var(--text)}
.au-prog-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;animation:auBlink 1s infinite}
.au-prog.done .au-prog-dot,.au-prog.error .au-prog-dot{animation:none}
@keyframes auBlink{0%,100%{opacity:1}50%{opacity:.25}}
.au-sum{margin:0 12px;line-height:1.7;color:var(--text-2)}
.au-detail{margin:8px 12px 12px}
.au-detail>summary{cursor:pointer;font-size:12.5px;color:var(--text-3);padding:4px 0}
.au-table{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
.au-table table{width:100%;border-collapse:collapse;font-size:12.5px}
.au-table th,.au-table td{text-align:left;padding:6px 9px;border-bottom:1px solid var(--line);vertical-align:top}
.au-table th{position:sticky;top:0;background:var(--surface-2);font-weight:600;color:var(--text-2)}
.au-table .num{text-align:right}
.pc-herotop{display:flex;align-items:center;gap:10px}
.pc-summary{margin-top:9px;font-size:12.5px;line-height:1.8;opacity:.88}
.pc-cmdbar{display:flex;align-items:center;gap:9px;margin-top:10px;border:1.5px solid var(--line);
  border-radius:12px;padding:10px 13px;background:var(--surface-2);transition:border-color .15s}
.pc-cmdbar:focus-within{border-color:var(--accent)}
.pc-spark{color:var(--accent);font-size:15px}
.pc-cmd{flex:1;border:0;outline:0;background:transparent;font-size:13.5px;color:var(--text)}
.pc-cmd::placeholder{opacity:.45}
.pc-cmdlog{margin-top:7px;font-size:12px;min-height:16px;opacity:.85}
.pc-cmdlog .bad{color:#d9363e;opacity:1}
.pc-chancard{display:flex;flex-direction:column;gap:9px}
.pc-chan-h{display:flex;gap:9px;align-items:flex-start}
.pc-ic{font-size:18px;line-height:1.25}
/* ★ 2026-10-05 新增：渠道卡「点启动实际在做」一行说明 —— 老板问"达人定向和锁定名单并发送是不是一回事"，
   四条发送路径行为不同，页面上必须写清楚，不能让人猜（铁律 #6/#7：口径与能力都要显式露出）。 */
.pc-chan-what{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:11.5px;line-height:1.6;
  color:var(--text-2);background:var(--surface-2);border-left:2px solid var(--line-2);border-radius:var(--r);
  padding:6px 9px}
.pc-what-tag{flex:0 0 auto;font-weight:600;color:var(--text);opacity:.85;
  border:1px solid var(--line);border-radius:999px;padding:0 7px;font-size:10.5px;white-space:nowrap}
.pc-what-mark{flex:0 0 auto;font-size:10.5px;color:var(--orange);border:1px solid var(--orange);
  border-radius:999px;padding:0 7px;white-space:nowrap;opacity:.9}
.pc-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;align-items:center}
.pc-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;
  padding:3px 7px 3px 11px;background:var(--surface-2);font-size:12px;max-width:100%}
.pc-chip b{font-weight:650}
.pc-x{border:0;background:none;cursor:pointer;font-size:13px;line-height:1;opacity:.5;padding:0 2px;color:var(--text)}
.pc-x:hover{opacity:1;color:#d9363e}
.pc-addsel{max-width:100%;font-size:12px;padding:4px 10px;border:1px dashed var(--line-2);border-radius:999px;
  background:transparent;color:var(--text);opacity:.9}
.pc-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px dashed var(--line-2);padding-top:8px}
.pillset{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.pillset button{border:0;background:transparent;padding:3px 11px;cursor:pointer;font-size:12px;color:var(--text)}
.pillset button.on{background:var(--accent);color:#fff}
.pc-copyed{width:100%}
.pc-copyed summary{cursor:pointer;font-size:12px;opacity:.65;width:max-content}
.pc-copyrow{display:flex;gap:7px;align-items:flex-start;margin-top:6px}
.pc-copyrow textarea{flex:1;font-size:12px;line-height:1.5}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:9px;margin-top:9px}
.pc-card{border:1px solid var(--line);border-radius:12px;padding:10px 11px;background:var(--surface);
  display:flex;flex-direction:column;gap:6px}
.pc-card.on{border-color:var(--accent)}
.pc-card-t{font-size:12.8px;font-weight:600;line-height:1.45;word-break:break-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-card-id{opacity:.5;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.pc-steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pc-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-2)}
.pc-step button{border:0;background:transparent;width:22px;height:24px;padding:0;cursor:pointer;font-size:13px;color:var(--text)}
.pc-step input{border:0;width:40px;text-align:center;background:transparent;color:var(--text);font-size:12.5px;outline:0}
.pc-shelfbar{margin-top:6px}
.pc-grp{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px dashed var(--line-2);padding-top:7px}
.pc-gtag{font-size:11px;opacity:.62;min-width:58px;flex:0 0 auto}
.pc-ct{width:44px;height:24px;text-align:center;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);font-size:12.5px;outline:0}
/* ---------- 商品额度条（2026-10-05）：已发 N / 总 10000 + 进度 + 本次推 N 人 ----------
   ★ 为什么放商品卡上：1 万是**平台给单商品的硬上限**（属于商品，不属于人群）。
     以前它是个可编辑框挂在人群区 ⇒ 让人以为"所有商品共用一个额度"。
   三态配色：ok（余量充足）/ low（<500，快满）/ full（0，推不了）/ unknown（读不到）。
   ★ unknown 必须与 full 视觉上明显不同 —— 读不到 ≠ 名额为 0（铁律：别把"读不到"当"没有"）。 */
.pc-quota{border:1px solid var(--line);border-radius:9px;background:var(--surface-2);
  padding:7px 8px;display:flex;flex-direction:column;gap:5px}
.pc-quota.ok{border-color:var(--green-line);background:var(--green-l)}
.pc-quota.low{border-color:var(--orange-line);background:var(--orange-l)}
.pc-quota.full{border-color:var(--red-line);background:var(--red-l)}
.pc-quota.unknown{border-style:dashed;opacity:.85}
.pc-quota.loading{opacity:.7}
.pc-quota-t{display:flex;align-items:baseline;gap:7px;font-size:12px}
.pc-quota-t span:first-child{opacity:.62}
.pc-quota-t b{font-weight:600}
.pc-quota-t .mini{opacity:.7;margin-left:auto}
.pc-quota-bar{height:6px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.pc-quota-bar i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .25s}
.pc-quota.low .pc-quota-bar i{background:var(--orange)}
.pc-quota.full .pc-quota-bar i{background:var(--red)}
.pc-quota-ctl{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:12px}
.pc-quota-ctl button{border:1px solid var(--line);background:var(--surface);color:var(--text);
  border-radius:7px;min-width:22px;height:23px;cursor:pointer;font-size:12px;padding:0 6px}
.pc-quota-ctl button:hover{border-color:var(--accent-line)}
.pc-quota-ctl input{width:62px;height:23px;text-align:center;border:1px solid var(--line);
  border-radius:7px;background:var(--surface);color:var(--text);font-size:12.5px;outline:0}
.pc-quota-warn{color:var(--red);font-weight:600}
/* 2026-10-06 双口径：plan/list 的"计划条数"作低亮辅助提示，不抢"已发 N"主显示 */
.pc-quota-plan{opacity:.6;font-size:11px;cursor:help;padding:0 4px;border:1px dashed var(--line-2);border-radius:4px}
.au-quota-plan{opacity:.55;font-size:11px;color:var(--text-2);margin-top:2px}
/* 人群侧那行只读提示（原来是个可编辑输入框，已降级） */
#auLimitNote{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:8px;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--text)}
.pc-miniset .pillset button,.pc-miniset button{padding:2px 8px;font-size:11px}
.pc-thumb{width:100%;height:110px;object-fit:cover;border-radius:9px;background:var(--surface-2)}
/* 图片加载失败的占位：保持与真图**同样尺寸**，卡片不会因为图没了而变形跳版 */
.pc-thumb-ph{background:var(--surface-2) center/60% no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.6'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='8.5' cy='9.5' r='1.5'/><path d='M21 16l-5-5-6 6-2-2-5 5'/></svg>")}
/* ★ 拉取失败：顶部红条（铁律——失败必须显眼，不能"看着像没反应"） */
.pc-fail{background:var(--danger-bg, #fdecea) !important;border:1px solid var(--danger, #d93025) !important;border-radius:8px;padding:7px 10px}
.pc-fail .mini{color:var(--danger, #d93025) !important;font-weight:600}
.pc-row2{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pc-dimg{width:100%;max-height:220px;object-fit:cover;border-radius:10px;background:var(--surface-2)}

/* ============================================================
   渠道卡「下段：执行条」（2026-10-05 合并「任务进程」进「推送配置」）
   ------------------------------------------------------------
   老板要的是「配什么 → 用什么人 → 一键启动 → 看日志」在一个地方完成。
   所以每张渠道卡 = 上段配置（商品/口径/文案）+ 下段执行（启停/状态/命令/日志）。
   ★ 视觉上必须和上段的"配置"区分开：用虚线分隔 + 略深底，让人一眼知道
     "上面是摆设参数、下面是真的会跑出去的那台机器"。
   ============================================================ */
.pc-exec{margin-top:auto;border-top:1px dashed var(--line-2);padding-top:8px;display:flex;flex-direction:column;gap:7px}
.pc-exec-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pc-exec-h .pc-exec-t{font-size:11.5px;opacity:.6;letter-spacing:.02em}
.pc-exec-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pc-exec-btns button{padding:4px 12px;font-size:12px;border-radius:8px}
/* 运行态徽标：绿=在跑 / 灰=已停 / 橙=刚活动 / 红=该跑没跑 */
.pc-exec-state{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:2px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.pc-exec-state .dot{width:7px;height:7px;border-radius:50%;background:#9aa0a6;flex:0 0 auto}
.pc-exec-state.run .dot{background:#1a9c4a;box-shadow:0 0 0 3px rgba(26,156,74,.16)}
.pc-exec-state.run{color:#1a7a3c;border-color:#bfe3cc;background:#eefaf1}
.pc-exec-state.alert .dot{background:#d9363e;box-shadow:0 0 0 3px rgba(217,54,62,.14)}
.pc-exec-state.alert{color:#b3262d;border-color:#f7c6c8;background:#fdecec}
.pc-exec-state.recent .dot{background:#d98a00}
/* 对外发送的红标：一眼分清"预演"和"真发"（钱路径红线，不能只在日志里说） */
.pc-exec-fire{font-size:10.5px;padding:1px 7px;border-radius:999px;border:1px solid #f0b9bc;background:#fdecec;color:#b3262d}
.pc-exec-safe{font-size:10.5px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);opacity:.7}
/* 命令预览：等宽、可横向滚，不折行（折行会让人看不出参数边界） */
.pc-exec-cmd{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.55;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;
  overflow-x:auto;white-space:pre;color:var(--text);opacity:.92}
.pc-exec-cmd b{color:var(--accent);font-weight:650}
/* 参数来源说明：告诉人"哪几个值跟着上面的配置走、哪几个还是卡片写死的" */
.pc-exec-note{font-size:11px;line-height:1.6;opacity:.7}
.pc-exec-note.warn{color:#b3262d;opacity:1}
/* 卡片内日志窗：与全局任务卡一样的黑底（保持一致认知），但更矮（渠道卡本身不高） */
.pc-exec-log{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.6;
  background:#15171c;color:#d6dae0;border-radius:8px;padding:7px 9px;height:96px;overflow:auto;
  white-space:pre-wrap;word-break:break-all;margin:0}
.pc-exec-log:empty::before{content:'（还没跑过 · 日志会出现在这里）';opacity:.4;color:#8a9099}
/* ★ 2026-10-05 新增：渠道卡上的「发送进度」行。
   三态必须视觉分开：读取中（灰·斜体）｜未知（橙·不可当 0）｜有数字（正常 + 进度条） */
.pc-exec-prog{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;line-height:1.6;
  margin:2px 0 6px;padding:5px 9px;border-radius:7px;background:var(--panel-2,rgba(0,0,0,.035));
  border:1px solid var(--line,rgba(0,0,0,.08))}
.pc-exec-prog.loading{opacity:.55;font-style:italic}
.pc-exec-prog.unknown{color:#b26a00;border-color:rgba(178,106,0,.3);background:rgba(255,193,7,.08)}
.pc-exec-prog .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.pc-exec-prog .dot.on{background:#22a06b;box-shadow:0 0 0 3px rgba(34,160,107,.18)}
.pc-exec-prog .dot.off{background:#b6bcc6}
.pc-exec-prog .pc-exec-bar{flex:1 1 90px;min-width:60px;height:5px;border-radius:3px;background:rgba(0,0,0,.09);overflow:hidden}
.pc-exec-prog .pc-exec-bar>i{display:block;height:100%;background:var(--accent,#2f6feb);border-radius:3px}
.pc-exec-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px;opacity:.72}
.pc-exec-act a{color:var(--accent);cursor:pointer;text-decoration:none}
.pc-exec-act a:hover{text-decoration:underline}
/* 展开/收起命令与日志：默认收起命令行（卡面别太长），需要时点开 */
.pc-exec details summary{cursor:pointer;font-size:11px;opacity:.62;width:max-content;list-style:none}
.pc-exec details summary::-webkit-details-marker{display:none}
.pc-exec details summary::before{content:'▸ ';opacity:.7}
.pc-exec details[open] summary::before{content:'▾ '}
/* 运行中/异常时给卡片**整圈**描边（原来是 border-left 一道竖线，老板反馈看不清：
   三张卡并排时左边那条竖线很容易被当成卡片之间的分隔线，
   扫一眼分不出哪张在跑哪张在报警）。
   ★ 用 outline 而不是 box-shadow：.card:hover 本来就有 box-shadow，
     用它做高亮会在鼠标移上去时被 hover 的阴影盖掉（红框"闪一下没了"）。
     outline 不参与盒模型，也不影响布局和 hover 效果。 */
.pc-chancard.is-run{outline:2px solid var(--green);outline-offset:2px}
.pc-chancard.is-alert{outline:2px solid var(--red);outline-offset:2px}
/* 配置改动后，执行条上的"配置已改，命令待刷新"提示 */
.pc-exec-stale{font-size:11px;color:#8a5a00;background:#fff7e6;border:1px solid #ffe1a8;border-radius:8px;padding:3px 8px}

/* ============================================================
   抖店 · 定向投放台 v3 ——「AI 代码时代」那一版
   ------------------------------------------------------------
   为什么再改：本页 v2 只是把 12 张一模一样的卡片平铺下来 —— 每张都是
   「标题 + 一排 标签/输入框」，整页高 1900px；执行按钮、以及最关键的
   「这次到底会不会真发」，全被埋在滚动条以下。那是把纸质表单搬上屏幕。
   这一版只作用于 [data-pane="dydeal"]，取向：
     · 意图先行 —— 台头把当前参数**复述成一句中文**，另给一条命令条用一句话改参数
     · 裁决前置 —— 服务端闸门折成台头一个词（红=真发 / 橙=只预演），不再藏在页脚
     · 一次只讲一件事 —— 5 个分段（本次/已推/模板/回执/批量推），不再一屏到底
     · 流程可读 —— 本次投放三步带序号；批量推是固定 4 步，直接画出来
     · 载荷可读 —— dry-run 的裸 JSON 变结构化键值，并标出**哪一跳是写**
     · 动作在手边 —— 吸底动作条；真发按钮常红，不随滚动消失
   ★ 所有元素 id 一个没改（dd… / dp…），ddForm / loadDyDeal / loadDyPush 照旧 ——
     换的是编排与皮，不动取数与提交链路。
   ============================================================ */
.dl{display:flex;flex-direction:column;gap:16px}
.dl-grow{flex:1;min-width:0}

/* --- 台头：我在配什么 + 这次会不会真发 --- */
.dl-hero{
  border:1px solid var(--line);border-radius:var(--r-xl);padding:18px 22px 16px;
  background:radial-gradient(720px 220px at 2% -50%,var(--accent-soft),transparent 72%),var(--surface);
  box-shadow:var(--shadow-2);
}
.dl-hrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dl-eyebrow{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3);font-weight:650}
.dl-verdict{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  border-radius:var(--r-pill);padding:4px 12px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--text-2);
}
.dl-verdict i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}
.dl-verdict.wait{color:var(--text-3)}
.dl-verdict.live{background:var(--red-l);border-color:var(--red-line);color:var(--red)}
.dl-verdict.live i{animation:dlPulse 1.6s ease-in-out infinite}
.dl-verdict.dry{background:var(--orange-l);border-color:var(--orange-line);color:var(--orange)}
.dl-verdict.ok{background:var(--green-l);border-color:var(--green-line);color:var(--green)}
@keyframes dlPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.dl-verdict.live i{animation:none}}
.dl-mini{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-pill);
  padding:5px 12px;font:inherit;font-size:12px;color:var(--text-2);cursor:pointer;transition:var(--t);white-space:nowrap;
}
.dl-mini:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.dl-mini:disabled{opacity:.45;cursor:not-allowed}
/* 任务名：**无框**，靠字重和一条虚线说"这里可以改"——A 时代工具的写法 */
.dl-title{
  width:100%;border:0;border-bottom:1.5px dashed transparent;background:transparent;outline:none;
  font:650 19px/1.4 inherit;letter-spacing:-.4px;color:var(--text);padding:2px 0 6px;transition:var(--t);
}
.dl-title::placeholder{font-weight:500;color:var(--text-3);opacity:.75}
.dl-title:hover{border-bottom-color:var(--line-2)}
.dl-title:focus{border-bottom-color:var(--accent)}
/* 复述句：把 ddForm() 的结果翻译成人话（参数高亮 = 一眼看出哪个数字在生效） */
.dl-say{margin:2px 0 12px;font-size:13.5px;line-height:1.85;color:var(--text-2)}
.dl-say b{color:var(--text);font-weight:640}
.dl-say em{font-style:normal;color:var(--accent);font-weight:650;font-variant-numeric:tabular-nums}
.dl-say .dl-say-ph{color:var(--text-3);font-size:12.5px}
/* 命令条（与推送配置页的 .pc-cmdbar 同一族语言） */
/* 「任务进程 · 推送」合并页的两个分段视图（2026-10-05）：
   .jv = 页内分段容器，与 .dl-view 同一套思路（display 由 JS 切 hide） */
.jv{display:block}
.jv[data-jv]{margin-top:12px}
.dl-cmd{
  display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:var(--r);
  padding:9px 13px;background:var(--surface-2);transition:var(--t);
}
.dl-cmd:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
.dl-spark{color:var(--accent);font-size:14px;line-height:1}
.dl-cmd-inp{flex:1;border:0;background:transparent;outline:none;font:13.5px/1.6 inherit;color:var(--text);min-width:0}
.dl-cmd-inp::placeholder{color:var(--text-3);opacity:.7}
.dl-cmd kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;color:var(--text-3);background:var(--surface)}
.dl-cmdlog{font-size:12px;color:var(--text-3);min-height:15px;margin-top:7px;line-height:1.7}
.dl-cmdlog.bad{color:var(--red)}
.dl-cmdlog.ok{color:var(--green)}

/* --- 分段：一次只讲一件事 --- */
.dl-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.dl-tabs button{
  border:0;background:transparent;font:inherit;font-size:13px;font-weight:520;color:var(--text-3);
  padding:9px 14px;cursor:pointer;position:relative;border-radius:var(--r-sm) var(--r-sm) 0 0;transition:var(--t);
}
.dl-tabs button:hover{color:var(--text);background:var(--surface-2)}
.dl-tabs button.on{color:var(--accent);font-weight:650}
.dl-tabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
.dl-cnt{font-size:10.5px;color:var(--text-3);margin-left:6px;font-weight:500}
.dl-tabs button.on .dl-cnt{color:var(--accent)}

/* --- 分区：**不用卡片**。靠一条虚线 + 字重分级，少 12 个盒子 --- */
.dl-view{display:flex;flex-direction:column}
.dl-sec{border-top:1px dashed var(--line-2);padding:16px 2px 4px;display:flex;flex-direction:column;gap:12px}
.dl-view>.dl-sec:first-child{border-top:0;padding-top:6px}
.dl-sec-h{display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap}
.dl-n{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px;
  background:var(--accent);color:#fff;font-size:11.5px;font-weight:650;box-shadow:0 6px 14px -8px var(--accent);
}
.dl-ic{
  flex:0 0 22px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;margin-top:1px;
  background:var(--accent-soft);color:var(--accent);font-size:12px;
}
.dl-sec-t{flex:1;min-width:180px}
/* ★ 只作用于**直接子元素**：说明文案里还有行内 <b>（"完全不同的平台接口"），
   用后代选择器会把它们也变成块级，一句说明被拆成三行 */
.dl-sec-t>b{display:block;font-size:14px;font-weight:640;letter-spacing:-.2px;color:var(--text)}
.dl-sec-t>span{display:block;font-size:12px;color:var(--text-3);line-height:1.7;margin-top:3px}
.dl-sec-t code{font-size:11.5px}

/* --- 字段 --- */
.dl-seg{display:inline-flex;gap:3px;border:1px solid var(--line-2);background:var(--surface-2);border-radius:var(--r-pill);padding:3px}
.dl-seg button{
  border:0;background:transparent;color:var(--text-2);font:inherit;font-size:12.5px;font-weight:520;
  padding:6px 14px;border-radius:var(--r-pill);cursor:pointer;transition:var(--t);white-space:nowrap;
}
.dl-seg button:hover:not(.on){color:var(--text);background:var(--surface)}
.dl-seg button.on{background:var(--accent);color:#fff;box-shadow:0 6px 14px -8px var(--accent)}
.dl-lbl{font-size:11.5px;color:var(--text-3);letter-spacing:.2px;display:block}
.dl-lbl-s{opacity:.8;font-size:11px}
.dl-inp,.dl-num,.dl-sel,.dl-ta{
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);
  color:var(--text);font:13px/1.5 inherit;outline:none;transition:var(--t);width:100%;
}
.dl-inp{padding:8px 11px}
.dl-sel{padding:8px 11px;cursor:pointer}
.dl-ta{padding:10px 12px;min-height:76px;resize:vertical;font:12.5px/1.7 var(--mono);letter-spacing:-.2px}
.dl-ta-sm{min-height:58px}
.dl-inp:hover,.dl-num:hover,.dl-sel:hover,.dl-ta:hover{border-color:var(--accent-line)}
.dl-inp:focus,.dl-num:focus,.dl-sel:focus,.dl-ta:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
.dl-metrics{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.dl-metric{display:flex;flex-direction:column;gap:5px;flex:0 0 auto;min-width:112px}
.dl-metric>span:first-child{font-size:11.5px;color:var(--text-3)}
.dl-mi{
  display:flex;align-items:baseline;gap:4px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface-2);padding:7px 11px;transition:var(--t);
}
.dl-mi:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
.dl-mi input{border:0;background:transparent;outline:none;width:56px;font:650 14px/1.4 inherit;color:var(--text);font-variant-numeric:tabular-nums}
.dl-mi i{font-style:normal;font-size:12px;color:var(--text-3)}
.dl-f2{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:12px;align-items:start}
.dl-f3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dl-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.dl-field>span{font-size:11.5px;color:var(--text-3)}
.dl-opt,.dl-req{font-style:normal;font-size:10.5px;margin-left:5px;padding:1px 6px;border-radius:var(--r-pill)}
.dl-opt{background:var(--surface-3);color:var(--text-3)}
.dl-req{background:var(--orange-l);color:var(--orange)}
.dl-parse{font-size:11.5px;color:var(--text-3);display:flex;gap:10px;flex-wrap:wrap;line-height:1.7}
.dl-parse b{color:var(--text-2)}

/* --- 按钮（抽屉 .dr-btn 同族：主 / 次 / 危险三档） --- */
.dl-btn{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);
  padding:8px 15px;font:inherit;font-size:13px;font-weight:520;color:var(--text-2);cursor:pointer;transition:var(--t);white-space:nowrap;
}
.dl-btn:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.dl-btn:disabled{opacity:.45;cursor:not-allowed}
/* ★ 真实写入 = 红。这颗按钮会改平台上的佣金，颜色必须和"预演"分开 */
.dl-btn.dl-danger{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 10px 22px -14px var(--red)}
.dl-btn.dl-danger:hover:not(:disabled){background:var(--red);color:#fff;filter:brightness(.94)}

/* --- chip 开关（替代裸 checkbox；input 仍是真身，零 JS 迁移） --- */
.dl-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dl-chip{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--r-pill);padding:6px 13px;font-size:12.5px;color:var(--text-2);cursor:pointer;
  transition:var(--t);user-select:none;position:relative;
}
.dl-chip:hover{border-color:var(--accent-line);color:var(--accent)}
.dl-chip input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.dl-chip .dl-tick{width:11px;font-size:10px;color:transparent;transition:var(--t)}
.dl-chip:has(input:checked){background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600}
.dl-chip:has(input:checked) .dl-tick{color:var(--accent)}

/* --- 批量推的固定 4 步：写出来，别让人猜 --- */
.dl-flow{counter-reset:dlf;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;list-style:none}
.dl-flow li{counter-increment:dlf;border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;background:var(--surface-2)}
.dl-flow li::before{
  content:counter(dlf);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--surface-3);color:var(--text-2);font-size:10.5px;font-weight:650;margin-bottom:7px;
}
.dl-flow li b{display:block;font-size:12.5px;font-weight:640;color:var(--text);margin-bottom:3px}
.dl-flow li span{display:block;font-size:11.5px;color:var(--text-3);line-height:1.65}

/* --- 载荷：结构化键值 + "哪一跳是写" --- */
.dl-plan{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);padding:13px 15px;min-height:52px}
.dl-plan-ph{font-size:12.5px;color:var(--text-3);line-height:1.75}
.dl-plan-h{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.dl-plan-h b{font-size:13px;font-weight:640}
.dl-hops{display:flex;flex-direction:column;gap:6px}
.dl-hop{display:flex;align-items:center;gap:8px;font-size:12.5px;flex-wrap:wrap}
.dl-hop code{font-family:var(--mono);font-size:11.5px;background:var(--surface-3);padding:2px 7px;border-radius:var(--r-xs);color:var(--text-2)}
.dl-write{color:var(--red);font-weight:650;font-size:11.5px}
.dl-ro{color:var(--green);font-weight:650;font-size:11.5px}
.dl-kv{display:flex;flex-direction:column;margin-top:10px}
.dl-kvr{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;padding:6px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dl-kvr:last-child{border-bottom:0}
.dl-kvr>i{font-style:normal;font-size:11.5px;color:var(--text-3)}
.dl-kvr>span{font-size:12.5px;color:var(--text);word-break:break-all;line-height:1.65}
.dl-kvr>span.mono{font-family:var(--mono);font-size:12px}
.dl-fold{border-top:1px dashed var(--line-2);padding-top:8px}
.dl-fold>summary{cursor:pointer;font-size:12px;color:var(--text-3);list-style:none;display:flex;align-items:center;gap:7px;padding:3px 0;transition:var(--t)}
.dl-fold>summary::-webkit-details-marker{display:none}
.dl-fold>summary::before{content:"▸";font-size:10px;transition:transform var(--t)}
.dl-fold[open]>summary::before{transform:rotate(90deg)}
.dl-fold>summary:hover{color:var(--accent)}
.dl-fold pre{margin-top:8px;max-height:320px;overflow:auto;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;font-size:11.5px}

/* --- 客户关怀·自动发送 卡里的折叠块（2026-10-11）---
   为什么加：计划清单原来 N 单就 N 行**常驻在正式订单列表上方**，单量一多就把订单顶出首屏。
   现在重内容（黄金档说明 / 本轮计划清单）默认收起，抬头只占一行。
   ★ 折叠块内**限高 + 内部滚动**：即便展开，也不再随单量把页面撑长（订单列表位置恒定）。 */
.dl-fold.ca-fold{border-top:1px dashed var(--line-2);margin:6px 0}
.dl-fold.ca-fold>summary{font-size:12.5px;color:var(--text-2);font-weight:600}
.dl-fold.ca-fold>summary>.mini{font-weight:400;color:var(--text-3)}
.ca-fold-b{padding-top:6px}
.ca-plan{max-height:340px;overflow:auto;overscroll-behavior:contain}

/* --- 吸底动作条：执行按钮不随滚动消失 ---
   ★ 必须给它留出**同高的下方空间**：sticky 元素在钉住时是"视觉下移"，
     不留空档它会直接盖住最后一行输入框（第一版就盖住了「结束日期」）。 */
.dl-actbar{
  position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:16px;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);backdrop-filter:blur(12px);box-shadow:var(--shadow-2);
}
.dl-view:has(> .dl-actbar),.dl-view:has(> section>.dl-actbar){padding-bottom:76px}
.dl-act-note{font-size:11.5px;color:var(--text-3);line-height:1.6}

/* --- 列表：模板/策略用「行卡」，台账/回执用「时间轴」 --- */
.dl-list{display:flex;flex-direction:column}
.dl-row{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px 14px;margin-bottom:8px;transition:var(--t)}
.dl-row:hover{border-color:var(--accent-line);box-shadow:var(--shadow-1)}
.dl-row-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;font-weight:620;color:var(--text)}
.dl-row-m{font-size:11.5px;color:var(--text-3);line-height:1.8;margin-top:3px;word-break:break-word}
.dl-row-x{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.dl-row-x .dl-btn{padding:5px 11px;font-size:12px}
.dl-tl{position:relative;padding:0 0 15px 22px;border-left:1px solid var(--line);margin-left:5px}
.dl-tl:last-child{border-left-color:transparent;padding-bottom:2px}
.dl-tl::before{content:"";position:absolute;left:-4.5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2)}
.dl-tl.ok::before{border-color:var(--green);background:var(--green-l)}
.dl-tl.bad::before{border-color:var(--red);background:var(--red-l)}
.dl-tl.mute::before{border-color:var(--orange);background:var(--orange-l)}
.dl-tl-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:620;color:var(--text)}
.dl-tl-m{font-size:11.5px;color:var(--text-3);line-height:1.75;margin-top:2px;word-break:break-word}
.dl-empty{color:var(--text-3);font-size:12.5px;line-height:1.8;padding:12px 0}
.dl-empty b{color:var(--text-2)}
.dl-stats .card{margin-bottom:0}

@media (max-width:900px){
  .dl-f2,.dl-f3{grid-template-columns:1fr}
  .dl-flow{grid-template-columns:1fr 1fr}
  .dl-kvr{grid-template-columns:1fr;gap:2px}
  .dl-hero{padding:15px 16px 13px}
  .dl-actbar{padding:11px 12px}
}

/* ============================================================
   定向推送 · 三步引导条（2026-10-04）
   ------------------------------------------------------------
   为什么加：三个按钮平铺，新人不知道按哪个、也不知道走到哪一步。
   设计原则：
     · **状态由真实数据算出**（勾选/改动/预演快照），不单独维护一份"当前第几步"
       ⇒ 不会和实际情况脱节（改回原值会自动退回上一步）。
     · 文案说"人话"：说清【现在做什么】和【下一步做什么】，不是只报序号。
     · 禁用时给出原因（复用 gtSelUi 已经在算的 reason），不让人猜。
   ============================================================ */
.gt-guide{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 14px;margin:0 0 12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  /* ★ 吸顶：改比例在上面的表格里，预演/发布在下面的卡片里，两个操作现场隔着一屏。
     不吸顶的话，新人改完表格一往下滚动，引导条就退出视野了 —— 而"下一步该点预演"
     这句话恰恰是在表格里改完值之后才最需要看到的。
     top 用 --pane-h（JS 按 .pane-bar 实际高度写入），不写死像素：
     那一行在不同页有高有低（有无刷新按钮），写死会出现错位或被压住。 */
  position:sticky;top:calc(var(--pane-h, 34px) + 6px);z-index:4;
  box-shadow:0 1px 0 var(--line);
}
.gt-guide:empty{display:none}
/* ================= 「商品与参数」公共页头（2026-10-16 · A 组） =================
   老板原话：两个标签"没有体现先后依赖，而且标签混在页面其他元素中，被淹没"。
   实测两个原因都不是文案问题：① 分段按钮只 toggle 了 `on` 类，而 style.css 里没有
   `#gateTabs button.on` 这条规则 ⇒ **点了外观毫无变化**；② 依赖条原先塞在上下文卡的
   卡中卡第三层，而那张卡只插进第①段 ⇒ 切到第②段时整条依赖链被一起 hide。
   现在 ①/② 用项目标准 `.seg`（选中态 = 蓝底白字，与财务五页签同一套观感），
   依赖条与分段合成**同一个 DOM 元素** `#gateHead`，由 `gateView()` 搬到当前可见的那一段。
   ★ `.seg` 的 padding 是 3px，默认那圈灰底与其它 `.bar` 并排时会"陷进去" ⇒
     这里给页头容器加下边距，并把分段与依赖条的间距拉开。 */
.gate-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  /* ★ margin 必须显式覆盖 `.bar` 的 `margin:16px 0 18px`：页头要贴在页顶，
     上面多出 16px 会把它推下去（而它上面正好还有 .pane-bar，视觉上会粘在一起）。 */
  padding:10px 14px;margin:0 0 10px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);
}
.gate-head .seg button{font-size:12.5px;display:inline-flex;align-items:baseline;gap:6px;padding:6px 14px}
.gate-head .seg button .mini{color:inherit;opacity:.72;margin:0}
/* ★ 选中那一档在 hover 时**不能变回灰底蓝字**：`.bar button:hover`（0-2-1）会盖掉
   `.seg button.on` 的背景，于是"选中的那段"一悬停就看着像没选中 —— 而这次改动的
   全部意义就是让选中态始终可见。这里把 hover 态按 `.seg button.on:hover` 的同款语义补上。 */
.gate-head .seg button.on:hover{background:var(--accent-h);color:#fff}
/* 依赖条：三段之间的箭头复用 `.gt-arrow`（同一条链，观感要一致） */
.gate-head #promoDep{margin-top:0;flex:1 1 100%}
/* ★ 当前所在的那一段：依赖条上的胶囊必须与分段按钮**同一套语言**（蓝底白字），
   否则"本段"这个结论又要靠猜。`.pill.on` 是这里新立的唯一一处。 */
.pill.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* ★ 引导条的作用域标签（2026-10-16）：同屏原有三套编号（①② / 引导条 1-2-3 /
   「第 2 步：预演」），新人看不出它们说的不是同一件事 —— ①② 是**页面分段**，
   1/2/3 是**第①段内部**的三步。这个标签把后者钉在第①段里，编号就不再打架。 */
.gt-scope{
  font-size:11.5px;color:var(--text-3);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:2px 9px;margin-right:2px;white-space:nowrap;
}
/* ★ 吸顶的代价：sticky 元素仍占原位，内容会从它**底下**滚过去。
   所以凡是可能被吸顶条盖住的卡片，都要留出它的高度（滚动定位用 scroll-margin，
   它同时决定"滚到某卡片时把它顶到可见区"的位置）。
   不写这一条的实际后果（截图抓到）：表格第一行商品名被引导条压住看不见 ——
   而那一行正是要勾选/改比例的行，看不见就等于没法操作。 */
.gt-guide ~ .card{scroll-margin-top:calc(var(--pane-h, 34px) + 84px)}
/* 三步进度：已完成 ✓ / 当前 高亮 / 未到 置灰 */
.gt-step{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 8px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);min-width:0}
.gt-step .n{
  width:20px;height:20px;flex:0 0 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;
  background:var(--surface-3);color:var(--text-3);
}
.gt-step .t{font-size:13px;color:var(--text-3);white-space:nowrap}
.gt-step.on{background:var(--accent-soft);border-color:var(--accent-line)}
.gt-step.on .n{background:var(--accent);color:#fff}
.gt-step.on .t{color:var(--accent);font-weight:500}
.gt-step.done .n{background:var(--green);color:#fff}
.gt-step.done .t{color:var(--green)}
.gt-arrow{color:var(--text-3);font-size:13px;user-select:none}
/* 右侧的"现在该做什么"，是给新人的主提示 */
.gt-guide-msg{font-size:13px;color:var(--text-2);flex:1;min-width:180px}
.gt-guide-msg b{color:var(--text)}
.gt-guide-msg .hint{display:block;color:var(--text-3);font-size:12px;margin-top:2px}
/* 闸门拦下时整条转成警示色（比灰掉更有信息量） */
.gt-guide.blocked{background:var(--orange-l);border-color:var(--orange-line)}
.gt-guide.blocked .gt-guide-msg b{color:var(--orange)}
/* 发布成功后变绿，形成闭环 */
.gt-guide.fin{background:var(--green-l);border-color:var(--green-line)}
.gt-guide.fin .gt-guide-msg b{color:var(--green)}
/* 「批量填入」是可选操作，用名称本身示意就够了（按钮文案已带"（可选）"）。
   ★ 这里原来还有一条 #gtApply::after{content:"（可选）"}，和 HTML 里的"（可选）"叠在一起，
     页面上会显示成"批量填入（可选）（可选）"。而且 ::after 生成的内容读不到 textContent，
   留两条等于两个真相来源 —— 删掉 CSS 这条，只认 HTML 里写死的那一份。 */
#gtApply{border-style:dashed}
@media (max-width:820px){
  .gt-guide{gap:8px}
  .gt-step .t{font-size:12px}
  .gt-guide-msg{min-width:100%}
}

/* ============================================================
   ⑤ 推送记录（2026-10-05）
   ------------------------------------------------------------
   8 列固定网格。列模板**必须同时给表头和行**（.plg-head 与 .plg-row 写在同一条规则里）——
   只给表头设了列模板的话，行会退回单列，而"列数检查"照样通过，
   看上去正常、实际全挤成一坨（这个坑本项目已经踩过一次，见 MEMORY 列表页列错位）。
   ============================================================ */
.plg-head,.plg-row{display:grid;
  grid-template-columns:118px 78px 96px minmax(150px,1.5fr) minmax(130px,1.2fr) 96px 68px minmax(200px,2fr);
  gap:10px;align-items:center}
/* ★ 表头吸顶，top 必须**让开 .pane-bar**：那条状态栏也是 sticky;top:0;z-index:5，
   表头若也写 top:0 就会被它盖住半行（半透明背景 + blur ⇒ 症状是"字叠字"，
   只在滚到第二页才显形，第一页截图抓不到）。
   z-index 取 3：必须低于 .pane-bar 的 5，否则反过来盖住状态栏。 */
.plg-head{position:sticky;top:var(--pane-h,34px);z-index:3;
  padding:7px 10px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);
  font-weight:600;background:var(--surface)}
.plg-row{padding:8px 10px;border-bottom:1px solid var(--line)}
.plg-row:hover{background:var(--accent-l)}
/* 推送记录的五块统计卡：**一行五列**，不跟通用 .grid g4 走。
   挂在 g4 上时第五块会掉到第二行、孤零零一个（实测截图确认过，很难看）。
   窄屏降级成两行，不让它挤成一团。 */
.plg-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}
@media (max-width:1100px){.plg-stats{grid-template-columns:repeat(3,1fr)}}
.plg-stats .card{margin-bottom:0}
@media (max-width:760px){.plg-stats{grid-template-columns:repeat(2,1fr)}}
/* 商品名一律**单行省略**（title 里给全名，鼠标悬停能看到）：
   商品全名普遍 25~35 字（"2026新鲜云南冰糖橙新鲜当季手剥甜橙薄皮多汁青皮甜橙"），
   换行会把行高撑成两倍 —— 实测一屏只剩 6~7 行，扫表格变得很费劲。
   对象列（达人昵称）短、平台原话列需要看全，两者都保留换行。 */
.plg-row>div:nth-child(4){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 平台原话列：失败原因通常较长，允许换行看全（省略号+title 只能看到一半，
   而"平台到底说了什么"正是这一页最该看清的信息） */
.plg-msg{line-height:1.5;word-break:break-word}
@media (max-width:1100px){
  .plg-head,.plg-row{grid-template-columns:110px 70px 90px minmax(120px,1.4fr) minmax(110px,1.2fr) 84px 62px minmax(160px,1.6fr);gap:8px}
}

/* ================= 财务中心 · P2 录账表单 =================
   为什么单独一套：财务录入是"少字段、强校验、要看清报错"的场景，
   复用 .filters 会导致字段挤成一行、报错没地方放。
   三条原则：① 字段自动换行 ② 必填有红星 ③ 报错/提醒有专门一行（不塞 placeholder）。 */
.fin-form{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2)}
.fin-form-h{font-weight:620;font-size:13.5px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.fin-form-h .mini{font-weight:400;color:var(--text-3)}
.fin-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 14px}
.fin-fields label{display:flex;flex-direction:column;gap:5px;color:var(--text-2);font-size:12px}
.fin-fields label>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-fields .req{color:var(--red);font-weight:700}
.fin-fields input,.fin-fields select{
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:7px 10px;font-size:12.5px;
  background:var(--surface-2);color:var(--text);outline:none;transition:var(--t);width:100%;
}
.fin-fields input:focus,.fin-fields select:focus{border-color:var(--accent);background:var(--surface)}
.fin-fields .ff-check{flex-direction:row;align-items:center;gap:8px;grid-column:1/-1;font-size:12.5px;cursor:pointer}
.fin-fields .ff-check input{width:auto}
.fin-form-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.fin-form-act .mini{color:var(--text-3)}
.fin-form-act .ok-txt{color:var(--green)}
.fin-form-act .bad-txt{color:var(--red)}

/* ---------- 自然语言录账（AI 帮填）----------
   位置：表单最上方（比手填格子更省事，所以放前面）。
   ★ 视觉上必须让人看出"这是 AI 在帮忙，不是已经录进去了"：
     · 这一块单独一个虚线框，跟下面的"正式字段"分开
     · 底部那句 tip 明写"AI 只填格子、不会落盘"
   ★「哪些是 AI 填的」用**绿框**（.fin-ai）标出来 —— 跟手填的字段区分开，
     人一眼知道该重点核哪几个格子。 */
.fin-nl{
  border:1px dashed var(--accent-line);background:var(--accent-soft);border-radius:var(--r);
  padding:11px 13px;margin-bottom:14px;
}
.fin-nl-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.fin-nl-bar input[type=text]{
  flex:1;min-width:220px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 11px;
  font-size:12.5px;background:var(--surface);color:var(--text);outline:none;transition:var(--t);
}
.fin-nl-bar input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.fin-nl-bar button{
  border:1px solid var(--accent-line);background:var(--surface);border-radius:var(--r-sm);
  padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer;
  transition:var(--t);white-space:nowrap;
}
.fin-nl-bar button:hover:not(:disabled){background:var(--accent);color:#fff;border-color:var(--accent)}
.fin-nl-bar button:disabled{cursor:progress;opacity:.6}
.fin-nl-tip{margin-top:7px;color:var(--text-3);line-height:1.7}
.fin-nl-tip b{color:var(--text-2)}
.fin-nl-msg{margin-top:8px;font-size:12px;line-height:1.85;color:var(--text-2)}
.fin-nl-msg .ok-txt{color:var(--green)}
.fin-nl-msg .bad-txt{color:var(--red)}
/* 「绿框 = AI 填的」—— 图例和实际标记用同一个变量，改了不会漏 */
.fin-ai-legend{color:var(--green);font-weight:650}
.fin-fields input.fin-ai,.fin-fields select.fin-ai{
  border-color:var(--green);background:var(--green-l);box-shadow:inset 3px 0 0 var(--green);
}
.fin-fields input.fin-ai:focus,.fin-fields select.fin-ai:focus{border-color:var(--green);box-shadow:0 0 0 4px var(--green-l)}

/* ============================================================
   商品管理 · 本地商品档案（2026-10-07）
   为什么单独一套 class（不复用 .plg-* / .cm-*）：本项目踩过 —— 复用别的表的 class
   会把列压错位（`.cm-row` 是 9 列固定网格，套到 8 列表上后 3 列全挤成一团）。
   两条硬约束直接写在这条规则里：
     · 列模板**表头与行写在同一条规则**（只给表头设 ⇒ 行退回单列，而"列数检查"照样通过）；
     · 表头吸顶 top 必须让开 .pane-bar（--pane-h），z-index 3（低于 .pane-bar 的 5）。
   ============================================================ */
.pr-head,.pr-row{display:grid;
  /* ★ 2026-10-14：最前面加了 26px 的勾选列（关怀挂载只在这一页做）；
     同日后又补了尾部三列推广侧数字（定向计划 / 定向达人 / 上橱窗达人，运行时注入，见 prdSelMount）。
     列模板**表头与行写在同一条规则**（只给表头设 ⇒ 行退回单列，"列数检查"照样骗过人）。
     ★ 尾部三列给的是**数字**（最多 5 位），所以压到 62~74px；列名最长的「上橱窗达人」
       5 个字约 58px + 排序箭头留的 11px ⇒ 74px 刚好放得下。
     ★★★ 2026-10-19 再补**两列公开佣金**（达人公开佣 / 机构公开佣，老板要的）：
       值最长是 "28.5%"（5 个字符，右边对齐）⇒ 66px 够；列名 5 个字 ≈ 58px + 排序箭头 11px ⇒ 70px。
       **两个数必须两列**：一个是给达人的（type=100 全量计划），一个是给机构的（总包），
       合成一格会被读成"一共给了两倍"（口径见 src/capability/pm-commission.mjs 文件头）。
     ★★ 宽度后果（实测 docs/archive/bin-probes/_verify-prd-width.mjs，2026-10-14；15 列按同法推算）：
       15 列合计约 **1480px**，而内容区宽度 = 窗口 − 侧栏(约 250) − 内边距 ⇒
       窗口 ≥ 1750px 时全部放得下；再窄**不是被裁掉**，而是外层 `.main`（overflow:auto）
       出现横向滚动条、往右拖即可 —— 所以列不会丢，但窄屏要拖。
       若哪天要压到 1440 笔记本也不用拖，就得砍列或把尾部几列挤成两行表头。 */
  grid-template-columns:26px minmax(230px,2.4fr) 66px 104px 118px 86px minmax(96px,1fr) 96px 104px 66px 62px 62px 74px 70px 70px;
  gap:10px;align-items:center}
.pr-head{position:sticky;top:var(--pane-h,34px);z-index:3;padding:7px 10px;
  font-size:11.5px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);background:var(--surface)}
.pr-head>div,.pr-row>div{min-width:0}
.pr-head .num,.pr-row .num,.pr-sku .num{text-align:right;font-variant-numeric:tabular-nums}
.pr-row{padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.pr-row:hover{background:var(--accent-l)}
/* 商品名 25~35 字很常见 ⇒ **单行省略**（全名放 title）；换行会把行高翻倍、一屏只剩 6~7 行 */
.pr-p{display:flex;gap:8px;align-items:center;min-width:0}
.pr-p img,.pr-noimg{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:0 0 auto;background:var(--surface-3);border:1px solid var(--line)}
.pr-t{min-width:0}
.pr-t b{display:block;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- 商品 ID / 链接：点一下即复制（2026-10-14）----------
   ★ 为什么要 stopPropagation（写在行内 onclick 里）：整行的点击是"展开/收起"，
     ID 和链接长在行内 ⇒ 不拦事件的话，想复制的人点一次就展开一行、还复制不到。
   ★ 视觉上必须**看得出可以点**：虚线底边 + hover 变主题色 + cursor:copy。
     否则没人会去点一个看起来是纯文本的 ID（这个功能的失败方式和"没做"是一样的）。 */
.pr-ids{display:flex;align-items:center;gap:8px;min-width:0}
.pr-copy{cursor:copy;border-bottom:1px dashed var(--line-2,var(--line));flex:0 0 auto}
.pr-copy:hover{color:var(--accent);border-bottom-color:var(--accent)}
.pr-link{font:inherit;font-size:11.5px;line-height:1.5;padding:0 6px;border-radius:var(--r-xs);
  border:1px solid var(--line-2,var(--line));background:transparent;color:var(--text-2,var(--muted));
  cursor:pointer;flex:0 0 auto;transition:var(--t)}
.pr-link:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.pr-link:disabled{opacity:.6;cursor:progress}
.pr-sync{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600}
.pr-sync:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
/* 推广侧三列：数字（有人/有计划）+ 真 0（灰，那是"确定了是 0"）+ 台账无（"不知道"）三态分开。
   ★ 三态**各自有独立样式**不是装饰：如果都画成灰色的 0，看的人分不出
     "这个商品真没定向"和"我根本没采到这个商品的台账"，而这两件事的处理方式完全不同。 */
.pr-tal{font-weight:600;font-variant-numeric:tabular-nums}
.pr-tal.zero{font-weight:400;color:var(--muted)}
/* 定向达人逼近"1 条链接上限 1 万人"时标红：那是**要再开一条计划**的信号 */
.pr-tal.full{color:var(--red)}
.pr-tal-none{white-space:nowrap;border-bottom:1px dotted var(--line-2,var(--line));cursor:help}
.pr-talhead{white-space:nowrap;text-align:right}
/* 漏斗块底部的"哪些是平台数、哪些是本地台账数"警示条 —— 这两个口径混着看会得出错误结论，
   所以它必须比正文更显眼，不能是一行灰字。 */
.pr-fn-warn{margin-top:6px;padding:6px 8px;border-left:3px solid var(--orange);border-radius:0 var(--r-xs) var(--r-xs) 0;
  background:color-mix(in srgb,var(--orange) 9%,transparent);line-height:1.55}
.pr-fn-warn code{font-size:11px}
/* 到手价 = 这一页的主角，靠**字重**突出；省下的差额用红（电商语境红=优惠，且全行只有这一处红） */
.pr-sd{font-weight:700}
.pr-save{color:var(--red);font-weight:600}
/* 规格明细是**行的兄弟节点**（不能塞进 .pr-row：那会成为第 9 个格子、整行错位） */
.pr-detail{padding:4px 10px 12px 52px;border-bottom:1px solid var(--line);background:var(--accent-l)}
/* 第 7 列「销量」是 2026-10-10 加的（平台不按 SKU 下发销量 ⇒ 走本地订单快照汇总结论）。
   ★ 宽度给 104px：表头是「销量 · 近 90 天」（带区间口径），窄了会折成两行、把表头撑高。 */
.pr-sku-head,.pr-sku{display:grid;grid-template-columns:120px minmax(120px,1.6fr) 92px 92px 92px 72px 104px;gap:10px;align-items:center}
.pr-sku-head{padding:4px 0;font-size:11.5px;color:var(--muted);font-weight:600}
.pr-sku{padding:5px 0;font-size:12.5px;border-top:1px dashed var(--line)}
/* 「销量」三态**必须看得出区别**（本项目铁律：不许把"不知道"画成"没有"）：
   有数=深色加粗；确定是 0=灰（真的没人买）；没采到=浅灰虚线底 + tooltip 说明缺哪段。 */
.pr-sold{font-weight:700;font-variant-numeric:tabular-nums}
.pr-sold.zero{font-weight:400;color:var(--muted)}
.pr-sold-none{border-bottom:1px dotted var(--line-2,var(--line));cursor:help;opacity:.75}
/* 展开行底部的口径说明：挡住"两个都叫销量的数被混着读"这个最容易犯的错 */
.pr-sku-note{margin-top:8px;padding:7px 10px;border-radius:8px;font-size:12px;line-height:1.7;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-3,var(--muted))}
.pr-sku-note.warn{border-left:3px solid var(--orange);background:color-mix(in srgb,var(--orange) 8%,transparent)}
.pr-sku-note b{color:var(--text-1,inherit)}
.pr-sku-note .sep{margin:0 6px;opacity:.45}
.pr-sku-note .mini{margin-top:3px;line-height:1.65}
/* ============================================================
   展开行分两栏（2026-10-16）：左 = 事实（规格摘要 + 逐档表），右 = 动作（tab + 面板）
   ------------------------------------------------------------
   为什么：原来三者竖着叠（摘要 → 逐档表 → tab → 面板），逐档规格被"动作"那段往下推；
   分栏后并排，竖向省一截，而且"看事实"与"做动作"在视觉上分得开
   （本项目一贯口径：事实与意图不共用一格）。
   ★ 窄屏（<1400px）退回单栏 —— 两栏要 900px 以上才够用，再窄会把规格表压到读不了。
   ============================================================ */
.pr-2col{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;align-items:start}
.pr-facts,.pr-acts{min-width:0}
/* 右栏里的 tab 条不再需要上边距（左边已经给了空间） */
.pr-acts .pr-tabs{margin-top:0}
@media (max-width:1400px){.pr-2col{grid-template-columns:1fr}}

.pr-skusum{display:flex;align-items:center;gap:10px;padding:7px 10px;margin-top:6px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;
  font-size:12px;transition:var(--t)}
.pr-skusum:hover{border-color:var(--line-2);background:var(--surface-2)}
.pr-skusum.on{border-color:var(--accent-line);background:var(--accent-soft)}
.pr-skusum .t{font-weight:700;font-size:12.5px;white-space:nowrap}
.pr-skusum .s{color:var(--text-2);white-space:nowrap}
.pr-skusum .x{margin-left:auto;color:var(--accent);font-size:11.5px;white-space:nowrap}
.pr-skusum .mini{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32%}
/* ---- 面板切换：下划线 tab（2026-10-16 老板：「把按钮改成tab页切换。样式目前按钮不好看」）----
   ★ 为什么不用现有 `.seg`（胶囊分段控件）：那套在项目里是"同一实体换口径"（财务五页签 /
     结算口径 / 运费抽屉），这里是"切面板"；再堆第三个胶囊只会更花。下划线 tab 更轻。
   ★ 收起 ≠ 藏起来：tab 上有"要留意"的橙点（.dt），当前面板标题下一行给那句话（.pr-tabsum）。
   ★★ 2026-10-17 `overflow-y:hidden` 不是可有可无的装饰，是**滚轮 bug 的修法**：
     只写 `overflow-x:auto`，按 CSS 规范另一轴的 `visible` 会算成 `auto`
     ⇒ 这条 tab 条其实是个**双向**滚动容器，滚轮落到它身上时第一格被它吞掉。
     实测（tmp/_diag-pm-wheel3.mjs）：滚 2 格只走 100px（该走 200px），
     补上 `overflow-y:hidden` 后 2 格走满 200px。老板报的「鼠标停在展开行上滚轮滚不动」
     就是这一类（展开行的 tab 条正好横在光标下）。
     完整实测见 docs/fix-商品管理-滚轮与滚动条-20261017.md。 */
.pr-tabs{display:flex;border-bottom:1px solid var(--line-2);margin:10px 0 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.pr-tabs::-webkit-scrollbar{height:5px}
.pr-tabs::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.pr-tab{border:0;background:transparent;font:inherit;color:var(--text-3);font-size:12.5px;font-weight:600;
  padding:7px 11px 9px;white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  display:inline-flex;align-items:center;gap:6px;transition:color .14s ease,border-color .14s ease}
.pr-tab:hover{color:var(--text)}
.pr-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.pr-tab:focus-visible{outline:2px solid var(--brand,#0a7d43);outline-offset:-2px}
/* 张数/条数标记：只在"有数"时才画（0 不画 —— 免得每个 tab 都挂个 0） */
.pr-tab .cnt{font-family:var(--mono);font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;
  background:var(--surface-3);color:var(--text-2)}
.pr-tab.on .cnt{background:var(--accent);color:#fff}
/* "这一项要留意"：非在售 / 券读不到 / 抖店规格未接 / 漏斗不适用 / 没挂关怀话术 */
.pr-tab .dt{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:0 0 6px}
.pr-tabsum{display:flex;align-items:flex-start;gap:8px;padding:8px 2px;font-size:12px;
  color:var(--text-2);line-height:1.7;border-bottom:1px dashed var(--line)}
.pr-tabp{padding:10px 2px 2px}
/* 进了面板 ⇒ 块自己的外壳（边框/内边距/上边距）让位给面板，免得套两层框 */
.pr-tabp>.pr-pset,.pr-tabp>.pr-sset,.pr-tabp>.cn-hit,.pr-tabp>.pr-cpn-box,.pr-tabp>.pr-funnel{
  margin-top:0;padding:0;background:transparent;border:0;border-radius:0}
.pr-tabp>.pr-pset>.pr-pset-h,.pr-tabp>.pr-sset>.pr-sset-h{display:none}   /* 标题已在 tab 上 */
/* ============================================================
   展开行里的区块折叠（2026-10-11 老板定稿 A）
   ------------------------------------------------------------
   为什么加：展开一行原来是 6 块平铺（规格表 / 销量说明 / 设定到手价 / 优惠券 / 推广漏斗 / 关怀话术），
   一行要滚很久，而每天真正要看的只有规格表那一块。
   规则：**设定到手价 / 优惠券 / 推广漏斗 默认收起**，其余保持展开。
   实现：原生 `<details>/<summary>` —— 键盘可达（Enter/Space）、**正文仍在 DOM**（输入草稿与
        验收脚本都还能读到），且收起时前端**不生成正文**（= 不打那次平台请求）。
   ★ 收起 ≠ 藏起来：`<summary>` 里必须有一句摘要（.pr-fold-s）；出错/读不到一律自动展开。
   ============================================================ */
.pr-fold{margin-top:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);overflow:hidden}
.pr-fold>summary{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;list-style:none;user-select:none}
.pr-fold>summary::-webkit-details-marker{display:none}          /* Safari/旧 Chrome 的三角 */
.pr-fold>summary:hover{background:rgba(0,0,0,.02)}
.pr-fold>summary:focus-visible{outline:2px solid var(--brand,#0a7d43);outline-offset:-2px}
.pr-fold-t{font-size:12.5px;font-weight:700;white-space:nowrap}
.pr-fold-s{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-fold-x{margin-left:auto;flex:0 0 auto;width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-top:5.5px solid var(--muted);transition:transform .15s ease}
.pr-fold[open]>.pr-fold-x{transform:rotate(180deg)}
.pr-fold-b{padding:0 10px 10px}
/* 正文里各块自己的上边距由折叠块接管（否则展开后顶部多一截空白） */
.pr-fold-b>.pr-pset:first-child,.pr-fold-b>.pr-cpn-box:first-child,.pr-fold-b>.pr-funnel:first-child{margin-top:0}
/* 进了折叠块 ⇒ 标题已在 <summary> 上，正文不再重复一个「设定到手价」小标题。
   ★ 必须带 `.pr-fold-b>` 前缀：`.pr-pset` 定义在本文之后、与单类同特异度 ⇒ 不加前缀会被它覆盖。 */
.pr-fold-b>.pr-pset-infold{padding-top:0;background:transparent;border:0;border-radius:0}

/* 「设定到手价」区块（2026-10-10）：填到手价 → 反推原价 → 改标价。
   ★ 为什么单独一块、不并把上面那张表的格子改成输入框：
     上面是"平台现在是什么"（只读事实），这里是"你想让它变成什么"（写动作）。
     混在一张表里，填的目标很容易被看成当前价格 —— 改价动钱，两种状态必须分得开。 */
.pr-pset{margin-top:10px;padding:9px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.pr-pset-h{font-size:12.5px;font-weight:700;margin-bottom:6px}
.pr-pset-head,.pr-pset-row{display:grid;grid-template-columns:minmax(110px,1.5fr) 84px 92px 108px minmax(150px,1.4fr);gap:10px;align-items:center}
.pr-pset-head{padding-bottom:4px;font-size:11.5px;color:var(--muted);font-weight:600}
.pr-pset-row{padding:4px 0;font-size:12.5px;border-top:1px dashed var(--line)}
.pr-pset-head .num,.pr-pset-row .num{text-align:right;font-variant-numeric:tabular-nums}
.pr-pset-in{width:100%;padding:3px 6px;font-size:12.5px;border:1px solid var(--line);border-radius:6px;
  background:var(--surface);color:inherit;font-variant-numeric:tabular-nums}
.pr-pset-in:focus{outline:none;border-color:var(--brand,#0a7d43)}
.pr-pset-hint{font-size:11.5px;line-height:1.5}
.pr-pset-ok{color:var(--green,#0a7d43);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-pset-bad{color:var(--orange,#c2610a);font-size:11.5px;line-height:1.5}
.pr-pset-foot{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pr-pset-acts{display:flex;gap:8px}
@media (max-width:1400px){
  .pr-pset-head,.pr-pset-row{grid-template-columns:minmax(90px,1.3fr) 70px 78px 96px minmax(120px,1.2fr)}
}
/* 「修改规格名」区块（2026-10-15）：逐档逐属性改 `sku_attrs[].attr_value`。
   ★ 与改价那块刻意长得一样（同一套 .pr-pset 外壳），但网格不同：
     规格值是**文案不是数字**，当前值可能很长（"带箱5斤【果王】70mm+"）⇒ 当前值那列要
     给足宽度并允许换行，右对齐的数字网格（.pr-pset-row）照抄会把文案挤成一团。 */
.pr-sset{margin-top:10px;padding:9px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.pr-sset-h{font-size:12.5px;font-weight:700;margin-bottom:6px}
.pr-sset-head,.pr-sset-row{display:grid;
  grid-template-columns:minmax(96px,1fr) 74px minmax(110px,1.5fr) minmax(110px,1.2fr) minmax(120px,1.1fr);
  gap:10px;align-items:center}
.pr-sset-head{padding-bottom:4px;font-size:11.5px;color:var(--muted);font-weight:600}
.pr-sset-row{padding:4px 0;font-size:12.5px;border-top:1px dashed var(--line)}
.pr-sset-cur{font-size:12px;color:var(--muted);word-break:break-all;line-height:1.4}
.pr-sset-in{width:100%;padding:3px 6px;font-size:12.5px;border:1px solid var(--line);border-radius:6px;
  background:var(--surface);color:inherit}
.pr-sset-in:focus{outline:none;border-color:var(--brand,#0a7d43)}
.pr-sset-hint{font-size:11.5px;line-height:1.5}
.pr-sset-foot{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pr-sset-acts{display:flex;gap:8px;align-items:center}
.pr-sset-note{margin-top:6px;font-size:11.5px;line-height:1.6;opacity:.7}
@media (max-width:1400px){
  .pr-sset-head,.pr-sset-row{grid-template-columns:minmax(80px,.9fr) 64px minmax(96px,1.4fr) minmax(96px,1.1fr) minmax(104px,1fr)}
}
/* 优惠券区块（2026-10-07 抖店接入时补；2026-10-14 改成"本商品能用的券"，5 列 + 表脚）
   ★ 列表从"全店券清单"收窄为"本商品适用券"后，券名那列要放两行（名称 / 适用范围·类型），
     所以第一列给足宽度、优惠与门槛收窄 —— 否则 5 列在 1400px 以下的窗口会挤。 */
.pr-cpn-box{margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.pr-cpn-head,.pr-cpn{display:grid;grid-template-columns:minmax(150px,1.7fr) 72px minmax(96px,1fr) 84px minmax(104px,auto);gap:10px;align-items:center}
.pr-cpn-head{padding-bottom:4px;font-size:11.5px;color:var(--muted);font-weight:600}
.pr-cpn{padding:5px 0;font-size:12.5px;border-top:1px dashed var(--line)}
.pr-cpn .num{text-align:right;font-variant-numeric:tabular-nums}
/* 计入到手价的券：左侧一条竖线标出来 —— 它们才是决定"到手价"那一列数字的那几张 */
.pr-cpn-hit{border-left:2px solid var(--green,#2e9e5b);padding-left:8px;margin-left:-10px}
/* ★ 2026-10-10 三段式：平台券摘要段 + 已隐藏（已作废/未开始）段。
   这两段是"收起来的一段话 + 一个展开按钮"，不是逐张券，所以不套 .pr-cpn 的网格。 */
.cpn-seg{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:6px 0;border-top:1px dashed var(--line)}
.cpn-seg:first-of-type{border-top:0}
.cpn-toggle{font-size:11.5px;padding:2px 8px;white-space:nowrap}
/* 展开出来的"已作废/未开始"逐张行：压暗，明确不参与任何计算 */
.pr-cpn-dim{opacity:.66}
.pr-cpn-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding-top:6px;border-top:1px dashed var(--line)}
/* 推广漏斗（2026-10-07挂到商品管理页）：定向→发卡→上橱窗→合作四段
   ★ 必须显式定义 —— 这批类名原先一个都没有，前端写了 markup 却在CSS 里找不到
     ⇒ 退回浏览器默认样式（方角、无间距），就是"看起来没样式"的成因。 */
.pr-funnel{margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.pr-fn-head{font-size:11.5px;color:var(--muted);font-weight:600;padding-bottom:6px}
.pr-fn-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:6px}
.pr-fn-stage{text-align:center;padding:6px 4px;border-radius:6px;background:var(--surface);border:1px solid var(--line)}
.pr-fn-stage .num{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.pr-fn-stage .mini{margin-top:2px}
@media (max-width:1180px){.pr-fn-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 四块指标：自己一套网格，不挂 .grid.g4（挂上去第五块会掉到第二行、孤零零一个） */
.pr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.pr-stats .card{margin-bottom:0}
.pr-kpi .k{font-size:11.5px;color:var(--muted)}
/* ★ 2026-10-11 老板：「这个数据颜色改下，灰色给人错觉是失效」。
   根因：.v 一直**没写颜色**，靠继承。别的页面 KPI 挂在 body 上（继承 --text，深色），
   唯独「客户关怀·自动发送」卡的 #caBody 挂了 .mini（color:var(--text-3) 灰）
   ⇒ 那一排数字被带成灰，看着像停用/失败。
   这里**显式**给数字上正文色（--text，深浅主题各自定义）：其它页本就是它，零变化；
   关怀卡恢复成"读数"的正常观感。标签(.k)与副标题(小字 hint)保持次要灰 —— 那才是该弱的层级。 */
.pr-kpi .v{font-size:22px;font-weight:700;line-height:1.25;color:var(--text)}
/* 风险提示条：券没读到 / 档案过期 / 同步被截断 —— 一律摆出来，不藏进 tooltip */
.pr-warn{margin-bottom:10px;padding:9px 11px;border-radius:8px;font-size:12.5px;line-height:1.75;
  background:var(--orange-l);border:1px solid var(--orange-line);color:var(--orange)}
.pr-wline+.pr-wline{margin-top:2px}
/* .pill 原来只有 green/red/gray；"档案过期"要醒目但不是错误 ⇒ 补一个 orange（与 .tag.orange 同一套色） */
.pill.orange{background:var(--orange-l);border-color:var(--orange-line);color:var(--orange)}
@media (max-width:1180px){
  /* ★ 2026-10-19 对齐：这条窄屏模板**原来只有 10 列**（2026-10-14 加勾选列与尾部三列时漏改），
     于是 ≥14 格的行走在 10 列网格里 ⇒ 多出来的格子被挤到第二行、整行错位。
     现在与上面那条主模板**列数一致（15）**，只把宽度压窄；窄屏本来就要横向滚动，宁可挤不丢列。 */
  .pr-head,.pr-row{grid-template-columns:26px minmax(180px,2fr) 58px 92px 102px 78px minmax(84px,1fr) 84px 92px 56px 56px 56px 66px 64px 64px;gap:8px}
  .pr-detail{padding-left:12px}
  .pr-sku-head,.pr-sku{grid-template-columns:96px minmax(90px,1.4fr) 84px 84px 84px 62px 88px}
}
/* ---- 公开佣金两列（2026-10-19）：达人公开佣 / 机构公开佣 ----
   ★ 与推广侧三列（.pr-tal）同一套三态纪律，但**数字更醒目**：这两格回答的是
     "这个品给达人多钱、给机构多钱"，是能直接下判断的数（不是计数）。
   ★ 低于 5%（仅达人列）走 .low：那是 commission.mjs#auditCommission 的同一个建议下限
     （"低佣达人不会接"），橙色提示而不是红色 —— 它不是错误，是"这样设大概率白设"。 */
.pr-cm{font-weight:700;font-variant-numeric:tabular-nums}
.pr-cm.low{color:var(--orange)}
.pr-cmhead{white-space:nowrap;text-align:right}
/* ---- 「券 · 取于 HH:MM」（2026-10-21）----
   ★ 券改成**读本地快照**后，"这份券是哪一刻的"成了页面必须自己说出来的事实：
     `.pr-cpn-old` = 券明细超过 6 小时，橙色提示（不是错误，是"数字可能旧了"）。
     颜色口径与 .pr-cm.low / 档案陈旧的 pill.orange 一致，不新造一套。 */
.pr-cpn-old{color:var(--orange)}
/* ---- 商品标签（打标分类，2026-10-19）----
   ★ 一行里要给"商品名 / ID / 链接 / 标签"腾地方 ⇒ chips 必须**单行不换行**：
     行高一旦被 chip 顶成两排，25 行一屏就只剩 12 行（这与"商品名单行省略"是同一条理由）。
   ★ 颜色只认这五个类（与服务端 TAG_COLORS 一一对应）：写不出样式的颜色 = 界面上没颜色。 */
.ptag{display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:1.55;padding:0 7px;
  border-radius:999px;border:1px solid var(--line-2,var(--line));background:var(--surface-3);color:var(--text-2);
  white-space:nowrap;max-width:132px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.ptag.accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.ptag.green{background:var(--green-l);color:var(--green);border-color:var(--green-line)}
.ptag.orange{background:var(--orange-l);color:var(--orange);border-color:var(--orange-line)}
.ptag.red{background:var(--red-l);color:var(--red);border-color:var(--red-line)}
.ptag.more{font-variant-numeric:tabular-nums;padding:0 6px}
.pr-tagchips{display:inline-flex;align-items:center;gap:4px;min-width:0;overflow:hidden;flex:0 1 auto}
/* 展开项「标签」面板：勾选态用**实心**，未选中是空心 —— 一眼看出这个商品归在哪几类 */
.pr-tagbox{padding:2px 0 4px}
.pr-tagpick{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.ptag.pick{cursor:pointer;font-size:12px;padding:3px 10px;max-width:none}
.ptag.pick:hover{border-color:var(--accent-line);color:var(--accent)}
.ptag.pick.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.ptag.pick .n{font-size:10.5px;opacity:.7;font-variant-numeric:tabular-nums}
.ptag.pick.on .n{opacity:.85}
.pr-tagnew{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
/* 管理标签（右抽屉）：一行一个标签 = 名字 + 颜色 + 用量 + 保存/删除 */
.ptag-mbox{padding:2px 0}
.ptag-mlist{margin:10px 0}
.ptag-mrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px dashed var(--line)}
.ptag-mrow:first-child{border-top:0}
.ptag-mrow.ptag-mnew{border-top:1px solid var(--line);margin-top:6px;padding-top:10px}
.ptag-del:hover{color:var(--red);border-color:var(--red-line)}
/* ---- 勾选列 + 「批量挂关怀话术」条（2026-10-14）----
   ★ 勾选框是「行」的兄弟格、不是行内嵌套（嵌套会多出一个格、整行错位）。
     点勾选框要 stopPropagation（否则会顺带把这一行"展开"）。 */
.pr-chk{display:flex;align-items:center;justify-content:center}
.pr-chk input{accent-color:var(--accent);cursor:pointer;width:15px;height:15px}
.pr-bulk{margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--accent);background:var(--accent-soft)}
.pr-bulk-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pr-bulk-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pr-bulk .pill.gray{background:var(--surface-3)}
.pr-bulk-row .cn-atsel{max-width:280px}
.pr-bulk #pmBulkTip{margin-top:7px;line-height:1.75;color:var(--text-3)}
/* ---- 搜索：命中计数 + 一键清空（2026-10-09）----
   计数挨在输入框右边（不是页面顶上）：它回答的是"我刚敲的这两个字筛出了多少"，
   离手指最近的位置才有意义。命中少于总数时才上色 —— 0 命中不染红（红色留给错误）。 */
.pm-qhit{white-space:nowrap;opacity:.85}
.pm-qhit.hit{color:var(--accent);font-weight:600}
.pm-qclear{width:20px;height:20px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;
  background:var(--surface-2);color:var(--muted);font-size:14px;line-height:1;cursor:pointer;padding:0}
.pm-qclear:hover{background:var(--red-l);border-color:var(--red-line);color:var(--red)}
/* 命中高亮：只在商品名/ID 里出现。用 accent 的浅底而不是荧光黄 —— 这一页是表格不是代码，
   荧光黄在密集行里会盖住"红=省下的钱"这条既有语义。 */
.pr-row mark,.pr-detail mark{background:var(--accent-soft);color:var(--accent);
  border-radius:3px;padding:0 1px;font-weight:600}
/* ---- 表头排序（2026-10-09）----
   ★ 箭头走 ::after，**不往 DOM 里加节点**：表头列数必须与 .pr-row 的格子数一致，
     多一个子节点就整列错位（本项目在 .cm-row 上踩过）。箭头占位用固定宽度，
     未排序时留白 ⇒ 点一下表头不会把整列表头"挤动"。 */
.pr-head .pr-sortable{cursor:pointer;user-select:none;white-space:nowrap;position:relative;padding-right:11px}
.pr-head .pr-sortable:hover{color:var(--text-2)}
.pr-head .pr-sortable::after{content:"";position:absolute;right:1px;top:50%;transform:translateY(-50%);
  font-size:8px;line-height:1;color:var(--muted);opacity:.45}
.pr-head .pr-sortable:hover::after{content:"\2195";opacity:.9}
.pr-head .pr-sortable.sorted{color:var(--accent)}
.pr-head .pr-sortable.sorted::after{content:"\25B2";opacity:1}
.pr-head .pr-sortable.sorted[data-dir="desc"]::after{content:"\25BC"}
.pr-head .pr-sortable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ---- 库存预警（2026-10-09）：断货 / 低库存 ----
   ★ 颜色分工不许和既有语义打架：红 = 省下的钱（.pr-save）已经占了红色，
     所以断货用**左边竖线 + 红字**、低库存用橙字，不给整行铺红底（25 行一屏时太吵）。
   ★ 只给"库存 = 0"和"库存 ≤ 阈值"上色；null 一律是"—"（"不知道"，不是"没有"）。 */
.pr-row.pr-oos{box-shadow:inset 3px 0 0 var(--red)}
.pr-row.pr-low{box-shadow:inset 3px 0 0 var(--orange)}
.pr-stk.oos{color:var(--red);font-weight:700}
.pr-stk.low{color:var(--orange);font-weight:600}
/* 空结果区：把"为什么空"和"怎么补救"摆出来，别只留一句"没有数据" */
.pr-emptya{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
@media (max-width:1100px){.pr-stats{grid-template-columns:repeat(2,1fr)}}

/* ==================== 关怀话术库（话术为主体）====================
   与「商品管理」同源一份数据；这页是「写」的那一半。统计/警示条直接复用 .pr-stats / .pr-kpi / .pr-warn。 */
/* 「没话术的商品」> 0 时整块变橙：漏配是**无声**的，必须让它看得见 */
.cn-kpi-warn{border-color:var(--orange-line);background:var(--orange-l)}
.cn-kpi-warn .v{color:var(--orange)}

.cn-edit{margin-bottom:12px}
.cn-ehead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
/* 保存失败的红条：必须**看得见**（原来只有一行灰色小字，用户报"保存不成功"却说不出原因） */
.cn-err{margin:0 0 10px;padding:9px 12px;border:1px solid var(--red-line);border-left:3px solid var(--red);border-radius:8px;background:var(--red-l);color:var(--red);font-size:13px;font-weight:600;line-height:1.55}
/* 编辑区分段：把字段墙拆成 基本信息 / 生效期 / 为什么这么写 / 正文 / 适用范围 */
.cn-sec{padding:13px 0;border-top:1px dashed var(--line)}
.cn-sec:first-of-type{border-top:0;padding-top:2px}
.cn-sech{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:620;color:var(--text-2);margin-bottom:10px}
.cn-sechhint{font-weight:400;font-size:11.5px;color:var(--text-3)}
.cn-req{font-style:normal;font-size:10.5px;font-weight:600;color:var(--red);background:var(--red-l);
  border:1px solid var(--red-line);border-radius:var(--r-pill);padding:0 6px;line-height:16px}
.cn-fields{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:12px}
.cn-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.cn-flab{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.cn-wide{width:100%}
/* 生效期：两种模式做成**可选卡片**（"长期有效"是显式选项，不靠留空心领神会） */
.cn-valmodes{display:flex;gap:10px;flex-wrap:wrap}
.cn-radio{display:flex;align-items:center;gap:7px;font-size:13px;padding:8px 12px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);cursor:pointer;transition:var(--t);color:var(--text-2)}
.cn-radio:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.cn-radio:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--text);font-weight:600}
.cn-radio em{font-style:normal;font-size:11.5px;color:var(--text-3);margin-left:5px;font-weight:400}
.cn-radio input{accent-color:var(--accent);cursor:pointer}
.cn-daterow{display:grid;grid-template-columns:150px auto 150px minmax(0,1fr);gap:9px 10px;align-items:end;margin-top:12px;width:100%}
.cn-to{color:var(--text-3);padding-bottom:9px;text-align:center}
.cn-dquicks{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:1px}
.cn-mini{font-size:11.5px;padding:7px 10px}
.cn-datehint{grid-column:1/-1}
.cn-count-warn{color:var(--orange)}
.cn-count-bad{color:var(--red);font-weight:600}
.cn-body-wrap{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.cn-body-wrap textarea{font-family:inherit;font-size:13px;line-height:1.7;resize:vertical}
.cn-vars{margin-bottom:10px;line-height:2}
.cn-vars code{background:var(--surface-3);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:11.5px;cursor:pointer;transition:var(--t)}
.cn-vars code:hover{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.cn-scope{border-top:1px dashed var(--line);padding-top:10px;margin-bottom:10px}
.cn-all{font-size:12.5px;display:flex;align-items:center;gap:6px;cursor:pointer}
.cn-orphan{color:var(--orange);font-weight:500}
.cn-attach{display:flex;align-items:center;gap:7px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);flex-wrap:wrap}
.cn-atsel{max-width:300px;font-size:12.5px;padding:4px 8px}
.cn-hitfoot{margin-top:7px;color:var(--text-3)}
/* 【商品管理页 · 就地新建话术】表单（2026-10-07 补：商品侧原来只能挂已有话术，不能新建）
   ★ 底色用 accent-soft：一眼看出"这块是正在动手的地方"，与只读的命中列表区分开 */
.cnq{margin-top:9px;padding:10px 12px;border:1px solid var(--accent-line);border-radius:9px;background:var(--accent-soft)}
.cnq-h{font-size:12.5px;line-height:1.75;margin-bottom:8px}
.cnq-row{display:flex;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.cnq-row .cnq-title{flex:1;min-width:180px}
.cnq-timing{width:132px;flex:none}
.cnq-body{width:100%;font-family:inherit;font-size:13px;line-height:1.7;resize:vertical}
.cnq-foot{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.cnq .cn-err{margin:8px 0 0}
.cn-or{color:var(--text-3)}
.cn-nogeneral{margin-bottom:4px;line-height:1.7}
.cn-pltip{grid-column:1/-1;margin-top:2px;line-height:1.7}
.cn-plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;margin-top:8px;max-height:230px;overflow:auto}
.cn-pitem{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 4px;border-radius:6px;cursor:pointer}
.cn-pitem:hover{background:var(--accent-l)}
.cn-pitem>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- 2026-10-14 话术库页的「适用范围」改成**只读**：只读清单 + 跳转，不再是勾选框 ---- */
.cn-ro{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.cn-roitem{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 4px;border-radius:var(--r-xs);background:var(--surface-2)}
.cn-roitem>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-rofoot{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
/* 只读清单里的商品名 / 「去商品管理挂上」：点一下跳过去改（本页不改关联） */
.cn-plink{color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.cn-plink:hover{color:var(--accent-2)}
.cn-pchip{display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:2px 7px;margin:2px 4px 2px 0;border:1px solid var(--accent-line);border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent);font-size:11.5px;cursor:pointer}
.cn-pchip:hover{background:var(--accent);color:#fff}

.cn-eacts{display:flex;gap:8px;align-items:center}
.cn-preview{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.cn-pvbody{white-space:pre-wrap;background:var(--surface-3);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-size:13px;line-height:1.8;margin:6px 0}
.cn-pvmeta{line-height:2}

.cn-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--surface-3)}
.cn-card.cn-off{opacity:.62}
.cn-ch{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.cn-ctitle{font-size:13.5px}
.cn-cbody{white-space:pre-wrap;font-size:12.5px;line-height:1.8;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.cn-noreason{color:var(--orange)}
.cn-a{font-size:11.5px;padding:2px 8px}
/* 商品管理页展开项里的关怀话术块（在 .pr-detail 内，是普通块、不参与表头列网格） */
.cn-none{margin-top:9px;padding:7px 10px;border-radius:7px;font-size:12px;line-height:1.75;
  background:var(--orange-l);border:1px solid var(--orange-line);color:var(--orange)}
.cn-hit{margin-top:9px;border-top:1px dashed var(--line);padding-top:8px}
.cn-hittitle{font-weight:600;margin-bottom:5px}
.cn-hitrow{padding:5px 0}
.cn-hitrow+.cn-hitrow{border-top:1px dashed var(--line)}
.cn-hithead{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px}
.cn-hitbody{white-space:pre-wrap;margin-top:3px;line-height:1.75}
@media (max-width:900px){
  .cn-fields{grid-template-columns:1fr 1fr}
  .cn-daterow{grid-template-columns:1fr auto 1fr}
}

/* ===== 订单页「客户关怀」字段 + 顶部小结（2026-10-07 订单页升级） =====
   颜色一律走变量（暗色主题自动跟随），禁止裸 #hex。 */
.care-cell{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mini-btn{
  font-size:11px;line-height:1;padding:4px 9px;border-radius:var(--r-xs);
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--text-2);
  cursor:pointer;white-space:nowrap;transition:var(--t);
}
.mini-btn:hover:not(:disabled){border-color:var(--accent-line);color:var(--text)}
.mini-btn:disabled{opacity:.5;cursor:default}
.care-summary{flex-wrap:wrap;gap:8px}
.care-chip{
  font-size:11.5px;border-radius:var(--r-pill);padding:3px 10px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--text-2);white-space:nowrap;transition:var(--t);
}
.care-chip b{font-weight:600}
.care-chip:hover{border-color:var(--accent-line);color:var(--text)}
.care-chip.on{border-color:var(--accent-line);background:var(--accent-l);color:var(--accent)}
.care-chip.green{color:var(--green)}.care-chip.orange{color:var(--orange)}.care-chip.red{color:var(--red)}.care-chip.gray{color:var(--text-3)}
.care-chip.on.green{background:var(--green-l);border-color:var(--green-line)}
.care-chip.on.orange{background:var(--orange-l);border-color:var(--orange-line)}
.care-chip.on.red{background:var(--red-l);border-color:var(--red-line)}

/* ===== 客户关怀卡「今日三数」（2026-10-18） =====
   用户要三个数并排：已关怀 / 需关怀 / 日额度。
   为什么不挂 .pr-stats：那张卡下面还有折叠块与清单，4 列网格会把它们挤成两行；
   这里固定 3 列（数字本来就三格），窄屏落成 1 列。
   颜色一律走变量（暗色主题自动跟随），禁止裸 #hex。 */
.ca-daily{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:2px 0 6px}
.ca-daily .ca-cell{padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);min-width:0}
.ca-daily .k{font-size:11.5px;color:var(--muted);line-height:1.4}
.ca-daily .v{font-size:23px;font-weight:700;line-height:1.25;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-daily .v small{font-size:12px;font-weight:500;color:var(--text-3);margin-left:3px}
.ca-daily .s{font-size:11.5px;color:var(--text-3);line-height:1.5;margin-top:2px}
.ca-daily .ca-cell.warn{border-color:var(--orange-line);background:var(--orange-l)}
.ca-daily .ca-cell.warn .v{color:var(--orange)}
.ca-daily .ca-cell.bad{border-color:var(--red-line);background:var(--red-l)}
.ca-daily .ca-cell.bad .v{color:var(--red)}
.ca-daily .ca-cell.ok .v{color:var(--green)}
.ca-bar{height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;margin:7px 0 5px}
.ca-bar>i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--green),var(--green-line));transition:width .25s}
.ca-bar.warn>i{background:linear-gradient(90deg,var(--orange),var(--orange-line))}
.ca-note{font-size:12px;color:var(--text-2);line-height:1.65}
.ca-note .bad{color:var(--red);font-weight:600}
#oCareAuto .card-h .ca-title{white-space:nowrap;flex-shrink:0}
#oCareAuto #caMeta{min-width:0}
@media (max-width:760px){.ca-daily{grid-template-columns:1fr}}

/* ============================================================
   售后品退 · 决策区（2026-10-07）—— 左列表 + 右三栏（处置/ 证据 / 判读）
   为什么是三栏：判断一笔售后要看的六类信息挤进一个抽屉必然要跳页。
   窄屏自动折叠成单列（决策优先，证据其次）。
   类名沿用 asd-* 前缀（原决策台页签的样式，合并后继续用，避免另起一套）。
   ============================================================ */
.asdesk-grid { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 12px; align-items: start; }
.asdesk-detail { min-width: 0; }
.asd-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  padding: 10px 12px; border: 1px solid var(--c-line, rgba(128,128,128,.22)); border-radius: var(--border-radius-lg, 12px); background: var(--c-bg-2, rgba(128,128,128,.05)); }
.asd-head-id { font-size: 15px; font-weight: 500; }
.asd-head-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; }
.asd-head-sub { font-size: 13px; color: var(--c-text-2, #666); }
.asd-head-r { text-align: right; min-width: 180px; }
.asd-banner { margin: 8px 0; padding: 8px 12px; border-radius: var(--border-radius-md, 8px); font-size: 13px; border-left: 3px solid; }
.asd-banner.ok { background: rgba(29,158,117,.10); border-color: #1D9E75; }
.asd-banner.no { background: rgba(128,128,128,.10); border-color: #888780; }
.asd-banner.warn { background: rgba(186,117,23,.12); border-color: #BA7517; }
.asd-cols { display: grid; grid-template-columns: minmax(230px, 280px) minmax(320px, 1fr) minmax(280px, 340px); gap: 12px; align-items: start; margin-top: 8px; }
.asd-col { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.asd-blk { border: 1px solid var(--c-line, rgba(128,128,128,.18)); border-radius: var(--border-radius-lg, 12px); overflow: hidden; background: var(--c-bg-1, #fff); }
.asd-blk-h { padding: 7px 10px; font-size: 13px; font-weight: 500; background: var(--c-bg-2, rgba(128,128,128,.06)); border-bottom: 1px solid var(--c-line, rgba(128,128,128,.18)); }
.asd-blk-b { padding: 8px 10px; font-size: 13px; line-height: 1.6; }
/* ★ 2026-10-07 重构：决策区信息块支持折叠（<details>）—— 一屏只留决策 + 展开的重点块 */
details.asd-blk summary.asd-blk-h { cursor: pointer; user-select: none; list-style: none; }
details.asd-blk summary.asd-blk-h::-webkit-details-marker { display: none; }
details.asd-blk summary.asd-blk-h::before { content: '▸'; display: inline-block; margin-right: 6px; color: var(--c-text-3, #888); font-size: 11px; transition: transform .12s ease; }
details.asd-blk[open] summary.asd-blk-h::before { transform: rotate(90deg); }
details.asd-blk summary.asd-blk-h:hover { background: var(--c-bg-3, rgba(128,128,128,.10)); }
details.asd-blk[open] summary.asd-blk-h { border-bottom: 1px solid var(--c-line, rgba(128,128,128,.18)); }
.asd-kv { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; padding: 2px 0; }
.asd-kv > span:first-child { color: var(--c-text-2, #666); flex: 0 0 auto; }
.asd-kv > b { font-weight: 500; text-align: right; word-break: break-all; }
.asd-kv .ghost { margin-left: 6px; }
.asd-opt { display: block; font-size: 13px; margin: 3px 0; }
.asd-opt input.inp { display: block; width: 100%; margin-top: 3px; }
.asd-ai-head { display: flex; gap: 8px; align-items: center; padding: 8px 10px; }
.asd-media { margin: 4px 0; }
.asd-media img { max-width: 100%; border-radius: var(--border-radius-md, 8px); border: 1px solid var(--c-line, rgba(128,128,128,.2)); }
.asd-media video { max-width: 100%; }
/* ---- 评价图片（列表缩略图 + 判读大图，统一走 /api/reviews/img 代理） ---- */
.rev-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.rev-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--line); cursor: zoom-in; }
.rev-thumb.lg { width: 96px; height: 96px; }
.rev-thumb.broken { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-2); background: var(--surface-3); border: 1px dashed var(--line-2); }
.rev-thumb.broken::after { content: "图需登录态"; }
/* ---- 评价图片灯箱（2026-10-19）：点缩略图看大图 ----
   背景恒为深色（亮/暗主题下都要把图衬出来），所以这里不取 --surface；
   层级 45：要盖住抽屉(21)/命令面板(40)，又低于 toast(50) —— 失败提示还得看得见。 */
.rev-thumb:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.imgv { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: rgba(8, 10, 16, .94); backdrop-filter: blur(6px); animation: fade .12s both; }
.imgv[hidden] { display: none; }
.imgv-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #f2f5fa; font-size: 12.5px; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.imgv-cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dfe6f2; }
.imgv-grow { flex: 1; }
.imgv-btn { display: inline-block; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); color: #f2f5fa; font: inherit; font-size: 12.5px; line-height: 1.5; padding: 4px 10px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.imgv-btn:hover { background: rgba(255,255,255,.24); }
.imgv-btn[hidden] { display: none; }
.imgv-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.imgv-stage img { max-width: 94vw; max-height: calc(100vh - 108px); object-fit: contain; border-radius: 4px; background: #0d1017; box-shadow: 0 18px 60px rgba(0,0,0,.6); transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; cursor: zoom-in; }
.imgv-stage.zoomed { cursor: grab; }
.imgv-err { position: absolute; color: #ffb4a8; font-size: 13px; }
.imgv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 68px; padding: 0; border: 0; border-radius: 8px; background: rgba(255,255,255,.10); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.imgv-nav:hover { background: rgba(255,255,255,.26); }
.imgv-prev { left: 10px; }
.imgv-next { right: 10px; }
.imgv[data-single="1"] .imgv-nav { display: none; }
.imgv-tip { padding: 8px 0 10px; text-align: center; color: rgba(242,245,250,.55); font-size: 11.5px; }
@media (max-width: 560px) { .imgv-nav { display: none; } .imgv-stage img { max-width: 100vw; max-height: calc(100vh - 96px); border-radius: 0; } }
.mono { font-family: var(--font-mono, ui-monospace, monospace); }
@media (max-width: 1180px) { .asd-cols { grid-template-columns: 1fr; } .asd-col-l { order: 1; } .asd-col-m { order: 2; } .asd-col-r { order: 3; } }
@media (max-width: 900px) { .asdesk-grid { grid-template-columns: 1fr; } .asd-head-r { text-align: left; } }
/* 物流轨迹 / 协商历史的条目（2026-10-07 hack 通道接入后才有内容） */
.asd-trace { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; font-size: 13px; line-height: 1.55; border-bottom: 1px dashed rgba(128,128,128,.16); }
.asd-trace:last-child { border-bottom: none; }
.asd-trace-t { flex: 0 0 118px; color: var(--c-text-2, #666); font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }
@media (max-width: 560px) { .asd-trace { flex-direction: column; gap: 2px; } .asd-trace-t { flex: none; } }

/* ============================================================
   经营总览 = 今日任务看板（2026-10-07 重构）—— 前缀 tb-
   ------------------------------------------------------------
   只新增，不改动上面任何既有规则：这一页是落地页，改错代价最大。
   颜色一律取本文件既有变量（--surface/--line/--text-* --red/--orange/--green），
   保证亮/暗主题都对。
   ============================================================ */
.tb-top{display:flex;flex-direction:column;gap:10px}
.tb-headline{font-size:15px;font-weight:620;line-height:1.6}
.tb-headline.bad{color:var(--red)}
.tb-headline.warn{color:var(--orange)}
.tb-headline.ok{color:var(--green)}
.tb-counts{display:flex;flex-wrap:wrap;gap:8px}
.tb-count{display:flex;align-items:baseline;gap:6px;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:5px 12px;background:var(--surface-2)}
.tb-count b{font-size:15px;font-weight:650}
.tb-count span{font-size:11.5px;color:var(--text-3)}
.tb-count.bad b{color:var(--red)}
.tb-count.warn b{color:var(--orange)}
.tb-count.ok b{color:var(--green)}
/* ── 全店任务卡状态灯阵（2026-10-15）──────────────────────────────
   一排带名字的小灯 = **全部**任务卡，按店分组。有问题的排最前（排序在前端 tbRender 里做）。
   颜色语义与卡片状态灯完全一致：绿=正常 / 橙=要处理 / 红=异常 / 灰=没在跑 / 灰虚=未知。
   ★ 灯上写**卡名**而不是光秃秃的圆点：老板要的是「一眼看明白是哪张卡」，
     只给圆点的话还得挨个悬浮才知道，那就没省下扫视成本。
   ★ 不用左侧竖线/单边线框（2026-10-08 老板明确否掉过那种画法）。 */
.tb-lamps{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.tb-lamp-row{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.tb-lamp-pf{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:620;color:var(--text-2);
  min-width:104px;padding-top:2px}
/* 平台名小字：两个平台可能有一家**同名店**（本机两台都叫「云边鲜品」）——
   这时它是唯一能一眼分清"这行是哪一边"的字段（与栏头 tb-col-pf 同一个理由）。 */
.tb-lamp-pf .mini{font-size:10.5px;color:var(--text-3);font-weight:400}
.tb-lamp-dots{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.tb-lamp{font-size:11.5px;line-height:1.5;border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:2px 10px;cursor:pointer;color:var(--text-2);background:var(--surface-2);white-space:nowrap;
  transition:border-color var(--t),color var(--t),background var(--t)}
.tb-lamp:hover{border-color:var(--accent);color:var(--accent)}
.tb-lamp.lv-ok{color:var(--green);border-color:var(--green-line)}
.tb-lamp.lv-warn{color:var(--orange);border-color:var(--orange-line)}
.tb-lamp.lv-bad{color:var(--red);border-color:var(--red);background:var(--red-l);font-weight:650}
.tb-lamp.lv-idle{color:var(--text-3)}
.tb-lamp.lv-unknown{color:var(--text-3);border-style:dashed}
.tb-lamp-sum{font-size:11.5px;color:var(--text-3);padding-top:2px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px}
.tb-lamp-sum .bad{color:var(--red)}
.tb-lamp-sum .warn{color:var(--orange)}
.tb-lamp-sum .ok{color:var(--green)}
@media (max-width:760px){.tb-lamp-pf{min-width:0}}
/* ★ 2026-10-15 总览页「额度一览」（老板要求：要显示、要看剩/总、要有指示条、要标日/周与来源）。
   一行一笔 = 名称(+日/周徽标) │ 剩·总 │ 指示条 │ 重置节奏·出处。 */
.tb-quotas{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.tb-quotas:empty{display:none}
.tb-qhead{font-size:12px;font-weight:650;color:var(--text-2);display:flex;align-items:baseline;gap:8px}
.tb-qhead .mini{font-weight:400;font-size:11px;color:var(--text-3)}
.tb-qgroup{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.tb-qpf{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:620;color:var(--text-2);min-width:104px;padding-top:1px}
.tb-qpf .mini{font-size:10.5px;color:var(--text-3);font-weight:400}
.tb-qlist{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.tb-qrow{display:grid;grid-template-columns:minmax(200px,1.5fr) 108px minmax(90px,1fr) minmax(150px,1.4fr);
  align-items:center;gap:10px;font-size:11.5px;color:var(--text-2)}
.tb-qname{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-qcad{font-size:10px;font-weight:600;color:var(--accent);border:1px solid var(--accent);
  border-radius:var(--r-pill);padding:0 5px;line-height:1.5;flex:none}
.tb-qnum{white-space:nowrap;color:var(--text-3)}
.tb-qnum b{font-weight:650;color:var(--text-2)}
.tb-qrow.bad .tb-qnum b{color:var(--red)}
.tb-qrow.warn .tb-qnum b{color:var(--orange)}
.tb-qbar{height:6px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line-2);overflow:hidden}
.tb-qbar i{display:block;height:100%;border-radius:2px;background:var(--green)}
.tb-qbar.warn i{background:var(--orange)}
.tb-qbar.idle i{background:var(--text-3);opacity:.55}
.tb-qbar.na i{display:none}
.tb-qrow.done .tb-qnum b{color:var(--green)}
.tb-qrow.todo .tb-qnum b{color:var(--orange)}
/* 今日营销工作：状态药丸（完成 / 待做 / 按需 / 今日无单 / 未知） */
.tb-qst{display:inline-flex;align-items:center;justify-content:center;min-width:52px;flex:none;
  font-size:10.5px;font-weight:650;line-height:1.75;padding:0 7px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--text-3)}
.tb-qst.done{color:var(--green);background:var(--green-l);border-color:var(--green-line)}
.tb-qst.todo{color:var(--orange);background:var(--orange-l);border-color:var(--orange-line)}
.tb-qst.ondemand{color:var(--text-2);background:var(--surface-2);border-color:var(--line-2)}
.tb-qst.ondemand.undone{color:var(--orange);background:var(--orange-l);border-color:var(--orange-line)}
.tb-qst.none{color:var(--text-3);background:transparent;border-color:var(--line)}
.tb-qst.unknown{color:var(--text-3);background:transparent;border-color:var(--line-2);border-style:dashed}
.tb-work-head{align-items:baseline}
.tb-work-title{font-size:13px;font-weight:700;color:var(--text);letter-spacing:.2px}
.tb-work-day{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.tb-work-sum{display:inline-flex;gap:10px;font-size:11.5px;flex-wrap:wrap}
.tb-work-sum b{font-weight:650}
.tb-work-sum b.ok{color:var(--green)}.tb-work-sum b.warn{color:var(--orange)}.tb-work-sum b.muted{color:var(--text-3)}
.tb-qbar.bad i{background:var(--red)}
/* 第四态：**无上限**（不是额度，2026-10-15 用户："无上限不能标假设的数据"）。
   ★ 进度条这里画成**斜纹空槽**，不是 0% 的空条也不是满格 ——
     空条会被读成"用完了"，满格会被读成"很充裕"，两个都是错的：这里压根没有分数可算。 */
.tb-qnum.unbound{color:var(--text-2);font-weight:650}
.tb-qbar.na{background:repeating-linear-gradient(135deg,var(--line-2) 0 3px,transparent 3px 7px);border-style:dashed}
.tb-m .v.unbound{color:var(--text-2)}
.tb-qmeta{color:var(--text-3);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:inline-flex;gap:8px;align-items:center}
.tb-qmeta b{flex:none}
.tb-qmeta b.ok{color:var(--green)}.tb-qmeta b.warn{color:var(--orange)}.tb-qmeta b.bad{color:var(--red)}
@media (max-width:900px){.tb-qrow{grid-template-columns:minmax(140px,1fr) 92px;row-gap:5px}
  .tb-qbar{grid-column:1 / -1}.tb-qmeta{grid-column:1 / -1;white-space:normal}}
.tb-health-card .row{border-bottom:1px solid var(--line)}
.tb-h2{margin:18px 2px 10px;font-size:13px;font-weight:650;letter-spacing:.3px}
.tb-h2 .mini{font-weight:400;margin-left:6px}
.tb-tasks{display:flex;flex-direction:column;gap:10px}
/* ★ 2026-10-08 老板：「不要用这种单边线框。太难看了。改成全线框。」
   原来是 `border-left:3px` 一道竖线 + 三边 1px —— 一列卡片竖着排时，
   那条竖线看起来像卡片之间的**分隔线**，不像"这张卡的状态"（同一页 `.pc-chancard`
   早就因为同一个观感问题改成整圈描边了，见上面那段注释）。
   ⇒ 改**整圈 1px 描边**：正常/未启动用中性色（不吵），要处理/已停用语义色（跳出来）。
     不改成 outline：outline 会叠在圆角外面、看起来像"双框"；真 border 才是"全线框"。 */
.tb-card{border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:9px;transition:var(--t)}
.tb-card:hover{box-shadow:var(--shadow-1)}
.tb-card.ok{border-color:var(--green-line)}
.tb-card.warn{border-color:var(--orange)}
.tb-card.bad{border-color:var(--red)}
.tb-card.idle{border-color:var(--line-2)}
.tb-card.unknown{border-color:var(--text-3);border-style:dashed}
.tb-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-name{font-size:14px;font-weight:640}
.tb-why{font-size:11.5px;color:var(--text-3);line-height:1.55}
.tb-metrics{display:flex;flex-wrap:wrap;gap:8px 18px}
.tb-m{display:flex;flex-direction:column;gap:2px;min-width:132px}
.tb-m .k{font-size:11px;color:var(--text-3)}
.tb-m .v{font-size:13px;font-weight:600;word-break:break-word}
.tb-m .v.bad{color:var(--red)}
.tb-m .v.warn{color:var(--orange)}
.tb-m .v.ok{color:var(--green)}
.tb-m .v.unknown{color:var(--text-3);font-weight:400}
.tb-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:3px}
.tb-bar i{display:block;height:100%;background:var(--green)}
.tb-bar.warn i{background:var(--orange)}
.tb-bar.bad i{background:var(--red)}
.tb-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:8px}
.tb-status{font-size:12px;line-height:1.5;flex:1 1 260px;min-width:0;
  /* 状态句有的很长（例如"读不到 + 为什么 + 怎么补"，那是**故意的**，不许压成"读取失败"），
     所以这里只做**视觉**收口到两行，完整原文挂 title 悬停可看 —— 信息不丢，卡片不被撑高。 */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tb-status.ok{color:var(--text-2)}
.tb-status.warn{color:var(--orange)}
.tb-status.bad{color:var(--red)}
.tb-status.unknown{color:var(--text-3)}
.tb-go{font:inherit;font-size:12.5px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--r-sm);padding:5px 12px;cursor:pointer;color:var(--text);white-space:nowrap}
.tb-go:hover{border-color:var(--accent);color:var(--accent)}
.tb-tag{font-size:10.5px;border:1px solid var(--line-2);border-radius:999px;padding:1px 8px;color:var(--text-3);white-space:nowrap}
.tb-tag.auto{color:var(--accent);border-color:var(--accent)}
.tb-tag.manual{color:var(--orange);border-color:var(--orange)}
.tb-tag.free{color:var(--green);border-color:var(--green)}
.tb-week{font-size:11px;color:var(--text-3);margin-top:4px;line-height:1.5}
@media (max-width:760px){.tb-m{min-width:104px}}

/* ============================================================
   经营总览 · 固定两栏（2026-10-08 A 方案）—— 前缀 tb-col / tb-pick
   ------------------------------------------------------------
   老板问「抖店和微信小店任务卡能不能同时在一个页面上」⇒ 定 A 方案：
   这一页固定两栏、不跟随顶栏店铺。只新增规则，不改上面任何既有规则。
   ============================================================ */
.tb-boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
/* 窄屏折成一栏：两栏各是一条长列表，挤在 700px 里两边都读不成 */
@media (max-width:1180px){.tb-boards{grid-template-columns:minmax(0,1fr)}}
.tb-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.tb-col-h{gap:8px;display:flex;flex-direction:column}
.tb-col-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-col-pf{font-size:14px;font-weight:650}
.tb-col-day{margin-left:auto}
.tb-pick{font:inherit;font-size:12.5px;padding:4px 8px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);max-width:200px}
.tb-col .tb-headline{font-size:13.5px}
.tb-col .tb-tasks{margin-top:2px}
/* 无权查看的店要看得见（静默消失会让人以为"今天没任务"）——同样是**全线框**，不用左侧竖线 */
.tb-denied{border:1px solid var(--orange);grid-column:1/-1}
.tb-denied .card-h{color:var(--orange)}

/* 卡片上的一键动作按钮（2026-10-08）：启动=绿、停止=红，与状态灯的语义色一致 */
.tb-go.go-run{border-color:var(--green);color:var(--green)}
.tb-go.go-run:hover{background:var(--green-l);border-color:var(--green)}
.tb-go.go-stop{border-color:var(--red);color:var(--red)}
.tb-go.go-stop:hover{background:var(--red-l);border-color:var(--red)}

/* ============================================================
   配置抽屉的面板（2026-10-08）—— 复用全局 #drawer / #drawerBody，只加内容样式
   ============================================================ */
.tb-cfg{display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.7}
.tb-cfg .kv{padding:7px 0;border-bottom:1px solid var(--line)}
.tb-cfg .bar{flex-wrap:wrap;gap:8px}
.tb-cfg-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tb-cfg-row label{font-size:12.5px;color:var(--text-2)}
.tb-cfg-row input[type=number]{width:96px;font:inherit;font-size:13px;padding:5px 8px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--text)}
.tb-cfg-row select{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface);color:var(--text)}
.tb-cfg-cmd{font-size:12px;line-height:1.65;color:var(--text-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.tb-cfg-cmd-code{margin:6px 0 2px;font-family:var(--mono);font-size:11.5px;word-break:break-all;
  background:var(--surface);border:1px solid var(--line-2);border-radius:6px;padding:7px 9px;color:var(--text)}
.tb-cfg-chk{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface-2);cursor:pointer;font-size:12.5px}
.tb-cfg-chk:hover{border-color:var(--line-2)}
.tb-cfg-chk input{margin-top:2px}
/* 抽屉里的小节标题（2026-10-09：长跑卡的抽屉要区分「这条线会发什么」与「人数上限」两段） */
.tb-cfg-sec{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px;padding-top:9px;
  border-top:1px solid var(--line-2);font-size:12.5px;font-weight:600;color:var(--text)}
.tb-cfg-sec .mini{font-weight:400}
.tb-cfg-copy{white-space:pre-wrap;font-size:12px;line-height:1.7;color:var(--text-2);
  background:var(--surface-3);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.tb-cfg-item{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface-2)}
.tb-cfg-item-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}

/* ============================================================
   任务卡瘦身（2026-10-08 老板："任务卡片我有些混乱"）
   卡面只留：状态灯（整圈描边）+ 状态词 + 一句话结论 + ≤2 个关键数字 + 主按钮 + 配置
   ============================================================ */
.tb-brief{font-size:13px;font-weight:560;line-height:1.5;color:var(--text)}
.tb-card.bad .tb-brief{color:var(--red)}
.tb-card.warn .tb-brief{color:var(--orange)}
.tb-card.unknown .tb-brief,.tb-card.idle .tb-brief{color:var(--text-2)}
.tb-card .tb-why{display:none}          /* 去干什么 → 进抽屉「诊断」（卡面不再占一行） */
.tb-card .tb-metrics{gap:8px 22px}
/* 状态词：让"整圈颜色"有文字落点（颜色说不清"在跑"还是"干完了"） */
.tb-tag.st-ok{color:var(--green);border-color:var(--green-line)}
.tb-tag.st-warn{color:var(--orange);border-color:var(--orange-line)}
.tb-tag.st-bad{color:var(--red);border-color:var(--red-line)}
.tb-tag.st-idle,.tb-tag.st-unknown{color:var(--text-3)}
/* 抽屉里的「诊断」区：卡面搬过来的细节都在这 */
.tb-diag{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2);display:flex;flex-direction:column;gap:2px}
.tb-diag .kv{align-items:flex-start}
.tb-diag .kv > b{max-width:62%}
/* 主按钮更显眼一点（一屏扫下来，"该动手的"顺着左列能看出来） */
.tb-foot .tb-go.go-run,.tb-foot .tb-go.go-stop{font-weight:600}
.tb-foot .tb-go b{font-weight:600;opacity:.85}

/* ================= 账号权限页（owner） =================
   三块：账号列表（行内改角色 + 编辑/停用）、新建/编辑抽屉、角色能力对照表。
   ★ 颜色一律走变量（暗色主题自动跟随），禁止裸 #hex。 */
/* 竖排表单标签：文字在上、控件在下。
   * 不加 width:100% —— 抽屉宽度由 .d-b 控制，控件撑满即可，别把 label 也拉满。 */
.f-lab{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;font-size:12.5px;color:var(--text-2)}
.f-lab:last-child{margin-bottom:0}
.f-lab .mini{font-weight:400;margin-left:6px}
.f-lab .inp{align-self:stretch}
/* 列表行尾的动作区：角色下拉 + 编辑 + 停用 */
.u-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.u-role{
  border:1px solid var(--line-2);border-radius:var(--r-xs);padding:4px 6px;background:var(--surface-2);
  color:var(--text);font-size:11.5px;outline:none;cursor:pointer;transition:var(--t);
}
.u-role:hover{border-color:var(--accent-line);color:var(--accent)}
.u-role:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* 店铺白名单勾选：自适应网格，店多时自动换行不撑破抽屉 */
.u-shops{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;margin:6px 0 12px}
.u-chk{
  display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2);font-size:12.5px;cursor:pointer;transition:var(--t);
}
.u-chk:hover{border-color:var(--accent-line);background:var(--surface)}
.u-chk input{accent-color:var(--accent);cursor:pointer;margin:0;flex:none}
.u-chk span{color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 单独权限：被账号覆盖过的项用强调色，和"角色默认"一眼分开；随角色的项灰掉 */
.u-perm-ov{color:var(--accent);font-weight:600}
.u-chk input:disabled{cursor:not-allowed;opacity:.55}
/* 单独权限：按实际菜单分组（2026-11-05 升级）—— 菜单入口与动作能力分开列，附侧栏预览 */
.u-perm-board{display:flex;flex-direction:column;gap:8px}
.u-perm-sec{border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:8px 10px}
.u-perm-sec>summary{cursor:pointer;font-weight:650;font-size:12.5px;color:var(--text);list-style:none;outline:none}
.u-perm-sec>summary::-webkit-details-marker{display:none}
.u-perm-sec>summary::before{content:'▸';display:inline-block;width:14px;color:var(--text-3);transition:var(--t)}
.u-perm-sec[open]>summary::before{content:'▾'}
.u-perm-sec>summary .mini{font-weight:400;margin-left:4px}
.u-perm-rows{margin-top:6px}
.u-perm-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.u-perm-tools .mini{color:var(--text-3);line-height:1.45}
/* 共享能力位下的菜单：单独取消显示（hidePages，只影响侧栏） */
.u-perm-subwrap{margin-top:6px;border-top:1px dashed var(--line);padding-top:5px}
.u-perm-subwrap>summary{cursor:pointer;font-size:11.5px;color:var(--text-3);list-style:none;outline:none}
.u-perm-subwrap>summary::-webkit-details-marker{display:none}
.u-perm-subwrap>summary::before{content:'▸ ';color:var(--text-3)}
.u-perm-subwrap[open]>summary::before{content:'▾ '}
.u-perm-sub{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 10px;margin-top:5px}
.u-perm-subchk{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2);cursor:pointer;line-height:1.5}
.u-perm-subchk input{accent-color:var(--accent);margin:0;flex:none;cursor:pointer}
.u-perm-subchk input:disabled{cursor:not-allowed;opacity:.55}
.u-perm-row{display:grid;grid-template-columns:240px minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px dashed var(--line);align-items:start}
.u-perm-row:first-child{border-top:0}
.u-perm-tick{display:flex;align-items:flex-start;gap:7px;cursor:pointer;font-size:12.5px;line-height:1.5}
.u-perm-tick input{accent-color:var(--accent);cursor:pointer;margin:2px 0 0;flex:none}
.u-perm-tick input:disabled{cursor:not-allowed;opacity:.55}
.u-perm-name{color:var(--text);min-width:0}
.u-perm-name .mini{display:block;color:var(--text-3);font-size:11px;line-height:1.4}
.u-perm-menus{color:var(--text-2);font-size:12px;line-height:1.65;min-width:0}
.u-perm-g{color:var(--text-3);font-weight:600;margin-right:2px}
.u-menu-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.u-menu-group{border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:7px 9px;min-width:0}
.u-menu-g{font-weight:650;font-size:12px;color:var(--text-2);margin-bottom:3px}
.u-menu-item{font-size:12.5px;color:var(--text);line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-menu-item::before{content:'· ';color:var(--text-3)}
.u-caps-menu{color:var(--text-3);margin-top:2px;line-height:1.45}
@media (max-width:640px){.u-perm-row{grid-template-columns:1fr;gap:3px}}
/* 角色能力对照表：21 行 × 4 列，首列固定不换行，其余窄列居中 */
.u-caps{width:100%;border-collapse:collapse;font-size:12.5px}
.u-caps th,.u-caps td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.u-caps thead th{color:var(--text-2);font-weight:600;font-size:12px}
.u-caps th:not(:first-child),.u-caps td.c{text-align:center;width:76px}
.u-caps td:first-child{color:var(--text);width:46%;line-height:1.45}
.u-caps td.c{font-size:14px}
.u-caps .dim{color:var(--text-3)}
.u-caps tbody tr:hover{background:var(--surface-2)}
/* 菜单 → 能力位对照：菜单名 / 能力位 / 默认可见角色 */
.u-navmap td:first-child{width:30%}
.u-navmap td:nth-child(2){width:46%}
.u-navmap .u-navmap-g td{background:var(--surface-2);color:var(--text-2);font-weight:650}
/* ===== 角色与权限配置（2026-11-05 用户："增加账号权限角色配置功能"）=====
   同一张表从"只读对照"变成"可编辑授权"：单元格从 ✓/· 换成真 checkbox，
   多三样东西 —— ①顶部保存/撤销/新建 ②分组行 ③每组角色列下的 恢复默认/删除。
   ★ 颜色沿用主题变量，不写死；owner 列的 disabled 必须能一眼看出"这是锁住的"。 */
.u-roles-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;margin:2px 0 10px}
.u-roles-tt{font-weight:700;font-size:13px}
.u-roles-tt .mini{font-weight:400;margin-left:6px}
.u-roles-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.u-caps-wrap{overflow-x:auto}
.u-caps th.u-rolecol{text-align:center;width:96px;vertical-align:top}
.u-caps th.u-rolecol b{display:block;font-size:12.5px;color:var(--text)}
.u-caps th.u-rolecol .mini{display:block;font-weight:400;font-size:10.5px;color:var(--text-3);margin-top:2px}
.u-caps th.u-rolecol.u-dirty{background:var(--accent-soft);box-shadow:inset 0 -2px 0 var(--accent)}
.u-tagc{display:inline-block;margin-left:4px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:600;vertical-align:1px}
.u-caps tr.u-grp td{background:var(--surface-2);color:var(--text-2);font-weight:700;font-size:11.5px;padding:5px 10px}
.u-caps tr.u-foot td{border-bottom:0;padding-top:10px}
.u-caps input[type=checkbox]{accent-color:var(--accent);cursor:pointer;width:15px;height:15px;margin:0}
.u-caps input[type=checkbox]:disabled{cursor:not-allowed;opacity:.45}
.u-roles-note{margin-top:8px;line-height:1.7}
/* ============================================================
   定向台账（2026-10-09）—— docs/designs/定向台账-信息架构重设计-20261009.md
   ------------------------------------------------------------
   一页三段：**结论条在上 → 商品表在中 → 行内展开在下**。
   ★ 作用域硬约束：全部收在 `#ld*` 前缀的类名里，一个通用类名都不新增 ——
     `.tbl` / `.card` / `.btn` 这些既有类被 20+ 个页签共用，动了会波及整站。
     只借它们的样式，不改它们的定义。
   ============================================================ */

/* ---- ① 结论条 ---- */
#ldVerdict .ld-verdict{padding:20px 22px}
.ld-verdict-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.ld-verdict-n{font-size:30px;font-weight:680;letter-spacing:-1.2px;line-height:1}
.ld-verdict-n.bad{color:var(--red)} .ld-verdict-n.ok{color:var(--green)}
.ld-verdict-t{font-size:13.5px;color:var(--text-2)}
.ld-stats{display:flex;gap:22px;flex-wrap:wrap;margin:14px 0 16px;padding:12px 0 0;border-top:1px solid var(--line)}
.ld-stat .k{font-size:11.5px;color:var(--text-3);margin-bottom:3px}
.ld-stat .v{font-size:17px;font-weight:640;letter-spacing:-.4px}
.ld-stat .v em{font-style:normal;font-size:12px;color:var(--text-3);font-weight:500;margin-left:3px}
/* 保本线可视化：绿=安全 红=结构性亏损，红线是那条线 */
.ld-be-bar{position:relative;height:28px;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px solid var(--line);overflow:hidden;margin:8px 0 6px}
.ld-be-fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-sm) 0 0 var(--r-sm);
  background:linear-gradient(90deg,var(--green-l),var(--orange-l) 46%,var(--red-l))}
.ld-be-mark{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--red);z-index:2}
.ld-be-mark::after{content:attr(data-l);position:absolute;top:0;left:5px;font-size:10.5px;font-weight:700;
  color:var(--red);white-space:nowrap;line-height:26px}
.ld-be-cap{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-3)}
/* 校验结论 chips：点一下 = 表格筛到对应商品（这一条就是替代"跳 8 个页"的） */
.ld-chips{display:flex;gap:9px;flex-wrap:wrap}
.ld-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--r);padding:9px 14px;cursor:pointer;transition:var(--t);font-family:inherit;text-align:left}
.ld-chip:hover{border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-1px)}
.ld-chip.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}
.ld-chip .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.ld-chip .lv{font-size:10.5px;font-weight:700;border-radius:var(--r-xs);padding:2px 6px}
.ld-chip .cd{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--text)}
.ld-chip .n{font-size:11.5px;color:var(--text-3)}
.ld-chip.bad .dot{background:var(--red)} .ld-chip.bad .lv{background:var(--red-l);color:var(--red)}
.ld-chip.warn .dot{background:var(--orange)} .ld-chip.warn .lv{background:var(--orange-l);color:var(--orange)}
.ld-chip.zero{opacity:.45}

/* ---- ② 商品表 ---- */
#ldTable .tbl-wrap{overflow-x:auto;border-radius:var(--r-lg)}
.ld-tbl thead th{position:sticky;top:0;z-index:2;cursor:pointer;user-select:none}
.ld-tbl thead th:hover{color:var(--accent)}
.ld-tbl thead th.sorted{color:var(--accent)} .ld-tbl thead th .ar{opacity:.4;margin-left:3px;font-size:10px}
.ld-tbl thead th.sorted .ar{opacity:1}
.ld-tbl tbody tr{cursor:pointer}
.ld-tbl tbody tr.lv-bad td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.ld-tbl tbody tr.lv-warn td:first-child{box-shadow:inset 3px 0 0 var(--orange)}
.ld-tbl tbody tr.lv-ok  td:first-child{box-shadow:inset 3px 0 0 var(--green-line)}
.ld-tbl tbody tr.open td{background:var(--accent-soft)}
.ld-tbl .pname{max-width:270px;min-width:200px}
.ld-tbl .pname .t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ld-tbl .pname .i{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.ld-stdot{display:inline-block;width:8px;height:8px;border-radius:50%}
.ld-stdot.bad{background:var(--red)} .ld-stdot.warn{background:var(--orange)} .ld-stdot.ok{background:var(--green)}
.ld-dl{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;border-radius:var(--r-xs);padding:2px 7px;white-space:nowrap}
.ld-dl.set{background:var(--surface-3);color:var(--text-2)}
.ld-dl.bad{background:var(--red-l);color:var(--red)}
.ld-dl.none{background:transparent;color:var(--text-3);border:1px dashed var(--line-2)}
.ld-tbl .caret{display:inline-block;color:var(--text-3);font-size:10px;transition:transform var(--t)}
.ld-tbl tr.open .caret{transform:rotate(90deg);color:var(--accent)}

/* ---- ③ 行内展开 ---- */
.ld-det td{padding:0!important;background:var(--surface-2)}
.ld-det-in{padding:16px 18px 18px;background:var(--surface);border-top:1px solid var(--accent-line)}
.ld-det-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ld-det-h .pid{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.ld-h{font-size:12.5px;font-weight:620;color:var(--text-3);margin:0 0 9px}
/* 三行并列：平台实况 / 本地意图 / 实际产出 —— "配的"和"实际的"永远同一屏 */
.ld-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.ld-three-i{border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;background:var(--surface-2)}
.ld-three-i .src{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.ld-three-i .lbl{font-size:11.5px;font-weight:700;color:var(--text-3)}
.ld-three-i .from{font-size:10.5px;color:var(--text-3);font-family:var(--mono)}
.ld-kv{display:flex;gap:6px;flex-wrap:wrap;align-items:center;line-height:1.9}
.ld-kv .k{color:var(--text-3);font-size:12px}
.ld-kv .v{font-weight:620;font-size:13px}
/* 校验结论：每条都写明"本地 X → 平台 Y" */
.ld-drifts{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.ld-drift{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);
  padding:9px 12px;background:var(--surface)}
.ld-drift.bad{border-color:var(--red-line);background:var(--red-l)}
.ld-drift.warn{border-color:var(--orange-line);background:var(--orange-l)}
.ld-drift .body{flex:1;min-width:0}
.ld-drift .code{font-family:var(--mono);font-size:11.5px;font-weight:700}
.ld-drift.bad .code{color:var(--red)} .ld-drift.warn .code{color:var(--orange)}
.ld-drift .msg{font-size:12.5px;color:var(--text-2);line-height:1.6}
.ld-drift .dm{font-size:11.5px;margin-top:3px;color:var(--text-3)}
.ld-drift .dm b{color:var(--text-2);font-weight:600}
/* 按对象分两行：达人的"批量/单人"不再是页面分类，机构的邀约链收进本行前置状态 */
.ld-obj{border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden;background:var(--surface)}
.ld-obj-h{display:flex;align-items:center;gap:10px;padding:9px 13px;background:var(--surface-2);
  border-bottom:1px solid var(--line);font-size:12.5px;font-weight:620}
.ld-obj-h .slots{display:flex;flex:1;flex-wrap:wrap;align-items:center}
.ld-slot{padding:0 11px;border-left:1px solid var(--line);line-height:1.5}
.ld-slot:first-child{border-left:0;padding-left:0}
.ld-slot .sk{font-size:10.5px;color:var(--text-3);display:block}
.ld-slot .sv{font-size:12.5px;font-weight:620;white-space:nowrap}
.ld-obj-b{padding:11px 13px}
.ld-tlrow{display:grid;grid-template-columns:minmax(120px,1.3fr) 58px 1fr 96px 72px;gap:10px;align-items:center;
  padding:6px 9px;border-radius:var(--r-xs);background:var(--surface-2);font-size:12.5px;margin-bottom:5px}
.ld-tlrow .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}
.ld-tlrow .bar{height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.ld-tlrow .bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.ld-tlrow .gm,.ld-tlrow .rt{text-align:right;font-variant-numeric:tabular-nums}
.ld-tlrow .rt{font-weight:620}
/* 计划明细：默认折叠 —— §6.1 的技术约束（单商品 957/1122 条，全量翻要 14~20 秒） */
.ld-plans{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.ld-plans-h{display:flex;align-items:center;gap:10px;padding:9px 13px;background:var(--surface-2);
  border-bottom:1px solid var(--line);font-size:12.5px;font-weight:620;cursor:pointer}
.ld-plans-h:hover{background:var(--surface-3)}
.ld-plan-row{display:flex;align-items:center;gap:10px;padding:7px 13px;border-bottom:1px solid var(--line);
  font-size:12.5px;flex-wrap:wrap}
.ld-plan-row:last-child{border-bottom:0}
.ld-plan-row .pp{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.ld-plan-row .r{font-weight:650;min-width:44px}
.ld-plan-row .r.over{color:var(--red)}
.ld-plan-row.more{color:var(--text-3);justify-content:center;font-size:11.5px;background:var(--surface-2)}
/* 写操作：预演 / 真改 两颗按钮分开，真改要多点一次 */
.ld-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:12px;border-top:1px dashed var(--line-2)}
.ld-acts .hint{font-size:11.5px;color:var(--text-3);margin-left:auto}
.ld-res{margin-top:10px}
@media (max-width:1180px){ .ld-three{grid-template-columns:1fr} }

/* ==================== 优惠券（经营组 · 2026-10-14）====================
   一行一张券：券是什么 / 多大优惠 / 什么时候到期 / 挂在哪些商品上。
   到手价判据在 coupon-live.mjs（「计入到手价」），这里只负责"看得清"。
   ★ 到期倒计时是本页存在的理由之一：平台券没有"长期"档、到期不提醒、作废不可逆
     ⇒ "还剩几天"必须算出来摆在卡上，快到期的显眼标红，别等客户下单才发现券没了。 */
.cp-head,.cp-card{display:grid;grid-template-columns:minmax(210px,1.5fr) 118px 172px minmax(240px,1.3fr);gap:12px;align-items:start}
.cp-head{padding:0 12px 6px;font-size:11.5px;color:var(--muted);font-weight:600}
.cp-card{margin-bottom:8px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.cp-card.cp-on{border-left:3px solid var(--green,#2e9e5b)}   /* 计入到手价的券：决定到手价的就是它们 */
.cp-card.cp-dead{opacity:.62}                                 /* 已结束/已作废：照样列出来，但不参与计算 */
/* ★ 2026-10-10 平台营销券（会员/收藏/回购/评价抽券）：官方开放接口不下发的那批。
   橙边=「看得见但不算进到手价」，与绿边（计入到手价）刻意区分 —— 人群券不能当人人可得的价。
   `.cp-mini` = 收缩成一行：它们不解释任何价格数字，占满四列卡片会把商家的 6 折券挤没。 */
.cp-card.cp-plat{border-left:3px solid var(--orange,#e08b2a)}
.cp-card.cp-mini{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 12px}
.cp-card.cp-mini b{font-weight:600}
.cp-card.cp-mini .num{font-variant-numeric:tabular-nums;font-weight:650}
.cp-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.cp-c2 .num{text-align:right;font-weight:650;font-variant-numeric:tabular-nums;font-size:13.5px}
.cp-c3{font-size:12px;color:var(--text-3)}
.cp-exp{display:inline-flex;align-items:center;margin-bottom:3px}
/* 到期倒计时（2026-10-14 用户拍板：天数倒计时 + 临期红字醒目，日期进 tooltip） */
.cp-exp-red{color:var(--red);font-weight:700;font-size:13.5px;letter-spacing:.2px}
.cp-exp-orange{color:var(--orange);font-weight:650}
/* 天数是倒计时里唯一的变量 ⇒ 数字单独放大（嵌在红/橙/灰各级里都成立） */
.cp-exp-n{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
/* 时间条：长度=有效期已消耗比例，颜色=「还剩几天」分级（与文字同一口径） */
.cp-lifebar{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin:5px 0 4px;max-width:150px}
.cp-lifebar i{display:block;height:100%;border-radius:999px;background:var(--green,#2e9e5b)}
.cp-lv-crit i{background:var(--red)}
.cp-lv-warn i,.cp-lv-mid i{background:var(--orange)}
.cp-chip{display:inline-block;padding:1px 9px;margin:2px 6px 2px 0;border-radius:999px;background:var(--accent-soft);
  border:1px solid var(--line-2);font-size:11.5px;cursor:pointer;line-height:1.7}
.cp-chip:hover{border-color:var(--accent);color:var(--accent)}
.cp-scope-shop{display:inline-block;padding:1px 9px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--line-2);font-size:11.5px;font-weight:600}
.cp-scope-unk{display:inline-block;padding:1px 9px;margin-right:6px;border-radius:999px;background:var(--orange-l);border:1px solid var(--orange-line);color:var(--orange);font-size:11.5px;font-weight:600}
.cp-risk{margin-top:4px;padding:4px 8px;border-radius:6px;background:var(--orange-l);border:1px solid var(--orange-line);
  color:var(--orange);font-size:11.5px;line-height:1.7}
.cp-cov{margin-top:12px;padding:9px 12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);line-height:1.8}
.cp-warn{margin-top:8px;padding:9px 12px;border-radius:8px;font-size:12.5px;line-height:1.8;
  background:var(--orange-l);border:1px solid var(--orange-line);color:var(--orange)}
.cp-dang{color:var(--orange)}
@media (max-width:1180px){.cp-head{display:none}.cp-card{grid-template-columns:1fr 1fr;gap:8px}}

/* ============================================================
   手动定向（2026-10-15）—— .mn-*
   ------------------------------------------------------------
   设计取向：**左右两条完整管线并排**，而不是一个平台下拉。
   为什么：真实操作姿势是"抖店这边发完，接着去微信发同一批人"。
   切平台会把另一半的状态（已粘对象 / 已选模板 / 未发预演）藏起来，
   而那几样恰恰最容易被误当成"我还没发"。⇒ 两列一直都在眼前。

   ★ 排版纪律（2026-10-15 定稿，方案 B）
     第一版把每列做成"带 3px 平台色左边框 + 圆角 + 阴影"的卡片，页面像两张铁皮。
     病根不是"有边框"，是**五层装饰同时在喊"看我"**（色条/圆角/描边/阴影/整列高亮），
     而两列是对等关系（抖店发一批、微信发一批），对等的东西本来就不该靠装饰分主次；
     装饰还全花在"这列属于哪个平台"上 —— 那恰恰是最不需要强调的信息。
     现在只留**一层**：
       · 卡片只留 `1px var(--line)` + 圆角，**不要阴影**（页面底色本来就有 tint，再加阴影就重了）
       · 平台身份**只**由标题旁那枚小胶囊承担；没有色条、没有整列高亮
       · 卡片内部靠留白 + 「小标题 + 标题后延伸细线」分节，不套第二层框
       · 卡片里的模板/通道改成**无描边的浅色小块**（白底卡片里再叠描边会变成"盒中盒"）
       · 真正要强调的时刻，只在**认人行**上用绿/橙/红表达，不动容器
     ⇒ 页面唯一的重量来自内容本身。

   列内部沿用"一条命令 + 三样点一下就完成的选择"：
     · 唯一的输入框是命令条（用户手上的东西只有一串名字/链接）
     · 模板 / 通道都是点一下就完成的选择
     · 每条输入渲染成"原话 → 识别为 → 真实ID → 状态"对照
     · 发送按钮没预演时是**锁定态**而不是灰色死按钮：它自己写着"先预演再发送"
   ============================================================ */

/* ---- 两栏：左 = 四步（两个平台各自一列），右 = 「本次要发什么」（两平台共用一块） ----
   ★ 2026-10-16 老板：「空间利用率目前不高」。
     实测：整页 1270px 宽时，右半边约 1000×700px **整块空着**（五步全挤在左边两列里）。
     ⇒ 右侧固定一栏，把"要发给谁 / 谁发不出去 / 谁已经发过"摆到空着的地方 ——
       这三件事本来就是点发送前最该看清的，不是额外加的东西。
   ★ 窄屏（<1180px）退回单栏，面板排在最前（它是摘要，先看摘要再操作是合理的）。 */
/* 顶部说明收进折叠条（2026-10-16）：这段原来占首屏 ~400px，把两个操作列压到屏幕外，
   而这是天天用的页、不是读文档的地方。折叠后默认只占一行，要读点开。 */
.mn-intro{margin:2px 0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.mn-intro>summary{display:flex;align-items:center;gap:8px;padding:7px 11px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--text-2);list-style:none;user-select:none}
.mn-intro>summary::-webkit-details-marker{display:none}
.mn-intro>summary:hover{color:var(--text)}
.mn-intro>summary .mini{font-weight:400;margin-left:auto;color:var(--muted)}
.mn-intro[open]>summary{border-bottom:1px solid var(--line);margin-bottom:6px}
.mn-intro .sub{padding:0 11px 8px}
.mn-cols{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,400px);gap:16px;align-items:start;
  margin-bottom:22px;
}
/* ★ 两栏都写**显式 grid-column**：DOM 里面板在前（窄屏时希望摘要先出现），
   但宽度必须由我们指定 —— 不写的话面板会拿到第一栏（= 那条 1fr，反而比左列宽），
   实测症状：右栏 980px、左列两平台被压到 400px（占位全反了）。 */
/* ★★ 2026-10-16 平台 Tab：左区从"两列并排"变成"一次一列" ⇒ 只留一条轨道，
   省下来的宽度全部给这一列（老板要的正是"把空间全部留出给新的版面"）。 */
.mn-left{grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;min-width:0}
.mn-panel{grid-column:2;grid-row:1}

/* ---- 平台 Tab 条（页顶切换微信小店 / 抖店） ----
   ★★ 视觉第二版（2026-10-16，老板："tab切换按钮太丑了。换个样式"）：
     第一版是**两张等宽大卡片**、状态徽标塞在卡片右端 ⇒ 屏幕上两个"右边一大坨"，像两块广告牌，
     而且与全站别的平台切换长得完全不一样。
     现在照**全站既有的平台切换语言**（作用域条的 `.sc-pfs`/`.sc-pf`）做：
     左边一枚**分段控件**（只有平台名，选中那格填强调色），店名/人数/状态挪到右边一行淡字，
     顺序与页签一一对应 ⇒ 一眼看出哪组是哪一边，也不会再有两个大色块抢视线。
   ★ 状态**必须仍然吸顶可见**——那才是这一条存在的意义（见 app.js 里 mnTabSet 上方那段：
     "别让另一半的状态被藏起来"）。所以 `.mn-tabs` 吸顶，且避让页签状态条（`--pane-h`，
     同右栏那一段的理由；不然它会被 `.pane-bar` 压住半行）。 */
.mn-tabs{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  grid-column:1;
  position:sticky;top:var(--pane-h, 0px);z-index:4;
  padding:8px 0;background:var(--bg);
}
.mn-pfs{
  display:inline-flex;flex:0 0 auto;border:1px solid var(--line-2);border-radius:var(--r-pill);
  overflow:hidden;background:var(--surface);
}
.mn-pf{
  border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--text-3);
  padding:6px 16px;cursor:pointer;transition:var(--t);white-space:nowrap;
}
.mn-pf+.mn-pf{border-left:1px solid var(--line-2)}
.mn-pf:hover{color:var(--text);background:var(--surface-2)}
.mn-pf.on{background:var(--accent);color:#fff}
/* 每个平台一组"店名 · 人数 · 状态"，淡字 —— 状态徽标在全彩下也读得清（不用 opacity 压暗，
   因为被压暗的恰恰是"另一半还剩什么事"这条安全线）。 */
.mn-tabs-hint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;font-size:11.5px;color:var(--text-3)}
.mn-th{display:inline-flex;align-items:center;gap:6px;min-width:0}
/* 平台色点：与侧栏 `platDot` 同一套颜色变量（微信=绿、抖店=近黑），
   用来消掉"这组的『已发送 2』是哪一边的"这个歧义（见 app.js 里那段注释）。 */
.mn-th-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--text-3)}
.mn-th-dot[data-pf="wxshop"]{background:var(--pf-wxshop)}
.mn-th-dot[data-pf="douyin"]{background:var(--pf-douyin)}
.mn-th-dot[data-pf="pdd"]{background:var(--pf-pdd)}
.mn-th-dot[data-pf="kuaishou"]{background:var(--pf-ks)}
.mn-th-dot[data-pf="xhs"]{background:var(--pf-xhs)}
.mn-th-shop{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;color:var(--text-3)}
.mn-th.on .mn-th-shop{color:var(--text-2);font-weight:600}
.mn-th-n{white-space:nowrap}
.mn-th-sep{width:1px;height:12px;background:var(--line-2);display:inline-block;flex:0 0 auto}
/* 状态徽标（小胶囊）：页顶 Tab 提示行用，样式与全站 pill 一致 */
.mn-tab-badge{
  font-size:11px;font-weight:600;white-space:nowrap;
  padding:1px 8px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-3);
}
.mn-tab-badge.green{background:var(--green-l);color:var(--green)}
.mn-tab-badge.orange{background:var(--orange-l);color:var(--orange)}
.mn-tab-badge.red{background:var(--red-l);color:var(--red)}
.mn-tab-badge.accent{background:var(--accent-soft);color:var(--accent)}
.mn-tab-badge.gray{background:var(--surface-2);color:var(--text-3)}
/* 右栏标题旁那枚"这一栏是谁"（原来是一对切换按钮，现在只作标注 —— 可点的是页顶 Tab） */
.mn-pfnow{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;color:var(--text-3)}
/* 右栏面板 */
.mn-panel{
  /* ★★ 2026-10-16：吸顶偏移必须**避让页签状态条**（`.pane-bar`，它钉在 top:0 且不透明）。
     原来写死 `top:12px` ⇒ 往下滚的时候右栏顶部（`本次要发什么` 那一行）被状态条压住看不见。
     `--pane-h` 是全局已有的实测值（`syncPaneH()`，见 app.js:2022），
     它存在的理由与这里一模一样："要吸顶就得共用一个真相"。 */
  position:sticky;top:calc(var(--pane-h, 0px) + 12px);display:flex;flex-direction:column;gap:8px;min-width:0;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-1);padding:12px 12px 14px;
}
.mn-panel-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mn-panel-h b{font-size:14px;letter-spacing:-.2px}
.mn-panel-h2{
  display:flex;align-items:baseline;gap:8px;margin-top:4px;padding-top:10px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:700;
}
.mn-panel-b{min-width:0}
/* 平台切换（两个平台共用这一块 ⇒ 必须能一眼看出现在显示的是谁） */
.mn-pfswitch{display:inline-flex;gap:2px;margin-left:auto;padding:2px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line-2)}
.mn-pfswitch button{
  border:0;background:transparent;font:inherit;font-size:11.5px;font-weight:600;color:var(--text-3);
  padding:3px 10px;border-radius:var(--r-pill);cursor:pointer;transition:var(--t);
}
.mn-pfswitch button:hover{color:var(--text)}
.mn-pfswitch button.on{background:var(--accent);color:#fff}
.mn-panel-hist{max-height:280px;overflow:auto}
/* 清单一行：头像/名字 + ID + 状态 + 原因 */
.mn-rpic{width:26px;height:26px;flex:0 0 26px;border-radius:50%;object-fit:cover;background:var(--surface-3)}
.mn-plrow{display:flex;align-items:flex-start;gap:9px;padding:8px 9px;border-radius:var(--r);
  background:var(--surface-2);border-left:3px solid var(--line-2);margin-top:6px}
.mn-plrow.ok{border-left-color:var(--green)}
.mn-plrow.amb{border-left-color:var(--orange)}
.mn-plrow.bad{border-left-color:var(--red)}
.mn-plrow .t{font-size:12.5px;font-weight:600;word-break:break-all}
.mn-plrow .i{font-family:var(--mono);font-size:11px;color:var(--muted);word-break:break-all}
.mn-plrow .w{font-size:11.5px;line-height:1.6;color:var(--text-2);margin-top:2px}
.mn-plrow .s{flex:0 0 auto;font-size:11.5px;font-weight:700;white-space:nowrap}
.mn-plrow.ok .s{color:var(--green)}
.mn-plrow.amb .s{color:var(--orange)}
.mn-plrow.bad .s{color:var(--red)}
.mn-plstat{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--text-2);
  padding:2px 0 6px;border-bottom:1px dashed var(--line)}
.mn-plstat b{font-size:14px}
.mn-placts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

@media (max-width:1180px){
  .mn-cols{grid-template-columns:1fr}
  .mn-left{grid-column:auto;grid-row:auto;grid-template-columns:minmax(0,1fr)}
  .mn-panel{grid-column:auto;grid-row:auto;position:static}
}
.mn-col{
  min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:15px 17px 18px;
}
.mn-colh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.mn-colname{font-size:16px;font-weight:700;letter-spacing:-.3px}
/* ★ 店铺下拉进列头：两行并一行（老板定的）。下拉本身就是"这一列发到哪家店"的真相。 */
.mn-colshop{flex:1 1 150px;min-width:130px;max-width:240px}
.mn-colstate{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--text-3);white-space:nowrap}
.mn-colstate.ready{color:var(--green)}
.mn-colstate.busy{color:var(--accent)}
.mn-colnote{margin-bottom:4px;line-height:1.6}

/* ---- 列顶横向进度条：① 模板 ─ ② 通道 ─ ③ 粘对象 ─ ④ 预演·发送 ----
   与步骤框左上角的状态灯同一份状态；进页一眼看到走到哪，点节点跳到那一步。 */
/* ★★ 2026-10-17（老板："不顺手"）：**步骤条吸顶** —— 滚到 ③ 以下就看不见"走到哪一步了"。
   贴在页顶（让开 .pane-bar 的高度），带背景色遮住下面滚过的内容。
   z-index 比列头高、比抽屉/面板低。 */
.mn-progress{display:flex;align-items:center;gap:4px;margin:2px 0 4px;flex-wrap:wrap;
  position:sticky;top:calc(var(--pane-h, 0px) + 2px);z-index:3;
  background:var(--surface);padding:4px 0;border-radius:0 0 6px 6px}
.mn-pn{
  display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;cursor:pointer;
  padding:3px 7px;border-radius:999px;font-size:11.5px;color:var(--text-3);transition:var(--t);white-space:nowrap;
}
.mn-pn i{
  width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;font-style:normal;background:var(--surface-3);color:var(--text-3);border:1px solid var(--line-2);
}
.mn-pn.cur{color:var(--accent);font-weight:650}
.mn-pn.cur i{background:var(--accent);color:#fff;border-color:var(--accent)}
.mn-pn.done{color:var(--green)}
.mn-pn.done i{background:var(--green-l);color:var(--green);border-color:var(--green-line)}
.mn-pn:hover{background:var(--surface-2)}
.mn-pc{flex:1 1 12px;height:1px;background:var(--line);min-width:8px}

/* ---- 步骤隔离框（老板定的）：一步一框，做完那一步整框转绿 ----
   ★ 为什么从"小标题+细线"改成框：老板反馈「1,2,3步骤混一起，逻辑不清晰」。
     框是**边界**不是装饰 —— 它回答"这一步到哪里算完"。
   ★ 完成态 = 边框转绿 + 极淡绿底 + 标题转绿，三处同时变，一眼扫过去就知道走到哪了。
     不用阴影、不用粗色条 —— 保持 B 方案"只留一层"的轻。 */
.mn-step{
  margin-top:12px;padding:12px 14px 14px;min-width:0;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  transition:var(--t);
}
.mn-step.done{border-color:var(--green-line);background:color-mix(in srgb,var(--green) 3.5%,var(--surface))}
.mn-step.done .mn-bh{color:var(--green)}
.mn-step.done .mn-bh::after{background:var(--green-line)}
/* ★ 步骤标题要"醒目"（老板定的）：14px + 700 字重 + 主文字色。
   之前是 11px 灰色小字（那是"小节标签"的规格），步骤是这一页的骨架，不该比正文还轻。 */
.mn-step .mn-bh{
  font-size:14px;font-weight:700;letter-spacing:-.2px;text-transform:none;color:var(--text);
  margin-bottom:12px;gap:9px;
}
.mn-step .mn-bh .mini{font-size:11.5px}
.mn-step .mn-dot{width:22px;height:22px;font-size:12px}
/* 步骤状态灯：○ 还没轮到 · ● 现在做这个 · ✓ 完成 */
.mn-dot{
  flex:0 0 auto;width:19px;height:19px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;line-height:1;
  color:var(--text-3);background:var(--surface-3);border:1px solid var(--line-2);
}
.mn-dot.cur{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}
.mn-dot.ok{color:var(--green);background:var(--green-l);border-color:var(--green-line)}
/* ③ 的依赖闸门：没选通道就不知道这里该认什么 —— 明说，而不是让它静默无效 */
.mn-lock{
  padding:7px 11px;border-radius:var(--r);margin-bottom:9px;
  background:var(--orange-l);border:1px solid var(--orange-line);color:var(--orange);line-height:1.6;
}
.mn-lock.hide{display:none}

/* ---- 小节：小标题 + 标题后延伸的细线（替代第二层框）---- */
.mn-block{margin-top:20px;min-width:0}
.mn-bh{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;
  font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--text-3);
}
.mn-bh::after{content:"";flex:1 1 24px;height:1px;background:var(--line);min-width:18px}
.mn-bh .mini{font-weight:400;letter-spacing:0;text-transform:none}
.sp{flex:1 1 auto;min-width:0}
.mn-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}
@media (max-width:1180px){
  .mn-cols{grid-template-columns:1fr}
}

/* ---- 按钮三档：小动作 / 主行动 / 真发 ---- */
.mn-mini{
  border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:5px 13px;
  cursor:pointer;color:var(--text-2);font-size:12.5px;transition:var(--t);white-space:nowrap;
}
.mn-mini:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.mn-mini:disabled{opacity:.45;cursor:not-allowed}
/* ★ 2026-10-16「⑤ 给达人的定向内容」：
   · `.mn-mini.on` = 当前选中的那个（人 / 商品 / 版本）—— 与通道胶囊同一套"选中"语言，
     否则一排一模一样的按钮看不出点的是哪个。
   · `.mn-brief-box` = 只读预览框。**必须明示只读**（用 surface-2 底色 + 等宽字体）：
     这段话是要粘进微信的，行与列对不齐会很显眼，而用户改它没用（复制的是后端拼的那份——
     其实这里就是同一份，见 mnBriefText；但**不允许就地编辑**是因为"编辑过的文本"和
     "我们记录的承诺"就会分叉，真要加话就走下面的「补充说明」）。 */
.mn-mini.on{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft);font-weight:600}
.mn-brief-box{
  width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface-2);color:var(--text);font-size:12.5px;line-height:1.65;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.mn-brief-box:focus{outline:none;border-color:var(--accent-line)}
.mn-go{
  border:0;background:var(--accent);border-radius:999px;padding:8px 20px;cursor:pointer;color:#fff;
  font-size:13px;font-weight:600;transition:var(--t);box-shadow:0 8px 20px -12px var(--accent);white-space:nowrap;
}
.mn-go:hover:not(:disabled){background:var(--accent-h);transform:translateY(-1px)}
.mn-go:active:not(:disabled){transform:none}
.mn-go:disabled{background:var(--surface-3);color:var(--text-3);box-shadow:none;cursor:not-allowed}
/* 真发按钮：默认是"锁定态"而不是 disabled 灰 —— 它自己说明为什么要先预演 */
.mn-send{
  border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:8px 20px;
  cursor:not-allowed;color:var(--text-3);font-size:13px;font-weight:600;transition:var(--t);white-space:nowrap;
}
.mn-send.armed{
  cursor:pointer;color:#fff;background:var(--red);border-color:var(--red);
  box-shadow:0 10px 24px -12px var(--red);
}
.mn-send.armed:hover{filter:brightness(.94);color:#fff;transform:translateY(-1px)}

/* ---- 命令条 ---- */
.mn-cmdbar{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1.5px solid var(--line-2);
  border-radius:var(--r-lg);background:var(--surface-2);transition:var(--t);
}
.mn-cmdbar:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
.mn-cmdic{color:var(--accent);font-size:17px;line-height:1.5;opacity:.8;user-select:none}
.mn-cmd{
  /* min-width:0 是必须的：textarea 在 flex 里默认按 cols 的固有宽度撑，
     两栏时会把右栏顶出容器（第一版就中招了 —— 表现为右边被裁掉一截）。 */
  flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;resize:vertical;min-height:64px;
  font:13.5px/1.75 var(--mono);color:var(--text);letter-spacing:-.2px;
}
.mn-cmd::placeholder{font-family:inherit;font-size:12.5px;line-height:1.7;color:var(--text-3);letter-spacing:0}
.mn-cmdfoot{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap;min-height:26px}
.mn-cmdfoot b{color:var(--text-2);font-weight:600}

/* ---- ① 模板 ----
   ★ 白底卡片里**不再给每一块加描边** —— 描边叠描边会变成"盒中盒"，整页就重了。
     改成"浅灰底 + 无描边"；选中时才给一条强调色描边（那才是真正需要被看见的时刻）。
   ★ 「改 / ✕」是**右侧一列**，不是绝对定位。
     前两版分别试过"右下角"（正好压住最后一行备注）和"右上角"（模板名一长就压住标题，
     「抖店·团长活动通用」这种还会和"别店"标记撞在一起）—— 只有让它们占一列才不会再撞。 */
/* 模板也是"选择" ⇒ 并排铺开（同 .mn-chans 的理由） */
.mn-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.mn-tpl{
  min-width:0;display:flex;flex-direction:column;gap:5px;
  text-align:left;cursor:pointer;border:1px solid transparent;border-radius:var(--r);
  background:var(--surface-2);padding:10px 12px;transition:var(--t);
}
.mn-tpl:hover{border-color:var(--accent-line);background:var(--surface-3)}
.mn-tpl.on{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.mn-tpl.dim{opacity:.5}          /* 绑在别的店上的模板：还在，但不推荐现在用 */
.mn-tpl-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.mn-tpl-k{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;font-weight:650;letter-spacing:-.1px;line-height:1.45}
/* 摘要与备注并排一行、各占一半：列只有整页的一半宽，纵向堆 4 行会把页面拉得过长 */
.mn-tpl-s{flex:1 1 auto;min-width:0;font-size:11px;color:var(--text-3);margin-top:5px;line-height:1.6}
.mn-tpl-n{
  flex:0 0 auto;font-size:10.5px;color:var(--text-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85;
}
.mn-tpl-act{display:flex;gap:5px;align-self:flex-start;margin-top:2px;opacity:.5;transition:var(--t)}
.mn-tpl:hover .mn-tpl-act,.mn-tpl.on .mn-tpl-act{opacity:1}
/* ★ 选中卡上的徽标：回答"显示的模板都有效还是选中的有效"——只有选中的参与发送，
   这句话直接印在卡上（与方案块「✓ 本次发送用这个」同一套语言）。 */
.mn-tpl-badge{
  display:inline-block;margin-left:7px;padding:1px 8px;border-radius:var(--r-pill);
  font-size:10px;font-weight:650;color:var(--green);background:var(--green-l);border:1px solid var(--green-line);
}
/* ★ 最近发过的详情行：字段名用小标签样式，与值区分（商品 / 对象 / 费率 / 模板 / 平台回执） */
.rec-sub b{font-weight:600;color:var(--text-3);font-size:10.5px}
.rec-sub b::after{content:"　"}
.mn-tpl.locked .mn-tpl-k::after{
  content:"别店";font-size:10.5px;font-weight:600;color:var(--orange);
  border:1px solid var(--orange-line);background:var(--orange-l);border-radius:var(--r-pill);padding:0 7px;
}
.mn-tpl.add{
  display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;
  border:1px dashed var(--line-2);background:transparent;color:var(--text-3);font-size:12.5px;font-weight:600;
}
.mn-tpl.add:hover{color:var(--accent);border-color:var(--accent-line);background:var(--surface-2)}

/* ---- 模板编辑器 ---- */
.mn-ed{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.mn-ed-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.mn-ed-hint{margin-bottom:10px;line-height:1.7}
.mn-ed-src{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.mn-ed-pane{display:grid;grid-template-columns:1fr 264px;gap:14px;align-items:start}
.mn-ed-list,.mn-ed-shelf{display:flex;flex-direction:column;gap:8px;min-height:60px}
.mn-ed-shelf{padding-left:14px;border-left:1px dashed var(--line-2)}
.mn-ed-shelf-t{font-size:11px;color:var(--text-3);letter-spacing:.3px;text-transform:uppercase;font-weight:650}
.mn-shelf-i{
  display:flex;align-items:center;gap:7px;padding:5px 9px;border:1px dashed var(--line-2);border-radius:var(--r);
  font-size:12px;cursor:pointer;color:var(--text-2);transition:var(--t);background:var(--surface-2);
}
.mn-shelf-i:hover{border-color:var(--accent-line);color:var(--accent)}
.mn-shelf-i .mono{font-size:11px;opacity:.7}

/* ---- 商品行 = 一行摘要，细节进右抽屉（2026-10-15 定稿）----
   ★ 为什么收成摘要：三个层级（什么货 / 用哪套 / 费率细节）挤一行，连"用这个"
     都要印在每一行上 —— 挤到看不清，还自相矛盾。
     摘要只答两件事（什么货 · 现在用哪套），费率细节进抽屉 —— 横向空间大三倍。 */
.mn-prow{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:10px 12px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface-2);transition:var(--t);cursor:pointer;
}
.mn-prow:hover{border-color:var(--accent-line);background:var(--surface)}
.mn-prow.on{border-color:var(--accent-line);background:var(--accent-soft)}
.mn-prow input[type=checkbox]{accent-color:var(--accent);cursor:pointer;flex:0 0 auto}
.mn-pname{flex:1 1 150px;min-width:0;font-size:13px;line-height:1.45;font-weight:600}
.mn-pname small{display:block;color:var(--text-3);font-size:10.5px;font-family:var(--mono);font-weight:400}
/* 当前使用方案的摘要芯片：一眼看出每个口径用哪套费率 */
.mn-chips{display:inline-flex;gap:5px;flex-wrap:wrap;flex:0 0 auto}
.mn-chip{
  font-size:11px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--green-l);color:var(--green);border:1px solid var(--green-line);white-space:nowrap;
}
/* dim 必须压过 warn：另一口径的芯片会同时挂 warn dim（费率未填+不参与本次发送），
   同特异度下 warn 在后则置灰失效 —— 与 app.js「另一口径芯片必须置灰」约定冲突。 */
.mn-chip.dim,.mn-chip.warn.dim{background:var(--surface-3);color:var(--text-3);border-color:var(--line-2)}
.mn-chip.warn{background:var(--orange-l);color:var(--orange);border-color:var(--orange-line)}
.mn-chip.none{background:var(--surface-3);color:var(--text-3);border-color:transparent;font-weight:500}
.mn-cfg{align-self:flex-start;color:var(--accent);font-weight:600}
/* 公开佣金 = 准入门槛。**只读**；状态用色块表达，不是一句文字 */
.mn-pub{
  flex:0 0 auto;font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--text-3);cursor:pointer;white-space:nowrap;border:1px solid transparent;
}
.mn-pub.ok{background:var(--green-l);color:var(--green);border-color:var(--green-line)}
.mn-pub.bad{background:var(--orange-l);color:var(--orange);border-color:var(--orange-line)}
.mn-pub:hover{border-color:var(--accent-line)}
/* ---- 抽屉里的价格块：SKU + 券后到手价 + 按当前费率的「达人每单」----
   老板的原话是「这我知道佣金有没给错了」——
   平台按**到手价（券后）**结算，有券的商品拿标价乘佣金率会高估。
   所以三个数并排：标价 / 到手价 / 达人每单（按到手价算）。 */
.mn-dw-price{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);
  padding:12px 13px;margin-bottom:14px;
}
.mn-price-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;font-weight:650;margin-bottom:9px}
.mn-price-h .mini{font-weight:400}
.mn-price-sum{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2);margin-bottom:10px}
.mn-price-sum b{font-size:14px;font-weight:680;font-variant-numeric:tabular-nums}
.mn-price-sum .warn{color:var(--orange)}
.mn-price-sum .ok{color:var(--text)}
.mn-price-tbl{width:100%;border-collapse:collapse;font-size:12px}
.mn-price-tbl th,.mn-price-tbl td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left}
.mn-price-tbl th{color:var(--text-3);font-weight:600;font-size:11px;white-space:nowrap}
.mn-price-tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mn-pr-attr{max-width:270px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 有券的行的到手价标橙 —— 提醒"这个数不是标价" */
.mn-pr-cut{color:var(--orange);font-weight:650}
.mn-pr-coupon{margin-left:5px;font-size:10px;color:var(--orange);border:1px solid var(--orange-line);background:var(--orange-l);border-radius:var(--r-pill);padding:0 6px}
.mn-pr-earn{font-weight:650;color:var(--accent)}
.mn-price-warn{
  margin-top:10px;padding:8px 11px;border-radius:var(--r);font-size:11.5px;line-height:1.7;
  background:var(--orange-l);border:1px solid var(--orange-line);color:var(--orange);
}
/* 「邀约机构」这类不带费率的通道：参数区藏掉，换成一句说明（不是没配，是配了也不发） */
.mn-noparam{
  padding:12px 14px;border-radius:var(--r-lg);font-size:12.5px;line-height:1.9;
  background:var(--surface-2);border:1px dashed var(--line-2);color:var(--text-2);
}
.mn-noparam b{color:var(--text)}
/* ★★ 机构线的「分配方式」（2026-10-15）
   老板的问题：「我们帮分配达人佣金和服务费；如果要求团长自己分配时就算总佣，界面怎么表现好？」
   答案：模式决定**字段集**（我们分配=两个数；团长分配=一个总佣），不发的字段直接不渲染。
   所以这里不是"一个下拉 + 灰掉的输入框"，而是两枚说人话的模式卡。 */
.mn-modebar{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.mn-modelabel{align-self:center;font-size:12px;font-weight:650;color:var(--text-2);flex:0 0 auto;min-width:56px}
.mn-mode{
  flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;
  padding:9px 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface-2);
  transition:var(--t);font:inherit;
}
.mn-mode:hover{border-color:var(--accent-line)}
.mn-mode.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:none}
.mn-mode b{font-size:12.5px;font-weight:680;color:var(--text)}
.mn-mode.on b{color:var(--accent)}
.mn-mode span{font-size:10.5px;color:var(--text-3);font-weight:600}
.mn-mode i{font-size:11px;color:var(--text-3);font-style:normal;line-height:1.5}
.mn-mode.on i{color:var(--text-2)}
/* 合计行：两种模式的合计算法不同，所以必须按模式算给用户看 */
.mn-sumline{
  margin-top:9px;padding:7px 11px;border-radius:var(--r);font-size:11.5px;line-height:1.7;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);
}
.mn-sumline b{font-size:13px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mn-sumline.dim{opacity:.72}
.mn-sumline.bad{background:var(--orange-l);border-color:var(--orange-line);color:var(--orange)}
.mn-sumline.bad b{color:var(--orange)}
.mn-sumline .mini{display:block;margin-top:2px;color:var(--text-3)}
/* 方案块（在右抽屉里，横向宽裕） */
.mn-sch{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.mn-sch.on{border-color:var(--accent-line)}
.mn-sch.off{opacity:.72}
/* nor（费率未填=橙线）必须压过 act（绿线）：ready 与 active 是两个独立布尔，
   s.active 且 params=0 时 class 同时带 nor act —— 橙线是可操作问题，不能被绿线盖住（两机信件 2026-10-11 ④）。 */
.mn-sch.nor,.mn-sch.act.nor{border-left:3px solid var(--orange)}
/* 勾了「当前使用」的方案：左边一条绿线 —— 与"费率未填"的橙线同一套语言 */
.mn-sch.act{border-left:3px solid var(--green)}
.mn-sch-h{display:flex;align-items:center;gap:7px;padding:6px 9px 6px 6px;flex-wrap:wrap}
.mn-sch-t{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;
  cursor:pointer;text-align:left;font-size:12.5px;color:var(--text);padding:2px 4px;border-radius:var(--r-xs);
}
.mn-sch-t:hover{background:var(--surface-2)}
.mn-sch-caret{color:var(--text-3);font-size:10px;flex:0 0 auto}
.mn-sch-obj{font-weight:650;flex:0 0 auto}
.mn-sch.on .mn-sch-obj{color:var(--accent)}
/* ★ 方案名 = 这个输入框本身（显示 + 改名一体）。 */
.mn-sch-rename{flex:1 1 auto;min-width:110px;font-size:12px;padding:3px 8px}
.mn-sch-b{padding:4px 10px 10px}
.mn-sch-b .mn-pfields{display:flex;flex-wrap:wrap;gap:9px}
.mn-pfields{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mn-pf{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-3)}
.mn-pf input,.mn-pf select{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-xs);
  padding:3px 6px;font-size:12px;color:var(--text);outline:none;transition:var(--t);
}
.mn-pf input{width:56px;font-variant-numeric:tabular-nums;text-align:right}
/* 日期框是原生 date 控件（含日历图标），56px 只够显示"年"两个字 —— 单独放宽 */
.mn-pf input[type=date]{width:126px;text-align:left}
.mn-pf select{max-width:112px}
.mn-pf input:focus,.mn-pf select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* ★ 被 plan-spec 的 lock 锁住的字段：灰掉并挂出原因，而不是静默改值 */
.mn-pf.locked input,.mn-pf.locked select{background:var(--surface-3);color:var(--text-3);cursor:not-allowed}
.mn-pf.locked{opacity:.75}
/* ★ 「本通道不发送」的字段：也灰掉，标签加一道删除线 + 悬停写明原因。
     为什么要单独一类：填了、存了、界面上看着生效，实际平台收不到 —— 且一句错都不报。
     区分它与 lock：lock 是"平台口径要求你填 0"，unused 是"这个通道压根没这个字段"。 */
.mn-pf.unused input,.mn-pf.unused select{background:var(--surface-3);color:var(--text-3);cursor:not-allowed}
.mn-pf.unused{opacity:.6}
.mn-pf.unused input,.mn-pf.unused select{text-decoration:line-through;text-decoration-thickness:1px}

/* ★★ 2026-10-17：日期格旁边的「+N 月 / +N 天」快捷键 + 「距今天 N 天」
   —— 老板原话：「选几个月 +（选天数）+ 选日期 这三种组合怎么优化？三者可以关联变动。」
   三个入口**并存且联动**：日期控件是唯一真相，`今天 + [N] [个月|天]` 是同一件事的另一种说法，
   快捷按钮只是省键盘。「距今天 N 天」不是装饰：平台判「最短推广周期」看的就是这个数
   （活动 3674292 要 360 天）。 */
.mn-termq{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;margin-left:6px}
.mn-termb{padding:1px 7px;font-size:11px;line-height:1.6;white-space:nowrap}
.mn-termd{font-size:11px;color:var(--text-3);margin-left:2px;white-space:nowrap}
.mn-termd b{color:var(--text);font-variant-numeric:tabular-nums}
.mn-termd.warn{color:var(--orange)}
/* ★★ 商品行上的「参数明细行」（老板 2026-10-17：不想再用标题承载参数，会漂移）
   —— 这行是**渲染时算的**，改费率立刻跟着变；名字只放名字。
   长了下拉省略号，完整内容在 title 里（列表里不抢行高）。 */
.mn-pmeta{display:block;margin-top:1px;font-style:normal;font-size:11px;line-height:1.45;
  color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mn-pmeta.dim{opacity:.65}
/* 「今天 + N [个月|天]」这一块：与日期框并排，窄了自动换行（整格可换行才不会被截断） */
.mn-pf:has(.mn-span){flex-wrap:wrap;max-width:100%}
.mn-span{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-3);
  border-left:1px solid var(--line-2);padding-left:8px;margin-left:2px}
.mn-span-eq{white-space:nowrap}
.mn-span .mn-span-n{width:56px;text-align:right}
.mn-span .mn-span-u{width:auto;max-width:none;padding:3px 4px}

/* ---- ② 通道（与模板同一口径：浅底无描边，选中才描边）---- */
.mn-chans{display:grid;grid-template-columns:1fr;gap:7px}
/* ★ 流程图模式（老板定的）：**选择项并排、步骤串排**。
   之前列宽只有整页的一半，选择项还被压成一列 ⇒ 整页看着像"顺序列表"而不是流程。
   现在：步骤之间画连接线+箭头（串排），每个步骤里的可选项横着铺开（并排）。 */
.mn-col > .mn-step{position:relative}
.mn-col > .mn-step + .mn-step::before{
  content:"";position:absolute;left:50%;top:-17px;transform:translateX(-50%);
  width:2px;height:17px;background:var(--line-2);
}
.mn-col > .mn-step + .mn-step::after{
  content:"";position:absolute;left:50%;top:-3px;transform:translateX(-50%) rotate(45deg);
  width:7px;height:7px;border-right:2px solid var(--accent-line);border-bottom:2px solid var(--accent-line);
}
.mn-chans{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.mn-chan{
  text-align:left;cursor:pointer;position:relative;padding:10px 12px;border-radius:var(--r);
  border:1px solid transparent;background:var(--surface-2);transition:var(--t);
}
.mn-chan:hover{border-color:var(--accent-line);background:var(--surface-3)}
.mn-chan.on{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.mn-chan-k{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:650;letter-spacing:-.1px}
.mn-chan-w{font-size:11.5px;color:var(--text-2);margin-top:5px;line-height:1.6}
.mn-chan-i{
  display:inline-block;margin-top:6px;font-size:11px;color:var(--text-2);font-family:var(--mono);
  word-break:break-all;background:transparent;border:1px dashed var(--line-2);border-radius:var(--r-xs);
  padding:2px 8px;line-height:1.6;
}
.mn-chan-i::before{content:"粘 ";color:var(--accent);font-weight:700}
/* ★ 「本次要用」徽标**跟着选中走**（老板反馈：选了邀约机构，徽标还钉在定向达人上）。
     之前挂在 `recommended`（固定推荐）上 —— 看起来像选中态，实际不是，比没有更误导。 */
.mn-chan.on::before{
  content:"本次要用";position:absolute;top:-8px;right:10px;font-size:10px;font-weight:650;color:#fff;
  background:var(--accent);border-radius:var(--r-pill);padding:1px 8px;z-index:1;
}

/* ---- ③ 认人结果（"原话 → 识别为 → 真实 ID → 状态"）----
   ★ 左边那 3px 色条是**内容**（绿=就绪 / 橙=待选 / 红=认不出），不是装饰 ⇒ 保留；
     描边去掉，白底卡片里一整排描边行会很吵。 */
.mn-res{display:flex;flex-direction:column;gap:5px;min-height:70px}
.mn-rrow{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:9px 12px;border-radius:var(--r);
  background:var(--surface-2);border-left:3px solid var(--line-2);transition:var(--t);
}
.mn-rrow.ok{border-left-color:var(--green)}
.mn-rrow.amb{border-left-color:var(--orange)}
.mn-rrow.bad{border-left-color:var(--red)}
.mn-rraw{font-family:var(--mono);font-size:12.5px;color:var(--text-2);max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-rarrow{color:var(--text-3);flex:0 0 auto;font-size:13px}
/* 「识别为」这一格是本页的核心信息：它告诉用户这行到底是什么 */
.mn-rkind{
  font-size:10.5px;font-weight:650;border-radius:var(--r-pill);padding:2px 9px;white-space:nowrap;
  background:var(--surface-3);color:var(--text-2);
}
.mn-rkind.k-id{background:var(--accent-soft);color:var(--accent)}
.mn-rkind.k-nick{background:var(--orange-l);color:var(--orange)}
.mn-rkind.k-link{background:var(--green-l);color:var(--green)}
.mn-rname{font-size:13px;font-weight:600;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-rid{font-family:var(--mono);font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.mn-rstate{font-size:11.5px;font-weight:600;margin-left:auto;white-space:nowrap}
.mn-rstate.ok{color:var(--green)} .mn-rstate.amb{color:var(--orange)} .mn-rstate.bad{color:var(--red)}
.mn-rwhy{font-size:11.5px;color:var(--text-3);width:100%;line-height:1.6}
/* ★ 机构合作状态标：合并「邀约/定向」两条通道后，这一枚就是用户判断
   "点发送会发生什么"的唯一依据 —— 未合作发邀请 / 已合作分配商品 / 邀请中与待批准没有可发的东西。
   tone 与全站状态色一致（ok绿 · warn橙 · bad红 · busy蓝）。 */
.mn-coop{
  flex:0 0 auto;font-size:11px;font-weight:650;padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--surface-3);color:var(--text-3);border:1px solid var(--line-2);cursor:help;
}
.mn-coop.ok{background:var(--green-l);color:var(--green);border-color:var(--green-line)}
.mn-coop.warn{background:var(--orange-l);color:var(--orange);border-color:var(--orange-line)}
.mn-coop.bad{background:var(--red-l);color:var(--red);border-color:var(--red-line)}
.mn-coop.busy{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
/* 「认到人」之后，把达人档案（头像/粉丝/GMV/类目）单独成行展示 ——
   width:100% 让它像 mn-rwhy 一样独占一行，不挤在主芯片后面。 */
.mn-rdetail{width:100%;display:flex;align-items:center;gap:12px;margin-top:3px;padding:8px 11px;background:var(--surface);border-radius:var(--r);border:1px solid var(--line-2)}
.mn-davatar{width:44px;height:44px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:var(--surface-3);border:1px solid var(--line-2)}
.mn-dinfo{display:flex;flex-wrap:wrap;gap:7px 16px;min-width:0;flex:1}
.mn-dchip{display:flex;flex-direction:column;gap:1px;min-width:0}
.mn-dchip b{font-size:11.5px;font-weight:650;color:var(--text);white-space:nowrap}
.mn-dchip span{font-size:10px;color:var(--text-3)}
/* 「回源补采」按钮：塞在"为什么认不出"那句话后面 ——
   它是那句话的**下一步动作**，不是另一个功能入口，所以要贴着原因而不是单独一行。 */
.mn-harvest{margin-left:6px;vertical-align:middle;border-color:var(--orange-line);color:var(--orange)}
/* 疑似选错通道 / 同名撞车提示（后端 crossChannelHint / sameNameHint 下发）——
   独占一行，跟着"为什么"那句走：它是同一件事的**另一种解释**，不是另一个功能入口。
   info=只是提醒（灰蓝字）；danger=两条通道同名撞车（红框 —— 那种错平台照样回成功）。 */
.mn-hint{width:100%;margin-top:3px;font-size:11.5px;line-height:1.7;padding:6px 9px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line-2);color:var(--text-3)}
.mn-hint.danger{background:var(--red-l);border-color:var(--red-line);color:var(--red)}
.mn-hint .mn-switch{margin-left:6px;vertical-align:middle}
.mn-harvest:hover:not(:disabled){border-color:var(--orange);background:var(--orange-l);color:var(--orange)}
.mn-harvest:disabled{opacity:.7;cursor:progress}
/* 「更新机构库再认一次」：机构通道认不出时的**正确**下一步。
   ★ 与「回源补采」长得像，但不是同一件事：这条只拉机构广场列表并进本地机构库
     （2.4 万家、约 1 分钟、只做并集）；那条要读 1.3 GiB 达人池重建索引。
     2026-10-21 之前机构通道挂的是后者 —— 用户白等一分钟，问题一点没动。 */
.mn-agencyfix{margin-left:6px;vertical-align:middle;border-color:var(--orange-line);color:var(--orange)}
.mn-agencyfix:hover:not(:disabled){border-color:var(--orange);background:var(--orange-l);color:var(--orange)}
.mn-agencyfix:disabled{opacity:.7;cursor:progress}
/* 歧义时的候选选择器：不替用户猜，把候选摆出来让他点 */
.mn-cands{display:flex;gap:6px;flex-wrap:wrap;width:100%;margin-top:2px}
.mn-cand{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-pill);padding:3px 11px;
  font-size:11.5px;cursor:pointer;color:var(--text-2);transition:var(--t);
}
.mn-cand:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.mn-cand.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.mn-cand .mono{font-size:10.5px;opacity:.7;margin-left:5px}

/* ---- ④ 预演 / 回执 ---- */
.mn-gate{display:flex;flex-direction:column;gap:6px}
.mn-gi{display:flex;align-items:flex-start;gap:9px;padding:8px 11px;border-radius:var(--r);font-size:12.5px;line-height:1.65}
.mn-gi.ok{background:var(--green-l);color:var(--green)}
.mn-gi.warn{background:var(--orange-l);color:var(--orange)}
.mn-gi.bad{background:var(--red-l);color:var(--red)}
.mn-gi.info{background:var(--surface-2);color:var(--text-2)}
.mn-payload{
  font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;margin-top:8px;max-height:340px;overflow:auto;white-space:pre-wrap;word-break:break-all;
}
.mn-payload summary{cursor:pointer;font-family:inherit;font-size:12px;color:var(--text-3);list-style:none}
.mn-payload summary::-webkit-details-marker{display:none}
.mn-payload summary::before{content:"▸ ";color:var(--accent)}
.mn-payload[open] summary::before{content:"▾ "}
/* 逐条回执：一行一个对象，带平台原话（"失败了只写失败"等于没写） */
.mn-res-line{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:var(--r);font-size:12.5px;background:var(--surface-2)}
.mn-res-line .mono{font-size:11.5px;color:var(--text-3)}
.mn-res-line .msg2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-3);font-size:11.5px}

/* ---- 帮助区 ---- */
.mn-help{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:0 4px}
.mn-help>summary{cursor:pointer;padding:13px 16px;font-size:13.5px;font-weight:600;list-style:none;color:var(--text-2)}
.mn-help>summary::-webkit-details-marker{display:none}
.mn-help>summary::before{content:"▸";color:var(--accent);margin-right:9px;font-size:11px}
.mn-help[open]>summary::before{content:"▾"}
.mn-help-body{padding:0 16px 16px;font-size:12.5px;line-height:1.8;color:var(--text-2)}
.mn-help-body p{margin:0 0 10px;max-width:112ch}
.mn-help-body b{color:var(--text)}
.mn-help-tbl{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:12px;max-width:1080px}
.mn-help-tbl th,.mn-help-tbl td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.mn-help-tbl th{background:var(--surface-2);font-weight:650;color:var(--text);white-space:nowrap}
.mn-help-tbl code{font-family:var(--mono);font-size:11px;background:var(--surface-3);padding:1px 5px;border-radius:4px}
.mn-help-tbl .mono{font-size:11px;color:var(--text-3);word-break:break-all}

@media (max-width:980px){.mn-ed-pane{grid-template-columns:1fr}.mn-ed-shelf{padding-left:0;border-left:0}}

/* ============================================================
   商品中心定向（商品管理页展开项 ·「定向」块，2026-10-11）
   与「挂折扣券」同族的折叠块，正文分四段 + 记录。
   ============================================================ */
.pt-sec-h{margin:8px 0 4px;font-size:12px;color:var(--text-2)}
.pt-sec-h b{color:var(--brand,#0a7d43)}
/* ★ 2026-10-15 老板要求：通道（定向达人 / 机构定向）做成**胶囊切换按钮**。
   组件本身用通用 `.seg`（选中态 = `button.on`，不依赖容器类，与财务五页签/结算口径同一套）；
   这里只做两件事：① 把它收小一档（这段在**展开行的折叠块内部**，周围是 11.5px 的参数标签，
   原尺寸 12.5px/5×13 会喧宾夺主、层级反了）；② 给"胶囊 + 通道说明文字"一个会换行的横排。 */
.seg.pt-seg{padding:2px}
.seg.pt-seg button{padding:3px 12px;font-size:12px}
.pt-chline{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;margin:6px 0 2px}
/* ★ 2026-10-15「给达人的一条信息（一键复制）」（老板要求）—— 预览 / 提醒 / 按钮条。
   预览框走**等宽**：这段话是要粘到微信里的，`·` 开头的行在等宽下才看得出是"一档一行"；
   但它不是代码，所以只等宽、不做高亮、不换底色。 */
.pt-brief-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:6px 0}
.pt-brief-warn{margin:4px 0;padding:5px 8px;border:1px solid var(--orange-line);background:var(--orange-l);
  border-radius:var(--r-xs);font-size:11.5px;line-height:1.55}
.pt-brief-note{margin:4px 0}
/* ★ 2026-10-16：链接出处那行（"取自本地档案 / 档案里没有 ⇒ 第一次复制会现取"）。
   灰、小、不占眼 —— 它是**交代**不是告警（真的取不到时用的是上面 .pt-brief-warn）。
   单独给一个类是因为它挨着告警块，不能和"⚠ 出事了"长得一样。 */
.pt-brief-linkfrom{margin:2px 0;opacity:.8;font-size:11.5px;line-height:1.5}
.pt-brief-box{width:100%;font-family:var(--mono);font-size:12px;line-height:1.6;background:var(--surface);resize:vertical}
.pt-brief-foot{margin-top:4px;opacity:.75;line-height:1.55}
/* ★ 2026-10-15 抖店「精选联盟会话失效」的**就地修复**块（老板反馈"抖店达人信息读不到"）——
   它要在报错的那一行下面、和周围的 mini 文字区分开，所以给一个浅框而不是又一段灰字。 */
.pt-buyin{margin:6px 0;padding:7px 9px;border:1px solid var(--orange-line);background:var(--orange-l);
  border-radius:var(--r-xs);line-height:1.6}
.pt-buyin .mini{color:var(--text-2)}
.pt-grid{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.pt-f{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.pt-f>span{white-space:nowrap}
.pt-f>em{font-style:normal;opacity:.6}
.pt-recs{margin-top:8px;border-top:1px dashed var(--line);padding-top:6px}
.pt-recs>summary{list-style:none}
.pt-recs>summary::-webkit-details-marker{display:none}

/* ============================================================
   页内作用域条（★ 2026-10-12 第 1 步 · C 路线「顶栏管以后、页内管现在」）
   ------------------------------------------------------------
   只出现在 SCOPE_PANES 里的页（订单 / 售后 / 评价 / 违规 / 抖店四页 / **商品管理**）。
   它回答"**这一页**现在看哪家店"，
   与顶栏那个"默认工作店"解耦 ⇒ 顶栏再切也动不了它，除非点「回到跟随顶栏」。
   ★ 商品管理（2026-10-15）接入后，这条就是老板要的"页顶双 Tab 切视频号 / 抖店" ——
     平台 Tab 由 `#shopSel` 里各平台的店铺自动生成（有店才有 Tab），不写死平台名。
   ★ 颜色一律走变量（暗色主题自动跟随）；只有"选中态压在强调色上"的字沿用 #fff
     —— 与 .pf-tag.pf / .pillset button.on 同一写法，不新增裸色。 */
.pscope{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:6px 12px;margin:0 0 10px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface-2);font-size:12px;color:var(--text-2);
}
.pscope .sc-lb{color:var(--text-3);white-space:nowrap}
.pscope .sc-pfs{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.pscope .sc-pf{border:0;background:transparent;padding:3px 11px;cursor:pointer;font-size:12px;color:var(--text-2);transition:var(--t)}
.pscope .sc-pf:hover{color:var(--text)}
.pscope .sc-pf.on{background:var(--accent);color:#fff}
.pscope .sc-sel{
  border:1px solid var(--line-2);border-radius:var(--r-xs);padding:3px 6px;
  background:var(--surface);color:var(--text);font-size:12px;max-width:280px;outline:none;transition:var(--t);
}
.pscope .sc-sel:hover{border-color:var(--accent-line)}
.pscope .sc-sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pscope .sc-st{color:var(--text-3);white-space:nowrap}
.pscope .sc-st.on{color:var(--accent);font-weight:600}
.pscope .sc-hint{color:var(--text-3);white-space:nowrap}

/* ---------- 微信聊天（只读页，三栏）----------
   左=会话、中=消息流、右=详情。三栏都用现有 .card/.list/.row，
   这里只负责"排成三栏"与"两栏内滚"两件事。 */
.wxwrap{
  display:grid;
  grid-template-columns:minmax(190px,250px) minmax(0,1fr) minmax(180px,250px);
  gap:12px;margin-top:12px;align-items:start;
}
/* 内滚而不是把整页撑长：聊天场景下"翻一屏会话"比"翻整页"自然得多 */
.wxscroll{max-height:62vh;overflow:auto}
/* 消息行是"两行":发送者+时间 / 正文 ⇒ 用 block 而不是默认的 flex 横排 */
.wxmsgs .row{display:block}
.wxmsgs .row .wx-msg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.wxmsgs .row .wx-msg-body{white-space:pre-wrap;word-break:break-word;color:var(--text-2);font-size:13px;line-height:1.55}
.wxmsgs .row.out .wx-msg-head{justify-content:flex-end}
/* 本人发的消息：名字用主色点出来，和对方区分（不靠左右对齐单独承担这个语义） */
.wxmsgs .row.out .wx-msg-head .mini:first-child{color:var(--accent);font-weight:600}
/* 有消息的会话：把条数点出来（这类会话在列表里永远排最前，一眼分得清哪个才有内容） */
.wx-hasmsg{color:var(--accent);font-weight:600}
/* 富文本卡片（第二版：appmsg）——
   一张卡 = 缩略图 + 标题 + 摘要 + 来源元信息；有链接时整卡可点（<a>），
   没有链接就保持静态 —— 不给"能点"的假象。 */
.wxmsgs .row .wx-card{
  display:flex;gap:10px;align-items:flex-start;margin-top:6px;padding:10px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface-2);
  text-decoration:none;color:inherit;transition:var(--t);
}
a.wx-card:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.wx-thumb{
  width:60px;height:60px;flex:0 0 60px;border-radius:var(--r-sm);object-fit:cover;
  background:var(--surface-3);display:block;
}
.wx-thumb-ph{display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--text-3)}
.wx-card-main{min-width:0;flex:1}
.wx-card-title{
  font-size:13px;font-weight:600;line-height:1.45;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wx-card-des{
  font-size:12px;color:var(--text-2);line-height:1.5;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wx-card-meta{font-size:11px;color:var(--text-3);margin-top:5px}
/* 多图文：主卡下面补一份标题清单（不展开正文） */
.wx-card-items{margin:4px 0 0 70px;display:flex;flex-direction:column;gap:2px}
.wx-item{font-size:12px;color:var(--text-2);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.wx-item:hover{color:var(--accent)}
/* 顶部「加载更早」条：常驻可见 —— 否则用户会以为已经到头了 */
.wxmsgs .wx-more{display:flex;justify-content:center;padding:8px 0 10px;position:sticky;top:0;background:var(--surface);z-index:1}
/* 窄屏（分屏窗口很常见）直接堆成一栏：三栏挤在 1100px 以下会窄到不可读 */
@media (max-width:1100px){ .wxwrap{grid-template-columns:1fr} .wxscroll{max-height:46vh} }

/* ---------- 爆品工作台（2026-10-17 新增）
   设计：docs/designs/爆品系统-设计-20261017.md
   ★ 刻意**复用**已有的 .card / .grid / .g2 / .g3 / .g4 / .kv / .empty / .pill / .mini / .list，
     这里只加三样真正缺的：页签条、可信度小标、密集表格。
     为什么不再造一套卡片样式：项目里已经有两套分段控件（.seg / .tabs2）+ 一套商品页签（.pr-tabs），
     再加第四套就是给以后的人出选择题。 */
.bm-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-2);margin:0 0 16px}
.bm-tab{padding:9px 15px 10px;font-size:13.5px;color:var(--text-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:520;transition:color var(--t),background var(--t)}
.bm-tab:hover{color:var(--text);background:var(--surface-2)}
.bm-tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:640}
/* 可信度小标：实 / 假 / — —— 本页第一等公民，须在每处输入旁可见 */
.bm-src{font-size:10px;border-radius:4px;padding:0 4px;font-weight:600;vertical-align:1px;white-space:nowrap}
.bm-src.real{background:var(--green-l);color:var(--green)}
.bm-src.fake{background:var(--orange-l);color:var(--orange)}
.bm-src.none{background:var(--surface-3);color:var(--text-3)}
/* 核心指标合并卡：一张卡里两列，避免再出现三张同质卡片 */
.bm-kpi2{display:grid;grid-template-columns:1fr 1fr}
.bm-kpi2>div{min-width:0;padding:2px 20px}
.bm-kpi2>div:first-child{padding-left:0;border-right:1px solid var(--line)}
.bm-kpi2>div:last-child{padding-right:0}
@media (max-width:760px){
  .bm-kpi2{grid-template-columns:1fr}
  .bm-kpi2>div{padding:12px 0}
  .bm-kpi2>div:first-child{border-right:0;border-bottom:1px solid var(--line)}
}
/* 密集表格：爆品页一张表动辄 9~12 列，用通用表格会挤 */
table.bm-t{width:100%;border-collapse:collapse;font-size:12.8px;font-variant-numeric:tabular-nums}
table.bm-t th{text-align:right;font-weight:600;color:var(--text-3);font-size:11.5px;padding:7px 8px;border-bottom:1px solid var(--line-2);white-space:nowrap}
table.bm-t th:first-child,table.bm-t td:first-child{text-align:left}
table.bm-t td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
table.bm-t tbody tr:hover{background:var(--surface-2)}
#bmBody code{font-family:var(--mono);font-size:11.5px;background:var(--surface-3);border-radius:4px;padding:1px 5px;word-break:break-all;white-space:normal}
#bmBody .mini code{line-height:1.9}

/* ★★ 2026-10-17：⑤ 定向内容的正文默认**收起**（老板：不用占空间）
   —— 只显示前 3 行 + 省略号，点「展开全文」才铺开成可滚动的大框。 */
.mn-brief-clamp{white-space:pre-wrap;font-size:12px;line-height:1.55;color:var(--text-2);
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);
  padding:8px 10px;max-height:4.9em;overflow:hidden;position:relative;cursor:pointer}
.mn-brief-clamp:hover{background:var(--surface-3)}

/* ============================================================
   ★ 2026-10-21 店铺体检 · 诊断图（组成条 + 最拖分的 N 个）
   ------------------------------------------------------------
   老板：「列表太长、不够直观。图表化，读图比读文字直观。」
   两块图共用一套坐标：0~100% = 超过同行的比例，50% 竖线 = 同行中位。
   ============================================================ */
.dx-mix{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--surface-3);margin:0 0 8px}
.dx-mix>i{display:block;height:100%}
.dx-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--text-3);margin:0 0 10px}
.dx-legend>span{display:inline-flex;align-items:center;gap:5px}
.dx-legend b{width:8px;height:8px;border-radius:2px;display:inline-block}
.dx-hd{display:grid;grid-template-columns:176px 1fr 76px;gap:10px;align-items:center;font-size:10.5px;color:var(--text-3);padding:0 2px 3px}
.dx-hd .dx-axis{position:relative;height:14px}
.dx-hd .dx-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.dx-row{display:grid;grid-template-columns:176px 1fr 76px;gap:10px;align-items:center;padding:4px 2px;border-radius:6px;cursor:pointer}
.dx-row:hover{background:var(--surface-2)}
.dx-row.sel{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.dx-nm{font-size:12px;line-height:1.3;color:var(--text);min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all}
.dx-track{position:relative;height:16px;min-width:120px;background:linear-gradient(90deg,var(--red-l) 0 50%,transparent 50%)}
.dx-track:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:var(--surface-3);border-radius:1px}
.dx-med{position:absolute;left:50%;top:1px;bottom:1px;width:1px;background:var(--text-3);opacity:.55}
.dx-bar{position:absolute;left:0;top:50%;height:3px;transform:translateY(-50%);border-radius:2px}
.dx-dot{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--surface)}
.dx-val{text-align:right;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.dx-none{font-size:11.5px;color:var(--text-3)}
.dx-cap{font-size:11.5px;color:var(--text-3);padding:6px 2px 2px}

/* ============================================================
   ★ 2026-10-21 资金总览（抖店 + 微信小店 · 全店合计）
   ------------------------------------------------------------
   第一眼是「一个总金额」，下面才是分平台 / 分店 / 分口径。
   行用 grid，不使用 flex：金额列要右对齐、数字要对齐（tabular-nums），
   flex 在长店名下会把金额挤得参差。
   ============================================================ */
.funds-hero{
  margin:2px 0 16px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--accent-soft),var(--surface) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.funds-hero .v{font-size:44px;font-weight:700;letter-spacing:-1.6px;line-height:1.05;margin:8px 0 6px;font-variant-numeric:tabular-nums}
.funds-hero .mini{font-size:12px;color:var(--text-3)}
.funds-row{display:grid;grid-template-columns:1.5fr repeat(4,minmax(78px,.85fr)) minmax(180px,1.45fr);align-items:center;gap:10px}
.funds-row.funds-row-head{font-size:11px;color:var(--text-3);padding:6px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);border-radius:var(--r)}
.funds-row.funds-row-head:hover{background:var(--surface-2)}
.funds-row.funds-row-head>div{text-align:right}
.funds-row.funds-row-head>.funds-shop,.funds-row.funds-row-head>.funds-state{text-align:left}
.funds-row .funds-shop{min-width:0}
.funds-row .funds-shop b{font-size:13.5px}
.funds-row .funds-amt{display:flex;flex-direction:column;gap:2px;align-items:flex-end;min-width:0}
.funds-row .funds-amt b{font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.funds-row .funds-amt .mini{font-size:10.5px;color:var(--text-3)}
.funds-row .funds-state{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.funds-row .funds-state .mini{font-size:11px;color:var(--text-3);line-height:1.45;word-break:break-all}
/* 宽屏有表头 ⇒ 行内不再重复「总额/可用/待结算/冻结」，把行压成一条线；
   窄屏表头会隐藏（下面 760px 断点），行内标签必须保留，否则数字没有含义。 */
@media (min-width:1181px){
  .funds-row .funds-amt .mini{display:none}
}
@media (max-width:1180px){
  .funds-row{grid-template-columns:1.4fr .9fr .9fr minmax(160px,1.4fr)}
  .funds-row .fa-pending,.funds-row .fa-frozen{display:none}
}
@media (max-width:760px){
  .funds-hero .v{font-size:34px}
  .funds-row{grid-template-columns:1.2fr .9fr 1.2fr;gap:6px}
  .funds-row .fa-avail{display:none}
  .funds-row.funds-row-head{display:none}
}
.funds-more{margin-top:8px;border-top:1px dashed var(--line)}
.funds-more>summary{cursor:pointer;padding:10px 12px;font-size:12px;color:var(--text-3);user-select:none}
.funds-more>summary:hover{color:var(--text-2)}
.funds-more .funds-row{padding:7px 12px;opacity:.82}

/* 抖店定向参数 · bool 型格子（勾选框）——2026-10-26 新增：平台报名弹窗里的
   「用已绑联系方式」「同步报名其他活动」两格。label 本身是勾选框，别再套 block 标签。 */
.pl-bool-cell .pl-cell-l{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--text-2);cursor:pointer;user-select:none;margin-bottom:0}
.pl-bool-cell .pl-chk{width:14px;height:14px;margin:0;accent-color:var(--accent,#3b82f6);cursor:pointer}

/* ============================================================
   选品器（爆品页商品选择器）—— 2026-10-28
   源：src/web/app/145-选品器.js
   为什么不用 <select>：见那个文件头（213 项里 191 项是探针，10 条甘蔗标题前 34 字一字不差）。
   视觉取向沿用设计系统 v2：悬浮卡片 + 阴影分层，不描边堆叠。
   ============================================================ */
.pk-slot{position:relative;display:flex;align-items:center;gap:8px;min-width:400px;z-index:40}
.pk-slot-label{color:var(--text-2);font-size:12.5px;flex:0 0 auto}
.pk-slot>div{position:relative}

/* 收起态：一句话回答"现在选的是哪条" */
.pk-cur{
  display:flex;align-items:center;gap:10px;width:100%;min-width:400px;max-width:680px;
  padding:7px 12px 7px 8px;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r);cursor:pointer;text-align:left;transition:var(--t);font:inherit;color:var(--text);
}
.pk-cur:hover{background:var(--surface-3);border-color:var(--accent-line)}
.pk-thumb{width:34px;height:34px;border-radius:var(--r-xs);object-fit:cover;background:var(--surface-3);flex:0 0 auto}
.pk-cur-mid{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pk-cur-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px;line-height:1.35}
.pk-cur-t .pk-fam{font-weight:650}
.pk-spec{color:var(--text-2);font-size:12px;background:var(--surface-3);padding:1px 6px;border-radius:var(--r-xs)}
.pk-price{color:var(--text);font-size:13.5px;font-weight:660;font-variant-numeric:tabular-nums}
.pk-sold-mini{color:var(--text-2);font-size:11.5px}
.pk-cur-s{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--text-3)}
.pk-id{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.pk-caret{color:var(--text-3);font-size:11px;flex:0 0 auto}
.pk-caret-sm{color:var(--text-3);font-size:10px;width:10px;display:inline-block}
.pk-cur-empty{flex:1;color:var(--text-3);font-size:12.5px}

/* 百川状态徽标：五级（未知 / 未做 / 已建 / 已灌 / 已出单） */
.pk-bc-badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;padding:1px 7px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--text-3);white-space:nowrap;line-height:1.7}
.pk-bc-badge.lv-1{background:var(--red-l);color:var(--red)}
.pk-bc-badge.lv0{background:var(--surface-3);color:var(--text-3)}
.pk-bc-badge.lv1{background:var(--orange-l);color:var(--orange)}
.pk-bc-badge.lv2{background:var(--accent-soft);color:var(--accent)}
.pk-bc-badge.lv3{background:var(--green-l);color:var(--green)}

/* 展开面板 */
.pk-panel{display:none;position:absolute;left:0;top:calc(100% + 8px);width:min(920px,92vw);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);z-index:120;overflow:hidden}
.pk-panel.open{display:block}
.pk-head{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.pk-q{flex:1;padding:8px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);
  font-size:12.5px;color:var(--text);outline:none}
.pk-q:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.pk-sort{padding:7px 9px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);
  font-size:12.5px;color:var(--text-2)}
.pk-chips{display:flex;gap:6px;align-items:center;padding:9px 12px 4px;flex-wrap:wrap}
.pk-chip{font-size:12px;padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-3);
  color:var(--text-2);cursor:pointer;user-select:none;transition:var(--t)}
.pk-chip i{font-style:normal;opacity:.6;margin-left:5px;font-variant-numeric:tabular-nums}
.pk-chip:hover{background:var(--line-2)}
.pk-chip.on{background:var(--accent);color:#fff}
.pk-chip.on i{opacity:.85}
.pk-chip.warn{background:var(--red-l);color:var(--red);cursor:help}
.pk-list{max-height:min(64vh,520px);overflow:auto;padding:2px 0 8px}

/* 品分组 */
.pk-grp{border-top:1px solid var(--line)}
.pk-grp:first-child{border-top:0}
.pk-grp-h{display:flex;align-items:center;gap:9px;padding:9px 14px 7px;cursor:pointer;
  background:linear-gradient(180deg,var(--surface-2),transparent)}
.pk-grp-h b{font-size:12.5px;font-weight:650}
.pk-grp-m{color:var(--text-3);font-size:11.5px}
.pk-grp-s{margin-left:auto}
.pk-grp.closed .pk-grp-body{display:none}
.pk-grp-body{padding-bottom:4px}

/* 一行一条原创链接 */
.pk-row{display:flex;align-items:center;gap:11px;padding:8px 14px;cursor:pointer;
  border-left:3px solid transparent;transition:background var(--t)}
.pk-row:hover{background:var(--surface-2)}
.pk-row.sel{background:var(--accent-soft);border-left-color:var(--accent)}
.pk-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pk-t{font-size:12.5px;line-height:1.45;color:var(--text);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pk-tags{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px}
.pk-sold{width:52px;text-align:right;flex:0 0 auto}
.pk-sold b{display:block;font-size:14px;font-variant-numeric:tabular-nums;line-height:1.2}
.pk-sold i{font-style:normal;font-size:10.5px;color:var(--text-3)}
.pk-bc{width:176px;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.pk-bc-sub{font-size:10.5px;color:var(--text-3);line-height:1.55;text-align:left}
.pk-act{width:82px;flex:0 0 auto;text-align:right}
.pk-btn{font-size:11.5px;padding:4px 9px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--text-2);background:var(--surface);white-space:nowrap}
.pk-row:hover .pk-btn{border-color:var(--accent-line);color:var(--accent)}
.pk-btn.cur{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.pk-link{color:var(--accent);cursor:pointer}

/* 履历抽屉 */
.pk-drawer{margin:2px 14px 10px 14px;padding:11px 13px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r);border-left:3px solid var(--accent)}
.pk-drawer-h{display:flex;align-items:center;gap:9px;margin-bottom:8px;font-size:12.5px}
.pk-drawer-h .pk-link{margin-left:auto}
.pk-drawer-kpi{display:flex;gap:22px;flex-wrap:wrap;font-size:12px;margin-bottom:10px}
.pk-drawer-kpi>span{display:flex;flex-direction:column;gap:1px}
.pk-kpi-v{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.pk-kpi-v>span{color:var(--text-2);font-size:11.5px}
.pk-drawer-kpi i{font-style:normal;color:var(--text-3);font-size:10.5px}
.pk-drawer-kpi b{font-size:14.5px;font-variant-numeric:tabular-nums}
.pk-drawer-kpi em{font-style:normal;color:var(--text-3);font-size:10.5px;line-height:1.5;max-width:250px}
.pk-unknown{color:var(--orange);font-size:12.5px!important}
.pk-tl{display:flex;flex-direction:column;gap:0}
.pk-ev{display:grid;grid-template-columns:112px 1fr;gap:2px 10px;padding:5px 0 5px 12px;
  border-left:2px solid var(--line-2);position:relative;font-size:11.5px}
.pk-ev::before{content:"";position:absolute;left:-4px;top:10px;width:6px;height:6px;border-radius:50%;
  background:var(--line-2)}
.pk-ev.k-create::before{background:var(--accent)}
.pk-ev.k-inject::before{background:var(--green)}
.pk-ev.k-read::before{background:var(--orange)}
.pk-ev-w{font-family:var(--mono);font-size:10.5px;color:var(--text-3)}
.pk-ev-a{color:var(--text)}
.pk-ev-t{grid-column:2;color:var(--text-3);font-size:10.5px}
.pk-stale{margin-top:8px;padding:6px 9px;background:var(--orange-l);color:var(--orange);
  border-radius:var(--r-xs);font-size:11px;line-height:1.6}
.pk-drawer-f{margin-top:8px;color:var(--text-3);font-size:10.5px;line-height:1.6}

/* 空态 / 坏态 */
.pk-empty{padding:26px 16px;text-align:center;color:var(--text-3);font-size:12.5px}
.pk-broken{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;background:var(--red-l);
  border:1px solid var(--red-line);border-radius:var(--r-sm);color:var(--red);font-size:12px;max-width:620px}
.pk-broken code{background:var(--surface);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:11px}
.pk-broken .ghost{color:var(--red);border-color:var(--red-line)}
.pk-foot{padding:8px 14px;border-top:1px solid var(--line);background:var(--surface-2);
  color:var(--text-3);font-size:11px;line-height:1.7;display:flex;gap:10px;flex-wrap:wrap}
.pk-basis{margin-left:auto;font-style:italic}

/* ---------- 百川执行视图：7 天灌入微条（2026-10-28） ----------
   为什么不用 7 列数字：191 行 × 7 天 = 1337 格，横向必然截断，
   而且每格都是 3 位数，眼睛没法比。压成一列微条，状态一眼可见，
   具体人数放 title，全局的"每天合计"单独一行。 */
.dstrip{display:inline-flex;gap:2px;vertical-align:middle;line-height:0}
.dstrip i{width:8px;height:13px;border-radius:2px;display:block;
  background:var(--surface-2);border:1px solid var(--line);box-sizing:border-box}
.dstrip i.on{background:var(--green);border-color:var(--green)}
.dstrip i.part{background:linear-gradient(to top,var(--accent) 0 55%,var(--surface-2) 55% 100%);border-color:var(--accent)}
.dstrip i.wait{border-style:dashed;border-color:var(--text-3);background:transparent}
.dstrip i.over{background:var(--red);border-color:var(--red);opacity:.5}
.dstrip i.off{opacity:.22}
.dstrip i.cur{box-shadow:0 0 0 2px var(--accent-soft)}
.dstrip-wrap{display:inline-flex;align-items:center;gap:6px}
.dstrip-legend{display:inline-flex;gap:8px;color:var(--text-3);font-size:10px;flex-wrap:wrap}
.dstrip-legend span{display:inline-flex;align-items:center;gap:3px}
.dstrip-legend i{width:8px;height:10px;border-radius:2px;display:inline-block;
  border:1px solid var(--line);background:var(--surface-2)}
.dstrip-legend i.on{background:var(--green);border-color:var(--green)}
.dstrip-legend i.part{background:linear-gradient(to top,var(--accent) 0 55%,var(--surface-2) 55% 100%);border-color:var(--accent)}
.dstrip-legend i.wait{border-style:dashed;border-color:var(--text-3);background:transparent}
.dstrip-legend i.over{background:var(--red);border-color:var(--red);opacity:.5}
/* 按天小计条：一天一格，格内是当天全店合计 */
.dcnt{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 8px}
.dcnt b{font-weight:600}
.dcnt .dcell{flex:0 0 auto;min-width:86px;padding:5px 8px;border-radius:6px;
  background:var(--surface-2);border:1px solid var(--line);cursor:pointer;line-height:1.45;font-size:11px}
.dcnt .dcell:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.dcnt .dcell.sel{border-color:var(--accent);background:var(--accent-soft)}
.dcnt .dcell.done{border-left:3px solid var(--green)}
.dcnt .dcell.over{border-left:3px solid var(--red)}
.dcnt .dcell.wait{border-left:3px solid var(--line-2)}
.dcnt .dcell .t{color:var(--text-3);font-size:10px}
/* 商品头：一张缩略图 + 标题（191 行都是同一个商品，所以图放这里一次） */
.bm-prod{display:flex;align-items:center;gap:10px;margin:2px 0 10px}
.bm-prod img{width:38px;height:38px;border-radius:6px;object-fit:cover;
  border:1px solid var(--line);background:var(--surface-2);flex:0 0 auto}
.bm-prod .ph{width:38px;height:38px;border-radius:6px;border:1px dashed var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:10px;flex:0 0 auto}
.bm-prod .tt{min-width:0}
.bm-prod .tt b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:640px}
.bm-prod .tt .mini{margin-top:2px}
/* 出单高的行给一点点底色，便于扫 */
.tbl tr.hot td{background:var(--green-l)}

/* ===== 排程卡控件条升级（2026-10-28）：开关 / 分段 / 带后缀数字框 / 统一聚焦环 ===== */
/* 控件条：一行 flex，每组「文字 + 控件」为一个 pill 组 */
.bmcbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px}
.bmc{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2);white-space:nowrap}
.bmc > b{color:var(--text)}
/* 通用输入：日期 / 数字统一 28px 高、圆角、聚焦环 */
.bmc input[type=date],.bmc input[type=number],.tin{
  height:28px;padding:0 9px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--surface);color:var(--text);font-size:12px;transition:border-color .15s,box-shadow .15s}
.bmc input[type=date]{font-family:var(--mono,var(--mono-f,monospace));font-size:11.5px}
.bmc input[type=number]{width:58px;text-align:right;font-family:var(--mono,var(--mono-f,monospace))}
.bmc input[type=date]:focus,.bmc input[type=number]:focus,.tin:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.bmc input[type=date]:hover,.bmc input[type=number]:hover,.tin:hover{border-color:var(--accent-line)}
/* 数字框带 % 后缀：包一层 numfield，后缀绝对定位 */
.numfield{position:relative;display:inline-flex;align-items:center}
.numfield input{padding-right:20px}
.numfield>i{position:absolute;right:8px;font-style:normal;font-size:11px;color:var(--text-3);pointer-events:none}
/* 开关：36×20 轨道 + 16 圆钮，选中变绿 */
.switch{position:relative;display:inline-block;width:36px;height:20px;flex:0 0 auto}
.switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch i{display:block;width:100%;height:100%;border-radius:20px;background:var(--line-2);transition:background .18s;position:relative}
.switch i::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .18s}
.switch input:checked+i{background:var(--green)}
.switch input:checked+i::after{transform:translateX(16px)}
.switch input:focus-visible+i{box-shadow:0 0 0 3px var(--accent-soft)}
/* 分段控件的危险档：真发选中时用红，视觉上和「预演」区分度拉开 */
.seg button.on.warn{background:var(--red);box-shadow:0 6px 14px -8px var(--red)}
.seg button.on.warn:hover{background:var(--red)}
/* 排程表里的「每条」输入框：小一号但同语言 */
.tin{height:26px;width:64px;text-align:right;font-family:var(--mono,var(--mono-f,monospace));font-size:12px}
.tin.dirty{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-l)}
/* ---- 抖店售后详情（2026-10-30 双平台合并）：建议块 + 信息段 ---- */
.dy-adv{ margin:10px 0 12px; padding:14px 16px; border-radius:10px; background:#fafbfc;
  border-left:4px solid #dfe4ea; }
.dy-adv.v-agree{ border-left-color:#2f9e6e; background:#f6fbf8; }
.dy-adv.v-negotiate{ border-left-color:#d99425; background:#fdfaf3; }
.dy-adv.v-reject{ border-left-color:#cf5344; background:#fdf7f6; }
.dy-adv.v-wait{ border-left-color:#a8b2bf; background:#f8f9fb; }
.dy-adv-top{ display:flex; align-items:center; gap:9px; margin-bottom:7px; flex-wrap:wrap; }
.dy-adv-v{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:6px; background:#eef1f5; color:#3c434c; }
.v-agree .dy-adv-v{ background:#e6f6ee; color:#1c7a4d; }
.v-negotiate .dy-adv-v{ background:#fdf2df; color:#9a6210; }
.v-reject .dy-adv-v{ background:#fdecea; color:#b0402c; }
.v-wait .dy-adv-v{ background:#eef1f5; color:#6b7480; }
.dy-adv-h{ font-size:16px; font-weight:600; letter-spacing:-.2px; line-height:1.4; }
.dy-adv-w{ font-size:13px; color:#3c434c; line-height:1.8; margin-top:6px; }
.dy-adv-b{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.dy-adv-b span{ font-size:11.5px; padding:3px 9px; border-radius:6px; background:rgba(0,0,0,.045); color:#5b6573; }
.dy-adv-r{ margin-top:10px; font-size:12.5px; color:#8a5a10; background:rgba(217,148,37,.10);
  border-radius:8px; padding:8px 12px; line-height:1.65; }
.dy-sec{ margin:12px 0; padding:11px 14px; border-radius:9px; background:#fbfcfd; border:1px solid rgba(0,0,0,.05); }
.dy-sec-h{ font-size:12px; font-weight:600; color:#5b6573; margin-bottom:6px; letter-spacing:.2px; }
.dy-sec-b{ font-size:13px; color:#3c434c; line-height:1.75; }
.dy-quote{ background:#fff; border-left:3px solid #d0d7e0; padding:8px 12px; border-radius:0 6px 6px 0;
  font-size:13px; color:#2f3742; }

/* ---- 售后品退 · 顶部简报（2026-10-30 与 AI 副驾合并） ---- */
.as-brief{ display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:18px 24px; margin:6px 0 12px; border-radius:14px;
  background:linear-gradient(135deg,#f3f6fb 0%,#f7f9fc 55%,#f4f8f4 100%);
  border:1px solid rgba(0,0,0,.045); }
.as-brief:empty{ display:none; }
.as-brief.warn{ background:linear-gradient(135deg,#fdf4f0 0%,#fdf8f4 55%,#fdf7ee 100%); }
.as-brief.act{ background:linear-gradient(135deg,#f1f7ff 0%,#f6f9fd 60%,#f1f8f5 100%); }
.as-brief-n{ font-size:46px; font-weight:800; line-height:.92; letter-spacing:-2.5px; color:#1f2937; }
.as-brief.warn .as-brief-n{ color:#b0402c; }
.as-brief-body{ flex:1; min-width:260px; }
.as-brief-h{ font-size:17px; font-weight:600; letter-spacing:-.2px; line-height:1.35; color:#171a1f; }
.as-brief-d{ font-size:13px; color:#6b7480; margin-top:5px; line-height:1.7; }
.as-brief-chips{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.as-brief-chip{ font-size:11.5px; padding:3px 10px; border-radius:20px;
  background:rgba(255,255,255,.78); color:#3c434c; border:1px solid rgba(0,0,0,.05); }
.as-brief-chip b{ font-weight:700; color:#171a1f; }
/* 口径说明：默认折叠，需要时点开 */
.as-note{ margin:0 0 10px; }
.as-note > summary{ font-size:12px; color:#8b939e; cursor:pointer; user-select:none; padding:4px 0; list-style:none; }
.as-note > summary::-webkit-details-marker{ display:none; }
.as-note > summary::before{ content:'▸ '; }
.as-note[open] > summary::before{ content:'▾ '; }
.as-note > summary:hover{ color:#5b6573; }
.as-note .sub{ margin-top:6px; }

/* ---- 售后品退 · 平台 tab（微信小店 / 抖店） ---- */
.as-tabs{ display:flex; gap:4px; margin:6px 0 12px; border-bottom:1px solid #e6e9ee; }
.as-tabs:empty{ display:none; }
.as-tab{ padding:9px 18px; font-size:14px; cursor:pointer; color:#8b939e;
  border-bottom:2px solid transparent; margin-bottom:-1px; user-select:none; font-weight:500; }
.as-tab:hover{ color:#3c434c; }
.as-tab.on{ color:#171a1f; border-bottom-color:#171a1f; font-weight:600; }
.as-tab .cnt{ font-size:11px; margin-left:6px; font-weight:400; opacity:.7; }
/* ★ 2026-10-31：平台 tab 行右侧的「当前店」——与平台 tab 同一行，不再单独挂一条作用域条。
   只有 1 家店时是纯文本；多家才是下拉（只有一项的下拉是噪音）。 */
.as-shop-wrap{ margin-left:auto; display:flex; align-items:center; padding-bottom:6px; }
.as-shop-txt{ font-size:12.5px; color:#8b939e; }
.as-shop-sel{ font-size:12.5px; font-family:inherit; color:#3c434c; background:#fff;
  border:1px solid #dfe4ea; border-radius:7px; padding:4px 8px; outline:none; cursor:pointer; max-width:220px; }
.as-shop-sel:focus{ border-color:#8fa8c8; }

/* ---- 售后品退 · 顶部合成一块（2026-10-30 去重） ---- */
.as-hero{ display:flex; align-items:flex-start; gap:16px; padding:20px 24px; border-radius:16px;
  margin:4px 0 12px; border:1px solid rgba(0,0,0,.045);
  background:linear-gradient(135deg,#f3f6fb 0%,#f7f9fc 55%,#f4f8f4 100%); }
.as-hero.warn{ background:linear-gradient(135deg,#fdf4f0 0%,#fdf8f4 55%,#fdf7ee 100%); }
.as-hero.act{ background:linear-gradient(135deg,#f1f7ff 0%,#f6f9fd 60%,#f1f8f5 100%); }
.as-hero-main{ flex:1; display:flex; align-items:center; gap:22px; min-width:0; }
.as-hero-n{ font-size:52px; font-weight:800; line-height:.9; letter-spacing:-3px; color:#1f2937; flex:0 0 auto; }
.as-hero.warn .as-hero-n{ color:#b0402c; }
.as-hero-txt{ flex:1; min-width:0; }
.as-hero-h{ font-size:17px; font-weight:600; letter-spacing:-.2px; line-height:1.35; color:#171a1f; }
.as-hero-d{ font-size:13px; color:#6b7480; margin-top:5px; line-height:1.7; }
.as-hero-tools{ display:flex; gap:6px; align-items:center; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.as-info-btn{ width:27px; height:27px; border-radius:50%; border:1px solid #dfe4ea; background:#fff;
  color:#8b939e; cursor:pointer; font-size:13px; line-height:1; font-family:inherit; padding:0; }
.as-info-btn:hover{ color:#3c434c; border-color:#c9d1db; }

/* 分桶 = 这一页唯一的导航 */
.as-seg{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:0 0 14px; }
.as-seg-i{ padding:7px 14px; border-radius:10px; background:#fff; border:1px solid rgba(0,0,0,.05);
  font-size:13px; color:#3c434c; cursor:pointer; user-select:none; transition:.14s; }
.as-seg-i:hover{ background:#f7f9fb; transform:translateY(-1px); }
.as-seg-i.on{ background:#1f2937; color:#fff; border-color:#1f2937; font-weight:600; }
.as-seg-i.zero{ opacity:.42; }
.as-seg-meta{ margin-left:auto; font-size:11.5px; color:#9aa2ad; }

/* ⓘ 技术说明面板 */
.as-info{ margin:0 0 14px; padding:14px 18px; border-radius:12px; background:#fafbfc;
  border:1px solid rgba(0,0,0,.05); font-size:12.5px; color:#5b6573; line-height:1.75; }
.as-info-row{ display:flex; gap:10px; padding:3px 0; }
.as-info-row > b{ flex:0 0 66px; font-weight:600; color:#3c434c; }

/* ============================================================
   复盘洞察（2026-10-31）
   ------------------------------------------------------------
   「谁在反复退 / 退的原因都在说什么 / 平台没告诉你的」三块。
   原来只画在独立看板页（aftersale-board.html），品退页天天打开却没有 ⇒ 搬进来。
   排版刻意**矮而宽**：这三块是"看一眼就走"的结论区，不能把上面的售后单列表挤下去。
   ============================================================ */
.as-insight{ margin:16px 0 4px; }
.as-in-head{ padding:14px 18px 12px; border-radius:14px 14px 0 0; background:#fbfcfd;
  border:1px solid rgba(0,0,0,.05); border-bottom:none; }
.as-in-title{ font-size:14.5px; font-weight:600; color:#1f2937; display:flex; align-items:center; gap:8px; }
.as-in-line{ font-size:13px; color:#3c434c; line-height:1.75; margin-top:6px; }
.as-in-line b{ color:#b0402c; font-size:15px; }
.as-in-sub{ font-size:11.5px; color:#9aa2ad; margin-top:4px; }
.as-in-grid{ display:grid;
  /* ★ 2026-10-31：加了「分层账」这块 ⇒ 4 张卡，2×2 排（3 列会把最后一张甩成半行） */
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
  border:1px solid rgba(0,0,0,.05); border-radius:0 0 14px 14px; overflow:hidden; background:#fff; }
@media (max-width:1180px){ .as-in-grid{ grid-template-columns:1fr; } }
.as-in-card{ padding:14px 18px 16px; min-width:0;
  border-right:1px solid rgba(0,0,0,.05); border-bottom:1px solid rgba(0,0,0,.05); }
/* 2×2 排：右边框只给奇数列，下边框只给第一行（避免最后一行压一条多余的分隔线） */
.as-in-card:nth-child(2n){ border-right:none; }
.as-in-card:nth-last-child(-n+2){ border-bottom:none; }
.as-in-h{ font-size:12.5px; font-weight:600; color:#1f2937; margin-bottom:10px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.as-in-badge{ font-weight:500; font-size:11px; color:#8b939e; background:#f4f6f9;
  border-radius:6px; padding:2px 7px; }
.as-in-tbl{ width:100%; border-collapse:collapse; font-size:12px; }
.as-in-tbl th{ text-align:left; font-weight:500; color:#9aa2ad; font-size:11px; padding:0 6px 5px 0; }
.as-in-tbl td{ padding:4px 6px 4px 0; border-top:1px solid #f2f4f7; color:#3c434c; vertical-align:top; }
.as-in-key{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:#6b7480; white-space:nowrap; }
.as-in-nick{ color:#6b7480; white-space:nowrap; }
.as-in-num{ text-align:right; white-space:nowrap; }
.as-in-rs{ font-size:11px; color:#8b939e; line-height:1.5; }
.as-in-foot{ font-size:11px; color:#9aa2ad; margin-top:8px; line-height:1.6; }
.as-in-none{ font-size:12px; color:#8b939e; padding:6px 0; }
.as-in-note{ font-size:11.5px; color:#6b7480; line-height:1.7; margin-top:6px; }
.as-in-kv{ font-size:12.5px; color:#3c434c; padding:3px 0; }
.as-in-kv b{ color:#b0402c; }
.as-in-unknown{ color:#9aa2ad; font-size:12px; }
.as-in-bad{ color:#b0402c; }
.as-in-bar{ display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12px; }
.as-in-bar-l{ flex:0 0 40%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#3c434c; }
.as-in-bar-t{ flex:1; height:7px; border-radius:4px; background:#f0f3f7; overflow:hidden; min-width:40px; }
.as-in-bar-f{ height:100%; border-radius:4px; background:#8fa6c4; }
.as-in-bar-n{ flex:0 0 30px; text-align:right; color:#6b7480; }
.as-in-bar-y{ flex:0 0 58px; text-align:right; color:#9aa2ad; font-size:11px; }
/* 点不到的计数桶：平台只给英文 key —— 列出来就是"墙"的样子 */
.as-in-chip{ display:inline-block; margin:2px 6px 0 0; padding:1px 6px; border-radius:5px;
  background:#f4f6f9; color:#6b7480; font-size:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
/* 「没读到」≠「没有」：这条必须显眼，否则 0 会被当成结论 */
.as-in-warn{ margin-top:8px; padding:6px 9px; border-radius:7px; background:#fdf6ee;
  border:1px solid #f3e2cd; color:#8a5a20; font-size:11.5px; line-height:1.6; }

/* ============================================================
   倒计时警示（2026-10-30）
   ------------------------------------------------------------
   列表右侧一块 + 抽屉顶部一条横幅。数字**加大加粗**，因为这一行最要紧的是
   "还剩多久、到点会发生什么"，而不是它现在叫什么状态。
   分色按 urgency（后端口径）：auto=红（自动退款，最急）/ manual=橙（客服介入）/
   arbit=蓝（仲裁）/ calm=不显示（自动审核拒绝对我们有利，标红是误导）。
   ============================================================ */
.rec-tail .as-cd{ order:-1; display:flex; flex-direction:column; align-items:flex-end; gap:0;
  padding:5px 10px 4px; border-radius:9px; margin-bottom:6px; line-height:1.16; }
.as-cd-v{ font-size:18px; font-weight:800; letter-spacing:-.7px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.as-cd-l{ font-size:10.5px; font-weight:600; letter-spacing:.2px; margin-top:1px; }

.as-cd.cd-auto{ background:#fdecea; border:1px solid #f0c3bd; }
.as-cd.cd-auto .as-cd-v{ color:#b02f1e; }
.as-cd.cd-auto .as-cd-l{ color:#b02f1e; }

.as-cd.cd-manual{ background:#fdf6e4; border:1px solid #ecd8ac; }
.as-cd.cd-manual .as-cd-v{ color:#95600f; }
.as-cd.cd-manual .as-cd-l{ color:#95600f; }

.as-cd.cd-arbit{ background:#eef4fc; border:1px solid #c6d8ef; }
.as-cd.cd-arbit .as-cd-v{ color:#2b5a9e; }
.as-cd.cd-arbit .as-cd-l{ color:#2b5a9e; }

/* 2 小时内：呼吸提示"真的快到了" */
.as-cd.is-hot{ animation:asCdPulse 1.7s ease-in-out infinite; }
@keyframes asCdPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(176,47,30,0); }
  50%{ box-shadow:0 0 0 4px rgba(176,47,30,.15); }
}
.as-cd.is-dead{ opacity:.5; }
.as-cd.is-dead .as-cd-v{ text-decoration:line-through; }

/* ---- 抽屉顶部横幅 ---- */
.as-cd-ban{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:13px 18px; border-radius:11px; margin:10px 0 12px; }
.as-cd-ban.cd-auto{ background:linear-gradient(90deg,#fdeceb 0%,#fdf4f2 100%); border:1px solid #f0c3bd; border-left:4px solid #c0392b; }
.as-cd-ban.cd-manual{ background:linear-gradient(90deg,#fdf6e6 0%,#fdfaf1 100%); border:1px solid #ecd8ac; border-left:4px solid #c8901d; }
.as-cd-ban.cd-arbit{ background:linear-gradient(90deg,#eef4fc 0%,#f5f9fe 100%); border:1px solid #c6d8ef; border-left:4px solid #3272b8; }
.as-cd-ban-l{ display:flex; align-items:baseline; gap:5px; flex:0 0 auto; }
.as-cd-ban-k{ font-size:12px; font-weight:600; color:#8b939e; }
.as-cd-ban-v{ font-size:26px; font-weight:800; letter-spacing:-1.2px; font-variant-numeric:tabular-nums; line-height:1; }
.as-cd-ban.cd-auto .as-cd-ban-v{ color:#b02f1e; }
.as-cd-ban.cd-auto .as-cd-ban-r b{ color:#b02f1e; }
.as-cd-ban.cd-manual .as-cd-ban-v, .as-cd-ban.cd-manual .as-cd-ban-r b{ color:#95600f; }
.as-cd-ban.cd-arbit .as-cd-ban-v, .as-cd-ban.cd-arbit .as-cd-ban-r b{ color:#2b5a9e; }
.as-cd-ban-r{ flex:1; min-width:180px; line-height:1.6; }
.as-cd-ban-r b{ display:block; font-size:13.5px; font-weight:700; }
.as-cd-ban-r span{ font-size:12px; color:#6b7480; }

/* ---- 分桶右侧：品退口径筛选开关（2026-10-31 从导航降级） ----
   为什么降级：品退口径是"给要申诉的人用的筛子"，不是"我该做什么"这一类判断。
   跟主导航并排会让人以为它们是同一维度。现在用小一号的开关放在最右。 */
.as-seg-sp{ flex:1 1 auto; min-width:8px; }
.as-seg-pin{ padding:5px 11px; border-radius:8px; background:transparent; border:1px solid #e6e9ee;
  font-size:12px; color:#8b939e; cursor:pointer; user-select:none; transition:.14s; }
.as-seg-pin:hover{ color:#3c434c; border-color:#d3d8e0; }
.as-seg-pin.on{ background:#fdf0ee; border-color:#f0c3bd; color:#b02f1e; font-weight:600; }

/* ============================================================
   售后「自己动手」操作区（2026-10-31 从独立副驾页并入）
   ------------------------------------------------------------
   选原因 → 定价 → 传图 → 干跑 → 真发（手输「确认」）。
   类名沿用副驾页那一套（.op-b/.fx/.dry/.arm/.res），这样两边长得一样，
   同一件事不会在两个页面出现两种长相。
   ============================================================ */
.oprow{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.op-b{font-size:12.5px;padding:6px 15px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer;font-family:inherit;font-weight:500}
.op-b:hover{background:#f6f8fa}
.op-b.on{background:var(--ink2);color:#fff;border-color:var(--ink2)}
.op-b.agree:hover{border-color:#9dcfae;color:#1e7a44;background:#f4fbf6}
.op-b.reject:hover{border-color:#e2b8b3;color:var(--red);background:#fdf6f5}
.op-b.nego:hover{border-color:#b9c7e0;color:#2b5a9e;background:#f4f8fd}
.fx{border:1px solid #dfe5ed;border-radius:10px;background:#fbfcfe;padding:14px 16px;margin-top:10px}
.fx-h{font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:11px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.fx-close{font-size:11.5px;color:var(--ink3);cursor:pointer;background:none;border:none;font-family:inherit}
.fx-close:hover{color:var(--ink2)}
.fx-row{margin-bottom:11px}
.fx-lb{font-size:11.5px;color:var(--text-3);margin-bottom:5px;display:block}
.fx-lb b{color:var(--ink2);font-weight:600}
.fx-lb .req{color:var(--red)}
.fx-sel,.fx-in,.fx-ta{width:100%;box-sizing:border-box;font-size:12.5px;font-family:inherit;padding:7px 10px;border:1px solid #d5dce5;border-radius:6px;background:#fff;color:var(--ink2);outline:none}
.fx-sel:focus,.fx-in:focus,.fx-ta:focus{border-color:#8fa8c8}
.fx-ta{resize:vertical;min-height:56px;line-height:1.6}
.fx-in{max-width:150px}
.fx-hint{font-size:11px;color:var(--text-3);margin-top:4px;line-height:1.6}
.fx-hint.warn{color:#a06010}
.fx-act{display:flex;gap:9px;align-items:center;margin-top:12px;flex-wrap:wrap}
.fx-btn{font-size:12.5px;padding:7px 18px;border-radius:7px;border:1px solid var(--ink2);background:var(--ink2);color:#fff;cursor:pointer;font-family:inherit;font-weight:600}
.fx-btn:hover{opacity:.9}
.fx-btn:disabled{opacity:.45;cursor:default}
.fx-note{font-size:11px;color:var(--text-3)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px;align-items:center}
.thumb{position:relative;width:62px;height:62px;border-radius:7px;overflow:hidden;border:1px solid var(--line);background:#fff}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .x{position:absolute;top:0;right:0;width:18px;height:18px;line-height:17px;text-align:center;background:rgba(0,0,0,.55);color:#fff;font-size:12px;cursor:pointer;border:none;font-family:inherit}
.up-in{font-size:11.5px;color:var(--text-3)}
.up-in::file-selector-button{font-size:11.5px;font-family:inherit;padding:5px 11px;border-radius:6px;border:1px dashed #c3ccd8;background:#fff;color:var(--ink2);cursor:pointer;margin-right:9px}
.dry{border:1px dashed #cfd6e0;border-radius:9px;padding:13px 15px;background:#fcfcfd;font-size:12.5px;margin-top:10px}
.dry.t-ok{border-color:#b8ddc9;background:#f7fcf9}
.dry.t-warn{border-color:#e8d9b3;background:#fffdf6}
.dry.t-bad{border-color:#eccfcb;background:#fdf8f7}
.dry-h{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.dry-v{font-size:13px;font-weight:700}
.dry-v.ok{color:var(--green)}.dry-v.warn{color:var(--amber)}.dry-v.bad{color:var(--red)}
.dry-api{font-family:Consolas,monospace;font-size:11.5px;background:#eef1f5;padding:3px 8px;border-radius:5px;color:var(--ink2);word-break:break-all}
.dry ul{list-style:none;margin-top:7px}
.dry li{padding:3px 0;line-height:1.6;display:flex;gap:7px}
.dry li .ic{flex:0 0 14px}
.dry .sec{margin-top:9px;font-size:11.5px;font-weight:600;color:var(--text-3);letter-spacing:.3px}
.dry pre{margin-top:6px;background:#f2f4f7;border-radius:6px;padding:9px 11px;font-size:11px;overflow-x:auto;line-height:1.6;color:var(--ink2)}
.dry .nomo{margin-top:9px;font-size:11px;color:var(--red);font-weight:600}
.actrow{margin-top:11px;padding-top:11px;border-top:1px dashed #e0e5ec;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.act-b{font-size:12.5px;padding:6px 14px;border-radius:6px;border:1px solid var(--red);background:var(--red);color:#fff;cursor:pointer;font-family:inherit;font-weight:600}
.act-b:hover{background:#a83226}
.act-w{font-size:11px;color:var(--text-3)}
.arm{border:1px solid #eccfcb;background:#fdf8f7;border-radius:8px;padding:12px 14px;margin-top:9px}
.arm-t{font-size:12px;color:var(--ink2);line-height:1.7;margin-bottom:9px}
.arm-t b{color:var(--red)}
.arm-in{font-size:13px;padding:6px 10px;border:1px solid #d8cfc9;border-radius:6px;font-family:inherit;width:120px;outline:none}
.arm-in:focus{border-color:var(--ink3)}
.arm-b{font-size:12.5px;padding:6px 14px;border-radius:6px;border:1px solid var(--red);background:var(--red);color:#fff;cursor:pointer;font-family:inherit;font-weight:600;margin-left:8px}
.arm-c{font-size:12.5px;padding:6px 12px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer;font-family:inherit;margin-left:6px}
.res{border-radius:8px;padding:12px 14px;margin-top:9px;font-size:12.5px;line-height:1.7}
.res.ok{background:var(--greenbg);border:1px solid #b8ddc9}
.res.bad{background:var(--redbg);border:1px solid #eccfcb}
.res.warn{background:var(--amberbg);border:1px solid #e8d9b3}
.res-t{font-weight:700;font-size:13px;margin-bottom:5px}
.as-cd-none{border:1px solid var(--line);background:transparent;color:var(--text-3);font-size:11px;padding:2px 7px;border-radius:5px;line-height:1.5}
.as-cd-none .as-cd-l{font-size:11px}
/* 已了结 · 时限作废（2026-10-31）：单关了以后采集时留下的倒计时不再倒数，
   但也不留一片空白 —— 说清那个数字是被作废的，不是没采到。 */
.as-cd-over{border:1px dashed var(--line);background:transparent;color:var(--text-3);font-size:11px;padding:2px 7px;border-radius:5px;line-height:1.5}
.as-cd-over .as-cd-l{font-size:11px;text-decoration:line-through;text-decoration-color:#c8ccd4}


/* ============================================================
   售后详情 · 物流轨迹 / 售后全过程 / 沟通会话（2026-10-31）
   ------------------------------------------------------------
   为什么新加这一组：用户拿平台后台的截图对照，指出"显示格式要同步" ——
   我们原来把物流轨迹、协商历史、会话全画成一行行文字，平台那边是
   **时间轴 / 气泡 / 卡片**。这里只补样式，不动任何既有类名。
   ============================================================ */
/* 物流轨迹：竖线 + 圆点，最新一条（.now）高亮 */
.as-tl{ display:flex; flex-direction:column; margin-top:4px; }
.as-tl-i{ display:flex; gap:10px; padding:6px 0 6px 12px; position:relative; font-size:13px; line-height:1.55;
  border-left:2px solid var(--line-2); }
.as-tl-i::before{ content:''; position:absolute; left:-5px; top:12px; width:8px; height:8px; border-radius:50%;
  background:var(--surface-3); box-shadow:0 0 0 2px var(--surface); }
.as-tl-i.now{ border-left-color:var(--green); }
.as-tl-i.now::before{ background:var(--green); }
.as-tl-i.now .as-tl-x{ font-weight:600; color:var(--text); }
.as-tl-t{ flex:0 0 118px; color:var(--text-3); font-family:var(--mono); font-size:11.5px; }
.as-tl-x{ color:var(--text-2); min-width:0; }

/* 售后全过程时间线（谁在什么时候做了什么） */
.as-hl{ display:flex; gap:10px; }
.as-hl-d{ flex:0 0 12px; position:relative; display:flex; justify-content:center; }
.as-hl-d::before{ content:''; position:absolute; top:0; bottom:0; width:2px; background:var(--line); }
.as-hl:last-child .as-hl-d::before{ bottom:auto; height:14px; }
.as-hl-d i{ width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:6px; position:relative; z-index:1;
  box-shadow:0 0 0 3px var(--surface); }
.as-hl-b{ flex:1; min-width:0; padding:0 0 12px; }
.as-hl:last-child .as-hl-b{ padding-bottom:2px; }
.as-hl-h{ display:flex; gap:8px; align-items:baseline; justify-content:space-between; }
.as-hl-h > b{ font-size:13px; }
.as-hl-t{ flex:0 0 auto; font-family:var(--mono); font-size:11.5px; color:var(--text-3); }
.as-hl-kv{ display:flex; gap:8px; margin-top:3px; font-size:12.5px; line-height:1.6; color:var(--text-2); }
.as-hl-kv > span{ flex:0 0 64px; color:var(--text-3); }

/* 凭证/会话图片缩略（加载失败不留破图） */
.as-imgs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.as-img{ display:block; width:88px; height:88px; border-radius:var(--r-xs); overflow:hidden; background:var(--surface-3);
  position:relative; text-decoration:none; }
.as-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.as-img.bad img{ display:none; }
.as-img.bad::after{ content:'图片（点开看）'; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:11px; color:var(--text-3); text-align:center; padding:4px; }

/* 沟通会话：气泡。客服在左、买家在右（与平台后台一致） */
.as-chat{ display:flex; flex-direction:column; gap:10px; margin-top:8px; max-height:480px; overflow:auto; padding-right:4px; }
.as-chat-day{ align-self:center; font-size:11.5px; color:var(--text-3); background:var(--surface-2);
  padding:1px 10px; border-radius:var(--r-pill); }
.as-msg{ display:flex; gap:8px; align-items:flex-start; }
.as-msg.r{ flex-direction:row-reverse; }
.as-av{ flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:var(--surface-3); object-fit:cover; }
.as-msg-b{ min-width:0; max-width:78%; display:flex; flex-direction:column; gap:3px; }
.as-msg.r .as-msg-b{ align-items:flex-end; }
.as-who{ font-size:11px; color:var(--text-3); }
.as-bub{ padding:8px 11px; border-radius:var(--r); font-size:13px; line-height:1.6; white-space:pre-wrap;
  word-break:break-word; background:var(--surface-2); color:var(--text); border:1px solid var(--line); }
.as-msg.r .as-bub{ background:var(--accent-soft); border-color:var(--accent-line); }
.as-bub.rev{ opacity:.55; }
.as-sys{ align-self:center; font-size:11.5px; color:var(--text-3); text-align:center; padding:2px 8px; }

/* 客服卡片消息（标题 + 键值 + 商品 + 按钮，与平台同形；按钮只作展示，点了不跳） */
.as-card{ width:264px; max-width:100%; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  overflow:hidden; box-shadow:var(--shadow-1); }
.as-card-t{ padding:9px 11px 6px; font-size:13px; font-weight:600; line-height:1.5; }
.as-card-kv{ padding:0 11px 8px; display:flex; flex-direction:column; gap:3px; }
.as-card-r{ display:flex; gap:8px; font-size:12px; line-height:1.5; }
.as-card-r > span{ flex:0 0 62px; color:var(--text-3); }
.as-card-r > b{ font-weight:500; color:var(--text-2); min-width:0; word-break:break-all; }
.as-card-p{ display:flex; gap:8px; padding:8px 11px; border-top:1px solid var(--line); align-items:center; }
.as-card-p .as-img{ width:44px; height:44px; flex:0 0 44px; border-radius:var(--r-xs); }
.as-card-pi{ min-width:0; }
.as-card-pn{ font-size:12px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; color:var(--text-2); }
.as-card-oid{ padding:6px 11px; font-family:var(--mono); font-size:11px; color:var(--text-3); border-top:1px solid var(--line); }
.as-card-btn{ padding:8px 11px; border-top:1px solid var(--line); font-size:12.5px; color:var(--accent);
  display:flex; justify-content:space-between; cursor:default; }
@media (max-width: 640px){
  .as-tl-i{ flex-direction:column; gap:2px; }
  .as-tl-t{ flex:none; }
  .as-msg-b{ max-width:88%; }
  .as-chat{ max-height:360px; }
}

/* ④⑤⑥ 通栏区：物流/过程/会话本来就是"宽内容"（时间线、气泡），
   塞进 340px 的中栏里读不动（2026-10-31 用户："显示格式同步下"）。
   布局：④ ⑤ 并排，⑥ 会话占满一行。 */
.asd-wide{ margin-top:12px; display:grid; gap:10px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.asd-wide > #asHk6{ grid-column:1 / -1; }
@media (max-width: 1180px){ .asd-wide{ grid-template-columns:1fr; } .asd-wide > #asHk6{ grid-column:auto; } }

/* 抖店/微信共用的几样小东西：平台提示、平台允许的动作、轨迹状态标签 */
.as-notes{ margin-bottom:8px; }
.as-note{ background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-xs); padding:7px 10px; font-size:12.5px; line-height:1.65; color:var(--text-2); margin-top:5px; }
.as-pa{ display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.as-tl-s{ color:var(--green); font-weight:600; margin-right:6px; font-size:12px; }

/* 售后「事情原委」：一句话结论条 + 角色色标 + 大图凭证（2026-10-31 用户："切割分散、很小、不醒目"） */
.as-sum{ margin-bottom:10px; padding:10px 12px; border-radius:var(--r); background:var(--accent-soft);
  border:1px solid var(--accent-line); font-size:13px; line-height:1.8; color:var(--text); }
.as-sum b{ font-weight:600; }
.as-sum-cd{ color:var(--red); }
.as-who-b{ display:inline-block; padding:0 7px; border-radius:var(--r-pill); font-size:11px; line-height:18px;
  margin-right:6px; background:var(--surface-3); color:var(--text-2); vertical-align:1px; }
.as-who-b.buyer{ background:var(--orange-l); color:var(--orange); }
.as-who-b.merchant{ background:var(--accent-soft); color:var(--accent); }
.as-hl.buyer .as-hl-d i{ background:var(--orange); }
.as-hl.merchant .as-hl-d i{ background:var(--accent); }
.as-hl.platform .as-hl-d i{ background:var(--text-3); }
.as-hl-kv > span{ flex:0 0 78px; }
.as-img.lg{ width:132px; height:132px; }
@media (max-width: 640px){ .as-img.lg{ width:104px; height:104px; } }

/* ============================================================
   证据总览：按「谁传的」分组（2026-10-31）
   用户："这里买家和卖家凭证混一起。且只标是买家凭证。时间最好倒着。"
   ⇒ 同一个人传的排一起、组内最新在前、每张图带"什么时候 + 出自哪条记录"。
   ============================================================ */
.as-pfboard{ margin-top:10px; }
.as-pfb{ margin-top:8px; padding:8px 10px 10px; border-radius:var(--r);
  background:var(--surface-2); border:1px solid var(--line); }
.as-pfb-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.as-pfb-n{ font-size:12.5px; font-weight:600; }
.as-pfb-buyer .as-pfb-n{ color:var(--orange); }
.as-pfb-merchant .as-pfb-n{ color:var(--accent); }
.as-pf{ margin:0; display:flex; flex-direction:column; gap:3px; max-width:132px; }
.as-pf figcaption{ font-size:10.5px; line-height:1.35; color:var(--text-3); word-break:break-all; }
.as-pf-other{ display:flex; align-items:center; justify-content:center; width:132px; height:132px;
  border-radius:var(--r-xs); background:var(--surface-3); font-size:12px; color:var(--accent); text-decoration:none; }
.as-pfb-add{ margin-left:auto; font-size:12px; font-weight:600; padding:4px 11px; border-radius:var(--r-pill);
  border:1px solid var(--orange); background:var(--orange-l); color:var(--orange);
  cursor:pointer; font-family:inherit; white-space:nowrap; }
.as-pfb-add:hover{ background:var(--orange); color:#fff; }
.as-pf-empty{ margin-top:8px; padding:9px 11px; border-radius:var(--r); border:1px dashed var(--orange);
  background:var(--orange-l); display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12.5px; line-height:1.6; color:var(--text-2); }
.as-pf-empty b{ color:var(--orange); }
.as-pf-empty .as-pfb-add{ margin-left:0; }

/* 版本提示条（2026-10-31）：前端改了但页面没刷新时，别再让人对着旧版点半天没反应 */
#asVerBar{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:9998;
  display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:10px;
  background:#22262e; color:#fff; box-shadow:0 8px 28px rgba(0,0,0,.28);
  font-size:12.5px; max-width:92vw; flex-wrap:wrap; }
#asVerBar b{ font-weight:600; color:#ffb648; }
#asVerBar span{ color:rgba(255,255,255,.82); }
#asVerBar button{ font-family:inherit; font-size:12.5px; font-weight:600; padding:5px 12px;
  border-radius:7px; border:0; background:#ffb648; color:#22262e; cursor:pointer; }
#asVerBar i{ font-style:normal; cursor:pointer; color:rgba(255,255,255,.5); padding:0 2px; }

/* 版式再调（2026-10-31）：**事情原委通栏放最上面**（它最该被先看到），物流/会话并排在下面。
   原来 ④⑤ 并排时，⑤ 里的大图凭证挤在 487px 里，读起来还是要来回折。 */
.asd-wide > #asHk5{ grid-row:1; grid-column:1 / -1; }
.asd-wide > #asHk4{ grid-row:2; grid-column:1; }
.asd-wide > #asHk6{ grid-row:2; grid-column:2; }
@media (max-width: 1180px){
  .asd-wide > #asHk5, .asd-wide > #asHk4, .asd-wide > #asHk6{ grid-row:auto; grid-column:auto; }
}

/* 时间线条目：角色标签与标题靠左成组，时间单独靠右（否则标题会被 space-between 推到中间） */
.as-hl-ht{ display:flex; align-items:center; gap:6px; min-width:0; flex:1 1 auto; }
.as-hl-ht > b{ font-size:13px; line-height:1.5; }
.as-hl-h{ align-items:flex-start; }

/* 图片灯箱（2026-10-31 用户："图片点击放大，不要打开新窗口"） */
.as-zoom{ position:fixed; inset:0; z-index:9999; background:rgba(10,12,17,.84); display:flex;
  align-items:center; justify-content:center; padding:28px; backdrop-filter:blur(3px); }
.as-zoom.hide{ display:none; }
.as-zoom-b{ position:relative; display:flex; align-items:center; justify-content:center; }
.as-zoom img{ max-width:92vw; max-height:86vh; border-radius:var(--r); box-shadow:var(--shadow-3); background:#fff; }
.as-zoom-h{ position:absolute; bottom:-26px; left:0; right:0; text-align:center; color:rgba(255,255,255,.72); font-size:12px; }
body.as-zoom-on{ overflow:hidden; }
.as-img, .asd-media img{ cursor:zoom-in; }

/* 主账号看完整 openid：28 位，允许折行，别把表格撑爆 */
.as-in-key.full{ white-space:normal; word-break:break-all; max-width:200px; color:var(--text-2); font-size:10.5px; }

/* ============================================================
   复盘 · 分层账 + 买家明细（2026-10-31 统计口径重构）
   ------------------------------------------------------------
   用户指着截图说"这统计口径和内容有很大问题"：一个池子搅着算 ⇒
   160 单里 100 单"退差价"霸榜，货品问题 9 单沉底。
   ⇒ 分层必须**画在最前面**，颜色只表达"这一层要不要你动手"：
        红 货品（要盯品控）   橙 物流（要盯承运）   灰 差价（不产生品控动作）
        蓝 协商（原因不明，要定性）   浅灰 平台没给原因
   ============================================================ */
.as-bk{ margin-top:2px; }
.as-bk-row{ display:grid; grid-template-columns:88px 1fr 52px; gap:3px 6px; align-items:center;
  padding:7px 4px 8px; border-top:1px solid #f2f4f7; cursor:pointer; border-radius:6px; }
.as-bk-row:first-child{ border-top:none; }
.as-bk-row:hover{ background:#fafbfc; }
.as-bk-row.zero{ opacity:.55; cursor:default; }
.as-bk-l{ grid-row:1; grid-column:1; font-size:12px; color:#3c434c; display:flex; align-items:center; gap:5px; }
.as-bk-t{ grid-row:1; grid-column:2; height:7px; border-radius:4px; background:#f0f3f7; overflow:hidden; min-width:36px; }
.as-bk-f{ height:100%; border-radius:4px; background:#8fa6c4; }
.as-bk-n{ grid-row:1; grid-column:3; text-align:right; font-size:12.5px; font-weight:600; color:#3c434c; }
.as-bk-pc{ display:block; font-weight:400; font-size:10px; color:#a6adb6; }
.as-bk-y{ grid-row:2; grid-column:1; font-size:11.5px; color:#6b7480; }
.as-bk-b{ grid-row:2; grid-column:2 / -1; font-size:11px; color:#8b939e; }
.as-bk-top{ grid-row:3; grid-column:1 / -1; font-size:11px; color:#8b939e; line-height:1.55; }
.as-bk-hint{ grid-row:4; grid-column:1 / -1; font-size:10.5px; color:#a6adb6; line-height:1.5; }
/* 分层色点：小圆点承担全部"这是哪一类"的识别，表格里也用它（不额外占一列文字） */
.as-bk-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#c3c9d1;
  margin-right:4px; flex:0 0 auto; vertical-align:middle; }
.as-bk-dot.q{ background:#b0402c; }
.as-bk-dot.l{ background:var(--orange,#d98b2b); }
.as-bk-dot.p{ background:#9aa2ad; }
.as-bk-dot.o{ background:#5b7fa8; }
.as-bk-dot.u{ background:#c3c9d1; }
.as-bk-f.q{ background:#b0402c; }
.as-bk-f.l{ background:var(--orange,#d98b2b); }
.as-bk-f.p{ background:#b6bdc6; }
.as-bk-f.o{ background:#8aa9c8; }
.as-bk-f.u{ background:#d3d8de; }

/* 买家榜：整行可点，展开后下面是这人每一笔的明细（"可跟踪具体情况"） */
.as-in-tbl-b th{ font-size:10.5px; }
.as-in-tr{ cursor:pointer; }
.as-in-tr:hover > td{ background:#fafbfc; }
.as-in-tr.open > td{ background:#f7f9fb; }
.as-in-arw{ color:#b6bdc6; font-size:11px; text-align:right; width:14px; }
.as-bk-q{ color:#b0402c; }
.as-in-items > td{ padding:0 !important; background:#fbfcfd; }
.as-it-wrap{ padding:8px 0 10px 6px; margin:2px 0 4px 2px; border-left:2px solid #e3e9f0; }
.as-it-tbl th{ font-size:10.5px; color:#a6adb6; }
.as-it-tbl td{ font-size:11px; padding:3px 6px 3px 0; border-top:1px solid #f4f6f9; }
.as-it-id{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; }
.as-it-id a{ color:#2f6fb0; text-decoration:none; border-bottom:1px dotted #9dbcd8; }
.as-it-id a:hover{ color:#b0402c; border-bottom-color:#b0402c; }
.as-it-at{ white-space:nowrap; color:#8b939e; font-size:10.5px; }
.as-it-rs{ color:#6b7480; }
.as-it-bk{ white-space:nowrap; color:#8b939e; font-size:10.5px; }
.as-it-st{ white-space:nowrap; color:#a6adb6; font-size:10.5px; }
/* 「只看有货品问题的」小开关：点一下收窄，再点回来 */
.as-in-chip-btn{ cursor:pointer; font-family:inherit; margin-bottom:6px; }
.as-in-chip-btn:hover{ background:#eaf0f7; color:#3c434c; }
.as-in-chip-btn.on{ background:#b0402c; color:#fff; border-color:#b0402c; }


/* ============================================================
   售后抽屉 · 四层结构（2026-10-31 重构）
   ------------------------------------------------------------
   用户："感觉我们自研现在看着也很复杂。能不能按时间线把逻辑重新理下。
          我们信息哪些是对售后申诉没帮助、哪些有帮助做个分类？或用颜色分主次？"
   ⇒ 颜色只表达三件事（不做装饰）：
        绿 = 对你有利       红 = 会扣钱/扣分/超时       橙 = 要你现在决定
        灰 = 背景信息（单号/时间/来源这类，处理时用不上）
   ★ 用项目真实变量（--surface / --surface-2 / --surface-3 / --text-3 / --line），
     不是 --card 那种不存在的（踩过）。
   ============================================================ */

/* ---------- L1 决策条：一屏只看这一个 ---------- */
.db{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:13px 15px 11px; }
.db-l1{ font-size:14px; line-height:1.65; color:var(--text); }
.db-l1 b{ font-weight:600; }
.db-l2{ margin-top:5px; font-size:12.5px; color:var(--text-2); display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.db-sep{ color:var(--text-3); }
.db-hi{ color:var(--red); font-weight:600; }
.db-ok{ color:var(--green); font-weight:600; }
.db-pend{ color:var(--text-3); }
.db-st{ color:var(--text-3); }
.db-l3{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
.db-v{ font-size:13px; font-weight:600; padding:2px 10px; border-radius:var(--r-pill); white-space:nowrap; }
.db-v-agree{ background:var(--green-l); color:var(--green); }
.db-v-reject{ background:var(--red-l); color:var(--red); }
.db-v-nego{ background:var(--accent-soft); color:var(--accent); }
.db-v-wait{ background:var(--surface-3); color:var(--text-3); }
.db-why{ font-size:13px; color:var(--text-2); flex:1 1 240px; line-height:1.6; }
.db-conf{ font-size:11.5px; color:var(--text-3); }

/* 倒计时：红字加大加粗（用户明确要求过"红色加大加粗倒计时警告"） */
.db-cd{ margin-top:11px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding:9px 12px; border-radius:var(--r); background:var(--surface-2); border-left:3px solid var(--text-3); }
.db-cd-k{ font-size:12px; color:var(--text-2); }
.db-cd-v{ font-size:21px; font-weight:700; line-height:1.15; letter-spacing:-.3px; color:var(--text); }
.db-cd-t{ font-size:11.5px; color:var(--text-3); }
.db-cd.cd-auto,.db-cd.cd-manual{ border-left-color:var(--red); background:var(--red-l); }
.db-cd.cd-auto .db-cd-v,.db-cd.cd-manual .db-cd-v{ color:var(--red); }
.db-cd.cd-auto .db-cd-t,.db-cd.cd-manual .db-cd-t{ color:var(--red); opacity:.75; }
.db-cd.cd-arbit{ border-left-color:var(--orange); background:var(--orange-l); }
.db-cd.cd-arbit .db-cd-v{ color:var(--orange); }

.db-tags{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.db-tag{ font-size:11.5px; padding:1px 9px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--text-2); }
.db-tag.good{ background:var(--green-l); color:var(--green); }
.db-tag.bad{ background:var(--red-l); color:var(--red); }
.db-tag.warn{ background:var(--orange-l); color:var(--orange); }
.db-acts{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.db-basis{ margin-top:10px; font-size:12px; color:var(--text-2); }
.db-basis > summary{ cursor:pointer; color:var(--text-3); font-size:12px; }
.db-b-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.db-b-list span{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-xs); padding:2px 8px; font-size:11.5px; }
.db-b-risk{ margin-top:6px; color:var(--orange); line-height:1.65; }

/* ---------- L2 时间线：唯一主轴 ---------- */
.as-spine{ margin-top:12px; }
/* 圆点用**影响色**而不是角色色：这一屏要回答的是"这一步对我们有利吗"，
   角色已经由标签文字表达了，再拿颜色重复一遍角色等于浪费一个视觉通道。 */
.as-hl.as-imp-good .as-hl-d i{ background:var(--green); }
.as-hl.as-imp-bad .as-hl-d i{ background:var(--red); }
.as-hl.as-imp-flat .as-hl-d i{ background:var(--line-2); }
.as-hl-w{ font-size:11.5px; margin-top:4px; padding:2px 0 2px 9px; border-left:2px solid var(--line-2); color:var(--text-3); line-height:1.55; }
.as-hl-w-good{ border-left-color:var(--green); color:var(--green); }
.as-hl-w-bad{ border-left-color:var(--red); color:var(--red); }

/* ---------- L3 申诉板：我有 / 对方有 / 我缺 ---------- */
.cl{ margin-top:12px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:12px 14px; }
.cl-h{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.cl-h > span:first-child{ font-size:13px; font-weight:600; color:var(--text); }
.cl-l{ font-size:12px; font-weight:500; }
.cl-l.good{ color:var(--green); }
.cl-l.bad{ color:var(--red); }
.cl-l.flat{ color:var(--text-3); }
.cl-g{ margin-top:11px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.cl-c{ background:var(--surface-2); border-radius:var(--r); padding:10px 12px; border-top:3px solid var(--line-2); }
.cl-mine{ border-top-color:var(--green); }
.cl-theirs{ border-top-color:var(--red); }
.cl-lack{ border-top-color:var(--orange); }
.cl-t{ font-size:12px; font-weight:600; color:var(--text-2); }
.cl-t > b{ font-size:15px; }
.cl-mine .cl-t > b{ color:var(--green); }
.cl-theirs .cl-t > b{ color:var(--red); }
.cl-lack .cl-t > b{ color:var(--orange); }
.cl-i{ margin-top:8px; font-size:12.5px; }
.cl-n{ display:block; color:var(--text); font-weight:500; line-height:1.5; }
.cl-w{ display:block; color:var(--text-3); font-size:11.5px; line-height:1.55; margin-top:2px; }
.cl-e{ margin-top:8px; font-size:12px; color:var(--text-3); }
.cl-gap{ margin-top:10px; font-size:11.5px; color:var(--text-3); line-height:1.6; }
@media (max-width: 900px){ .cl-g{ grid-template-columns:1fr; } }

/* ---------- L4 折叠区 + 两栏事实区 ---------- */
.mf{ margin-top:12px; }
.mf > summary{ cursor:pointer; color:var(--text-3); font-size:12px; padding:7px 0; }
.mf-b{ background:var(--surface-2); border-radius:var(--r); padding:10px 12px; margin-top:2px; }
.op-fold{ margin-top:10px; }
.op-fold > summary{ cursor:pointer; font-size:12.5px; color:var(--text-2); padding:8px 11px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); }
.asd-cols2{ margin-top:12px; display:grid; gap:10px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
@media (max-width: 1180px){ .asd-cols2{ grid-template-columns:1fr; } }

/* 签收→申请的时间差：绿=隔得久（对我方有利）、橙=刚到手就申请（别当利好）、灰=隔 1~3 天 */
.db-good{ color:var(--green); font-weight:600; }
.db-warn{ color:var(--orange); font-weight:600; }

/* 台账状态与实时状态不一致：把过期的那个划掉，别让人按旧状态决策 */
.db-stale{ text-decoration:line-through; opacity:.55; }


/* ============================================================
   处理按钮：不折叠 + 按重要程度分级（2026-10-31 用户指正）
   ------------------------------------------------------------
   原话：「客服要处理售后的按钮不应该收起来。并且要加大加粗，按重要程度不同区分。」
   之前被塞进 <details> 收起 —— 那是把"每天要点的操作"当成了"参考信息"，方向错了。
   现在：
     .lv-main   系统建议的那一个：16px / 700 / 实心 / 带"建议"标 / 排最左
     .lv-danger 拒绝：14px / 红描边（不管建不建议，它都会引起争议）
     .lv-sec    其余：14px 描边
   ============================================================ */
.op-main .op-b{ font-size:14px; padding:9px 18px; font-weight:600; border-radius:9px; }
.op-main .op-b.lv-main{ font-size:16px; padding:12px 26px; font-weight:700; border-width:1.5px; }
.op-main .op-b.lv-main.agree{ background:var(--green); color:#fff; border-color:var(--green); }
.op-main .op-b.lv-main.nego{ background:var(--accent); color:#fff; border-color:var(--accent); }
.op-main .op-b.lv-main.reject{ background:var(--red); color:#fff; border-color:var(--red); }
.op-main .op-b.lv-main.agree:hover{ background:var(--green); color:#fff; filter:brightness(.93); }
.op-main .op-b.lv-main.nego:hover{ background:var(--accent); color:#fff; filter:brightness(.93); }
.op-main .op-b.lv-main.reject:hover{ background:var(--red); color:#fff; filter:brightness(.93); }
.op-main .op-b.lv-danger{ color:var(--red); border-color:var(--red-line); }
.op-main .op-b.lv-danger:hover{ background:var(--red-l); color:var(--red); border-color:var(--red); }
.op-main .op-b.lv-sec{ color:var(--text-2); }
.op-tag{ display:inline-block; margin-left:8px; font-size:10.5px; line-height:17px; padding:0 7px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.26); color:#fff; font-weight:600; vertical-align:1px; }
@media (max-width: 640px){
  .op-main .op-b{ font-size:13px; padding:8px 13px; }
  .op-main .op-b.lv-main{ font-size:15px; padding:11px 18px; }
}

/* 「售后单 vs 订单数」的小字：主数字下面一行，差得越多越要看得见 */
.as-in-sub{ display:block; font-size:10.5px; color:var(--text-3); font-weight:400; line-height:1.45; margin-top:1px; white-space:nowrap; }
.as-in-sub.warn{ color:var(--orange); font-weight:600; }
@supports not (white-space:nowrap){ .as-in-sub{ white-space:normal; } }

/* ★★ 2026-10-31 用户：「同意退款永远永远都不是最重要的。白嫖党开心…仇者快亲者痛。」
   ⇒ 主按钮的颜色按**动作性质**给，不给好坏评价：
        拒绝 = 红（强硬）  协商 = 蓝（谈）  同意 = 深灰（让步，绝不绿色）
      绿色在本项目里一直是"对我方有利"的意思，用它包"同意退款"等于在鼓励送钱。 */
.op-main .op-b.lv-main.agree{ background:#5b6472; color:#fff; border-color:#5b6472; }
.op-main .op-b.lv-main.agree:hover{ background:#5b6472; color:#fff; filter:brightness(.92); }
.op-main .op-b.lv-main.reject{ background:var(--red); color:#fff; border-color:var(--red); }
.op-main .op-b.lv-main.nego{ background:var(--accent); color:#fff; border-color:var(--accent); }
.op-why{ margin-top:9px; font-size:12px; line-height:1.65; color:var(--text-2);
  padding:7px 10px; border-radius:var(--r-xs); background:var(--surface-2); border-left:2px solid var(--accent); }

/* 没有"主推动作"时也要有焦点（2026-10-31 用户："微信小店按钮没改"——
   其实是"建议先等"时三个按钮都不突出，一屏没有焦点，看起来像没做任何改动） */
.op-wait{ margin-bottom:11px; padding:11px 14px; border-radius:var(--r);
  background:var(--surface-2); border-left:3px solid var(--accent); }
.op-wait-k{ font-size:11.5px; color:var(--text-3); letter-spacing:.2px; }
.op-wait-v{ font-size:17px; font-weight:700; color:var(--text); line-height:1.35; margin-top:1px; }
.op-wait-t{ font-size:12px; color:var(--text-2); line-height:1.6; margin-top:3px; }
/* 已结束的单：不摆假按钮，只留一句明确的话 */
.op-closed{ padding:12px 14px; border-radius:var(--r); background:var(--surface-2);
  border-left:3px solid var(--line-2); font-size:13px; line-height:1.65; color:var(--text-2); }
.op-closed > b{ display:block; color:var(--text); font-weight:600; margin-bottom:2px; }

/* 只剩一个可用动作时给它一点分量（否则"唯一能做的事"被做成一枚小按钮，等于藏起来） */
.op-main .op-b.op-only{ font-size:15px; font-weight:700; border-width:1.5px; padding:10px 22px; }

/* 提交证据：只有部分单有（平台下发了举证要求），有就必须抢在决策按钮前面被看到。
   橙色在本项目语义＝"要你现在决定"，而且举证是有时限的，过期按平台判。 */
.op-main .op-b.lv-proof{ background:var(--orange); color:#fff; border-color:var(--orange);
  font-size:15px; font-weight:700; padding:11px 22px; }
.op-main .op-b.lv-proof:hover{ background:var(--orange); color:#fff; filter:brightness(.94); }
.op-tag.dark{ background:rgba(0,0,0,.18); color:#fff; }
.op-why-proof{ margin-top:9px; border-left-color:var(--orange); }
.fx-h2{ font-size:12px; font-weight:600; color:var(--text-2); margin:10px 0 4px; }

/* 延长审核期：缓冲动作，不抢决策按钮的位置，但要看得见 */
.op-main .op-b.lv-ext{ color:var(--text-2); border-color:var(--line-2); border-style:dashed; }
.op-main .op-b.lv-ext:hover{ background:var(--surface-2); color:var(--text); }
.fx-pre{ margin:4px 0 0; padding:9px 11px; background:var(--surface-2); border-radius:var(--r-xs);
  font-family:var(--mono); font-size:11.5px; line-height:1.6; overflow-x:auto; white-space:pre; }

/* ---- 申诉材料清单（147）：逐项对勾，四种状态一眼可分 ---- */
.as-cl{ margin:0 0 10px; padding:9px 11px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-xs); }
.as-cl-h{ font-size:12.5px; font-weight:600; margin-bottom:6px; display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; }
.as-cl-h .mini{ font-weight:400; }
.cl-miss{ color:var(--warn, #c2410c); font-weight:600; }
.cl-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; padding:3px 0; font-size:12px; line-height:1.55; border-top:1px solid var(--line); }
.cl-row:first-of-type{ border-top:0; }
.cl-ic{ width:14px; text-align:center; font-weight:700; flex:none; }
.cl-n{ font-weight:600; flex:none; }
.cl-d{ color:var(--text-3, #6b7280); flex:1 1 auto; min-width:120px; }
.cl-ask{ flex:none; font-size:11px; padding:1px 6px; border-radius:9px; background:var(--surface-3, #eef2f7); color:var(--text-2); }
.cl-why{ flex:1 1 100%; font-size:11.5px; color:var(--text-3, #6b7280); padding-left:20px; }
/* ★ 缺=要催（橙红）、有=安心（蓝灰）、判不了=别乱猜（灰虚）、不适用=划掉 */
.cl-have .cl-ic{ color:#2563eb; }
.cl-miss .cl-ic{ color:var(--warn, #c2410c); }
.cl-miss .cl-n{ color:var(--warn, #c2410c); }
.cl-unknown .cl-ic{ color:var(--text-3, #6b7280); }
.cl-na{ opacity:.55; }
.cl-na .cl-n{ text-decoration:line-through; }

/* ---- 证据打包条 ---- */
.as-pack{ margin-left:8px; display:inline-flex; gap:6px; }
.mini-btn{ font-size:11.5px; padding:2px 8px; border:1px solid var(--line-2); border-radius:var(--r-xs);
  background:var(--surface); color:var(--text-2); cursor:pointer; }
.mini-btn:hover{ background:var(--surface-3, #eef2f7); color:var(--text); }

/* ---- 视频凭证：页面内播放，不再只给一个跳走的链接 ---- */
.as-pf-video{ display:inline-flex; align-items:center; gap:4px; padding:6px 10px; cursor:pointer;
  border:1px dashed var(--line-2); border-radius:var(--r-xs); font-size:12px; color:var(--text-2); }
.as-pf-video:hover{ background:var(--surface-3, #eef2f7); color:var(--text); }
.as-zoom video{ display:none; max-width:92vw; max-height:82vh; border-radius:var(--r-xs); background:#000; }

/* 撕单候选提示：没被剔掉，只是"待你定性" ⇒ 用警示底色区别于"已排除" */
.as-in-note-warn{ border-left:3px solid var(--warn, #c2410c); background:var(--surface-3, #eef2f7); }

/* ============================================================
   协商方案「先问目的 + 给推荐」选择器（149-协商方案-按意图选.js）
   ------------------------------------------------------------
   替换原来那个 36 条的 <select>。要求是"看一眼就知道该选哪个"，
   所以：推荐卡置顶且带理由 → 意图三选 → 只列当前这单真能选的 → 全部折叠兜底。
   ============================================================ */
.np{ margin-top:6px; }
.np-rec{ border:1px solid #bcd7ea; background:#f2f8fd; border-radius:8px; padding:9px 11px; margin-bottom:9px; }
.np-rec.on{ border-color:#7fb2d8; background:#e8f3fb; }
.np-rec-h{ font-size:12.5px; color:var(--ink2); }
.np-rec-h b{ color:#1d6fa5; }
.np-rec-y{ font-size:11px; color:var(--text-3); line-height:1.65; margin-top:4px; }
.np-rec-go{ font-size:11px; color:#1d6fa5; margin-top:6px; }
.np-btn{ margin-top:7px; font-size:11.5px; padding:4px 12px; border-radius:6px; cursor:pointer;
  border:1px solid #7fb2d8; background:#fff; color:#1d6fa5; font-family:inherit; }
.np-btn:hover{ background:#e8f3fb; }
.np-intents{ display:flex; gap:6px; flex-wrap:wrap; }
.np-i{ display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:11.5px; cursor:pointer;
  padding:5px 10px; border-radius:14px; border:1px solid #d5dce5; background:#fff; color:var(--ink2); }
.np-i i{ font-style:normal; font-size:10px; color:var(--text-3); background:#f0f3f7; border-radius:8px; padding:0 5px; }
.np-i.on{ border-color:#8fa8c8; background:#eef4fa; color:#1d4f7a; }
.np-i.on i{ background:#dde8f3; color:#1d4f7a; }
.np-hint{ font-size:11px; color:var(--text-3); margin:6px 0 7px; line-height:1.6; }
.np-items{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:7px; }
.np-item{ border:1px solid var(--line); border-radius:7px; padding:7px 9px; cursor:pointer; background:#fff; }
.np-item:hover{ border-color:#8fa8c8; }
.np-item.on{ border-color:#7fb2d8; background:#f2f8fd; }
.np-it-t{ font-size:12px; color:var(--ink2); line-height:1.5; }
.np-it-m{ display:flex; gap:4px; flex-wrap:wrap; margin-top:5px; }
.np-it-f{ font-size:10px; color:var(--text-3); margin-top:4px; }
.np-tag{ font-size:10px; padding:1px 6px; border-radius:9px; background:#f0f3f7; color:var(--text-3); }
.np-tag.ok{ background:#eaf6ee; color:#2a7a45; }
.np-tag.warn{ background:#fdf1e4; color:#a06010; }
.np-all{ margin-top:9px; }
.np-all summary{ font-size:11.5px; color:var(--text-3); cursor:pointer; }
.np-note{ margin-left:6px; font-size:10.5px; color:#9aa4b0; }

/* 抖店「按单下发」的选项卡片（150-抖店拒绝协商-按单选项.js）
   与 .np-* 同一套视觉；.off = 平台标了"这一单不能选"，必须能一眼看出来 */
.np-item.off{ opacity:.55; cursor:not-allowed; background:#fafbfc; border-style:dashed; }
.np-item.off:hover{ border-color:var(--line); }
.np-i.off{ opacity:.5; cursor:not-allowed; text-decoration:line-through; }

/* ============================================================
   售后列表行 · 三层信息架构（2026-11-01）
   ------------------------------------------------------------
   为什么不给 .rec 直接改：.rec 是 18 个页签共用的原语，改一行等于改全站。
   售后行多一层「事实条」⇒ 用 .as-row 在 .rec 之上做局部重排：
     L1 head   谁 · 干什么 + 决策 chips
     L2 事实条 货到哪了 / 举证时限 / 退过几次 / 同订单几笔
     L3 定位行 售后号 · 订单号 · 时间 · 原因
   尾区倒计时已经在 .rec-tail 里（order:-1 顶到最上），不用动。
   ============================================================ */
.rec-mid{ grid-column:1; grid-row:2; min-width:0; }
.rec.has-mid .rec-sub{ grid-row:3; }
.rec.has-mid .rec-tail{ grid-row:1 / span 3; }

.as-row .rec-head{ gap:7px; align-items:baseline; }
.as-row .r-title{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.as-row .rec-sub{ flex-direction:column; align-items:flex-start; gap:5px; }

/* ---- L2 事实条：整行唯一允许有底色的一层 ----
   为什么给它底色：这一层是"点按钮之前先看一眼"的东西，
   做成灰字会被当成脚注；做成 chip 又太重 ⇒ 取中间：浅底 + 深字 + 小圆点。 */
.as-facts{ display:flex; flex-wrap:wrap; gap:5px; }
.as-f{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px 2px 7px;
  border-radius:6px; font-size:11.5px; font-weight:600; line-height:1.5; white-space:nowrap; }
.as-f::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.75; flex:0 0 auto; }

.as-f-inv{ background:#fdecea; color:#b02f1e; }        /* 平台介入/仲裁：最硬的一道约束 */
.as-f-evi{ background:#fdf6e4; color:#95600f; }        /* 举证有时限：过期就没了 */
.as-f-signed{ background:#f3edfb; color:#6b47b0; }     /* 货已签收：钱多半得退 */
.as-f-ship{ background:#eef4fc; color:#2b5a9e; }       /* 在途：还来得及拦 */
.as-f-noship{ background:#eef7f0; color:#1e7a44; }     /* 未发货：对咱们有利 */
.as-f-rep{ background:#fdf0e6; color:#96560f; }        /* 惯犯 */
.as-f-sib{ background:#f0f2f5; color:#5b6673; }        /* 同订单多笔 */

/* ---- L3 定位行：小、灰、可扫 ---- */
.as-row .rec-sub>span{ font-size:11.5px; color:var(--text-3); font-family:var(--mono); letter-spacing:-.2px; }

/* 已了结：整行退到背景里去，但**不能删**（删了就查不到账了） */
.as-row.is-over{ opacity:.62; }
.as-row.is-over:hover{ opacity:1; }
.as-row.is-over .as-f-evi{ display:none; }             /* 都已了结还要什么举证 */

/* ---- 店铺分：维度卡可点 + 选中态（153 片段） ---- */
#ssDims .ss-dim{cursor:pointer;transition:box-shadow .15s ease}
#ssDims .ss-dim:hover{box-shadow:0 0 0 1px var(--accent)}
#ssDims .ss-dim.sel{box-shadow:0 0 0 2px var(--accent)}
/* 原始指标折叠区：平时收起，排查时展开 */
.ss-raw{margin-top:18px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface-2)}
.ss-raw>summary{cursor:pointer;font-size:13px;color:var(--text-3);font-weight:500;outline:none}
.ss-raw[open]>summary{margin-bottom:12px}
#ssGuide .card{margin-bottom:16px}
#ssGuide .card:last-child{margin-bottom:0}

/* ---- 店铺分：图解页内展开（153 片段 toggleScoreGuide） ---- */
#ssGuideFrame{display:block;margin-top:16px}
#ssGuideFrame:empty{display:none}
#ssGuideFrame iframe{display:block;width:100%;height:640px;border:1px solid var(--line);border-radius:12px;background:#fff}

/* ---- 好店达标：红绿灯行（2026-11-02 改版，给仓库看） ---- */
.hd-row{display:grid;grid-template-columns:56px 1fr 120px;gap:14px;align-items:center;
  padding:14px 16px;border-radius:12px;margin-bottom:10px;cursor:pointer;border:1px solid transparent}
.hd-row:hover{filter:brightness(.98)}
.hd-ok{background:#eef7ee;border-color:#bfe0c2}
.hd-bad{background:#fdeeed;border-color:#f0c2be}
.hd-unk{background:#fdf6e6;border-color:#ecd9a8}
.hd-ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:700;color:#fff}
.hd-ok .hd-ico{background:#4a9e50}
.hd-bad .hd-ico{background:#c94a44}
.hd-unk .hd-ico{background:#d9a13a}
.hd-name{font-size:15.5px;font-weight:600;line-height:1.4}
.hd-sub{font-size:13px;color:#5b5b5b;margin-top:3px}
.hd-sub b{color:#1a1a1a}
.hd-state{font-size:13px;font-weight:600;text-align:right}
.hd-ok .hd-state{color:#2e6b32}
.hd-bad .hd-state{color:#a8362f}
.hd-unk .hd-state{color:#8a6512}

/* ---- 好店：八宫格（2026-11-02 v2） ---- */
.hd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:1000px){.hd-grid{grid-template-columns:repeat(2,1fr)}}
/* ★ 2026-11-03 用户："颜色用纯的颜色，淡色感觉被忽视或禁用"：
   实心绿/橙/红底 + 反色字（文字用 var(--surface)：浅色主题=白字、暗色主题=深字，都成立）。
   同时删掉旧的「已过项淡化 opacity:.55」—— 那正是"被忽视感"的来源。 */
.hd-cell{border-radius:12px;padding:12px 14px;cursor:pointer;border:1.5px solid transparent;transition:filter .12s}
.hd-cell:hover{filter:brightness(.94)}
.hd-cell.ok{background:var(--green);border-color:var(--green)}
.hd-cell.bad{background:var(--red);border-color:var(--red)}
.hd-cell.unk{background:var(--orange);border-color:var(--orange)}
.hd-cell .dot{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);font-size:13px;font-weight:700;flex:0 0 22px}
.hd-cell .nm{font-size:13.5px;font-weight:700;margin-top:8px;line-height:1.3;color:var(--surface)}
.hd-cell .vl{font-size:12px;color:var(--surface);margin-top:3px}
.hd-cell .vl span{opacity:.85}

/* ---- 好店·目标尺（2026-11-03 重设计） ----
   旧版是 81→100 的缩放窗口尺，"82.9% 画在 10% 位置"比例和标签对不上（用户报"比例不对"）；
   新版 **0-100 满宽**：绿条长度 = 真实好评率，目标手柄在 90% 处，一眼读对。
   视觉：细圆角轨道 + 绿填充 + 绿圆点（现在）+ 橙色旗标手柄（目标，可拖）+ 浅橙斜纹带（差距段）。
   一律主题变量，明暗主题跟随；不再写死 #hex。 */
.hd-goal{padding:6px 2px 0}
.hd-goal-track{position:relative;height:70px;cursor:pointer;outline:none;touch-action:none;
  -webkit-user-select:none;user-select:none}
.hd-goal-track:focus{outline:none}
.hd-goal-track:focus-visible .hd-goal-tgt i{box-shadow:0 0 0 4px var(--orange-l)}
/* 差距段：当前 → 目标之间铺浅橙斜纹（"要补的量"） */
.hd-goal-span{position:absolute;top:33px;height:10px;border-radius:0 999px 999px 0;pointer-events:none;
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--orange) 30%, transparent) 0 5px,
    color-mix(in srgb, var(--orange) 8%, transparent) 5px 10px);
  box-sizing:border-box;transition:left .06s linear,width .06s linear}
.hd-goal-rail{position:absolute;left:0;right:0;top:33px;height:10px;background:var(--surface-3);border-radius:999px}
.hd-goal-fill{position:absolute;left:0;top:33px;height:10px;background:var(--green);
  border-radius:999px 0 0 999px;transition:width .06s linear}
/* 当前位置：绿圆点白边（与商品好评行的气泡语言一致） */
.hd-goal-now{position:absolute;top:29px;width:18px;height:18px;border-radius:50%;background:var(--green);
  border:3px solid var(--surface);box-sizing:border-box;transform:translateX(-50%);
  box-shadow:0 1px 4px rgba(0,0,0,.16)}
.hd-goal-nowlbl{position:absolute;top:4px;transform:translateX(-50%);font-size:12px;font-weight:700;
  color:var(--green);white-space:nowrap}
/* 目标手柄：橙色竖旗 + 圆点，可拖 */
.hd-goal-tgt{position:absolute;top:26px;width:3px;height:24px;background:var(--orange);transform:translateX(-1.5px);
  border-radius:2px;transition:left .06s linear}
.hd-goal-tgt i{position:absolute;left:50%;top:-8px;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  background:var(--orange);border:3px solid var(--surface);box-sizing:border-box;
  box-shadow:0 1px 5px rgba(0,0,0,.2);cursor:grab;transition:transform .12s;
  display:flex;align-items:center;justify-content:center}
.hd-goal-tgt i::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--surface)}
.hd-goal-track:hover .hd-goal-tgt i,.hd-goal-track.dragging .hd-goal-tgt i{transform:scale(1.14)}
.hd-goal-track.dragging{cursor:grabbing}
.hd-goal-tgtlbl{position:absolute;top:52px;transform:translateX(-50%);font-size:12px;font-weight:700;
  color:var(--orange);white-space:nowrap}
.hd-goal-mid{text-align:center;font-size:12.5px;color:var(--text-2);margin-top:2px}
.hd-goal-mid b{color:var(--text)}

/* ===== 商品好评管理（155 · 商品级 · 2026-11-02） =====
   一律用主题变量（--surface-2 / --text-3 / --green / --orange / --red 及其 -l 浅底），
   暗色主题自动跟随；**不许写死 #hex 当底色**（铁律：--card 全站不存在）。
   ⚠️ 注释里绝对不能出现「星号紧跟斜杠」——那会提前结束注释，后面整段规则被解析器丢掉，
      页面看起来"CSS 没生效"却查不出原因（2026-11-02 真踩过：这里原本写通配写法，导致
      .rp-head-main 的 display:flex 整个没应用，四项指标竖着叠在一起）。 */
.rp-head-main{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end}
.rp-big{font-size:26px;font-weight:700;line-height:1.15;margin-top:2px}
.rp-big.ok{color:var(--green)}.rp-big.warn{color:var(--orange)}.rp-big.bad{color:var(--red)}
.rp-warn{border-left:3px solid var(--orange-line);background:var(--orange-l)}
.rp-row{display:flex;gap:12px;align-items:flex-start;padding:14px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.rp-row:hover{background:var(--surface-2)}   /* 整条记录可点，得像能点的 */
.rp-row:last-child{border-bottom:0}
.rp-img{width:56px;height:56px;border-radius:var(--r-sm);object-fit:cover;background:var(--surface-2);flex:0 0 56px}
.rp-img-empty{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-3)}
.rp-main{flex:1;min-width:0}
.rp-title{font-weight:600;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-facts{display:flex;gap:6px;flex-wrap:wrap;margin:7px 0 2px}
.rp-bar{position:relative;height:6px;background:var(--surface-3);border-radius:3px;margin:7px 0 4px}
.rp-bar i{display:block;height:6px;border-radius:3px}
.rp-bar i.ok{background:var(--green)}.rp-bar i.warn{background:var(--orange)}.rp-bar i.bad{background:var(--red)}
/* 90% 目标刻度：一眼看出离目标多远，不用心算 */
.rp-bar u{position:absolute;top:-3px;width:2px;height:12px;background:var(--text-3);border-radius:1px}
.rp-line{color:var(--text-2)}
.rp-why{color:var(--red);margin-top:2px}
.rp-right{flex:0 0 120px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.rp-verdict{display:inline-block;padding:2px 12px;border-radius:var(--r-pill);font-weight:700;font-size:13px;
  margin-bottom:3px;background:var(--surface-2);color:var(--text-2)}
.rp-verdict.ok{background:var(--green-l);color:var(--green)}
.rp-verdict.warn{background:var(--orange-l);color:var(--orange)}
.rp-verdict.bad{background:var(--red-l);color:var(--red)}
.rp-drag.bad{color:var(--red);font-weight:600}
.rp-drag.ok{color:var(--green)}
@media (max-width:640px){
  .rp-row{flex-wrap:wrap}
  .rp-right{flex:1 0 100%;flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;text-align:left}
}

/* ===== 商品好评管理 · 列表视图（155 · 2026-11-02） =====
   2026-11-02 下午曾做成「明白卡卡片墙」，用户反馈**列表更合适**：省空间、好排序、
   订单异常一眼扫。已回退为列表行（.rp-row，见上方 155 段）。顶部红绿灯汇总块（.rvpc-lights）
   保留在下方，只做「几个要管/盯着/放心」的统计，不占列表空间。
   一律用主题变量，暗色跟随；不写死 #hex 底色（--card 全站不存在）。 */
.rvpc-lights{display:flex;gap:22px;margin-top:10px}
.rvpc-lt{display:flex;flex-direction:column;align-items:center;gap:3px}
.rvpc-ld{width:20px;height:20px;border-radius:50%}
.rvpc-ld.red{background:var(--red)}.rvpc-ld.yellow{background:var(--orange)}.rvpc-ld.green{background:var(--green)}
.rvpc-lt b{font-size:18px;font-weight:700}
.rvpc-lt i{font-size:12px;color:var(--text-2);font-style:normal}
.rvpc-lights{display:flex;gap:22px;margin-top:10px}
.rvpc-lt{display:flex;flex-direction:column;align-items:center;gap:3px}
.rvpc-ld{width:20px;height:20px;border-radius:50%}
.rvpc-ld.red{background:var(--red)}.rvpc-ld.yellow{background:var(--orange)}.rvpc-ld.green{background:var(--green)}
.rvpc-lt b{font-size:18px;font-weight:700}
.rvpc-lt i{font-size:12px;color:var(--text-2);font-style:normal}

/* ===== 催好评面板（155 · 2026-11-02） ===== */
.rvn-row{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;margin-top:8px;background:var(--surface-2)}
.rvn-hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rvn-hd b{font-family:var(--mono);font-size:13px;color:var(--text)}
.rvn-goods{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
/* 文案框：字号跟正文一致（13px），太小改文案会看不清 */
.rvn-text{width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r-xs);
  background:var(--surface);color:var(--text);font-size:13px;line-height:1.65;resize:vertical;font-family:inherit;box-sizing:border-box}
.rvn-text:focus{outline:2px solid var(--accent-line);outline-offset:-1px}
.rvn-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.rvn-st{color:var(--text-3);flex:1;min-width:80px}

/* ===== 商品经营数据表（155 · 2026-11-02） =====
   12 列放不进手机屏 ⇒ 外层横向滚动，表头 sticky（滚动时列名不丢）。
   数字列右对齐 + tabular-nums：等宽数字才能让眼睛竖着比大小。 */
.rp-tblwrap{overflow-x:auto;margin-top:8px;border:1px solid var(--line);border-radius:var(--r-sm)}
.rp-tbl{border-collapse:collapse;width:100%;font-size:12.5px;white-space:nowrap}
.rp-tbl th,.rp-tbl td{padding:7px 9px;text-align:right;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.rp-tbl th{font-weight:600;color:var(--text-2);background:var(--surface-2);position:sticky;top:0;z-index:1}
.rp-tbl td.l,.rp-tbl th.l{text-align:left;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.rp-tbl td.l2{font-weight:700;color:var(--text)}
.rp-tbl td.ok{color:var(--green)}
.rp-tbl td.warn{color:var(--orange)}
.rp-tbl td.bad{color:var(--red);font-weight:600}
.rp-tbl tbody tr:hover{background:var(--surface-2)}
.rp-tbl tbody tr:last-child td{border-bottom:0}

/* ===== 商品好评 · 图形化改版（155-B · 2026-11-02 晚） =====
   用户要求「让没文化也能读懂，能图表化就少用文字」⇒ 展开后的每一块都改成"看形状/看长短/看颜色"：
     ① .rvp-lgrow  一行读完：😃/😐/😡 + 大数字好评率 + 🎯目标
        ★ 2026-11-02 三次收紧：这一行文字**外面套一根胶囊进度条**（用户原话），
          填充长度 = 好评率、目标刻度竖线 = 90%、中间空白 = 还差多少，不读字也能懂。
          注意不是被删掉的那根三色比例条（那个分段 8/2/5 与图例数字重复）；
          这里是**单色填充当外壳底**，文字浮在条上，一个数字都不重复。
     ② .rvp-vchip  结论小徽章（原一整行横幅压缩而来）
     ③ .rvp-gap    两根对比条，把「追不回来」这句子画出来
     ④ .rvp-fbar   订单去向条（留下/关掉/发货前退/还没发）
     ⑤ .rvp-mbar   钱条（到手占实付多少）
     ⑥ .rvp-why    差评原因：图标 + 大数字
     ⑦ .rvp-det    所有解释性文字收进 ⓘ 折叠，不占首屏
     ⑧ .rvp-more   详情总折叠，默认先隐藏、点击再展开
   ★ 2026-11-02 二次收紧：三色比例条整条删除（条上 8/2/5 与图例数字重复），
     原「图例行 + 结论横幅行」两行压成一行。判据一个没动。
   ★ 一律主题变量，暗色跟随；不写死 #hex 底色（--card 全站不存在）。
   ⚠️ 注释里不许出现「星号紧跟斜杠」，那会提前结束注释、后面整段规则被丢掉（真踩过）。 */

/* ① 文字行（条内文字已移出，回到普通一行）：😃/😐/😡 + 🎯目标 + 结论chip + 💬看N条 */
.rvp-lgrow{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-top:4px;min-width:0}
.rvp-lg{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--text-2)}
.rvp-lg i{font-style:normal;font-size:12px}
.rvp-lg b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.rvp-lg.ok b{color:var(--green)}.rvp-lg.warn b{color:var(--orange)}.rvp-lg.bad b{color:var(--red)}
.rvp-tgt{font-size:10px;color:var(--text-3)}
.rvp-lnk{margin-left:auto;font-size:11px;font-weight:700;padding:1px 7px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  text-decoration:none;color:var(--text-2);white-space:nowrap}
.rvp-lnk:hover{background:var(--surface-2)}
/* 动作区末尾的「📋 复制」（2026-11-04）：与「看 N 条」同款胶囊，但**不能**再带 margin-left:auto ——
   否则它会被推到最右、把「看 N 条」挤到中间，两颗按钮就散架了。
   两颗贴在一起读作一组动作：先看评价明细，再把这条活复制给运营。 */
.rvp-lnk.rvp-lnk-end{margin-left:0}
.rvp-lnk.rvp-lnk-end:hover{border-color:var(--accent-line);color:var(--text)}
/* 总订单数 chip（2026-11-03 用户："放好评前，能评估商品大概情况"）：
   体量不是好坏 ⇒ 数字用中性色，不参与绿/橙/红那套情绪语义 */
.rvp-vol b{color:var(--text)}

/* ①c 目标缺口 chip「📈 还差 N 条好评」（2026-11-04 用户："商品好评还差一个数据"）：
   夹在 🎯目标 和结论 chip 之间，把「目标 90%」补成「目标 90%、还差 55 条」。
   ★ 底色用三档淡色（和进度条/徽章同一套语义）：绿=已达标、橙=能补、红=缺口大到不现实。
   ★ flex:0 0 auto + nowrap：这行是 nowrap 的单行，chip 不许被压扁或折成两行。 */
.rvp-need{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;white-space:nowrap;
  padding:1px 8px;border-radius:var(--r-pill);font-size:11px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text-2)}
.rvp-need i{font-style:normal;font-size:11px;line-height:1.2}
.rvp-need b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;padding:0 1px}
.rvp-need.ok{background:var(--green-l);border-color:transparent;color:var(--green)}
.rvp-need.warn{background:var(--orange-l);border-color:transparent;color:var(--orange)}
.rvp-need.bad{background:var(--red-l);border-color:transparent;color:var(--red)}

/* ①b 细进度条（第五版）：高 5px 纯红填充 + % 气泡跟随填充边界 + 目标虚线刻度。
   ★ 填充用不透明 var(--red)：42% 半透明的"粉红"用户不认，要纯红。
   ★ % 气泡 left=填充末端 ⇒ 进度推到哪数字跟到哪（用户："不是最前面，是红色填充边界处"）。
   ★ 行高 16px 里垂直居中：条 5px 居中，气泡 ~15px 居中略微撑出上下各 0.5px，可忽略。 */
.rvp-bar{position:relative;height:16px;margin-top:3px;flex:none}
.rvp-bar-track{position:absolute;left:0;right:0;top:50%;height:5px;transform:translateY(-50%);
  border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.rvp-bar-track>i{display:block;height:100%;width:var(--rvp-fill,0%);
  border-radius:var(--r-pill) 0 0 var(--r-pill)}
/* ★ 三档色（2026-11-02 用户："进度条只有 2 种，还有中间态"）：
   直接对齐顶部红绿灯同一套判据 —— 红=要管(换/救)、橙=盯着(先看着/样本少)、绿=放心(正常卖)。
   条和 % 气泡字色都按 verdict 走，跟右侧徽章一个语义，不用学第二套。 */
.rvp-bar.lv-red .rvp-bar-track>i{background:var(--red)}
.rvp-bar.lv-orange .rvp-bar-track>i{background:var(--orange)}
.rvp-bar.lv-green .rvp-bar-track>i{background:var(--green)}
/* 目标刻度：虚线穿出条上下（比条高），跟填充末端区分 —— 实线端=现在，虚线=要到哪 */
.rvp-bar-goal{position:absolute;left:var(--rvp-goal,90%);top:50%;height:11px;width:0;
  transform:translate(-50%,-50%);border-left:2px dashed var(--text-2);opacity:.8}
.rvp-bar-val{position:absolute;left:var(--rvp-fill,0%);top:50%;transform:translate(-50%,-50%);
  font-size:10px;font-weight:700;font-style:normal;line-height:1.3;white-space:nowrap;z-index:1;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:0 5px}
.rvp-bar-val.lv-red{color:var(--red)}.rvp-bar-val.lv-orange{color:var(--orange)}.rvp-bar-val.lv-green{color:var(--green)}

/* ② 结论小徽章：原来占一整行的横幅，压成一枚 chip 塞进图例行 */
.rvp-vchip{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:var(--r-pill);
  font-size:11px;font-weight:700;white-space:nowrap;flex:0 0 auto}
.rvp-vchip b{font-style:normal;font-weight:800;font-size:9px;opacity:.6;letter-spacing:.5px}
.rvp-vchip i{font-style:normal;font-weight:400;font-size:10px;opacity:.85}
.rvp-vchip.bad{background:var(--red-l);color:var(--red)}
.rvp-vchip.warn{background:var(--orange-l);color:var(--orange)}
.rvp-vchip.ok{background:var(--green-l);color:var(--green)}
.rvp-vchip.yel{background:var(--surface-2);color:var(--text-2)}
.rvp-badge{display:inline-block;padding:4px 12px;border-radius:var(--r-pill);font-size:14px;font-weight:700;white-space:nowrap}
.rvp-badge.bad{background:var(--red-l);color:var(--red)}
.rvp-badge.warn{background:var(--orange-l);color:var(--orange)}
.rvp-badge.ok{background:var(--green-l);color:var(--green)}
.rvp-badge.yel{background:var(--surface-2);color:var(--text-2)}

/* ===== 商品评价抽屉 · AI 版（155-C · 2026-11-02 深夜） =====
   用户："这个设计很工业化，用新 AI 时代思维重新设计"。
   三个落点：① 结论先行 —— 顶部「一眼看懂」卡，本地聚合出"大家夸什么/骂什么"，
     不让用户自己读 14 条原始数据；② 噪音折叠 —— 系统默认好评收进列表底部，
     默认不展开；③ 卡片化 + 情绪色条 —— 和商品行/进度条同一套图形语言。
   ★ 判据、数据、回复/申诉写操作全不动，只换皮 + 加摘要。 */
.rvr-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.rvr-title{font-weight:700;font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvr-x{border:0;background:var(--surface-2);color:var(--text-2);width:26px;height:26px;border-radius:999px;
  font-size:16px;line-height:1;cursor:pointer;flex:0 0 auto}
.rvr-x:hover{background:var(--surface-3);color:var(--text)}
.rvr-sub{padding:10px 16px 8px;border-bottom:1px solid var(--line)}
/* ✨ 一眼看懂卡：结论先行 */
.rvr-ai{padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface-2)}
.rvr-ai-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-2)}
.rvr-ai-ico{font-size:14px}
.rvr-ai-n{margin-left:auto;font-weight:400;font-size:11px;color:var(--text-3)}
/* 三色情绪条：和商品行/进度条同一套图形语言 */
.rvr-mix3{display:flex;height:5px;border-radius:999px;overflow:hidden;background:var(--surface-3);margin:8px 0 7px}
.rvr-mix3>i{display:block;height:100%;min-width:2px}
.rvr-mix3>i.g{background:var(--green)}.rvr-mix3>i.m{background:var(--orange)}.rvr-mix3>i.b{background:var(--red)}
.rvr-ai-line{font-size:12.5px;line-height:1.8;color:var(--text-2)}
.rvr-ai-line b{color:var(--text)}
.rvr-ai-line.muted{color:var(--text-3)}
.rvr-ai-chips{margin-left:6px;display:inline-flex;gap:5px;vertical-align:middle;flex-wrap:wrap}
.rvr-chip{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.rvr-chip.g{background:var(--green-l);color:var(--green)}
.rvr-chip.b{background:var(--red-l);color:var(--red)}
/* 筛选 pill：计数内嵌、选中实底，替代蓝链接 tab */
.rvr-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.rvr-pill{border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);border-radius:999px;
  padding:3px 11px;font-size:12px;cursor:pointer}
.rvr-pill i{font-style:normal;opacity:.7;margin-left:4px}
.rvr-pill.on{background:var(--text);border-color:var(--text);color:var(--surface)}
.rvr-pill.on i{opacity:.85}
.rvr-src{margin-top:8px;font-size:11px;color:var(--text-3)}
/* 评价卡片：左侧情绪色条 + emoji，一眼扫出好坏 */
.rvr-body{flex:1;overflow:auto;padding:4px 16px 24px}
.rvr-card{position:relative;margin:8px 0;padding:10px 12px 10px 16px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--surface);overflow:hidden}
.rvr-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--surface-3)}
.rvr-card.rvr-good::before{background:var(--green)}
.rvr-card.rvr-mid::before{background:var(--orange)}
.rvr-card.rvr-bad::before{background:var(--red)}
.rvr-card.is-noise{background:var(--surface-2);opacity:.8}
.rvr-card-top{display:flex;align-items:center;gap:8px;min-width:0}
.rvr-emo{font-size:16px;line-height:1}
.rvr-att{font-size:13px;font-weight:700;white-space:nowrap}
.rvr-stars{font-size:12px;color:var(--orange);letter-spacing:1px;white-space:nowrap}
.rvr-when{margin-left:auto;font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvr-text{margin-top:5px;font-size:13.5px;line-height:1.65;color:var(--text);word-break:break-word}
.rvr-imgs{margin-top:6px}
.rvr-imgs img{width:64px;height:64px;object-fit:cover;border-radius:8px;margin:4px 6px 0 0;cursor:zoom-in}
.rvr-labels{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap}
.rvr-reply{margin-top:7px;padding:7px 10px;background:var(--surface-2);border-radius:var(--r-sm);font-size:12px;line-height:1.6;color:var(--text-2)}
.rvr-reply b{color:var(--text-3);font-weight:600;margin-right:6px}
.rvr-ops{margin-top:8px;display:flex;gap:8px}
.rvr-btn{border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);border-radius:999px;
  padding:2px 12px;font-size:12px;cursor:pointer}
.rvr-btn:hover{background:var(--surface-2);color:var(--text)}
/* 系统默认好评折叠：默认收起，评价列表底部的"噪音抽屉" */
.rvr-noise{margin:12px 0 4px}
.rvr-noise>summary{cursor:pointer;user-select:none;list-style:none;font-size:12px;color:var(--text-3);
  padding:9px 12px;border:1px dashed var(--line-2);border-radius:var(--r)}
.rvr-noise>summary::-webkit-details-marker{display:none}
.rvr-noise>summary:hover{color:var(--text-2)}

/* ③ 缺口对比条：同一把尺子，长短一眼分胜负 */
.rvp-gap{margin-top:7px}
/* ★ 口径标签（2026-11-03）：点明这把尺子量的是差评率还是好评率 */
.rvp-gap-tag{font-size:10px;font-weight:700;color:var(--text-3);margin-bottom:5px;letter-spacing:.02em}
/* ★★ 好评率这笔账（2026-11-03）：换货块里量化"到 80%/90% 要多少努力" */
.rvp-acct{margin:7px 0;padding:8px 10px;border-radius:var(--r);background:var(--surface-2);border:1px dashed var(--line-2)}
.rvp-acct-t{font-size:11px;font-weight:700;color:var(--text-1);margin-bottom:5px}
.rvp-acct-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--text-2);padding:2px 0}
.rvp-acct-row b{color:var(--text-1)}
.rvp-acct-row em{font-style:normal;font-size:10px;color:var(--text-3)}
.rvp-acct-w{font-size:10.5px;color:var(--text-2);margin:6px 0 4px}
.rvp-acct-p{font-size:10.5px;color:var(--text-2);padding:1px 0}
/* ★★ 换货行动块（2026-11-03 双信号）：左侧红条区分"这是选品换货建议"，
   三行分别说清 选品结论 / 能做什么 / 不能做什么。 */
.rvp-gap.rvp-replace{border-left:3px solid var(--red);padding-left:9px}
.rvp-gap.rvp-replace .rvp-note{margin-top:6px}
/* ③b 缺口结论块（2026-11-03 用户："和外层进度条视觉冲突"）：
   两根大条改成并排数字块 —— 缺口是"结论"，不是"趋势"，不该比外层细进度条更显眼。
   ★ 同日追加：中间 VS 徽章点明对峙关系；点击选中高亮（非选中淡化），
     下方说明跟所选块切换（155 的 rvpGapSel）。 */
.rvp-gap2{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch;margin-top:2px}
.rvp-vs{align-self:center;width:30px;height:30px;border-radius:999px;background:var(--surface-3);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--text-3)}
.rvp-stat{padding:12px 12px 10px;border-radius:var(--r);background:var(--surface-2);
  border:1.5px solid var(--line-2);text-align:center;cursor:pointer;
  transition:border-color .15s,opacity .15s,background .15s}
.rvp-stat:not(.sel){opacity:.72}
.rvp-stat.sel,.rvp-stat:hover{border-color:var(--text-3);background:var(--surface-3);opacity:1}
.rvp-stat b{display:block;font-size:26px;font-weight:800;line-height:1.15;color:var(--text);
  font-variant-numeric:tabular-nums}
.rvp-stat b i{font-style:normal;font-size:12px;font-weight:700;margin-left:3px;color:var(--text-3)}
.rvp-stat span{display:block;margin-top:3px;font-size:11px;color:var(--text-3)}
.rvp-stat.ok b{color:var(--green)}
.rvp-stat.bad b{color:var(--red)}
.rvp-gaprow{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;color:var(--text-2)}
.rvp-gaprow i{font-style:normal;flex:0 0 48px}
.rvp-track{flex:1;height:12px;background:var(--surface-3);border-radius:7px;overflow:hidden}
.rvp-track s{display:block;height:100%;border-radius:7px;background:var(--text-3);text-decoration:none}
.rvp-gaprow.bad .rvp-track s{background:var(--red)}
.rvp-gaprow.ok .rvp-track s{background:var(--green)}
.rvp-gaprow b{flex:0 0 62px;text-align:right;font-size:13px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums}
.rvp-note{display:block;margin-top:5px;font-size:12px;font-weight:700}
.rvp-note.bad{color:var(--red)}.rvp-note.ok{color:var(--green)}

/* ④⑤ 订单去向条 / 钱条：两块并排放，省一半高度（一行 20 个商品时差很多） */
.rvp-block{margin-top:6px;min-width:0}
.rvp-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.rvp-2col>.rvp-block{margin-top:0}
@media (max-width:900px){.rvp-2col{grid-template-columns:1fr}}
.rvp-fbar,.rvp-mbar{display:flex;height:13px;border-radius:4px;overflow:hidden;background:var(--surface-3)}
.rvp-fseg,.rvp-mseg{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;
  font-size:10px;font-weight:700;color:#fff}
.rvp-fseg.keep,.rvp-mseg.keep{background:var(--green)}
.rvp-fseg.closed{background:var(--orange)}
.rvp-fseg.unship{background:var(--text-3)}
.rvp-fseg.pend{background:repeating-linear-gradient(45deg,var(--text-3) 0 4px,var(--surface-3) 4px 8px)}
.rvp-mseg.lost{background:var(--red)}
.rvp-fleg{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;font-size:12px;color:var(--text-2)}
.rvp-fleg b{font-size:14px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.rvp-fleg .keep b{color:var(--green)}.rvp-fleg .lost b{color:var(--red)}
.rvp-fleg .unship{color:var(--text-3)}

/* ⑤b 近 N 天下单折线（167 · 2026-11-07）
   一块 = 一行数字 + 一张图 + 三个轴标签 + 一句口径。放在展开详情里（和订单去向条/钱条同一层），
   不塞进收起态的那一行 —— 那一行已经 nowrap 塞了 8 个 chip，再摆图会把好评率挤没。
   ★ 图用 SVG + preserveAspectRatio="none" 横向铺满；描边靠 non-scaling-stroke 保持 1~2px，
     所以拉多宽都不会变成一根肥条。area 用 --accent 的 10% 透明，暗色主题跟着主题变量走。 */
.rvp-trend{margin-top:10px;padding:9px 11px 7px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2)}
.rvp-trend-h{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--text-2)}
.rvp-trend-t{font-weight:700;font-size:12px;color:var(--text)}
.rvp-trend-n{font-size:19px;font-weight:800;color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums}
.rvp-trend-u{font-size:11px;color:var(--text-2);margin-left:-3px}
.rvp-trend-d{color:var(--text-2);font-variant-numeric:tabular-nums}
/* 峰值靠右：右端是"这段最猛的一天"，和左边"整段总量"不抢同一处注意力 */
.rvp-trend-peak{margin-left:auto;color:var(--text-3);font-variant-numeric:tabular-nums}
.rvp-trend-peak.zero{color:var(--orange)}
/* 高度必须和 167 里的 RVP_TREND_H 一致（46）：SVG 是 preserveAspectRatio="none"，
   高宽各自由 CSS 定，不靠 viewBox 比例 —— 所以这里写死 46px。 */
.rvp-trend-svg{display:block;width:100%;height:46px;margin-top:5px;overflow:visible}
.rvp-trend-line{stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.rvp-trend-area{fill:var(--accent);opacity:.10;stroke:none}
.rvp-trend-baseln{stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 3}
.rvp-trend-peakln{stroke:var(--orange);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.rvp-trend-endln{stroke:var(--accent);stroke-width:2}
/* ★ 装饰图形一律不吃鼠标事件（2026-11-07 实测踩到）：折线/面积/基线/峰值虚线 都画在
   透明热区**之后**，SVG 里后画的在上层 ⇒ 鼠标一压到线上，热区就收不到事件，
   悬停读数正好在那天最高的那根虚线上失灵（真机上表现为"点峰值没反应"）。
   ⇒ 除热区外全部 pointer-events:none，热区才算真正铺满整张图。 */
.rvp-trend-svg>path,.rvp-trend-svg>line{pointer-events:none}
.rvp-trend-hit{pointer-events:all;cursor:crosshair}

/* 悬停读数（2026-11-07 用户："鼠标移动到折线图节点。显示具体节点数量"）：
   竖向虚线 + 圆点 + 数字气泡，全部相对 .rvp-trend-plot 定位（plot 只包 SVG，高度 46px，
   所以 167 里用 data-y 给的像素值和这里一一对应）。默认 opacity:0，加 .on 才亮。
   ★ 三个元素都 pointer-events:none：否则气泡自己接住 mousemove，就会出现"滑到气泡上读数消失"的抖动。 */
.rvp-trend-plot{position:relative;margin-top:5px}
.rvp-trend-cross{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--accent);
  opacity:0;pointer-events:none;transition:opacity .08s}
.rvp-trend-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 2px var(--surface);transform:translate(-50%,-50%);
  opacity:0;pointer-events:none;transition:opacity .08s}
.rvp-trend-tip{position:absolute;transform:translate(-50%,-135%);padding:3px 8px;border-radius:6px;
  background:var(--text);color:var(--surface);font-size:11px;font-weight:600;line-height:1.45;
  white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;
  z-index:3;transition:opacity .08s}
/* 点太靠上时气泡翻到点的下方（不然会被图顶裁掉） */
.rvp-trend-tip.below{transform:translate(-50%,35%)}
.rvp-trend-plot.on .rvp-trend-cross,
.rvp-trend-plot.on .rvp-trend-dot,
.rvp-trend-plot.on .rvp-trend-tip{opacity:1}
.rvp-trend-x{display:flex;justify-content:space-between;margin-top:1px;font-size:10px;
  color:var(--text-3);font-variant-numeric:tabular-nums}
.rvp-trend-note{margin-top:4px;font-size:11px;line-height:1.65;color:var(--text-3)}

/* ⑥ 差评原因：图标 + 大数字 */
.rvp-why{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
.rvp-whyc{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line)}
.rvp-whyc i{font-style:normal;font-size:15px}
.rvp-whyc b{font-size:15px;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums}
.rvp-whyc em{font-style:normal;font-size:12px;color:var(--text-2)}

/* 小标签（范围 / 对账一致） */
.rvp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.rvp-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--surface-2);font-size:11.5px;color:var(--text-2);white-space:nowrap}
.rvp-chip.ok{background:var(--green-l);color:var(--green)}
.rvp-chip.warn{background:var(--orange-l);color:var(--orange)}
/* 可点的芯片（复制商品 ID / 取商品链接）：长得就得像能点的 */
.rvp-chip.rvp-cp{cursor:pointer;text-decoration:none;border:1px solid var(--line-2);
  font-family:var(--mono);font-size:11px}
.rvp-chip.rvp-cp:hover{background:var(--surface-3);color:var(--text);border-color:var(--accent-line)}

/* ⑦ 说明折叠：默认收起，点开才有字 */
.rvp-det{margin-top:6px}
.rvp-det>summary{cursor:pointer;user-select:none;font-size:12px;color:var(--text-3);list-style:none}
.rvp-det>summary::-webkit-details-marker{display:none}
.rvp-det>summary:hover{color:var(--text-2)}
.rvp-det>div{margin-top:5px;font-size:12px;line-height:1.85;color:var(--text-3)}

/* ⑧ 详情总折叠：没有独立折叠条了，点整条记录展开/收起（2026-11-02 用户）
   summary 留空并隐藏 ⇒ 不再有一行「▸ 展开看详情」白占地方；open 由列表点击手动切换。
   收起时 details 原生隐藏 body，所以 .rvp-more 自身不该有 margin/border。 */
.rvp-more{margin-top:0}
.rvp-more>summary{display:none}
.rvp-more-body{padding-top:9px}
.rvp-rowarw{display:inline-block;margin-left:6px;font-size:12px;color:var(--text-3);
  transition:transform .15s;line-height:1;vertical-align:middle}
.rp-row.is-open .rvp-rowarw{transform:rotate(90deg)}

/* ⑨ 标题行右侧摆 🆔ID / 🔗链接 / 📅起始日 / 对账 chip（2026-11-02 用户："这也移到记录行内去"）
   标题行右边本来就空着，把它用起来 ⇒ 不新增任何行，也不再在详情里单独摆一行 chip。 */
.rp-titleline{display:flex;align-items:center;gap:10px;min-width:0}
.rp-titleline>.rp-title{flex:1;min-width:0}
.rvp-chips-head{margin-top:0;flex:0 0 auto;gap:6px;flex-wrap:nowrap}
.rvp-chips-head .rvp-chip{font-size:11px;padding:2px 7px}

@media (max-width:720px){
  .rvp-lgrow{gap:8px;flex-wrap:wrap}
  .rp-titleline{flex-wrap:wrap}
  .rvp-chips-head{flex-wrap:wrap}
}

/* ★ 评价触达面板（2026-11-03 巡逻自动化）：好评管理页顶部 */
.rvpc-row{margin:6px 0;padding:6px 0;border-top:1px dashed var(--line-2)}
.rvpc-row:first-of-type{border-top:0}
.rvpc-row>b{font-size:12px;color:var(--text-1)}
.rvpc-row .btn{margin-left:10px}
.rvpc-det{margin-top:4px;font-size:11px;color:var(--text-3)}
.rvpc-det summary{cursor:pointer;color:var(--text-2)}
.rvpc-it{display:flex;gap:8px;padding:3px 0;color:var(--text-2);align-items:baseline}
.rvpc-tag{flex:0 0 auto;font-size:10px;font-weight:700;color:var(--text-3);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:0 6px}

/* ═══════════ 商品级「提分优化」抽屉 v2（2026-11-03 重做·去工业化）═══════════
   设计语言：圆角卡片 + 左侧状态色条 + 大号数字 + 唯一主按钮；不用虚线分割、不用表格框。
   主题：全部吃 CSS 变量（--surface/--text-*/--accent/--red/--orange/--green），暗色自动适配。 */

@keyframes roptFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes roptIn { from { transform: translateX(28px); opacity: .45 } to { transform: none; opacity: 1 } }
@keyframes roptSpin { to { transform: rotate(360deg) } }

/* ═══ 商品级提分优化抽屉（2026-11-03 重做 · AI 审美 / 去工业化）═══ */
.ropt-mask { position: fixed; inset: 0; z-index: 9998; display: flex; justify-content: flex-end;
  background: rgba(12,16,26,.38); backdrop-filter: blur(6px) saturate(1.1); animation: roptFade .22s ease }

.ropt-panel { width: 640px; max-width: 95vw; height: 100%; position: relative;
  background: radial-gradient(900px 380px at 88% -8%, var(--accent-soft) 0%, transparent 60%), var(--surface);
  display: flex; flex-direction: column; border-left: 1px solid var(--line);
  box-shadow: -30px 0 80px -28px rgba(12,16,26,.5); animation: roptIn .3s cubic-bezier(.2,.9,.25,1) }

/* 头部 */
.ropt-hd { display: flex; justify-content: space-between; align-items: flex-start;
  padding: 26px 28px 14px; flex: 0 0 auto }
.ropt-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 800 }
.ropt-title { font-size: 22px; font-weight: 800; margin: 6px 0 0; letter-spacing: -.02em; color: var(--text) }
.ropt-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-2);
  color: var(--text-2); cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center;
  transition: var(--t); flex: 0 0 auto; box-shadow: var(--shadow-1) }
.ropt-x:hover { background: var(--surface-3); color: var(--text); transform: rotate(90deg) }
.ropt-body { flex: 1; overflow-y: auto; padding-bottom: 10px }

/* Hero */
.ropt-hero { display: flex; gap: 22px; align-items: center; margin: 6px 24px 22px; padding: 22px 22px;
  border-radius: 22px; border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 55%); box-shadow: var(--shadow-2) }
.ropt-ring { width: 116px; height: 116px; flex: 0 0 auto; border-radius: 50%; position: relative;
  background: conic-gradient(var(--ring-c, var(--text-3)) calc(var(--p) * 1%), var(--surface-3) 0);
  filter: drop-shadow(0 8px 18px var(--accent-soft)) }
.ropt-ring[data-tone="bad"] { --ring-c: var(--red) }
.ropt-ring[data-tone="warn"] { --ring-c: var(--orange) }
.ropt-ring[data-tone="ok"] { --ring-c: var(--green) }
.ropt-ring-in { position: absolute; inset: 12px; border-radius: 50%; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: inset 0 1px 3px rgba(15,20,32,.06) }
.ropt-ring-in b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--text) }
.ropt-ring-in span { font-size: 10px; color: var(--text-3); letter-spacing: .04em }
.ropt-hero-side { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center }
.ropt-hero-line { display: flex; align-items: center; font-size: 13px; font-weight: 650; color: var(--text-2); line-height: 1.45 }
.ropt-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; flex: 0 0 auto }
.ropt-dot.bad { background: var(--red) }
.ropt-dot.warn { background: var(--orange) }
.ropt-dot.ok { background: var(--green) }
.ropt-mini { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; margin-top: 14px }
.ropt-mini div { text-align: center; padding: 9px 3px 7px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--line); min-width: 0; box-shadow: var(--shadow-1) }
.ropt-mini b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--text) }
.ropt-mini span { font-size: 10px; color: var(--text-3); display: block; margin-top: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis }
.ropt-hero-note { font-size: 11px; color: var(--text-3); margin-top: 12px; line-height: 1.5 }

/* 杠杆卡 */
.ropt-levers { display: flex; flex-direction: column; gap: 14px; padding: 0 24px }
.ropt-card { position: relative; border-radius: 18px; border: 1px solid var(--line);
  background: var(--surface); padding: 16px 18px 15px 20px; box-shadow: var(--shadow-2);
  overflow: hidden; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s }
.ropt-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3) }
.ropt-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--text-3); opacity: .35 }
.ropt-card[data-tone="bad"]::before { background: linear-gradient(var(--red), #ff7a70); opacity: 1 }
.ropt-card[data-tone="warn"]::before { background: linear-gradient(var(--orange), #f0b23f); opacity: 1 }
.ropt-card[data-tone="ok"]::before { background: linear-gradient(var(--green), #3ddc9a); opacity: 1 }
.ropt-card-hd { display: flex; align-items: flex-start; gap: 11px }
.ropt-idx { width: 22px; height: 22px; border-radius: 8px; background: var(--accent-soft);
  color: var(--accent); font-size: 11px; font-weight: 800; display: grid; place-items: center;
  flex: 0 0 auto; margin-top: 1px }
.ropt-card-t { flex: 1; min-width: 0 }
.ropt-card-t b { font-size: 14.5px; font-weight: 750; display: block; color: var(--text); letter-spacing: -.005em }
.ropt-card-t i { font-style: normal; font-size: 11.5px; color: var(--text-3); display: block; margin-top: 4px; line-height: 1.55 }
.ropt-badge { font-size: 11px; font-weight: 750; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2); white-space: nowrap; flex: 0 0 auto }
.ropt-badge.ok { background: var(--green-l); color: var(--green) }
.ropt-badge.warn { background: var(--orange-l); color: var(--orange) }
.ropt-badge.bad { background: var(--red-l); color: var(--red) }

/* 数据行 */
.ropt-kv { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px }
.ropt-kv div { display: flex; align-items: baseline; gap: 6px; min-width: 0 }
.ropt-kv b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1 }
.ropt-kv span { font-size: 11px; color: var(--text-3); white-space: nowrap }

/* 按钮 */
.ropt-act { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap }
.ropt-btn { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2);
  font-size: 12.5px; font-weight: 700; padding: 8px 15px; border-radius: 12px; cursor: pointer;
  transition: var(--t); font-family: inherit }
.ropt-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--text-3) }
.ropt-btn.primary { background: linear-gradient(135deg, var(--accent), #6d74f0); border-color: transparent;
  color: #fff; box-shadow: 0 8px 20px -8px var(--accent-line) }
.ropt-btn.primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px var(--accent-line) }
.ropt-btn:disabled { opacity: .42; cursor: not-allowed }

/* 说明与清单 */
.ropt-hint { font-size: 11.5px; color: var(--text-3); line-height: 1.65; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--line) }
.ropt-hint strong { color: var(--text-2); font-weight: 700 }
.ropt-hint code { font-family: var(--mono); font-size: 10.5px; background: var(--surface-3); padding: 1px 6px; border-radius: 5px }
/* 名单同步时间（2026-11-03：评价有礼"在不在活动内"依赖 prize-sync 的缓存，得让人看见它多久前同步的） */
.ropt-sync { margin-top: 6px; font-size: 11px; color: var(--text-3); opacity: .85 }
.ropt-sync b { color: var(--orange); font-weight: 750 }

/* ============================================================
   评价有礼 · 大状态横幅（2026-11-03 用户要求"把在不在活动突出放大，一眼就明白"）
   ------------------------------------------------------------
   原来这条状态只是 hint 里一句小字 + 一个 10px 小徽标，扫一眼根本分不出
   "在活动里"和"不在活动里"。现在：底色 + 大字 + 图标 + 就地动作按钮。
   ============================================================ */
.prize-banner { display: flex; align-items: center; gap: 13px; margin-top: 13px;
  padding: 13px 15px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface-2) }
.prize-banner.in { background: var(--green-l); border-color: var(--green) }
.prize-banner.out { background: var(--red-l); border-color: var(--red) }
.prize-banner.unknown { background: var(--surface-3); border-color: var(--line-2) }
.prize-banner .pb-icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900;
  color: #fff; background: var(--text-3) }
.prize-banner.in .pb-icon { background: var(--green) }
.prize-banner.out .pb-icon { background: var(--red) }
.prize-banner .pb-main { flex: 1 1 auto; min-width: 0 }
.prize-banner .pb-title { font-size: 16.5px; font-weight: 850; letter-spacing: -.01em; color: var(--text);
  line-height: 1.25 }
.prize-banner.in .pb-title { color: var(--green) }
.prize-banner.out .pb-title { color: var(--red) }
.prize-banner .pb-sub { font-size: 11.5px; color: var(--text-2); margin-top: 4px; line-height: 1.5 }
.prize-banner .ropt-btn { flex: 0 0 auto; white-space: nowrap }
.ropt-btn.danger { background: var(--red-l); color: var(--red); border-color: transparent; font-weight: 800 }
.ropt-btn.danger:hover:not(:disabled) { background: var(--red); color: #fff }

/* 邀评本次进度（2026-11-03 新增：后台逐单邀评时要看得见"跑到第几单"） */
.ropt-prog { margin-top: 12px }
.ropt-prog-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden }
.ropt-prog-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent);
  transition: width .4s ease }
.ropt-prog-txt { font-size: 11.5px; color: var(--text-3); margin-top: 7px; line-height: 1.6 }

/* 触达分级图例：把 P0/P1/P2 编码翻成买家原话（2026-11-03 用户反馈"太抽象"） */
.ropt-legend { display: grid; gap: 7px }
.ropt-legend-hd { font-size: 11px; font-weight: 750; color: var(--text-2) }
.ropt-legend-row { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; line-height: 1.6 }
.ropt-legend-row b { font-weight: 750; color: var(--text); white-space: nowrap }
.ropt-legend-row span { color: var(--text-3) }
.ropt-ldot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; align-self: center; background: var(--text-3) }
.ropt-ldot.bad { background: var(--red) }
.ropt-ldot.warn { background: var(--orange) }
.ropt-ldot.idle { background: var(--text-3) }
.ropt-legend-foot { margin-top: 3px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--text-3) }
.ropt-det { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line) }
.ropt-det summary { font-size: 12px; color: var(--accent); cursor: pointer; font-weight: 700; list-style: none }
.ropt-det summary::-webkit-details-marker { display: none }
.ropt-det summary::before { content: "▸ "; display: inline-block; transition: var(--t) }
.ropt-det[open] summary::before { content: "▾ " }
.ropt-li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line);
  font-size: 11.5px }
.ropt-li:last-child { border-bottom: 0 }
.ropt-chip { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 7px; flex: 0 0 auto }
.ropt-chip.bad { background: var(--red-l); color: var(--red) }
.ropt-chip.warn { background: var(--orange-l); color: var(--orange) }
.ropt-li-t { flex: 1; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ropt-li em { font-style: normal; font-size: 10px; color: var(--text-3); flex: 0 0 auto }
.ropt-rep-list { margin-top: 6px }
.ropt-rep-list .ropt-li { align-items: center; flex-wrap: wrap; padding: 9px 0 }
.ropt-rep-list .ropt-li .ropt-btn.sm { margin-left: auto; padding: 4px 11px; font-size: 11px; font-weight: 800; border-radius: 8px; flex: 0 0 auto }
.ropt-excluded { margin-top: 11px; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; font-size: 11.5px; color: var(--text-3); line-height: 1.6 }
.ropt-excluded b { color: var(--text-2); font-weight: 800 }

/* 段标题 / 趋势 / 日志 */
.ropt-sec-t { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 26px 24px 12px; display: flex; align-items: center; gap: 8px }
.ropt-sec-t::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent) }
.ropt-trend { display: flex; gap: 7px; align-items: flex-end; padding: 0 24px; min-height: 84px }
.ropt-trend-c { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 4px }
.ropt-trend-c i { width: 100%; max-width: 24px; border-radius: 6px 6px 0 0; background: var(--surface-3); display: block }
.ropt-trend-c i.ok { background: linear-gradient(var(--green), #3ddc9a) }
.ropt-trend-c i.warn { background: linear-gradient(var(--orange), #f0b23f) }
.ropt-trend-c i.bad { background: linear-gradient(var(--red), #ff7a70) }
.ropt-trend-c em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--text-2) }
.ropt-trend-c s { text-decoration: none; font-size: 9px; color: var(--text-3); white-space: nowrap }
.ropt-log { padding: 0 24px; display: flex; flex-direction: column; gap: 12px }
.ropt-log-i { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line) }
.ropt-log-i s { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 5px;
  flex: 0 0 auto; text-decoration: none }
.ropt-log-i s.bad { background: var(--orange) }
.ropt-log-i b { font-size: 12px; font-weight: 500; color: var(--text-2); display: block; line-height: 1.55 }
.ropt-log-i em { font-style: normal; font-size: 10px; color: var(--text-3) }
.ropt-empty { font-size: 12px; color: var(--text-3); padding: 4px 24px 8px; line-height: 1.7 }
.ropt-foot { margin: 28px 24px 28px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--text-3); text-align: center }

/* 加载态 */
.ropt-loading { display: flex; align-items: center; justify-content: center; gap: 11px; height: 100%;
  font-size: 13px; color: var(--text-3) }
.ropt-spin { width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--accent);
  border-radius: 50%; animation: roptSpin .7s linear infinite; flex: 0 0 auto }

/* 卡片上的「提分」小入口（行内，不占新行） */
.btn.rvp-opt-btn { margin-left: 8px; padding: 2px 9px; font-size: 11px; font-weight: 700; line-height: 1.6;
  vertical-align: middle; border-radius: 8px; background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line) }
.btn.rvp-opt-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent) }

/* 2026-11-07 售后品退页主入口：两个客服指引合一的双 tab 页。
   工具栏其余按钮都是弱化的 .ghost，这一个用实心主色（.ghost.primary 已给蓝底白字），
   补字重 / 内距 / 阴影，让客服一眼看得到。hover 显式写全，避免被 .ghost:hover 抢色。 */
.as-hero-cta{font-weight:700;padding:8px 16px;letter-spacing:.2px;box-shadow:0 8px 18px -10px var(--accent)}
.as-hero-cta:hover{background:var(--accent-h);border-color:var(--accent-h);color:#fff;box-shadow:0 10px 22px -10px var(--accent)}