/* ============================================================
   昆明歌音 CRM1107 · 设计系统 v2
   浅色专业商务风 · 零第三方依赖 · 系统字体栈 · 断网可运行
   数值唯一源：UI优化/Phase1_视觉设计语言.md v1.1
   新增 class 唯一源：UI优化/Phase2_体验与信息架构规范.md §9.1
   ============================================================ */

/* ===== 批 1 · Token 层 ===== */
:root {
  /* --- 中性色 12 级 --- */
  --n-0:#FFFFFF;  --n-25:#FCFDFE; --n-50:#F8FAFC;  --n-100:#F1F4F7;
  --n-200:#E8ECF1;--n-300:#D8DEE6;--n-400:#A2AAB8;--n-500:#6B7688;
  --n-600:#4A5568;--n-700:#2E3849;--n-800:#1A2233;--n-900:#0F1115;
  /* 旧名兼容别名（不可删；中性别名不参与主题切换，可安全用 var()） */
  --ink-0:var(--n-900); --ink-1:var(--n-700); --ink-2:var(--n-600);
  --ink-3:var(--n-500); --ink-4:var(--n-400);
  --line:var(--n-200); --bg:var(--n-50); --card:var(--n-0); --field:var(--n-100);
  --line-strong:var(--n-300); --bg-sunken:var(--n-100);

  /* --- 原始品牌色阶（固定值，供语义类 / 登录页使用） --- */
  --em-50:#ECFBF5; --em-100:#D3F5E8; --em-200:#A6EBD3;
  --em-500:#00C896; --em-600:#0B7A5E; --em-700:#075E48;
  --bl-50:#EFF5FF;  --bl-100:#DBE8FE;  --bl-200:#BFD4FE;
  --bl-500:#3B82F6; --bl-600:#1D4ED8; --bl-700:#173FA8;
  /* 旧品牌别名（不可删；批 2 归一后成为无引用兼容定义） */
  --emerald:#00C896; --emerald-deep:#0B7A5E; --emerald-soft:#ECFBF5;
  --blue:#3B82F6;    --blue-deep:#1D4ED8;    --blue-soft:#EFF5FF;
  --amber:#F59E0B;   --amber-soft:#FFFBEB;   --red:#EF4444; --red-soft:#FEF2F2;

  /* --- 语义色（业务状态，不随主题切换） --- */
  --success-50:#ECFDF5; --success-500:#10B981; --success-700:#047857;
  --warning-50:#FFFBEB; --warning-500:#F59E0B; --warning-700:#B45309;
  --danger-50:#FEF2F2;  --danger-500:#EF4444;  --danger-700:#B91C1C;
  --info-50:#EFF6FF;    --info-500:#0284C7;    --info-700:#075985;

  /* --- 抽象品牌层：商户端默认（组件唯一引用对象，一律具体 hex） --- */
  --brand-50:#ECFBF5; --brand-100:#D3F5E8; --brand-200:#A6EBD3;
  --brand-500:#00C896; --brand-600:#0B7A5E; --brand-700:#075E48;
  --brand-soft:#ECFBF5; --brand-soft-hover:#D3F5E8; --brand-border:#A6EBD3;
  --brand-accent:#00C896; --brand:#0B7A5E; --brand-text:#075E48;
  --brand-on:#FFFFFF; --brand-ring:rgba(11,122,94,.18);
  --sidebar-tint:#F6FBF9; --sidebar-edge:#DCEFE7;
  /* 纪律 4：值里含品牌变量的派生 token 必须在两个主题块各写一份具体 hex */
  --bd-brand:1px solid #A6EBD3;
  --focus-ring:0 0 0 2px #FFFFFF, 0 0 0 4px #0B7A5E;
  --focus-ring-sm:0 0 0 2px #0B7A5E;

  /* --- 字体（单一主栈；无 @font-face / 无外部字体） --- */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",
              "PingFang SC","Hiragino Sans GB","Microsoft YaHei",
              "Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --font-zh:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",
            "Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Consolas","Liberation Mono",monospace;
  --font:var(--font-sans); --mono:var(--font-mono); --font-num:var(--font-sans);

  /* --- 字阶 9 级 --- */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px;
  --fs-18:18px; --fs-20:20px; --fs-26:26px; --fs-30:30px;
  /* --- 间距 4px 基准 1-10 --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;
  /* --- 圆角 4 级 + 兼容别名 --- */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --r-btn:var(--r-sm); --r-card:var(--r-md);
  /* --- 阴影 4 级 + 兼容别名 --- */
  --sh-1:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sh-2:0 2px 4px rgba(16,24,40,.05), 0 6px 16px rgba(16,24,40,.07);
  --sh-3:0 8px 24px rgba(16,24,40,.10), 0 24px 56px rgba(16,24,40,.14);
  --sh-4:0 16px 40px rgba(16,24,40,.18), 0 4px 12px rgba(16,24,40,.10);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.60);
  --shadow:var(--sh-1); --shadow-lg:var(--sh-3);
  /* --- 边框（中性色派生，不参与主题切换，可安全用 var()） --- */
  --bd:1px solid var(--n-200); --bd-strong:1px solid var(--n-300);
  --bd-dashed:1px dashed var(--n-300);
  /* --- 动效 --- */
  --dur-fast:120ms; --dur-base:160ms; --dur-slow:240ms;
  --ease:cubic-bezier(.2,.7,.3,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  /* --- 布局（保留原值） --- */
  --sidebar-w:240px; --topbar-h:64px;
  /* --- z-index 令牌（数值不得重排） --- */
  --z-modal-foot:10; --z-sidebar:20; --z-topbar:30;
  --z-scrim:390; --z-dropdown:400;
  --z-overlay:1000; --z-overlay-stack:1200; --z-toast:1400; --z-opp-ghost:9999;
}

/* 运管平台：父级变量重定义，让 .main 一起继承（:has() 主方案 + .theme-ops 兜底） */
.app:has(.sidebar.ops), .app.theme-ops {
  /* 主题块内一律具体 hex，禁止 var() 别名（纪律 1） */
  --brand-50:#EFF5FF; --brand-100:#DBE8FE; --brand-200:#BFD4FE;
  --brand-500:#3B82F6; --brand-600:#1D4ED8; --brand-700:#173FA8;
  --brand-soft:#EFF5FF; --brand-soft-hover:#DBE8FE; --brand-border:#BFD4FE;
  --brand-accent:#3B82F6; --brand:#1D4ED8; --brand-text:#173FA8;
  --brand-on:#FFFFFF; --brand-ring:rgba(29,78,216,.18);
  --sidebar-tint:#F5F8FF; --sidebar-edge:#DCE7FB;
  /* 纪律 4：派生 token 成对重定义，否则运管端会继承 :root 已求值的商户端绿环 */
  --bd-brand:1px solid #BFD4FE;
  --focus-ring:0 0 0 2px #FFFFFF, 0 0 0 4px #1D4ED8;
  --focus-ring-sm:0 0 0 2px #1D4ED8;
}

/* ===== 批 2 · 品牌色归一基线 =====
   本节逐条保留全部既有选择器名，只把品牌引用归一到 --brand-*、语义色固定、
   修 8 处裸 var(--brand)、收敛 transition:all、限定 .etab 作用域、归一硬编码 hex。
   组件「视觉重定义」在批 3 以追加覆盖层落地。 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs-14);
  color: var(--n-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: var(--fs-14); }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ 应用外壳 ============ */
.app { display: flex; height: 100vh; overflow: hidden; }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.content { flex: 1; overflow-y: auto; padding: 24px; }
.content h1.page-title { font-size: var(--fs-20); font-weight: 700; color: var(--n-900); }
.content .page-sub { font-size: var(--fs-13); color: var(--n-500); margin-top: 2px; }

/* ============ 侧边栏 ============ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: #fff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.brand .logo { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); box-shadow: var(--sh-inset); }
.brand .logo svg { display: block; }
.brand .name { font-size: 15px; font-weight: 700; color: var(--ink-0); }
.brand .tag { font-size: 11px; color: var(--n-500); }

.nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.nav-sec { font-size: 11px; color: var(--n-500); padding: 16px 10px 6px; letter-spacing: .5px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-btn);
  color: var(--ink-2); font-weight: 500; cursor: pointer;
  margin-bottom: 2px; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item:hover { background: var(--bg); }
.nav-item .ico { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.nav-item.active { background: var(--brand-50); color: var(--brand-700); }
.nav-item.active .dot { background: var(--brand-600); }
.sidebar.ops .nav-item.active { background: var(--brand-soft); color: var(--brand-700); }
.sidebar.ops .nav-item.active .dot { background: var(--brand-600); }

.sidebar-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.sidebar-foot .who { flex: 1; min-width: 0; }
.sidebar-foot .who .n { font-size: 13px; font-weight: 600; color: var(--ink-0); }
.sidebar-foot .who .r { font-size: 11px; color: var(--n-500); }
.sidebar-foot .sf-logout {
  margin-left: auto;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2, #64748b);
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s;
}
.sidebar-foot .sf-logout:hover { color: var(--danger-700); background: var(--danger-50, #fef2f2); border-color: var(--danger-200, #fecaca); }

/* ============ 顶栏 ============ */
.topbar {
  height: var(--topbar-h); background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
.topbar .t-title { font-size: 17px; font-weight: 700; color: var(--ink-0); }
.topbar .t-sub { font-size: 12px; color: var(--n-500); }
.topbar .t-actions { display: flex; align-items: center; gap: 12px; }
.t-search { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: var(--r-btn); padding: 8px 12px; color: var(--n-500); font-size: 13px; min-width: 200px; }

/* ============ 统计卡 ============ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { background: var(--card); border-radius: var(--r-card); padding: 18px; box-shadow: var(--shadow); }
.stat-card .s-label { font-size: 12px; color: var(--n-500); }
.stat-card .s-value { font-size: 26px; font-weight: 700; color: var(--ink-0); margin: 4px 0; font-variant-numeric: tabular-nums; }
.stat-card .s-note { font-size: 12px; color: var(--n-500); }
.stat-card .s-value.hl-emerald, .stat-card .s-value.hl-blue { color: var(--brand-700); }
.stat-card .s-value.hl-amber { color: var(--warning-700); }
.stat-card .s-value.hl-red { color: var(--danger-700); }

/* ============ 卡片容器 ============ */
.card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-head .c-title { font-size: 15px; font-weight: 700; color: var(--ink-0); }
.card-body { padding: 20px; }
.card-body.pad-0 { padding: 0; }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-btn); font-size: 13px; font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); white-space: nowrap;
}
.btn:hover { opacity: 1; }
.btn-primary, .btn-primary-blue { background: var(--brand-600); color: #fff; }
.btn-ghost { background: var(--field); color: var(--ink-2); }
.btn-outline { background: #fff; color: var(--ink-2); border: 1px solid var(--line); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; }

/* ============ 胶囊 / 徽标 ============ */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.pill .p-dot { width: 6px; height: 6px; border-radius: 50%; }
.pill-emerald { background: var(--success-50); color: var(--success-700); }
.pill-emerald .p-dot { background: var(--success-500); }
.pill-blue { background: var(--info-50); color: var(--info-700); }
.pill-blue .p-dot { background: var(--info-500); }
.pill-amber { background: var(--warning-50); color: var(--warning-700); }
.pill-amber .p-dot { background: var(--warning-500); }
.pill-red { background: var(--danger-50); color: var(--danger-700); }
.pill-red .p-dot { background: var(--danger-500); }
.pill-gray { background: var(--field); color: var(--ink-2); }
.pill-gray .p-dot { background: var(--ink-4); }

/* 标签筛选 */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
  padding: 6px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500;
  background: #fff; color: var(--ink-2); border: 1px solid var(--line); cursor: pointer;
}
.chip.active, .chip.active-blue { background: var(--brand-600); color: var(--brand-on); border-color: var(--brand-600); }

/* ============ 表格 ============ */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 600; color: var(--n-500); font-size: 12px; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink-1); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { cursor: pointer; transition: background .1s; }
.tbl tbody tr:hover { background: var(--brand-50); }
.tbl .num { font-variant-numeric: tabular-nums; }
.tbl .cell-name { font-weight: 600; color: var(--ink-0); }
.tbl .cell-sub { font-size: 12px; color: var(--n-500); }

/* ============ 输入框 ============ */
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.input {
  display: flex; align-items: center; min-height: 40px; padding: 0 12px;
  background: var(--field); border-radius: var(--r-btn); width: 100%;
}
.input input, .input textarea, .input select {
  border: none; background: transparent; outline: none; width: 100%; color: var(--ink-0); font-size: 13px;
}
.input textarea { padding: 10px 0; resize: none; line-height: 1.5; }
.input .ph { color: var(--ink-4); }
.input.input-white { background: #fff; border: 1px solid var(--line); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }

/* 选项组（分段选择器） */
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg .seg-item {
  padding: 9px 16px; border-radius: var(--r-btn); font-size: 13px; font-weight: 500;
  background: var(--field); color: var(--ink-2); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.seg .seg-item.on, .seg .seg-item.on-blue { background: var(--brand-600); color: #fff; }

/* 提示框 */
.hint { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-btn); font-size: 12px; margin-bottom: 16px; }
.hint .h-title { font-weight: 700; font-size: 12px; }
.hint-emerald { background: var(--success-50); color: var(--success-700); }
.hint-blue { background: var(--info-50); color: var(--info-700); }
.hint-amber { background: var(--warning-50); color: var(--warning-700); }

/* ============ 弹窗 ============ */
.overlay {
  position: fixed; inset: 0; background: rgba(15,23,41,.42);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  padding: 24px; animation: fade var(--dur-base) var(--ease-out);
}
/* 叠层弹窗（素材库选图叠加在文章/成员编辑弹窗之上）：层级高于普通弹窗 */
.overlay.ov-stack { z-index: 1200; background: rgba(15,23,41,.52); }
.modal {
  background: #fff; border-radius: var(--r-card); width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto; padding: 24px; box-shadow: var(--shadow-lg);
  animation: pop var(--dur-slow) var(--ease-out);
}
.modal.wide { max-width: 620px; }
.modal.xl { max-width: 960px; }

/* 添加产品弹窗：两栏大布局（左：公共产品库选用 / 从商品库选；右：基本信息表单） */
.add-sc-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 22px; align-items: start; }
.add-sc-left { min-width: 0; }
.add-sc-left .lib-list { margin-bottom: 14px; max-height: 44vh; }
.add-sc-right { min-width: 0; }
@media (max-width: 820px) { .add-sc-grid { grid-template-columns: 1fr; } }

.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-head .m-title { font-size: 16px; font-weight: 700; color: var(--ink-0); }
.modal-close { font-size: 22px; color: var(--ink-4); line-height: 1; cursor: pointer; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-sec-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-0); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.modal-sec-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* ============ 登录页（layout:false，无 .app 外壳，显式渐变保留） ============ */
.login { display: flex; height: 100vh; }
.login-brand {
  flex: 1.1; display: flex; flex-direction: column; justify-content: center;
  padding: 64px; color: #fff; position: relative; overflow: hidden;
}
.login-brand.grad-emerald { background: linear-gradient(135deg, #00C896, #0B7A5E); }
.login-brand.grad-blue { background: linear-gradient(135deg, #1D4ED8, #3B82F6); }
.login-brand .lb-logo { font-size: 30px; font-weight: 800; letter-spacing: 1px; }
.login-brand .lb-slogan { font-size: 15px; opacity: .9; margin-top: 16px; }
.login-brand .lb-copy { position: absolute; bottom: 32px; font-size: 12px; opacity: .65; }
.login-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px; }
.login-card { width: 100%; max-width: 360px; }
.login-card .lc-title { font-size: 22px; font-weight: 700; color: var(--ink-0); }
.login-card .lc-sub { font-size: 13px; color: var(--n-500); margin: 6px 0 28px; }
.login-error { font-size: 12px; color: var(--danger-700); background: var(--danger-50); padding: 8px 12px; border-radius: var(--r-btn); margin-bottom: 12px; }
/* 登录页功能要点：信息陈列，不用宣传语；竖线 + 标题 + 说明，克制留白 */
.login-brand .lb-feats { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; max-width: 440px; }
.login-brand .lb-feats li { padding-left: 16px; border-left: 2px solid rgba(255,255,255,.38); display: flex; flex-direction: column; gap: 3px; }
.login-brand .lb-feats b { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.login-brand .lb-feats span { font-size: 12.5px; line-height: 1.6; opacity: .9; }

/* ============ 业务逻辑总览 ============ */
.flow-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flow-step { background: #fff; border-radius: var(--r-card); padding: 14px; width: 168px; box-shadow: var(--shadow); }
.flow-step .fs-num { font-size: 12px; font-weight: 700; color: var(--brand-600); }
.flow-step .fs-name { font-size: 14px; font-weight: 700; color: var(--ink-0); margin: 2px 0; }
.flow-step .fs-desc { font-size: 11px; color: var(--n-500); }
.flow-arrow { font-size: 16px; color: var(--ink-4); }
.compare-row { display: flex; gap: 16px; }
.compare-col { flex: 1; background: #fff; border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow); }
.compare-col .cc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.compare-col .cc-dot { width: 10px; height: 10px; border-radius: 50%; }
.compare-col .cc-title { font-size: 14px; font-weight: 700; color: var(--ink-0); }
.compare-col .cc-count { font-size: 12px; color: var(--n-500); margin-left: auto; }
.compare-col .cc-rule { font-size: 13px; color: var(--ink-1); padding: 3px 0; }

/* 名片预览（后台演示卡：与品牌同源，不再写死蓝） */
.ecard-preview {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); color: #fff;
  border-radius: var(--r-card); padding: 24px; min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.ecard-preview .ep-name { font-size: 22px; font-weight: 700; }
.ecard-preview .ep-role { font-size: 13px; opacity: .85; }
.ecard-preview .ep-company { font-size: 13px; opacity: .7; margin-top: 4px; }
.ecard-preview .ep-contact { font-size: 12px; opacity: .85; margin-top: 16px; line-height: 1.8; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two-col-34 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
@media (max-width: 900px) {
  .two-col, .two-col-34 { grid-template-columns: 1fr; }
  /* 批 5：统计卡 2 列 / chips 换行 / etabs 横滚 / 弹窗不超视口（断点值 900 不变） */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips { flex-wrap: wrap; }
  .etabs.is-scrollable { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
  .modal { max-width: calc(100vw - 32px); }
}

.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-16 { margin-bottom: 16px; }
.muted { color: var(--n-500); }
.empty { text-align: center; color: var(--n-500); padding: 48px 0; }

/* ============ 电子名片 · 子 Tab =====
   所有 .etab 视觉规则限定 .etabs 作用域（Phase1 v1.1 §5.6）：
   让 .etab 挂到运管 .btn 上时退化为纯语义标记，不再与 .btn-sm/.btn-primary-blue 打特异性架 */
.etabs { display: flex; gap: 4px; margin-bottom: 16px; background: #fff; padding: 5px; border-radius: 10px; box-shadow: var(--shadow); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.etabs .etab { padding: 8px 16px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.etabs .etab:hover { background: var(--n-100); color: var(--n-900); }
.etabs .etab.on { background: var(--brand-50); color: var(--brand-700); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand-600); }

/* ============ 电子名片 · C 端名片预览增强 ============ */
.ecard-preview .ep-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ecard-preview .ep-logo { font-size: 14px; font-weight: 700; letter-spacing: 1px; background: rgba(255,255,255,.16); padding: 6px 12px; border-radius: 8px; }
.ecard-preview .ep-badge { font-size: 11px; background: #C6A15B; color: #fff; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.ecard-preview .ep-person { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ecard-preview .ep-avatar { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex-shrink: 0; }
.ecard-preview .ep-slogan { font-size: 13px; opacity: .92; background: rgba(255,255,255,.1); padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; }
.ecard-preview .ep-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12px; opacity: .9; margin: 0 0 14px; line-height: 1.8; }
.ecard-preview .ep-prods { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ecard-preview .ep-prod { font-size: 11px; background: rgba(255,255,255,.14); padding: 4px 10px; border-radius: 6px; }
.ecard-preview .ep-more { font-size: 11px; opacity: .7; padding: 4px 2px; }
.ecard-preview .ep-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ecard-preview .ep-act { font-size: 12px; padding: 7px 12px; border-radius: 7px; background: rgba(255,255,255,.14); color: #fff; font-weight: 500; }
.ecard-preview .ep-act-primary { background: #C6A15B; }

/* 组织名片迷你卡 */
.ecard-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ecard-mini { border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-align: center; background: var(--bg); }
.ecard-mini .em-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto 8px; }
.ecard-mini .em-name { font-size: 13px; font-weight: 600; color: var(--ink-0); }
.ecard-mini .em-role { font-size: 11px; color: var(--n-500); margin: 2px 0 6px; }
.ecard-mini .em-link { font-size: 10px; color: var(--n-500); font-family: var(--mono); }
.ecard-mini-add { display: flex; align-items: center; justify-content: center; color: var(--brand-700); font-size: 13px; font-weight: 500; border-style: dashed; cursor: pointer; min-height: 108px; }

/* 排行条 / 兴趣热度条 */
.rank-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rank-row:last-child { margin-bottom: 0; }
.rank-name { width: 120px; font-size: 12px; color: var(--ink-2); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-bar { flex: 1; height: 8px; background: var(--field); border-radius: 999px; overflow: hidden; }
.rank-fill { height: 100%; background: linear-gradient(90deg, var(--brand-500), var(--brand-600)); border-radius: 999px; }
.rank-fill.rank-amber { background: var(--warning-500); }
.rank-val { width: 92px; font-size: 12px; color: var(--n-500); text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* 种草文章演示卡 */
.ecard-post-demo { flex: 1 1 260px; min-width: 200px; max-width: 320px; background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); color: #fff; border-radius: 10px; padding: 18px; font-size: 14px; font-weight: 600; line-height: 1.6; }

/* 素材库 */
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mat-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--bg); }
.mat-thumb { height: 64px; border-radius: 8px; background: linear-gradient(135deg, var(--brand-50), var(--n-100)); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--brand-600); font-weight: 700; margin-bottom: 10px; }
.mat-name { font-size: 12px; font-weight: 600; color: var(--ink-0); line-height: 1.4; margin-bottom: 4px; }
.mat-meta { font-size: 11px; color: var(--n-500); }

/* ============ 电子名片 · C 端真实名片预览（业务局部色，绝不动） ============ */
.phone-mock {
  --brand: #13329B;                                  /* 品牌主色，由 JS 按 company.brandColor 内联覆盖 */
  --brand-soft: color-mix(in srgb, var(--brand) 8%, #fff);
  --brand-line: color-mix(in srgb, var(--brand) 22%, #fff);
  width: 360px; max-width: 100%; margin: 0 auto;
  background: #F6F7F9; border-radius: 24px; overflow: hidden;
  box-shadow: 0 12px 44px rgba(15,23,41,.20);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #0F1729; line-height: 1.6; text-align: left;
}
.phone-mock .ec-in { padding-bottom: 6px; }
.ec-hero { position: relative; overflow: hidden; color: #0F1729; background: #fff; padding: 0 18px 20px; border-bottom: 1px solid #E9ECF1; }
.ec-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 0;
  background: linear-gradient(180deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 66%, #fff) 30%, color-mix(in srgb, var(--brand) 26%, #fff) 60%, rgba(255,255,255,0) 100%);
}
.ec-hero-in { position: relative; z-index: 1; padding-top: 40px; }
.ec-head-top { display: flex; align-items: center; gap: 14px; }
.ec-avatar { width: 78px; height: 78px; border-radius: 18px; flex-shrink: 0; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(15,23,41,.08); border: 1px solid #E9ECF1; color: var(--brand); font-size: 30px; font-weight: 700; letter-spacing: 1px; }
.ec-avatar.has-img img, .wx-avatar.has-img img, .ava-prev.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-avatar.has-img { background: #F1F4F9; }
.ava-pick { display: flex; align-items: center; gap: 12px; }
.ava-prev { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; overflow: hidden; flex-shrink: 0; }
.ava-btns { display: flex; flex-direction: column; gap: 6px; }
.lib-upt { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lib-upt label { display: inline-flex; align-items: center; cursor: pointer; }
.ec-wordmark { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--brand); }
.ec-wordmark b { font-size: 30px; font-weight: 700; letter-spacing: 1px; line-height: 1; }
.ec-wordmark i { font-style: normal; font-size: 9px; letter-spacing: 2px; color: var(--brand); font-weight: 600; opacity: .7; }
.ec-who { min-width: 0; }
.ec-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-name { font-size: 24px; font-weight: 700; letter-spacing: .5px; line-height: 1.2; }
.ec-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--brand); border: 1px solid var(--brand-line); border-radius: 999px; padding: 2px 9px; background: var(--brand-soft); white-space: nowrap; }
.ec-company { font-size: 14px; font-weight: 600; color: var(--brand); margin-top: 5px; line-height: 1.3; }
.ec-title { font-size: 13px; color: #5A6478; margin-top: 3px; }
.ec-slogan { margin-top: 12px; font-size: 12.5px; color: #9AA6BD; line-height: 1.7; }
.ec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ec-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #5A6478; background: rgba(15,23,41,.045); border: 1px solid #E9ECF1; border-radius: 999px; padding: 6px 12px; }
.ec-chip .ec-ico { width: 14px; height: 14px; flex-shrink: 0; color: var(--brand); }
.ec-chip .ec-cv { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-webrow { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; background: rgba(15,23,41,.045); border: 1px solid #E9ECF1; border-radius: 10px; padding: 9px 13px; color: var(--brand); }
.ec-webrow .ec-ico { width: 14px; height: 14px; flex-shrink: 0; }
.ec-actions { padding: 14px; }
.ec-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ec-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; font-size: 15px; font-weight: 700; border-radius: 12px; border: none; font-family: inherit; }
.ec-btn .ec-ico { width: 16px; height: 16px; }
.ec-btn-main { color: #fff; background: var(--brand); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); }
.ec-btn-ghost { color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.ec-statrow { display: flex; justify-content: center; gap: 26px; margin-top: 12px; font-size: 12.5px; color: #5A6478; }
.ec-statrow .ec-stat { display: inline-flex; align-items: center; gap: 6px; }
.ec-statrow .ec-ico { width: 14px; height: 14px; color: var(--brand); }
.ec-statrow b { font-size: 14px; font-weight: 700; color: #0F1729; font-variant-numeric: tabular-nums; }
.ec-card { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06); padding: 15px; margin: 0 13px 13px; }
.ec-sec-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.ec-sec-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--n-500); }
.ec-sec-title::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--brand); flex-shrink: 0; }
.ec-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ec-pcard { border: 1px solid #E9ECF1; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); }
.ec-pimg { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--brand-soft), #EEF1F7); display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.ec-pbody { padding: 10px 12px 12px; }
.ec-pname { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: #0F1729; }
.ec-ptag { font-size: 11.5px; color: #5A6478; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-footer { text-align: center; font-size: 11px; color: #9AA6BD; padding: 2px 16px 12px; }
.ec-beian { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; padding: 0 16px 12px; font-size: 10px; color: #9AA6BD; line-height: 1.6; }
.ec-beian-i { white-space: nowrap; }
.ec-addr { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; color: #5A6478; }
.ec-addr .ec-ico { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; }
.ec-p { font-size: 12.5px; color: #5A6478; line-height: 1.8; margin: 0; }
.ch-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch-edit-item { display: flex; align-items: center; gap: 8px; border: 1px solid #E9ECF1; border-radius: 10px; padding: 8px 10px; background: #fff; }
.ch-edit-item:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ch-edit-ico { font-size: 16px; flex-shrink: 0; }
.ch-edit-item input { border: none; outline: none; font: inherit; font-size: 13px; width: 100%; background: transparent; color: #0F1729; min-width: 0; }
.ec-feed { display: flex; flex-direction: column; gap: 10px; }
.ec-channels { display: flex; flex-direction: column; gap: 9px; }
.ec-channel { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--brand-line); background: var(--brand-soft); border-radius: 12px; text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; }
.ec-channel:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16,24,40,.08); }
.ec-ch-ico { font-size: 20px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 9px; flex-shrink: 0; }
.ec-ch-body { flex: 1; min-width: 0; }
.ec-ch-label { display: block; font-size: 13.5px; font-weight: 700; color: #0F1729; }
.ec-ch-url { display: block; font-size: 11.5px; color: #5A6478; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-ch-go { font-size: 12px; font-weight: 700; color: var(--brand); flex-shrink: 0; }
.ec-feed-item { padding: 10px 12px; border: 1px solid #E9ECF1; border-radius: 10px; background: #fff; }
.ec-fi-title { font-size: 13px; font-weight: 700; color: #0F1729; line-height: 1.4; }
.ec-fi-sum { font-size: 11.5px; color: #5A6478; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-fi-meta { font-size: 11px; color: #9AA6BD; margin-top: 6px; }

/* ============ 名片设置：配色选择器 + 板块开关 ============ */
.theme-dots { display: flex; gap: 8px; margin-top: 12px; }
.theme-dot { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .15s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.theme-dot.on { box-shadow: 0 0 0 2px var(--n-0), 0 0 0 4px var(--brand-600); transform: scale(1.1); }
.theme-dot:hover { transform: scale(1.1); }
.theme-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-sel-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.theme-sel-item.on { border-color: var(--brand-600); background: var(--brand-50); box-shadow: 0 0 0 2px var(--brand-ring); }
.theme-sel-dot { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; }
.ts-name { font-size: 14px; font-weight: 600; color: var(--ink-0); }
.ts-hex { font-size: 11px; color: var(--n-500); margin-left: auto; font-family: var(--mono); }
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sec-row:last-child { border-bottom: none; }
.sr-name { font-size: 14px; font-weight: 600; color: var(--ink-0); }
.sr-desc { font-size: 12px; color: var(--n-500); margin-top: 2px; }
.tg { width: 42px; height: 24px; border-radius: 12px; background: var(--n-300); position: relative; cursor: pointer; flex-shrink: 0; transition: background-color var(--dur-base) var(--ease); }
.tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left var(--dur-base) var(--ease); box-shadow: var(--sh-1); }
.tg.on { background: var(--brand-600); }
.tg.on::after { left: 21px; }
.pick-box { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pick-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--n-100); border-bottom: 1px solid var(--line); }
.pick-count { font-size: 12px; color: var(--n-500); margin-right: auto; }
.pick-list { max-height: 208px; overflow-y: auto; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: var(--n-25); }
.pick-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--brand-600); cursor: pointer; }
.pick-txt { display: flex; flex-direction: column; min-width: 0; }
.pick-name { font-size: 13px; color: var(--ink-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-sub { font-size: 11px; color: var(--n-500); margin-top: 2px; }
.pick-list .empty { padding: 16px; text-align: center; font-size: 12px; color: var(--n-500); }

/* ============ 组织架构 · 企业微信通讯录布局 ============ */
.wx-contacts { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.wx-depts { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px; align-self: start; }
.wx-depts-title { font-size: 12px; color: var(--n-500); padding: 4px 10px 10px; letter-spacing: .5px; }
.wx-dept { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--r-btn); font-size: 13px; color: var(--ink-1); cursor: pointer; transition: background .12s; }
.wx-dept:hover { background: var(--bg); }
.wx-dept.on { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.wx-count { font-size: 12px; color: var(--n-500); background: var(--field); border-radius: 999px; padding: 1px 8px; }
.wx-dept.on .wx-count { background: #fff; color: var(--brand-700); }
.wx-members { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 8px; }
.wx-mrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.wx-mrow:last-child { border-bottom: none; }
.wx-mrow:hover { background: var(--bg); }
.wx-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; flex-shrink: 0; }
.wx-minfo { flex: 1; min-width: 0; }
.wx-mname { font-size: 14px; font-weight: 600; color: var(--ink-0); }
.wx-mrole { font-size: 12px; color: var(--n-500); font-weight: 400; margin-left: 6px; }
.wx-msub { font-size: 12px; color: var(--n-500); margin-top: 2px; }
.wx-mactions { display: flex; gap: 6px; flex-shrink: 0; }
/* 760 断点的重复定义已合并到批 5 统一 760 块（断点值 760 不变） */

/* 仪表盘「电子名片看板」指标卡：窄容器自适应，不再挤成单字竖排 */
.stat-grid.stat-grid-auto { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
/* 宽表格横向滚动兜底（访客明细列多，不再把客户名压成竖排） */
.tbl-scroll { overflow-x: auto; }
.tbl-scroll > .tbl.tbl-wide { min-width: 560px; }
/* 卡片头允许换行（标题 + 说明 + 按钮在窄屏不再挤成两行标题） */
.card-head.card-head-wrap { flex-wrap: wrap; gap: 8px; }
/* 通讯录顶部操作条 */
.wx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wx-head-t { font-size: 15px; font-weight: 700; color: var(--ink-0); }

/* ============ 商机 Pipeline 看板（可拖拽） ============ */
.opp-board { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.opp-col { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px; min-height: 180px; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.opp-col-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.opp-col-name { font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.opp-col-num { font-size: 11px; color: var(--n-500); background: #fff; border-radius: 999px; padding: 1px 7px; }
.opp-col-amt { font-size: 11px; color: var(--n-500); margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.opp-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.opp-col.over { background: var(--brand-50); border-color: var(--brand-600); box-shadow: inset 0 0 0 2px var(--brand-ring); }
.opp-empty { border: 1px dashed var(--n-300); border-radius: 10px; padding: 18px 8px; text-align: center; font-size: 12px; color: var(--n-500); }

.opp-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; cursor: grab; touch-action: pan-y; user-select: none; box-shadow: var(--sh-1); transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.opp-card:hover { box-shadow: var(--sh-2); border-color: var(--brand-200); transform: translateY(-1px); }
.opp-card:active { cursor: grabbing; }
.opp-card.dragging { opacity: .45; transform: rotate(1deg); }
/* 跟手卡片：拖拽中跟随指针，不参与命中判定（否则 elementFromPoint 命中的是影子本身） */
.opp-ghost { position: fixed; z-index: 9999; pointer-events: none; margin: 0; opacity: .95; box-shadow: var(--sh-4); transform: rotate(-1.5deg); }
.opp-name { font-size: 13px; font-weight: 600; color: var(--ink-0); line-height: 1.4; }
.opp-cust { font-size: 12px; color: var(--n-500); margin-top: 2px; }
.opp-amt { font-size: 15px; font-weight: 700; color: var(--ink-0); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.opp-meta { font-size: 11px; color: var(--n-500); }
.opp-badges { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.opp-adv { margin-top: 8px; width: 100%; border: 1px dashed var(--line); background: #fff; color: var(--ink-2); font-size: 12px; padding: 5px 0; border-radius: 7px; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
/* 商机详情弹窗：信息块 + 阶段按钮组 */
.od-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.od-item { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.od-k { display: block; font-size: 11px; color: var(--n-500); margin-bottom: 3px; }
.od-v { font-size: 13px; font-weight: 600; color: var(--ink-0); }
.od-overdue { margin: -6px 0 12px; }
.od-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.od-stage { border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: 12px; padding: 8px 4px; border-radius: 8px; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); font-family: inherit; }
.od-stage:hover { border-color: var(--brand-600); color: var(--brand-600); }
.od-stage.on { background: var(--brand-50); border-color: var(--brand-600); color: var(--brand-700); font-weight: 700; }
.od-stage.on::before { content: '✓ '; }

/* 商机详情 · 跟进记录（按阶段分组，可增可删） */
.fu-add { display: flex; gap: 8px; align-items: stretch; }
.fu-sel { border: 1px solid var(--line); background: #fff; border-radius: var(--r-btn); font-family: inherit; font-size: 13px; color: var(--ink-1); padding: 0 8px; height: 38px; cursor: pointer; flex: 0 0 auto; }
.fu-sel:focus-visible { outline: none; border-color: var(--brand-600); box-shadow: var(--focus-ring-sm); }
.fu-input { flex: 1 1 auto; margin: 0; min-width: 0; }
.fu-input input { width: 100%; }
.fu-hint { font-size: 11px; color: var(--n-500); margin: 6px 0 10px; line-height: 1.5; }
.fu-list { max-height: 232px; overflow-y: auto; padding-right: 2px; }
.fu-group + .fu-group { margin-top: 10px; }
.fu-group-head { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--brand-700); background: var(--brand-50); border-radius: var(--r-pill); padding: 2px 8px; margin-bottom: 6px; }
.fu-count { background: #fff; border-radius: var(--r-pill); padding: 0 5px; font-size: 10px; line-height: 15px; color: var(--brand-700); }
.fu-item { border: 1px solid var(--line); border-left: 3px solid var(--brand-600); background: #fff; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.fu-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fu-method { font-size: 11px; font-weight: 700; color: var(--brand-700); background: var(--brand-50); border-radius: 4px; padding: 1px 6px; }
.fu-time { font-size: 11px; color: var(--n-500); }
.fu-op { font-size: 11px; color: var(--n-500); }
.fu-del { margin-left: auto; flex: 0 0 auto; border: none; background: transparent; color: var(--n-500); font-size: 15px; line-height: 1; width: 20px; height: 20px; border-radius: 4px; cursor: pointer; font-family: inherit; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.fu-del:hover { background: var(--danger-50); color: var(--danger-700); }
.fu-del.arming { width: auto; padding: 0 6px; height: 20px; background: var(--danger-500); color: #fff; font-size: 11px; font-weight: 700; }
.fu-text { font-size: 13px; color: var(--ink-1); line-height: 1.5; word-break: break-word; }
.fu-empty { font-size: 12px; color: var(--n-500); background: var(--bg); border: 1px dashed var(--line); border-radius: 8px; padding: 14px; text-align: center; }
.opp-adv:hover { border-color: var(--brand-600); color: var(--brand-700); background: var(--brand-50); }

/* ============ 消息提醒 · 操作日志 · 流转（2026-11-01） ============ */
.t-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: var(--ink-2); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.t-bell:hover { background: var(--field); color: var(--ink-0); }
.t-bell-dot { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger-500); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--n-0); }

.ntf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ntf-list { max-height: 360px; overflow-y: auto; padding-right: 2px; }
.ntf-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.ntf-item.unread { border-color: var(--brand-200); background: var(--brand-50); }
.ntf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ntf-title { font-size: 13px; font-weight: 700; color: var(--ink-0); }
.ntf-time { font-size: 11px; color: var(--n-500); flex: 0 0 auto; }
.ntf-text { font-size: 12px; color: var(--ink-2); line-height: 1.55; }

.row-click { cursor: pointer; }
.row-click:hover td { background: var(--brand-50); }
.td-ops { white-space: nowrap; }
.td-ops .btn + .btn { margin-left: 4px; }
.td-clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.ph-txt { color: var(--n-500); }
.btn-danger { color: var(--danger-700); }
.btn-danger:hover { background: var(--danger-50); border-color: var(--danger-50); color: var(--danger-700); }
.wx-mrow.is-left { opacity: .55; }
.input select { cursor: pointer; }
.tbl td.nw, .tbl th.nw { white-space: nowrap; }
.tbl td.td-clip { max-width: 240px; }
/* 长弹窗底部按钮常驻可见（内容滚动时也不被裁掉） */
.modal-foot { position: sticky; bottom: 0; background: #fff; margin: 20px -24px -24px; padding: 14px 24px; border-top: 1px solid var(--line); }

/* ===== 客户详情 · 企业维度（工商信息 / 联系人 / 合同 / 合作记录） ===== */
.cd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cd-title { font-size: 20px; font-weight: 700; color: var(--ink-0); }
.cd-head-ops { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cd-two { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
.cd-side { display: flex; flex-direction: column; }
.cd-sec { font-size: 12px; font-weight: 700; color: var(--brand-700); letter-spacing: .4px;
  margin: 18px 0 12px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.cd-two .card-body > .cd-sec:first-of-type { margin-top: 0; }
.cd-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cd-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; font-size: 13px; color: var(--n-500); border-bottom: 1px dashed var(--line); }
.cd-kv:last-child { border-bottom: 0; }
.cd-kv b { font-size: 14px; color: var(--ink-0); font-variant-numeric: tabular-nums; }
.cd-kv b.ok { color: var(--success-700); }
.cd-kv b.bad { color: var(--danger-700); }
.cd-contact { display: flex; gap: 10px; align-items: flex-start; }
.cd-cavatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand-50); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.cd-cname { font-weight: 600; color: var(--ink-0); font-size: 13px; margin-bottom: 2px; }
/* 卡片内的可编辑表单项间距（客户详情页企业信息） */
.card-body .field-row { gap: 12px; }
.card-body .field-row .field { margin-bottom: 14px; }
@media (max-width: 1180px) { .cd-two { grid-template-columns: 1fr; } }

/* ===== 来源自定义 / 收款冲抵 ===== */
.src-box { display: flex; flex-direction: column; gap: 8px; }
.src-box .input { margin-bottom: 0; }
.pay-hint { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; color: var(--n-500); margin-bottom: 16px; }
.pay-hint b { color: var(--ink-0); font-variant-numeric: tabular-nums; }
.pay-hint .ph-bad { color: var(--danger-700); }
.pay-mini-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pay-mini { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: 13px;
  border-bottom: 1px solid var(--line); background: #fff; }
.pay-mini:last-child { border-bottom: 0; }
.pay-mini .pm-date { color: var(--n-500); font-variant-numeric: tabular-nums; }
.pay-mini .pm-amt { color: var(--brand-700); font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-mini .pm-method { color: var(--ink-2); }
.pay-mini .pm-op { margin-left: auto; color: var(--n-500); font-size: 12px; }
.pay-mini-empty { padding: 14px 12px; font-size: 13px; color: var(--n-500); text-align: center; background: #fff; }

/* ===== 产品橱窗（卡片网格） ===== */
.pw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
.pw-toolbar .chips { margin-bottom: 0; }
.pw-actions { display: flex; align-items: center; gap: 10px; }
.pw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 16px; }
.pw-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--sh-1);
  display: flex; flex-direction: column; transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.pw-card:hover { box-shadow: var(--sh-2); border-color: var(--brand-200); transform: translateY(-1px); }
.pw-cover { position: relative; aspect-ratio: 4/3; cursor: pointer; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-50), var(--n-100));
  display: flex; align-items: center; justify-content: center; }
.pw-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-ph { font-size: 26px; font-weight: 800; letter-spacing: 1px; color: var(--brand-600); opacity: .45; }
.pw-badge { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px solid var(--n-200); }
.pw-badge.is-draft { color: var(--warning-700); }
.pw-badge.is-hide { color: var(--n-500); }
/* 2026-11-07 同步状态徽标 + 多选批量取消同步 */
.pw-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; flex-wrap: wrap;
  max-width: calc(100% - 46px); }
.pw-badges .pw-badge { position: static; }
.pw-badge.is-unsync { color: #9A3412; background: rgba(255,237,213,.96); }
.pw-badge.is-off { color: var(--n-500); background: rgba(241,245,249,.96); }
.pw-pick { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 7px;
  background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 1px 3px rgba(16,24,40,.16); }
.pw-pick input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--brand-600); }
.pw-card.is-picked { border-color: var(--brand-600); box-shadow: 0 0 0 2px var(--brand-ring); }
.ops-pp-bar { align-items: center; gap: 8px; }
.ops-pp-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2);
  cursor: pointer; padding: 0 4px; }
.ops-pp-all input { width: 15px; height: 15px; accent-color: var(--brand-600); cursor: pointer; }
.ops-pp-count { font-size: 12.5px; color: var(--n-500); min-width: 72px; }
.ops-pp-bar .btn { padding: 4px 10px; font-size: 12px; }
.pw-body { padding: 12px 13px 10px; flex: 1; }
.pw-name { font-size: 14px; font-weight: 700; color: var(--ink-0); line-height: 1.35; cursor: pointer; }
.pw-name:hover { color: var(--brand-700); }
.pw-sub { font-size: 12px; color: var(--n-500); margin-top: 3px; }
.pw-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--n-500); margin-top: 9px; }
.pw-dot { color: var(--line); }
.pw-tagline { font-size: 12px; color: var(--ink-2); margin-top: 8px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pw-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 10px; }
.pw-price { font-size: 13px; font-weight: 700; color: var(--brand-700); font-variant-numeric: tabular-nums; }
.pw-clicks { font-size: 11.5px; color: var(--n-500); }
.pw-ops { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); background: var(--bg); }
.pw-ops .btn { flex: 1; padding: 5px 6px; font-size: 12px; justify-content: center; }
/* 批量删除勾选框：不能叫 .pw-pick（那是素材库选图卡片的绝对定位角标，会冲突） */
.batch-pick { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 12px; color: var(--ink-2, #64748b); cursor: pointer; white-space: nowrap; }
.batch-pick input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand-600); cursor: pointer; }
.post-cell .batch-pick { margin-right: 8px; }

/* ===== 种草文章列表：封面缩略块 ===== */
.post-cell { display: flex; gap: 10px; align-items: flex-start; }
.post-thumb { width: 46px; height: 34px; border-radius: 7px; flex: 0 0 auto; overflow: hidden;
  background: var(--brand-50); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-txt { min-width: 200px; }

/* ===== 产品详情页：左预览 / 右编辑 ===== */
.sd-two { display: grid; grid-template-columns: 380px 1fr; gap: 18px; align-items: start; }
.sd-two .cd-side { position: sticky; top: 16px; }
.sd-phone { width: 100%; max-height: 78vh; overflow-y: auto; }
.sd-phone::-webkit-scrollbar { width: 4px; }
.sd-phone::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 4px; }

/* 访客看到的产品详情页（手机内，局部 --brand 语义保留） */
.pd-in { background: #F6F7F9; }
.pd-cover { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--brand-soft), #EEF1F7);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pd-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-cover span { font-size: 30px; font-weight: 800; letter-spacing: 2px; color: var(--brand); opacity: .5; }
.pd-head { background: #fff; padding: 15px 15px 14px; }
.pd-name { font-size: 18px; font-weight: 800; color: #0F1729; line-height: 1.3; }
.pd-tagline { font-size: 12.5px; color: #5A6478; margin-top: 6px; }
.pd-price { margin-top: 10px; font-size: 17px; font-weight: 800; color: var(--brand);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pd-pnote { font-size: 11px; font-weight: 400; color: #8A93A6; }
.pd-sec { background: #fff; margin: 10px 0 0; padding: 14px 15px; }
.pd-sec-t { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #0F1729; margin-bottom: 10px; }
.pd-sec-t::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--brand); flex-shrink: 0; }
.pd-p { font-size: 12.5px; color: #5A6478; line-height: 1.85; margin: 0 0 8px; }
.pd-p:last-child { margin-bottom: 0; }
.pd-hl { padding: 9px 0; border-bottom: 1px dashed #E9ECF1; }
.pd-hl:last-child { border-bottom: 0; padding-bottom: 0; }
.pd-hl-t { font-size: 13px; font-weight: 700; color: #0F1729; }
.pd-hl-d { font-size: 12px; color: #7A839A; line-height: 1.7; margin-top: 3px; }
.pd-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pd-imgs img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; display: block; }
.pd-specs { border: 1px solid #E9ECF1; border-radius: 9px; overflow: hidden; }
.pd-spec { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; font-size: 12px; border-bottom: 1px solid #E9ECF1; }
.pd-spec:last-child { border-bottom: 0; }
.pd-spec:nth-child(odd) { background: var(--n-25); }
.pd-spec span { color: #8A93A6; }
.pd-spec b { color: #0F1729; font-weight: 600; text-align: right; }
.pd-cta { margin: 12px 0 0; padding: 14px 15px; background: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #5A6478; }
.pd-cta b { color: var(--brand); font-size: 13.5px; }
.pd-foot { padding: 14px 15px 18px; text-align: center; font-size: 11px; color: #A6ADBB; }
.pd-beian { padding: 0 15px 18px; text-align: center; font-size: 10px; color: #A6ADBB; line-height: 1.6; }

/* ===== 详情页编辑区：字段与动态行 ===== */
.fd { margin-bottom: 16px; min-width: 0; }
.field-row > .fd { flex: 1; min-width: 0; }
.fd > label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.fd > label i { color: var(--danger-500); font-style: normal; }
.fd-hint { font-size: 11.5px; color: var(--n-500); line-height: 1.6; margin-top: 5px; }
.ed-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ed-row { display: flex; gap: 8px; align-items: center; }
.ed-row.is-hl, .ed-row.is-spec { align-items: stretch; }
.ed-row .input { flex: 1; min-width: 0; margin-bottom: 0; }
.ed-row input { font-size: 13px; }
.ed-del { flex: 0 0 auto; width: 30px; height: 34px; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; color: var(--n-500); font-size: 16px; line-height: 1; cursor: pointer; }
.ed-del:hover { color: var(--danger-500); border-color: var(--danger-500); background: var(--danger-50); }

/* ===== 官网文章库选择弹窗 ===== */
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.lib-list { max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.lib-row { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px;
  border-bottom: 1px solid var(--line); cursor: pointer; background: #fff; }
.lib-row:last-child { border-bottom: 0; }
.lib-row:hover { background: var(--n-25); }
.lib-row.is-picked { background: var(--bg); cursor: default; }
.lib-row input { margin-top: 3px; flex: 0 0 auto; }
.lib-body { min-width: 0; flex: 1; }
.lib-title { font-size: 13px; font-weight: 600; color: var(--ink-0); line-height: 1.45; }
.lib-row.is-picked .lib-title { color: var(--n-500); }
.lib-tag { font-size: 11px; font-weight: 500; color: var(--n-500); background: var(--bg);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.lib-sum { font-size: 12px; color: var(--n-500); line-height: 1.6; margin-top: 3px; }
.lib-meta { font-size: 11.5px; color: var(--n-500); margin-top: 4px; }
.lib-foot-count { font-size: 12px; color: var(--n-500); margin-top: 10px; text-align: right; }

/* ===== 文章预览弹窗 ===== */
.pv-article { background: #fff; }
.pv-title { font-size: 18px; font-weight: 800; color: var(--ink-0); line-height: 1.4; }
.pv-meta { font-size: 11.5px; color: var(--n-500); margin: 8px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pv-p { font-size: 13.5px; color: var(--ink-1); line-height: 1.9; margin: 0 0 12px; }
.pv-url { font-size: 11.5px; color: var(--n-500); word-break: break-all; margin-top: 12px; }
.pv-card { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--brand-50);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.pv-card b { color: var(--brand-700); }
@media (max-width: 1100px) {
  .sd-two { grid-template-columns: 1fr; }
  /* 窄屏（笔记本分屏 / 手机）：编辑区优先，预览跟到后面，避免预览把编辑区挤出首屏 */
  .sd-two .card { order: 1; }
  .sd-two .cd-side { position: static; order: 2; }
  /* 窄屏预览不再固定高度：否则卡片内的 overflow 会把「参数规格 / 详细介绍」裁掉 */
  .sd-phone { max-height: none; overflow-y: visible; }
}

/* 名片里的产品卡：封面图 + 价格口径 */
.ec-pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-pprice { font-size: 11.5px; font-weight: 700; color: var(--brand); margin-top: 5px; font-variant-numeric: tabular-nums; }

/* ---------- 素材库：真图网格 + 上传区 ---------- */
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.mt-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }
.mt-img { position: relative; height: 128px; background: linear-gradient(135deg, var(--brand-50), var(--n-100));
  display: flex; align-items: center; justify-content: center; color: var(--n-500); font-size: 12px; cursor: default; overflow: hidden; }
.mt-img.has-img { cursor: pointer; }
.mt-img.has-img:hover { filter: brightness(0.94); }
.mt-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 修诊断 #6：原本裸 var(--brand)（仅 .phone-mock 内定义）→ 声明被丢弃 */
.mt-use { position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--brand-600); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.mt-body { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mt-name { font-size: 12.5px; font-weight: 600; color: var(--ink-0); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-meta { font-size: 11px; color: var(--n-500); }
.mt-where { margin-top: auto; }
.mt-ops { display: flex; gap: 6px; margin-top: 8px; }
.mt-ops .btn { flex: 1; }

/* 上传区 */
.up-box { margin-bottom: 14px; }
.up-drop { border: 1px dashed var(--line); border-radius: 12px; padding: 22px 16px; text-align: center;
  cursor: pointer; background: var(--bg); transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.up-drop:hover { border-color: var(--brand-600); background: var(--brand-50); }
.up-ico { width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%; background: var(--brand-600);
  color: #fff; font-size: 18px; line-height: 34px; font-weight: 300; }
.up-t { font-size: 13px; font-weight: 600; color: var(--ink-1); }
.up-s { font-size: 11.5px; color: var(--n-500); margin-top: 4px; }
.up-prev { margin-top: 12px; text-align: center; }
.up-prev img { max-width: 100%; max-height: 220px; border-radius: 10px; border: 1px solid var(--line); object-fit: contain; }
.up-prev-t { font-size: 11.5px; color: var(--n-500); margin-top: 6px; }

/* ---------- 从素材库选图 ---------- */
.mt-card.is-picked { border-color: var(--brand-600); box-shadow: 0 0 0 2px var(--brand-ring); }
.img-pick { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg); }
.img-pick-prev { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.img-pick-prev img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex: 0 0 auto; }
.img-pick-name { font-size: 12.5px; color: var(--ink-1); font-weight: 500; }
.img-pick-empty { height: 72px; border: 1px dashed var(--line); border-radius: 8px; display: flex; align-items: center;
  justify-content: center; color: var(--n-500); font-size: 12px; margin-bottom: 8px; }
.ed-row.is-img { gap: 8px; }
.img-thumb { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: var(--brand-soft); display: flex; align-items: center; justify-content: center; }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-thumb span { font-size: 11px; color: var(--n-500); }

/* ---------- 通讯录：部门管理 + 成员资料 ---------- */
.wx-head-ops { display: flex; gap: 8px; align-items: center; }
.wx-dept-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wx-dept-scope { font-style: normal; font-size: 11px; color: var(--n-500); font-weight: 400; }
.wx-dept.on .wx-dept-scope { color: var(--brand-700); opacity: .8; }
.wx-dept-ops { display: flex; gap: 2px; margin-left: 6px; }
.wx-dept-btn { width: 22px; height: 22px; border: none; background: transparent; border-radius: 5px;
  color: var(--n-500); cursor: pointer; font-size: 13px; line-height: 1; }
.wx-dept-btn:hover { background: var(--field); color: var(--ink-1); }
.wx-depts-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.btn-block { width: 100%; justify-content: center; }
.wx-macct { font-size: 11px; color: var(--n-500); font-weight: 400; margin-left: 6px;
  background: var(--field); border-radius: 999px; padding: 1px 7px; }
.wx-mrow { cursor: pointer; }
.wx-mrow .wx-mactions { cursor: default; }

/* 数据范围选择 */
.scope-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.scope-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.scope-item:hover { border-color: var(--brand-600); }
.scope-item.on { border-color: var(--brand-600); background: var(--brand-50); }
.sc-name { font-size: 13px; font-weight: 600; color: var(--ink-0); }
.sc-desc { font-size: 11.5px; color: var(--n-500); margin-top: 3px; line-height: 1.4; }
.load-box { background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 12.5px; color: var(--ink-1); }

/* 760 唯一断点块（原两处重复定义已合并；断点值 760 不变） */
@media (max-width: 760px) {
  .wx-contacts { grid-template-columns: 1fr; }
  .wx-depts { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
  .wx-depts-title { width: 100%; }
  .wx-dept { flex: 1 1 46%; min-width: 140px; }
  .wx-dept-ops { margin-left: auto; }
  .wx-depts-foot { width: 100%; margin-top: 6px; }
  .wx-mrow { flex-wrap: wrap; }
  .wx-minfo { flex: 1 1 60%; }
  .wx-mactions { flex: 1 1 100%; justify-content: flex-end; padding-top: 6px; }

  /* 批 5 · 内容区留白 / 顶栏控件 */
  .content { padding: var(--sp-3); }
  .t-menu { display: inline-flex; }
  .t-search { min-width: 180px; }
  .t-bell, .t-search { height: 40px; }
  /* 侧栏抽屉：Phase1 §3.11 预留 400 层，遮罩 390；挂 body.nav-open 避免被 render() 冲掉 */
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw); height: 100vh;
    transform: translateX(-100%); z-index: 400;
    transition: transform var(--dur-slow) var(--ease);
  }
  body.nav-open .sidebar { transform: none; }
  .nav-scrim { z-index: 390; }
  /* 表格横滚：padding:4px 0 保证表格内 2px 小焦点环不被 overflow-x:auto 裁掉 */
  .tbl-scroll, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0; }
  .tbl-scroll .tbl, .table-wrap .tbl { min-width: 720px; }
  .tbl-scroll::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { height: 6px; }
  /* 触控目标 ≥36px（Phase2 §5.5）；.wx-dept-btn ≥32px */
  .btn-sm, .td-ops .btn, .tbl .td-ops .btn, .chip, .etabs .etab,
  .dict-add, .nav-item { height: 36px; min-height: 36px; }
  .wx-dept-btn { width: 32px; height: 32px; }
  .fu-del { width: 32px; height: 32px; }
  .ed-del { height: 36px; }
  .td-ops { gap: 6px; }
  .etabs.is-scrollable { overflow-x: auto; flex-wrap: nowrap; }
  /* 登录页窄屏：品牌区只留 logo + 定位句，表单优先，不挤成一团 */
  .login-brand { padding: 32px; }
  .login-brand .lb-feats { display: none; }
  /* 纯 CSS 降级（零 JS）：JS 线未渲染 .t-menu 时，侧栏自动变顶部横向可滚动导航条 */
  .app:not(:has(.t-menu)) { flex-direction: column; }
  .app:not(:has(.t-menu)) .sidebar {
    position: static; width: auto; min-width: 0; height: auto; transform: none;
    border-right: none; border-bottom: 1px solid var(--n-200);
  }
  .app:not(:has(.t-menu)) .nav { display: flex; overflow-x: auto; white-space: nowrap; padding: 8px 10px; }
  .app:not(:has(.t-menu)) .nav-sec, .app:not(:has(.t-menu)) .sidebar-foot { display: none; }
  .app:not(:has(.t-menu)) .brand { padding: 10px 14px; border-bottom: none; }
}

/* ---------- 商品库：行可点击 + 字典下拉 ---------- */
tr.row-click { cursor: pointer; transition: background .12s; }
tr.row-click:hover { background: var(--brand-50); }
tr.row-click:hover td.cell-name { color: var(--brand-700); }

/* 字典下拉 + 旁边的「＋」快速新增 */
.dict-pick { display: flex; gap: 6px; align-items: stretch; }
.dict-pick .input { flex: 1; min-width: 0; }
.dict-add { width: 34px; flex: 0 0 auto; border: 1px solid var(--line); background: var(--bg);
  border-radius: 8px; color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1; }
.dict-add:hover { border-color: var(--brand-600); color: var(--brand-700); background: var(--brand-50); }

/* 字典管理列表 */
.dict-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; margin-bottom: 12px; }
.dict-row { display: flex; gap: 8px; align-items: center; }
.dict-row .input { flex: 1; min-width: 0; }
.dict-row .input input { width: 100%; }
.dict-add-row { display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.dict-add-row .input { flex: 1; }
.dict-add-row .input input { width: 100%; }

/* 字典内联新增行 */
.dict-inline { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.dict-inline .input { flex: 1; min-width: 0; }
.dict-inline .input input { width: 100%; }

/* ---------- 字典就地管理面板 ---------- */
.dict-panel { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); padding: 10px; }
.dict-panel-head { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.dict-panel .dict-list { max-height: 220px; margin-bottom: 8px; }
.dict-panel .dict-list:empty { display: none; }
.dict-sub { font-size: 11px; color: var(--n-500); flex: 0 0 auto; }
.dict-row { position: relative; }
.dict-row .input { flex: 1; min-width: 0; }
.dict-row .input input { width: 100%; }

/* ============ 轻量富文本编辑器（写死 hex 归一到 token） ============ */
.rich-editor-wrap { position: relative; margin-bottom: 4px; }
.re-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px; background: var(--n-100); border: 1px solid var(--n-200); border-bottom: 0; border-radius: 8px 8px 0 0; align-items: center; }
.re-btn { min-width: 26px; height: 26px; padding: 0 6px; font-size: 12px; line-height: 1; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--n-800); cursor: pointer; user-select: none; }
.re-btn:hover { background: var(--n-200); border-color: var(--n-300); }
.re-btn.re-b { font-weight: 700; }
.re-btn.re-i { font-style: italic; font-family: Georgia, serif; }
.re-btn.re-u { text-decoration: underline; }
.re-btn.re-s { text-decoration: line-through; }
.re-btn.re-h { font-weight: 700; font-size: 11px; }
.re-sep { width: 1px; height: 18px; background: var(--n-300); margin: 0 4px; display: inline-block; }
.re-editor { min-height: 150px; max-height: 420px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--n-200); border-radius: 0 0 8px 8px; background: #fff; font-size: 14px; line-height: 1.7; outline: none; }
.re-editor:empty:before { content: attr(data-placeholder); color: var(--n-400); pointer-events: none; }
.re-editor p { margin: 0 0 8px; }
.re-editor h2 { margin: 12px 0 6px; font-size: 18px; }
.re-editor h3 { margin: 10px 0 4px; font-size: 15px; }
.re-editor ul, .re-editor ol { margin: 0 0 8px; padding-left: 22px; }
.re-editor blockquote { margin: 0 0 8px; padding: 6px 12px; border-left: 3px solid var(--n-300); background: var(--n-100); color: var(--n-600); }
.re-editor img { max-width: 100%; border-radius: 6px; }
.re-hint { margin-top: 6px; font-size: 12px; color: var(--n-500); }

/* ===== 官网同步弹窗（写死 hex 归一） ===== */
.sync-bar{display:flex;align-items:center;gap:8px;margin:10px 0 8px}
.sync-count{margin-left:auto;font-size:12px;color:var(--n-500)}
.sync-list{max-height:380px;overflow:auto;border:1px solid var(--n-200);border-radius:10px;padding:6px;background:var(--n-25)}
.sync-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.sync-item:hover{background:var(--n-100);border-color:var(--n-200)}
.sync-item input{width:16px;height:16px;flex:none;accent-color:var(--brand-600)}
.sync-thumb{width:46px;height:34px;object-fit:cover;border-radius:6px;flex:none;background:var(--n-200)}
.sync-thumb.ph{display:inline-block}
.sync-meta{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.sync-meta b{font-size:13px;color:var(--n-900);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sync-meta i{font-style:normal;font-size:11px;color:var(--n-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sync-badge{margin-left:auto;flex:none;font-size:11px;color:var(--success-700);background:var(--success-50);border:1px solid #A7F3D0;border-radius:999px;padding:1px 8px}
/* 官网已下架：禁选态（2026-11-07） */
.sync-item.is-off{cursor:not-allowed;opacity:.62}
.sync-item.is-off:hover{background:transparent;border-color:transparent}
.sync-item.is-off input{cursor:not-allowed}
.sync-badge.is-off{color:var(--n-500);background:var(--n-100);border-color:var(--n-200)}

/* ============================================================
   批 3 · 组件重定义（Phase1 §5.1–5.16 + §6 层次手法）
   全部为「后置覆盖层」：不删除、不改名任何既有选择器，只在既有之上重定义视觉。
   ============================================================ */

/* --- §6 手法 1｜三层背景（L1 画布 / L2 表面 / L3 下沉） --- */
.content { background: var(--n-50); }
.card, .stat-card, .modal, .topbar { background: var(--n-0); }
.input, .tbl th, .opp-col, .seg, .etabs, .hint { background: var(--n-100); }
/* --- §6 手法 2｜顶栏下沿柔性渐变分割线（无 backdrop-filter，零布局改动） --- */
.topbar {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--n-25) 100%);
  border-bottom: 1px solid var(--n-200);
  position: relative; z-index: 30;
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
  background: linear-gradient(180deg, rgba(16,24,40,.035), transparent);
  pointer-events: none;
}

/* --- §5.1 侧边栏 --- */
.sidebar {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sidebar-tint) 100%);
  border-right: 1px solid var(--n-300);
  box-shadow: inset -1px 0 0 var(--sidebar-edge);
  z-index: 20;
}
.brand { padding: 18px 20px; border-bottom: 1px solid var(--n-200); }
.brand .logo { border-radius: var(--r-sm); background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); box-shadow: var(--sh-inset); }
.brand .name { font-size: var(--fs-16); font-weight: 700; color: var(--n-900); }
.brand .tag { font-size: var(--fs-11); color: var(--n-500); }
.nav-sec { font-size: var(--fs-11); font-weight: 600; color: var(--n-500); letter-spacing: .08em; padding: 16px 18px 6px; text-transform: none; }
.nav-item {
  position: relative; height: 36px; padding: 9px 12px; gap: 10px;
  border-radius: var(--r-sm); color: var(--n-600); font-weight: 500; font-size: var(--fs-13);
}
.nav-item:hover { background: var(--n-100); color: var(--n-800); }
.nav-item.active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--brand-600);
}
.nav-item .ico { width: 18px; height: 18px; color: currentColor; }
.nav-item.active .ico { color: var(--brand-600); }
.nav-item:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.sidebar-foot { padding: 14px 20px; border-top: 1px solid var(--n-200); }
.avatar { background: var(--brand-600); }
.sidebar-foot .who .n { font-size: var(--fs-13); font-weight: 600; color: var(--n-900); }
.sidebar-foot .who .r { font-size: var(--fs-11); color: var(--n-500); }
.sidebar-foot .sf-logout {
  margin-left: auto;
  border: 1px solid var(--n-700);
  background: transparent;
  color: var(--n-400, #94a3b8);
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s;
}
.sidebar-foot .sf-logout:hover { color: #fff; background: var(--danger-700, #b91c1c); border-color: var(--danger-500, #ef4444); }

/* --- §5.2 顶栏 --- */
.topbar .t-title { font-size: var(--fs-18); font-weight: 700; color: var(--n-900); letter-spacing: -.015em; }
.topbar .t-sub { font-size: var(--fs-12); color: var(--n-500); margin-top: 2px; }
.t-search {
  min-width: 220px; height: 34px; background: var(--n-100);
  border: 1px solid var(--n-200); border-radius: var(--r-sm);
  color: var(--n-500); font-size: var(--fs-13);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.t-search .ico { width: 16px; height: 16px; flex-shrink: 0; }
.t-search:hover { background: var(--n-50); border-color: var(--n-300); }
.t-search:focus-within, .t-search:focus-visible { border-color: var(--brand-600); box-shadow: var(--focus-ring); outline: none; }
.t-bell { width: 34px; height: 34px; border-radius: var(--r-sm); color: var(--n-600); }
.t-bell:hover { background: var(--n-100); color: var(--n-900); }
.t-bell:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.t-bell-dot { background: var(--danger-500); box-shadow: 0 0 0 2px var(--n-0); }

/* --- §5.3 统计卡（§6 手法 3｜顶部 3px 品牌细色条 + 双层阴影） --- */
.stat-grid { gap: var(--sp-4); margin-bottom: var(--sp-5); }
.stat-card {
  position: relative; background: var(--n-0); border: var(--bd); border-radius: var(--r-md);
  padding: 18px 18px 16px; box-shadow: var(--sh-1), var(--sh-inset); overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.stat-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
}
.stat-card:hover { box-shadow: var(--sh-2); border-color: var(--brand-200); }
.s-label { font-size: var(--fs-12); font-weight: 500; color: var(--n-500); letter-spacing: .01em; }
.s-value { font-size: var(--fs-26); font-weight: 700; color: var(--n-900); margin: 6px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.s-note { font-size: var(--fs-12); color: var(--n-500); }
/* O2 的纯 CSS 替代：note 跟随数值语义着色，零 JS、不新增插槽 */
.stat-card:has(.s-value.hl-red) .s-note { color: var(--danger-700); }
.stat-card:has(.s-value.hl-amber) .s-note { color: var(--warning-700); }
.stat-card:has(.s-value.hl-emerald) .s-note,
.stat-card:has(.s-value.hl-blue) .s-note { color: var(--brand-700); }

/* --- §5.4 卡片（内容容器不加 hover） --- */
.card { border: var(--bd); border-radius: var(--r-md); box-shadow: var(--sh-1), var(--sh-inset); }
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--n-200); min-height: 56px; }
.card-head .c-title { font-size: var(--fs-16); font-weight: 700; color: var(--n-900); }
.card-body { padding: var(--sp-5); }
.modal-sec-title, .cd-sec { font-size: var(--fs-12); font-weight: 700; border-bottom: 1px solid var(--n-300); color: var(--brand-700); letter-spacing: .04em; }

/* --- §5.5 按钮：默认/hover/active/focus-visible/disabled 四态 + 主按钮 AA 对比度 --- */
.btn {
  height: 36px; padding: 0 var(--sp-4); gap: 6px; border-radius: var(--r-sm);
  font-size: var(--fs-13); font-weight: 500; border: 1px solid transparent;
}
.btn .ico { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-primary, .btn-primary-blue { background: var(--brand-600); color: var(--brand-on); box-shadow: var(--sh-1), var(--sh-inset); }
.btn-primary:hover, .btn-primary-blue:hover { background: var(--brand-700); box-shadow: var(--sh-2); }
.btn-ghost { background: var(--n-100); color: var(--n-700); border-color: transparent; }
.btn-ghost:hover { background: var(--n-200); color: var(--n-900); }
.btn-outline { background: var(--n-0); color: var(--n-700); border-color: var(--n-300); }
.btn-outline:hover { background: var(--n-50); border-color: var(--brand-600); color: var(--brand-700); }
.btn-danger { background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-50); }
.btn-danger:hover { background: var(--danger-500); color: #FFF; border-color: var(--danger-500); }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-12); }
.btn-block { width: 100%; justify-content: center; }

/* --- §5.6 徽标 / 筛选 / 分段 / tab --- */
.pill { height: 22px; padding: 0 9px; gap: 5px; border: 1px solid transparent; font-size: var(--fs-12); font-weight: 500; }
.pill-emerald { border-color: #D1FAE5; }
.pill-blue { border-color: #BAE6FD; }
.pill-amber { border-color: #FDE68A; }
.pill-red { border-color: #FECACA; }
.pill-gray { border-color: var(--n-200); }
.p-dot { flex: 0 0 6px; }
.chip {
  height: 30px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--n-0); border: 1px solid var(--n-200); color: var(--n-600);
  font-size: var(--fs-13); font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.chip:hover { background: var(--n-50); border-color: var(--n-300); }
.chip.active, .chip.active-blue { background: var(--brand-600); color: var(--brand-on); border-color: var(--brand-600); box-shadow: var(--sh-1); font-weight: 600; }
/* A7 / v1.1 增补：chip-on 是第 17 个零规则 class 且为**选中态**
   （pages.js:1294 素材分类 / modals.js:1287 图片选择 / app.js:2512 classList.toggle）。
   单列真实规则，与 .chip.active 声明完全一致；(0,2,0) 压过 .chip:hover，悬停不冲掉选中底色。 */
.chip.chip-on { background: var(--brand-600); color: var(--brand-on); border-color: var(--brand-600); box-shadow: var(--sh-1); font-weight: 600; }
.chip.chip-on:hover { background: var(--brand-600); border-color: var(--brand-600); }
.chip:focus-visible { box-shadow: var(--focus-ring-sm); outline: none; }
.seg { padding: 3px; background: var(--n-100); border: 1px solid var(--n-200); border-radius: var(--r-sm); gap: 2px; display: inline-flex; flex-wrap: wrap; max-width: 100%; }
.seg .seg-item { height: 30px; padding: 0 14px; border-radius: 6px; background: transparent; color: var(--n-600); }
.seg .seg-item.on, .seg .seg-item.on-blue { background: var(--n-0); color: var(--brand-700); font-weight: 600; box-shadow: var(--sh-1); }
.seg .seg-item:focus-visible { box-shadow: var(--focus-ring-sm); outline: none; }
.etabs { background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-sm); padding: 4px; gap: 2px; display: inline-flex; flex-wrap: wrap; max-width: 100%; box-shadow: var(--sh-1); }
.etabs .etab { height: 32px; padding: 0 14px; border-radius: 6px; font-size: var(--fs-13); font-weight: 500; color: var(--n-600); }
.etabs .etab.on { background: var(--brand-50); color: var(--brand-700); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand-600); }
.etabs .etab:focus-visible { box-shadow: var(--focus-ring-sm); outline: none; }
/* 运管 3 组按钮 tab：(0,3,0) 稳定压过 .btn-ghost，保留实心主色 */
.btn.etab.on { background: var(--brand-600); color: var(--brand-on); border-color: var(--brand-600); }
.btn.etab:focus-visible { box-shadow: var(--focus-ring-sm); outline: none; }
.chips.ops-content-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.hint { padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid transparent; font-size: var(--fs-12); line-height: 1.6; }
.hint-emerald { border-color: #D1FAE5; }
.hint-blue { border-color: #BAE6FD; }
.hint-amber { border-color: #FDE68A; }
.hint-red { background: var(--danger-50); color: var(--danger-700); border-color: #FECACA; }

/* --- §5.7 表格（hover 归一 / sticky 表头 / 选中 / 数字右对齐 / 密集区小焦点环） --- */
.table-wrap, .tbl-scroll { overflow-x: auto; padding: 4px 0; }
.table-wrap::-webkit-scrollbar, .tbl-scroll::-webkit-scrollbar { height: 6px; }
.table-wrap::-webkit-scrollbar-thumb, .tbl-scroll::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 4px; }
.tbl th { background: var(--n-50); color: var(--n-500); font-size: var(--fs-12); font-weight: 600; padding: 10px 16px; border-bottom: 1px solid var(--n-300); letter-spacing: .02em; position: sticky; top: 0; z-index: 2; }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--n-200); color: var(--n-700); }
.tbl tbody tr:nth-child(even) td { background: var(--n-25); }
.tbl tbody tr:hover td, tr.row-click:hover td, .tbl tbody tr:hover, tr.row-click:hover { background: var(--brand-50); }
.tbl tr.is-selected td, .tbl tr.is-selected:hover td { background: var(--brand-100); box-shadow: inset 3px 0 0 var(--brand-600); }
.tbl .num, .tbl td.num, .rank-val, .opp-amt, .opp-col-amt, .pw-price { font-variant-numeric: tabular-nums; text-align: right; }
.tbl th.num { text-align: right; }
.tbl .cell-name { font-size: var(--fs-13); font-weight: 600; color: var(--n-900); }
.tbl .cell-sub { font-size: var(--fs-12); color: var(--n-500); }
.tbl .td-ops .btn { height: 26px; padding: 0 8px; font-size: var(--fs-12); }
.td-ops { white-space: nowrap; gap: 6px; }
/* overflow-x:auto 会裁 4px 大环 → 表格/密集区一律 2px 小环 */
.td-ops .btn:focus-visible, .chip:focus-visible, .seg-item:focus-visible,
.etab:focus-visible, .pw-badge:focus-visible { box-shadow: var(--focus-ring-sm); outline: none; }
.tbl tfoot td { background: var(--n-50); font-weight: 700; border-top: 1px solid var(--n-300); }
.tbl td.td-clip { max-width: 240px; }

/* --- §5.8 输入（focus-within / hover / error / disabled） --- */
.field > label, .fd > label { font-size: var(--fs-13); font-weight: 500; color: var(--n-600); margin-bottom: 6px; }
.fd > label i { color: var(--danger-500); }
.input {
  min-height: 40px; padding: 0 12px; background: var(--n-100);
  border: 1px solid var(--n-200); border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.input.input-white { background: var(--n-0); border-color: var(--n-300); }
.input:hover { border-color: var(--n-300); }
.input:focus-within { background: var(--n-0); border-color: var(--brand-600); box-shadow: var(--focus-ring); }
.input:has([disabled]), .input.is-disabled { background: var(--n-100); color: var(--n-400); cursor: not-allowed; opacity: .7; }
.input .ph { color: var(--n-400); }
.input select { cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-600); }
.field-row, .ed-row { gap: var(--sp-3); }
.ed-del { border-color: var(--n-300); }
.ed-del:hover { border-color: var(--danger-500); background: var(--danger-50); }
.fu-sel:focus-visible { outline: none; border-color: var(--brand-600); box-shadow: var(--focus-ring-sm); }
.re-editor:focus-visible { outline: none; box-shadow: var(--focus-ring-sm); }

/* --- §5.9 开关 / 排行 / 配色 --- */
.tg { background: var(--n-300); }
.tg.on { background: var(--brand-600); }
.tg:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.rank-bar { background: var(--n-100); height: 8px; }
.rank-fill { background: linear-gradient(90deg, var(--brand-500), var(--brand-600)); }
.rank-fill.rank-amber { background: var(--warning-500); }
.theme-sel-item.on { border-color: var(--brand-600); background: var(--brand-50); box-shadow: 0 0 0 2px var(--brand-ring); }
.theme-dot.on { box-shadow: 0 0 0 2px var(--n-0), 0 0 0 4px var(--brand-600); }

/* --- §5.10 弹窗（保留 position:sticky;bottom:0，补 z-index:10） --- */
.overlay { background: rgba(15,23,41,.42); padding: 24px; }
.overlay.ov-stack { background: rgba(15,23,41,.52); }
.modal { background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-md); padding: var(--sp-6); box-shadow: var(--sh-3); }
.modal-head { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--n-200); }
.modal-head .m-title { font-size: var(--fs-16); font-weight: 700; color: var(--n-900); }
.modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--n-400); font-size: var(--fs-16); line-height: 1; }
.modal-close .ico { width: 16px; height: 16px; }
.modal-close:hover { background: var(--n-100); color: var(--n-900); }
.modal-close:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.modal-foot { position: sticky; bottom: 0; z-index: 10; background: var(--n-0); border-top: 1px solid var(--n-200); box-shadow: 0 -4px 12px rgba(16,24,40,.04); }
.modal-sec-title { font-size: var(--fs-13); font-weight: 700; color: var(--n-900); border-top: 1px solid var(--n-300); }

/* --- §5.11 空状态：48 处纯 CSS ::before 占位兜底（零 JS） --- */
.empty { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--n-500); font-size: var(--fs-13); }
.empty::before { content: ""; width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--n-100); border: 1px solid var(--n-200); }
.empty.is-rich { padding: 48px 16px; }
.empty.is-rich::before { display: none; }
.empty .ico { width: 28px; height: 28px; color: var(--n-500); }

/* --- §5.12 看板 / 拖拽（三条拖拽依赖原样保留） --- */
.opp-col { background: var(--n-50); border: 1px solid var(--n-200); border-radius: var(--r-md); }
.opp-col.over { background: var(--brand-50); border-color: var(--brand-600); box-shadow: inset 0 0 0 2px var(--brand-ring); }
.opp-card { border-radius: var(--r-sm); box-shadow: var(--sh-1); }
.opp-card:hover { box-shadow: var(--sh-2); border-color: var(--brand-200); transform: translateY(-1px); }
.opp-ghost { box-shadow: var(--sh-4); }
.opp-amt { font-size: var(--fs-16); font-weight: 700; }
.opp-empty, .fu-empty { border: 1px dashed var(--n-300); font-size: var(--fs-12); }

/* --- §5.13 橱窗 / 素材 --- */
.pw-card { border-radius: var(--r-md); box-shadow: var(--sh-1); }
.pw-card:hover { box-shadow: var(--sh-2); border-color: var(--brand-200); }
.pw-cover { background: linear-gradient(135deg, var(--brand-50), var(--n-100)); }
.pw-ph { color: var(--brand-600); opacity: .45; }
.pw-price { color: var(--brand-700); }
.pw-name:hover { color: var(--brand-700); }
.pw-ops { background: var(--n-50); border-top: 1px solid var(--n-200); }

/* --- §5.14 手机名片预览（对外窗口，局部 --brand 业务色绝不动） --- */
.phone-mock { border-radius: 24px; box-shadow: 0 12px 44px rgba(15,23,41,.20); background: var(--n-50); }
.ec-avatar { border-radius: 18px; box-shadow: var(--sh-2); }
.ec-btn-main:hover { filter: brightness(.94); }
.ec-btn-main:focus-visible, .ec-btn-ghost:focus-visible { box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.ec-chip, .ec-webrow { border-color: var(--n-200); }
.ec-card, .ec-pcard { border: 1px solid var(--n-200); box-shadow: var(--sh-1); }
.ec-sec-title::before, .pd-sec-t::before { background: var(--brand); }

/* --- §5.15 登录页（layout:false，.grad-emerald/.grad-blue 固定渐变保留） --- */
.login-brand .lb-logo { font-size: var(--fs-30); font-weight: 800; font-family: var(--font-zh); letter-spacing: .04em; }
.login-brand .lb-slogan { font-size: var(--fs-16); }
.login-card .lc-title { font-size: var(--fs-20); font-weight: 700; color: var(--n-900); }
.login-card .lc-sub { font-size: var(--fs-13); color: var(--n-500); }
.login-error { border: 1px solid #FECACA; }
/* 运管登录页无 .app 外壳：用 :has() 探测渐变类，主按钮取固定运管蓝色阶（零 JS 改动） */
.login:has(.grad-blue) .btn-primary, .login:has(.grad-blue) .btn-primary-blue { background: var(--bl-600); }
.login:has(.grad-blue) .btn-primary:hover, .login:has(.grad-blue) .btn-primary-blue:hover { background: var(--bl-700); }

/* --- §5.16 补齐 JS 已用但 CSS 零规则的既有 class（C9 / A7） --- */
.f-label { display: block; font-size: var(--fs-13); font-weight: 500; color: var(--n-600); margin-bottom: 6px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.init-confirm { background: var(--danger-50); border: 1px solid #FECACA; border-radius: var(--r-sm); padding: 12px 14px; color: var(--danger-700); font-size: var(--fs-13); }
.meta-list { display: flex; flex-direction: column; gap: 6px; }
.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--n-200); font-size: var(--fs-13); }
.notice-title { font-size: var(--fs-14); font-weight: 700; color: var(--n-900); }
.notice-body { font-size: var(--fs-13); color: var(--n-600); line-height: 1.7; }
.ops-content-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.re-file { font-size: var(--fs-12); color: var(--n-500); }
.right { text-align: right; }
.src-custom { display: flex; align-items: center; gap: var(--sp-2); }
.tag-blue { background: var(--info-50); color: var(--info-700); border: 1px solid #BAE6FD; border-radius: var(--r-xs); padding: 1px 6px; font-size: var(--fs-11); font-weight: 600; }
.tag-emerald { background: var(--success-50); color: var(--success-700); border: 1px solid #D1FAE5; border-radius: var(--r-xs); padding: 1px 6px; font-size: var(--fs-11); font-weight: 600; }

/* --- §3.5 数字对齐：tabular-nums + 右对齐（右对齐才是系统字体栈下的可靠手段） --- */
.s-value, .tbl .num, .rank-val, .opp-amt, .opp-col-amt, .pw-price,
.cd-kv b, .pay-mini .pm-amt, .pay-hint b, .ec-statrow b, .ec-pprice,
.pd-price, .ts-hex, .wx-count, .sync-count {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.tbl .num, .tbl td.num, .rank-val, .opp-amt, .opp-col-amt, .pw-price,
.cd-kv b, .pay-mini .pm-amt { text-align: right; }

/* --- v1.1 A7：--n-400(2.34:1) 不得承载需阅读文字 → --n-500(4.59:1) --- */
.muted, .empty, .s-note, .cell-sub, .fd-hint, .re-hint, .ph-txt,
.nav-sec, .brand .tag, .sidebar-foot .who .r, .ntf-time, .od-k, .fu-time,
.fu-op, .fu-hint, .fu-empty, .opp-empty, .opp-meta, .opp-col-num, .opp-col-amt,
.opp-cust, .mat-meta, .mt-meta, .up-s, .up-prev-t, .pick-sub, .sec-row .sr-desc,
.ts-hex, .wx-mrole, .wx-macct, .wx-dept-scope, .wx-count, .wx-depts-title,
.dict-sub, .lib-meta, .lib-tag, .lib-foot-count, .pv-meta, .pv-url,
.pw-sub, .pw-clicks, .pw-meta, .pw-badge, .compare-col .cc-count,
.flow-step .fs-desc, .rank-name, .ecard-mini .em-role, .ecard-mini .em-link,
.sync-count, .sync-meta i, .img-thumb span, .sc-desc, .pay-mini-empty,
.td-clip, .pay-mini .pm-date, .pay-mini .pm-op, .cd-kv { color: var(--n-500); }
/* 后台 11px 辅助字升 12px；.phone-mock 360px 预览内 .ec-beian/.ec-fi-meta/.pw-badge 保持 11px（不列入本规则） */
.fd-hint, .re-hint, .fu-hint, .mat-meta, .mt-meta, .ntf-time, .od-k,
.fu-time, .fu-op, .dict-sub, .lib-meta, .lib-tag, .up-s, .up-prev-t,
.pv-meta, .pv-url, .sync-count, .wx-macct, .wx-dept-scope, .wx-mrole,
.pw-sub, .pw-clicks, .pw-meta, .sc-desc, .pick-sub, .opp-col-num,
.opp-col-amt, .opp-meta, .opp-cust, .sec-row .sr-desc, .ts-hex,
.compare-col .cc-count, .flow-step .fs-desc, .ecard-mini .em-role { font-size: var(--fs-12); }

/* --- 全站焦点环（:where 保持零特异性，便于密集区后置小环覆盖） --- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); }
.input :is(input, textarea, select):focus-visible { box-shadow: none; outline: none; }
:disabled, [aria-disabled="true"] { cursor: not-allowed; }
.btn:disabled, .btn[aria-disabled="true"], .chip[aria-disabled="true"],
.seg-item[aria-disabled="true"], .etab[aria-disabled="true"] { opacity: .5; box-shadow: none; transform: none; }

/* ============================================================
   批 4 · 状态系统与 Phase2 §9.1 的 29 个新增 class
   九态优先级：error > loading > disabled > empty > active > focus-visible > hover > success > 默认
   ============================================================ */

/* --- 1. is-loading / spin（loading 态） --- */
.is-loading { pointer-events: none; }
.btn.is-loading { opacity: .8; cursor: progress; }
.spin {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- 2. 骨架屏（纯 CSS，只用中性色） --- */
.skeleton, .sk-line, .sk-card, .sk-table {
  background: linear-gradient(90deg, var(--n-100) 25%, var(--n-50) 50%, var(--n-100) 75%);
  background-size: 200% 100%;
  animation: sk 1.2s var(--ease-in-out) infinite;
  border-radius: var(--r-sm);
}
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-line { height: 12px; margin: 8px 0; }
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }
.sk-card { height: 96px; border-radius: var(--r-md); }
.sk-table { height: 36px; margin-bottom: 4px; }

/* --- 3. toast（Phase1 §3.11 预留 1400，避开 .opp-ghost 9999） --- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 1400; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--n-900); color: var(--n-0); border: 1px solid var(--n-700);
  font-size: var(--fs-13); font-weight: 500; line-height: 1.5; box-shadow: var(--sh-3);
}
.toast.is-success { background: var(--success-50); color: var(--success-700); border-color: #A7F3D0; }
.toast.is-error { background: var(--danger-50); color: var(--danger-700); border-color: #FECACA; }
.toast.is-loading { background: var(--n-0); color: var(--n-700); border-color: var(--n-200); }

/* --- 4. sr-only（读屏专用文本 / live region） --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- 5. error 态：字段级内联错误 + 弹窗级汇总（§4.5） --- */
.field.is-invalid > label, .fd.is-invalid > label { color: var(--danger-700); }
.input.is-error { border-color: var(--danger-500); box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.input.is-error:focus-within { border-color: var(--danger-500); box-shadow: 0 0 0 3px rgba(239,68,68,.15), var(--focus-ring); }
.err-text { font-size: var(--fs-12); color: var(--danger-700); margin-top: 4px; line-height: 1.5; }
.fd-hint.is-error, .re-hint.is-error { color: var(--danger-700); font-size: var(--fs-11); }
.form-alert {
  background: var(--danger-50); color: var(--danger-700); border: 1px solid #FECACA;
  font-size: var(--fs-13); padding: 10px 12px; border-radius: var(--r-sm);
  margin-bottom: var(--sp-3); line-height: 1.6;
}
.form-alert a { color: var(--danger-700); text-decoration: underline; }
.field.is-success .input { border-color: var(--success-500); }

/* --- 6. 状态修饰：disabled / selected / rich / scrollable --- */
.is-disabled, [aria-disabled="true"].is-disabled { opacity: .5; cursor: not-allowed; }
.is-selected { outline: none; }
.is-rich { position: relative; }
.is-scrollable { overflow-x: auto; }

/* --- 7. 富空状态文案与行动（§4.3；现有 48 处 .empty 文案一字不改） --- */
.empty-t { font-size: var(--fs-14); font-weight: 600; color: var(--n-700); line-height: 1.6; max-width: 420px; }
.empty-d { font-size: var(--fs-12); color: var(--n-500); line-height: 1.7; max-width: 420px; }
.empty-act { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }

/* --- 8. 搜索弹窗键盘化（O5 / §5.2） --- */
.search-hint { font-size: var(--fs-11); color: var(--n-500); padding: 6px 0 10px; border-bottom: 1px solid var(--n-200); margin-bottom: 8px; }
.search-group { font-size: var(--fs-11); font-weight: 700; color: var(--n-500); letter-spacing: .06em; padding: 10px 8px 4px; }
.search-active { background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand-600); }

/* --- 9. 顶栏汉堡 / 抽屉遮罩 / body.nav-open（挂 body，避免被 render() 冲掉） --- */
.t-menu { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--n-600); cursor: pointer; }
.t-menu .ico { width: 20px; height: 20px; }
.t-menu:hover { background: var(--n-100); color: var(--n-900); }
.t-menu:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.nav-scrim { display: none; position: fixed; inset: 0; z-index: 390; background: rgba(15,23,41,.42); }
body.nav-open .nav-scrim { display: block; }

/* --- 10. kbd / crumb / crumb-sep（P2 新增 class） --- */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border: 1px solid var(--n-300); border-bottom-width: 2px; border-radius: var(--r-xs);
  background: var(--n-0); color: var(--n-500);
  font-family: var(--font-mono); font-size: var(--fs-11); line-height: 1;
}
.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-12); color: var(--n-500); margin-bottom: var(--sp-3); }
.crumb a { color: var(--brand-700); }
.crumb a:hover { text-decoration: underline; }
.crumb-sep { color: var(--n-400); }

/* --- 11. prefers-reduced-motion 全局兜底（Phase1 §3.10 原值） --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Phase2 §5.6 补充：旋转 / 位移 / 骨架 / 抽屉逐项降级 */
  .opp-ghost, .opp-card.dragging { transform: none; }
  .opp-card:hover, .btn:active { transform: none; }
  .skeleton, .sk-line, .sk-card, .sk-table, .spin { animation: none; }
  .skeleton, .sk-line, .sk-card, .sk-table { background: var(--n-100); }
  .spin { border-right-color: currentColor; }
  .sidebar { transition: none; }
}

/* ============================================================
   批 5 · 断点归一
   既有 6 档：760 / 820 / 900 / 1100 / 1180（值全部不变，760 两处重复块已合并为一处）
   Phase1 新增 1280；Phase2 新增 480（只服务 428px 名片预览与弹窗）
   ============================================================ */

/* XL ≥1280：统计卡固定 4 列，不让 auto-fit 在超宽屏拉成 6 列；
   .content 不设 max-width（避免新增包裹层改 DOM），.two-col-34 / .cd-two / .sd-two 保持双栏 */
@media (min-width: 1280px) {
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* NN ≤480 · 428px 专项（手机端只做名片预览） */
@media (max-width: 480px) {
  .overlay { padding: 8px; overflow-x: auto; }
  .modal { padding: 16px; max-width: calc(100vw - 16px); max-height: 92vh; }
  .modal-foot { position: sticky; bottom: 0; z-index: 10; flex-wrap: wrap; }
  .modal-head .m-title { white-space: normal; }
  .phone-mock { width: min(360px, calc(100vw - 32px)); }
  /* .phone-mock 内联 --brand 与 .ec-hero::before 的 z-index 0/1 一个不动 */
  .ec-actions, .ec-btn-row { flex-wrap: wrap; }
  .stat-grid { grid-template-columns: 1fr; }
  .topbar { padding: 0 12px; }
  .topbar .t-sub { white-space: normal; }
  .t-search { min-width: 40px; width: 40px; padding: 0; justify-content: center; font-size: 0; }
  .t-search .ico { width: 18px; height: 18px; }
  .kbd { display: none; }
}

/* ===== 批 5 结束 · 全案交付 ===== */

/* ===== 11-09 账户弹窗 / 邀约分享（商户端左下角用户信息）=====
   仅商户端触发；弹窗挂 body，沿用 :root 的商户端 --brand-* / 中性 token，
   运管主题（.app:has(.sidebar.ops)）变量不影响，故此处不另写 :has() 规则。 */
.acct-trigger { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; border-radius: var(--r-sm); }
.acct-trigger:hover { background: var(--n-100); }
.acct-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.acct-plan { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--n-50); }
.acct-plan .field { margin-bottom: var(--sp-3); }
.acct-plan .field:last-child { margin-bottom: 0; }
.acct-copy { display: flex; align-items: stretch; gap: var(--sp-2); }
.acct-copy .input { flex: 1; min-width: 0; }
.acct-copy .btn { flex-shrink: 0; }
@media (max-width: 760px) {
  .acct-copy { flex-wrap: wrap; }
  .acct-copy .btn { width: 100%; }
}

/* ===== 11-09 账户上拉菜单（替代居中弹窗，Start-menu 风格，两端通用）=====
   挂 document.body、position: fixed 按触发区位置从底部上拉；
   强调色随端切换：商户绿 / 运管蓝（用 --accent 令牌，不依赖 .app:has 主题，因菜单在 body 之外）。 */
.acct-menu {
  position: fixed; z-index: 1000;
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 8px;
  box-shadow: 0 12px 32px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08);
  transform-origin: bottom left;
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .14s ease, transform .14s ease;
  --accent: #0B7A5E; --accent-soft: #ECFDF5;
}
.acct-menu.ops { --accent: #1D4ED8; --accent-soft: #EEF2FF; }
.acct-menu.is-open { opacity: 1; transform: translateY(0) scale(1); }
.acct-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.acct-menu-head .avatar { width: 36px; height: 36px; font-size: 14px; }
.acct-menu-id { min-width: 0; }
.acct-menu-id .n { font-size: 13px; font-weight: 600; color: var(--ink-0); }
.acct-menu-id .r { font-size: 11px; color: var(--n-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-plan { margin: 0 4px 8px; }
.acct-menu-list { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
.acct-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 8px; border: none; background: none; cursor: pointer;
  border-radius: 8px; color: var(--ink-2); font-size: 13px; font-weight: 500;
  text-align: left; font-family: inherit;
}
.acct-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
.acct-menu-item .ico { width: 18px; height: 18px; color: currentColor; flex-shrink: 0; }
.acct-menu-item .ico svg { width: 18px; height: 18px; display: block; }
.acct-menu-invite { padding: 10px 8px 4px; border-top: 1px solid var(--line); margin-top: 2px; }
.acct-menu-invite-label { font-size: 12px; font-weight: 600; color: var(--ink-1); margin-bottom: 6px; }
.acct-menu-hint { font-size: 11px; color: var(--n-500); margin-top: 6px; line-height: 1.5; }